```
#### 3. 流体动画（Fluid Animation）
使用物理感知的缓动曲线：
```css
.animated-element {
transition: all var(--transition-fluid);
/* 等价于: transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); */
}
```
#### 4. 光学交互（Lensing & Light Interaction）
悬停时添加内发光效果：
```css
.interactive-element:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent);
}
```
#### 5. 层次分明（Depth & Hierarchy）
使用两级阴影：
```css
--shadow-sm: 0 2px 4px var(--shadow-color);
--shadow-md: 0 4px 12px var(--shadow-color);
```
### 组件设计准则
#### 按钮组件
```typescript
// Button.tsx
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'ghost';
size?: 'sm' | 'md' | 'lg';
children: React.ReactNode;
onClick?: () => void;
}
export function Button({ variant = 'primary', size = 'md', children, onClick }: ButtonProps) {
return (
);
}
```
#### 卡片组件
```typescript
// Card.tsx
interface CardProps {
children: React.ReactNode;
hover?: boolean;
}
export function Card({ children, hover = true }: CardProps) {
return (
{children}
);
}
```
#### 输入框组件
```typescript
// Input.tsx
interface InputProps {
placeholder?: string;
value: string;
onChange: (value: string) => void;
}
export function Input({ placeholder, value, onChange }: InputProps) {
return (
onChange(e.target.value)}
className="
w-full bg-[var(--glass-bg)] backdrop-blur-[10px]
border border-[var(--glass-border)] rounded-2xl
px-4 py-3 text-base text-[var(--text-color)]
transition-all duration-[400ms]
focus:outline-none focus:border-[var(--accent-color)]
focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--accent-color)_30%,transparent)]
"
/>
);
}
```
### CSS 变量系统
所有样式必须使用 CSS 变量，确保主题切换正常工作：
```css
/* globals.css */
:root {
/* 字体 */
--font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* 浅色主题 */
--bg-color-light: #f0f2f5;
--text-color-light: #1d1d1f;
--accent-color-light: #007aff;
--glass-bg-light: rgba(242, 242, 247, 0.8);
--glass-border-light: rgba(255, 255, 255, 0.5);
--shadow-color-light: rgba(0, 0, 0, 0.1);
/* 深色主题 */
--bg-color-dark: #121212;
--text-color-dark: #f5f5f7;
--accent-color-dark: #0a84ff;
--glass-bg-dark: rgba(28, 28, 30, 0.75);
--glass-border-dark: rgba(60, 60, 60, 0.7);
--shadow-color-dark: rgba(0, 0, 0, 0.3);
/* 圆角 */
--radius-2xl: 1.5rem;
--radius-full: 9999px;
/* 阴影 */
--shadow-sm: 0 2px 4px var(--shadow-color);
--shadow-md: 0 4px 12px var(--shadow-color);
/* 动画 */
--transition-fluid: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body {
--bg-color: var(--bg-color-light);
--text-color: var(--text-color-light);
--accent-color: var(--accent-color-light);
--glass-bg: var(--glass-bg-light);
--glass-border: var(--glass-border-light);
--shadow-color: var(--shadow-color-light);
}
body.dark-mode {
--bg-color: var(--bg-color-dark);
--text-color: var(--text-color-dark);
--accent-color: var(--accent-color-dark);
--glass-bg: var(--glass-bg-dark);
--glass-border: var(--glass-border-dark);
--shadow-color: var(--shadow-color-dark);
}
```
**使用示例：**
```typescript
// ✅ 正确 - 使用 CSS 变量
// ❌ 错误 - 硬编码颜色
```
### 动画规范
#### 悬停动画
```typescript
```
#### 点击动画
```typescript