add vitepress docs
This commit is contained in:
@@ -0,0 +1,91 @@
|
||||
<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"
|
||||
/>
|
||||
|
||||
<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()");
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user