新增：管理后台前端页面，以及openspec内容。

2025-12-24 20:15:28 +08:00
parent 6d7ed38105
commit 845f1c6618
64 changed files with 9017 additions and 6 deletions
--- a/openspec/changes/optimize-conversation-user-management/implementation.md
+++ b/openspec/changes/optimize-conversation-user-management/implementation.md
@@ -0,0 +1,382 @@
+# 会话管理和用户管理页面优化 - 技术实现
+
+## 1. 工具函数实现
+
+### 1.1 创建工具函数文件
+
+创建了 `src/utils/formatters.js` 文件，用于存放通用的格式化工具函数：
+
+```javascript
+// 手机号脱敏处理
+export const formatPhoneNumber = (phoneNumber, showFull = false) => {
+  if (!phoneNumber) return ''
+  const phone = phoneNumber.toString()
+  if (phone.length !== 11) return phone
+  
+  if (showFull) {
+    return phone
+  } else {
+    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
+  }
+}
+
+// 时间格式转换，将T替换为空格
+export const formatDateTime = (dateTime) => {
+  if (!dateTime) return ''
+  return dateTime.toString().replace('T', ' ')
+}
+
+// 时间戳转换为格式化日期
+export const formatTimestamp = (timestamp) => {
+  if (!timestamp) return ''
+  const date = new Date(timestamp)
+  return date.toISOString().replace('T', ' ').slice(0, 19)
+}
+```
+
+### 1.2 工具函数设计思路
+
+- **手机号脱敏**：使用正则表达式将中间4位替换为"****"，支持参数控制是否显示完整号码
+- **时间格式转换**：简单高效地将"T"替换为空格，保持原有时间格式不变
+- **时间戳转换**：将时间戳转换为标准的"YYYY-MM-DD HH:mm:ss"格式
+
+## 2. 会话管理页面优化
+
+### 2.1 发送方式Tag标签实现
+
+```vue
+<el-descriptions-item label="发送方式">
+  <el-tag :type="item.sendMethod === '文字' ? 'success' : ''">
+    {{ item.sendMethod === '文字' ? 'text' : 'voice' }}
+  </el-tag>
+</el-descriptions-item>
+```
+
+### 2.2 手机号脱敏与点击交互
+
+```vue
+<el-descriptions-item label="手机号">
+  <span 
+    class="phone-number" 
+    @click="item.showFullPhone = !item.showFullPhone" 
+    :title="'点击' + (item.showFullPhone ? '隐藏' : '显示') + '完整号码'"
+  >
+    {{ formatPhoneNumber(item.phoneNumber, item.showFullPhone) }}
+  </span>
+</el-descriptions-item>
+```
+
+### 2.3 时间格式转换
+
+```vue
+<el-descriptions-item label="记录时间">
+  {{ formatDateTime(item.recordTime) }}
+</el-descriptions-item>
+```
+
+### 2.4 Descriptions描述列表实现
+
+#### 2.4.1 模板修改
+
+```vue
+<!-- 会话记录列表 -->
+<el-card class="table-card">
+  <el-scrollbar height="500px" @scroll="handleScroll">
+    <div v-loading="loading" class="descriptions-container">
+      <div v-for="(item, index) in conversationList" :key="index" class="descriptions-item">
+        <!-- 主要信息，3列显示 -->
+        <el-descriptions :column="3" border>
+          <el-descriptions-item label="记录时间">{{ formatDateTime(item.recordTime) }}</el-descriptions-item>
+          <el-descriptions-item label="用户名">{{ item.userName }}</el-descriptions-item>
+          <el-descriptions-item label="微信名">{{ item.weChatName }}</el-descriptions-item>
+          <el-descriptions-item label="手机号">
+            <span 
+              class="phone-number" 
+              @click="item.showFullPhone = !item.showFullPhone" 
+              :title="'点击' + (item.showFullPhone ? '隐藏' : '显示') + '完整号码'"
+            >
+              {{ formatPhoneNumber(item.phoneNumber, item.showFullPhone) }}
+            </span>
+          </el-descriptions-item>
+          <el-descriptions-item label="部门">{{ item.department }}</el-descriptions-item>
+          <el-descriptions-item label="消息类型">
+            <el-tag :type="item.messageType === 1 ? 'success' : ''">
+              {{ item.messageType === 1 ? '公有' : '私有' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="发送方式">
+            <el-tag :type="item.sendMethod === '文字' ? 'success' : ''">
+              {{ item.sendMethod === '文字' ? 'text' : 'voice' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="语音时长">{{ item.speakingTime ? item.speakingTime + '秒' : '-' }}</el-descriptions-item>
+          <el-descriptions-item label="位置">{{ item.userLocation }}</el-descriptions-item>
+        </el-descriptions>
+        
+        <!-- 会话内容单独一行显示在最下方 -->
+        <el-descriptions :column="1" border class="conversation-content">
+          <el-descriptions-item label="会话内容">
+            {{ item.conversationContent }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      
+      <!-- 加载更多提示 -->
+      <div v-if="loadingMore" class="loading-more">
+        <el-icon class="is-loading"><Loading /></el-icon>
+        <span>正在加载中...</span>
+      </div>
+      <div v-else-if="!hasMoreData" class="no-more-data">
+        <span>已加载全部数据</span>
+      </div>
+    </div>
+  </el-scrollbar>
+</el-card>
+```
+
+#### 2.4.2 滚动处理逻辑
+
+```javascript
+// 滚动处理
+const handleScroll = (event) => {
+  const { scrollTop, scrollHeight, clientHeight } = event.target
+  // 当滚动到底部100px以内时加载下一页
+  if (scrollHeight - scrollTop - clientHeight < 100 && !loadingMore.value && hasMoreData.value) {
+    loadNextPage()
+  }
+}
+
+// 加载下一页数据
+const loadNextPage = () => {
+  if (loadingMore.value || !hasMoreData.value) return
+  
+  loadingMore.value = true
+  currentPage.value++
+  fetchConversations(true) // 传入true表示加载更多
+}
+```
+
+#### 2.4.3 分页请求逻辑
+
+```javascript
+// 获取会话记录
+const fetchConversations = async (isLoadMore = false) => {
+  if (isLoadMore) {
+    loadingMore.value = true
+  } else {
+    loading.value = true
+    conversationList.value = [] // 非加载更多时清空列表
+    hasMoreData.value = true // 重置加载状态
+    currentPage.value = 1 // 重置当前页
+  }
+  
+  try {
+    // 构建请求参数，包含分页信息
+    const params = {
+      // 其他参数
+      page: currentPage.value,
+      pageSize: pageSize.value // 固定为20条/页
+    }
+    
+    // 调用API获取会话记录
+    const data = await request.post('/Admin/QueryConversations', JSON.stringify(params))
+    
+    // 处理返回数据
+    const rawData = Array.isArray(data) ? data : data.data || []
+    const sortedData = rawData.sort((a, b) => {
+      return b.recordTimeUTCStamp - a.recordTimeUTCStamp
+    })
+    
+    // 如果是加载更多，则追加数据，否则替换数据
+    if (isLoadMore) {
+      conversationList.value = [...conversationList.value, ...sortedData]
+    } else {
+      conversationList.value = sortedData
+    }
+    
+    // 判断是否已加载全部数据
+    if (sortedData.length < pageSize.value) {
+      hasMoreData.value = false
+    }
+  } catch (error) {
+    ElMessage.error('获取会话记录失败：' + error.message)
+    if (!isLoadMore) {
+      conversationList.value = []
+    }
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+```
+
+### 2.5 样式优化
+
+```scss
+/* Descriptions容器样式 */
+.descriptions-container {
+  width: 100%;
+}
+
+/* 每个Descriptions项的样式 */
+.descriptions-item {
+  margin-bottom: 20px;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* 会话内容样式 */
+.conversation-content {
+  margin-top: 10px;
+}
+
+/* 响应式调整Descriptions列数 */
+@media (max-width: 767px) {
+  .el-descriptions {
+    :deep(.el-descriptions__table) {
+      width: 100%;
+    }
+    
+    :deep(.el-descriptions__cell) {
+      width: 50%;
+    }
+  }
+}
+```
+
+## 3. 用户管理页面优化
+
+### 3.1 移除分页控件
+
+移除了以下内容：
+
+- el-pagination组件
+- 分页数据变量（currentPage, pageSize, total）
+- 分页变化处理函数（handlePageChange）
+
+### 3.2 应用时间格式转换和手机号脱敏
+
+与会话管理页面类似，为时间列和手机号列应用了相同的格式化处理。
+
+## 4. 样式优化
+
+### 4.1 手机号样式
+
+```scss
+/* 手机号样式 */
+.phone-number {
+  cursor: pointer;
+  color: #409eff;
+  text-decoration: underline;
+}
+
+.phone-number:hover {
+  color: #66b1ff;
+}
+```
+
+### 4.2 加载更多样式
+
+```scss
+/* 加载更多样式 */
+.loading-more,
+.no-more-data {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  color: #909399;
+  font-size: 14px;
+}
+
+.loading-more .el-icon {
+  margin-right: 8px;
+}
+```
+
+## 5. 最佳实践
+
+### 5.1 代码组织
+
+- 将通用工具函数抽离到单独的文件中，提高复用性和可维护性
+- 使用Composition API和script setup语法，简化组件代码
+- 遵循单一职责原则，每个组件只负责一个功能模块
+
+### 5.2 性能优化
+
+- 无限滚动加载减少了初始加载时间，提高了用户体验
+- 固定分页大小为20条/页，平衡了加载性能和用户体验
+- 添加了加载状态提示和重复请求防止机制
+
+### 5.3 用户体验
+
+- 手机号脱敏保护了用户隐私
+- 点击交互支持查看完整手机号，方便用户操作
+- 时间格式优化提高了可读性
+- 无限滚动减少了用户的操作步骤
+- Descriptions描述列表提供了更清晰的数据展示方式
+
+### 5.4 代码可读性
+
+- 使用清晰的变量和函数命名
+- 添加了必要的注释
+- 遵循Vue 3的最佳实践
+
+## 6. 技术选型理由
+
+1. **Element Plus组件库**：提供了丰富的UI组件，包括tag标签、descriptions描述列表、scrollbar滚动条等，简化了开发工作
+
+2. **Descriptions描述列表**：相比表格，描述列表更适合展示一行数据的详细信息，提供了更好的视觉层次
+
+3. **无限滚动分页**：相比传统分页，无限滚动提供了更流畅的用户体验，减少了用户的操作步骤
+
+4. **工具函数设计**：将通用功能抽离为工具函数，提高了代码的复用性和可维护性
+
+5. **手机号脱敏**：保护用户隐私，符合数据安全规范
+
+6. **时间格式优化**：提高了数据的可读性，符合用户的阅读习惯
+
+## 7. 影响范围
+
+1. **会话管理页面**：
+   - 模板结构变化：表格替换为Descriptions描述列表
+   - 数据处理逻辑变化
+   - 交互方式变化
+   - 样式变化
+
+2. **用户管理页面**：
+   - 模板结构变化：移除了分页控件
+   - 数据处理逻辑变化
+   - 交互方式变化
+
+3. **API调用**：
+   - 会话记录API添加了分页参数
+
+4. **新增文件**：
+   - `src/utils/formatters.js`：工具函数文件
+
+5. **文档**：
+   - 更新了详细的修改记录文档
+
+## 8. 后续优化建议
+
+1. **添加搜索功能**：为会话记录和用户管理页面添加更强大的搜索功能
+
+2. **支持导出功能**：支持将数据导出为Excel或CSV格式
+
+3. **添加筛选条件记忆功能**：记住用户的筛选条件，提高用户体验
+
+4. **优化移动端体验**：进一步优化移动端的显示效果和交互方式
+
+5. **添加数据统计功能**：在页面顶部添加数据统计卡片，展示关键指标
+
+6. **支持自定义列**：允许用户自定义显示哪些列，提高灵活性
+
+7. **添加批量操作功能**：支持批量删除或修改数据，提高操作效率
+
+## 9. 总结
+
+本次优化实现了会话管理和用户管理页面的多项改进，包括发送方式tag标签显示、手机号脱敏、时间格式优化、表格替换为Descriptions描述列表、无限滚动分页等。这些改进提高了系统的用户体验、数据安全性和性能表现。
+
+所有修改都遵循了openspec开发规范，并更新了详细的修改记录文档，便于后续维护和参考。