sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): update theme configuration and color scheme

Browse Source 
- Change Tailwind CSS configuration from neutral to slate base color
- Rename style.css to theme.css for better organization
- Update main.js to import the new theme.css file
- Refactor design tokens in style.css with updated color palette
- Replace old color variables with new oklch-based color system
- Add shadcn compatibility variables for component styling
- Update primary, secondary, and accent colors with new values
- Modify destructive, border, input, and ring color definitions
This commit is contained in:
sion123
2026-03-15 22:43:25 +08:00
parent 790f1751f2
commit a28b27d300
4 changed files with 173 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/web-gold/components.json
View File

@@ -4,8 +4,8 @@
"typescript": true,
"tailwind": {
"config": "",
"css": "src/style.css",
"baseColor": "neutral",
"css": "src/theme.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},

1
frontend/app/web-gold/src/main.js
View File

@@ -11,6 +11,7 @@ import 'dayjs/locale/zh-cn';
import App from './App.vue'
import router from './router'
import './style.css'
import './theme.css'
const app = createApp(App)
const pinia = createPinia()

337
frontend/app/web-gold/src/style.css
View File

@@ -1,46 +1,3 @@
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
/* ================================
Yudao Cloud B端设计系统
Design System v1.0
@@ -50,6 +7,9 @@
1. 设计令牌 (Design Tokens)
================================ */
:root {
/* ========================================
shadcn 兼容变量
======================================== */
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
@@ -57,102 +17,90 @@
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary: oklch(0.45 0.16 254.604);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--secondary: oklch(0.97 0.001 264.695);
--secondary-foreground: oklch(0.205 0.015 264.695);
--muted: oklch(0.97 0.001 264.695);
--muted-foreground: oklch(0.45 0.02 264.695);
--accent: oklch(0.97 0.001 264.695);
--accent-foreground: oklch(0.205 0.015 264.695);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.922 0.004 264.695);
--input: oklch(0.922 0.004 264.695);
--ring: oklch(0.55 0.18 254.604);
/* ========================================
品牌主色 - 科技蓝
品牌主色 - 科技蓝 (oklch)
======================================== */
--color-primary-50: #EFF6FF;
--color-primary-100: #DBEAFE;
--color-primary-200: #BFDBFE;
--color-primary-300: #93C5FD;
--color-primary-400: #60A5FA;
--color-primary-500: #3B82F6;
--color-primary-600: #2563EB;
--color-primary-700: #1D4ED8;
--color-primary-50: oklch(0.97 0.014 254.604);
--color-primary-100: oklch(0.93 0.028 254.604);
--color-primary-200: oklch(0.87 0.056 254.604);
--color-primary-300: oklch(0.78 0.11 254.604);
--color-primary-400: oklch(0.68 0.16 254.604);
--color-primary-500: oklch(0.55 0.18 254.604);
--color-primary-600: oklch(0.45 0.16 254.604);
--color-primary-700: oklch(0.37 0.13 254.604);
/* ========================================
中性灰
中性灰 - 偏蓝冷色调
======================================== */
--color-gray-50: #F9FAFB;
--color-gray-100: #F3F4F6;
--color-gray-200: #E5E7EB;
--color-gray-300: #D1D5DB;
--color-gray-400: #9CA3AF;
--color-gray-500: #6B7280;
--color-gray-600: #4B5563;
--color-gray-700: #374151;
--color-gray-800: #1F2937;
--color-gray-900: #111827;
--color-gray-50: oklch(0.985 0.001 264.695);
--color-gray-100: oklch(0.971 0.002 264.695);
--color-gray-200: oklch(0.938 0.004 264.695);
--color-gray-300: oklch(0.876 0.01 264.695);
--color-gray-400: oklch(0.718 0.018 264.695);
--color-gray-500: oklch(0.552 0.024 264.695);
--color-gray-600: oklch(0.446 0.03 264.695);
--color-gray-700: oklch(0.369 0.034 264.695);
--color-gray-800: oklch(0.271 0.036 264.695);
--color-gray-900: oklch(0.195 0.038 264.695);
/* ========================================
功能色
======================================== */
--color-success-50: #DCFCE7;
--color-success-500: #22C55E;
--color-success-600: #16A34A;
--color-success-50: oklch(0.95 0.05 142.495);
--color-success-500: oklch(0.72 0.19 142.495);
--color-success-600: oklch(0.62 0.17 142.495);
--color-warning-50: #FEF3C7;
--color-warning-500: #F59E0B;
--color-warning-600: #D97706;
--color-warning-50: oklch(0.95 0.08 90.278);
--color-warning-500: oklch(0.75 0.183 55.278);
--color-warning-600: oklch(0.65 0.16 55.278);
--color-error-50: #FEE2E2;
--color-error-500: #EF4444;
--color-error-600: #DC2626;
--color-error-50: oklch(0.95 0.08 25.331);
--color-error-500: oklch(0.63 0.237 25.331);
--color-error-600: oklch(0.55 0.21 25.331);
--color-info-50: #DBEAFE;
--color-info-500: #3B82F6;
--color-info-600: #2563EB;
--color-info-50: oklch(0.95 0.04 254.604);
--color-info-500: oklch(0.62 0.17 254.604);
--color-info-600: oklch(0.52 0.15 254.604);
/* ========================================
语义化颜色 (兼容旧变量)
======================================== */
--color-bg: var(--color-gray-50);
--color-bg-page: var(--color-gray-50);
--color-bg-card: #FFFFFF;
--color-surface: #FFFFFF;
--color-bg: oklch(0.985 0.001 264.695);
--color-bg-page: oklch(0.985 0.001 264.695);
--color-bg-card: oklch(1 0 0);
--color-surface: oklch(1 0 0);
--color-text: var(--color-gray-900);
--color-text-primary: var(--color-gray-900);
--color-text-secondary: var(--color-gray-600);
--color-text-muted: var(--color-gray-500);
--color-text-disabled: var(--color-gray-400);
--color-text-inverse: #FFFFFF;
--color-text: oklch(0.195 0.038 264.695);
--color-text-primary: oklch(0.195 0.038 264.695);
--color-text-secondary: oklch(0.446 0.03 264.695);
--color-text-muted: oklch(0.552 0.024 264.695);
--color-text-disabled: oklch(0.718 0.018 264.695);
--color-text-inverse: oklch(0.985 0 0);
--color-border: var(--color-gray-200);
--color-border-focus: var(--color-primary-500);
--color-border: oklch(0.922 0.004 264.695);
--color-border-focus: oklch(0.55 0.18 254.604);
--color-primary-hover: var(--color-primary-400);
--color-success: var(--color-success-500);
--color-success-bg: var(--color-success-50);
--color-warning: var(--color-warning-500);
--color-warning-bg: var(--color-warning-50);
--color-error: var(--color-error-500);
--color-error-bg: var(--color-error-50);
--color-success: var(--color-success-500);
--color-success-bg: var(--color-success-50);
--color-warning: var(--color-warning-500);
--color-warning-bg: var(--color-warning-50);
--color-error: var(--color-error-500);
--color-error-bg: var(--color-error-50);
/* ========================================
字体系统
@@ -160,53 +108,53 @@
--font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
--font-size-xs: 12px;
--font-size-sm: 13px;
--font-size-xs: 12px;
--font-size-sm: 13px;
--font-size-base: 14px;
--font-size-md: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-md: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--line-height-tight: 1.25;
--line-height-base: 1.5;
--line-height-base: 1.5;
/* ========================================
间距系统 (4px 基准)
======================================== */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
/* ========================================
圆角系统
======================================== */
--radius-card: 12px;
--radius-card: 12px;
--radius-button: 6px;
--radius-tag: 4px;
--radius-tag: 4px;
/* ========================================
阴影系统
======================================== */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-blue: 0 0 0 3px rgba(59, 130, 246, 0.15);
--shadow-inset-card: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
--glow-primary: 0 0 0 3px rgba(59, 130, 246, 0.15);
--shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
--shadow-base: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
--shadow-blue: 0 0 0 3px oklch(0.55 0.18 254.604 / 0.15);
--shadow-inset-card: inset 0 1px 0 0 oklch(1 0 0 / 0.05);
--glow-primary: 0 0 0 3px oklch(0.55 0.18 254.604 / 0.15);
/* ========================================
布局系统
@@ -227,80 +175,59 @@
======================================== */
[data-theme="dark"],
.dark {
--background: oklch(0.145 0 0);
--background: oklch(0.145 0.004 264.695);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card: oklch(0.18 0.006 264.695);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover: oklch(0.18 0.006 264.695);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--primary: oklch(0.985 0 0);
--primary-foreground: oklch(0.205 0.007 264.695);
--secondary: oklch(0.25 0.01 264.695);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--muted: oklch(0.25 0.01 264.695);
--muted-foreground: oklch(0.65 0.015 264.695);
--accent: oklch(0.30 0.015 264.695);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
--destructive: oklch(0.65 0.2 25);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.28 0.01 264.695);
--input: oklch(0.28 0.01 264.695);
--ring: oklch(0.55 0.15 254.604);
/* 背景层级 */
--color-bg: #0F172A;
--color-bg-page: #0F172A;
--color-bg-card: #1E293B;
--color-surface: #1E293B;
--color-bg: oklch(0.12 0.005 264.695);
--color-bg-page: oklch(0.12 0.005 264.695);
--color-bg-card: oklch(0.18 0.006 264.695);
--color-surface: oklch(0.18 0.006 264.695);
/* 中性灰 - 深色模式调整 */
--color-gray-50: #1E293B;
--color-gray-100: #334155;
--color-gray-200: #475569;
--color-gray-300: #64748B;
--color-gray-400: #94A3B8;
--color-gray-500: #CBD5E1;
--color-gray-600: #E2E8F0;
--color-gray-700: #F1F5F9;
--color-gray-800: #F8FAFC;
--color-gray-900: #FFFFFF;
--color-gray-50: oklch(0.22 0.01 264.695);
--color-gray-100: oklch(0.28 0.01 264.695);
--color-gray-200: oklch(0.35 0.012 264.695);
--color-gray-300: oklch(0.45 0.015 264.695);
--color-gray-400: oklch(0.58 0.015 264.695);
--color-gray-500: oklch(0.70 0.012 264.695);
--color-gray-600: oklch(0.80 0.008 264.695);
--color-gray-700: oklch(0.88 0.005 264.695);
--color-gray-800: oklch(0.94 0.003 264.695);
--color-gray-900: oklch(0.98 0 0);
/* 文字 */
--color-text: #F1F5F9;
--color-text-primary: #F1F5F9;
--color-text-secondary: #94A3B8;
--color-text-muted: #64748B;
--color-text-disabled: #475569;
--color-text: oklch(0.94 0.003 264.695);
--color-text-primary: oklch(0.94 0.003 264.695);
--color-text-secondary: oklch(0.70 0.012 264.695);
--color-text-muted: oklch(0.50 0.015 264.695);
--color-text-disabled: oklch(0.35 0.012 264.695);
/* 边框 */
--color-border: #334155;
--color-border: oklch(0.28 0.01 264.695);
/* 主色 - 深色模式提亮 */
--color-primary-hover: #93C5FD;
--color-primary-500: #60A5FA;
--color-primary-400: #93C5FD;
--color-primary-50: rgba(96, 165, 250, 0.1);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
--color-primary-hover: oklch(0.98 0.005 264.695);
--color-primary-500: oklch(0.68 0.16 254.604);
--color-primary-400: oklch(0.78 0.11 254.604);
--color-primary-50: oklch(0.22 0.03 254.604);
}
/* ================================

38
frontend/app/web-gold/src/theme.css Normal file
View File

@@ -0,0 +1,38 @@
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
/* shadcn-vue 主题映射 */
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
}
/* shadcn 基础层 */
@layer base {
* {
@apply border-border outline-ring/50;
}
}