nl-blogs/.trae/documents/系统优化与修复计划.md

1. 修复数据编辑功能问题

问题分析

当前系统在编辑数据时，表单不会自动加载现有数据，用户需要手动填充所有字段，导致编辑体验不佳且容易遗漏数据。

解决方案

为每个编辑表单组件添加从详情API获取数据的逻辑：

• PostForm.vue：添加fetchPost()调用，加载文章详情并填充表单
• WorkForm.vue：添加fetchWork()调用，加载作品详情并填充表单
• SnippetForm.vue：添加fetchSnippet()调用，加载代码片段详情并填充表单
• RoleForm.vue：添加adminGetRole()调用，加载角色详情并填充表单
• TagForm.vue：添加adminGetTag()调用，加载标签详情并填充表单
• UserForm.vue：添加getUser()调用，加载用户详情并填充表单

实现细节

• 在组件onMounted生命周期钩子中，检查路由参数判断是否为编辑模式
• 如果是编辑模式，调用相应的详情API获取完整数据
• 将API返回的数据映射到表单数据对象，确保所有字段正确填充
• 保存时只提交修改的字段或完整提交，确保数据完整性

2. 优化下拉列表UI显示效果

问题分析

当前系统使用原生<select>元素，背景为白色，与深色主题设计风格不符，影响整体视觉一致性。

解决方案

开发自定义下拉列表组件并全局替换：

1. 创建自定义Select组件

   • 开发CustomSelect.vue组件，实现下拉列表功能
   • 设计符合深色主题的样式，背景色使用与整体UI一致的深色
   • 支持v-model双向绑定、options属性、placeholder等基本功能
   • 实现平滑的展开/收起动画效果
   • 添加键盘导航支持

2. 全局替换下拉列表

   • 替换所有管理后台页面中的下拉列表：
     • UserForm.vue中的角色和状态选择
     • Logs.vue中的每页显示数量选择
     • 其他所有包含<select>元素的页面
   • 替换前台用户界面中的下拉列表：
     • CodePreview.vue中的语言选择
     • 其他所有包含<select>元素的前台页面

3. 确保功能完整性

   • 保持原有交互功能不变
   • 支持选项选择、搜索过滤（如有）
   • 确保在不同屏幕尺寸下正常工作
   • 支持禁用状态和必填验证

3. 实施步骤

1. 修复数据编辑功能

   • 按优先级顺序修复各个表单组件
   • 测试每个组件的编辑功能，确保数据正确加载和保存

2. 开发自定义Select组件

   • 设计组件结构和样式
   • 实现核心功能
   • 添加动画和交互效果

3. 全局替换下拉列表

   • 按页面逐个替换
   • 测试每个替换后的下拉列表功能
   • 确保视觉一致性

4. 全面测试

   • 测试所有编辑功能，确保数据完整性
   • 测试所有下拉列表，确保功能正常
   • 检查整体UI一致性

4. 预期效果

• 编辑数据时，表单自动填充现有数据，用户只需修改需要变更的字段
• 所有下拉列表使用统一的深色主题样式，与整体UI设计一致
• 提升用户体验，减少数据编辑错误
• 提高系统的视觉一致性和专业性