feat: basic ui
This commit is contained in:
38
components/ChatBotMessage.vue
Normal file
38
components/ChatBotMessage.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps({
|
||||
message: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: "AI 智慧校园",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "tabler:robot-face",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex gap-1.5 items-center">
|
||||
<div
|
||||
class="w-7 h-7 rounded-lg border border-neutral-200 bg-white shadow-sm flex justify-center items-center dark:bg-neutral-700 dark:border-neutral-600"
|
||||
>
|
||||
<UIcon :name="icon" />
|
||||
</div>
|
||||
<span class="text-sm font-medium">{{ name }}</span>
|
||||
</div>
|
||||
<div class="rounded-lg bg-white/50 p-2 text-sm dark:bg-neutral-800/50">
|
||||
<span v-if="message">{{ message }}</span>
|
||||
<span v-else class="flex items-center gap-1.5">
|
||||
<UIcon name="svg-spinners:3-dots-scale" class="text-lg -mt-0.5" />
|
||||
<p class="text-xs">思考中</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
17
components/ChatUserMessage.vue
Normal file
17
components/ChatUserMessage.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
message: String,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col items-end gap-2">
|
||||
<div
|
||||
class="rounded-2xl rounded-br-none bg-primary-400 px-3 py-2 text-sm w-fit text-white font-medium dark:bg-primary-500"
|
||||
>
|
||||
{{ message }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
51
components/PopularInquiries.vue
Normal file
51
components/PopularInquiries.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps({
|
||||
inquiriesList: {
|
||||
type: Array as PropType<
|
||||
{ label: string; inquiries?: { question: string }[] }[]
|
||||
>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const activeTab = ref("0");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="props.inquiriesList.length">
|
||||
<div
|
||||
class="rounded-lg bg-white/50 shadow border border-neutral-50/50 dark:border-neutral-700 dark:bg-neutral-800/50 overflow-hidden"
|
||||
>
|
||||
<div>
|
||||
<UTabs
|
||||
v-model="activeTab"
|
||||
:content="false"
|
||||
:items="props.inquiriesList"
|
||||
variant="link"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="props.inquiriesList[Number(activeTab)].inquiries"
|
||||
class="py-1.5 px-1.5 flex flex-col gap-1 max-h-36 overflow-y-auto"
|
||||
>
|
||||
<UButton
|
||||
v-for="inquiry in props.inquiriesList[Number(activeTab)].inquiries"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
trailing-icon="tabler-arrow-right"
|
||||
size="sm"
|
||||
block
|
||||
:key="inquiry.question"
|
||||
>
|
||||
{{ inquiry.question }}
|
||||
</UButton>
|
||||
</div>
|
||||
<div v-else class="p-4 text-sm font-medium text-center text-neutral-500">
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
Reference in New Issue
Block a user