From cd01550d80ab5bf786cb98c7803c649c7d2169b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=83=AD=E5=BA=86=E6=B3=B0?= <12369755+htcloud1@user.noreply.gitee.com> Date: Sat, 22 Aug 2026 20:36:47 +0800 Subject: [PATCH] =?UTF-8?q?refactor(style):=20=E5=85=A8=E9=83=A8=E7=A1=AC?= =?UTF-8?q?=E7=BC=96=E7=A0=81=20#1E3A8A=20=E6=9B=BF=E6=8D=A2=E4=B8=BA=20va?= =?UTF-8?q?r(--brand-primary)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 为支持全局换色 (theme.scss :root 改 1 行即换主色), 把所有业务代码里 硬编码主色清理掉, 改用 CSS 变量. 扫描结果 (grep -ri '#1[Ee]3[Aa]8[Aa]' src/): - theme.scss:21 定义本身 → 保留 - theme.js:7-8 JSDoc 注释示例 → 保留 - 其它 19 处业务硬编码 → 全部替换 替换明细: - auth/Login.vue 13 处 (login-tabs/bg/color/border/btn/links) - manager/Workbench.vue 2 处 (stat-card bg + border, 跟上个 commit 对齐) - sponsor/SponsorProjects.vue 1 处 (var(--brand-primary, #1E3A8A) fallback → 裸变量, SKILL 禁 fallback) - doctor/SignContract.vue 1 处 (同上) rgb(30,58,138) / rgba(30,58,138,X) 形式: 0 处. 效果: 改 theme.scss :root --brand-primary 一行, 全项目颜色自动跟随. 派生色 (deep/darker/light/lighter/text/mix) 已在 theme.scss 内 HEX→HSL 自动算, 不需手动改. --- ry-vue3/src/views/auth/Login.vue | 32 +++++++++---------- ry-vue3/src/views/doctor/SignContract.vue | 2 +- ry-vue3/src/views/manager/Workbench.vue | 4 +-- ry-vue3/src/views/sponsor/SponsorProjects.vue | 2 +- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/ry-vue3/src/views/auth/Login.vue b/ry-vue3/src/views/auth/Login.vue index 79511b7..06886b8 100644 --- a/ry-vue3/src/views/auth/Login.vue +++ b/ry-vue3/src/views/auth/Login.vue @@ -518,7 +518,7 @@ onUnmounted(() => { .login-page .logo-icon{ width: 36px; height: 36px; - background: #1e3a8a; + background: var(--brand-primary); color: #fff; display: flex; align-items: center; @@ -563,7 +563,7 @@ onUnmounted(() => { } .login-page .banner-inner{ - background: #1e3a8a; + background: var(--brand-primary); color: #fff; padding: 56px 56px; height: 440px; @@ -647,10 +647,10 @@ onUnmounted(() => { transition: color 0.2s, border-color 0.2s; user-select: none; } -.login-page .login-tabs .tab:hover{ color: #1e3a8a; } +.login-page .login-tabs .tab:hover{ color: var(--brand-primary); } .login-page .login-tabs .tab.active{ - color: #1e3a8a; - border-bottom-color: #1e3a8a; + color: var(--brand-primary); + border-bottom-color: var(--brand-primary); font-weight: 500; } @@ -672,7 +672,7 @@ onUnmounted(() => { } .login-page .form-input:focus{ - border-color: #1e3a8a; + border-color: var(--brand-primary); } .login-page .form-input::placeholder{ @@ -719,7 +719,7 @@ onUnmounted(() => { font-size: 20px; font-weight: 600; letter-spacing: 4px; - color: #1e3a8a; + color: var(--brand-primary); cursor: pointer; user-select: none; font-family: 'Courier New', monospace; @@ -733,7 +733,7 @@ onUnmounted(() => { } .login-page .form-bottom-links .bottom-link{ - color: #1e3a8a; + color: var(--brand-primary); cursor: pointer; } @@ -744,7 +744,7 @@ onUnmounted(() => { .login-page .login-btn{ width: 100%; height: 44px; - background: #1e3a8a; + background: var(--brand-primary); border: none; color: #fff; font-size: 15px; @@ -819,14 +819,14 @@ onUnmounted(() => { } .login-page .user-type-item:hover{ - border-color: #1e3a8a; + border-color: var(--brand-primary); background: #f9fafb; } .login-page .user-type-item input[type="radio"]{ margin-right: 12px; cursor: pointer; - accent-color: #1e3a8a; + accent-color: var(--brand-primary); } .login-page .user-type-item .info{ flex: 1; } @@ -857,7 +857,7 @@ onUnmounted(() => { } .login-page .modal-btn.primary{ - background: #1e3a8a; + background: var(--brand-primary); color: #fff; } @@ -870,8 +870,8 @@ onUnmounted(() => { } .login-page .modal-btn.secondary:hover{ - border-color: #1e3a8a; - color: #1e3a8a; + border-color: var(--brand-primary); + color: var(--brand-primary); } /* 响应式 */ @@ -970,13 +970,13 @@ onUnmounted(() => { height: 44px; border: 1px solid #d1d5db; background: #f9fafb; - color: #1e3a8a; + color: var(--brand-primary); font-size: 13px; cursor: pointer; transition: all 0.2s; } .sms-btn:hover:not(:disabled) { - border-color: #1e3a8a; + border-color: var(--brand-primary); background: #f3f4f6; } .sms-btn:disabled { diff --git a/ry-vue3/src/views/doctor/SignContract.vue b/ry-vue3/src/views/doctor/SignContract.vue index 486ad53..df772d1 100644 --- a/ry-vue3/src/views/doctor/SignContract.vue +++ b/ry-vue3/src/views/doctor/SignContract.vue @@ -321,7 +321,7 @@ onMounted(load) padding: 4px 8px; } .pad-confirm { - color: var(--brand-primary, #1e3a8a); + color: var(--brand-primary); font-weight: 600; cursor: pointer; padding: 4px 12px; diff --git a/ry-vue3/src/views/manager/Workbench.vue b/ry-vue3/src/views/manager/Workbench.vue index 4e541b2..14eca28 100644 --- a/ry-vue3/src/views/manager/Workbench.vue +++ b/ry-vue3/src/views/manager/Workbench.vue @@ -103,8 +103,8 @@ onMounted(() => { loadStats(); loadNotices() }) /* 5 个 KPI 卡 (深色底白字) */ .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 12px; } .stat-card { - background: #1e3a8a; - border: 1px solid #1e3a8a; + background: var(--brand-primary); + border: 1px solid var(--brand-primary); border-radius: 8px; padding: 24px; cursor: pointer; diff --git a/ry-vue3/src/views/sponsor/SponsorProjects.vue b/ry-vue3/src/views/sponsor/SponsorProjects.vue index 0037168..1f3178c 100644 --- a/ry-vue3/src/views/sponsor/SponsorProjects.vue +++ b/ry-vue3/src/views/sponsor/SponsorProjects.vue @@ -397,7 +397,7 @@ onMounted(load) .breadcrumb { color: #909399; font-size: 13px; margin-bottom: 12px; } .filter-form { margin-bottom: 12px; } .toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } -.link { color: var(--brand-primary, #1E3A8A); } +.link { color: var(--brand-primary); } .link-bold { color: #303133; font-weight: 600; } .mono { font-family: monospace; color: #606266; font-size: 12px; } .pagination { margin-top: 12px; justify-content: flex-end; display: flex; }