126 lines
2.6 KiB
Vue
126 lines
2.6 KiB
Vue
<template>
|
|
<div class="demo">
|
|
<div class="phone">
|
|
<header class="head">
|
|
<span class="title" v-text="'智能助手'" />
|
|
<button type="button" class="reset" @click="resetConversation" v-text="'清空'" />
|
|
</header>
|
|
|
|
<ai-chat-panel
|
|
class="panel"
|
|
:messages="messages"
|
|
:is-generating="isGenerating"
|
|
:active-tool-status="activeToolStatus"
|
|
:last-error="lastError"
|
|
:can-retry="canRetry"
|
|
:loading="isLoadingConversation"
|
|
:role-names="{ assistant: '分析助手', user: '我' }"
|
|
@send="sendMessage"
|
|
@stop="stopGeneration"
|
|
@retry="retryLastMessage"
|
|
>
|
|
<template #welcome>
|
|
<div class="welcome">
|
|
<p class="welcome-title" v-text="'可以问我关于数据的问题'" />
|
|
<p class="welcome-tip" v-text="'例如：上个月订单量怎么样？'" />
|
|
</div>
|
|
</template>
|
|
</ai-chat-panel>
|
|
</div>
|
|
|
|
<p class="note" v-text="'面板嵌在带标题栏的页面骨架里，欢迎语与角色名都做了自定义。'" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { AiChatPanel, useAiChat } from "timi-tdesign-mobile";
|
|
import { createMockReply } from "../ai/mock-sse";
|
|
|
|
/**
|
|
* 完整场景：标题栏 + 面板 + 自定义欢迎语。
|
|
* 会话状态全部来自 useAiChat，真实项目里把 request 换成后端 SSE 接口即可。
|
|
*/
|
|
const {
|
|
messages,
|
|
isGenerating,
|
|
isLoadingConversation,
|
|
activeToolStatus,
|
|
lastError,
|
|
canRetry,
|
|
sendMessage,
|
|
stopGeneration,
|
|
retryLastMessage,
|
|
resetConversation
|
|
} = useAiChat({
|
|
request: async ({ message, signal }) => createMockReply(message, signal)
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.demo {
|
|
.phone {
|
|
height: 32rem;
|
|
display: flex;
|
|
overflow: hidden;
|
|
flex-direction: column;
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: .5rem;
|
|
background: var(--vp-c-bg-soft);
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: .625rem .75rem;
|
|
border-bottom: 1px solid var(--vp-c-divider);
|
|
background: var(--vp-c-bg);
|
|
}
|
|
|
|
.title {
|
|
font-size: .875rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.reset {
|
|
padding: .25rem .5rem;
|
|
font-size: .75rem;
|
|
cursor: pointer;
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: .375rem;
|
|
color: var(--vp-c-text-2);
|
|
background: transparent;
|
|
}
|
|
|
|
.panel {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.welcome {
|
|
padding: 2rem 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.welcome-title {
|
|
margin: 0 0 .375rem;
|
|
font-size: .875rem;
|
|
font-weight: 600;
|
|
color: var(--vp-c-text-1);
|
|
}
|
|
|
|
.welcome-tip {
|
|
margin: 0;
|
|
font-size: .75rem;
|
|
color: var(--vp-c-text-2);
|
|
}
|
|
|
|
.note {
|
|
margin: .75rem 0 0;
|
|
font-size: .75rem;
|
|
color: var(--vp-c-text-2);
|
|
}
|
|
}
|
|
</style>
|