feat: chat integration, tenant admin spec, backend chat service, miniprogram updates, DEMO moved to tmp, XCX-TEST removed, migrations & docs
This commit is contained in:
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"navigationBarTitleText": "对话历史",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"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",
|
||||
"dev-fab": "/components/dev-fab/dev-fab"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import { mockChatHistory } from '../../utils/mock-data'
|
||||
import { sortByTimestamp } from '../../utils/sort'
|
||||
import { formatRelativeTime } from '../../utils/time'
|
||||
|
||||
/** VI 规范 §6.2：AI 图标配色系统（6种） */
|
||||
const ICON_GRADIENTS = [
|
||||
'linear-gradient(135deg, #667eea 0%, #4a5fc7 100%)', // indigo
|
||||
'linear-gradient(135deg, #764ba2 0%, #5b3080 100%)', // purple
|
||||
'linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)', // red
|
||||
'linear-gradient(135deg, #e67e22 0%, #ca6c17 100%)', // orange
|
||||
'linear-gradient(135deg, #d4a017 0%, #b8860b 100%)', // yellow
|
||||
'linear-gradient(135deg, #2980b9 0%, #1a5276 100%)', // blue
|
||||
]
|
||||
|
||||
/** 带展示标签的对话历史项 */
|
||||
interface ChatHistoryDisplay {
|
||||
id: string
|
||||
title: string
|
||||
lastMessage: string
|
||||
timestamp: string
|
||||
customerName?: string
|
||||
/** 格式化后的时间标签 */
|
||||
timeLabel: string
|
||||
/** 图标背景渐变（VI §6.2 AI 图标配色，每条随机） */
|
||||
iconGradient: string
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
/** 页面状态：loading / empty / normal / error */
|
||||
pageState: 'loading' as 'loading' | 'empty' | 'normal' | 'error',
|
||||
/** 状态栏高度 */
|
||||
statusBarHeight: 0,
|
||||
/** 对话历史列表 */
|
||||
list: [] as ChatHistoryDisplay[],
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const sysInfo = wx.getWindowInfo()
|
||||
this.setData({ statusBarHeight: sysInfo.statusBarHeight || 44 })
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
/** 加载数据 */
|
||||
loadData() {
|
||||
this.setData({ pageState: 'loading' })
|
||||
|
||||
try {
|
||||
setTimeout(() => {
|
||||
// TODO: 替换为真实 API 调用
|
||||
const sorted = sortByTimestamp(mockChatHistory)
|
||||
const list: ChatHistoryDisplay[] = sorted.map((item) => ({
|
||||
...item,
|
||||
timeLabel: formatRelativeTime(item.timestamp),
|
||||
iconGradient: ICON_GRADIENTS[Math.floor(Math.random() * ICON_GRADIENTS.length)],
|
||||
}))
|
||||
|
||||
this.setData({
|
||||
list,
|
||||
pageState: list.length === 0 ? 'empty' : 'normal',
|
||||
})
|
||||
}, 400)
|
||||
} catch {
|
||||
this.setData({ pageState: 'error' })
|
||||
}
|
||||
},
|
||||
|
||||
/** 返回上一页 */
|
||||
onBack() {
|
||||
wx.navigateBack()
|
||||
},
|
||||
|
||||
/** 重试加载 */
|
||||
onRetry() {
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
/** 点击对话记录 → 跳转 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)
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,68 @@
|
||||
<!-- pages/chat-history/chat-history.wxml — 对话历史 -->
|
||||
|
||||
<!-- 加载态（toast 浮层，不白屏） -->
|
||||
<view class="g-toast-loading" wx:if="{{pageState === 'loading'}}">
|
||||
<view class="g-toast-loading-inner">
|
||||
<t-loading theme="circular" size="40rpx" />
|
||||
<text class="g-toast-loading-text">加载中...</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 错误态 -->
|
||||
<view class="page-error" wx:elif="{{pageState === 'error'}}">
|
||||
<view class="error-content">
|
||||
<text class="error-icon">😵</text>
|
||||
<text class="error-text">加载失败，请重试</text>
|
||||
<view class="retry-btn" hover-class="retry-btn--hover" bindtap="onRetry">
|
||||
<text class="retry-btn-text">重新加载</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空态 -->
|
||||
<view class="page-empty-wrap" wx:elif="{{pageState === 'empty'}}">
|
||||
<view class="page-empty">
|
||||
<t-empty description="暂无对话记录" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 正常态 -->
|
||||
<view class="page-normal" wx:elif="{{pageState === 'normal'}}">
|
||||
|
||||
<!-- 对话列表 -->
|
||||
<view class="chat-list">
|
||||
<view
|
||||
class="chat-item"
|
||||
hover-class="chat-item--hover"
|
||||
wx:for="{{list}}"
|
||||
wx:key="id"
|
||||
data-id="{{item.id}}"
|
||||
bindtap="onItemTap"
|
||||
>
|
||||
<view class="chat-icon-box" style="background: {{item.iconGradient}};">
|
||||
<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 />
|
||||
</view>
|
||||
|
||||
<dev-fab />
|
||||
@@ -0,0 +1,177 @@
|
||||
/* pages/chat-history/chat-history.wxss — 对话历史页样式 */
|
||||
|
||||
/* ========== 自定义导航栏 ========== */
|
||||
.safe-area-top {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.custom-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
padding: 0 24rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nav-back--hover {
|
||||
background-color: var(--color-gray-2);
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: var(--font-lg);
|
||||
font-weight: 500;
|
||||
color: var(--color-gray-13);
|
||||
}
|
||||
|
||||
/* ========== 加载态 & 空态 ========== */
|
||||
.page-loading,
|
||||
.page-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
/* ========== 错误态 ========== */
|
||||
.page-error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: var(--color-gray-1);
|
||||
}
|
||||
|
||||
.error-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 96rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
font-size: var(--font-base);
|
||||
color: var(--color-gray-8);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
padding: 16rpx 48rpx;
|
||||
background-color: var(--color-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.retry-btn--hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.retry-btn-text {
|
||||
font-size: var(--font-sm);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ========== 容器 ========== */
|
||||
.page-empty-wrap,
|
||||
.page-normal {
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* ========== 对话列表 ========== */
|
||||
.chat-list {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.chat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
gap: 24rpx;
|
||||
border-bottom: 2rpx solid var(--color-gray-1, #f3f3f3);
|
||||
}
|
||||
|
||||
.chat-item--hover {
|
||||
background-color: var(--color-gray-1, #f3f3f3);
|
||||
}
|
||||
|
||||
/* 图标容器 */
|
||||
.chat-icon-box {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user