ui: chat sidebar ui

pages/aigc/chat.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-useHead({
-  title: '聊天 | XSH AI'
-})
-</script>
-
-<template>
-  ChatGPT
-</template>
-
-<style scoped>
-
-</style>

pages/aigc/chat/index.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import ChatItem from "~/components/aigc/chat/ChatItem.vue";
+import type {ChatSession, ChatSessionId} from "~/components/aigc/chat";
+
+useHead({
+  title: '聊天 | XSH AI'
+})
+
+const dayjs = useDayjs()
+
+const sessions = ref<ChatSession[]>([
+  {
+    id: Math.random().toString(36).slice(2),
+    subject: '测试聊天',
+    messages: [
+      {
+        id: Math.random().toString(36).slice(2),
+        role: 'user',
+        content: '你好',
+        create_at: dayjs().unix(),
+      }
+    ],
+    create_at: dayjs().unix(),
+  },
+  {
+    id: Math.random().toString(36).slice(2),
+    subject: '测试聊天2',
+    messages: [],
+    create_at: dayjs().unix(),
+  },
+])
+const currentSessionId = ref<ChatSessionId | null>(null)
+
+onMounted(() => {
+  if (sessions.value.length > 0) {
+    currentSessionId.value = sessions.value[0].id
+  }
+})
+</script>
+
+<template>
+  <div class="w-full flex relative">
+    <div class="h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 flex flex-col w-[300px] shadow-sidebar">
+      <div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
+        <!-- list -->
+        <div class="flex flex-col gap-3">
+          <!-- ClientOnly avoids hydrate exception -->
+          <ClientOnly>
+            <ChatItem
+                v-for="(session, i) in sessions"
+                :chat-session="session" :key="i"
+                :active="session.id === currentSessionId"
+                @click="currentSessionId = session.id"
+                @remove="sessions.splice(sessions.findIndex(s => s.id === session.id), 1)"
+            />
+          </ClientOnly>
+        </div>
+      </div>
+      <div class="flex justify-between items-center">
+        <div></div>
+        <div>
+          <UButton color="white" variant="solid" icon="i-tabler-message-circle-plus">
+            新建聊天
+          </UButton>
+        </div>
+      </div>
+    </div>
+    <div>
+      content
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

pages/aigc/drawing/index.vue

@@ -306,7 +306,7 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
           class="w-[1px] h-full bg-neutral-300 dark:bg-neutral-700 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 group-hover:w-[3px] transition-all group-hover:delay-500 translate-x-1"></span>
       </div>
       <div
-        class="absolute bottom-28 -right-12 w-12 h-12 z-10 bg-neutral-100 dark:bg-neutral-800 rounded-r-lg shadow-lg flex md:hidden justify-center items-center">
+        class="absolute bottom-28 -right-12 w-12 h-12 z-10 bg-neutral-100 dark:bg-neutral-900 rounded-r-lg shadow-lg flex md:hidden justify-center items-center">
         <UButton color="black" icon="i-tabler-brush" size="lg" square @click="showSidebar = !showSidebar"></UButton>
       </div>
       <div class="h-full flex flex-col overflow-y-auto">
@@ -315,7 +315,7 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
             <OptionBlock comment="Prompts" icon="i-tabler-article" label="提示词">
               <UFormGroup name="prompt">
                 <UTextarea v-model="defaultFormState.prompt" :rows="2" autoresize
-                           placeholder="请输入英文提示词，每个提示词之间用英文逗号隔开" resize/>
+                           placeholder="请输入提示词，每个提示词之间用英文逗号隔开" resize/>
               </UFormGroup>
             </OptionBlock>
             <OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">