docs/v1.0/requirements/frontend/07-styling.md

样式方案

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

---

目录

1. Tailwind CSS v4 配置
2. Pro Studio 主题
3. CSS 工具类规范

---

1. Tailwind CSS v4 配置

1.1 重要变化

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

1.2 Vite 插件配置

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

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

1.3 主题配置（在 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 深色模式（默认）

: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 亮色模式

.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 自定义滚动条

@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 工具函数

// 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 使用示例

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 响应式设计

// 响应式布局
<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>

---

相关文档

• 主题系统
• 技术栈概览
• 开发规范

---

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