98 lines
1.9 KiB
Vue
98 lines
1.9 KiB
Vue
<template>
|
|
<div class="demo">
|
|
<ai-chat-composer
|
|
v-model="draft"
|
|
:is-generating="generating"
|
|
:last-error="error"
|
|
:can-retry="Boolean(error)"
|
|
@send="onSend"
|
|
@stop="onStop"
|
|
@retry="onRetry"
|
|
@new-conversation="onNewConversation"
|
|
/>
|
|
|
|
<div class="bar">
|
|
<button type="button" class="btn" @click="error = '网络中断，请重试'" v-text="'制造一个错误'" />
|
|
</div>
|
|
|
|
<ol class="log">
|
|
<li v-for="(item, index) in log" :key="index" v-text="item" />
|
|
</ol>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from "vue";
|
|
import { AiChatComposer } from "timi-tdesign-mobile";
|
|
|
|
const draft = ref("");
|
|
const generating = ref(false);
|
|
const error = ref("");
|
|
const log = ref<string[]>([]);
|
|
|
|
function push(message: string) {
|
|
log.value = [`${new Date().toLocaleTimeString()} ${message}`, ...log.value].slice(0, 5);
|
|
}
|
|
|
|
/** 发送后进入生成态，2 秒后自动恢复，便于观察按钮的三种形态。 */
|
|
function onSend(message: string) {
|
|
error.value = "";
|
|
generating.value = true;
|
|
push(`send("${message}")`);
|
|
setTimeout(() => {
|
|
generating.value = false;
|
|
push("生成结束");
|
|
}, 2000);
|
|
}
|
|
|
|
function onStop() {
|
|
generating.value = false;
|
|
push("stop()");
|
|
}
|
|
|
|
function onRetry() {
|
|
error.value = "";
|
|
push("retry()");
|
|
}
|
|
|
|
function onNewConversation() {
|
|
error.value = "";
|
|
push("new-conversation()");
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.demo {
|
|
.bar {
|
|
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 {
|
|
color: var(--vp-c-brand-1);
|
|
border-color: var(--vp-c-brand-1);
|
|
}
|
|
}
|
|
|
|
.log {
|
|
margin: .75rem 0 0;
|
|
padding-left: 1.25rem;
|
|
font-size: .75rem;
|
|
font-family: monospace;
|
|
color: var(--vp-c-text-2);
|
|
|
|
li {
|
|
margin-bottom: .25rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|