组件库开发

mkdir md-wx
cd md-wx

以下是我的需求，请根据我的主要需求内容，完成需求分析，结果以 Markdown 格式写入 docs 目录下。

开发一个通用的 Markdown 渲染组件，专门针对微信公众号样式排版优化。组件以 NPM 包的形式发布，可被其它项目下载使用。

组件的需求：

1. 预览组件：接收外部提供的 Markdown 文本内容，根据外部内容的变化实时渲染。
2. 主题切换：预设 5 个主题，默认显示第一个预设的主题，用户可切换主题，你需要写下这5个主题分别是什么。
3. 代码块样式：Mac 风格的装饰图标，默认 github-dark 风格。
4. 响应式设计：支持手机、桌面视图切换，默认手机视图。
5. 复制：复制预览组件的内容转为微信公众号支持的样式。
6. 将设置按钮默认居中对齐的方式展示在预览区域的顶部，内容滚动时不应影响顶部的设置按钮，设置按钮以图标的形式展示。
7. 预览组件可控制是否显示顶部设置按钮，默认显示。
8. 设置相关的按钮支持导出，可以让使用方自定义设置按钮的位置和排版等。

<IMPORTANT>
目前只是需求分析阶段，你只需要完成需求分析文档，需求分析文档中不要写技术实现，只描述需求。不要做任何的代码实现
</IMPORTANT>

根据需求文档 需求分析.md ，完成技术架构设计文档，结果以 Markdown 格式写入 docs 目录下。

1. 技术选型采用 React、Vite
2. 设定清晰的目录结构规范
3. 设定编码规范
4. 复制预览组件内容为微信公众号格式时要注意，微信公众号格式对样式的限制，这里一定不要出错，复制后的样式要完全兼容微信公众号格式。可以使用 tavily 搜索微信公众号的样式规范和开发需要注意的内容，制定合适的实现方案

<IMPORTANT>
目前只是技术架构设计阶段，只需要完成技术架构设计文档。不要做任何的代码实现
</IMPORTANT>

设计一个现代、响应式、具有视觉吸引力的 Web UI 原型，展示一个专为微信公众号排版优化而设计的 Markdown 渲染组件。

以 HTML 格式写入 docs/ui-design.html

页面结构包含以下模块：

1. **顶部设置区域**（悬浮固定，居中显示，图标化按钮）：
   - **主题切换按钮**：提供 5 种预设视觉主题（简约白、掘金酱紫、微信暗黑、科技蓝、复古橙）
     - 切换主题后，预览内容区域的 **整体样式发生变化**，包括：
       - 各级标题（H1~H6）的字号、颜色、字体
       - 引用块、列表项、强调文字（加粗、斜体）样式
       - 链接样式（下划线、悬停颜色等）
   - **视图模式切换**：手机 / 桌面两种视图，切换后预览区域宽度变化
   - **一键复制按钮**：复制渲染后的 HTML 内容（带内联样式），适配微信公众号粘贴

2. **Markdown 实时预览区域**：
   - 接收外部 Markdown 字符串，实时渲染为 HTML
   - 代码块采用 macOS 风格容器，含红黄绿装饰圆点
   - 代码语法高亮默认使用 GitHub Dark 风格
   - 预览区域样式随所选主题动态变化，支持平滑过渡动画

3. **整体视觉风格**：
   - 使用玻璃拟态（glassmorphism）或卡片式设计
   - 界面色彩丰富，主题切换显著
   - 图标风格现代，布局参考 Notion、掘金、Vercel 等现代界面
   - 所有控制项按钮使用直观图标（主题 🌈、视图 📱💻、复制 📋），直接使用图标展示不要用文字，主题图标后展示选择主题文字，点击下拉列表可进行选择

4. **响应式支持**：
   - 手机模式模拟 iPhone 样式
   - 桌面模式为宽屏居中卡片布局

生成一张高保真 HTML UI 原型草图，突出主题切换带来的内容区域整体风格变化，适合展示给前端工程师或设计师参考

这5个主题不一定是最好的，请你根据现代最流行的主题，给我选择五个进行替换，还有主题的文字描述长度要一致
H2 ~ H6 标题要随着主题切换要能看到变化，你可以在这些标题前加一个竖线

将当前最新修改的这 5 个主题更新到需求文档中   。基于当前的 UI/UX 设计内容在 docs 下写一份设计指南，给后续开发参考

# 微信公众号 Markdown 渲染组件 - UI/UX 设计指南

## 1. 设计理念

### 1.1 设计目标
- **现代化**: 采用2025年最新UI设计趋势
- **专业性**: 符合微信公众号内容创作者的使用习惯
- **易用性**: 直观的操作界面，降低学习成本
- **响应式**: 完美适配各种设备和屏幕尺寸
- **可扩展**: 支持主题和功能的灵活扩展

### 1.2 设计原则
| 原则 | 描述 | 应用示例 |
|------|------|----------|
| **极简主义** | 去除冗余元素，突出核心功能 | 顶部工具栏仅保留3个核心按钮 |
| **视觉层次** | 通过颜色、大小、间距建立信息层级 | 标题字号递减，颜色深浅变化 |
| **一致性** | 保持交互和视觉元素的一致性 | 所有按钮使用相同的圆角和动画 |
| **反馈机制** | 用户操作后立即给予反馈 | 主题切换时的淡入淡出效果 |
| **无障碍设计** | 考虑色盲、视力障碍用户需求 | 足够的颜色对比度，清晰的可点击区域 |

## 2. 视觉设计系统

### 2.1 色彩系统

#### 主题配色方案
基于2025年现代UI设计趋势，我们设计了5套精心调配的主题：

| 主题 | 主色调 | 背景色 | 文字色 | 强调色 | 适用场景 |
|------|--------|--------|--------|--------|----------|
| 🌈 **极简白** | #FFFFFF | #F8FAFC | #1A1A1A | #3B82F6 | 正式文档、商务内容 |
| 🌿 **自然绿** | #FEFEFE | #F0FDF4 | #166534 | #16A34A | 健康内容、生活分享 |
| 💎 **赛博蓝** | #0F172A | #1E293B | #E2E8F0 | #06B6D4 | 技术文章、产品介绍 |
| 🎩 **优雅红** | #FAFAFA | #F5F5F5 | #262626 | #DC2626 | 品牌内容、专业分享 |
| 🧡 **温暖橙** | #FFFBEB | #FEF3C7 | #92400E | #D97706 | 个人博客、情感内容 |

#### 颜色对比度标准
- 正文文字与背景对比度 ≥ 7:1 (AAA级)
- 标题文字与背景对比度 ≥ 4.5:1 (AA级)
- 交互元素与背景对比度 ≥ 3:1 (最低标准)

### 2.2 字体系统

#### 字体层级
```css
/* 标题层级 */
h1: 2.5em (40px) - 主标题，页面层级最高
h2: 2.0em (32px) - 章节标题，次要层级
h3: 1.5em (24px) - 小节标题，三级层级

/* 正文层级 */
body: 1em (16px) - 标准正文字号
small: 0.875em (14px) - 辅助文字
smaller: 0.75em (12px) - 最小可读文字
```text

#### 行高规范
- 标题行高：1.2-1.3倍
- 正文行高：1.6-1.8倍
- 代码块行高：1.5倍

### 2.3 间距系统
采用8px网格系统，所有间距都是8的倍数：

```css
/* 基础间距 */
--spacing-xs: 4px;   /* 最小间距 */
--spacing-sm: 8px;   /* 小组件间距 */
--spacing-md: 16px;  /* 标准间距 */
--spacing-lg: 24px;  /* 大组件间距 */
--spacing-xl: 32px;  /* 最大间距 */

/* 具体应用 */
段落间距: 16px
标题间距: 24px
列表项间距: 8px
代码块间距: 20px
```text

## 3. 界面布局设计

### 3.1 顶部工具栏设计

#### 玻璃拟态效果
```css
.settings-bar {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
```text

#### 交互状态
| 状态 | 视觉表现 | 动画效果 |
|------|----------|----------|
| 默认 | 半透明背景，轻微阴影 | 无 |
| 悬停 | 背景透明度增加，阴影加深 | 0.3s ease-out |
| 点击 | 轻微缩放效果 | 0.1s ease-in-out |
| 激活 | 背景色变化，文字反色 | 0.2s ease-out |

### 3.2 预览区域设计

#### 手机视图 (375px)
- **外观**: 模拟真实iPhone，带刘海屏设计
- **边框**: 新拟态风格，内外阴影结合
- **圆角**: 36px大圆角，现代感强
- **过渡**: 0.4s cubic-bezier缓动函数

#### 桌面视图
- **宽度**: 最大800px，居中显示
- **间距**: 40px内边距，确保阅读舒适
- **阴影**: 大阴影营造浮起效果

### 3.3 内容区域设计

#### Markdown元素样式

**标题设计**:
```css
h1 {
    font-size: 2.5em;
    font-weight: 700;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 16px;
    margin-bottom: 24px;
}
```javascript

**引用块设计**:
```css
blockquote {
    border-left: 4px solid var(--accent-color);
    background: var(--secondary-bg);
    padding: 16px 20px;
    border-radius: 8px;
    font-style: italic;
}
```text

**代码块设计**:
```css
.code-block {
    background: #1e1e1e;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
}

.code-header {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

.window-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
}
```text

## 4. 交互设计

### 4.1 主题切换交互

#### 下拉菜单动画
```css
.theme-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.theme-selector.active .theme-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
```text

#### 主题切换反馈
- **即时反馈**: 点击主题后立即切换
- **平滑过渡**: 内容区域淡入淡出效果
- **视觉确认**: 按钮文字更新为当前主题

### 4.2 视图切换交互
- **按钮状态**: 激活状态有明显的颜色区分
- **过渡动画**: 0.3s平滑过渡
- **尺寸变化**: 手机↔桌面视图的流畅切换

### 4.3 复制功能交互
- **成功提示**: 顶部toast提示，3秒后自动消失
- **按钮反馈**: 点击时的缩放动画
- **降级处理**: Clipboard API不可用时自动降级

## 5. 响应式设计

### 5.1 断点设置
```css
/* 移动端优先 */
@media (max-width: 768px) {
    /* 平板和手机尺寸 */
    .settings-bar {
        padding: 8px 16px;
        gap: 12px;
    }

    .control-button {
        padding: 6px 10px;
        font-size: 14px;
    }
}
```text

### 5.2 移动端适配
- **工具栏**: 缩小按钮尺寸，减少间距
- **内容区域**: 保持可读性的同时优化空间利用
- **触摸目标**: 确保按钮最小44px的触摸区域

### 5.3 桌面端优化
- **大按钮**: 更大的点击区域，提升操作体验
- **丰富间距**: 充分利用大屏幕空间
- **悬停效果**: 鼠标悬停时的视觉反馈

## 6. 动画与过渡

### 6.1 动画原则
- **有意义**: 每个动画都有明确的目的
- **快速**: 动画时长控制在0.1-0.4秒
- **自然**: 使用缓动函数模拟真实物理效果

### 6.2 标准动画时长
```css
/* 快速反馈 */
--duration-fast: 0.1s;

/* 标准过渡 */
--duration-normal: 0.3s;

/* 复杂动画 */
--duration-slow: 0.4s;

/* 缓动函数 */
--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
--easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
--easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
```text

### 6.3 具体动画效果

#### 页面加载
```css
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}
```text

#### 按钮交互
```css
.control-button:active {
    transform: translateY(-1px) scale(0.98);
    transition: all 0.1s ease-in-out;
}
```text

## 7. 无障碍设计

### 7.1 色彩无障碍
- **对比度**: 满足WCAG 2.1 AA级标准
- **色盲友好**: 不单独使用颜色传达信息
- **主题切换**: 提供足够的主题选择

### 7.2 键盘导航
- **Tab键顺序**: 符合逻辑的操作流程
- **快捷键支持**: Ctrl+C复制、Ctrl+1/2视图切换
- **焦点指示**: 清晰的焦点状态显示

### 7.3 屏幕阅读器
- **语义化HTML**: 使用正确的HTML标签
- **ARIA标签**: 为复杂交互添加ARIA属性
- **替代文本**: 为图标提供文字说明

## 8. 性能优化

### 8.1 渲染性能
- **CSS优化**: 使用transform代替position变化
- **减少重绘**: 避免频繁修改布局相关属性
- **硬件加速**: 使用will-change优化复杂动画

### 8.2 加载性能
- **关键CSS**: 内联关键样式，减少阻塞渲染
- **图片优化**: 使用CSS代替图片的装饰性元素
- **字体优化**: 使用系统字体栈，避免额外加载

## 9. 设计工具和资源

### 9.1 设计系统
- **Figma组件库**: 包含所有UI组件的可复用设计
- **样式指南**: 颜色、字体、间距的详细规范
- **交互原型**: 完整的交互流程演示

### 9.2 开发资源
- **CSS变量**: 主题切换的核心实现
- **响应式工具**: 断点和适配方案
- **动画库**: 标准化的动画效果

## 10. 测试与验证

### 10.1 视觉测试
- **主题一致性**: 所有主题下的元素样式一致性
- **响应式测试**: 不同设备上的显示效果
- **无障碍测试**: 色盲模拟、键盘导航测试

### 10.2 性能测试
- **加载速度**: 首次加载和主题切换的响应时间
- **动画流畅度**: 60fps的动画性能要求
- **内存使用**: 避免内存泄漏和过度消耗

### 10.3 用户测试
- **可用性测试**: 真实用户的操作体验
- **A/B测试**: 不同设计方案的效果对比
- **反馈收集**: 持续收集用户改进建议

---

这份设计指南为微信公众号Markdown渲染组件提供了全面的UI/UX设计规范，确保最终产品既美观又实用，为用户提供优秀的使用体验。

根据需求文档  、架构文档   、 原型设计指南文档 ，完成任务拆分，结果以 Markdown 格式写入 docs 目录下。
根据优先级对任务按模块进行拆分，拆解要合理，每个模块完成后都能看到一些效果。这个拆分后的任务我们是让 Al 分步骤去实现的。

根据架构文档，完成项目规则制定，这个规则是给 AI 看的，旨在让 AI 在当前项目开发中，能够按照规则来实现。
主要包括代码风格、语言或框架、NPM 包管理、项目目录结构、项目规范等。结果以 Markdown 格式写入    。

这是 需求分析.md、技术架构设计.md、 ui-ux-design-guide.md 文档，完成 任务拆分计划.md "模块 1.1：项目初始化与环境搭建"

<IMPORTANT>
严格按照我提供的任务去做，不要做其他的任务
</IMPORTANT>

上面明确讲了 完成 ”任务 1.1：项目初始化和配置“ 开发，为什么你要给我写这么多，这样还要任务拆分干嘛？告诉我原因 你为什么不按照上面的指令执行，是因为描述的不清晰吗？该怎么做你才能遵循我的指令？

## 8. AI 助手任务执行规范

为确保开发过程的有序性和可控性，AI 助手必须严格遵循以下任务执行规范：

### 8.1 任务范围控制

- **严格按照任务拆分执行**: 必须严格按照 `docs/task_breakdown.md` 中定义的任务范围执行，不得超出指定任务的边界。
- **单一任务原则**: 每次只执行一个明确指定的任务（如"任务 1.1"、"任务 1.2"等），完成后等待用户确认再进行下一步。
- **禁止自动扩展**: 不得基于技术架构文档或其他文档自行扩展任务范围，如果需要扩展需要通知用户确认。

### 8.2 任务指令格式

用户应使用以下格式明确指定任务：

- **明确任务编号**: "请执行任务 X.X：[任务名称]"
- **范围限制**: "只完成任务 X.X 中列出的具体任务，不要超出范围"
- **停止指令**: "完成后等待我确认再进行下一步"

### 8.3 执行验收标准

- **任务完成确认**: 每个任务完成后，必须对照 `task_breakdown.md` 中的验收标准进行自检。
- **范围边界检查**: 确保所有创建的文件和代码都在指定任务范围内。
- **等待用户确认**: 任务完成后使用 `finish` 工具总结完成情况，等待用户确认后再进行下一个任务。

### 8.4 异常处理

- **任务描述不清晰**: 如果任务描述不清晰，应先询问具体范围而不是自行决定。
- **依赖关系处理**: 如果当前任务依赖其他未完成的任务，应明确指出依赖关系并等待用户指示。
- **超出范围的代码**: 如果发现已创建超出任务范围的代码，应主动询问是否需要清理。

根据 任务拆分计划.md 完成项目。并且严格遵守 project-rules.md