feat: 新增登录页(账号密码+短信验证码+BASE_URL设置)与全局空闲登出

src/App.vue

@@ -5,5 +5,30 @@
 </template>
 
 <script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { message } from 'ant-design-vue'
 import zhCN from 'ant-design-vue/es/locale/zh_CN'
+import { useAuthStore } from '@/stores/auth'
+import { startIdleWatcher } from '@/utils/lastActive'
+
+const router = useRouter()
+const route = useRoute()
+const authStore = useAuthStore()
+
+let stopIdleWatcher = null
+
+onMounted(() => {
+  stopIdleWatcher = startIdleWatcher(() => {
+    if (authStore.accessToken && route.path !== '/login') {
+      authStore.clear()
+      message.warning('您已长时间无操作,请重新登录')
+      router.replace('/login')
+    }
+  })
+})
+
+onUnmounted(() => {
+  stopIdleWatcher && stopIdleWatcher()
+})
 </script>

src/components/SmsCodeInput.vue

@@ -0,0 +1,53 @@
+<template>
+  <a-input-group compact class="sms-code-input">
+    <a-input
+      :value="modelValue"
+      placeholder="请输入短信验证码"
+      style="width: calc(100% - 120px)"
+      @update:value="$emit('update:modelValue', $event)"
+    />
+    <a-button style="width: 120px" :disabled="counting || disabled" :loading="loading" @click="handleSend">
+      {{ counting ? `${remain}s后重发` : '获取验证码' }}
+    </a-button>
+  </a-input-group>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  modelValue: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false }
+})
+const emit = defineEmits(['update:modelValue', 'send'])
+
+const counting = ref(false)
+const remain = ref(60)
+let timer = null
+
+function startCountdown() {
+  counting.value = true
+  remain.value = 60
+  timer = setInterval(() => {
+    remain.value -= 1
+    if (remain.value <= 0) {
+      clearInterval(timer)
+      counting.value = false
+    }
+  }, 1000)
+}
+
+function handleSend() {
+  emit('send')
+}
+
+defineExpose({ startCountdown })
+</script>
+
+<style scoped>
+.sms-code-input {
+  display: flex;
+  width: 100%;
+}
+</style>

src/views/login/Login.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="login-page">
+    <a-button class="base-url-btn" shape="circle" @click="baseUrlModalOpen = true">
+      <SettingOutlined />
+    </a-button>
+
+    <div class="login-card">
+      <div class="login-title">凡荣e链</div>
+      <div class="login-subtitle">供应链金融服务管理后台</div>
+
+      <a-form layout="vertical" :model="form" @finish="handleLogin">
+        <a-form-item
+          name="username"
+          :rules="[{ required: true, message: '请输入账号' }]"
+        >
+          <a-input v-model:value="form.username" placeholder="请输入账号" size="large">
+            <template #prefix><UserOutlined /></template>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item
+          name="password"
+          :rules="[{ required: true, message: '请输入密码' }]"
+        >
+          <a-input-password v-model:value="form.password" placeholder="请输入密码" size="large">
+            <template #prefix><LockOutlined /></template>
+          </a-input-password>
+        </a-form-item>
+
+        <a-form-item name="code" :rules="[{ required: true, message: '请输入短信验证码' }]">
+          <SmsCodeInput
+            ref="smsInputRef"
+            v-model="form.code"
+            :loading="smsSending"
+            @send="handleSendSms"
+          />
+        </a-form-item>
+
+        <a-form-item>
+          <a-button type="primary" html-type="submit" block size="large" :loading="loginLoading">
+            登录
+          </a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+
+    <a-modal
+      v-model:open="baseUrlModalOpen"
+      title="接口地址设置"
+      @ok="handleSaveBaseUrl"
+    >
+      <a-form layout="vertical">
+        <a-form-item label="BASE_URL">
+          <a-input v-model:value="baseUrlInput" placeholder="例如 http://localhost:8888" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { message } from 'ant-design-vue'
+import { UserOutlined, LockOutlined, SettingOutlined } from '@ant-design/icons-vue'
+import SmsCodeInput from '@/components/SmsCodeInput.vue'
+import { sendSmsApi } from '@/api/auth'
+import { getBaseUrl, setBaseUrlOverride } from '@/api/request'
+import { useAuthStore } from '@/stores/auth'
+import { installDynamicRoutes, collectFirstPath } from '@/router/dynamic'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+const form = reactive({ username: '', password: '', code: '' })
+const smsInputRef = ref(null)
+const smsSending = ref(false)
+const loginLoading = ref(false)
+
+const baseUrlModalOpen = ref(false)
+const baseUrlInput = ref(getBaseUrl())
+
+async function handleSendSms() {
+  if (!form.username || !form.password) {
+    message.warning('请先填写账号和密码')
+    return
+  }
+  smsSending.value = true
+  try {
+    const res = await sendSmsApi({ username: form.username, password: form.password })
+    if (res.data.code === 200) {
+      message.success('验证码已发送')
+      smsInputRef.value?.startCountdown()
+    }
+  } finally {
+    smsSending.value = false
+  }
+}
+
+async function handleLogin() {
+  loginLoading.value = true
+  try {
+    const res = await authStore.login(form)
+    if (res.code === 200) {
+      installDynamicRoutes(router, authStore.menuTree)
+      authStore.markRoutesReady()
+      const target = route.query.redirect || collectFirstPath(authStore.menuTree) || '/403'
+      router.replace(target)
+    }
+  } finally {
+    loginLoading.value = false
+  }
+}
+
+function handleSaveBaseUrl() {
+  setBaseUrlOverride(baseUrlInput.value)
+  baseUrlModalOpen.value = false
+  message.success('接口地址已保存')
+}
+</script>
+
+<style scoped>
+.login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #1d3a6e 0%, #0b1f3f 100%);
+  position: relative;
+}
+.base-url-btn {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+}
+.login-card {
+  width: 400px;
+  padding: 40px 36px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+.login-title {
+  font-size: 26px;
+  font-weight: 700;
+  text-align: center;
+  color: #1d3a6e;
+}
+.login-subtitle {
+  text-align: center;
+  color: #999;
+  margin-bottom: 24px;
+}
+</style>