feat: basic ui

This commit is contained in:
2025-03-14 21:45:00 +08:00
parent 096d8aa231
commit e3e1a28462
15 changed files with 1585 additions and 51 deletions

View 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>

View 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>

View 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>