diff --git a/ai_knowledge_base_v2/apps/admin-web/src/components/AdminLoginView.vue b/ai_knowledge_base_v2/apps/admin-web/src/components/AdminLoginView.vue index 0d497ab..b5e13a0 100644 --- a/ai_knowledge_base_v2/apps/admin-web/src/components/AdminLoginView.vue +++ b/ai_knowledge_base_v2/apps/admin-web/src/components/AdminLoginView.vue @@ -16,44 +16,121 @@ function submit() { diff --git a/ai_knowledge_base_v2/apps/admin-web/src/styles.css b/ai_knowledge_base_v2/apps/admin-web/src/styles.css index 2a06cdc..41aa7cb 100644 --- a/ai_knowledge_base_v2/apps/admin-web/src/styles.css +++ b/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 { diff --git a/ai_knowledge_base_v2/design-qa.md b/ai_knowledge_base_v2/design-qa.md index 9aa0799..e98ad77 100644 --- a/ai_knowledge_base_v2/design-qa.md +++ b/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） ## 对照范围 diff --git a/ai_knowledge_base_v2/test_records/screenshots/后台登录页_桌面_最终.png b/ai_knowledge_base_v2/test_records/screenshots/后台登录页_桌面_最终.png new file mode 100644 index 0000000..e706f01 Binary files /dev/null and b/ai_knowledge_base_v2/test_records/screenshots/后台登录页_桌面_最终.png differ diff --git a/ai_knowledge_base_v2/test_records/screenshots/后台登录页_移动端_最终.png b/ai_knowledge_base_v2/test_records/screenshots/后台登录页_移动端_最终.png new file mode 100644 index 0000000..e74dcd5 Binary files /dev/null and b/ai_knowledge_base_v2/test_records/screenshots/后台登录页_移动端_最终.png differ