174 lines
5.6 KiB
Markdown
174 lines
5.6 KiB
Markdown
# 💾 栏目选择记忆功能说明
|
||
|
||
## 🎯 功能概述
|
||
|
||
新增了智能的栏目选择记忆功能，让用户在添加文章时不用每次都重新选择栏目，大大提升了内容发布的效率。
|
||
|
||
## ✨ 功能特点
|
||
|
||
### 🧠 智能记忆
|
||
- **自动保存**：用户选择栏目后自动保存到本地存储
|
||
- **智能恢复**：新建文章时自动填入上次选择的栏目
|
||
- **优先级设置**：合理的栏目选择优先级策略
|
||
|
||
### 🎯 优先级策略
|
||
1. **传入栏目优先**：从栏目页面点击"添加文章"时，使用传入的栏目ID
|
||
2. **记忆栏目备选**：其他情况下使用上次保存的栏目
|
||
3. **编辑模式保持**：编辑文章时保持原有栏目不变
|
||
|
||
### 💾 持久化存储
|
||
- **本地存储**：使用 localStorage 保存栏目选择
|
||
- **跨会话保持**：关闭浏览器后重新打开仍然有效
|
||
- **自动更新**：每次选择新栏目时自动更新记忆
|
||
|
||
## 🛠️ 技术实现
|
||
|
||
### 核心常量
|
||
```javascript
|
||
const LAST_CATEGORY_KEY = 'cms_article_last_category';
|
||
```
|
||
|
||
### 保存功能
|
||
```javascript
|
||
// 保存最后选择的栏目到本地存储
|
||
const saveLastCategory = (categoryId: number | undefined) => {
|
||
if (categoryId) {
|
||
localStorage.setItem(LAST_CATEGORY_KEY, categoryId.toString());
|
||
}
|
||
};
|
||
```
|
||
|
||
### 恢复功能
|
||
```javascript
|
||
// 从本地存储获取最后选择的栏目
|
||
const getLastCategory = (): number | undefined => {
|
||
const saved = localStorage.getItem(LAST_CATEGORY_KEY);
|
||
return saved ? parseInt(saved) : undefined;
|
||
};
|
||
```
|
||
|
||
### 触发时机
|
||
```javascript
|
||
// 1. 用户手动选择栏目时
|
||
const onCategoryId = (id: number) => {
|
||
form.categoryId = id;
|
||
// 💾 在新增模式下，用户手动选择栏目时也保存到本地存储
|
||
if (!isUpdate.value && id) {
|
||
saveLastCategory(id);
|
||
}
|
||
};
|
||
|
||
// 2. 保存成功后
|
||
saveOrUpdate(formData)
|
||
.then((msg) => {
|
||
// 💾 保存成功后，记住当前选择的栏目（仅在新增时）
|
||
if (!isUpdate.value && form.categoryId) {
|
||
saveLastCategory(form.categoryId);
|
||
}
|
||
// ...
|
||
});
|
||
```
|
||
|
||
### 恢复逻辑
|
||
```javascript
|
||
// 新增模式：恢复上次选择的栏目
|
||
if (props.data) {
|
||
// 编辑模式：加载现有文章数据
|
||
// ...
|
||
} else {
|
||
// 新增模式：恢复上次选择的栏目
|
||
isUpdate.value = false;
|
||
|
||
// 🎯 优先级设置栏目：
|
||
// 1. 如果传入了 categoryId（从栏目页面点击添加），使用传入的
|
||
// 2. 否则使用上次保存的栏目
|
||
if (props.categoryId) {
|
||
form.categoryId = props.categoryId;
|
||
} else {
|
||
const lastCategory = getLastCategory();
|
||
if (lastCategory) {
|
||
form.categoryId = lastCategory;
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 🎮 使用场景
|
||
|
||
### 场景一：常规文章发布
|
||
1. **首次使用**：用户选择栏目，系统自动记忆
|
||
2. **后续使用**：打开添加文章弹窗，栏目自动填入
|
||
3. **更换栏目**：选择新栏目时，系统更新记忆
|
||
|
||
### 场景二：从栏目页面添加
|
||
1. **点击添加**：从栏目管理页面点击"添加文章"
|
||
2. **自动填入**：使用当前栏目，不使用记忆的栏目
|
||
3. **保存记忆**：发布成功后更新记忆为当前栏目
|
||
|
||
### 场景三：编辑现有文章
|
||
1. **保持原样**：编辑时保持文章原有的栏目
|
||
2. **不影响记忆**：编辑操作不会更新栏目记忆
|
||
3. **独立处理**：编辑和新增的栏目处理完全独立
|
||
|
||
## 💡 用户体验提升
|
||
|
||
### 🚀 效率提升
|
||
- **减少操作**：不用每次都选择栏目
|
||
- **快速发布**：特别适合批量发布同类文章
|
||
- **减少错误**：避免忘记选择栏目或选错栏目
|
||
|
||
### 🎯 智能化
|
||
- **上下文感知**：根据使用场景智能选择栏目
|
||
- **用户习惯**：记住用户的使用偏好
|
||
- **无感知操作**：功能在后台默默工作
|
||
|
||
### 🔄 灵活性
|
||
- **随时更改**：用户可以随时选择不同的栏目
|
||
- **不强制绑定**：不会强制用户使用记忆的栏目
|
||
- **清晰反馈**：栏目选择状态清晰可见
|
||
|
||
## 🔍 技术细节
|
||
|
||
### 数据存储
|
||
- **存储位置**：浏览器 localStorage
|
||
- **存储格式**：字符串形式的栏目ID
|
||
- **存储时机**：栏目选择变化时和保存成功后
|
||
|
||
### 兼容性处理
|
||
- **类型转换**：字符串和数字之间的安全转换
|
||
- **空值处理**：处理 undefined 和 null 值
|
||
- **错误容错**：localStorage 不可用时的降级处理
|
||
|
||
### 性能优化
|
||
- **最小化存储**：只存储必要的栏目ID
|
||
- **即时更新**：选择变化时立即保存
|
||
- **读取优化**：只在需要时读取存储的值
|
||
|
||
## 🎉 总结
|
||
|
||
栏目选择记忆功能是一个贴心的用户体验优化，它：
|
||
|
||
1. **解决痛点**：彻底解决了重复选择栏目的问题
|
||
2. **智能设计**：考虑了各种使用场景的优先级
|
||
3. **技术可靠**：使用成熟的本地存储技术
|
||
4. **用户友好**：功能透明，不干扰正常操作流程
|
||
|
||
这个功能让内容管理变得更加高效和人性化，特别适合需要频繁发布文章的用户！
|
||
|
||
## 🧪 测试建议
|
||
|
||
### 基础功能测试
|
||
1. **首次选择**：选择一个栏目，发布文章，检查是否记忆
|
||
2. **自动恢复**：重新打开添加文章弹窗，检查栏目是否自动填入
|
||
3. **更换栏目**：选择不同栏目，检查记忆是否更新
|
||
|
||
### 场景测试
|
||
1. **从栏目页添加**：从栏目管理页面点击添加，检查优先级
|
||
2. **编辑文章**：编辑现有文章，检查是否不影响记忆
|
||
3. **跨会话测试**：关闭浏览器重新打开，检查记忆是否保持
|
||
|
||
### 边界情况测试
|
||
1. **清空栏目**：清空栏目选择，检查处理是否正确
|
||
2. **无效栏目**：删除记忆的栏目后，检查是否正常降级
|
||
3. **多用户环境**：不同用户登录，检查记忆是否独立
|