Skip to content

Commit 947ede8

Browse files
linshenkxlinshenkx
committed
feat(ui): 实现三大功能模式的独立子模式持久化功能
- 新增三个子模式管理Composable (useBasicSubMode/useProSubMode/useImageSubMode) - 实现基础/上下文/图像模式的完全独立状态存储 - 添加UI_SETTINGS_KEYS常量用于子模式存储键管理 - 更新App.vue初始化逻辑支持三模式独立恢复 - 修复图像模式刷新后文件上传按钮不显示的bug - 完善历史记录和收藏恢复时的子模式持久化 - 新增国际化文本支持子模式切换提示 - 归档完整开发文档到126-submode-persistence 核心特性: - 状态隔离: 三个功能模式维护完全独立的子模式状态 - 跨页面同步: 使用自定义事件实现组件间状态同步 - 双层状态一致性: 导航层和组件层状态保持同步 - 异步初始化: 非阻塞式状态恢复机制
1 parent c8e06bd commit 947ede8

File tree

22 files changed

+5472
-1747
lines changed

22 files changed

+5472
-1747
lines changed

‎docs/archives/126-submode-persistence/README.md‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
# 126 - 子模式持久化与导航栏统一
2+
3+
## 📋 功能概述
4+
5+
实现三种功能模式（基础/上下文/图像）的子模式独立持久化，并将所有子模式选择器统一移至导航栏，提升用户体验的一致性。
6+
7+
## ⏱️ 时间线
8+
9+
- **开始时间**: 2025-10-22
10+
- **完成时间**: 2025-10-22
11+
- **总耗时**: 约8小时
12+
13+
## 🎯 核心目标
14+
15+
### 主要目标
16+
1. ✅ 实现三种功能模式的子模式独立持久化
17+
2. ✅ 将所有子模式选择器移至导航栏
18+
3. ✅ 确保状态完全隔离（基础和上下文模式虽然子模式名称相同，但独立存储）
19+
4. ✅ 修复图像模式初始化时imageMode未恢复的问题
20+
21+
### 次要目标
22+
1. ✅ 保持向后兼容（与旧变量同步）
23+
2. ✅ 完善的错误处理和日志
24+
3. ✅ 全面的测试验证
25+
26+
## 📊 实施状态
27+
28+
**状态**: ✅ 已完成
29+
30+
### 完成的工作
31+
32+
#### Phase 1: 上下文模式子模式持久化
33+
- ✅ 添加 `PRO_SUB_MODE` 存储键
34+
- ✅ 定义 `ProSubMode` 类型
35+
- ✅ 创建 `useProSubMode` composable
36+
- ✅ 集成到 App.vue
37+
- ✅ 测试验证
38+
39+
#### Phase 2: 基础模式子模式持久化
40+
- ✅ 添加 `BASIC_SUB_MODE` 存储键
41+
- ✅ 定义 `BasicSubMode` 类型
42+
- ✅ 创建 `useBasicSubMode` composable
43+
- ✅ 集成到 App.vue
44+
- ✅ 验证独立性
45+
46+
#### Phase 3: 图像模式子模式持久化
47+
- ✅ 添加 `IMAGE_SUB_MODE` 存储键
48+
- ✅ 定义 `ImageSubMode` 类型
49+
- ✅ 创建 `useImageSubMode` composable
50+
- ✅ 移动 ImageModeSelector 到导航栏
51+
- ✅ 通过自定义事件通信
52+
- ✅ 修复初始化恢复问题
53+
54+
## 🐛 已解决的问题
55+
56+
### 问题1: 基础模式子模式选择器缺失
57+
**现象**: 只有上下文模式显示子模式选择器，基础模式的选择器不见了
58+
**原因**: `v-if` 条件只判断了 `functionMode === 'pro'`
59+
**解决**: 改为独立显示三个选择器
60+
61+
### 问题2: 状态共享导致混淆
62+
**现象**: 基础模式和上下文模式的子模式选择相互影响
63+
**原因**: 使用同一个 `selectedOptimizationMode` 变量
64+
**解决**: 完全独立的存储和状态管理
65+
66+
### 问题3: 图像模式刷新后文件上传区域不显示
67+
**现象**: 从文生图切换到图生图时正常，但刷新页面后文件上传按钮不显示
68+
**原因**: `useImageWorkspace` 的 `restoreSelections` 方法未恢复 `imageMode`
69+
**解决**: 在 `restoreSelections` 中添加从 `UI_SETTINGS_KEYS.IMAGE_SUB_MODE` 恢复的逻辑
70+
71+
## 📁 文件结构
72+
73+
```
74+
docs/archives/126-submode-persistence/
75+
├── README.md # 本文件 - 功能概述
76+
├── design.md # 完整的设计与实施文档（v4.0）
77+
├── implementation.md # 实施详情和代码示例
78+
└── experience.md # 经验总结和最佳实践
79+
```
80+
81+
## 🔑 核心设计原则
82+
83+
### 1. 状态完全隔离
84+
三种功能模式使用完全独立的存储键和Composable，即使子模式名称相同也不共享状态。
85+
86+
**用户的关键洞察**:
87+
> "基础模式也应该有自己的存储，这个也应该分开...因为这两个功能模式本质上控制的是不同的，只是当前他们的子模式碰巧都叫 系统/用户提示词优化而已。"
88+
89+
### 2. 单例模式的全局状态
90+
每个Composable内部维护单例状态，确保全局唯一，避免多实例冲突。
91+
92+
### 3. 异步初始化
93+
不阻塞应用启动，通过 `ensureInitialized()` 延迟加载，并带有防抖机制。
94+
95+
### 4. 自动持久化
96+
每次子模式切换自动保存到localStorage，用户无感知。
97+
98+
## 📈 技术亮点
99+
100+
1. **完整的状态隔离**: 三个独立的存储键和Composable
101+
2. **统一的UI体验**: 所有子模式选择器都在导航栏
102+
3. **完善的错误处理**: 初始化失败时回退到默认值
103+
4. **清晰的日志输出**: 便于调试和问题排查
104+
5. **向后兼容**: 保留旧变量，平滑升级
105+
106+
## 🔗 相关文档
107+
108+
- [design.md](./design.md) - 完整的设计文档（包含v1.0-v4.0演进历史）
109+
- [implementation.md](./implementation.md) - 详细的实施记录和代码
110+
- [experience.md](./experience.md) - 经验总结和最佳实践
111+
112+
## 📝 使用说明
113+
114+
### 开发者参考
115+
1. 查看 [design.md](./design.md) 了解完整的设计思路和架构决策
116+
2. 查看 [implementation.md](./implementation.md) 了解具体实现细节
117+
3. 查看 [experience.md](./experience.md) 学习经验和最佳实践
118+
119+
### 问题排查
120+
如遇到子模式相关问题，参考 [experience.md](./experience.md) 的常见问题部分。
121+
122+
## ✨ 成功指标
123+
124+
- ✅ 所有三种模式的子模式能正确持久化
125+
- ✅ 刷新页面后状态完全保持
126+
- ✅ 功能模式切换时各自恢复独立的子模式
127+
- ✅ 历史记录和收藏恢复时正确切换子模式
128+
- ✅ 无编译错误和运行时错误
129+
- ✅ 性能无明显下降
130+
- ✅ 所有测试场景通过
131+
132+
## 🎓 经验总结
133+
134+
详见 [experience.md](./experience.md)
135+
136+
---
137+
138+
**文档版本**: v1.0
139+
**最后更新**: 2025-10-22
140+
**维护者**: Claude & 用户

0 commit comments

Comments
 (0)