Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d4df1a3d 1 parent c0204f5d

docs: 更新项目文档 

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Inline Side-by-side
Showing 3 changed files with 117 additions and 1 deletions
......@@ -31,6 +31,7 @@ pnpm dev:tt # 字节跳动小程序开发
### 🆕 最新更新（2026-02）
**计划书功能优化**：
- ✅ 添加计划书卡片状态标记（"生成中"/"已完成"，黄色/绿色背景）
- ✅ 修复嵌套弹窗层级冲突（使用 provide/inject 模式）
- ✅ 优化页面滚动加载并清理调试代码
- ✅ 修复搜索栏清空按钮点击无效
......@@ -41,10 +42,17 @@ pnpm dev:tt # 字节跳动小程序开发
- ✅ 增大产品中心和详情页的字体与图标尺寸
- ✅ 添加全局背景色
- ✅ 增大全局字体和图标尺寸以提升可读性
- ✅ 优化首页网格导航视觉体验
- ✅ 重构"我的"页面为专业高端风格
- ✅ 优化 ProductCard 组件视觉样式
- ✅ 统一视觉柔和度和整体设计一致性
**认证优化**：
- ✅ 修复 401 重定向死循环和返回报错问题
**代码质量**：
- ✅ 从版本控制中移除本地配置文件 settings.local.json
**新增功能**：
- ✅ 消息列表和消息详情页
- ✅ 产品中心页
......@@ -64,6 +72,7 @@ pnpm dev:tt # 字节跳动小程序开发
| SVG 图标加载失败（500 错误） | 使用 `import` 导入 | [经验教训](docs/lessons-learned.md#静态资源加载问题) |
| 代码重复 3 次 | 抽取为 Composable | [经验教训](docs/lessons-learned.md#组件抽取与复用) |
| 组件对象响应式警告 | 使用 `shallowRef` + `markRaw` | [经验教训](docs/lessons-learned.md#性能优化) |
| 业务状态标记显示 | 使用条件类名 + 语义化颜色 | [经验教训](docs/lessons-learned.md#案例-4-状态标记组件模式) |
| 嵌套弹窗层级冲突 | 使用 provide/inject 模式 | 最近提交记录（3357bed） |
| 401 重定向死循环 | 检查重定向拦截器逻辑 | 最近提交记录（6d2a4ec） |
......
......@@ -45,6 +45,24 @@ pnpm lint
- ✅ **组件复用** - "第 3 次出现原则"抽取 Composables
- ✅ **可复用组件** - TabBar、NavHeader、IconFont
## 🆕 最新更新（2026-02）
### 计划书功能优化
- ✅ **状态标记** - 添加计划书卡片状态标记（"生成中" / "已完成"）
- 黄色背景表示"生成中"状态
- 绿色背景表示"已完成"状态
- 使用条件类名动态切换样式
### 视觉优化
- ✅ **首页网格导航** - 优化导航图标视觉体验
- ✅ **产品卡片** - 优化 ProductCard 组件视觉样式
- ✅ **页面风格** - 重构"我的"页面为专业高端风格
- ✅ **统一视觉** - 优化视觉柔和度和整体统一性
### 代码质量
- ✅ **移除本地配置** - 从版本控制中移除本地配置文件 settings.local.json
- ✅ **文档更新** - 完善开发文档和经验教训总结
## ⚡ 常见问题
### 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`**（防止意外刷新）
11. **Mock 数据切换**: ⭐ **使用环境变量 `process.env.NODE_ENV` 自动判断，禁止硬编码**
12. **⚠️ 写代码前必查**: 先搜索项目中是否有类似实现，保持写法一致
13. **状态标记模式**: ⭐ **使用条件类名 + 语义化颜色展示业务状态**（如"生成中"用黄色，"已完成"用绿色）
### 📚 推荐阅读
......@@ -2425,10 +2512,12 @@ const onConfirm = () => {
---
**最后更新**: 2026-02-09
**最后更新**: 2026-02-11
**维护者**: Claude Code
**项目**: Manulife WeApp
**更新记录**:
- 2026-02-11: 新增"状态标记组件模式"案例，记录计划书卡片状态标记实现经验
- 2026-02-08: 新增 "跨页面通信" 章节，记录事件总线实现和 useDidShow 陷阱解决方案
- 2026-02-08: 新增 "开发工作流" 章节，记录 Mock 数据环境自动切换模式
- 2026-02-09: 新增 "AmountKeyboard 组件开发案例"
......