46 lines
1.2 KiB
Vue
46 lines
1.2 KiB
Vue
<template>
|
|
<div class="demo">
|
|
<div class="phone">
|
|
<ai-chat-message-list :messages="messages" :is-generating="false" />
|
|
</div>
|
|
|
|
<p class="note" v-text="'消息里的 thinkingList 与 citationList 会渲染为思考过程与引用。'" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { AiChatMessageList } from "timi-tdesign-mobile";
|
|
import { createMessage } from "../ai/mock-sse";
|
|
|
|
const messages = [
|
|
createMessage(1, "user", "上个月订单量怎么样？"),
|
|
createMessage(2, "assistant", "近 30 天订单量**环比上升 12%**，其中移动端贡献了主要增量。", {
|
|
thinkingList: [
|
|
{ id: 1, content: "先确认时间范围是自然月还是滚动 30 天。" },
|
|
{ id: 2, content: "再按端类型拆分，确认增量来源。" }
|
|
],
|
|
citationList: [
|
|
{ source: "分析中心", dataDomain: "订单域", timeRange: "近 30 天", caliber: "支付口径" }
|
|
]
|
|
})
|
|
];
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.demo {
|
|
.phone {
|
|
height: 26rem;
|
|
overflow: hidden;
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: .5rem;
|
|
background: var(--vp-c-bg-soft);
|
|
}
|
|
|
|
.note {
|
|
margin: .75rem 0 0;
|
|
font-size: .75rem;
|
|
color: var(--vp-c-text-2);
|
|
}
|
|
}
|
|
</style>
|