87 lines
1.8 KiB
Vue
87 lines
1.8 KiB
Vue
<template>
|
|
<div class="demo">
|
|
<ai-chat-thinking :content="content" :is-generating="generating" />
|
|
|
|
<div class="bar">
|
|
<button type="button" class="btn" :disabled="generating" @click="start" v-text="'开始生成'" />
|
|
<button type="button" class="btn" @click="reset" v-text="'重置'" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onUnmounted, ref } from "vue";
|
|
import { AiChatThinking } from "timi-tdesign-mobile";
|
|
|
|
const SEGMENTS = [
|
|
"先理解问题：用户想知道上个月的订单情况。",
|
|
"确认时间范围：按自然月还是滚动 30 天？这里取自然月。",
|
|
"确认口径：使用支付口径而非下单口径。",
|
|
"开始查询数据并汇总……"
|
|
];
|
|
|
|
const content = ref("");
|
|
const generating = ref(false);
|
|
let timer: ReturnType<typeof setInterval> | null = null;
|
|
|
|
/** 逐段追加，模拟思考内容流式到达；生成中组件会自动滚到底部。 */
|
|
function start() {
|
|
reset();
|
|
generating.value = true;
|
|
let index = 0;
|
|
timer = setInterval(() => {
|
|
if (index >= SEGMENTS.length) {
|
|
stop();
|
|
return;
|
|
}
|
|
content.value += (content.value ? "\n" : "") + SEGMENTS[index];
|
|
index += 1;
|
|
}, 700);
|
|
}
|
|
|
|
function stop() {
|
|
if (timer !== null) {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
}
|
|
generating.value = false;
|
|
}
|
|
|
|
function reset() {
|
|
stop();
|
|
content.value = "";
|
|
}
|
|
|
|
onUnmounted(stop);
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.demo {
|
|
.bar {
|
|
display: flex;
|
|
gap: .5rem;
|
|
margin-top: .75rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: .25rem .75rem;
|
|
font-size: .75rem;
|
|
cursor: pointer;
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: .375rem;
|
|
color: var(--vp-c-text-1);
|
|
background: var(--vp-c-bg-soft);
|
|
|
|
&:hover:not(:disabled) {
|
|
color: var(--vp-c-brand-1);
|
|
border-color: var(--vp-c-brand-1);
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
</style>
|