refactor(deps): migrate to nuxt v4

app/pages/aigc/chat/index.vue

@@ -0,0 +1,554 @@
+<script lang="ts" setup>
+import ChatItem from '~/components/aigc/chat/ChatItem.vue'
+import Message from '~/components/aigc/chat/Message.vue'
+import {
+  type Assistant,
+  type ChatMessage,
+  type ChatMessageId,
+  type ChatSession,
+  type ChatSessionId,
+  llmModels,
+  type ModelTag,
+} from '~/typings/llm'
+import { useHistory } from '~/composables/useHistory'
+import { uuidv4 } from '@uniiem/uuid'
+import { useLLM } from '~/composables/useLLM'
+import { trimObject } from '@uniiem/object-trim'
+import ModalAuthentication from '~/components/ModalAuthentication.vue'
+import NewSessionScreen from '~/components/aigc/chat/NewSessionScreen.vue'
+
+useSeoMeta({
+  title: '聊天',
+})
+
+const dayjs = useDayjs()
+const toast = useToast()
+const modal = useModal()
+const loginState = useLoginState()
+const historyStore = useHistory()
+const { chatSessions } = storeToRefs(historyStore)
+const { setChatSessions } = historyStore
+
+const currentSessionId = ref<ChatSessionId | null>(null)
+const messagesWrapperRef = ref<HTMLDivElement | null>(null)
+
+const showSidebar = ref(false)
+const user_input = ref('')
+const responding = ref(false)
+const currentModel = ref<ModelTag>('spark3_5')
+const currentAssistant = computed<Assistant | null>(
+  () => getSessionCopyById(currentSessionId.value || '')?.assistant || null
+)
+const modals = reactive({
+  modelSelect: false,
+  assistantSelect: false,
+  newSessionScreen: false,
+})
+
+/**
+ * 获取指定 ID 的会话数据
+ * @param chatSessionId
+ */
+const getSessionCopyById = (
+  chatSessionId: ChatSessionId
+): ChatSession | undefined =>
+  chatSessions.value.find((s) => s.id === chatSessionId)
+/**
+ * 切换当前会话
+ * @param chatSessionId 指定会话 ID，不传则切换到列表中第一个会话
+ */
+const selectCurrentSessionId = (chatSessionId?: ChatSessionId) => {
+  if (chatSessions.value.length > 0) {
+    if (chatSessionId) {
+      // 切换到指定 ID
+      // 保存当前输入并清空输入框
+      setChatSessions(
+        chatSessions.value.map((s) =>
+          s.id === currentSessionId.value
+            ? {
+                ...s,
+                last_input: user_input.value,
+              }
+            : s
+        )
+      )
+      user_input.value = ''
+      // 切换到指定 ID 会话
+      currentSessionId.value = chatSessionId
+      // 恢复输入
+      user_input.value = getSessionCopyById(chatSessionId)?.last_input || ''
+      // 清除已恢复的输入
+      setChatSessions(
+        chatSessions.value.map((s) =>
+          s.id === chatSessionId
+            ? {
+                ...s,
+                last_input: '',
+              }
+            : s
+        )
+      )
+    } else {
+      // 切换到第一个会话
+      currentSessionId.value = chatSessions.value[0].id
+    }
+  } else {
+    handleClickCreateSession()
+  }
+  nextTick(() => {
+    showSidebar.value = false
+    modals.newSessionScreen = false
+    scrollToMessageListBottom()
+  })
+}
+
+/**
+ * 创建新会话处理函数
+ * @param assistant 指定助手，不传或空值则不指定助手
+ */
+const createSession = (assistant: Assistant | null) => {
+  // 生成一个新的会话 ID
+  const sessionId = uuidv4()
+  // 新会话数据
+  const newChat = !!assistant
+    ? {
+        id: sessionId,
+        subject: '新对话',
+        messages: [],
+        create_at: dayjs().unix(),
+        assistant,
+      }
+    : {
+        id: sessionId,
+        subject: '新对话',
+        messages: [],
+        create_at: dayjs().unix(),
+      }
+  // 插入新会话数据
+  setChatSessions([newChat, ...chatSessions.value])
+  // 切换到新的会话
+  selectCurrentSessionId(sessionId)
+  // 关闭新建会话屏幕
+  modals.newSessionScreen = false
+  nextTick(() => {
+    if (!!currentAssistant.value) {
+      insetMessage({
+        id: uuidv4(),
+        role: 'system',
+        content: currentAssistant.value?.role || '',
+        preset: true,
+      })
+      insetMessage({
+        id: uuidv4(),
+        role: 'user',
+        content: `${currentAssistant.value?.target}，${currentAssistant.value?.demand}`,
+        preset: true,
+      })
+      insetMessage({
+        id: uuidv4(),
+        role: 'assistant',
+        content: currentAssistant.value?.input_tpl || '',
+        preset: true,
+      })
+    } else {
+      insetMessage({
+        id: uuidv4(),
+        role: 'assistant',
+        content: '你好，有什么可以帮助你的吗？',
+        preset: true,
+      })
+    }
+  })
+}
+
+/**
+ * 处理点击新建会话按钮事件
+ */
+const handleClickCreateSession = () => {
+  showSidebar.value = false
+  modals.newSessionScreen = true
+}
+
+/**
+ * 处理发送消息操作
+ * @param event
+ */
+const handleClickSend = (event: any) => {
+  if (!loginState.is_logged_in) {
+    modal.open(ModalAuthentication)
+    return
+  }
+  if (event.ctrlKey) {
+    return
+  }
+  if (responding.value) return
+  if (!user_input.value) return
+  if (!currentSessionId.value) {
+    toast.add({
+      title: '发送失败',
+      description: '请先选择一个会话',
+      color: 'red',
+      icon: 'i-tabler-circle-x',
+    })
+    return
+  }
+  // 插入用户消息
+  insetMessage({
+    id: uuidv4(),
+    role: 'user',
+    content: user_input.value,
+    create_at: dayjs().unix(),
+  })
+  user_input.value = ''
+  // 进入响应中状态
+  responding.value = true
+  // 插入空助手消息(加载状态)
+  const assistantReplyId = insetMessage({
+    id: uuidv4(),
+    role: 'assistant',
+    content: '',
+  })
+  // 请求模型回复
+  const trimmedMessages = trimObject(getMessages(), 2000, {
+    keys: ['content'],
+  })
+  useLLM(trimmedMessages, {
+    modelTag: currentModel.value,
+  })
+    .then((reply) => {
+      modifyMessageContent(assistantReplyId, reply)
+    })
+    .catch((err) => {
+      modifyMessageContent(assistantReplyId, err, true)
+    })
+    .finally(() => {
+      responding.value = false
+    })
+}
+
+const scrollToMessageListBottom = () => {
+  nextTick(() => {
+    messagesWrapperRef.value?.scrollTo({
+      top: messagesWrapperRef.value.scrollHeight,
+      behavior: 'smooth',
+    })
+  })
+}
+
+const insetMessage = (message: ChatMessage): ChatMessageId => {
+  setChatSessions(
+    chatSessions.value.map((s) =>
+      s.id === currentSessionId.value
+        ? {
+            ...s,
+            messages: [...s.messages, message],
+          }
+        : s
+    )
+  )
+  scrollToMessageListBottom()
+  return message.id
+}
+
+const getMessages = () =>
+  getSessionCopyById(currentSessionId.value!)?.messages || []
+
+const modifyMessageContent = (
+  messageId: ChatMessageId,
+  content: string,
+  interrupted: boolean = false,
+  updateTime: boolean = true
+) => {
+  setChatSessions(
+    chatSessions.value.map((s) =>
+      s.id === currentSessionId.value
+        ? {
+            ...s,
+            messages: s.messages.map((m) =>
+              m.id === messageId
+                ? {
+                    ...m,
+                    content,
+                    interrupted,
+                    create_at: updateTime ? dayjs().unix() : m.create_at,
+                  }
+                : m
+            ),
+          }
+        : s
+    )
+  )
+  scrollToMessageListBottom()
+}
+
+onMounted(() => {
+  // 切换到第一个会话, 没有会话会自动创建
+  selectCurrentSessionId()
+})
+</script>
+
+<template>
+  <div class="w-full flex relative">
+    <div
+      class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 flex flex-col h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 w-full md:w-[300px] shadow-sidebar border-r border-transparent dark:border-neutral-700 transition-all duration-300 ease-out"
+      :class="{ 'translate-x-0': showSidebar }"
+    >
+      <div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
+        <!-- list -->
+        <div class="flex flex-col gap-3 relative">
+          <!-- ClientOnly avoids hydrate exception -->
+          <ClientOnly>
+            <TransitionGroup name="chat-item">
+              <div v-if="chatSessions.length === 0">
+                <div
+                  class="text-center text-neutral-400 dark:text-neutral-500 py-4 flex flex-col items-center gap-2"
+                >
+                  <Icon
+                    name="i-tabler-messages"
+                    class="text-2xl"
+                  />
+                  <span>没有会话</span>
+                </div>
+              </div>
+              <ChatItem
+                v-for="session in chatSessions"
+                :chat-session="session"
+                :key="session.id"
+                :active="session.id === currentSessionId"
+                @click="selectCurrentSessionId(session.id)"
+                @remove="
+                  () => {
+                    chatSessions.splice(
+                      chatSessions.findIndex((s) => s.id === session.id),
+                      1
+                    )
+                    session.id === currentSessionId && selectCurrentSessionId()
+                  }
+                "
+              />
+            </TransitionGroup>
+          </ClientOnly>
+        </div>
+      </div>
+      <div class="pt-4 flex justify-between items-center">
+        <div></div>
+        <div>
+          <UButton
+            color="white"
+            variant="solid"
+            icon="i-tabler-message-circle-plus"
+            @click="handleClickCreateSession"
+          >
+            新建聊天
+          </UButton>
+        </div>
+      </div>
+    </div>
+    <div class="h-[calc(100vh-4rem)] flex-1 bg-white dark:bg-neutral-900">
+      <Transition
+        name="message"
+        mode="out-in"
+      >
+        <div
+          v-if="!loginState.is_logged_in"
+          class="w-full h-full"
+        >
+          <div
+            class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900"
+          >
+            <Icon
+              name="i-tabler-user-circle"
+              class="text-7xl text-neutral-300 dark:text-neutral-700"
+            />
+            <p class="text-sm text-neutral-500 dark:text-neutral-400">
+              请登录后使用
+            </p>
+            <UButton
+              class="mt-2 font-bold"
+              color="black"
+              variant="solid"
+              size="xs"
+              @click="modal.open(ModalAuthentication)"
+            >
+              登录
+            </UButton>
+          </div>
+        </div>
+        <NewSessionScreen
+          v-else-if="
+            modals.newSessionScreen ||
+            getSessionCopyById(currentSessionId!) === undefined
+          "
+          :non-back="!getSessionCopyById(currentSessionId!)"
+          @select="createSession"
+          @cancel="modals.newSessionScreen = false"
+        />
+        <div
+          v-else
+          class="w-full h-full flex flex-col"
+        >
+          <div
+            class="w-full p-4 bg-neutral-50 dark:bg-neutral-800/50 border-b dark:border-neutral-700/50 flex items-center gap-2"
+          >
+            <UButton
+              class="md:hidden"
+              color="black"
+              variant="ghost"
+              icon="i-tabler-menu-2"
+              @click="showSidebar = !showSidebar"
+            ></UButton>
+            <h1 class="font-medium">
+              {{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}
+            </h1>
+          </div>
+          <div
+            ref="messagesWrapperRef"
+            class="flex-1 flex flex-col overflow-auto overflow-x-hidden"
+          >
+            <div class="flex flex-col gap-8 px-4 py-8">
+              <TransitionGroup name="message">
+                <Message
+                  v-for="message in getMessages() || []"
+                  :message="message"
+                  :key="message.id"
+                />
+              </TransitionGroup>
+            </div>
+          </div>
+          <ClientOnly>
+            <div
+              class="w-full p-4 pt-2 flex flex-col gap-2 bg-neutral-50 dark:bg-neutral-800/50 border-t dark:border-neutral-700/50"
+            >
+              <div
+                class="flex items-center gap-2 overflow-auto overflow-y-hidden"
+              >
+                <button
+                  class="chat-option-btn"
+                  @click="modals.modelSelect = true"
+                >
+                  <Icon name="tabler:box" />
+                  <span class="text-xs">
+                    {{
+                      llmModels
+                        .find((m) => m.tag === currentModel)
+                        ?.name.toUpperCase() || '模型'
+                    }}
+                  </span>
+                </button>
+                <button
+                  v-if="currentAssistant?.tpl_name"
+                  class="chat-option-btn"
+                >
+                  <Icon name="tabler:robot-face" />
+                  <span class="text-xs">
+                    {{ currentAssistant.tpl_name }}
+                  </span>
+                </button>
+              </div>
+              <div class="relative">
+                <UTextarea
+                  v-model="user_input"
+                  size="lg"
+                  autoresize
+                  :rows="5"
+                  :maxrows="12"
+                  class="font-sans"
+                  placeholder="Enter 发送, Ctrl + Enter 换行"
+                  @keydown.ctrl.enter="user_input += '\n'"
+                  @keydown.enter.prevent="handleClickSend"
+                />
+                <UButton
+                  color="black"
+                  variant="solid"
+                  icon="i-tabler-send-2"
+                  class="absolute bottom-2.5 right-3"
+                  @click.stop="handleClickSend"
+                >
+                  发送
+                </UButton>
+              </div>
+            </div>
+          </ClientOnly>
+        </div>
+      </Transition>
+    </div>
+
+    <!-- Modals -->
+    <UModal v-model="modals.modelSelect">
+      <UCard>
+        <template #header>
+          <h3
+            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+          >
+            选择大语言模型
+          </h3>
+        </template>
+        <div class="grid grid-cols-3 gap-4">
+          <div
+            v-for="(llm, index) in llmModels"
+            :key="index"
+            @click="currentModel = llm.tag"
+            class="flex flex-col gap-2 justify-center items-center w-full aspect-[1/1] border-2 rounded-xl cursor-pointer transition duration-150 select-none"
+            :class="
+              llm.tag === currentModel
+                ? 'border-primary shadow-xl bg-primary text-white'
+                : 'dark:border-neutral-800 bg-white dark:bg-black shadow-card'
+            "
+          >
+            <Icon
+              v-if="llm?.icon"
+              :name="llm.icon"
+              class="text-4xl opacity-80"
+            />
+            <div class="flex flex-col gap-0.5 items-center">
+              <h1 class="font-bold drop-shadow opacity-90">
+                {{ llm.name || 'unknown' }}
+              </h1>
+              <p class="text-xs opacity-60">{{ llm.description }}</p>
+            </div>
+          </div>
+        </div>
+        <template #footer>
+          <div
+            class="flex justify-end items-center"
+            @click="modals.modelSelect = false"
+          >
+            <UButton>确定</UButton>
+          </div>
+        </template>
+      </UCard>
+    </UModal>
+  </div>
+</template>
+
+<!--suppress CssUnusedSymbol -->
+<style scoped>
+.message-enter-active {
+  @apply transition duration-300;
+}
+
+.message-enter-from {
+  @apply translate-y-4 opacity-0;
+}
+
+.chat-item-move,
+.chat-item-enter-active,
+.chat-item-leave-active {
+  @apply transition-all duration-300;
+}
+
+.chat-item-enter-from,
+.chat-item-leave-to {
+  @apply opacity-0 scale-90;
+}
+
+.chat-item-leave-active {
+  @apply absolute inset-x-0;
+}
+
+.chat-option-btn {
+  @apply text-lg px-2 py-1.5 flex gap-1 justify-center items-center rounded-lg;
+  @apply bg-white border border-neutral-300 shadow-sm hover:shadow-card;
+  @apply dark:bg-neutral-800 dark:border-neutral-600;
+}
+</style>

app/pages/aigc/draw/index.vue

@@ -0,0 +1,557 @@
+<script lang="ts" setup>
+import OptionBlock from '~/components/aigc/drawing/OptionBlock.vue'
+import ResultBlock from '~/components/aigc/drawing/ResultBlock.vue'
+import { useLoginState } from '~/composables/useLoginState'
+import ModalAuthentication from '~/components/ModalAuthentication.vue'
+import { type InferType, number, object, string } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
+import RatioSelector from '~/components/aigc/RatioSelector.vue'
+import { useFetchWrapped } from '~/composables/useFetchWrapped'
+import type { ResultBlockMeta } from '~/components/aigc/drawing'
+import { useHistory } from '~/composables/useHistory'
+import { del, set } from 'idb-keyval'
+import ReferenceFigureSelector from '~/components/aigc/ReferenceFigureSelector.vue'
+
+useSeoMeta({
+  title: '绘画',
+})
+
+const toast = useToast()
+const modal = useModal()
+const dayjs = useDayjs()
+const history = useHistory()
+const loginState = useLoginState()
+
+const leftSection = ref<HTMLElement | null>(null)
+const leftHandler = ref<HTMLElement | null>(null)
+const showSidebar = ref(false)
+
+const generating = ref(false)
+
+const handle_stick_mousedown = (
+  e: MouseEvent,
+  min: number = 240,
+  max: number = 400
+) => {
+  const handler = leftHandler.value
+  if (handler) {
+    const startX = e.clientX
+    const startWidth = handler.parentElement?.offsetWidth || 0
+    const handle_mousemove = (e: MouseEvent) => {
+      let newWidth = startWidth + e.clientX - startX
+      if (newWidth < min || newWidth > max) {
+        newWidth = Math.min(Math.max(newWidth, min), max)
+      }
+      handler.parentElement!.style.width = `${newWidth}px`
+    }
+    const handle_mouseup = () => {
+      leftSection.value?.classList.add('transition-all')
+      leftHandler.value?.lastElementChild?.classList.remove(
+        'bg-indigo-300',
+        'dark:bg-indigo-700',
+        'w-[3px]'
+      )
+      window.removeEventListener('mousemove', handle_mousemove)
+      window.removeEventListener('mouseup', handle_mouseup)
+    }
+    leftSection.value?.classList.remove('transition-all')
+    leftHandler.value?.lastElementChild?.classList.add(
+      'bg-indigo-300',
+      'dark:bg-indigo-700',
+      'w-[3px]'
+    )
+    window.addEventListener('mousemove', handle_mousemove)
+    window.addEventListener('mouseup', handle_mouseup)
+  }
+}
+
+const defaultRatios = [
+  {
+    ratio: '1:1',
+    value: '768:768',
+  },
+  {
+    ratio: '4:3',
+    value: '1024:768',
+  },
+  {
+    ratio: '3:4',
+    value: '768:1024',
+  },
+]
+
+interface StyleItem {
+  label: string
+  value: number
+  avatar?: { src: string }
+}
+
+const defaultStyles: StyleItem[] = [
+  {
+    label: '通用写实风格',
+    value: 401,
+  },
+  {
+    label: '日系动漫',
+    value: 201,
+  },
+  {
+    label: '科幻风格',
+    value: 114,
+  },
+  {
+    label: '怪兽风格',
+    value: 202,
+  },
+  {
+    label: '唯美古风',
+    value: 203,
+  },
+  {
+    label: '复古动漫',
+    value: 204,
+  },
+  {
+    label: '游戏卡通手绘',
+    value: 301,
+  },
+  {
+    label: '水墨画',
+    value: 101,
+  },
+  {
+    label: '概念艺术',
+    value: 102,
+  },
+  {
+    label: '水彩画',
+    value: 104,
+  },
+  {
+    label: '像素画',
+    value: 105,
+  },
+  {
+    label: '厚涂风格',
+    value: 106,
+  },
+  {
+    label: '插图',
+    value: 107,
+  },
+  {
+    label: '剪纸风格',
+    value: 108,
+  },
+  {
+    label: '印象派',
+    value: 119,
+  },
+  {
+    label: '印象派（莫奈）',
+    value: 109,
+  },
+  {
+    label: '油画',
+    value: 103,
+  },
+  {
+    label: '油画（梵高）',
+    value: 118,
+  },
+  {
+    label: '古典肖像画',
+    value: 111,
+  },
+  {
+    label: '黑白素描画',
+    value: 112,
+  },
+  {
+    label: '赛博朋克',
+    value: 113,
+  },
+  {
+    label: '暗黑风格',
+    value: 115,
+  },
+  {
+    label: '蒸汽波',
+    value: 117,
+  },
+  {
+    label: '2.5D',
+    value: 110,
+  },
+  {
+    label: '3D',
+    value: 116,
+  },
+]
+const img2imgStyles: StyleItem[] = [
+  {
+    label: '水彩画',
+    value: 106,
+  },
+  {
+    label: '2.5D',
+    value: 110,
+  },
+  {
+    label: '日系动漫',
+    value: 201,
+  },
+  {
+    label: '美系动漫',
+    value: 202,
+  },
+  {
+    label: '唯美古风',
+    value: 203,
+  },
+]
+
+const defaultFormSchema = object({
+  prompt: string().required('请输入提示词'),
+  negative_prompt: string(),
+  resolution: string().required('请选择分辨率'),
+  styles: object<StyleItem>({
+    label: string(),
+    value: number(),
+  }).required('请选择风格'),
+  file: string().nullable(),
+})
+
+type DefaultFormSchema = InferType<typeof defaultFormSchema>
+
+const defaultFormState = reactive({
+  prompt: '',
+  negative_prompt: '',
+  resolution: '1024:768',
+  styles: defaultStyles.find((item) => item.value === 401),
+  file: null,
+})
+watch(
+  () => defaultFormState.file,
+  (newVal) => {
+    if (newVal) {
+      defaultFormState.styles = img2imgStyles[0]
+    } else {
+      defaultFormState.styles = defaultStyles.find((item) => item.value === 401)
+    }
+  }
+)
+
+const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
+  if (!loginState.is_logged_in) {
+    modal.open(ModalAuthentication)
+    return
+  }
+  generating.value = true
+  const styleItem = event.data.styles as StyleItem
+  if (!event.data.file) delete event.data.file
+  // generate a uuid
+  const fid = Math.random().toString(36).substring(2)
+  const meta: ResultBlockMeta = {
+    cost: '1000',
+    modal: '混元大模型',
+    style: styleItem.label,
+    ratio: event.data.resolution,
+    datetime: dayjs().unix(),
+    type: event.data.file ? '智能图生图' : '智能文生图',
+  }
+  history.text2img.unshift({
+    fid,
+    meta,
+    prompt: event.data.prompt,
+  })
+  useFetchWrapped<
+    (HunYuan.Text2Img.req | HunYuan.Img2Img.req) & AuthedRequest,
+    BaseResponse<HunYuan.resp>
+  >(
+    event.data.file
+      ? 'App.Assistant_HunYuan.TenImgToImg'
+      : 'App.Assistant_HunYuan.TenTextToImg',
+    {
+      token: loginState.token as string,
+      user_id: loginState.user.id,
+      device_id: 'web',
+      ...event.data,
+      styles: styleItem.value,
+    }
+  )
+    .then((res) => {
+      if (res.ret !== 200) {
+        toast.add({
+          title: '生成失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        history.text2img = history.text2img.filter((item) => item.fid !== fid)
+        return
+      }
+      history.text2img = history.text2img.map((item) => {
+        if (item.fid === fid) {
+          set(`${item.fid}`, [
+            `data:image/png;base64,${res.data.request_image}`,
+          ])
+          item.meta = {
+            ...item.meta,
+            id: res.data.data_id as string,
+          }
+        }
+        return item
+      })
+    })
+    .catch((err) => {
+      toast.add({
+        title: '生成失败',
+        description: err.msg || '网络错误',
+        color: 'red',
+        icon: 'i-tabler-circle-x',
+      })
+    })
+    .finally(() => {
+      generating.value = false
+    })
+}
+</script>
+
+<template>
+  <div class="w-full flex relative">
+    <div
+      ref="leftSection"
+      :class="{ 'translate-x-0': showSidebar }"
+      class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 md:block h-[calc(100vh-4rem)] bg-neutral-200 dark:bg-neutral-800 transition-all"
+      style="width: 320px"
+    >
+      <div
+        ref="leftHandler"
+        class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
+        @dblclick="leftSection?.style.setProperty('width', '320px')"
+        @mousedown.prevent="handle_stick_mousedown"
+      >
+        <span
+          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-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">
+        <UForm
+          :schema="defaultFormSchema"
+          :state="defaultFormState"
+          @submit="onDefaultFormSubmit"
+        >
+          <div class="flex flex-col gap-2 p-4 pb-28">
+            <OptionBlock
+              comment="Prompts"
+              icon="i-tabler-article"
+              label="提示词"
+            >
+              <UFormGroup name="prompt">
+                <UTextarea
+                  v-model="defaultFormState.prompt"
+                  :rows="2"
+                  autoresize
+                  placeholder="请输入提示词，每个提示词之间用英文逗号隔开"
+                  resize
+                />
+              </UFormGroup>
+            </OptionBlock>
+            <OptionBlock
+              comment="Negative Prompts"
+              icon="i-tabler-article-off"
+              label="负面提示词"
+            >
+              <UFormGroup name="negative_prompt">
+                <UTextarea
+                  v-model="defaultFormState.negative_prompt"
+                  :rows="2"
+                  autoresize
+                  placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
+                  resize
+                />
+              </UFormGroup>
+            </OptionBlock>
+            <OptionBlock
+              icon="i-tabler-library-photo"
+              label="参考图片"
+            >
+              <UFormGroup name="input_image">
+                <ReferenceFigureSelector
+                  :value="defaultFormState.file"
+                  text="选择参考图片"
+                  text-on-select="已选择参考图"
+                  @update="
+                    (file) => {
+                      defaultFormState.file = file
+                    }
+                  "
+                />
+              </UFormGroup>
+            </OptionBlock>
+            <OptionBlock
+              icon="i-tabler-photo-hexagon"
+              label="图片风格"
+            >
+              <UFormGroup name="styles">
+                <USelectMenu
+                  v-model="defaultFormState.styles"
+                  :options="
+                    defaultFormState.file ? img2imgStyles : defaultStyles
+                  "
+                ></USelectMenu>
+              </UFormGroup>
+            </OptionBlock>
+            <OptionBlock
+              icon="i-tabler-article-off"
+              label="图片比例"
+            >
+              <UFormGroup name="resolution">
+                <RatioSelector
+                  v-model="defaultFormState.resolution"
+                  :ratios="defaultRatios"
+                />
+              </UFormGroup>
+            </OptionBlock>
+          </div>
+          <div
+            class="absolute bottom-0 inset-x-0 flex flex-col items-center gap-2 bg-neutral-200 dark:bg-neutral-800 p-4 border-t border-neutral-400 dark:border-neutral-700"
+          >
+            <UButton
+              :loading="generating"
+              block
+              class="font-bold"
+              color="indigo"
+              size="lg"
+              type="submit"
+            >
+              {{ generating ? '生成中' : '生成' }}
+            </UButton>
+            <p class="text-xs text-neutral-400 dark:text-neutral-500 font-bold">
+              生成即代表您同意
+              <a
+                class="underline underline-offset-2"
+                href="#"
+                target="_blank"
+              >
+                用户许可协议
+              </a>
+            </p>
+          </div>
+        </UForm>
+      </div>
+    </div>
+    <ClientOnly>
+      <div
+        class="flex-1 h-screen flex flex-col gap-4 bg-neutral-100 dark:bg-neutral-900 p-4 pb-20 overflow-y-auto"
+      >
+        <div
+          v-if="!loginState.is_logged_in"
+          class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900"
+        >
+          <Icon
+            class="text-7xl text-neutral-300 dark:text-neutral-700"
+            name="i-tabler-user-circle"
+          />
+          <p class="text-sm text-neutral-500 dark:text-neutral-400">
+            请登录后使用
+          </p>
+          <UButton
+            class="mt-2 font-bold"
+            color="black"
+            size="xs"
+            variant="solid"
+            @click="modal.open(ModalAuthentication)"
+          >
+            登录
+          </UButton>
+        </div>
+        <div
+          v-else-if="history.text2img.length === 0"
+          class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900"
+        >
+          <Icon
+            class="text-7xl text-neutral-300 dark:text-neutral-700"
+            name="i-tabler-photo-hexagon"
+          />
+          <p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
+        </div>
+        <ResultBlock
+          v-for="(result, k) in history.text2img"
+          v-else
+          :key="result.fid"
+          :fid="result.fid"
+          :meta="result.meta"
+          :prompt="result.prompt"
+          @use-reference="
+            (file) => {
+              defaultFormState.file = file
+            }
+          "
+        >
+          <template #header-right>
+            <UPopover overlay>
+              <UButton
+                color="black"
+                icon="i-tabler-trash"
+                size="xs"
+                variant="ghost"
+              ></UButton>
+              <template #panel="{ close }">
+                <div class="p-4 flex flex-col gap-4">
+                  <h2 class="text-sm">删除后无法恢复，确定删除？</h2>
+                  <div class="flex items-center justify-end gap-2">
+                    <UButton
+                      class="font-bold"
+                      color="gray"
+                      size="xs"
+                      @click="close"
+                    >
+                      取消
+                    </UButton>
+                    <UButton
+                      class="font-bold"
+                      color="red"
+                      size="xs"
+                      @click="
+                        () => {
+                          history.text2img.splice(k, 1)
+                          del(result.fid)
+                          close()
+                        }
+                      "
+                    >
+                      仍然删除
+                    </UButton>
+                  </div>
+                </div>
+              </template>
+            </UPopover>
+          </template>
+        </ResultBlock>
+        <div
+          class="flex justify-center items-center gap-1 text-neutral-400 dark:text-neutral-600"
+        >
+          <UIcon name="i-tabler-info-triangle" />
+          <p class="text-xs font-bold">
+            所有图片均为 AI 生成，服务器不会保存任何图像，数据仅保存在浏览器本地
+          </p>
+        </div>
+      </div>
+    </ClientOnly>
+  </div>
+</template>
+
+<style scoped></style>

app/pages/aigc/navigation.vue

@@ -0,0 +1,292 @@
+<script lang="ts" setup>
+interface ToolCategory {
+  category: string
+  icon: string
+  links: ToolLink[]
+}
+
+interface ToolLink {
+  id: string
+  label: string
+  description: string
+  url: string
+  logo?: string
+  tags?: string[]
+}
+
+const toolCats = ref<ToolCategory[]>([
+  {
+    category: 'LLM 对话',
+    icon: 'tabler:message-circle',
+    links: [
+      {
+        id: 'deepseek',
+        label: 'DeepSeek',
+        description:
+          '深度求索人工智能基础技术研究有限公司(简称“深度求索”或“DeepSeek”)，成立于2023年，是一家专注于实现AGI的中国公司。',
+        url: 'https://chat.deepseek.com/',
+      },
+      {
+        id: 'doubao',
+        label: '豆包',
+        description:
+          '豆包网页版是一款抖音集团推出的在线 AI 助手，基于云雀模型构建的在线使用的多功能人工智能工具和免费 AI 聊天机器人。',
+        url: 'https://www.doubao.com/chat/',
+      },
+      {
+        id: 'kimi',
+        label: 'Kimi',
+        description:
+          'Kimi 是由月之暗面科技有限公司开发的智能聊天助手，旨在为用户提供高效、智能和友好的交流体验。作为一款先进的人工智能产品，Kimi 集成了多种功能和特点，使其能够满足用户在多种场景下的沟通需求。',
+        url: 'https://kimi.ai/',
+      },
+      {
+        id: 'chatglm',
+        label: '智谱清言',
+        description:
+          '智谱清言是一款基于人工智能技术的千亿参数对话模型，遵循中国政府的立场和社会主义价值观，提供多领域知识问答、信息检索、文本生成等服务。',
+        url: 'https://chatglm.cn/',
+      },
+      {
+        id: 'xiezuocat',
+        label: '秘塔写作猫',
+        description:
+          '一代 AI 写作伴侣，旨在帮助用户推敲用语、斟酌文法、改写文风，并提供实时同步翻译功能。它为用户创造了一个简洁的写作环境，并支持账号数据同步，使用户能够随时随地进行写作。',
+        url: 'https://xiezuocat.com/',
+      },
+      {
+        id: 'xinghuo',
+        label: '讯飞星火',
+        description:
+          '讯飞星火 AI 助手，高性能 AI 语言模型，具备多模态理解和生成能力，服务于企业服务、智能硬件、智慧政务、智慧金融、智慧生活和智慧医疗等多个领域。',
+        url: 'https://xinghuo.xfyun.cn/desk',
+      },
+    ],
+  },
+  {
+    category: 'AI 绘画',
+    icon: 'tabler:photo-edit',
+    links: [
+      {
+        id: 'jimeng',
+        label: '即梦 Dreamina',
+        description:
+          '即梦是一个功能丰富的 AI 创作工具，即梦 AI 通过理解和应用用户的创意输入，提供了从视频生成到 AI 绘画的一站式解决方案。',
+        url: 'https://jimeng.jianying.com/ai-tool/home',
+      },
+      {
+        id: 'doubao',
+        label: '豆包',
+        description:
+          '豆包网页版是一款抖音集团推出的在线 AI 助手，基于云雀模型构建的在线使用的多功能人工智能工具和免费 AI 聊天机器人。',
+        url: 'https://www.doubao.com/chat/',
+      },
+      {
+        id: 'huiwa',
+        label: '绘蛙',
+        description:
+          '帮助用户快速生成商业摄影图片和吸引人的文案。它专为满足小红书、电商和跨境电商等不同平台的内容创作需求而设计。',
+        url: 'https://www.ihuiwa.com/workspace/ai-image',
+        tags: ['需登录'],
+      },
+      {
+        id: 'abei',
+        label: '阿贝 AI 绘画',
+        description:
+          '用 AI 创作绘本，让孩子的创意有更多表现形式，让天马行空的想法更快实现；家长也可以把想讲的话在10分钟之内创作出一个绘本故事，讲给孩子听，让亲子间的互动更加紧密，更为和谐。',
+        url: 'https://abeiai.com/',
+        tags: ['需登录'],
+      },
+      {
+        id: 'hunyuan',
+        label: '腾讯混元生图',
+        description:
+          '为创新性的设计、故事讲述以及更多场景提供一种强大而灵活的解决方案。',
+        url: 'https://image.hunyuan.tencent.com/',
+        tags: ['需登录'],
+      },
+    ],
+  },
+  {
+    category: 'PPT 生成处理',
+    icon: 'tabler:file-text',
+    links: [
+      {
+        id: 'chatglm',
+        label: '清言 PPT',
+        description:
+          '智谱清言是一款基于人工智能技术的千亿参数对话模型，遵循中国政府的立场和社会主义价值观，提供多领域知识问答、信息检索、文本生成等服务。',
+        url: 'https://chatglm.cn/',
+        tags: ['需登录'],
+      },
+      {
+        id: 'aippt',
+        label: '博思 AIPPT',
+        description:
+          '博思 AIPPT 是一个强大的在线PPT辅助工具，它通过 AI 技术简化了 PPT 的创建过程，提高了制作效率，同时保证了演示文稿的专业性和吸引力。',
+        url: 'https://pptgo.cn/',
+        tags: ['需登录'],
+      },
+      {
+        id: 'gezhe',
+        label: '歌者 PPT',
+        description:
+          '一键智能生成，内置海量模板，支持在线编辑美化，轻松做出令人惊艳的 PPT',
+        url: 'https://gezhe.com/',
+        tags: ['需登录'],
+      },
+      {
+        id: 'wenku',
+        label: '百度文库助手',
+        description:
+          '智能PPT、智能创作、智能编辑、智能总结四大AI能力，全面提升文档生产力',
+        url: 'https://wenku.baidu.com/ndlaunch/browse/chat',
+      },
+      {
+        id: 'chatppt',
+        label: 'ChatPPT',
+        description:
+          'ChatPPT 是一个创新的 AI 驱动的 PPT 生成工具，它通过对话式交互和全流程 AI 创作，大幅简化了 PPT 的制作过程。',
+        url: 'https://www.chat-ppt.com/',
+        tags: ['需登录'],
+      },
+    ],
+  },
+  {
+    category: 'AI 视频生成',
+    icon: 'tabler:video',
+    links: [
+      {
+        id: 'keling',
+        label: '可灵',
+        description:
+          '可灵AI大模型是快手推出的一款创新的视频生成工具，它通过先进的AI技术，为用户提供了一个能够将创意快速转化为视频内容的平台。',
+        url: 'https://klingai.kuaishou.com/',
+      },
+      {
+        id: 'hailuo',
+        label: '海螺 AI 视频',
+        description:
+          '多功能的AI助手，通过提供视频创作、音乐创作、图像识别和文本写作等功能，帮助用户提升工作和学习的效率。它的智能化和高效率的特点，使其成为提升生产力的有力工具。',
+        url: 'https://hailuoai.com/video',
+      },
+      {
+        id: 'huiwa',
+        label: '绘蛙',
+        description:
+          '帮助用户快速生成商业摄影图片和吸引人的文案。它专为满足小红书、电商和跨境电商等不同平台的内容创作需求而设计。',
+        url: 'https://www.ihuiwa.com/workspace/ai-image',
+        tags: ['需登录'],
+      },
+      {
+        id: 'daydream',
+        label: '白日梦',
+        description:
+          '多功能AIGC视频内容创作平台，提供丰富的活动、角色库、创作支持和社区交流功能。它旨在为用户提供一个综合性的在线体验和创作空间，适合喜欢在线互动和创作的用户。',
+        url: 'https://aibrm.com/',
+      },
+    ],
+  },
+])
+
+const open = (url?: string | URL, target?: string, features?: string) => {
+  return window.open(url, target, features)
+}
+</script>
+
+<template>
+  <div
+    class="w-full h-full bg-white dark:bg-neutral-900 p-4 sm:p-0 overflow-y-scroll"
+  >
+    <div class="container max-w-[1280px] mx-auto py-4 space-y-12">
+      <div
+        class="pattern w-full p-10 flex flex-col justify-center gap-3 items-center rounded-lg shadow-sm border border-gray-200 dark:border-neutral-700"
+      >
+        <h1 class="text-4xl font-bold text-center text-primary">AI 工具导航</h1>
+        <p>常用 AI 工具，一网打尽，常用常新</p>
+      </div>
+      <div class="w-full">
+        <div class="space-y-10">
+          <div
+            v-for="(cat, i) in toolCats"
+            class="space-y-4"
+            :key="i"
+          >
+            <h2 class="text-2xl font-bold text-primary flex items-center gap-2">
+              <UIcon
+                :name="cat.icon"
+                class="text-3xl"
+              />
+              <span>{{ cat.category }}</span>
+            </h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              <div
+                v-for="link in cat.links"
+                class="bg-white dark:bg-neutral-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-neutral-700 space-y-2 cursor-pointer hover:shadow-md transition-all duration-300"
+                :key="link.id"
+                @click="open(link.url)"
+              >
+                <div class="flex items-start gap-3">
+                  <img
+                    :src="link.logo || `/logo/${link.id}.png`"
+                    :alt="link.label"
+                    class="w-10 h-10 rounded-lg"
+                  />
+                  <div class="flex flex-col gap-1">
+                    <div class="flex items-center justify-between">
+                      <h3 class="text-xl font-bold flex-1">{{ link.label }}</h3>
+                      <div
+                        v-if="link.tags"
+                        class="flex items-center gap-2"
+                      >
+                        <UBadge
+                          v-for="(tag, i) in link.tags"
+                          color="teal"
+                          variant="subtle"
+                          size="xs"
+                          :key="i"
+                        >
+                          {{ tag }}
+                        </UBadge>
+                      </div>
+                    </div>
+
+                    <UPopover
+                      mode="hover"
+                      :popper="{ offsetDistance: 24 }"
+                    >
+                      <p
+                        class="text-sm text-gray-600 dark:text-gray-400 text-justify line-clamp-2"
+                      >
+                        {{ link.description }}
+                      </p>
+
+                      <template #panel>
+                        <div class="p-2">
+                          <p
+                            class="text-xs text-gray-600 dark:text-gray-400 text-justify max-w-md"
+                          >
+                            {{ link.description }}
+                          </p>
+                        </div>
+                      </template>
+                    </UPopover>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pattern {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Cellipse fill='none' stroke-width='1.6' stroke-opacity='0.2' id='a' rx='600' ry='450'/%3E%3C/defs%3E%3Cg style='transform-origin:center'%3E%3Cg transform='' style='transform-origin:center'%3E%3Cg transform='rotate(-160 0 0)' style='transform-origin:center'%3E%3Cg transform='translate(1000 750)'%3E%3Cuse stroke='%23FF008A' href='%23a' transform='rotate(-60 0 0) scale(0.4)'/%3E%3Cuse stroke='%23f30a8f' href='%23a' transform='rotate(-50 0 0) scale(0.5)'/%3E%3Cuse stroke='%23e81495' href='%23a' transform='rotate(-40 0 0) scale(0.6)'/%3E%3Cuse stroke='%23dc1f9a' href='%23a' transform='rotate(-30 0 0) scale(0.7)'/%3E%3Cuse stroke='%23d1299f' href='%23a' transform='rotate(-20 0 0) scale(0.8)'/%3E%3Cuse stroke='%23c533a5' href='%23a' transform='rotate(-10 0 0) scale(0.9)'/%3E%3Cuse stroke='%23b93daa' href='%23a' transform=''/%3E%3Cuse stroke='%23ae47af' href='%23a' transform='rotate(10 0 0) scale(1.1)'/%3E%3Cuse stroke='%23a251b5' href='%23a' transform='rotate(20 0 0) scale(1.2)'/%3E%3Cuse stroke='%23975cba' href='%23a' transform='rotate(30 0 0) scale(1.3)'/%3E%3Cuse stroke='%238b66bf' href='%23a' transform='rotate(40 0 0) scale(1.4)'/%3E%3Cuse stroke='%238070c5' href='%23a' transform='rotate(50 0 0) scale(1.5)'/%3E%3Cuse stroke='%23747aca' href='%23a' transform='rotate(60 0 0) scale(1.6)'/%3E%3Cuse stroke='%236884cf' href='%23a' transform='rotate(70 0 0) scale(1.7)'/%3E%3Cuse stroke='%235d8fd4' href='%23a' transform='rotate(80 0 0) scale(1.8)'/%3E%3Cuse stroke='%235199da' href='%23a' transform='rotate(90 0 0) scale(1.9)'/%3E%3Cuse stroke='%2346a3df' href='%23a' transform='rotate(100 0 0) scale(2)'/%3E%3Cuse stroke='%233aade4' href='%23a' transform='rotate(110 0 0) scale(2.1)'/%3E%3Cuse stroke='%232eb7ea' href='%23a' transform='rotate(120 0 0) scale(2.2)'/%3E%3Cuse stroke='%2323c1ef' href='%23a' transform='rotate(130 0 0) scale(2.3)'/%3E%3Cuse stroke='%2317ccf4' href='%23a' transform='rotate(140 0 0) scale(2.4)'/%3E%3Cuse stroke='%230cd6fa' href='%23a' transform='rotate(150 0 0) scale(2.5)'/%3E%3Cuse stroke='%2300E0FF' href='%23a' transform='rotate(160 0 0) scale(2.6)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center;
+}
+</style>