feat(admin): redesign branded login page

ai_knowledge_base_v2/apps/admin-web/src/components/AdminLoginView.vue

@@ -16,28 +16,97 @@ function submit() {
 
 <template>
   <main class="login-page">
-    <section class="login-hero">
-      <div class="login-hero-main">
-        <div class="login-brand">
-          <span>答</span>
+    <section class="login-hero" aria-label="大本营千问千答后台登录">
+      <section class="login-hero-main" aria-label="产品介绍">
+        <header class="login-brand">
+          <span class="login-brand-mark" aria-hidden="true">
+            <svg viewBox="0 0 64 64" role="presentation">
+              <circle cx="32" cy="32" r="28" />
+              <path d="M32 9c4 7 8 10 15 11-1 7 1 12 7 17-6 4-9 9-9 16-7-1-12 1-17 6-4-6-9-9-16-9 1-7-1-12-6-17 6-4 9-9 9-16 7 1 12-1 17-6 4 6 9 9 16 9Z" />
+              <path d="M32 19c2.5 5 5.5 7.5 11 8-4 3.5-5.5 7.5-4 13-4.7-2.5-8.7-2.5-13 0 1.5-5.5 0-9.5-4-13 5.5-.5 8.5-3 10-8Z" />
+              <circle cx="32" cy="32" r="3" />
+            </svg>
+          </span>
+          <span class="login-brand-copy">
             <strong>大本营千问千答</strong>
+            <small>智能知识管理与问答系统</small>
+          </span>
+        </header>
+
+        <div class="login-orbit" aria-hidden="true"><i></i></div>
+        <div class="login-dot-matrix" aria-hidden="true"></div>
+
+        <div class="login-brand-content">
+          <h1>
+            把大本营答疑、知识库和学员<br />
+            运营放在<span>同一个控制台</span>里
+          </h1>
+          <p>
+            统一维护学员名单、开放知识库、模型接入、Agent 调试、问答记录和系统运行参数，让日常运营更清晰，也让排查与交接更从容。
+          </p>
+
+          <div class="login-highlights" aria-label="核心能力">
+            <div class="login-highlight-item">
+              <span aria-hidden="true">
+                <svg viewBox="0 0 24 24"><rect x="5" y="3.5" width="13" height="17" rx="2" /><path d="M8.5 7.5h5M8.5 11.5h6M8.5 15.5h3.5M18 7h2v11a2 2 0 0 1-2 2" /></svg>
+              </span>
+              <strong>大本营知识库</strong>
             </div>
-        <h1>把大本营答疑、知识库和学员运营放在同一个控制台里。</h1>
-        <p>统一维护学员名单、开放知识库、模型接入、Agent 调试、问答记录和系统运行参数，方便排查与交接。</p>
-        <div class="login-highlights">
-          <span>大本营知识库</span>
-          <span>答疑 Agent 调试</span>
-          <span>问答记录审计</span>
+            <div class="login-highlight-item">
+              <span aria-hidden="true">
+                <svg viewBox="0 0 24 24"><rect x="4" y="7" width="16" height="12" rx="4" /><path d="M9 12h.01M15 12h.01M8 16h8M12 7V4M10.5 3h3" /></svg>
+              </span>
+              <strong>答疑 Agent 调试</strong>
+            </div>
+            <div class="login-highlight-item">
+              <span aria-hidden="true">
+                <svg viewBox="0 0 24 24"><path d="M5 5.5h14v11H9l-4 3v-14Z" /><path d="M8.5 9.5h7M8.5 13h4" /></svg>
+              </span>
+              <strong>问答记录审计</strong>
+            </div>
+            <div class="login-highlight-item">
+              <span aria-hidden="true">
+                <svg viewBox="0 0 24 24"><path d="M12 3.5 15 5l3.3-.2.2 3.3 1.7 2.9-2 2.7-.5 3.3-3.3.5-2.4 2.3-2.4-2.3-3.3-.5-.5-3.3-2-2.7 1.7-2.9.2-3.3L9 5l3-1.5Z" /><circle cx="12" cy="11.7" r="3" /></svg>
+              </span>
+              <strong>系统运行管理</strong>
             </div>
           </div>
-      <section class="login-card">
+        </div>
+
+        <svg class="login-wave" viewBox="0 0 920 250" preserveAspectRatio="none" aria-hidden="true">
+          <path d="M-20 45C105 25 110 150 250 151S410 85 530 118s185 97 410 18" />
+          <path d="M-20 62C95 40 127 169 264 167s160-64 277-28 180 82 399 18" />
+          <path d="M-20 80C90 57 140 188 278 184s159-60 273-23 176 69 389 17" />
+          <path d="M-20 105C88 78 142 209 295 202s168-54 278-16 165 56 367 13" />
+          <path d="M-20 133C95 102 157 224 315 220s164-46 282-11 158 43 343 12" />
+        </svg>
+
+        <svg class="login-lotus" viewBox="0 0 360 300" aria-hidden="true">
+          <g>
+            <path d="M180 258C126 219 119 159 180 72c61 87 54 147 0 186Z" />
+            <path d="M177 260C112 244 78 196 99 99c75 58 98 108 78 161Z" />
+            <path d="M183 260c65-16 99-64 78-161-75 58-98 108-78 161Z" />
+            <path d="M162 264C92 266 47 232 34 143c78 30 119 70 128 121Z" />
+            <path d="M198 264c70 2 115-32 128-121-78 30-119 70-128 121Z" />
+            <path d="M119 275c-45 5-80-8-111-41 56 3 97 15 111 41ZM241 275c45 5 80-8 111-41-56 3-97 15-111 41Z" />
+          </g>
+        </svg>
+      </section>
+
+      <section class="login-card" aria-labelledby="login-title">
+        <div class="login-card-inner">
           <div class="login-card-head">
-          <h2>登录答疑后台</h2>
-          <p>请输入大本营答疑助手后台管理员账号和密码。</p>
+            <span class="login-card-eyebrow">ADMIN CONSOLE</span>
+            <h2 id="login-title">欢迎登录</h2>
+            <p>登录大本营答疑助手后台管理系统</p>
           </div>
           <el-form label-position="top" autocomplete="off" @submit.prevent="submit">
             <el-form-item label="管理员账号">
-            <el-input v-model="form.username" size="large" placeholder="请输入管理员账号" autocomplete="off" />
+              <el-input v-model="form.username" size="large" placeholder="请输入管理员账号" autocomplete="off">
+                <template #prefix>
+                  <svg class="login-input-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="3.5" /><path d="M5.5 19c.6-4 2.8-6 6.5-6s5.9 2 6.5 6" /></svg>
+                </template>
+              </el-input>
             </el-form-item>
             <el-form-item label="密码">
               <el-input
@@ -47,13 +116,21 @@ function submit() {
                 placeholder="请输入密码"
                 autocomplete="new-password"
                 show-password
-            />
+              >
+                <template #prefix>
+                  <svg class="login-input-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="10" width="14" height="10" rx="2" /><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v2.5" /></svg>
+                </template>
+              </el-input>
             </el-form-item>
             <el-button type="primary" native-type="submit" :loading="loading" class="full-btn login-submit">
               进入答疑后台
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6" /></svg>
             </el-button>
           </el-form>
+          <p class="login-security-note"><span aria-hidden="true"></span>仅限已授权的后台管理员访问</p>
+        </div>
       </section>
     </section>
+    <p class="login-copyright">© 2026 大本营教育科技（上海）有限公司</p>
   </main>
 </template>

ai_knowledge_base_v2/apps/admin-web/src/styles.css

@@ -24,57 +24,383 @@ textarea {
 .login-page {
   min-height: 100vh;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 48px;
+  padding: 32px 36px 18px;
   background:
-    linear-gradient(135deg, rgba(15, 115, 93, 0.14), rgba(234, 179, 8, 0.08)),
-    #f4f7f6;
+    radial-gradient(circle at 18% 18%, rgba(178, 218, 204, 0.2), transparent 31%),
+    radial-gradient(circle at 86% 83%, rgba(204, 225, 216, 0.18), transparent 26%),
+    #f5f7f6;
 }
 
 .login-hero {
-  width: min(1080px, 100%);
-  min-height: 620px;
+  width: min(1544px, 100%);
+  min-height: min(886px, calc(100vh - 84px));
   display: grid;
-  grid-template-columns: minmax(0, 1.1fr) 420px;
+  grid-template-columns: minmax(0, 1.64fr) minmax(440px, 1fr);
   overflow: hidden;
-  border: 1px solid #dce6e2;
-  border-radius: 8px;
-  background: #ffffff;
-  box-shadow: 0 24px 70px rgba(31, 45, 42, 0.12);
+  border: 1px solid rgba(26, 79, 66, 0.08);
+  border-radius: 26px;
+  background: #f9fbfa;
+  box-shadow: 0 16px 48px rgba(25, 56, 48, 0.09), 0 2px 8px rgba(25, 56, 48, 0.04);
 }
 
 .login-hero-main {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 48px;
-  background: #12352e;
-  color: #ffffff;
-}
-
-.login-hero-main::after {
-  content: "";
-  position: absolute;
-  right: 42px;
-  bottom: 42px;
-  width: 280px;
-  height: 280px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  border-radius: 50%;
+  min-width: 0;
+  overflow: hidden;
+  padding: clamp(34px, 3vw, 48px) clamp(40px, 4vw, 64px);
+  background:
+    linear-gradient(150deg, rgba(255, 255, 255, 0.84), rgba(238, 247, 243, 0.7)),
+    #f5faf8;
+  color: #102f28;
 }
 
 .login-brand {
-  position: relative;
-  z-index: 1;
+  position: absolute;
+  z-index: 4;
+  top: clamp(34px, 3vw, 48px);
+  left: clamp(40px, 4vw, 64px);
   display: flex;
-  gap: 12px;
+  gap: 14px;
   align-items: center;
-  font-size: 15px;
 }
 
-.login-brand span,
+.login-brand-mark {
+  width: 52px;
+  height: 52px;
+  color: #1d8c69;
+}
+
+.login-brand-mark svg {
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.7;
+}
+
+.login-brand-copy {
+  display: grid;
+  gap: 3px;
+  color: #12352e;
+}
+
+.login-brand-copy strong {
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 760;
+  letter-spacing: 0.02em;
+}
+
+.login-brand-copy small {
+  color: #496b61;
+  font-size: 13px;
+  line-height: 1.3;
+}
+
+.login-brand-content {
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  left: clamp(72px, 9.5vw, 150px);
+  width: min(690px, calc(100% - 190px));
+  transform: translateY(-42%);
+}
+
+.login-brand-content h1 {
+  margin: 0;
+  color: #102f28;
+  font-size: clamp(31px, 2.25vw, 42px);
+  line-height: 1.42;
+  font-weight: 680;
+  letter-spacing: -0.025em;
+}
+
+.login-brand-content h1 span {
+  color: #238d68;
+}
+
+.login-brand-content > p {
+  max-width: 650px;
+  margin: 22px 0 0;
+  color: #4a6960;
+  font-size: 15px;
+  line-height: 1.9;
+}
+
+.login-highlights {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  margin-top: 36px;
+}
+
+.login-highlight-item {
+  min-width: 0;
+  display: grid;
+  justify-items: center;
+  gap: 11px;
+  color: #24483e;
+  text-align: center;
+}
+
+.login-highlight-item > span {
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(32, 139, 103, 0.18);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.7);
+  box-shadow: 0 8px 20px rgba(40, 95, 79, 0.05);
+  color: #208b67;
+}
+
+.login-highlight-item svg {
+  width: 25px;
+  height: 25px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.6;
+}
+
+.login-highlight-item strong {
+  overflow: hidden;
+  color: #27483f;
+  font-size: 13px;
+  font-weight: 580;
+  line-height: 1.35;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.login-orbit {
+  position: absolute;
+  z-index: 1;
+  top: 80px;
+  left: 29%;
+  width: min(560px, 58vw);
+  aspect-ratio: 1;
+  border: 1px solid rgba(29, 140, 105, 0.1);
+  border-radius: 50%;
+}
+
+.login-orbit i {
+  position: absolute;
+  top: 12%;
+  right: 18%;
+  width: 13px;
+  height: 6px;
+  border-radius: 6px 2px 6px 2px;
+  background: rgba(39, 151, 117, 0.34);
+  transform: rotate(44deg);
+}
+
+.login-dot-matrix {
+  position: absolute;
+  z-index: 1;
+  top: 30%;
+  left: 33px;
+  width: 70px;
+  height: 74px;
+  opacity: 0.46;
+  background-image: radial-gradient(circle, rgba(38, 151, 115, 0.3) 1.5px, transparent 1.8px);
+  background-size: 18px 18px;
+}
+
+.login-wave {
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  bottom: -12px;
+  left: 0;
+  width: 100%;
+  height: 255px;
+  fill: none;
+  stroke: rgba(40, 151, 117, 0.14);
+  stroke-width: 1;
+}
+
+.login-lotus {
+  position: absolute;
+  z-index: 2;
+  right: -15px;
+  bottom: -25px;
+  width: 40%;
+  max-width: 390px;
+  fill: rgba(245, 251, 248, 0.78);
+  stroke: rgba(35, 141, 104, 0.12);
+  stroke-width: 1.15;
+}
+
+.login-card {
+  position: relative;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(42px, 5vw, 78px);
+  border-radius: 26px;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: -10px 0 36px rgba(28, 65, 55, 0.055);
+}
+
+.login-card-inner {
+  width: min(410px, 100%);
+}
+
+.login-card-head {
+  margin-bottom: 38px;
+}
+
+.login-card-eyebrow {
+  display: block;
+  margin-bottom: 14px;
+  color: #278b69;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.19em;
+}
+
+.login-card h2 {
+  margin: 0;
+  color: #102f28;
+  font-size: 31px;
+  line-height: 1.3;
+  font-weight: 680;
+  letter-spacing: -0.02em;
+}
+
+.login-card-head p {
+  margin: 11px 0 0;
+  color: #61756f;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.login-card .el-form-item {
+  margin-bottom: 25px;
+}
+
+.login-card .el-form-item__label {
+  height: auto;
+  margin-bottom: 9px;
+  padding: 0;
+  color: #203c34;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.login-card .el-input__wrapper {
+  min-height: 54px;
+  padding: 0 15px;
+  border: 1px solid #dce5e2;
+  border-radius: 10px;
+  background: #fbfcfc;
+  box-shadow: none;
+  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
+}
+
+.login-card .el-input__wrapper:hover {
+  border-color: #afc9c0;
+  background: #ffffff;
+}
+
+.login-card .el-input__wrapper.is-focus {
+  border-color: #368f72;
+  background: #ffffff;
+  box-shadow: 0 0 0 3px rgba(32, 139, 103, 0.09);
+}
+
+.login-card .el-input__inner {
+  color: #193a31;
+  font-size: 14px;
+}
+
+.login-card .el-input__inner::placeholder {
+  color: #9baaa5;
+}
+
+.login-input-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 7px;
+  fill: none;
+  stroke: #849991;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.6;
+}
+
+.login-submit {
+  height: 52px;
+  margin-top: 6px;
+  border-color: #1d805f;
+  border-radius: 10px;
+  background: linear-gradient(100deg, #237d60, #1c9168);
+  box-shadow: 0 10px 24px rgba(25, 119, 87, 0.18);
+  font-size: 15px;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
+}
+
+.login-submit:hover,
+.login-submit:focus {
+  border-color: #176e52;
+  background: linear-gradient(100deg, #1c7257, #17865f);
+  box-shadow: 0 12px 28px rgba(25, 119, 87, 0.24);
+  transform: translateY(-1px);
+}
+
+.login-submit:active {
+  transform: translateY(0);
+}
+
+.login-submit svg {
+  width: 18px;
+  height: 18px;
+  margin-left: 8px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+}
+
+.login-security-note {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin: 23px 0 0;
+  color: #8a9b96;
+  font-size: 12px;
+}
+
+.login-security-note span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #7fb19f;
+  box-shadow: 0 0 0 4px rgba(127, 177, 159, 0.12);
+}
+
+.login-copyright {
+  margin: 14px 0 0;
+  color: #86958f;
+  font-size: 11px;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+}
+
 .brand {
   width: 44px;
   height: 44px;
@@ -86,83 +412,6 @@ textarea {
   font-weight: 800;
 }
 
-.login-brand span {
-  background: #eab308;
-  color: #17231f;
-}
-
-.login-brand strong {
-  font-size: 16px;
-}
-
-.login-hero-main h1 {
-  position: relative;
-  z-index: 1;
-  max-width: 620px;
-  margin: 72px 0 0;
-  font-size: 40px;
-  line-height: 1.18;
-  font-weight: 800;
-  letter-spacing: 0;
-}
-
-.login-hero-main p {
-  position: relative;
-  z-index: 1;
-  max-width: 560px;
-  margin: 18px 0 0;
-  color: rgba(255, 255, 255, 0.74);
-  font-size: 16px;
-  line-height: 1.75;
-}
-
-.login-highlights {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.login-highlights span {
-  padding: 8px 12px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 6px;
-  color: rgba(255, 255, 255, 0.82);
-  font-size: 13px;
-}
-
-.login-card {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 48px;
-}
-
-.login-card-head {
-  margin-bottom: 28px;
-}
-
-.login-card h2 {
-  margin: 0;
-  color: #132822;
-  font-size: 28px;
-  line-height: 1.25;
-  letter-spacing: 0;
-}
-
-.login-card p {
-  margin: 8px 0 0;
-  color: #667a73;
-  line-height: 1.6;
-}
-
-.login-submit {
-  height: 44px;
-  margin-top: 4px;
-  font-weight: 700;
-}
-
 .login-box h1,
 .page-head h2 {
   margin: 0;
@@ -1488,32 +1737,47 @@ textarea {
   }
 
   .login-page {
-    padding: 18px;
+    min-height: 100dvh;
+    justify-content: center;
+    padding: 16px;
+    background:
+      radial-gradient(circle at 12% 10%, rgba(178, 218, 204, 0.24), transparent 36%),
+      #f5f7f6;
   }
 
   .login-hero {
+    width: min(100%, 480px);
     min-height: auto;
     grid-template-columns: 1fr;
+    border-radius: 22px;
   }
 
   .login-hero-main {
-    padding: 28px;
-  }
-
-  .login-hero-main::after {
-    width: 160px;
-    height: 160px;
-    right: 18px;
-    bottom: 18px;
-  }
-
-  .login-hero-main h1 {
-    margin-top: 42px;
-    font-size: 28px;
+    display: none;
   }
 
   .login-card {
-    padding: 28px;
+    min-height: min(620px, calc(100dvh - 64px));
+    padding: 42px 28px;
+    border-radius: 22px;
+    box-shadow: none;
+  }
+
+  .login-card-head {
+    margin-bottom: 34px;
+  }
+
+  .login-card h2 {
+    font-size: 28px;
+  }
+
+  .login-card .el-input__wrapper {
+    min-height: 52px;
+  }
+
+  .login-copyright {
+    margin-top: 12px;
+    text-align: center;
   }
 
   .admin-shell {

ai_knowledge_base_v2/design-qa.md

@@ -51,6 +51,41 @@ final result: passed
 
 ---
 
+# 后台登录页视觉重构验收（2026-07-13）
+
+## 对照范围
+
+- 设计参考：`/Users/nelson/Downloads/ChatGPT Image 2026年7月13日 17_18_22.png`
+- 桌面最终截图：`test_records/screenshots/后台登录页_桌面_最终.png`
+- 移动端最终截图：`test_records/screenshots/后台登录页_移动端_最终.png`
+- 桌面视口：1616 × 973；移动端视口：390 × 844。
+
+## 比较历史
+
+- [P1] 原页面采用深绿色大色块和普通后台模板式卡片，品牌层级、东方气质和设计参考偏差明显。
+- 修复后使用雾白与浅雾绿色作为底色，左右分栏比例、圆角、留白、轻阴影和墨绿色文字层级均按参考方向重建。
+- 左侧加入代码生成的品牌纹样、圆环、点阵、波浪与莲花线稿；右侧保持单一账号密码登录路径，没有增加其他登录方式。
+- 首轮浏览器实装对照未发现 P0、P1、P2 级视觉问题，无需额外回退或遮盖性修补。
+
+## 必查视觉面
+
+- 字体与排版：品牌、主文案、说明、功能标签和表单建立清晰层级，中文长文案无异常折行或截断。
+- 间距与布局：桌面登录容器为 1544 × 886，左右区域对齐；390px 移动端隐藏品牌区并保持单栏表单。
+- 颜色与设计令牌：采用浅灰白、浅雾绿、深墨绿和低饱和高级绿色，不包含亮绿或蓝紫渐变。
+- 图片与资源：登录区域图片元素数量为 0，CSS `url()` 背景数量为 0；全部装饰由 CSS 与内联 SVG 生成。
+- 响应式：桌面 `bodyScrollWidth/viewportWidth=1616/1616`，移动端为 `390/390`，无横向滚动。
+
+## 交互与工程检查
+
+- 管理员账号与密码输入、密码可见切换、提交 loading 和错误提示仍复用原组件逻辑。
+- 使用本地管理员账号完成真实登录，成功进入“数据看板”，随后退出并恢复登录页。
+- `npm run build`：通过（Vue TypeScript 类型检查与 Vite 生产构建均通过）。
+- 未新增依赖，未修改后端接口、Token 保存或登录后跳转实现。
+
+final result: passed
+
+---
+
 # 用户管理“启用”开关修复验收（2026-07-13）
 
 ## 对照范围