@

docs: 国聘红国企风格全站换肤设计文档

Co-Authored-By: Claude <noreply@anthropic.com>
@

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 兜底。