diff --git a/frontend/app/web-gold/components.json b/frontend/app/web-gold/components.json new file mode 100644 index 0000000000..09b9b8cd47 --- /dev/null +++ b/frontend/app/web-gold/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://shadcn-vue.com/schema.json", + "style": "new-york", + "typescript": true, + "tailwind": { + "config": "", + "css": "src/style.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "iconLibrary": "lucide", + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "composables": "@/composables" + }, + "registries": {} +} diff --git a/frontend/app/web-gold/package.json b/frontend/app/web-gold/package.json index 0ba2288658..f4b433b605 100644 --- a/frontend/app/web-gold/package.json +++ b/frontend/app/web-gold/package.json @@ -20,16 +20,20 @@ "@ai-sdk/openai": "^3.0.12", "@ant-design/icons-vue": "^7.0.1", "@microsoft/fetch-event-source": "^2.0.1", - "@tailwindcss/vite": "^4.1.14", "ai": "^6.0.39", "ant-design-vue": "^4.2.6", "aplayer": "^1.10.1", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", "dayjs": "^1.11.18", + "lucide-vue-next": "^0.575.0", "markdown-it": "^14.1.0", "path-to-regexp": "^6.3.0", "pinia": "^3.0.3", "pinia-plugin-persistedstate": "^4.5.0", "qs": "^6.14.0", + "tailwind-merge": "^3.5.0", + "tailwindcss": "^4.2.1", "vue": "^3.5.22", "vue-router": "^4.5.1", "xlsx": "^0.18.5", @@ -38,7 +42,8 @@ "devDependencies": { "@eslint/js": "^9.33.0", "@prettier/plugin-oxc": "^0.0.4", - "@tailwindcss/postcss": "^4.1.14", + "@tailwindcss/postcss": "^4.2.1", + "@tailwindcss/vite": "^4.2.1", "@vitejs/plugin-vue": "^6.0.1", "@vitejs/plugin-vue-jsx": "^5.1.1", "@vue/eslint-config-prettier": "^10.2.0", @@ -53,7 +58,7 @@ "oxlint": "~1.11.0", "postcss": "^8.5.6", "prettier": "3.6.2", - "tailwindcss": "^4.1.14", + "tw-animate-css": "^1.4.0", "typescript": "^5.7.3", "vite": "^7.1.7", "vite-plugin-compression2": "^2.4.0", diff --git a/frontend/app/web-gold/src/components/LoginModal.vue b/frontend/app/web-gold/src/components/LoginModal.vue index 12f1553a28..95d5107fd9 100644 --- a/frontend/app/web-gold/src/components/LoginModal.vue +++ b/frontend/app/web-gold/src/components/LoginModal.vue @@ -573,7 +573,7 @@ async function handleLoginSuccess(info) { .brand-pane { width: 50%; height: 100%; - background: linear-gradient(135deg, var(--color-slate-900) 0%, var(--color-slate-800) 100%); + background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%); position: relative; overflow: hidden; } @@ -646,9 +646,9 @@ async function handleLoginSuccess(info) { display: flex; align-items: center; justify-content: center; - background: var(--color-slate-800); + background: var(--color-gray-800); border-radius: 10px; - border: 1px solid var(--color-slate-700); + border: 1px solid var(--color-gray-700); } .feature-text { @@ -676,7 +676,7 @@ async function handleLoginSuccess(info) { width: 40px; height: 40px; border: none; - background: var(--color-slate-100); + background: var(--color-gray-100); border-radius: 10px; color: var(--color-text-secondary); cursor: pointer; @@ -687,7 +687,7 @@ async function handleLoginSuccess(info) { } .close-btn:hover { - background: var(--color-slate-200); + background: var(--color-gray-200); color: var(--color-text); } @@ -705,7 +705,7 @@ async function handleLoginSuccess(info) { display: flex; gap: 8px; margin-bottom: 12px; - background: var(--color-slate-50); + background: var(--color-gray-50); padding: 4px; border-radius: 12px; border: 1px solid var(--color-border); @@ -815,7 +815,7 @@ async function handleLoginSuccess(info) { } .send-code-btn:hover:not(:disabled) { - background: var(--color-slate-50); + background: var(--color-gray-50); border-color: var(--color-primary); } @@ -866,7 +866,7 @@ async function handleLoginSuccess(info) { } .back-btn:hover { - background: var(--color-slate-50); + background: var(--color-gray-50); color: var(--color-text); } diff --git a/frontend/app/web-gold/src/components/SidebarNav.vue b/frontend/app/web-gold/src/components/SidebarNav.vue index 8405398aad..6332a64c57 100644 --- a/frontend/app/web-gold/src/components/SidebarNav.vue +++ b/frontend/app/web-gold/src/components/SidebarNav.vue @@ -116,7 +116,7 @@ const remainingPercent = computed(() => { align-items: center; gap: 10px; padding: 8px 12px; - color: var(--color-slate-600); + color: var(--color-gray-600); background: transparent; border: 1px solid transparent; cursor: pointer; @@ -128,19 +128,19 @@ const remainingPercent = computed(() => { } .nav-item:hover { - background: var(--color-slate-50); - color: var(--color-slate-700); + background: var(--color-gray-50); + color: var(--color-gray-700); } .nav-item.is-active { - background: var(--color-blue-50); - color: var(--color-blue-700); + background: var(--color-primary-50); + color: var(--color-primary-700); border-color: transparent; } .nav-item.is-active:hover { - background: var(--color-blue-100); - color: var(--color-blue-800); + background: var(--color-primary-100); + color: var(--color-primary-700); } .nav-item__icon { @@ -166,20 +166,20 @@ const remainingPercent = computed(() => { .user-card { padding: 12px; border-radius: 12px; - background: var(--color-slate-50); + background: var(--color-gray-50); cursor: pointer; transition: background .2s ease, transform .12s ease; } .user-card:hover { - background: var(--color-slate-100); + background: var(--color-gray-100); transform: translateY(-1px); } .user-card__mobile { font-size: 14px; font-weight: 500; - color: var(--color-slate-700); + color: var(--color-gray-700); margin-bottom: 6px; } diff --git a/frontend/app/web-gold/src/components/TopNav.vue b/frontend/app/web-gold/src/components/TopNav.vue index 48d4dc17f8..75fd7c1b17 100644 --- a/frontend/app/web-gold/src/components/TopNav.vue +++ b/frontend/app/web-gold/src/components/TopNav.vue @@ -4,7 +4,7 @@ import { useUserStore } from '@/stores/user' import UserDropdown from '@/components/UserDropdown.vue' const styles = { - background: 'var(--color-slate-900)', + background: 'var(--color-gray-900)', color: 'var(--color-text-inverse)' } diff --git a/frontend/app/web-gold/src/lib/utils.ts b/frontend/app/web-gold/src/lib/utils.ts new file mode 100644 index 0000000000..c66a9d9cc0 --- /dev/null +++ b/frontend/app/web-gold/src/lib/utils.ts @@ -0,0 +1,7 @@ +import type { ClassValue } from "clsx" +import { clsx } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/frontend/app/web-gold/src/main.js b/frontend/app/web-gold/src/main.js index 26b7c711d1..116a3fe4cc 100644 --- a/frontend/app/web-gold/src/main.js +++ b/frontend/app/web-gold/src/main.js @@ -10,7 +10,7 @@ import 'dayjs/locale/zh-cn'; import App from './App.vue' import router from './router' -import './style.less' +import './style.css' const app = createApp(App) const pinia = createPinia() diff --git a/frontend/app/web-gold/src/style.css b/frontend/app/web-gold/src/style.css new file mode 100644 index 0000000000..19065db579 --- /dev/null +++ b/frontend/app/web-gold/src/style.css @@ -0,0 +1,316 @@ +@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 + ================================ */ + +/* ================================ + 1. 设计令牌 (Design Tokens) + ================================ */ +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --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-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); + --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); + + /* ======================================== + 品牌主色 - 科技蓝 + ======================================== */ + --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-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-success-50: #DCFCE7; + --color-success-500: #22C55E; + --color-success-600: #16A34A; + + --color-warning-50: #FEF3C7; + --color-warning-500: #F59E0B; + --color-warning-600: #D97706; + + --color-error-50: #FEE2E2; + --color-error-500: #EF4444; + --color-error-600: #DC2626; + + --color-info-50: #DBEAFE; + --color-info-500: #3B82F6; + --color-info-600: #2563EB; + + /* ======================================== + 语义化颜色 (兼容旧变量) + ======================================== */ + --color-bg: var(--color-gray-50); + --color-bg-page: var(--color-gray-50); + --color-bg-card: #FFFFFF; + --color-surface: #FFFFFF; + + --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-border: var(--color-gray-200); + --color-border-focus: var(--color-primary-500); + --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); + + /* ======================================== + 字体系统 + ======================================== */ + --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-base: 14px; + --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; + + /* ======================================== + 间距系统 (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-xs: 4px; + --space-sm: 8px; + --space-md: 16px; + --space-lg: 24px; + --space-xl: 32px; + + /* ======================================== + 圆角系统 + ======================================== */ + --radius-card: 12px; + --radius-button: 6px; + --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); + + /* ======================================== + 布局系统 + ======================================== */ + --sidebar-width: 240px; + --header-height: 56px; + + /* ======================================== + 动效 + ======================================== */ + --duration-fast: 150ms; + --duration-base: 200ms; + --duration-slow: 300ms; +} + +/* ======================================== + 深色模式 + ======================================== */ +[data-theme="dark"], +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --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); + --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); + --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); + + /* 背景层级 */ + --color-bg: #0F172A; + --color-bg-page: #0F172A; + --color-bg-card: #1E293B; + --color-surface: #1E293B; + + /* 中性灰 - 深色模式调整 */ + --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-text: #F1F5F9; + --color-text-primary: #F1F5F9; + --color-text-secondary: #94A3B8; + --color-text-muted: #64748B; + --color-text-disabled: #475569; + + /* 边框 */ + --color-border: #334155; + + /* 主色 - 深色模式提亮 */ + --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; + } +} + +/* ================================ + 2. 全局基础样式 (Global Base) + ================================ */ +html, body, #app { + background: var(--color-bg); + color: var(--color-text); + font-size: 16px; + line-height: 1.5; +} + +body { scrollbar-gutter: stable both-edges; } diff --git a/frontend/app/web-gold/src/style.less b/frontend/app/web-gold/src/style.less deleted file mode 100644 index 1e575217a1..0000000000 --- a/frontend/app/web-gold/src/style.less +++ /dev/null @@ -1,217 +0,0 @@ -@import "tailwindcss"; - -/* ================================ - Yudao Cloud B端设计系统 - Design System v1.0 - ================================ */ - -/* ================================ - 1. 设计令牌 (Design Tokens) - ================================ */ -:root { - // ======================================== - // 品牌主色 - 科技蓝 - // ======================================== - --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-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-success-50: #DCFCE7; - --color-success-500: #22C55E; - --color-success-600: #16A34A; - - --color-warning-50: #FEF3C7; - --color-warning-500: #F59E0B; - --color-warning-600: #D97706; - - --color-error-50: #FEE2E2; - --color-error-500: #EF4444; - --color-error-600: #DC2626; - - --color-info-50: #DBEAFE; - --color-info-500: #3B82F6; - --color-info-600: #2563EB; - - // ======================================== - // 语义化颜色 (兼容旧变量) - // ======================================== - --color-bg: var(--color-gray-50); - --color-bg-page: var(--color-gray-50); - --color-bg-card: #FFFFFF; - --color-surface: #FFFFFF; - - --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-border: var(--color-gray-200); - --color-border-focus: var(--color-primary-500); - --color-primary: var(--color-primary-500); - --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); - - // ======================================== - // 字体系统 - // ======================================== - --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-base: 14px; - --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; - - // ======================================== - // 间距系统 (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-xs: 4px; - --space-sm: 8px; - --space-md: 16px; - --space-lg: 24px; - --space-xl: 32px; - - // ======================================== - // 圆角系统 - // ======================================== - --radius-sm: 4px; - --radius-base: 6px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-full: 9999px; - - // 兼容旧变量 - --radius-card: 12px; - --radius-button: 6px; - --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); - - // ======================================== - // 布局系统 - // ======================================== - --sidebar-width: 240px; - --header-height: 56px; - - // ======================================== - // 动效 - // ======================================== - --duration-fast: 150ms; - --duration-base: 200ms; - --duration-slow: 300ms; -} - -// ======================================== -// 深色模式 -// ======================================== -[data-theme="dark"], -.dark { - // 背景层级 - --color-bg: #0F172A; - --color-bg-page: #0F172A; - --color-bg-card: #1E293B; - --color-surface: #1E293B; - - // 中性灰 - 深色模式调整 - --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-text: #F1F5F9; - --color-text-primary: #F1F5F9; - --color-text-secondary: #94A3B8; - --color-text-muted: #64748B; - --color-text-disabled: #475569; - - // 边框 - --color-border: #334155; - - // 主色 - 深色模式提亮 - --color-primary: #60A5FA; - --color-primary-hover: #93C5FD; - --color-primary-500: #60A5FA; - --color-primary-400: #93C5FD; - --color-primary-50: rgba(96, 165, 250, 0.1); -} - -/* ================================ - 2. 全局基础样式 (Global Base) - ================================ */ -html, body, #app { - background: var(--color-bg); - color: var(--color-text); - font-size: 16px; - line-height: 1.5; -} - -body { scrollbar-gutter: stable both-edges; } - - - - - - diff --git a/frontend/app/web-gold/src/views/content-style/Copywriting.vue b/frontend/app/web-gold/src/views/content-style/Copywriting.vue index 309a0f2879..2a85051d30 100644 --- a/frontend/app/web-gold/src/views/content-style/Copywriting.vue +++ b/frontend/app/web-gold/src/views/content-style/Copywriting.vue @@ -637,7 +637,7 @@ defineOptions({ name: 'ContentStyleCopywriting' }) } :deep(.ant-slider-rail) { - background-color: var(--color-slate-200); + background-color: var(--color-gray-200); height: 4px; } diff --git a/frontend/app/web-gold/src/views/content-style/components/ExpandedRowContent.vue b/frontend/app/web-gold/src/views/content-style/components/ExpandedRowContent.vue index a7500d84ee..957868668e 100644 --- a/frontend/app/web-gold/src/views/content-style/components/ExpandedRowContent.vue +++ b/frontend/app/web-gold/src/views/content-style/components/ExpandedRowContent.vue @@ -100,7 +100,7 @@ function handleCreateContent() {