From 18fcae803061f0b6cef188c536347b3c14b08f9d Mon Sep 17 00:00:00 2001 From: sugarBecomer Date: Mon, 27 Apr 2026 10:32:59 +0800 Subject: [PATCH] =?UTF-8?q?:art:=20=E4=B8=BB=E9=A2=98=20v2=EF=BC=9A?= =?UTF-8?q?=E6=B8=90=E5=8F=98=E6=8C=89=E9=92=AE=20+=204=E5=B1=82=E8=AF=AD?= =?UTF-8?q?=E4=B9=89=E8=89=B2=20+=20=E9=99=8D=E4=BD=8E=E9=A5=B1=E5=92=8C?= =?UTF-8?q?=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Primary 按钮改为渐变背景 linear-gradient(135deg, #6b8cff, #88a4ff) 2. 全局 primary 饱和度从 0.19 降至 0.12，更柔和 3. destructive 改为珊瑚色 oklch(0.70 0.14 25) 4. 新增 success/warning/info 三个语义色变量 5. Badge 新增 success/warning/info variant 6. 视图层硬编码 text-green/text-red/text-yellow 全部替换为语义 token 7. chart 颜色同步降低饱和度 --- src/assets/styles/globals.css | 126 +++++++++++++++----------- src/components/ui/badge/index.ts | 6 ++ src/components/ui/button/index.ts | 2 +- src/views/cpdaily/CpTaskLog.vue | 4 +- src/views/cpdaily/CpTaskManage.vue | 6 +- src/views/dashboard/DashboardView.vue | 6 +- src/views/login/BalanceMigrate.vue | 2 +- src/views/login/ConfirmEmail.vue | 2 +- src/views/user/BalanceRecords.vue | 2 +- 9 files changed, 92 insertions(+), 64 deletions(-) diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css index aa578d1..f820d70 100644 --- a/src/assets/styles/globals.css +++ b/src/assets/styles/globals.css @@ -11,25 +11,25 @@ --card-foreground: 220 30% 12%; --popover: 0 0% 100%; --popover-foreground: 220 30% 12%; - --primary: 220 72% 50%; + --primary: 228 60% 62%; --primary-foreground: 0 0% 98%; - --secondary: 220 30% 96%; + --secondary: 220 20% 96%; --secondary-foreground: 220 30% 18%; - --muted: 220 20% 96%; + --muted: 220 15% 96%; --muted-foreground: 220 10% 42%; - --accent: 220 40% 95%; + --accent: 220 30% 95%; --accent-foreground: 220 30% 18%; - --destructive: 0 84.2% 60.2%; + --destructive: 15 65% 55%; --destructive-foreground: 0 0% 98%; - --border: 220 20% 92%; - --input: 220 20% 92%; - --ring: 220 72% 50%; + --border: 220 15% 92%; + --input: 220 15% 92%; + --ring: 228 60% 62%; --radius: 0.75rem; - --chart-1: 220 72% 55%; - --chart-2: 170 50% 48%; - --chart-3: 40 70% 55%; - --chart-4: 280 55% 58%; - --chart-5: 15 70% 55%; + --chart-1: 228 60% 62%; + --chart-2: 155 40% 50%; + --chart-3: 40 50% 55%; + --chart-4: 280 40% 58%; + --chart-5: 15 50% 55%; } .dark { @@ -39,24 +39,24 @@ --card-foreground: 0 0% 98%; --popover: 220 20% 12%; --popover-foreground: 0 0% 98%; - --primary: 220 65% 62%; + --primary: 228 55% 68%; --primary-foreground: 220 30% 10%; --secondary: 220 15% 18%; --secondary-foreground: 0 0% 98%; --muted: 220 15% 18%; --muted-foreground: 220 10% 60%; - --accent: 220 20% 18%; + --accent: 220 18% 18%; --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; + --destructive: 15 60% 55%; --destructive-foreground: 0 0% 98%; --border: 220 15% 18%; --input: 220 15% 18%; - --ring: 220 65% 62%; - --chart-1: 220 70% 55%; - --chart-2: 170 55% 48%; - --chart-3: 40 75% 55%; - --chart-4: 280 60% 58%; - --chart-5: 15 72% 55%; + --ring: 228 55% 68%; + --chart-1: 228 55% 68%; + --chart-2: 155 40% 52%; + --chart-3: 40 55% 58%; + --chart-4: 280 45% 60%; + --chart-5: 15 55% 58%; } } @@ -89,6 +89,12 @@ --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); + --color-success: var(--success); + --color-success-foreground: var(--success-foreground); + --color-warning: var(--warning); + --color-warning-foreground: var(--warning-foreground); + --color-info: var(--info); + --color-info-foreground: var(--info-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); @@ -115,31 +121,39 @@ --card-foreground: oklch(0.18 0.02 250); --popover: oklch(1 0 0); --popover-foreground: oklch(0.18 0.02 250); - --primary: oklch(0.55 0.19 250); + --primary: oklch(0.62 0.12 260); --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.965 0.01 250); + --secondary: oklch(0.965 0.008 250); --secondary-foreground: oklch(0.25 0.04 250); - --muted: oklch(0.965 0.008 250); + --muted: oklch(0.965 0.006 250); --muted-foreground: oklch(0.52 0.02 250); - --accent: oklch(0.955 0.025 250); + --accent: oklch(0.955 0.018 250); --accent-foreground: oklch(0.25 0.04 250); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.925 0.01 250); - --input: oklch(0.925 0.01 250); - --ring: oklch(0.55 0.19 250); - --chart-1: oklch(0.6 0.19 250); - --chart-2: oklch(0.7 0.15 170); - --chart-3: oklch(0.75 0.16 80); - --chart-4: oklch(0.65 0.18 300); - --chart-5: oklch(0.7 0.17 25); - --sidebar: oklch(0.985 0.005 250); + --destructive: oklch(0.70 0.14 25); + --border: oklch(0.925 0.008 250); + --input: oklch(0.925 0.008 250); + --ring: oklch(0.62 0.12 260); + --success: oklch(0.65 0.12 155); + --success-foreground: oklch(0.985 0 0); + --warning: oklch(0.75 0.12 80); + --warning-foreground: oklch(0.25 0.04 60); + --info: oklch(0.68 0.10 240); + --info-foreground: oklch(0.985 0 0); + --gradient-primary: linear-gradient(135deg, #6b8cff, #88a4ff); + --gradient-primary-hover: linear-gradient(135deg, #5f80f5, #7d9af5); + --chart-1: oklch(0.62 0.12 260); + --chart-2: oklch(0.65 0.12 155); + --chart-3: oklch(0.75 0.12 80); + --chart-4: oklch(0.62 0.12 300); + --chart-5: oklch(0.70 0.12 25); + --sidebar: oklch(0.985 0.004 250); --sidebar-foreground: oklch(0.18 0.02 250); - --sidebar-primary: oklch(0.55 0.19 250); + --sidebar-primary: oklch(0.62 0.12 260); --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.955 0.025 250); + --sidebar-accent: oklch(0.955 0.018 250); --sidebar-accent-foreground: oklch(0.25 0.04 250); - --sidebar-border: oklch(0.925 0.01 250); - --sidebar-ring: oklch(0.55 0.19 250); + --sidebar-border: oklch(0.925 0.008 250); + --sidebar-ring: oklch(0.62 0.12 260); } .dark { @@ -149,31 +163,39 @@ --card-foreground: oklch(0.985 0 0); --popover: oklch(0.2 0.015 250); --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.7 0.15 250); + --primary: oklch(0.72 0.10 260); --primary-foreground: oklch(0.15 0.02 250); --secondary: oklch(0.26 0.02 250); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.26 0.02 250); --muted-foreground: oklch(0.7 0.02 250); - --accent: oklch(0.26 0.03 250); + --accent: oklch(0.26 0.025 250); --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); + --destructive: oklch(0.70 0.14 25); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); - --ring: oklch(0.7 0.15 250); - --chart-1: oklch(0.65 0.2 250); - --chart-2: oklch(0.7 0.15 170); - --chart-3: oklch(0.75 0.16 80); - --chart-4: oklch(0.65 0.2 300); - --chart-5: oklch(0.7 0.19 25); + --ring: oklch(0.72 0.10 260); + --success: oklch(0.70 0.12 155); + --success-foreground: oklch(0.985 0 0); + --warning: oklch(0.78 0.12 80); + --warning-foreground: oklch(0.18 0.04 60); + --info: oklch(0.72 0.10 240); + --info-foreground: oklch(0.985 0 0); + --gradient-primary: linear-gradient(135deg, #7b9aff, #99b2ff); + --gradient-primary-hover: linear-gradient(135deg, #6f8ef5, #8da6f5); + --chart-1: oklch(0.72 0.10 260); + --chart-2: oklch(0.70 0.12 155); + --chart-3: oklch(0.78 0.12 80); + --chart-4: oklch(0.68 0.12 300); + --chart-5: oklch(0.72 0.12 25); --sidebar: oklch(0.2 0.015 250); --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.7 0.15 250); + --sidebar-primary: oklch(0.72 0.10 260); --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.26 0.03 250); + --sidebar-accent: oklch(0.26 0.025 250); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.7 0.15 250); + --sidebar-ring: oklch(0.72 0.10 260); } @layer base { diff --git a/src/components/ui/badge/index.ts b/src/components/ui/badge/index.ts index bbc0dfa..65e3568 100644 --- a/src/components/ui/badge/index.ts +++ b/src/components/ui/badge/index.ts @@ -14,6 +14,12 @@ export const badgeVariants = cva( "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + success: + "border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90", + warning: + "border-transparent bg-warning text-warning-foreground [a&]:hover:bg-warning/90", + info: + "border-transparent bg-info text-info-foreground [a&]:hover:bg-info/90", outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", }, diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts index 26e2c55..7be3f8a 100644 --- a/src/components/ui/button/index.ts +++ b/src/components/ui/button/index.ts @@ -9,7 +9,7 @@ export const buttonVariants = cva( variants: { variant: { default: - "bg-primary text-primary-foreground hover:bg-primary/90", + "text-primary-foreground shadow-sm [background:var(--gradient-primary)] hover:[background:var(--gradient-primary-hover)]", destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: diff --git a/src/views/cpdaily/CpTaskLog.vue b/src/views/cpdaily/CpTaskLog.vue index eb95d60..5ee0c08 100644 --- a/src/views/cpdaily/CpTaskLog.vue +++ b/src/views/cpdaily/CpTaskLog.vue @@ -26,12 +26,12 @@ const columns: ColumnDef[] = [ if (typeof isSuccess === 'boolean') { return h( 'span', - { class: isSuccess ? 'text-green-600' : 'text-red-600' }, + { class: isSuccess ? 'text-success' : 'text-destructive' }, isSuccess ? '成功' : '失败', ) } if (errorMessage) { - return h('span', { class: 'text-red-600' }, '失败') + return h('span', { class: 'text-destructive' }, '失败') } return h('span', '-') }, diff --git a/src/views/cpdaily/CpTaskManage.vue b/src/views/cpdaily/CpTaskManage.vue index 21f35e1..46b1491 100644 --- a/src/views/cpdaily/CpTaskManage.vue +++ b/src/views/cpdaily/CpTaskManage.vue @@ -279,9 +279,9 @@ const taskStatusMap: Record = { - form: { label: '表单待填', color: 'text-yellow-600' }, - execute: { label: '执行参数待填', color: 'text-yellow-600' }, - complete: { label: '已完成', color: 'text-green-600' }, + form: { label: '表单待填', color: 'text-warning' }, + execute: { label: '执行参数待填', color: 'text-warning' }, + complete: { label: '已完成', color: 'text-success' }, } const notificationTypeMap: Record = { diff --git a/src/views/dashboard/DashboardView.vue b/src/views/dashboard/DashboardView.vue index 0a46541..3007b18 100644 --- a/src/views/dashboard/DashboardView.vue +++ b/src/views/dashboard/DashboardView.vue @@ -138,7 +138,7 @@ onMounted(() => { 今日消费
{{ summary?.todayCost ?? '--' }}
-
+
@@ -155,7 +155,7 @@ onMounted(() => { 近7日消费
{{ summary?.week1Cost ?? '--' }}
-
+
@@ -172,7 +172,7 @@ onMounted(() => { 今日任务数
{{ summary?.todayTaskCount ?? '--' }}
-
+
diff --git a/src/views/login/BalanceMigrate.vue b/src/views/login/BalanceMigrate.vue index 6d4c190..e6d4e58 100644 --- a/src/views/login/BalanceMigrate.vue +++ b/src/views/login/BalanceMigrate.vue @@ -109,7 +109,7 @@ async function onConfirmCaptchaConfirm(result: { captchaKey: string; dots: Array
- +

转移成功

{{ confirmMessage }}

diff --git a/src/views/login/ConfirmEmail.vue b/src/views/login/ConfirmEmail.vue index d3badae..7feb699 100644 --- a/src/views/login/ConfirmEmail.vue +++ b/src/views/login/ConfirmEmail.vue @@ -51,7 +51,7 @@ onMounted(async () => {
- +

验证成功

{{ msg }}