新增:管理后台前端页面,以及openspec内容。
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
# 会话管理和用户管理页面优化
|
||||
|
||||
## 1. 问题描述
|
||||
|
||||
当前系统的会话管理和用户管理页面存在以下问题:
|
||||
|
||||
1. **会话记录页面**:
|
||||
- 发送方式以纯文本形式显示,不够直观
|
||||
- 手机号直接显示完整号码,存在隐私泄露风险
|
||||
- 时间格式包含"T"字符,不符合用户阅读习惯
|
||||
- 使用传统分页方式,用户体验不佳
|
||||
|
||||
2. **用户管理页面**:
|
||||
- 存在不必要的分页控件,增加用户操作复杂度
|
||||
- 时间格式包含"T"字符,不符合用户阅读习惯
|
||||
- 手机号直接显示完整号码,存在隐私泄露风险
|
||||
|
||||
## 2. 解决方案
|
||||
|
||||
1. **优化发送方式显示**:将发送方式重构为tag标签形式,文字类型显示success样式,语音类型显示默认样式
|
||||
|
||||
2. **实现手机号脱敏功能**:
|
||||
- 默认隐藏中间4-8位数字为"*"符号
|
||||
- 支持点击交互,点击显示完整号码,再次点击恢复脱敏状态
|
||||
|
||||
3. **优化时间格式**:将所有时间数据中的"T"字符替换为空格,提高可读性
|
||||
|
||||
4. **重构表格组件为Descriptions描述列表**:
|
||||
- 将表格替换为Descriptions描述列表,一行表格数据放入一个Descriptions描述列表
|
||||
- 实现"无限滚动"分页加载机制,每次加载20条,滚动到最底时加载下20条
|
||||
- 会话内容单独一行显示在最下方
|
||||
- 其他内容排成3列显示
|
||||
- 当查询结果不足20条时判断为已加载全部数据
|
||||
|
||||
5. **优化用户管理页面**:
|
||||
- 移除分页控件及相关分页逻辑
|
||||
- 不分页加载所有用户数据
|
||||
- 应用时间格式转换,将时间数据中的"T"字符替换为空格
|
||||
|
||||
## 3. 预期效果
|
||||
|
||||
- 会话记录页面:
|
||||
- 发送方式以tag标签形式显示
|
||||
- 手机号自动脱敏,支持点击显示/隐藏完整号码
|
||||
- 时间格式统一为"YYYY-MM-DD HH:mm:ss"
|
||||
- 表格替换为Descriptions描述列表,一行数据一个描述列表
|
||||
- 会话内容单独一行显示在最下方,其他内容排成3列
|
||||
- 实现无限滚动加载,每次加载20条,提升用户体验
|
||||
|
||||
- 用户管理页面:
|
||||
- 移除分页控件,不分页加载所有用户数据
|
||||
- 时间格式统一为"YYYY-MM-DD HH:mm:ss"
|
||||
- 手机号自动脱敏,支持点击显示/隐藏完整号码
|
||||
|
||||
- 整体效果:
|
||||
- 提高系统的用户体验和视觉效果
|
||||
- 增强数据安全性,保护用户隐私
|
||||
- 优化页面性能,提高数据加载效率
|
||||
- 简化用户操作,减少不必要的交互步骤
|
||||
|
||||
## 4. 影响范围
|
||||
|
||||
- 会话管理页面(ConversationList.vue)
|
||||
- 用户管理页面(UserList.vue)
|
||||
- 新增工具函数文件(formatters.js)
|
||||
- 相关API调用(AdminController的QueryConversations方法)
|
||||
Reference in New Issue
Block a user