From b9eaa5a32abd316d1920c81592d1c8293dc1df3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Thu, 17 Sep 2026 16:30:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E7=99=BB=E5=BD=95=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E5=8C=BA=E5=AF=B9=E9=BD=90=E5=AE=A2=E8=BF=B9V1?=
 =?UTF-8?q?=E2=80=94=E2=80=94=E7=A7=BB=E9=99=A4=E8=B4=A6=E5=8F=B7=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89/=E6=B3=A8=E5=86=8C/=E5=BF=98=E8=AE=B0=E5=AF=86?=
 =?UTF-8?q?=E7=A0=81=E5=85=A5=E5=8F=A3=EF=BC=8C=E5=9B=BA=E5=AE=9A=E6=B5=85?=
 =?UTF-8?q?=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 admin/src/views/auth/login/index.vue | 94 ++++++----------------------
 admin/src/views/auth/login/style.css | 43 +++++++++++--
 2 files changed, 58 insertions(+), 79 deletions(-)

diff --git a/admin/src/views/auth/login/index.vue b/admin/src/views/auth/login/index.vue
index 47dd8e7..d12b1f1 100644
--- a/admin/src/views/auth/login/index.vue
+++ b/admin/src/views/auth/login/index.vue
@@ -3,9 +3,7 @@
   <div class="flex w-full h-screen">
     <LoginLeftView />
 
-    <div class="relative flex-1">
-      <AuthTopBar />
-
+    <div class="relative flex-1 auth-right-bg">
       <div class="auth-right-wrap">
         <div class="form">
           <h3 class="title">{{ $t('login.title') }}</h3>
@@ -14,33 +12,24 @@
             ref="formRef"
             :model="formData"
             :rules="rules"
+            label-position="top"
             :key="formKey"
             @keyup.enter="handleSubmit"
-            style="margin-top: 25px"
+            class="login-form"
           >
-            <ElFormItem prop="account">
-              <ElSelect v-model="formData.account" @change="setupAccount">
-                <ElOption
-                  v-for="account in accounts"
-                  :key="account.key"
-                  :label="account.label"
-                  :value="account.key"
-                >
-                  <span>{{ account.label }}</span>
-                </ElOption>
-              </ElSelect>
-            </ElFormItem>
-            <ElFormItem prop="username">
+            <ElFormItem :label="$t('login.accountLabel')" prop="username">
               <ElInput
                 class="custom-height"
                 :placeholder="$t('login.placeholder.username')"
+                :prefix-icon="User"
                 v-model.trim="formData.username"
               />
             </ElFormItem>
-            <ElFormItem prop="password">
+            <ElFormItem :label="$t('login.passwordLabel')" prop="password">
               <ElInput
                 class="custom-height"
                 :placeholder="$t('login.placeholder.password')"
+                :prefix-icon="Lock"
                 v-model.trim="formData.password"
                 type="password"
                 autocomplete="off"
@@ -49,7 +38,7 @@
             </ElFormItem>
 
             <!-- 推拽验证 -->
-            <div class="relative pb-5 mt-6">
+            <div class="relative pb-5 mt-4">
               <div
                 class="relative z-[2] overflow-hidden select-none rounded-lg border border-transparent tad-300"
                 :class="{ '!border-[#FF4E4F]': !isPassing && isClickPass }"
@@ -58,11 +47,13 @@
                   ref="dragVerify"
                   v-model:value="isPassing"
                   :text="$t('login.sliderText')"
-                  textColor="var(--art-gray-700)"
+                  textColor="#4D5875"
                   :successText="$t('login.sliderSuccessText')"
                   progressBarBg="var(--main-color)"
-                  :background="isDark ? '#26272F' : '#F1F1F4'"
-                  handlerBg="var(--default-box-color)"
+                  background="#E8EEF6"
+                  handlerBg="#FFFFFF"
+                  :height="56"
+                  radius="10px"
                 />
               </div>
               <p
@@ -77,12 +68,9 @@
               <ElCheckbox v-model="formData.rememberPassword">{{
                 $t('login.rememberPwd')
               }}</ElCheckbox>
-              <RouterLink class="text-theme" :to="{ name: 'ForgetPassword' }">{{
-                $t('login.forgetPwd')
-              }}</RouterLink>
             </div>
 
-            <div style="margin-top: 30px">
+            <div class="mt-6">
               <ElButton
                 class="w-full custom-height"
                 type="primary"
@@ -94,11 +82,10 @@
               </ElButton>
             </div>
 
-            <div class="mt-5 text-sm text-gray-600">
-              <span>{{ $t('login.noAccount') }}</span>
-              <RouterLink class="text-theme" :to="{ name: 'Register' }">{{
-                $t('login.register')
-              }}</RouterLink>
+            <div class="admin-assigned">
+              <span class="line"></span>
+              <span class="text">{{ $t('login.adminAssigned') }}</span>
+              <span class="line"></span>
             </div>
           </ElForm>
         </div>
@@ -109,17 +96,15 @@
 
 <script setup lang="ts">
   import AppConfig from '@/config'
+  import { User, Lock } from '@element-plus/icons-vue'
   import { useUserStore } from '@/store/modules/user'
   import { useI18n } from 'vue-i18n'
   import { HttpError } from '@/utils/http/error'
   import { fetchLogin } from '@/api/auth'
   import { ElNotification, type FormInstance, type FormRules } from 'element-plus'
-  import { useSettingStore } from '@/store/modules/setting'
 
   defineOptions({ name: 'Login' })
 
-  const settingStore = useSettingStore()
-  const { isDark } = storeToRefs(settingStore)
   const { t, locale } = useI18n()
   const formKey = ref(0)
 
@@ -128,27 +113,6 @@
     formKey.value++
   })
 
-  type AccountKey = 'admin'
-
-  export interface Account {
-    key: AccountKey
-    label: string
-    userName: string
-    password: string
-    roles: string[]
-  }
-
-  // 对接 Django 后端真实账号（M1 单管理员），密码不预填
-  const accounts = computed<Account[]>(() => [
-    {
-      key: 'admin',
-      label: t('login.roles.admin'),
-      userName: 'admin',
-      password: '',
-      roles: ['R_ADMIN']
-    }
-  ])
-
   const dragVerify = ref()
 
   const userStore = useUserStore()
@@ -162,7 +126,7 @@
 
   const formData = reactive({
     account: '',
-    username: '',
+    username: 'admin',
     password: '',
     rememberPassword: true
   })
@@ -174,18 +138,6 @@
 
   const loading = ref(false)
 
-  onMounted(() => {
-    setupAccount('admin')
-  })
-
-  // 设置账号
-  const setupAccount = (key: AccountKey) => {
-    const selectedAccount = accounts.value.find((account: Account) => account.key === key)
-    formData.account = key
-    formData.username = selectedAccount?.userName ?? ''
-    formData.password = selectedAccount?.password ?? ''
-  }
-
   // 登录
   const handleSubmit = async () => {
     if (!formRef.value) return
@@ -263,9 +215,3 @@
 <style scoped>
   @import './style.css';
 </style>
-
-<style lang="scss" scoped>
-  :deep(.el-select__wrapper) {
-    height: 40px !important;
-  }
-</style>
diff --git a/admin/src/views/auth/login/style.css b/admin/src/views/auth/login/style.css
index bd8c3a9..8a97903 100644
--- a/admin/src/views/auth/login/style.css
+++ b/admin/src/views/auth/login/style.css
@@ -1,8 +1,22 @@
 @reference '@styles/core/tailwind.css';
 
-/* 授权页右侧区域 */
+/* 授权页右侧区域（客迹V1：固定浅色，不随暗色主题变化） */
+.auth-right-bg {
+  /* 覆盖 Element Plus 暗色变量，防止 html.dark 时表单控件变暗 */
+  --el-bg-color: #ffffff;
+  --el-bg-color-overlay: #ffffff;
+  --el-fill-color-blank: #ffffff;
+  --el-fill-color-light: #f5f7fa;
+  --el-text-color-primary: #1a1a1a;
+  --el-text-color-regular: #303133;
+  --el-border-color: #dcdfe6;
+  --el-border-color-light: #e4e7ed;
+  --el-border-color-lighter: #ebeef5;
+  background-color: #f7f8fa;
+}
+
 .auth-right-wrap {
-  @apply absolute inset-0 w-[440px] h-[650px] py-[5px] m-auto overflow-hidden
+  @apply absolute inset-0 w-[440px] h-[680px] py-[5px] m-auto overflow-hidden
     max-sm:px-7 max-sm:w-full
     animate-[slideInRight_0.6s_cubic-bezier(0.25,0.46,0.45,0.94)_forwards]
     max-md:animate-none;
@@ -12,15 +26,34 @@
   }
 
   .title {
-    @apply text-g-900 text-4xl font-semibold max-md:text-3xl max-sm:pt-10;
+    @apply text-[#1A1A1A] text-[32px] font-semibold text-center;
   }
 
   .sub-title {
-    @apply mt-[10px] text-g-600 text-sm;
+    @apply mt-[10px] text-[#8A94A6] text-[15px] text-center;
   }
 
   .custom-height {
-    @apply !h-[40px];
+    @apply !h-[56px];
+  }
+
+  /* 表单标签样式 */
+  :deep(.el-form-item__label) {
+    color: #1a1a1a;
+    font-weight: 600;
+  }
+
+  /* 账号由管理员分配 */
+  .admin-assigned {
+    @apply flex-cc gap-3 mt-8;
+
+    .line {
+      @apply inline-block w-6 h-px bg-[#D3D9E3];
+    }
+
+    .text {
+      @apply text-[13px] text-[#9AA3B2];
+    }
   }
 }