docs: 更新项目文档

- lessons-learned.md: 新增"状态标记组件模式"案例
- README.md: 添加最新更新章节（计划书状态标记、UI优化）
- CLAUDE.md: 更新最新功能和常见问题表格

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

@@ -31,6 +31,7 @@ pnpm dev:tt        # 字节跳动小程序开发
 ### 🆕 最新更新（2026-02）
 ### 🆕 最新更新（2026-02）
 
 
 **计划书功能优化**：
 **计划书功能优化**：
+- ✅ 添加计划书卡片状态标记（"生成中"/"已完成"，黄色/绿色背景）
 - ✅ 修复嵌套弹窗层级冲突（使用 provide/inject 模式）
 - ✅ 修复嵌套弹窗层级冲突（使用 provide/inject 模式）
 - ✅ 优化页面滚动加载并清理调试代码
 - ✅ 优化页面滚动加载并清理调试代码
 - ✅ 修复搜索栏清空按钮点击无效
 - ✅ 修复搜索栏清空按钮点击无效
@@ -41,10 +42,17 @@ pnpm dev:tt        # 字节跳动小程序开发
 - ✅ 增大产品中心和详情页的字体与图标尺寸
 - ✅ 增大产品中心和详情页的字体与图标尺寸
 - ✅ 添加全局背景色
 - ✅ 添加全局背景色
 - ✅ 增大全局字体和图标尺寸以提升可读性
 - ✅ 增大全局字体和图标尺寸以提升可读性
+- ✅ 优化首页网格导航视觉体验
+- ✅ 重构"我的"页面为专业高端风格
+- ✅ 优化 ProductCard 组件视觉样式
+- ✅ 统一视觉柔和度和整体设计一致性
 
 
 **认证优化**：
 **认证优化**：
 - ✅ 修复 401 重定向死循环和返回报错问题
 - ✅ 修复 401 重定向死循环和返回报错问题
 
 
+**代码质量**：
+- ✅ 从版本控制中移除本地配置文件 settings.local.json
+
 **新增功能**：
 **新增功能**：
 - ✅ 消息列表和消息详情页
 - ✅ 消息列表和消息详情页
 - ✅ 产品中心页
 - ✅ 产品中心页
@@ -64,6 +72,7 @@ pnpm dev:tt        # 字节跳动小程序开发
 | SVG 图标加载失败（500 错误） | 使用 `import` 导入 | [经验教训](docs/lessons-learned.md#静态资源加载问题) |
 | SVG 图标加载失败（500 错误） | 使用 `import` 导入 | [经验教训](docs/lessons-learned.md#静态资源加载问题) |
 | 代码重复 3 次 | 抽取为 Composable | [经验教训](docs/lessons-learned.md#组件抽取与复用) |
 | 代码重复 3 次 | 抽取为 Composable | [经验教训](docs/lessons-learned.md#组件抽取与复用) |
 | 组件对象响应式警告 | 使用 `shallowRef` + `markRaw` | [经验教训](docs/lessons-learned.md#性能优化) |
 | 组件对象响应式警告 | 使用 `shallowRef` + `markRaw` | [经验教训](docs/lessons-learned.md#性能优化) |
+| 业务状态标记显示 | 使用条件类名 + 语义化颜色 | [经验教训](docs/lessons-learned.md#案例-4-状态标记组件模式) |
 | 嵌套弹窗层级冲突 | 使用 provide/inject 模式 | 最近提交记录（3357bed） |
 | 嵌套弹窗层级冲突 | 使用 provide/inject 模式 | 最近提交记录（3357bed） |
 | 401 重定向死循环 | 检查重定向拦截器逻辑 | 最近提交记录（6d2a4ec） |
 | 401 重定向死循环 | 检查重定向拦截器逻辑 | 最近提交记录（6d2a4ec） |
 
 

@@ -45,6 +45,24 @@ pnpm lint
 - ✅ **组件复用** - "第 3 次出现原则"抽取 Composables
 - ✅ **组件复用** - "第 3 次出现原则"抽取 Composables
 - ✅ **可复用组件** - TabBar、NavHeader、IconFont
 - ✅ **可复用组件** - TabBar、NavHeader、IconFont
 
 
+## 🆕 最新更新（2026-02）
+
+### 计划书功能优化
+- ✅ **状态标记** - 添加计划书卡片状态标记（"生成中" / "已完成"）
+  - 黄色背景表示"生成中"状态
+  - 绿色背景表示"已完成"状态
+  - 使用条件类名动态切换样式
+
+### 视觉优化
+- ✅ **首页网格导航** - 优化导航图标视觉体验
+- ✅ **产品卡片** - 优化 ProductCard 组件视觉样式
+- ✅ **页面风格** - 重构"我的"页面为专业高端风格
+- ✅ **统一视觉** - 优化视觉柔和度和整体统一性
+
+### 代码质量
+- ✅ **移除本地配置** - 从版本控制中移除本地配置文件 settings.local.json
+- ✅ **文档更新** - 完善开发文档和经验教训总结
+
 ## ⚡ 常见问题
 ## ⚡ 常见问题
 
 
 ### NutUI 组件使用陷阱
 ### NutUI 组件使用陷阱

@@ -2394,6 +2394,92 @@ const onConfirm = () => {
 
 
 ---
 ---
 
 
+### 案例 4: 状态标记组件模式
+
+**问题**: 多个页面需要展示不同状态的业务对象（计划书、订单等）
+
+**解决方案**: 创建通用的状态标记组件模式
+
+```vue
+<!-- 状态标记组件模式 -->
+<template>
+  <view class="plan-item">
+    <!-- 状态标记：右上角显示 -->
+    <view class="ml-[24rpx]">
+      <view
+        :class="[
+          'status-badge',
+          item.status === 'processing' ? 'status-processing' : 'status-generated'
+        ]"
+      >
+        {{ item.status === 'processing' ? '生成中' : '已完成' }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="less" scoped>
+// 通用状态标记样式
+.status-badge {
+  padding: 8rpx 16rpx;
+  border-radius: 9999rpx;  // 圆角胶囊形状
+  font-size: 22rpx;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+// 处理中状态：黄色背景
+.status-processing {
+  background-color: #FEF3C7;
+  color: #D97706;
+}
+
+// 已完成状态：绿色背景
+.status-generated {
+  background-color: #D1FAE5;
+  color: #059669;
+}
+</style>
+```
+
+**核心要点**:
+1. **状态映射函数**: 将后端状态值映射为前端统一状态值
+   ```javascript
+   const mapOrderStatus = (status) => {
+     // 后端状态值 -> 前端状态值
+     const statusMap = {
+       '3': 'processing',  // 生成中
+       '5': 'completed'    // 已完成
+     }
+     return statusMap[status] || 'unknown'
+   }
+   ```
+
+2. **条件类名绑定**: 使用 `:class` 动态切换样式
+   ```vue
+   :class="[
+     'status-badge',
+     item.status === 'processing' ? 'status-processing' : 'status-generated'
+   ]"
+   ```
+
+3. **视觉设计原则**:
+   - ✅ **颜色语义化**: 处理中用黄色，已完成用绿色
+   - ✅ **圆角胶囊**: `border-radius: 9999rpx` 实现完全圆角
+   - ✅ **内边距适中**: `padding: 8rpx 16rpx` 确保文字不拥挤
+   - ✅ **字体大小**: 22rpx 既不突兀也清晰可读
+
+4. **位置布局**: 放在卡片右上角，使用 `ml-[24rpx]` 与标题区隔开
+
+**收益**:
+- 统一的状态展示模式，易于复用
+- 清晰的视觉反馈，用户一目了然
+- 易于扩展新状态（如"失败"、"待审核"等）
+
+**使用场景**: 计划书页面、订单列表、审批流程等
+
+---
+
 ## 总结
 ## 总结
 
 
 ### 🎯 核心经验
 ### 🎯 核心经验
@@ -2410,6 +2496,7 @@ const onConfirm = () => {
 10. **跨页面通信**: ⭐ **使用事件总线模式，LoadMoreList 页面避免使用 `useDidShow`**（防止意外刷新）
 10. **跨页面通信**: ⭐ **使用事件总线模式，LoadMoreList 页面避免使用 `useDidShow`**（防止意外刷新）
 11. **Mock 数据切换**: ⭐ **使用环境变量 `process.env.NODE_ENV` 自动判断，禁止硬编码**
 11. **Mock 数据切换**: ⭐ **使用环境变量 `process.env.NODE_ENV` 自动判断，禁止硬编码**
 12. **⚠️ 写代码前必查**: 先搜索项目中是否有类似实现，保持写法一致
 12. **⚠️ 写代码前必查**: 先搜索项目中是否有类似实现，保持写法一致
+13. **状态标记模式**: ⭐ **使用条件类名 + 语义化颜色展示业务状态**（如"生成中"用黄色，"已完成"用绿色）
 
 
 ### 📚 推荐阅读
 ### 📚 推荐阅读
 
 
@@ -2425,10 +2512,12 @@ const onConfirm = () => {
 
 
 ---
 ---
 
 
-**最后更新**: 2026-02-09
+**最后更新**: 2026-02-11
 **维护者**: Claude Code
 **维护者**: Claude Code
 **项目**: Manulife WeApp
 **项目**: Manulife WeApp
 
 
 **更新记录**:
 **更新记录**:
+- 2026-02-11: 新增"状态标记组件模式"案例，记录计划书卡片状态标记实现经验
 - 2026-02-08: 新增 "跨页面通信" 章节，记录事件总线实现和 useDidShow 陷阱解决方案
 - 2026-02-08: 新增 "跨页面通信" 章节，记录事件总线实现和 useDidShow 陷阱解决方案
 - 2026-02-08: 新增 "开发工作流" 章节，记录 Mock 数据环境自动切换模式
 - 2026-02-08: 新增 "开发工作流" 章节，记录 Mock 数据环境自动切换模式
+- 2026-02-09: 新增 "AmountKeyboard 组件开发案例"