diff --git a/docs/superpowers/specs/2026-06-25-guopin-red-theme-design.md b/docs/superpowers/specs/2026-06-25-guopin-red-theme-design.md new file mode 100644 index 0000000..87d49aa --- /dev/null +++ b/docs/superpowers/specs/2026-06-25-guopin-red-theme-design.md @@ -0,0 +1,103 @@ +# 国聘红 · 国企风格全站换肤 设计文档 + +> 日期:2026-06-25 +> 范围:`offer_frontend` 前端主题视觉换肤,**不改任何功能逻辑/模板结构/接口**。 +> 目标:将现有"黑金"风格改为类似国聘(guopin.com)的"国企红 + 白底"风格,全站统一。 + +## 1. 背景 + +当前前端主题分两套: +- **公开页(Portal + Splash)**:黑金风格——顶栏 `#1A1A1A`/`#0F0F0F` + 金色 `#C8973A`/`#B8860B`/`#D4AF37`。 +- **后台 / 求职者 / 登录**:Element Plus 默认蓝 `#409eff`,Admin 侧边栏海军蓝 `#001529`。 + +用户要求改为国聘式国企风格,不要黑金,全站统一。 + +## 2. 设计令牌(全局色板) + +在 `src/style.css` 顶部定义 CSS 变量,并覆盖 Element Plus 主色变量,使全站 `type="primary"` 组件(按钮、分页、链接、开关、标签等)统一变红。 + +| 令牌 | 值 | 用途 | +|---|---|---| +| `--brand-red` | `#C8161D` | 主色(中国红) | +| `--brand-red-2` | `#A11218` | 悬停 / 深红 | +| `--brand-red-3` | `#E84148` | 浅亮红(强调) | +| `--brand-red-bg` | `#FDECED` | 红色浅底(标签、选中态背景) | +| `--bg-page` | `#F7F8FA` | 页面浅灰底 | +| `--bg-card` | `#FFFFFF` | 卡片白底 | +| `--text-main` | `#1D2129` | 主文字 | +| `--text-muted` | `#86909C` | 次要文字 | +| `--border` | `#E5E6EB` | 分割线/边框 | + +Element Plus 主色覆盖(写在 `:root`,全局生效): +- `--el-color-primary: #C8161D` +- `--el-color-primary-light-3/5/7`: 红色浅变体(用于 hover、disabled、边框) +- `--el-color-primary-dark-2: #A11218` + +同时移除 `style.css` 中 `color-scheme: light dark` 与 `#242424` 暗色默认,强制亮色白底,避免残留暗色样式。 + +## 3. 各文件改造点 + +仅替换颜色/背景/阴影/边框,**不改模板结构、class 名、交互逻辑**。 + +### 3.1 `src/style.css` +- 新增上述全局令牌与 EP 主色覆盖。 +- 移除暗色默认(`#242424`、`color-scheme: light dark`、暗色 `button`/`a` 规则)。 +- `body` 背景改为 `var(--bg-page)`,文字 `var(--text-main)`。 + +### 3.2 `src/layouts/PortalLayout.vue` +- 顶部公告条 `#1A1A1A` → 浅灰 `#F2F3F5`,深色文字;星标与链接用红。 +- 主导航 `linear-gradient(#1A1A1A,#0F0F0F)` → 白底 `#FFFFFF`,加底部阴影。 +- logo:金环 `#C8973A` → 红环 `--brand-red`;emblem 字、logo-sub 由金改红。 +- 导航链接:hover/active 下划线与文字色由金改红。 +- `btn-ghost` 边框/字色适配白底;底线装饰 `linear-gradient(#C8973A,#D4AF37)` → `--brand-red`。 +- 页脚 `#1A1A1A` → 浅灰 `#2B2B2B` 或白底配红顶边(采用:浅灰底 `#1D2129` 文字浅 + 红色顶边 3px)。 +- 局部 `:root` 变量块(`--c-red/--c-gold` 等)清理或重定向到全局令牌。 + +### 3.3 `src/views/portal/HomeView.vue` +- `--gold/--gold-lt/--dark` 等局部变量替换为全局红色令牌。 +- 左栏 `.panel-left` 背景 `--dark(#1A1A1A)` → `--bg-card` 白底,文字改深色,边框 `--border`。 +- 选中态 `.org-row.active`:金色 inset 条 + 金色背景 → 红色 inset 条 + `--brand-red-bg`。 +- `.org-avatar` 金色渐变 → 红色渐变 `linear-gradient(135deg, #C8161D, #8B1014)`。 +- `.left-count`/`.org-stat em` 金色 → 红。 +- 搜索按钮 `.search-btn` 金底 → 红底。 +- 学历徽章 `.edu-total-badge` 金系 → 红系(`--brand-red-bg` 底 + 红字 + 红边)。 +- 薪资 `#E63329` 保留(本就是红,贴合)。 +- 骨架 shimmer 暗色渐变 → 浅灰渐变。 + +### 3.4 `src/views/SplashView.vue` +- 整体由暗黑改红色国企风。 +- 顶栏 `rgba(0,0,0,.45)` → 白底半透 + 红色底线;logo 金渐变 → 红渐变;nav hover 金 → 红。 +- Hero 背景 `linear-gradient(#0d1b2a…)` → 红色渐变 `linear-gradient(160deg, #C8161D, #8B1014 60%, #6B0C10)`;建筑竖线/光晕的金色 `rgba(184,134,11,*)` → 红色 `rgba(255,255,255,*)`/红色微光。 +- `.hero-badge` 金边金字 → 白边白字 / 红底白字。 +- 主按钮 `.btn-primary-lg` 金渐变 → 白底红字 或 纯白底(红底白字会与红背景融,故 hero 内主按钮用白底红字)。 +- 数据区 `.stats-section` 暗底金字 → 白底红字,分割线红浅。 +- 特色区 `.features-section` 暗底 → `--bg-page` 浅灰底;卡片 `#161616` → 白卡 + 浅边;hover 边框红。 +- footer 暗底 → 浅灰底 `#1D2129` 或 `--bg-page`,链接 hover 红。 + +### 3.5 `src/layouts/AdminLayout.vue` +- 侧边栏背景 `#001529` → 深红 `#8B1014`(保留"深色侧边栏"视觉习惯,纳入红色家族)。 +- 侧边栏选中项/悬停:调亮红(`#A11218`/`#C8161D`)。 +- 硬编码 `#409eff` → `var(--brand-red)`(其余靠全局 EP 覆盖)。 + +### 3.6 其余视图(JobDetailView / CompanyListView / CompanyDetailView / JobListView / seeker/* / auth/LoginView / RegisterView / ResetPasswordView / admin/*View) +- 仅替换 scoped 样式中硬编码的 `#409eff`、`#909399`(链接/强调蓝)为 `var(--brand-red)` 或交由全局 EP 主色覆盖。 +- 不动结构与逻辑。 + +## 4. 不在范围内(YAGNI) + +- 不改组件结构、路由、接口、业务逻辑。 +- 不引入 SCSS / 主题切换 / 暗色模式。 +- 不新增依赖。 +- 不改后端。 + +## 5. 验证 + +1. `npm run dev` 起前端(已运行于 5174)。 +2. 浏览器逐页核对:Splash(`/`)、首页(`/home`)、公司介绍(`/companies`)、登录(`/login`)、求职者中心、后台。 +3. 确认无残留黑金、无 Element Plus 默认蓝。 +4. 截图存档对比。 + +## 6. 风险 + +- Element Plus 组件内部个别硬编码色(如 `el-tag` type 默认色)可能不被变量覆盖——若出现,按需补 `:deep()` 覆盖。 +- scoped 样式中硬编码的 `#409eff`/`#909399` 需逐处替换,遗漏会残留蓝点——实施时全局 grep 兜底。