67 lines
2.7 KiB
Markdown
67 lines
2.7 KiB
Markdown
|
# 会话管理和用户管理页面优化
|
|||
|
|
|
|||
|
|
## 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方法）
|