# 样式方案

> **文档版本**：v1.1  
> **最后更新**：2025-01-18

---

## 目录

1. [Tailwind CSS v4 配置](#1-tailwind-css-v4-配置)
2. [Pro Studio 主题](#2-pro-studio-主题)
3. [CSS 工具类规范](#3-css-工具类规范)

---

## 1. Tailwind CSS v4 配置

### 1.1 重要变化

**Tailwind v4 不再使用 `tailwind.config.js`**，改用 CSS 中的 `@theme` 指令配置。

### 1.2 Vite 插件配置

```typescript
// vite.config.ts
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});
```

### 1.3 主题配置（在 CSS 中）

```css
/* src/styles/globals.css */
@import "tailwindcss";

@theme {
  /* 文字体系 */
  --color-text-primary: var(--text-primary);
  --color-text-regular: var(--text-regular);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  --color-text-placeholder: var(--text-placeholder);

  /* 边框体系 */
  --color-border-dark: var(--border-dark);
  --color-border-base: var(--border-base);
  --color-border-light: var(--border-light);
  --color-border-lighter: var(--border-lighter);

  /* 背景体系 */
  --color-bg-page: var(--bg-page);
  --color-bg-overlay: var(--bg-overlay);
  --color-bg-element: var(--bg-element);
  --color-fill-default: var(--fill-default);
  --color-fill-darker: var(--fill-darker);
  --color-fill-lighter: var(--fill-lighter);

  /* 品牌色 */
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-primary-active: var(--primary-active);

  /* 功能色 */
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-error: var(--error);
  --color-info: var(--info);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);

  /* 轨道颜色 */
  --color-track-storyboard: var(--track-storyboard);
  --color-track-resource: var(--track-resource);
  --color-track-video: var(--track-video);
  --color-track-sound: var(--track-sound);
  --color-track-subtitle: var(--track-subtitle);
  --color-track-voice: var(--track-voice);

  /* 圆角 */
  --radius-sm: 0.125rem;
  --radius: 0.5rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* 动画 */
  --animate-fade-in: fadeIn 0.3s ease-in-out;
  --animate-slide-in-up: slideInUp 0.4s ease-out;
  --animate-scale-in: scaleIn 0.2s ease-out;

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}
```

---

## 2. Pro Studio 主题

### 2.1 深色模式（默认）

```css
:root {
  color-scheme: dark;

  /* 文字体系 */
  --text-primary: #fafafc;
  --text-regular: #e4e4e7;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --text-placeholder: #71717a;

  /* 边框体系 */
  --border-dark: #52525b;
  --border-base: #3f3f46;
  --border-light: #27272a;
  --border-lighter: #18181b;

  /* 背景体系 */
  --bg-page: #09090b;
  --bg-overlay: #18181b;
  --bg-element: #18181b;
  --fill-default: #27272a;
  --fill-darker: #121214;
  --fill-lighter: #3f3f46;

  /* 品牌色 */
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
  --primary-hover: #2563eb;
  --primary-active: #1d4ed8;

  /* 功能色 */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  --destructive: #7f1d1d;
  --destructive-foreground: #fef2f2;

  /* 轨道颜色 */
  --track-storyboard: #60a5fa;
  --track-resource: #a78bfa;
  --track-video: #34d399;
  --track-sound: #fbbf24;
  --track-subtitle: #f87171;
  --track-voice: #22d3ee;
}
```

### 2.2 亮色模式

```css
.light {
  color-scheme: light;

  --text-primary: #09090b;
  --text-regular: #18181b;
  --text-secondary: #71717a;
  --text-placeholder: #a1a1aa;

  --border-dark: #a1a1aa;
  --border-base: #e4e4e7;
  --border-light: #f4f4f5;
  --border-lighter: #fafafa;

  --bg-page: #f4f4f5;
  --bg-overlay: #ffffff;
  --bg-element: #ffffff;
  --fill-default: #f4f4f5;
  --fill-darker: #fafafa;
  --fill-lighter: #e4e4e7;

  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --primary-hover: #1d4ed8;
  --primary-active: #1e40af;

  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
}
```

### 2.3 自定义滚动条

```css
@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted)) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: hsl(var(--muted));
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--muted-foreground));
  }
}
```

---

## 3. CSS 工具类规范

### 3.1 cn 工具函数

```typescript
// src/lib/utils.ts
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

### 3.2 使用示例

```tsx
import { cn } from "@/lib/utils";

function Button({ className, variant, ...props }) {
  return (
    <button
      className={cn(
        "px-4 py-2 rounded-md font-medium",
        variant === "primary" && "bg-primary text-white",
        variant === "secondary" && "bg-secondary text-foreground",
        className,
      )}
      {...props}
    />
  );
}
```

### 3.3 响应式设计

```tsx
// 响应式布局
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* 内容 */}
</div>

// 响应式文字
<h1 className="text-2xl md:text-3xl lg:text-4xl">标题</h1>

// 响应式间距
<div className="p-4 md:p-6 lg:p-8">内容</div>
```

---

## 相关文档

- [主题系统](./09-theme-system.md)
- [技术栈概览](./01-tech-stack.md)
- [开发规范](./13-dev-standards.md)

---

**最后更新**：2025-01-18 | **版本**：v1.1