Files
assistant/components/HistoryList.uvue

86 lines
1.6 KiB
Plaintext

<template>
<view class="history-list">
<!-- Section header -->
<view class="history-list__header">
<text class="history-list__header-icon">💬</text>
<text class="history-list__header-title">历史对话</text>
</view>
<!-- Empty state -->
<view v-if="conversations.length === 0" class="history-list__empty">
<text class="history-list__empty-text">暂无历史对话</text>
</view>
<!-- List -->
<view v-else class="history-list__items">
<HistoryItem
v-for="conv in conversations"
:key="conv.id"
:conversation="conv"
@tap="onSelect(conv.id)"
@delete="onDelete(conv.id)"
/>
</view>
</view>
</template>
<script setup lang="uts">
import type { Conversation } from '@/types/index'
import HistoryItem from './HistoryItem.uvue'
const props = defineProps<{
conversations: Conversation[]
}>()
const emit = defineEmits<{
select: [id: string]
delete: [id: string]
}>()
function onSelect(id: string): void {
emit('select', id)
}
function onDelete(id: string): void {
emit('delete', id)
}
</script>
<style scoped>
.history-list {
padding: 16rpx 0;
}
.history-list__header {
display: flex;
flex-direction: row;
align-items: center;
padding: 16rpx 24rpx 8rpx;
}
.history-list__header-icon {
font-size: 28rpx;
margin-right: 10rpx;
}
.history-list__header-title {
font-size: 28rpx;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
}
.history-list__empty {
padding: 40rpx 24rpx;
text-align: center;
}
.history-list__empty-text {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.3);
}
.history-list__items {
padding: 8rpx 24rpx;
}
</style>