diff --git a/.gitignore b/.gitignore
index 41f3e36..dcc534a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,15 @@ coverage/
 # 临时文件
 *.tmp
 *.temp
+
+# MCP 缓存
+.serena/
+
+# 截图和测试文件
+screenshots/
+screenshot_*.cjs
+screenshot_*.png
+test_ui_design.py
+
+# 个人文档和测试数据
+docs/my.md
diff --git a/docs/req.md b/docs/req.md
new file mode 100644
index 0000000..4b56642
--- /dev/null
+++ b/docs/req.md
@@ -0,0 +1,42 @@
+实业公司党委2025年组织生活会上党委副书记个人对照检查发言材料，要求如下：
+
+一、会议主题
+ 深入学习贯彻习近平新时代中国特色社会主义思想，全面贯彻落实党的二十届四中全会精神，以打攻坚战、持久战的决心和恒心，锲而不舍落实中央八项规定精神，推进作风建设常态化长效化，以优良作风凝心聚力、真抓实干，奋力开拓中国式现代化建设新局面。
+
+二、主要内容
+
+（一）会前理论学习（习近平总书记关于党的建设重要思想、关于党的自我革命重要思想以及关于加强党的纪律建设、作风建设重要论述，学习贯彻习近平总书记在二十届中央政治局第二十一次集体学习时的重要讲话和对深入贯彻中央八项规定精神学习教育的重要指示精神，学习贯彻习近平总书记在党的二十届四中全会上的重要讲话精神和其他最新重要讲话精神，学习贯彻习近平总书记关于本地区本单位本领域重要讲话和重要指示批示精神，学习贯彻《中共中央关于制定国民经济和社会发展第十五个五年计划的建议》，学习贯彻中央八项规定及其实施细则精神，学习《习近平谈治国理政》第五卷和《中国共产党党章》《中国共产党纪律处分条例》《中共中央办公厅关于锲而不舍落实中央八项规定精神推进作风建设常态化长效化的意见》（中办发〔2025〕57 号），学习贯彻省委十二届八次全会精神等）、辖内各支部征求意见和建议（要将征求意见建议的情况在对照检查材料中进行说明，并将征求的意见建议充分体现到对照检查材料和个人发言提纲中，达到相互促进、相得益彰的效果。）、深入开展谈心谈话（党委班子成员之间、班子成员与分管部门（单位）主要负责同志之间、班子成员与组织关系所在党支部党员代表之间）等方面的准备情况以及需要说明的其他情况。
+
+（二）要认真总结贯彻落实中央八项规定精神情况，盘点哪些问题已经整改完成、哪些问题需要继续整改，在此基础上紧扣组织生活会主题，围绕紧绷自我革命这根弦，进一步把自己摆进去、把职责摆进去、把工作摆进去，以严的标准、严的要求检身正己，特别要突出检视作风建设问题，重点从五个方面深挖问题症结、找准思想根源，做到见人见事见思想。
+
+1.在带头强化政治忠诚、提高政治能力方面
+
+深刻领悟“两个确立”的决定性意义，增强“四个意识”、坚定“四个自信”、做到“两个维护”，严守党的政治纪律和政治规矩，坚定政治方向、坚守政治立场、履行政治责任，始终同以习近平同志为核心的党中央保持高度一致。保持战略定力，增强必胜信心，坚定不移贯彻落实党中央大政方针和决策部署。
+
+2.在带头固本培元、增强党性方面
+
+坚持把政治修养摆在党性修养的首位，自觉以习近平新时代中国特色社会主义思想凝心铸魂，坚守共产党人精神追求，解决好世界观、人生观、价值观总开关问题。认真学习党章党规党纪，始终用党性原则正心明道、修身律己，坚定理想信念、铸牢对党忠诚、厚植为民情怀、纯正道德品质、保持清正廉洁。
+
+3.在带头敬畏人民、敬畏组织、敬畏法纪方面
+
+走好新时代党的群众路线，落实“四下基层”制度，加大保障和改善民生力度，解决好人民群众急难愁盼问题，密切党群干群关系。严格贯彻执行民主集中制，严格执行领导班子议事决策规则，防止独断专行、搞“一言堂”。自觉筑牢拒腐防变的思想堤坝，规范权力运行，防止特权思想、特权现象，防止随意用权、任性用权。
+
+4.在带头干事创业、担当作为方面
+
+树立和践行正确政绩观，完整准确全面贯彻新发展理念，统筹推进经济建设和各领域工作。坚持干字当头，积极识变应变求变，正确把握形势，增强忧患意识，坚持底线思维，用好发展机遇、潜力和优势，敢于斗争、善于斗争，以历史主动精神克难关、战风险、迎挑战，在推动高质量发展、加强基层治理、完成急难险重任务中担当作为，为实现“十五五”良好开局打好坚实基础。
+
+5.在带头坚决扛起管党治党责任方面
+
+严以律己、严负其责、严管所辖，以永远在路上的坚韧和执着，持之以恒推进全面从严治党，扎实推动贯彻落实中央八项规定精神，常态化开展作风教育，扎牢作风建设制度笼子，强化监督执纪，深入推进风腐同查同治，坚决把党的自我革命要求落实到位。落实整治形式主义为基层减负长效机制，坚决整治公文抄袭和调研考察、横向交流中的形式主义问题。树好选人用人风向标，注重考察干部的忠诚度廉洁度。规范党员干部网络空间言行，引导发挥积极作用。
+
+检查材料和班子成员个人发言提纲要把深入贯彻中央八项规定精神学习教育问题清单中需要继续整改的问题、2024年度组织生活会整改落实情况、审计和财务检查发现问题整改落实情况等，列入对照检查内容。
+
+（三）党委班子要用好新时代正风肃纪反腐的实践成果，从本单位本系统确定至少一个具有代表性和紧密联系自身的违反中央八项规定精神问题典型案例（本单位有被问责、处理人员的案例优先），以案说德、以案说纪、以案说法、以案说责；班子成员要围绕典型案例，深刻剖析问题产生的主客观因素，通过揭开“风”的盖子揪出“腐”的真面目，清醒认识“四风”问题的严重危害，举一反三查摆自身在思想上、作风上存在的差距、不足，确保问题查摆更加具象化。典型案例剖析内容要在领导班子对照检查材料和班子成员个人发言提纲中单列段落，其中在领导班子对照检查材料中单列在问题查摆之后，在班子成员个人发言提纲中单列在个人需报告的重大事项之后。
+
+（四）党委班子对照检查材料和班子成员个人发言提纲要说明落实意识形态工作责任制的情况,包括：党委书记作为第一责任人，带头把方向、抓导向、管阵地、强队伍；党委分管领导作为直接责任人，协助党委书记抓好统筹协调和督促指导工作；党委班子其他成员履行“一岗双责”，抓好分管部门（单位）意识形态工作，对职责范围内意识形态工作负领导责任等。对存在的问题要剖析原因，提出具有针对性和可操作性的整改措施。
+
+（五）党委班子对照检查材料和班子成员个人发言提纲要说明落实巡视巡察及整改工作的情况，包括：党委落实巡视巡察及整改工作主体责任、党委书记履行第一责任人、其他班子成员履行“一岗双责”等情况。对存在的问题要剖析原因，提出具有针对性和可操作性的整改措施。
+
+三、材料要求
+
+对照检查材料和要开门见山、直奔主题，内容完整、言之有物，力求把问题找准、原因剖深、措施提实。个人发言提纲要注意回应、认领班子对照检查的问题。问题查摆、原因分析和典型案例剖析内容篇幅在对照检查材料和个人发言提纲中的占比应不少于 60%。
\ No newline at end of file
diff --git a/docs/找问题Prompt.md b/docs/找问题Prompt.md
deleted file mode 100644
index 56c177a..0000000
--- a/docs/找问题Prompt.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# AI检查Prompt - 党委副书记2025年组织生活会个人对照检查发言材料
-
-你是一个具有较高政治敏感性和党内写作经验的AI助手，要求根据下面的写作指导思想，**为一篇党委副书记的个人对照检查发言材料进行检查和改进**。你需要**逐一分析**文章中的每一条问题，并根据以下**标准检查是否符合要求**。
-
----
-
-## **写作要点**：
-1. **每个问题必须基于以下“带头”领域进行深刻剖析：**
-    - 强化政治忠诚、提高政治能力
-    - 增强党性修养，坚定理想信念
-    - 敬畏人民、敬畏组织、敬畏法纪
-    - 干事创业、担当作为
-    - 坚决扛起管党治党责任
-2. **结构要求：**
-    - **问题表述**要清晰、具象
-    - **分析根源**要深刻，不仅局限于“行为”或“表现”，更要分析思想层面的问题
-    - 每个问题要配有**具体例证**和**后果分析**，确保不空泛
-
----
-
-## **具体检查步骤**：
-### 1. **检查每一条“问题表述”的清晰度**：
-   - **问题表述是否具体**：检查是否有过于抽象的描述（如“政治意识不够强”）；需要将问题具象化为行为或思想上的具体表现。
-   - **例子**：是否有实际例子来支撑问题（如“某次重要决策中，未能及时向党中央报告”等）。
-
-### 2. **深度分析“思想根源”**：
-   - **是否分析了问题的思想来源**：检查文章是否仅仅停留在行为问题的表述上，而没有深入剖析背后的思想根源。
-   - **建议**：每个问题应附带对“思想波动”、“认识偏差”的分析，**使用党内常见表述**如“学用脱节”，“上接天线下接地气”等。
-   - **例子**：是否有分析到思想层面的“误区”，如“表面上说得好，但实际工作中没有贯彻党的基本方针政策”。
-
-### 3. **分析“行为习惯”**：
-   - **是否提到具体的“行为习惯”**：对于每个问题，检查是否有行为上的具体表现，如“开会时未能充分发挥批评与自我批评”等。
-   - **要点**：强调行为上的不规范或松懈，如何影响了工作效果或党性修养。
-
-### 4. **典型案例的使用**：
-   - **是否引入了具体的典型案例**：文章是否包含了至少1-2个实际案例，**并以此为基础展开自我反思**。
-   - **案例要求**：检查是否有“通过案例揭示出个人在党性、作风或责任心上的差距”。
-
-### 5. **改进措施的具体性与可操作性**：
-   - **是否提出了针对性的改进措施**：检查文章是否在每个问题后都提出了明确的整改措施，而不仅是泛泛之谈。
-   - **是否列举了明确的整改路径**：例如，改进政治意识的方法，落实党纪党规的方法。
-
----
-
-## **最终输出要求：**
-- **检查与改进建议**：对每个问题逐条进行检查，并指出其中的不足之处。
-- **确保检查后每个问题都有明确的“整改措施”**，并且这些措施必须具有可操作性。
-- **避免空话套话**：批评必须具体、切实，避免只做表面文章。
-- **增加建设性反馈**：除了指出问题，还需要为改进提供具有指导意义的反馈。
-
----
-
-开始检查文章。
diff --git a/docs/需求解析功能使用指南.md b/docs/需求解析功能使用指南.md
new file mode 100644
index 0000000..a8fcb06
--- /dev/null
+++ b/docs/需求解析功能使用指南.md
@@ -0,0 +1,235 @@
+# 智能需求解析功能 - 使用指南
+
+## 功能概述
+
+智能需求解析功能允许您将任何需求文档（如会议要求、文稿规范等）自动转换为 AI 范式配置，用于检查和润色文稿。
+
+## 快速开始
+
+### 1. 访问功能
+
+1. 启动项目：`npm run dev`
+2. 在浏览器中打开：http://localhost:3001
+3. 点击顶部的 "🎨 范式润色" 进入润色界面
+4. 点击 "选择范式" 按钮
+5. 在弹出的范式选择器中，点击左下角的 **"🎯 新建范式"** 按钮
+
+### 2. 解析需求文档
+
+#### 方式一：粘贴文本
+1. 将 `docs/req.md` 的内容复制
+2. 粘贴到文本框中
+3. 点击 "开始解析"
+
+#### 方式二：选择文件
+1. 点击 "选择文件" 标签页
+2. 点击上传区域
+3. 选择 `docs/req.md` 文件
+4. 点击 "开始解析"
+
+### 3. 编辑确认
+
+AI 解析完成后，您可以：
+- **范式名称**：修改为更有意义的名称（如：2025年组织生活会对照检查材料）
+- **描述**：完善描述信息
+- **System Prompt**：编辑系统提示词（通常无需修改）
+- **专家检查指令**：
+  - 修改、删除现有指令
+  - 点击 "+ 添加" 按钮增加新指令
+- **核心要求关键词**：查看 AI 提取的关键要求
+
+### 4. 保存并使用
+
+1. 确认无误后，点击 **"✓ 保存并使用"** 按钮
+2. 系统将：
+   - 保存范式到本地存储（localStorage）
+   - 自动选中该范式
+   - 关闭解析面板
+
+### 5. 检查和润色文稿
+
+1. 在"原文区"中：
+   - 点击 "文稿库" 选择 `docs/my.md`
+   - 或直接粘贴文稿内容
+2. 选择要检查的句子（可全选、反选）
+3. 点击 "检查" 按钮
+4. 查看检查结果：
+   - 🟢 通过：符合要求
+   - 🟡 警告：部分不符
+   - 🔴 失败：明显不符
+5. 选择需要重写的句子，点击 "重写"
+6. 预览并应用重写结果
+
+## 核心文件说明
+
+| 文件 | 作用 |
+|-----|------|
+| `src/utils/requirementParser.js` | 需求解析 Prompt 和逻辑 |
+| `src/stores/paradigm.js` | 自定义范式状态管理 |
+| `src/components/RequirementParserPanel.vue` | 解析界面组件 |
+| `src/components/ParadigmSelectorModal.vue` | 范式选择器（已增强） |
+| `src/components/ArticleRewritePanel.vue` | 主润色界面（已集成） |
+
+## 数据存储
+
+- **位置**：浏览器 localStorage
+- **键名**：`customParadigms`
+- **格式**：JSON 数组
+
+### 管理自定义范式
+
+**查看已保存的范式**：
+```javascript
+// 在浏览器控制台执行
+JSON.parse(localStorage.getItem('customParadigms'))
+```
+
+**导出范式**（备份）：
+```javascript
+// 在浏览器控制台执行
+console.log(localStorage.getItem('customParadigms'))
+// 复制输出内容保存到文件
+```
+
+**导入范式**（恢复）：
+```javascript
+// 在浏览器控制台执行
+localStorage.setItem('customParadigms', `[...复制的JSON内容...]`)
+location.reload()  // 刷新页面
+```
+
+**清空所有自定义范式**：
+```javascript
+localStorage.removeItem('customParadigms')
+location.reload()
+```
+
+## 常见问题
+
+### Q1: 解析失败怎么办？
+**原因**：
+- 需求文档过长（>10000字符）
+- AI 返回格式不正确
+- 网络问题
+
+**解决**：
+1. 精简需求文档，只保留核心要求
+2. 检查 API 配置是否正确
+3. 重试
+
+### Q2: 生成的范式不理想怎么办？
+**方案**：
+1. 在编辑确认阶段手动修改
+2. 重新解析，提供更清晰的需求文档
+3. 参考现有范式（如 party-review）的写法
+
+### Q3: 如何删除自定义范式？
+**当前版本**：需要手动从 localStorage 中删除
+```javascript
+// 获取所有范式
+let paradigms = JSON.parse(localStorage.getItem('customParadigms'))
+// 删除第一个（索引0）
+paradigms.splice(0, 1)
+// 保存回去
+localStorage.setItem('customParadigms', JSON.stringify(paradigms))
+location.reload()
+```
+
+**未来版本**：将添加删除按钮
+
+### Q4: 能否编辑已保存的范式？
+**当前版本**：不支持直接编辑，需要：
+1. 导出范式JSON
+2. 手动编辑
+3. 重新导入
+
+**未来版本**：将添加编辑功能
+
+## 使用技巧
+
+### 1. 优化需求文档
+为了获得更好的解析效果，需求文档应该：
+- ✅ 结构清晰（使用标题、列表）
+- ✅ 要求具体（明确的检查项）
+- ✅ 术语规范（使用标准表述）
+- ❌ 避免过于笼统的描述
+- ❌ 避免冗长的背景介绍
+
+### 2. 分段解析大型文档
+如果需求文档很长，可以：
+1. 先解析核心要求部分
+2. 后续手动添加其他检查项
+
+### 3. 参考现有范式
+查看 `src/config/paradigms.js` 中的范式配置，了解：
+- System Prompt 的写法
+- Expert Guidelines 的粒度
+- 如何组织检查项
+
+### 4. 版本管理
+建议：
+- 定期导出自定义范式备份
+- 为不同类型的文档创建专用范式
+- 使用有意义的范式名称
+
+## 下一步计划
+
+### Phase 2（增强功能）
+- [ ] 范式编辑功能
+- [ ] 范式删除按钮
+- [ ] 范式历史版本管理
+- [ ] 范式导入/导出UI
+
+### Phase 3（高级功能）
+- [ ] 需求文档与文稿的对照视图
+- [ ] AI 多轮优化范式
+- [ ] 从范文逆向提取范式
+- [ ] 范式共享和导入模板
+
+## 技术细节
+
+### AI 解析 Prompt 结构
+```
+角色定位：文档分析专家
+输入：需求文档文本
+输出：JSON格式的范式配置
+  - specializedPrompt (系统提示词)
+  - expertGuidelines (检查指令数组)
+  - metadata (元数据)
+```
+
+### 范式对象结构
+```javascript
+{
+  id: 'custom-1736508024123',
+  name: '范式名称',
+  description: '描述',
+  type: 'custom',
+  createdAt: '2025-01-10T12:00:00.000Z',
+  sourceDoc: null,
+  specializedPrompt: '...',
+  expertGuidelines: [...],
+  logicParadigms: null,
+  dimensionSetId: null,
+  defaultReference: null,
+  metadata: {
+    name: '...',
+    description: '...',
+    keyRequirements: [...],
+    customGenerated: true
+  }
+}
+```
+
+## 反馈和支持
+
+如遇问题，请：
+1. 检查浏览器控制台的错误信息
+2. 查看 `/var/folders/.../tasks/*.output` 的服务器日志
+3. 提供需求文档示例和错误信息
+
+---
+
+**开发完成时间**：2025-01-10
+**版本**：MVP 1.0
+**工作量**：约 6 小时（包含设计和实现）
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
new file mode 100644
index 0000000..1596167
--- /dev/null
+++ b/src/components/BaseButton.vue
@@ -0,0 +1,58 @@
+<template>
+  <button
+    :class="buttonClasses"
+    :disabled="disabled || loading"
+    @click="handleClick"
+  >
+    <svg v-if="loading" class="spin" width="16" height="16" viewBox="0 0 24 24" fill="none">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" stroke-opacity="0.25"/>
+      <path fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
+    </svg>
+    <slot v-else></slot>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'primary',
+    validator: (v) => ['primary', 'secondary', 'ghost', 'danger'].includes(v)
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['sm', 'md'].includes(v)
+  },
+  disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['click'])
+
+const buttonClasses = computed(() => {
+  const classes = ['btn']
+  if (props.variant) classes.push(`btn-${props.variant}`)
+  if (props.size === 'sm') classes.push('btn-sm')
+  return classes.join(' ')
+})
+
+const handleClick = (e) => {
+  if (!props.disabled && !props.loading) {
+    emit('click', e)
+  }
+}
+</script>
+
+<style scoped>
+.spin {
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+</style>
diff --git a/src/components/BaseInput.vue b/src/components/BaseInput.vue
new file mode 100644
index 0000000..33879eb
--- /dev/null
+++ b/src/components/BaseInput.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="input-wrapper" :class="{ 'input-wrapper-error': error }">
+    <label v-if="label" class="input-label">
+      {{ label }}
+      <span v-if="required" class="input-required">*</span>
+    </label>
+    <input
+      :id="id"
+      ref="inputRef"
+      :type="type"
+      :class="['input', { 'input-error': error }]"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :value="modelValue"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+    <div v-if="error" class="input-error-text">{{ error }}</div>
+    <div v-else-if="hint" class="input-hint">{{ hint }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  id: { type: String, default: () => `input-${Math.random().toString(36).slice(2, 8)}` },
+  type: { type: String, default: 'text' },
+  modelValue: { type: [String, Number], default: '' },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  required: { type: Boolean, default: false },
+  error: { type: String, default: '' },
+  hint: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
+
+const inputRef = ref(null)
+
+const onInput = (e) => {
+  emit('update:modelValue', e.target.value)
+}
+
+const onFocus = (e) => {
+  emit('focus', e)
+}
+
+const onBlur = (e) => {
+  emit('blur', e)
+}
+
+// 暴露 focus 方法
+defineExpose({
+  focus: () => inputRef.value?.focus()
+})
+</script>
+
+<style scoped>
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.input-label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+}
+
+.input-required {
+  color: var(--accent-danger);
+  margin-left: 2px;
+}
+
+.input-error {
+  border-color: var(--accent-danger) !important;
+}
+
+.input-error:focus {
+  box-shadow: 0 0 0 3px var(--danger-bg) !important;
+}
+
+.input-error-text {
+  font-size: var(--text-xs);
+  color: var(--accent-danger);
+}
+
+.input-hint {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+</style>
diff --git a/src/components/BaseModal.vue b/src/components/BaseModal.vue
new file mode 100644
index 0000000..1c83b6d
--- /dev/null
+++ b/src/components/BaseModal.vue
@@ -0,0 +1,44 @@
+<template>
+  <Teleport to="body">
+    <div v-if="show" class="modal-backdrop" @click="onBackdropClick">
+      <div class="modal" :style="{ width, maxHeight }" @click.stop>
+        <header class="modal-header">
+          <h3 class="modal-title">{{ title }}</h3>
+          <button class="btn btn-ghost" @click="onClose" aria-label="关闭">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
+            </svg>
+          </button>
+        </header>
+        <div class="modal-body">
+          <slot></slot>
+        </div>
+        <footer v-if="$slots.footer" class="modal-footer">
+          <slot name="footer"></slot>
+        </footer>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  width: { type: String, default: '560px' },
+  maxHeight: { type: String, default: '85vh' },
+  closeOnBackdrop: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['close'])
+
+const onBackdropClick = () => {
+  if (props.closeOnBackdrop) emit('close')
+}
+
+const onClose = () => emit('close')
+</script>
+
+<style scoped>
+/* 组件样式已由 components.css 提供 */
+</style>
diff --git a/src/styles/components.css b/src/styles/components.css
new file mode 100644
index 0000000..ca1f31a
--- /dev/null
+++ b/src/styles/components.css
@@ -0,0 +1,363 @@
+/* ========== 基础组件样式库 ========== */
+
+/* ===== 卡片 ===== */
+.card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-xl);
+  padding: var(--space-5);
+  box-shadow: var(--shadow-sm);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--space-3);
+  margin-bottom: var(--space-4);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.card-title {
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+}
+
+/* ===== 按钮 ===== */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-fast);
+  cursor: pointer;
+  border: none;
+  outline: none;
+}
+
+.btn:focus-visible {
+  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-primary);
+}
+
+.btn-primary {
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+}
+
+.btn-primary:hover {
+  background: var(--accent-primary-hover);
+}
+
+.btn-secondary {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  border: 1px solid var(--border-default);
+}
+
+.btn-secondary:hover {
+  background: var(--bg-sunken);
+  border-color: var(--border-strong);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+}
+
+.btn-ghost:hover {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+}
+
+.btn-danger {
+  background: var(--accent-danger);
+  color: var(--text-inverse);
+}
+
+.btn-danger:hover {
+  opacity: 0.9;
+}
+
+.btn-sm {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-xs);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ===== 输入框 ===== */
+.input {
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-base);
+  color: var(--text-primary);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.input::placeholder {
+  color: var(--text-muted);
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px var(--info-bg);
+}
+
+.input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ===== 标签/徽章 ===== */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  border-radius: var(--radius-md);
+}
+
+.badge-default {
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+}
+
+.badge-primary {
+  background: var(--info-bg);
+  color: var(--accent-primary);
+}
+
+.badge-success {
+  background: var(--success-bg);
+  color: var(--accent-success);
+}
+
+.badge-warning {
+  background: var(--warning-bg);
+  color: var(--accent-warning);
+}
+
+.badge-danger {
+  background: var(--danger-bg);
+  color: var(--accent-danger);
+}
+
+/* ===== 进度条 ===== */
+.progress-track {
+  height: 4px;
+  background: var(--bg-sunken);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--accent-primary);
+  border-radius: var(--radius-full);
+  transition: width var(--transition-slow);
+}
+
+.progress-fill.success { background: var(--accent-success); }
+.progress-fill.warning { background: var(--accent-warning); }
+.progress-fill.danger { background: var(--accent-danger); }
+
+/* ===== 分隔线 ===== */
+.divider {
+  height: 1px;
+  background: var(--border-default);
+  border: none;
+}
+
+.divider-vertical {
+  width: 1px;
+  height: 100%;
+  background: var(--border-default);
+}
+
+/* ===== 模态框 ===== */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: var(--z-modal-backdrop);
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
+  z-index: var(--z-modal);
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow: auto;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-5);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.modal-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+}
+
+.modal-body {
+  padding: var(--space-5);
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  padding: var(--space-5);
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* ===== 标签页 ===== */
+.tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border-default);
+  gap: var(--space-2);
+}
+
+.tab {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+
+.tab:hover {
+  color: var(--text-primary);
+  background: var(--bg-elevated);
+}
+
+.tab.active {
+  color: var(--accent-primary);
+  border-bottom-color: var(--accent-primary);
+}
+
+/* ===== 工具栏 ===== */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+}
+
+.toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.toolbar-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--border-default);
+  margin: 0 var(--space-2);
+}
+
+/* ===== 数据指标 ===== */
+.metric {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.metric-value {
+  font-size: var(--text-xl);
+  font-weight: var(--font-semibold);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+}
+
+.metric-label {
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+}
+
+/* ===== 列表项 ===== */
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+
+.list-item:hover {
+  background: var(--bg-elevated);
+}
+
+.list-item.active {
+  background: var(--info-bg);
+  color: var(--accent-primary);
+}
+
+/* ===== 视图切换器 ===== */
+.view-switcher {
+  display: flex;
+  background: var(--bg-elevated);
+  padding: var(--space-1);
+  border-radius: var(--radius-lg);
+  gap: var(--space-1);
+}
+
+.view-switcher button {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+  cursor: pointer;
+  border: none;
+  background: transparent;
+}
+
+.view-switcher button:hover {
+  color: var(--text-primary);
+}
+
+.view-switcher button.active {
+  background: var(--bg-secondary);
+  color: var(--accent-primary);
+  box-shadow: var(--shadow-xs);
+}
diff --git a/src/styles/design-tokens.css b/src/styles/design-tokens.css
new file mode 100644
index 0000000..c005ba5
--- /dev/null
+++ b/src/styles/design-tokens.css
@@ -0,0 +1,98 @@
+/* ========== 设计令牌系统 - Modern Minimalist ========== */
+
+/* ===== 深色模式（默认） ===== */
+:root {
+  /* 背景色 */
+  --bg-primary: #0f172a;      /* 页面主背景 */
+  --bg-secondary: #1e293b;    /* 卡片/面板背景 */
+  --bg-elevated: #334155;     /* 悬浮元素背景 */
+  --bg-sunken: #0f172a;       /* 凹陷元素背景 */
+
+  /* 边框色 */
+  --border-default: #334155;  /* 默认边框 */
+  --border-subtle: #1e293b;   /* 微妙边框 */
+  --border-strong: #475569;   /* 强调边框 */
+  --border-focus: #60a5fa;    /* 焦点边框 */
+
+  /* 文本色 */
+  --text-primary: #f1f5f9;    /* 主要内容 */
+  --text-secondary: #94a3b8;  /* 次要内容 */
+  --text-muted: #64748b;      /* 禁用/提示文本 */
+  --text-inverse: #0f172a;    /* 反色文本 */
+
+  /* 语义色 */
+  --accent-primary: #60a5fa;      /* 主操作色 - 蓝色 */
+  --accent-primary-hover: #3b82f6;
+  --accent-success: #34d399;      /* 成功 - 绿色 */
+  --accent-warning: #fbbf24;      /* 警告 - 黄色 */
+  --accent-danger: #f87171;       /* 危险 - 红色 */
+
+  /* 语义背景色（带透明度） */
+  --info-bg: rgba(96, 165, 250, 0.1);
+  --success-bg: rgba(52, 211, 153, 0.1);
+  --warning-bg: rgba(251, 191, 36, 0.1);
+  --danger-bg: rgba(248, 113, 113, 0.1);
+
+  /* 字体 */
+  --font-display: system-ui, -apple-system, sans-serif;
+  --font-body: system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
+
+  /* 字号 */
+  --text-xs: 0.6875rem;     /* 11px - 标签、提示 */
+  --text-sm: 0.8125rem;     /* 13px - 次要内容 */
+  --text-base: 0.9375rem;   /* 15px - 正文 */
+  --text-lg: 1.125rem;      /* 18px - 小标题 */
+  --text-xl: 1.375rem;      /* 22px - 页面标题 */
+  --text-2xl: 1.75rem;      /* 28px - 大标题 */
+
+  /* 行高 */
+  --leading-tight: 1.2;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+
+  /* 字重 */
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+
+  /* 间距（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;
+
+  /* 圆角 */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-full: 9999px;
+
+  /* 阴影（深色模式更明显） */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
+
+  /* 过渡 */
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.2s ease;
+  --transition-slow: 0.3s ease;
+
+  /* Z-index 层级 */
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
new file mode 100644
index 0000000..a96acc7
--- /dev/null
+++ b/src/styles/utilities.css
@@ -0,0 +1,116 @@
+/* ========== 工具类 ========== */
+
+/* 布局 */
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+.grid { display: grid; }
+.hidden { display: none; }
+
+.flex-col { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.flex-wrap { flex-wrap: wrap; }
+
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-start { justify-content: flex-start; }
+.justify-end { justify-content: flex-end; }
+
+.flex-1 { flex: 1; }
+.flex-shrink-0 { flex-shrink: 0; }
+
+.gap-1 { gap: var(--space-1); }
+.gap-2 { gap: var(--space-2); }
+.gap-3 { gap: var(--space-3); }
+.gap-4 { gap: var(--space-4); }
+.gap-6 { gap: var(--space-6); }
+
+/* 间距 */
+.p-2 { padding: var(--space-2); }
+.p-3 { padding: var(--space-3); }
+.p-4 { padding: var(--space-4); }
+.p-5 { padding: var(--space-5); }
+.p-6 { padding: var(--space-6); }
+
+.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
+.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
+.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
+
+.m-2 { margin: var(--space-2); }
+.m-4 { margin: var(--space-4); }
+.mb-2 { margin-bottom: var(--space-2); }
+.mb-4 { margin-bottom: var(--space-4); }
+.mt-2 { margin-top: var(--space-2); }
+.mt-4 { margin-top: var(--space-4); }
+
+/* 文本 */
+.text-xs { font-size: var(--text-xs); }
+.text-sm { font-size: var(--text-sm); }
+.text-base { font-size: var(--text-base); }
+.text-lg { font-size: var(--text-lg); }
+.text-xl { font-size: var(--text-xl); }
+
+.font-normal { font-weight: var(--font-normal); }
+.font-medium { font-weight: var(--font-medium); }
+.font-semibold { font-weight: var(--font-semibold); }
+.font-bold { font-weight: var(--font-bold); }
+
+.text-primary { color: var(--text-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-muted { color: var(--text-muted); }
+.text-accent { color: var(--accent-primary); }
+.text-success { color: var(--accent-success); }
+.text-warning { color: var(--accent-warning); }
+.text-danger { color: var(--accent-danger); }
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+/* 背景 */
+.bg-primary { background: var(--bg-primary); }
+.bg-secondary { background: var(--bg-secondary); }
+.bg-elevated { background: var(--bg-elevated); }
+
+/* 边框 */
+.border { border: 1px solid var(--border-default); }
+.border-t { border-top: 1px solid var(--border-default); }
+.border-b { border-bottom: 1px solid var(--border-default); }
+.border-l { border-left: 1px solid var(--border-default); }
+.border-r { border-right: 1px solid var(--border-default); }
+
+.rounded { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-xl { border-radius: var(--radius-xl); }
+.rounded-full { border-radius: var(--radius-full); }
+
+/* 尺寸 */
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+.min-h-screen { min-height: 100vh; }
+
+/* 溢出 */
+.overflow-auto { overflow: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-y-auto { overflow-y: auto; }
+
+/* 定位 */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+
+/* 光标 */
+.cursor-pointer { cursor: pointer; }
+.cursor-not-allowed { cursor: not-allowed; }
+
+/* 过渡 */
+.transition { transition: all var(--transition-normal); }
+.transition-fast { transition: all var(--transition-fast); }
+
+/* 其他 */
+.select-none { user-select: none; }
+.pointer-events-none { pointer-events: none; }