{/* 表单/详情 */}
```
### 垂直节奏
```
页面内边距： py-6 sm:py-8
标题到内容： mb-6 sm:mb-8（或 mb-8 sm:mb-12）
卡片间距： gap-4
表单字段间： gap-6
主内容偏移： pt-14（TopNav 高度）
```
### 响应式模式
| 场景 | 移动端 | 桌面端 |
|------|--------|--------|
| 内边距 | `px-4 py-6` | `sm:px-6 sm:py-8` |
| 标题 | `text-xl` | `sm:text-2xl` |
| 导航 | 汉堡菜单 | `md:flex` 横向链接 |
| Chip | `rounded-full` 紧凑 | `sm:rounded-lg` 展开 |
| 网格 | 单列 | `sm:grid-cols-2 lg:grid-cols-3` |
---
## 七、`@layer base`（`index.css` 实际定义）
```css
@layer base {
html {
font-family: 'Noto Serif SC', STSong, SimSun, serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
overscroll-behavior: none;
}
body {
font-feature-settings: "kern" 1, "liga" 1;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
overflow-x: hidden;
background-color: var(--bg-page);
color: var(--text-primary);
min-height: 100vh;
overscroll-behavior: none;
}
::selection {
@apply bg-black text-white;
}
}
```
---
## 八、动画与工具类（`index.css` 实际定义）
### 动画关键帧（以代码为准，与设计文档有差异）
```css
@layer utilities {
/* === 动画关键帧 === */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInFromRight {
from { opacity: 0.6; transform: translateX(12%); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInFromLeft {
from { opacity: 0.6; transform: translateX(-12%); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes nudgeRight {
0%, 100% { transform: translateX(0); opacity: 0.7; }
50% { transform: translateX(4px); opacity: 1; }
}
/* === 动画类 === */
.animate-spin { animation: spin 0.8s linear infinite; }
.animate-blink { animation: blink 1.2s ease-in-out infinite; }
.animate-fade-in { animation: fadeIn 0.15s ease-out; }
.animate-slide-in-right { animation: slideInFromRight 0.2s ease-out; }
.animate-slide-in-left { animation: slideInFromLeft 0.2s ease-out; }
.animate-nudge-right { animation: nudgeRight 2s ease-in-out infinite; }
/* === 工具类 === */
.prose-serif { font-family: 'Noto Serif SC', STSong, SimSun, serif; }
.border-thin { border-width: 0.5px; }
.safe-area-inset-top { padding-top: env(safe-area-inset-top); }
.touch-manipulation { touch-action: manipulation; }
.scroll-contain { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.no-bounce { overscroll-behavior: none; touch-action: pan-y; }
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }
}
```
**过渡规则**：
- 常规状态变化 → `transition-colors`（优先，避免 transition-all 引起布局抖动）
- 可接受 → `transition-all duration-200`
- Tab 切换 → `animate-slide-in-right` / `animate-slide-in-left`
- 触摸优化 → `touch-manipulation`（消除 300ms 延迟）
---
## 九、预定义 CSS 组件类（`index.css` 实际定义，非 Tailwind 工具类）
```css
/* === Spinner === */
.spinner {
@apply inline-block w-4 h-4 border-2 border-gray-200 border-t-black rounded-full animate-spin;
}
/* === Status Badge === */
.status-badge {
@apply inline-flex items-center px-2 py-0.5 text-xs border;
}
.status-badge-default { @apply status-badge border-gray-200 text-gray-600; }
.status-badge-active { @apply status-badge border-black text-black; }
/* === Expert Dot === */
.expert-dot-active { @apply w-2 h-2 rounded-full bg-black animate-blink; }
```
使用示例：
```tsx
进行中
```
---
## 十、Markdown 内容渲染（以 `index.css` 实际代码为准）
包裹 `react-markdown` 输出用 `.markdown-content` 类（纯 CSS 选择器，非 `@layer`）：
```css
/* --- 基础 --- */
.markdown-content { @apply leading-relaxed text-black; font-family: 'Noto Serif SC', STSong, SimSun, serif; }
/* --- 标题（通用）--- */
.markdown-content h1, h2, h3, h4, h5, h6 { @apply mt-8 mb-4 font-bold text-black; font-family: 'Noto Serif SC', ...; }
.markdown-content h1 { @apply text-2xl border-b border-black pb-2; }
.markdown-content h2 { @apply text-xl border-b border-gray-200 pb-1; }
.markdown-content h3 { @apply text-lg; }
.markdown-content h4 { @apply text-base; }
/* --- 正文 --- */
.markdown-content p { @apply mb-4; }
.markdown-content p:last-child { @apply mb-0; }
.markdown-content ul, ol { @apply mb-4 pl-6; }
.markdown-content li { @apply mb-2; }
.markdown-content hr { @apply border-t border-gray-200 my-8; }
/* --- 链接 --- */
.markdown-content a { @apply text-black underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.markdown-content a:hover { text-decoration-thickness: 2px; }
/* --- 图片（有完整样式！） --- */
.markdown-content img {
@apply block h-auto my-4 rounded-xl border border-gray-200 bg-gray-50 shadow-sm mx-auto;
max-height: min(72vh, 520px);
width: auto;
max-width: 100%;
object-fit: contain;
}
/* --- 代码 --- */
.markdown-content code { @apply bg-gray-100 px-1 py-0.5 text-sm; font-family: 'Courier New', Courier, monospace; }
.markdown-content pre { @apply bg-gray-900 text-white p-4 mb-4 overflow-x-auto; }
.markdown-content pre code { @apply bg-transparent p-0; }
/* --- 引用 --- */
.markdown-content blockquote { @apply border-l-2 border-black pl-4 my-4 text-gray-600 italic; }
/* --- 表格（注意：border-collapse，非 rounded） --- */
.markdown-content table { @apply w-full border-collapse mb-4 text-sm; }
.markdown-content th, .markdown-content td { @apply border border-gray-200 px-3 py-2 text-left; }
.markdown-content th { @apply bg-gray-50 font-semibold text-black; }
.markdown-content td { @apply text-gray-700; }
```
---
## 十一、无障碍（a11y）约定
```tsx
// 图标按钮必须有 aria-label
// 可展开元素