功能描述

将 MemoBlock 重构为 Apple Notes 风格彩色便签纸，MemoList 重构为 禅意看板布局。

核心需求

解决方案

1. MemoBlock 便签化

便签颜色系统：

• 标签自动映射颜色（#work → 蓝色，#personal → 粉色等）
• 6 色调色板：amber / rose / sky / emerald / violet / orange
• 默认黄色（无标签时）

视觉效果：

• 彩色背景 + 柔和阴影（纸张浮起感）
• 微妙折角效果（CSS clip-path）
• 深色模式适配

2. MemoList 看板化

布局规范：

• 移动端（< 640px）：单列布局
• PC 端（≥ 640px）：双列瀑布流
• 默认展示 200 字摘要（无折叠）

交互保留：

• 无限滚动
• 渐进式加载动画
• 快捷操作按钮

技术方案

新增文件

修改文件

颜色映射示例

```typescript
const TAG_COLOR_RULES = {
'work': 'sky', // 工作 → 蓝色
'personal': 'rose', // 个人 → 粉色
'health': 'emerald',// 健康 → 绿色
'idea': 'violet', // 创意 → 紫色
'urgent': 'orange', // 紧急 → 橙色
};
```

复杂度

• 工作量: ~3 人周
• 风险: 低
• 依赖项: 无新增依赖

验收标准

• MemoBlock 支持 6 色便签背景
• 标签自动映射颜色
• 折角效果正确渲染
• 移动端单列 / PC 端双列
• 200 字摘要默认展示
• make check-all 通过
• 深色模式颜色对比度符合 WCAG AA

任务拆解

• 1. 实现便签颜色系统 (tag-colors.ts)
• 2. 实现文本截断工具 (text.ts)
• 3. 创建 MemoBlockV3 组件（便签样式）
• 4. 创建 MemoListV3 组件（看板布局）
• 5. 更新 Home 页面使用新组件
• 6. 添加折角 CSS 效果
• 7. 测试深色模式对比度

调研时间: 2026-02-13 | 调研工具: idea-researcher v3.1