优化构架

2026-08-03 18:52:21 +08:00
parent 3e347dd7a5
commit 35c713a7ca
51 changed files with 0 additions and 0 deletions
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { ArrowRight, LockKeyhole, UserRound } from '@lucide/vue'
+import baiyueLogoDark from '@/assets/brand/baiyue-logo-dark.png'
+import { useAuthStore } from '@/stores/auth'
+
+interface LoginForm {
+  account: string
+  password: string
+  remember: boolean
+}
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+const formRef = ref<FormInstance>()
+const loading = ref(false)
+const form = reactive<LoginForm>({
+  account: typeof route.query.account === 'string'
+    ? route.query.account
+    : '',
+  password: '',
+  remember: false,
+})
+const accountPattern = /^[A-Za-z0-9_]{4,64}$/
+
+const rules: FormRules<LoginForm> = {
+  account: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { pattern: accountPattern, message: '用户名为 4–64 位字母、数字或下划线', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 8, max: 72, message: '密码长度应为 8–72 位', trigger: 'blur' },
+  ],
+}
+
+async function submit() {
+  if (!formRef.value || loading.value) return
+  const valid = await formRef.value.validate().catch(() => false)
+  if (!valid) return
+
+  loading.value = true
+  try {
+    await auth.login(form.account.trim(), form.password, form.remember)
+    ElMessage.success('登录成功')
+    await router.replace(String(route.query.redirect || '/'))
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '登录失败，请检查账号后重试')
+  } finally {
+    loading.value = false
+  }
+}
+
+function showResetHint() {
+  ElMessage.info('请联系平台客服重置密码')
+}
+</script>
+
+<template>
+  <div class="auth-page">
+    <header class="auth-header">
+      <RouterLink to="/login" class="auth-brand"><img class="auth-brand-logo" :src="baiyueLogoDark" alt="柏悦物流" /></RouterLink>
+      <div>还没有企业账号？ <RouterLink to="/register">申请入驻</RouterLink></div>
+    </header>
+    <main class="auth-main">
+      <section class="auth-copy">
+        <h1>跨境物流业务<br />一个工作台完成</h1>
+        <p>从企业成员协作到头程订单跟进，统一管理业务与权限。</p>
+        <div class="auth-facts"><span>企业级权限</span><span>订单全程跟进</span><span>多端业务协同</span></div>
+      </section>
+      <section class="auth-card" aria-labelledby="login-title">
+        <h2 id="login-title">登录客户工作台</h2>
+        <p>企业注册成功后即可登录；提交订单前需完成企业资料审核</p>
+        <el-form ref="formRef" :model="form" :rules="rules" label-position="top" size="large" @submit.prevent="submit">
+          <el-form-item label="用户名" prop="account">
+            <el-input v-model="form.account" autocomplete="username" maxlength="64" placeholder="请输入用户名" :prefix-icon="UserRound" />
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input v-model="form.password" autocomplete="current-password" maxlength="72" type="password" show-password placeholder="请输入 8–72 位密码" :prefix-icon="LockKeyhole" @keyup.enter="submit" />
+          </el-form-item>
+          <div class="auth-form-options">
+            <el-checkbox v-model="form.remember">记住我</el-checkbox>
+            <button type="button" @click="showResetHint">忘记密码？</button>
+          </div>
+          <el-button native-type="submit" class="auth-submit" type="primary" :loading="loading">登录 <ArrowRight :size="17" /></el-button>
+        </el-form>
+      </section>
+    </main>
+  </div>
+</template>