优化
This commit is contained in:
21
frontend/app/web-gold/components.json
Normal file
21
frontend/app/web-gold/components.json
Normal file
@@ -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": {}
|
||||
}
|
||||
@@ -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",
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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)'
|
||||
}
|
||||
|
||||
|
||||
7
frontend/app/web-gold/src/lib/utils.ts
Normal file
7
frontend/app/web-gold/src/lib/utils.ts
Normal file
@@ -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))
|
||||
}
|
||||
@@ -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()
|
||||
|
||||
316
frontend/app/web-gold/src/style.css
Normal file
316
frontend/app/web-gold/src/style.css
Normal file
@@ -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; }
|
||||
@@ -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; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -100,7 +100,7 @@ function handleCreateContent() {
|
||||
<style scoped>
|
||||
.expanded-content {
|
||||
padding: var(--space-4);
|
||||
background: var(--color-slate-50);
|
||||
background: var(--color-gray-50);
|
||||
border-radius: var(--radius-card);
|
||||
margin: var(--space-2) 0;
|
||||
}
|
||||
|
||||
@@ -492,7 +492,7 @@ onMounted(() => {
|
||||
color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary-hover, var(--color-blue-600));
|
||||
color: var(--color-primary-hover, var(--color-primary-600));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Reference in New Issue
Block a user