From 630f2819cbf75892466b3f23a089592e30b10d04 Mon Sep 17 00:00:00 2001
From: "Logan.Li" <admin@attacker.club>
Date: Sun, 1 Nov 2026 05:59:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(auth):=20=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E6=94=B9=E7=89=88=E5=B9=B6=E6=94=AF=E6=8C=81=E3=80=8C=E8=AE=B0?=
 =?UTF-8?q?=E4=BD=8F=E5=AF=86=E7=A0=81=E3=80=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 左右分栏：左侧品牌区（产品定位 + 三条能力要点），窄屏自动收起只留表单
- 表单补字段标签、记住密码勾选与提示、登录按钮 loading 文案
- 记住密码：本机保存账号密码（XOR+Base64 混淆，非明文），下次自动填充并恢复勾选；取消勾选再登录会清除
- 清掉模板化的单卡片登录页
---
 frontend/src/views/Login.vue | 366 +++++++++++++++++++++++++++++------
 1 file changed, 309 insertions(+), 57 deletions(-)

diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 8258855..6ae5742 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -1,51 +1,97 @@
 <template>
-  <div class="login-container">
-    <div class="login-card">
-      <div class="login-header">
-        <h2 class="login-title">opsx-licence</h2>
+  <div class="login-page">
+    <!-- 左侧品牌区：桌面显示，窄屏隐藏 -->
+    <aside class="brand-panel">
+      <div class="brand-glow"></div>
+      <div class="brand-inner">
+        <div class="brand-logo">
+          <el-icon :size="26"><Key /></el-icon>
+          <span>opsx-licence</span>
+        </div>
+        <h1 class="brand-title">License 授权服务控制台</h1>
+        <p class="brand-desc">
+          产品授权签发、设备激活追踪、订单与收款对账——签发、验证、回收在同一个后台闭环。
+        </p>
+        <ul class="brand-points">
+          <li>
+            <b>在线与离线双签发</b>
+            <span>在线激活与离线序列号共用一套授权模型，断网环境同样可交付。</span>
+          </li>
+          <li>
+            <b>设备激活可追溯</b>
+            <span>激活记录带归属地与平台分布，异常设备能力强制下线。</span>
+          </li>
+          <li>
+            <b>多渠道收款对账</b>
+            <span>微信支付、支付宝与海外支付统一进订单视图，便于核对续费。</span>
+          </li>
+        </ul>
+        <div class="brand-foot">杭州日理万机智能科技有限公司</div>
       </div>
+    </aside>
+
+    <!-- 右侧登录区 -->
+    <main class="form-panel">
+      <div class="form-card">
+        <div class="form-head">
+          <h2>登录控制台</h2>
+          <p>使用管理员账号登录，进入授权管理后台。</p>
+        </div>
+
+        <el-form
+          ref="loginFormRef"
+          :model="loginForm"
+          :rules="loginRules"
+          size="large"
+          label-position="top"
+          @keyup.enter="handleLogin"
+        >
+          <el-form-item label="用户名" prop="username">
+            <el-input
+              v-model="loginForm.username"
+              placeholder="请输入用户名"
+              :prefix-icon="User"
+              autocomplete="username"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              placeholder="请输入密码"
+              show-password
+              :prefix-icon="Lock"
+              autocomplete="current-password"
+            />
+          </el-form-item>
+
+          <div class="form-extra">
+            <el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
+            <span class="remember-hint">{{ rememberHint }}</span>
+          </div>
 
-      <el-form
-        ref="loginFormRef"
-        :model="loginForm"
-        :rules="loginRules"
-        size="large"
-        @keyup.enter="handleLogin"
-      >
-        <el-form-item prop="username">
-          <el-input
-            v-model="loginForm.username"
-            placeholder="用户名"
-            :prefix-icon="User"
-          />
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input
-            v-model="loginForm.password"
-            type="password"
-            placeholder="密码"
-            show-password
-            :prefix-icon="Lock"
-          />
-        </el-form-item>
-        <el-form-item>
           <el-button
             type="primary"
+            class="submit-btn"
             :loading="loading"
-            style="width: 100%"
             @click="handleLogin"
           >
-            登 录
+            {{ loading ? '登录中…' : '登 录' }}
           </el-button>
-        </el-form-item>
-      </el-form>
-    </div>
+        </el-form>
+
+        <p class="form-note">
+          连续登录失败会被限流，请确认账号密码后再重试。
+        </p>
+      </div>
+    </main>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { User, Lock } from '@element-plus/icons-vue'
 import { useUserStore } from '@/stores/user'
 
@@ -55,59 +101,265 @@ const userStore = useUserStore()
 
 const loginFormRef = ref(null)
 const loading = ref(false)
+const rememberPassword = ref(false)
+
 const loginForm = reactive({
   username: '',
   password: '',
 })
+
 const loginRules = {
   username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
 }
 
+const rememberHint = computed(() =>
+  rememberPassword.value ? '已在本机保存，下次自动填充' : '勾选后本机自动填充账号密码'
+)
+
+// ============ 「记住密码」本地存储 ============
+// 仅保存在本机浏览器；做一层 XOR + Base64 混淆，避免明文躺在 localStorage 里被随手看到。
+// ⚠️ 这是混淆而非加密，公共设备请勿勾选。 // Logan.Li
+const REMEMBER_KEY = 'opsx_licence_remember'
+const REMEMBER_USERNAME_KEY = 'opsx_licence_last_username'
+const XOR_KEY = 0x2f
+
+function obfuscate(text) {
+  const xored = Array.from(text)
+    .map((ch) => String.fromCharCode(ch.charCodeAt(0) ^ XOR_KEY))
+    .join('')
+  return btoa(encodeURIComponent(xored))
+}
+
+function deobfuscate(token) {
+  const xored = decodeURIComponent(atob(token))
+  return Array.from(xored)
+    .map((ch) => String.fromCharCode(ch.charCodeAt(0) ^ XOR_KEY))
+    .join('')
+}
+
+// 读取上次的账号 / 密码 // Logan.Li
+function restoreRemembered() {
+  try {
+    const lastUser = localStorage.getItem(REMEMBER_USERNAME_KEY)
+    if (lastUser) loginForm.username = lastUser
+
+    const saved = localStorage.getItem(REMEMBER_KEY)
+    if (!saved) return
+    const data = JSON.parse(deobfuscate(saved))
+    if (data?.u) loginForm.username = data.u
+    if (data?.p) {
+      loginForm.password = data.p
+      rememberPassword.value = true
+    }
+  } catch {
+    localStorage.removeItem(REMEMBER_KEY)
+  }
+}
+
+// 保存 / 清理记住的凭据 // Logan.Li
+function persistRemembered() {
+  const username = loginForm.username.trim()
+  if (username) {
+    localStorage.setItem(REMEMBER_USERNAME_KEY, username)
+  }
+  if (rememberPassword.value && username) {
+    localStorage.setItem(
+      REMEMBER_KEY,
+      obfuscate(JSON.stringify({ u: username, p: loginForm.password }))
+    )
+  } else {
+    localStorage.removeItem(REMEMBER_KEY)
+  }
+}
+
 // 处理登录 // Logan.Li
 async function handleLogin() {
-  if (!loginFormRef.value) return
+  if (!loginFormRef.value || loading.value) return
   await loginFormRef.value.validate(async (valid) => {
     if (!valid) return
     loading.value = true
     try {
-      await userStore.login(loginForm)
-      const redirect = route.query.redirect || '/'
+      await userStore.login({
+        username: loginForm.username.trim(),
+        password: loginForm.password,
+      })
+      persistRemembered()
+      const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/'
       router.push(redirect)
     } catch {
-      // 拦截器已处理错误提示
+      // 拦截器已统一提示错误
     } finally {
       loading.value = false
     }
   })
 }
+
+onMounted(restoreRemembered)
 </script>
 
 <style scoped>
-.login-container {
-  height: 100vh;
+.login-page {
+  display: flex;
+  min-height: 100vh;
+  background: #f5f7fa;
+}
+
+/* ============ 左侧品牌区 ============ */
+.brand-panel {
+  position: relative;
+  flex: 0 0 46%;
+  max-width: 620px;
+  overflow: hidden;
+  background: linear-gradient(150deg, #0b1b3a 0%, #10294f 48%, #0d3b57 100%);
+  color: #e8eefc;
+  display: flex;
+  align-items: center;
+}
+.brand-glow {
+  position: absolute;
+  width: 520px;
+  height: 520px;
+  right: -180px;
+  top: -160px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(64, 158, 255, 0.35) 0%, rgba(64, 158, 255, 0) 70%);
+  pointer-events: none;
+}
+.brand-inner {
+  position: relative;
+  padding: 56px 56px 48px;
+  width: 100%;
+}
+.brand-logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 17px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #fff;
+}
+.brand-title {
+  margin: 34px 0 14px;
+  font-size: 30px;
+  line-height: 1.35;
+  font-weight: 600;
+  color: #fff;
+}
+.brand-desc {
+  margin: 0;
+  max-width: 30em;
+  font-size: 14px;
+  line-height: 1.75;
+  color: rgba(232, 238, 252, 0.72);
+}
+.brand-points {
+  margin: 38px 0 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+.brand-points li {
+  padding-left: 18px;
+  border-left: 2px solid rgba(64, 158, 255, 0.5);
+}
+.brand-points b {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 5px;
+}
+.brand-points span {
+  font-size: 13px;
+  line-height: 1.65;
+  color: rgba(232, 238, 252, 0.6);
+}
+.brand-foot {
+  margin-top: 46px;
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  color: rgba(232, 238, 252, 0.38);
+}
+
+/* ============ 右侧表单区 ============ */
+.form-panel {
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f3f5f7;
+  padding: 48px 24px;
 }
-.login-card {
-  width: 380px;
-  padding: 36px 32px 28px;
-  background: #fff;
-  border: 1px solid #ebeef5;
-  border-radius: 10px;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+.form-card {
+  width: 100%;
+  max-width: 380px;
 }
-.login-header {
-  text-align: center;
-  margin-bottom: 28px;
+.form-head {
+  margin-bottom: 26px;
 }
-.login-title {
-  margin: 0;
-  font-size: 20px;
+.form-head h2 {
+  margin: 0 0 8px;
+  font-size: 22px;
   font-weight: 600;
-  letter-spacing: 0.02em;
-  color: #303133;
+  color: #1f2d3d;
+}
+.form-head p {
+  margin: 0;
+  font-size: 13px;
+  color: #8492a6;
+}
+.form-extra {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: -4px 0 20px;
+}
+.remember-hint {
+  font-size: 12px;
+  color: #a3adbd;
+}
+.submit-btn {
+  width: 100%;
+  font-size: 15px;
+  letter-spacing: 0.08em;
+}
+.form-note {
+  margin: 18px 0 0;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #a3adbd;
+}
+
+/* 表单项标签更紧凑，整体更接近控制台观感 */
+.form-card :deep(.el-form-item) {
+  margin-bottom: 18px;
+}
+.form-card :deep(.el-form-item__label) {
+  padding-bottom: 6px;
+  font-size: 13px;
+  color: #5a6b83;
+}
+
+/* ============ 窄屏：收起品牌区，表单居中 ============ */
+@media (max-width: 900px) {
+  .brand-panel {
+    display: none;
+  }
+  .form-panel {
+    padding: 32px 20px;
+  }
+  .form-head {
+    text-align: center;
+  }
+}
+
+@media (max-width: 420px) {
+  .form-card :deep(.el-form-item__label) {
+    font-size: 12px;
+  }
 }
 </style>