21 KiB

Raw Blame History

国聘红 · 国企风格全站换肤 Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 将 offer_frontend 前端从"黑金 + Element Plus 默认蓝"换肤为"国聘红 + 白底"国企风格，全站统一，不改任何功能/结构/接口。

Architecture: 在 src/style.css 定义全局 CSS 令牌并覆盖 Element Plus 主色变量（--el-color-primary 系列），使全站 type="primary" 组件自动变红；再逐文件把硬编码的黑/金/蓝替换为令牌引用。纯样式改造，零逻辑变更。

Tech Stack: Vue 3 + Vite + Element Plus 2.x（CSS 变量覆盖，不引入 SCSS）。

Global Constraints

不改任何 .vue 的 <template> 结构与 <script> 逻辑，只改 <style> 与内联 style 中的颜色值。
不改后端、路由、接口、组件 props。
不新增依赖，不引入 SCSS/暗色模式/主题切换。
主色令牌：--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。
DashboardView 的 echarts 分类色板（category: [...] 数组）保留不动——它是数据可视化分类色，非主题色。
前端已运行于 http://localhost:5174/（Vite），后端 8000 不变。

Task 1: 全局令牌 + Element Plus 主色覆盖

Files:

Modify: offer_frontend/src/style.css（整文件替换）

Interfaces:

Produces: 全局 CSS 变量 --brand-red 等，供后续所有任务的 scoped 样式 var(--brand-red) 引用；Element Plus type="primary" 组件自动变红。
Step 1: 用以下内容整体替换 src/style.css

:root {
  /* 品牌色 · 国聘红 */
  --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;

  font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light;
  color: var(--text-main);
  background-color: var(--bg-page);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Element Plus 主色覆盖 → 中国红 */
  --el-color-primary: #C8161D;
  --el-color-primary-light-3: #D94A50;
  --el-color-primary-light-5: #E57378;
  --el-color-primary-light-7: #F0A0A4;
  --el-color-primary-light-8: #F5BDBF;
  --el-color-primary-light-9: #FDECED;
  --el-color-primary-dark-2: #A11218;
}

a {
  font-weight: 500;
  color: var(--brand-red);
  text-decoration: inherit;
}
a:hover {
  color: var(--brand-red-2);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background-color: var(--bg-page);
  color: var(--text-main);
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: var(--brand-red);
}

.card {
  padding: 2em;
}

#app {
  width: 100%;
}

Step 2: 验证 Vite HMR 无报错

Run: 查看 Vite 后台输出（任务 b6lon581k） Expected: 无编译错误；浏览器刷新 5174 后 type="primary" 按钮应显示红色。

Step 3: Commit

git add offer_frontend/src/style.css
git commit -m "style: 全局国聘红令牌与 Element Plus 主色覆盖"

Task 2: PortalLayout 黑金 → 白底红

Files:

Modify: offer_frontend/src/layouts/PortalLayout.vue（仅 <style scoped>）

Interfaces:

Consumes: Task 1 全局令牌。
Produces: 公开页顶栏/页脚的国聘红外观。
Step 1: 替换 :root 局部变量块（约 97-103 行）

把

:root {
  --c-red: #D4D4D4;
  --c-dark: #0E1E3D;
  --c-gold: #C8973A;
  --c-cream: #F8F4EF;
  --c-border: #E2D9D0;
}

替换为

:root {
  --c-red: var(--brand-red);
  --c-dark: var(--brand-red-2);
  --c-gold: var(--brand-red);
  --c-cream: var(--bg-page);
  --c-border: var(--border);
}

Step 2: 顶部公告条 .top-bar 改浅底

.top-bar 的 background: #1A1A1A; → background: #F2F3F5; .top-bar 的 color: rgba(255,255,255,0.75); → color: var(--text-muted); .top-bar-left::before 的 color: #C8973A; → color: var(--brand-red); .top-link 的 color: rgba(255,255,255,0.65); → color: var(--text-muted); .top-link:hover, .clickable:hover 的 color: #C8973A; → color: var(--brand-red); .top-divider 的 color: rgba(255,255,255,0.25); → color: #C9CDD4;

Step 3: 主导航 .main-header 改白底

.main-header 的 background: linear-gradient(180deg, #1A1A1A 0%, #0F0F0F 100%); → background: #FFFFFF; .main-header 的 box-shadow 改为 box-shadow: 0 2px 8px rgba(0,0,0,0.06);

Step 4: Logo 配色金 → 红

.emblem-ring 的 border: 2px solid #C8973A; → border: 2px solid var(--brand-red); .emblem-ring 的 background 渐变金色 → background: linear-gradient(135deg, rgba(200,22,29,0.12), rgba(200,22,29,0.04)); .emblem-ring 的 box-shadow 金色 → box-shadow: 0 0 16px rgba(200,22,29,0.25), inset 0 0 8px rgba(200,22,29,0.08); .emblem-char 的 color: #C8973A; → color: var(--brand-red); .logo-title 的 color: #FFFFFF; → color: var(--text-main); .logo-sub 的 color: rgba(200,151,58,0.7); → color: var(--brand-red); 并加 opacity: 0.75;

Step 5: 导航链接金 → 红

.nav-link 的 color: rgba(255,255,255,0.75); → color: var(--text-muted); .nav-link::after 的 background: #C8973A; → background: var(--brand-red); .nav-link:hover 的 color: #fff; → color: var(--brand-red); .nav-link.active 的 color: #C8973A; → color: var(--brand-red);

Step 6: 操作区按钮适配白底

.btn-ghost 的 border: 1px solid rgba(255,255,255,0.35); → border: 1px solid var(--border); .btn-ghost 的 color: rgba(255,255,255,0.85); → color: var(--text-main); .btn-ghost:hover 的 border-color: #C8973A; color: #C8973A; → border-color: var(--brand-red); color: var(--brand-red); .user-badge 的 background: rgba(255,255,255,0.08); → background: var(--brand-red-bg); .user-badge 的 border: 1px solid rgba(255,255,255,0.15); → border: 1px solid var(--border); .user-avatar 的 background: #D4D4D4; → background: var(--brand-red); .user-name 的 color: rgba(255,255,255,0.85); → color: var(--text-main);

Step 7: 底线与页脚金 → 红

.header-underline 的 background: #0F0F0F; → background: #FFFFFF; .underline-fill 的 background: linear-gradient(90deg, #C8973A 0%, #D4AF37 100%); → background: var(--brand-red); .portal-footer 的 background: #1A1A1A; → background: #1D2129; .portal-footer 的 border-top: 3px solid #C8973A; → border-top: 3px solid var(--brand-red); .f-emblem 的 border: 1px solid #C8973A; 与 color: #C8973A; → var(--brand-red)

Step 8: 验证

浏览器打开 http://localhost:5174/home，确认：顶栏白底、红色底线、logo 红环、导航红下划线、页脚深灰红顶边，无残留黑/金。

Step 9: Commit

git add offer_frontend/src/layouts/PortalLayout.vue
git commit -m "style: PortalLayout 黑金改国聘红白底"

Task 3: HomeView 双栏黑金 → 红白

Files:

Modify: offer_frontend/src/views/portal/HomeView.vue（仅 <style scoped>）

Interfaces:

Consumes: Task 1 全局令牌。
Produces: 首页双栏（左公司列表 + 右职位）国聘红外观。
Step 1: 替换局部变量块（约 364-372 行）

把

  --gold: #B8860B;
  --gold-lt: #D4AF37;
  --dark: #1A1A1A;
  --cream: #F0F3F8;
  --border: #DDE3ED;
  --text: #1D2129;
  --muted: #86909C;
  --blue: #2B5ADE;
  --blue-lt: #EBF0FB;

替换为

  --gold: var(--brand-red);
  --gold-lt: var(--brand-red-3);
  --dark: var(--bg-card);
  --cream: var(--bg-page);
  --border: #E5E6EB;
  --text: var(--text-main);
  --muted: var(--text-muted);
  --blue: var(--brand-red);
  --blue-lt: var(--brand-red-bg);

Step 2: 左栏 .panel-left 黑底 → 白底

.panel-left 的 background: var(--dark);（现即白）保持，但需把 border-right: 1px solid rgba(255,255,255,0.07); → border-right: 1px solid var(--border); .left-header 的 border-bottom: 1px solid rgba(255,255,255,0.08); → border-bottom: 1px solid var(--border); .left-title 的 color: rgba(255,255,255,0.9); → color: var(--text-main); .left-body::-webkit-scrollbar-thumb 的 background: rgba(255,255,255,0.12); → background: #C9CDD4;

Step 3: 公司行文字色适配白底

.org-row 的 border-bottom: 1px solid rgba(255,255,255,0.04); → border-bottom: 1px solid var(--border); .org-row:hover 的 background: rgba(255,255,255,0.06); → background: var(--brand-red-bg); .org-row.active 的 background: rgba(184,134,11,0.1); → background: var(--brand-red-bg); .org-name 的 color: rgba(255,255,255,0.88); → color: var(--text-main); .child-name 的 color: rgba(255,255,255,0.7); → color: var(--text-muted); .org-stat 的 color: rgba(255,255,255,0.35); → color: var(--text-muted); .org-child 的 background: rgba(0,0,0,0.12); → background: var(--bg-page); .child-line 的 background: rgba(184,134,11,0.35); → background: var(--border);

Step 4: 头像金色渐变 → 红色渐变

.org-avatar 的 background: linear-gradient(135deg, #B8860B, #8B6407); → background: linear-gradient(135deg, #C8161D, #8B1014); .child-avatar 的 background: linear-gradient(135deg, #A67C07, #7D5A05); → background: linear-gradient(135deg, #A11218, #6B0C10);

Step 5: 学历徽章金 → 红

.edu-total-badge 的 background: #FFF8E6; → background: var(--brand-red-bg); .edu-total-badge 的 border: 1px solid #F0D080; → border: 1px solid var(--brand-red-3); .edu-total-badge 的 color: var(--gold);（已是红）保持。

Step 6: 骨架 shimmer 暗色 → 浅灰

.skeleton-row 的 background: linear-gradient(90deg, #2A2A2A 25%, #333 50%, #2A2A2A 75%); → background: linear-gradient(90deg, #E5E6EB 25%, #F2F3F5 50%, #E5E6EB 75%);

Step 7: 验证

浏览器 http://localhost:5174/home：左栏白底、选中公司红高亮、头像红渐变、学历徽章红系、搜索按钮红、薪资红，无残留黑/金。

Step 8: Commit

git add offer_frontend/src/views/portal/HomeView.vue
git commit -m "style: HomeView 双栏黑金改国聘红白底"

Task 4: SplashView 暗黑金 → 红色国企风

Files:

Modify: offer_frontend/src/views/SplashView.vue（仅 <style scoped>）

Interfaces:

Consumes: Task 1 全局令牌。
Produces: 落地页国聘红外观。
Step 1: 页面底色与顶栏

.splash-page 的 background: #0a0a0a; → background: var(--bg-page);，color: #fff; → color: var(--text-main); .splash-header 的 background: rgba(0, 0, 0, 0.45); → background: rgba(255,255,255,0.92); .splash-header 的 border-bottom: 1px solid rgba(255, 255, 255, 0.08); → border-bottom: 1px solid var(--border); 并加 box-shadow: 0 1px 8px rgba(0,0,0,0.04);

Step 2: 顶栏 logo/nav/按钮

.logo-icon 的 background: linear-gradient(135deg, #B8860B, #8B6407); → background: linear-gradient(135deg, #C8161D, #8B1014); .logo-title 的 color: #fff; → color: var(--text-main); .logo-en 的 color: rgba(255,255,255,0.45); → color: var(--brand-red); 加 opacity: 0.7; .nav-item 的 color: rgba(255,255,255,0.8); → color: var(--text-muted); .nav-item:hover 的 color: #D4AF37; → color: var(--brand-red); .btn-outline 的 border: 1px solid rgba(255,255,255,0.4); → border: 1px solid var(--border);，color: rgba(255,255,255,0.85); → color: var(--text-main); .btn-outline:hover 的 border-color: #D4AF37; color: #D4AF37; → border-color: var(--brand-red); color: var(--brand-red); .btn-solid 的 background: linear-gradient(135deg, #B8860B, #8B6407); → background: var(--brand-red);

Step 3: Hero 背景改红色渐变

.hero-bg 的 background: linear-gradient(160deg, #0d1b2a 0%, #1a2744 25%, #0f1f35 50%, #0d1520 75%, #060e18 100%); → background: linear-gradient(160deg, #C8161D 0%, #A11218 35%, #8B1014 70%, #6B0C10 100%);

Step 4: 建筑竖线与光晕金 → 红/白

.line 的 background 渐变中 rgba(184, 134, 11, 0.15) → rgba(255,255,255,0.18)，rgba(184, 134, 11, 0.08) → rgba(255,255,255,0.08) .hero-glow 的 background: radial-gradient(ellipse, rgba(184, 134, 11, 0.18) 0%, rgba(184, 134, 11, 0.05) 50%, transparent 70%); → background: radial-gradient(ellipse, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 50%, transparent 70%);

Step 5: Hero 文案与按钮

.hero-badge 的 border: 1px solid rgba(184, 134, 11, 0.6); → border: 1px solid rgba(255,255,255,0.7);，color: #D4AF37; → color: #fff;，background: rgba(184, 134, 11, 0.08); → background: rgba(255,255,255,0.12); .btn-primary-lg 的 background: linear-gradient(135deg, #B8860B, #D4AF37); → background: #FFFFFF;，color: #fff; → color: var(--brand-red); .btn-primary-lg 的 box-shadow: 0 4px 20px rgba(184,134,11,0.4); → box-shadow: 0 4px 20px rgba(0,0,0,0.2); .btn-primary-lg:hover 的 box-shadow: 0 8px 28px rgba(184,134,11,0.5); → box-shadow: 0 8px 28px rgba(0,0,0,0.28); （.hero-slogan/.hero-sub/.scroll-hint 保持白字，因 hero 背景为红。）

Step 6: 数据区暗底金字 → 白底红字

.stats-section 的 background: linear-gradient(135deg, #111 0%, #1a1a1a 100%); → background: #FFFFFF; .stats-section 的 border-top/border-bottom: 1px solid rgba(184,134,11,0.25); → 1px solid var(--border); .stat-num 的 color: #D4AF37; → color: var(--brand-red); .stat-label 的 color: rgba(255,255,255,0.5); → color: var(--text-muted); .stat-divider 的 background: rgba(184,134,11,0.2); → background: var(--border);

Step 7: 特色区暗底 → 浅灰底白卡

.features-section 的 background: #0d0d0d; → background: var(--bg-page); .section-label 的 color: #D4AF37; → color: var(--brand-red); .section-title 的 color: #fff; → color: var(--text-main); .feature-card 的 background: #161616; → background: var(--bg-card);，border: 1px solid rgba(184,134,11,0.15); → border: 1px solid var(--border);，加 box-shadow: 0 1px 6px rgba(0,0,0,0.04); .feature-card:hover 的 border-color: rgba(184,134,11,0.5); → border-color: var(--brand-red); .feature-card h3 的 color: #fff; → color: var(--text-main); .feature-card p 的 color: rgba(255,255,255,0.45); → color: var(--text-muted);

Step 8: 底部 footer 暗底 → 深灰

.splash-footer 的 background: #060606; → background: #1D2129; .splash-footer 的 border-top: 1px solid rgba(255,255,255,0.06); → border-top: 1px solid var(--brand-red); .footer-logo 的 color: rgba(255,255,255,0.5); → color: rgba(255,255,255,0.7); .footer-copy 的 color: rgba(255,255,255,0.25); → color: rgba(255,255,255,0.4); .footer-links span 的 color: rgba(255,255,255,0.35); → color: rgba(255,255,255,0.6); .footer-links span:hover 的 color: #D4AF37; → color: var(--brand-red-3);

Step 9: 验证

浏览器 http://localhost:5174/：红色 hero、白底数据区红字、浅灰特色卡、深灰 footer 红顶边，无残留黑/金。

Step 10: Commit

git add offer_frontend/src/views/SplashView.vue
git commit -m "style: SplashView 暗黑金改国聘红国企风"

Task 5: AdminLayout 侧边栏海军蓝 → 深红

Files:

Modify: offer_frontend/src/layouts/AdminLayout.vue（template 内联属性 + <style scoped>）

Interfaces:

Consumes: Task 1 全局令牌（--brand-red 等）。
Produces: 后台侧边栏深红外观；其余 EP 组件由 Task 1 自动变红。
Step 1: el-menu 内联属性改色（第 19 行）

把

<el-menu router :default-active="$route.path" background-color="#001529" text-color="#fff" active-text-color="#409eff">

改为

<el-menu router :default-active="$route.path" background-color="#8B1014" text-color="#fff" active-text-color="#FFD0D2">

Step 2: scoped 样式中 #001529 → 深红

第 65 行 .admin-sidebar（或对应选择器）的 background: #001529; → background: #8B1014; 第 92 行同样 background: #001529; → background: #8B1014; （若两处属不同选择器，均改 #8B1014。）

Step 3: 验证

浏览器登录后台（管理员账号）访问 http://localhost:5174/admin/jobs：侧边栏深红、选中项浅红文字、primary 按钮红。

Step 4: Commit

git add offer_frontend/src/layouts/AdminLayout.vue
git commit -m "style: AdminLayout 侧边栏海军蓝改深红"

Task 6: Auth 视图硬编码蓝 → 红

Files:

Modify: offer_frontend/src/views/auth/LoginView.vue
Modify: offer_frontend/src/views/auth/RegisterView.vue
Modify: offer_frontend/src/views/auth/ResetPasswordView.vue

Interfaces:

Consumes: Task 1 全局令牌。
Step 1: LoginView 替换硬编码色

第 65 行内联 style="color: #909399; ..." → style="color: var(--text-muted); ..."（"忘记密码"链接保持次要灰，OK 保留 #909399 也可——此处统一为令牌）第 155 行内联 style="color: #409eff; ..." → style="color: var(--brand-red); ..." 第 357 行 color: #409eff; → color: var(--brand-red); 第 389 行 color: #409eff; → color: var(--brand-red);

Step 2: RegisterView 替换硬编码色

第 63 行内联 style="color: #409eff; ..." → style="color: var(--brand-red); ..."

Step 3: ResetPasswordView 替换硬编码色

第 100 行内联 style="color: #409eff; ..." → style="color: var(--brand-red); ..."

Step 4: 验证

浏览器访问 /login、/register、/forgot-password：链接与强调色为红，无蓝。

Step 5: Commit

git add offer_frontend/src/views/auth/LoginView.vue offer_frontend/src/views/auth/RegisterView.vue offer_frontend/src/views/auth/ResetPasswordView.vue
git commit -m "style: Auth 视图硬编码蓝改国聘红"

Task 7: Admin 视图硬编码蓝/灰 → 红（保留 echarts 色板）

Files:

Modify: offer_frontend/src/views/admin/DashboardView.vue
Modify: offer_frontend/src/views/admin/ApplicationManageView.vue

Interfaces:

Consumes: Task 1 全局令牌。
Step 1: DashboardView 替换非图表硬编码色

第 357 行 color: #909399; → color: var(--text-muted); 第 371 行 .stat-value.info { color: #409eff; } → .stat-value.info { color: var(--brand-red); } 保留第 138 行 category: [...] echarts 色板与第 307 行 itemStyle.color: '#409eff' 不动（数据可视化分类色，非主题；如需统一可将 307 行改为 var(--brand-red)，但会与色板其他色不一致——本计划选择保留）。

Step 2: ApplicationManageView 替换硬编码色

第 259 行 border-left: 3px solid #409eff; → border-left: 3px solid var(--brand-red);

Step 3: 验证

浏览器访问 /admin/dashboard、/admin/applications：信息色与边框为红；echarts 图表色板保持分类多色（符合预期）。

Step 4: Commit

git add offer_frontend/src/views/admin/DashboardView.vue offer_frontend/src/views/admin/ApplicationManageView.vue
git commit -m "style: Admin 视图硬编码蓝灰改国聘红(保留 echarts 色板)"

Task 8: 全站残留色兜底 + 视觉验收

Files:

无新文件；仅 grep 检查与截图核对。
Step 1: grep 残留黑金/默认蓝

Run:

cd C:/code/offer/offer_frontend && grep -rniE "#409eff|#909399|#001529|#1A1A1A|#0F0F0F|#C8973A|#B8860B|#D4AF37" src

Expected: 仅剩 DashboardView 第 138/307 行 echarts 色板（已确认保留）；其余无残留。若发现遗漏，按上述映射补改并 amend 对应任务提交。

Step 2: 截图核对各页面

逐页打开并截图：/（Splash）、/home（首页双栏）、/companies（公司介绍）、/login、/register、求职者中心（登录求职者账号）、/admin/*（登录管理员）。确认：全站白底 + 国聘红主色，无黑金、无默认蓝。

Step 3: 最终 Commit（如有兜底改动）

git add -A offer_frontend/src
git commit -m "style: 国聘红换肤残留色兜底"

（若无兜底改动，跳过。）

Self-Review 结论

Spec 覆盖：spec 第 2 节令牌→Task 1；3.1 style.css→Task 1；3.2 PortalLayout→Task 2；3.3 HomeView→Task 3；3.4 SplashView→Task 4；3.5 AdminLayout→Task 5；3.6 其余视图→Task 6/7；第 5 节验证→Task 8。全覆盖。
占位符：无 TBD/TODO，每步含具体颜色映射或代码。
类型一致：令牌名（--brand-red 等）在所有任务中一致。
echarts 色板：明确保留，避免数据可视化失色。

21 KiB Raw Blame History Unescape Escape

国聘红 · 国企风格全站换肤 Implementation Plan

Global Constraints

Task 1: 全局令牌 + Element Plus 主色覆盖

Task 2: PortalLayout 黑金 → 白底红

Task 3: HomeView 双栏 黑金 → 红白

Task 4: SplashView 暗黑金 → 红色国企风

Task 5: AdminLayout 侧边栏 海军蓝 → 深红

Task 6: Auth 视图硬编码蓝 → 红

Task 7: Admin 视图硬编码蓝/灰 → 红（保留 echarts 色板）

Task 8: 全站残留色兜底 + 视觉验收

Self-Review 结论

21 KiB

Raw Blame History

Task 3: HomeView 双栏黑金 → 红白

Task 5: AdminLayout 侧边栏海军蓝 → 深红