feat: basic ui

pages/index.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+const getPopularInquiriesByRole = () => {
+  return [
+    {
+      label: "新生入学",
+      inquiries: [
+        {
+          question: "新生报到时间",
+        },
+        {
+          question: "新生报到流程",
+        },
+        {
+          question: "如何到达学院",
+        },
+        {
+          question: "如何办理户口迁移",
+        },
+        {
+          question: "学院 VPN 使用方法",
+        },
+      ],
+    },
+    {
+      label: "学校概况",
+    },
+    {
+      label: "学术学习",
+    },
+    {
+      label: "生活服务",
+    },
+    {
+      label: "就业辅导",
+    },
+  ];
+};
+
+const inquiries = computed(() => getPopularInquiriesByRole());
+</script>
+
+<template>
+  <div>
+    <div class="p-4 h-full flex flex-col gap-4 mb-20">
+      <PopularInquiries :inquiries-list="inquiries" />
+
+      <ChatUserMessage message="眩生花是什么？" />
+      <ChatBotMessage
+        name="AI 辅导员"
+        message="眩生花是一家科技公司，全称为重庆眩生花科技有限公司。它专注于新一代人工智能技术的研发与应用，包括AI大模型、AIGC（生成式人工智能）、AI Agent、AI-First以及AGI（通用人工智能）等领域的创新解决方案。公司的目标是通过这些先进技术为高等教育、职业教育和基础教育等行业提供变革性的服务，助力教育生态的重塑。
+
+眩生花秉承“以人为本、抱诚守真、求实创新”的价值观，致力于成为AI教育时代的变革者，推动教育方式的革新与进步。"
+      />
+      <ChatUserMessage message="这是前端测试示例消息" />
+      <ChatBotMessage name="AI 辅导员" />
+    </div>
+    <div
+      class="fixed inset-x-0 bottom-0 p-4 bg-white/90 rounded-t-2xl shadow-2xl dark:bg-neutral-800/90 backdrop-blur-2xl"
+    >
+      <img
+        src="~/assets/image/pattern/ai_glow.png"
+        class="absolute top-0 inset-x-0 opacity-50"
+      />
+      <div class="w-full flex justify-between items-center gap-2">
+        <UInput placeholder="请输入问题" class="flex-1" size="xl" />
+        <UButton
+          color="primary"
+          variant="solid"
+          size="xl"
+          trailing-icon="tabler:send-2"
+          >提问</UButton
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>