微信小程序页面迁移校验之前 P5任务处理之前

apps/miniprogram - 副本/miniprogram/pages/chat-history/chat-history.json

@@ -0,0 +1,10 @@
+{
+  "navigationBarTitleText": "对话历史",
+  "enablePullDownRefresh": true,
+  "usingComponents": {
+    "ai-float-button": "/components/ai-float-button/ai-float-button",
+    "t-loading": "tdesign-miniprogram/loading/loading",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-empty": "tdesign-miniprogram/empty/empty"
+  }
+}

apps/miniprogram - 副本/miniprogram/pages/chat-history/chat-history.ts

@@ -0,0 +1,76 @@
+import { mockChatHistory } from '../../utils/mock-data'
+import { sortByTimestamp } from '../../utils/sort'
+
+/** 带展示标签的对话历史项 */
+interface ChatHistoryDisplay {
+  id: string
+  title: string
+  lastMessage: string
+  timestamp: string
+  customerName?: string
+  /** 格式化后的时间标签 */
+  timeLabel: string
+}
+
+Page({
+  data: {
+    /** 页面状态：loading / empty / normal */
+    pageState: 'loading' as 'loading' | 'empty' | 'normal',
+    /** 对话历史列表 */
+    list: [] as ChatHistoryDisplay[],
+  },
+
+  onLoad() {
+    this.loadData()
+  },
+
+  /** 加载数据 */
+  loadData() {
+    this.setData({ pageState: 'loading' })
+
+    setTimeout(() => {
+      // TODO: 替换为真实 API 调用
+      const sorted = sortByTimestamp(mockChatHistory)
+      const list: ChatHistoryDisplay[] = sorted.map((item) => ({
+        ...item,
+        timeLabel: this.formatTime(item.timestamp),
+      }))
+
+      this.setData({
+        list,
+        pageState: list.length === 0 ? 'empty' : 'normal',
+      })
+    }, 400)
+  },
+
+  /** 格式化时间为相对标签 */
+  formatTime(timestamp: string): string {
+    const now = new Date()
+    const target = new Date(timestamp)
+    const diffMs = now.getTime() - target.getTime()
+    const diffMin = Math.floor(diffMs / 60000)
+    const diffHour = Math.floor(diffMs / 3600000)
+    const diffDay = Math.floor(diffMs / 86400000)
+
+    if (diffMin < 1) return '刚刚'
+    if (diffMin < 60) return `${diffMin}分钟前`
+    if (diffHour < 24) return `${diffHour}小时前`
+    if (diffDay < 7) return `${diffDay}天前`
+
+    const month = target.getMonth() + 1
+    const day = target.getDate()
+    return `${month}月${day}日`
+  },
+
+  /** 点击对话记录 → 跳转 chat 页面 */
+  onItemTap(e: WechatMiniprogram.TouchEvent) {
+    const id = e.currentTarget.dataset.id
+    wx.navigateTo({ url: '/pages/chat/chat?historyId=' + id })
+  },
+
+  /** 下拉刷新 */
+  onPullDownRefresh() {
+    this.loadData()
+    setTimeout(() => wx.stopPullDownRefresh(), 600)
+  },
+})

apps/miniprogram - 副本/miniprogram/pages/chat-history/chat-history.wxml

@@ -0,0 +1,48 @@
+<!-- 加载态 -->
+<view class="page-loading" wx:if="{{pageState === 'loading'}}">
+  <t-loading theme="circular" size="80rpx" text="加载中..." />
+</view>
+
+<!-- 空态 -->
+<view class="page-empty" wx:elif="{{pageState === 'empty'}}">
+  <t-empty description="暂无对话记录" />
+</view>
+
+<!-- 正常态 -->
+<block wx:elif="{{pageState === 'normal'}}">
+  <!-- 对话列表 -->
+  <view class="chat-list">
+    <view
+      class="chat-item"
+      wx:for="{{list}}"
+      wx:key="id"
+      data-id="{{item.id}}"
+      bindtap="onItemTap"
+    >
+      <view class="chat-icon-box">
+        <t-icon name="chat" size="40rpx" color="#ffffff" />
+      </view>
+      <view class="chat-content">
+        <view class="chat-top">
+          <text class="chat-title text-ellipsis">{{item.title}}</text>
+          <text class="chat-time">{{item.timeLabel}}</text>
+        </view>
+        <view class="chat-bottom">
+          <text class="chat-summary text-ellipsis" wx:if="{{item.customerName}}">{{item.customerName}} · {{item.lastMessage}}</text>
+          <text class="chat-summary text-ellipsis" wx:else>{{item.lastMessage}}</text>
+        </view>
+      </view>
+      <t-icon name="chevron-right" size="32rpx" color="#c5c5c5" />
+    </view>
+  </view>
+
+  <!-- 底部提示 -->
+  <view class="list-footer">
+    <text class="footer-text">— 已加载全部记录 —</text>
+  </view>
+
+  <!-- AI 悬浮按钮 -->
+  <ai-float-button bottom="{{120}}" />
+</block>
+
+<dev-fab />

apps/miniprogram - 副本/miniprogram/pages/chat-history/chat-history.wxss

@@ -0,0 +1,89 @@
+/* ========== 加载态 & 空态 ========== */
+.page-loading,
+.page-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  gap: 24rpx;
+}
+
+/* ========== 对话列表 ========== */
+.chat-list {
+  background: #ffffff;
+}
+
+.chat-item {
+  display: flex;
+  align-items: center;
+  padding: 32rpx;
+  gap: 24rpx;
+  border-bottom: 1rpx solid var(--color-gray-1, #f3f3f3);
+  transition: background 0.2s ease;
+}
+.chat-item:active {
+  background: var(--color-gray-1, #f3f3f3);
+}
+
+/* 图标容器 */
+.chat-icon-box {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 24rpx;
+  background: linear-gradient(135deg, var(--color-primary, #0052d9), #4d8cf5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 4rpx 16rpx rgba(0, 82, 217, 0.2);
+}
+
+/* 内容区 */
+.chat-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.chat-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8rpx;
+}
+
+.chat-title {
+  font-size: var(--font-sm, 28rpx);
+  font-weight: 500;
+  color: var(--color-gray-13, #242424);
+  flex: 1;
+  min-width: 0;
+}
+
+.chat-time {
+  font-size: var(--font-xs, 24rpx);
+  color: var(--color-gray-6, #a6a6a6);
+  flex-shrink: 0;
+  margin-left: 16rpx;
+}
+
+.chat-bottom {
+  display: flex;
+  align-items: center;
+}
+
+.chat-summary {
+  font-size: var(--font-xs, 24rpx);
+  color: var(--color-gray-6, #a6a6a6);
+  max-width: 100%;
+}
+
+/* ========== 底部提示 ========== */
+.list-footer {
+  text-align: center;
+  padding: 32rpx 0 64rpx;
+}
+.footer-text {
+  font-size: 20rpx;
+  color: var(--color-gray-5, #c5c5c5);
+}