From 2bf4bfad81abec22fcd9debc03e2e70405a22d33 Mon Sep 17 00:00:00 2001
From: HoshinoSuzumi <master@uniiem.com>
Date: Tue, 20 Aug 2024 03:36:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=92=8C=E6=95=B0=E5=AD=97=E4=BA=BA=E6=8E=88=E6=9D=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BubbleTitle.vue                   |  11 +-
 components/GradientDivider.vue               |  17 +-
 components/LoginNeededContent.vue            |  21 +-
 components/ModalDigitalHumanSelect.vue       |  68 ++-
 components/SlideCreateCourse.vue             |  12 +-
 components/SlideCreateCourseGreen.vue        |   7 +-
 components/aigc/NavItem.vue                  |  13 +-
 layouts/default.vue                          |  20 +-
 nuxt.config.ts                               |   9 +
 pages/aigc/draw/index.vue                    | 416 +++++++++++++++++++
 pages/{aigc => }/generation.vue              |  20 +-
 pages/generation/admin/users.vue             | 414 ++++++++++++++++++
 pages/{aigc => }/generation/course.vue       |   0
 pages/{aigc => }/generation/green-screen.vue |   0
 pages/index.vue                              | 407 +-----------------
 tailwind.config.ts                           |   6 +
 typings/types.d.ts                           |  12 +
 17 files changed, 989 insertions(+), 464 deletions(-)
 create mode 100644 pages/aigc/draw/index.vue
 rename pages/{aigc => }/generation.vue (88%)
 create mode 100644 pages/generation/admin/users.vue
 rename pages/{aigc => }/generation/course.vue (100%)
 rename pages/{aigc => }/generation/green-screen.vue (100%)

diff --git a/components/BubbleTitle.vue b/components/BubbleTitle.vue
index 0c941f4..f9050b6 100644
--- a/components/BubbleTitle.vue
+++ b/components/BubbleTitle.vue
@@ -12,6 +12,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  bubbleColor: {
+    type: String,
+    default: 'primary-500',
+  },
 })
 </script>
 
@@ -20,10 +24,10 @@ const props = defineProps({
     <div>
       <h1
         v-if="subtitle"
-        class="text-base text-neutral-300 italic tracking-wide font-black leading-none"
+        class="text-base text-neutral-300 dark:text-neutral-600 italic tracking-wide font-black leading-none"
       >{{ subtitle }}</h1>
 
-      <h1 class="text-xl font-bold text-neutral-700 leading-none relative z-[1]">
+      <h1 class="text-xl font-bold text-neutral-700 dark:text-neutral-300 leading-none relative z-[1]">
         {{ title }}
       </h1>
     </div>
@@ -34,7 +38,8 @@ const props = defineProps({
 
     <div
       v-if="bubble"
-      class="absolute -left-1.5 -bottom-1.5 w-4 h-4 rounded-full bg-primary-500/50 z-[0]"
+      :class="`bg-${bubbleColor}/50`"
+      class="absolute -left-1.5 -bottom-1.5 w-4 h-4 rounded-full z-[0]"
     ></div>
   </div>
 </template>
diff --git a/components/GradientDivider.vue b/components/GradientDivider.vue
index 9fb8051..fcb1c9c 100644
--- a/components/GradientDivider.vue
+++ b/components/GradientDivider.vue
@@ -4,13 +4,26 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  lineGradientFrom: {
+    type: String,
+    default: 'primary',
+  },
+  lineGradientTo: {
+    type: String,
+    default: 'primary',
+  },
 })
 </script>
 
 <template>
   <div
-    class="bg-gradient-to-r from-primary-500/50 to-primary-300/50 rounded-full my-4"
-    :class="{'w-full h-[1px]': !vertical, 'w-[1px] h-full': vertical}"
+    :class="{
+      'w-full h-[1px]': !vertical,
+      'w-[1px] h-full': vertical,
+      [`from-${lineGradientFrom}-500/50`]: true,
+      [`to-${lineGradientTo}-300/50`]: true,
+    }"
+    class="bg-gradient-to-r rounded-full my-4"
   ></div>
 </template>
 
diff --git a/components/LoginNeededContent.vue b/components/LoginNeededContent.vue
index 8e1452d..9570a3d 100644
--- a/components/LoginNeededContent.vue
+++ b/components/LoginNeededContent.vue
@@ -8,6 +8,10 @@ defineProps({
     type: String,
     default: '',
   },
+  needAdmin: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const modal = useModal()
@@ -16,19 +20,24 @@ const modal = useModal()
 <template>
   <ClientOnly>
     <div v-if="!loginState.is_logged_in"
-         class="w-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
+         class="w-full flex flex-col justify-center items-center gap-2 py-40">
       <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)"
+        class="mt-2 font-bold"
+        color="black"
+        size="xs"
+        variant="solid"
+        @click="modal.open(ModalAuthentication)"
       >
         登录
       </UButton>
     </div>
+    <div v-else-if="needAdmin && loginState.user.auth_code !== 2"
+         class="w-full flex flex-col justify-center items-center gap-2 py-40">
+      <Icon class="text-7xl text-neutral-300 dark:text-neutral-700" name="tabler:hand-stop"/>
+      <p class="text-sm text-neutral-500 dark:text-neutral-400">账号没有权限</p>
+    </div>
     <div :class="contentClass" v-else>
       <slot/>
     </div>
diff --git a/components/ModalDigitalHumanSelect.vue b/components/ModalDigitalHumanSelect.vue
index ec41383..74b6e0b 100644
--- a/components/ModalDigitalHumanSelect.vue
+++ b/components/ModalDigitalHumanSelect.vue
@@ -10,6 +10,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  disabledDigitalHumanIds: {
+    type: Array,
+    default: () => [],
+  },
+  defaultTab: {
+    type: String as PropType<'user' | 'system'>,
+    default: 'user',
+  },
 })
 
 const emit = defineEmits({
@@ -107,6 +115,20 @@ const {
     watch: [page],
   },
 )
+
+onMounted(() => {
+  if (loginState.user.auth_code === 2) {
+    tabItems.push({
+      key: 'system',
+      label: '系统数字人',
+      icon: 'i-tabler-user-star',
+    })
+    nextTick(() => {
+      tabIndex.value = tabItems.findIndex(i => i.key === props.defaultTab)
+      console.log('tabIndex', tabIndex.value)
+    })
+  }
+})
 </script>
 
 <template>
@@ -132,37 +154,49 @@ const {
       </template>
 
       <UTabs
-        :items="[
-          ...tabItems,
-          loginState.user.auth_code === 2 ? {
-            key: 'system',
-            label: '系统数字人',
-            icon: 'i-tabler-user-star',
-          } : null
-        ].filter(Boolean)"
-        @change="i => tabIndex = i"
+        v-model="tabIndex"
+        :items="tabItems"
       >
         <template #item="{ item }">
           <div class="w-full grid grid-cols-3 sm:grid-cols-5 gap-4">
             <div
               v-for="(d, i) in item.key === 'user' ? userDigitalList?.data.items : systemDigitalList?.data.items"
               :key="`${item.key === 'user' ? 'user' : 'system'}-digital-${d.model_id}`"
-              :class="{'border-primary shadow-md': selectedDigitalHumans.includes(d)}"
-              class="relative flex flex-col justify-center items-center gap-2 overflow-hidden w-full bg-white rounded-md border cursor-pointer transition-all duration-150 select-none"
-              @click="handleSelectClick(d)"
+              :class="{
+                'border-primary shadow-md': selectedDigitalHumans.includes(d),
+                'border-neutral-200 dark:border-neutral-700': !selectedDigitalHumans.includes(d),
+              }"
+              class="relative flex flex-col justify-center items-center gap-2 overflow-hidden w-full bg-white dark:bg-neutral-800 rounded-md border dark:border-2 cursor-pointer transition-all duration-150 select-none"
+              @click="!disabledDigitalHumanIds.includes(d.model_id) ? handleSelectClick(d) : void 0"
             >
+              <div
+                v-if="disabledDigitalHumanIds.includes(d.model_id)"
+                class="absolute inset-0 bg-neutral-400 dark:bg-neutral-700 bg-opacity-50 dark:bg-opacity-50 cursor-not-allowed z-10"
+              ></div>
               <div
                 :class="{'bg-primary-50': selectedDigitalHumans.includes(d)}"
-                class="relative bg-neutral-100 border-b w-full aspect-square object-cover overflow-hidden transition-all duration-150"
+                class="relative bg-neutral-100 dark:bg-neutral-800 border-b dark:border-neutral-700 w-full aspect-square object-cover overflow-hidden transition-all duration-150"
               >
                 <NuxtImg :src="d.avatar" class="-translate-y-4"/>
-                <UIcon v-if="selectedDigitalHumans.includes(d)" class="absolute top-1 right-1 text-lg text-primary"
-                       name="i-tabler-check"/>
+                <UIcon
+                  v-if="selectedDigitalHumans.includes(d)"
+                  class="absolute top-1 right-1 text-lg text-primary"
+                  name="i-tabler-check"
+                />
+                <UIcon
+                  v-if="disabledDigitalHumanIds.includes(d.model_id)"
+                  class="absolute top-1 right-1 text-lg text-red-500"
+                  name="tabler:user-off"
+                />
               </div>
               <div class="w-full flex flex-col gap-1 px-2 pb-2">
                 <div class="flex justify-between items-center">
-                  <span class="text-sm text-neutral-800 font-medium line-clamp-1">{{ d.name }}</span>
-                  <span class="text-xs text-neutral-300 font-medium">ID:{{ d.digital_human_id || d.id }}</span>
+                  <span class="text-sm text-neutral-800 dark:text-neutral-300 font-medium line-clamp-1">
+                    {{ d.name }}
+                  </span>
+                  <span class="text-xs text-neutral-300 dark:text-neutral-500 font-medium">
+                    ID:{{ d.digital_human_id || d.id }}
+                  </span>
                 </div>
               </div>
             </div>
diff --git a/components/SlideCreateCourse.vue b/components/SlideCreateCourse.vue
index 7489079..020d887 100644
--- a/components/SlideCreateCourse.vue
+++ b/components/SlideCreateCourse.vue
@@ -134,10 +134,11 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
           <UFormGroup label="数字人" name="digital_human_id" required>
             <div
               :class="{'shadow-inner': !!selected_digital_human}"
-              class="flex items-center gap-2 bg-neutral-100 p-2 rounded-md cursor-pointer select-none transition-all"
+              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
               @click="isDigitalSelectorOpen = true"
             >
-              <div class="w-12 aspect-square border rounded-md flex justify-center items-center overflow-hidden">
+              <div
+                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden">
                 <UIcon v-if="!selected_digital_human" class="text-2xl opacity-50" name="i-tabler-user-screen"/>
                 <NuxtImg v-else :src="selected_digital_human?.avatar"/>
               </div>
@@ -153,9 +154,10 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
           </UFormGroup>
           <UFormGroup label="视频片头片尾" name="opening">
             <div
-              class="flex items-center gap-2 bg-neutral-100 p-2 rounded-md cursor-pointer select-none transition-all"
+              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
             >
-              <div class="w-12 aspect-square border rounded-md flex justify-center items-center">
+              <div
+                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center">
                 <UIcon class="text-2xl opacity-50" name="i-tabler-brackets-contain"/>
               </div>
               <div class="flex flex-col text-neutral-400 text-sm font-medium">
@@ -179,7 +181,7 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
 
         <UAccordion :items="[{label: '高级选项'}]" color="gray" size="lg">
           <template #item>
-            <div class="border rounded-lg space-y-4 p-4 pb-6">
+            <div class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6">
               <UFormGroup label="生成线路" name="gen_server">
                 <USelectMenu
                   v-model="createCourseState.gen_server"
diff --git a/components/SlideCreateCourseGreen.vue b/components/SlideCreateCourseGreen.vue
index d8bcc1c..70511e8 100644
--- a/components/SlideCreateCourseGreen.vue
+++ b/components/SlideCreateCourseGreen.vue
@@ -117,10 +117,11 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
           <UFormGroup label="数字人" name="digital_human_id" required>
             <div
               :class="{'shadow-inner': !!selected_digital_human}"
-              class="flex items-center gap-2 bg-neutral-100 p-2 rounded-md cursor-pointer select-none transition-all"
+              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
               @click="isDigitalSelectorOpen = true"
             >
-              <div class="w-12 aspect-square border rounded-md flex justify-center items-center overflow-hidden">
+              <div
+                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden">
                 <UIcon v-if="!selected_digital_human" class="text-2xl opacity-50" name="i-tabler-user-screen"/>
                 <NuxtImg v-else :src="selected_digital_human?.avatar"/>
               </div>
@@ -147,7 +148,7 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
 
         <UAccordion :items="[{label: '高级选项'}]" color="gray" size="lg">
           <template #item>
-            <div class="border rounded-lg space-y-4 p-4 pb-6">
+            <div class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6">
               <UFormGroup :label="`视频倍速：${createCourseState.speed}`" name="speed">
                 <URange
                   v-model="createCourseState.speed"
diff --git a/components/aigc/NavItem.vue b/components/aigc/NavItem.vue
index b06c7ea..5392319 100644
--- a/components/aigc/NavItem.vue
+++ b/components/aigc/NavItem.vue
@@ -38,13 +38,18 @@ const activeClass = computed(() => {
     v-if="!hide"
     :class="{
       [activeClass]: active,
-      'hover:bg-neutral-200': !active,
+      'hover:bg-neutral-200 dark:hover:bg-neutral-800': !active,
     }"
     :to="to"
-    class="px-4 py-3 flex items-center gap-2 rounded-lg transition cursor-pointer"
+    class="px-4 py-3 flex justify-between items-center rounded-lg transition cursor-pointer"
   >
-    <Icon :name="icon" class="text-xl inline"/>
-    <h1 class="text-[14px] font-medium">{{ label }}</h1>
+    <div class="flex items-center gap-2">
+      <Icon :name="icon" class="text-xl inline"/>
+      <h1 class="flex-1 text-[14px] font-medium line-clamp-1">
+        {{ label }}
+      </h1>
+    </div>
+    <UBadge v-if="admin" color="amber" label="OP" size="xs" variant="subtle"/>
   </NuxtLink>
 </template>
 
diff --git a/layouts/default.vue b/layouts/default.vue
index b4b2017..a999aae 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -17,18 +17,20 @@ const isDark = computed({
 })
 
 const links = [
+  {
+    label: '分身制课',
+    icon: 'tabler:books',
+    to: '/generation',
+  },
+  {
+    label: '聊天',
+    icon: 'tabler:message-chatbot',
+    to: '/aigc/chat',
+  },
   {
     label: '绘画',
     icon: 'i-tabler-brush',
-    to: '/',
-  }, {
-    label: '聊天',
-    icon: 'i-tabler-message-2',
-    to: '/aigc/chat',
-  }, {
-    label: 'PPT',
-    icon: 'i-tabler-file-type-ppt',
-    to: '/aigc/generation',
+    to: '/aigc/draw',
   },
 ]
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6d3aace..a06c922 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -21,6 +21,15 @@ export default defineNuxtConfig({
     'nuxt-driver.js',
   ],
 
+  routeRules: {
+    '/': {
+      redirect: {
+        to: '/generation',
+        statusCode: 302,
+      },
+    },
+  },
+
   icon: {
     provider: 'iconify',
     serverBundle: false,
diff --git a/pages/aigc/draw/index.vue b/pages/aigc/draw/index.vue
new file mode 100644
index 0000000..905a664
--- /dev/null
+++ b/pages/aigc/draw/index.vue
@@ -0,0 +1,416 @@
+<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>
\ No newline at end of file
diff --git a/pages/aigc/generation.vue b/pages/generation.vue
similarity index 88%
rename from pages/aigc/generation.vue
rename to pages/generation.vue
index 66a1fb1..d780b1a 100644
--- a/pages/aigc/generation.vue
+++ b/pages/generation.vue
@@ -5,37 +5,37 @@ useSeoMeta({
   title: '智能生成',
 })
 
-const navList: {
+const navList = ref<{
   label: string
   icon: string
   to: string
   admin?: boolean
-}[] = [
+}[]>([
   {
     label: '微课视频生成',
     icon: 'tabler:presentation-analytics',
-    to: '/aigc/generation/course',
+    to: '/generation/course',
   },
   {
     label: '绿幕视频生成',
     icon: 'i-tabler-video',
-    to: '/aigc/generation/green-screen',
+    to: '/generation/green-screen',
   },
   {
-    label: '数字人管理',
-    icon: 'i-tabler-video',
-    to: '/aigc/generation/green-screen',
+    label: '用户管理',
+    icon: 'tabler:users',
+    to: '/generation/admin/users',
     admin: true,
   },
-]
+])
 
 const route = useRoute()
 const router = useRouter()
 const loginState = useLoginState()
 
 onMounted(() => {
-  if (route.fullPath === '/aigc/generation') {
-    router.push('/aigc/generation/course')
+  if (route.fullPath === '/generation') {
+    router.replace('/generation/course')
   }
 })
 </script>
diff --git a/pages/generation/admin/users.vue b/pages/generation/admin/users.vue
new file mode 100644
index 0000000..2ae2a91
--- /dev/null
+++ b/pages/generation/admin/users.vue
@@ -0,0 +1,414 @@
+<script lang="ts" setup>
+import ModalDigitalHumanSelect from '~/components/ModalDigitalHumanSelect.vue'
+
+const toast = useToast()
+const loginState = useLoginState()
+
+const columns = [
+  {
+    key: 'id',
+    label: 'ID',
+    disabled: true,
+  },
+  {
+    key: 'avatar',
+    label: '头像',
+    disabled: true,
+  },
+  {
+    key: 'username',
+    label: '用户名',
+    disabled: true,
+  },
+  {
+    key: 'company',
+    label: '单位',
+  },
+  {
+    key: 'mobile',
+    label: '手机号',
+  },
+  {
+    key: 'email',
+    label: '电子邮箱',
+  },
+  {
+    key: 'nickname',
+    label: '昵称',
+  },
+  {
+    key: 'sex',
+    label: '性别',
+  },
+  {
+    key: 'auth_code',
+    label: '角色',
+  },
+  {
+    key: 'actions',
+    label: '操作',
+  },
+]
+
+const selectedColumns = ref([...columns.filter(row => {
+  return !['nickname', 'email', 'auth_code'].includes(row.key)
+})])
+const page = ref(1)
+const pageCount = ref(15)
+const is_verified = ref(true)
+const viewingUser = ref<UserSchema | null>(null)
+const isSlideOpen = computed({
+  get: () => !!viewingUser.value,
+  set: () => viewingUser.value = null,
+})
+
+watch([is_verified, pageCount], () => page.value = 1)
+
+const {
+  data: usersData,
+  refresh: refreshUsersData,
+  status: usersDataStatus,
+} = useAsyncData(
+  'systemUsers',
+  () => useFetchWrapped<
+    req.user.UserList & AuthedRequest,
+    BaseResponse<PagedData<UserSchema>>
+  >('App.User_User.ListUser', {
+    token: loginState.token!,
+    user_id: loginState.user.id!,
+    page: page.value,
+    perpage: pageCount.value,
+    is_verify: is_verified.value,
+  }),
+  {
+    watch: [page, pageCount, is_verified],
+  },
+)
+
+const isDigitalSelectorOpen = ref(false)
+const dhPage = ref(1)
+const dhPageCount = ref(10)
+
+watch(dhPageCount, () => dhPage.value = 1)
+
+const {
+  data: digitalHumansData,
+  refresh: refreshDigitalHumansData,
+  status: digitalHumansDataStatus,
+} = useAsyncData(
+  'currentUserDigitalHumans',
+  () => useFetchWrapped<
+    PagedDataRequest & AuthedRequest,
+    BaseResponse<PagedData<DigitalHumanItem>>
+  >('App.User_UserDigital.GetList', {
+    token: loginState.token!,
+    user_id: loginState.user.id!,
+    to_user_id: viewingUser.value?.id || 0,
+    page: dhPage.value,
+    perpage: dhPageCount.value,
+  }),
+  {
+    watch: [viewingUser, dhPage, dhPageCount],
+  },
+)
+
+const items = (row: UserSchema) => [
+  [
+    {
+      label: '数字人授权',
+      icon: 'tabler:user-cog',
+      click: () => openSlide(row),
+      disabled: row.auth_code === 0,
+    },
+  ],
+  [
+    {
+      label: row.auth_code !== 0 ? '停用账号' : '启用账号',
+      icon: row.auth_code !== 0 ? 'tabler:cancel' : 'tabler:shield-check',
+      click: () => setUserStatus(row.id, row.auth_code === 0),
+    },
+  ],
+]
+
+const openSlide = (user: UserSchema) => {
+  viewingUser.value = user
+}
+
+const closeSlide = () => {
+  viewingUser.value = null
+}
+
+const onDigitalHumansSelected = (digitalHumans: DigitalHumanItem[]) => {
+  useFetchWrapped<
+    {
+      to_user_id: number
+      digital_human_array: number[]
+    } & AuthedRequest,
+    BaseResponse<{
+      total: number
+      success: number
+      failed: number
+    }>
+  >('App.User_UserDigital.CreateConnArr', {
+    token: loginState.token!,
+    user_id: loginState.user.id!,
+    to_user_id: viewingUser.value?.id || 0,
+    digital_human_array: digitalHumans.map(row => row.id || row.digital_human_id),
+  }).then(res => {
+    if (res.ret === 200) {
+      toast.add({
+        title: '授权成功',
+        description: `成功授权 ${ res.data.success } 个数字人${ res.data.failed ? `，失败 ${ res.data.failed } 个` : '' }`,
+        color: 'green',
+        icon: 'tabler:check',
+      })
+      refreshDigitalHumansData()
+    } else {
+      toast.add({
+        title: '授权失败',
+        description: res.msg || '未知错误',
+        color: 'red',
+        icon: 'tabler:alert-triangle',
+      })
+    }
+  })
+}
+
+const revokeDigitalHuman = (uid: number, digitalHumanId: number) => {
+  useFetchWrapped<
+    {
+      to_user_id: number
+      digital_human_id: number
+    } & AuthedRequest,
+    BaseResponse<{
+      code: number // 1: success, 0: failed
+    }>
+  >('App.User_UserDigital.DeleteConn', {
+    token: loginState.token!,
+    user_id: loginState.user.id!,
+    to_user_id: uid,
+    digital_human_id: digitalHumanId,
+  }).then(res => {
+    if (res.ret === 200 && res.data.code === 1) {
+      toast.add({
+        title: '撤销成功',
+        description: '已撤销数字人授权',
+        color: 'green',
+        icon: 'tabler:check',
+      })
+      refreshDigitalHumansData()
+    } else {
+      toast.add({
+        title: '撤销失败',
+        description: res.msg || '未知错误',
+        color: 'red',
+        icon: 'tabler:alert-triangle',
+      })
+    }
+  })
+}
+
+const setUserStatus = (uid: number, is_verified: boolean) => {
+  useFetchWrapped<
+    {
+      to_user_id: number
+      is_verify: boolean
+    } & AuthedRequest,
+    BaseResponse<{
+      status: number // 1: success, 0: failed
+    }>
+  >('App.User_User.SetUserVerify', {
+    token: loginState.token!,
+    user_id: loginState.user.id!,
+    to_user_id: uid,
+    is_verify: is_verified,
+  }).then(res => {
+    if (res.ret === 200 && res.data.status === 1) {
+      toast.add({
+        title: '操作成功',
+        description: `已${ is_verified ? '启用' : '停用' }账号`,
+        color: 'green',
+        icon: is_verified ? 'tabler:shield-check' : 'tabler:cancel',
+      })
+      refreshUsersData()
+    } else {
+      toast.add({
+        title: '操作失败',
+        description: res.msg || '未知错误',
+        color: 'red',
+        icon: 'tabler:alert-triangle',
+      })
+    }
+  })
+}
+</script>
+
+<template>
+  <LoginNeededContent need-admin>
+    <div class="p-4">
+      <BubbleTitle bubble-color="amber-500" subtitle="User Management" title="用户管理">
+        <template #action>
+          <UButton
+            color="amber"
+            icon="tabler:users"
+            variant="soft"
+            @click="openSlide(loginState.user)"
+          >
+            本账号数字人
+          </UButton>
+          <UButton
+            color="amber"
+            icon="tabler:reload"
+            variant="soft"
+            @click="refreshUsersData"
+          >
+            刷新
+          </UButton>
+        </template>
+      </BubbleTitle>
+      <GradientDivider line-gradient-from="amber" line-gradient-to="amber"/>
+      <div>
+        <div class="flex justify-between items-center w-full py-3">
+          <div class="flex items-center gap-1.5">
+            <span class="text-sm leading-0">每页显示:</span>
+            <USelect
+              v-model="pageCount"
+              :options="[5, 10, 15, 20]"
+              class="me-2 w-20"
+              size="xs"
+            />
+          </div>
+
+          <div class="flex gap-1.5 items-center">
+            <USelectMenu
+              v-model="is_verified"
+              :options="[
+                {label: '正常账号', value: true, icon: 'tabler:user-check'},
+                {label: '停用账号', value: false, icon: 'tabler:user-cancel'},
+              ]"
+              :ui-menu="{width: 'w-fit', option: {size: 'text-xs', icon: {base: 'w-4 h-4'}}}"
+              size="xs"
+              value-attribute="value"
+            />
+            <USelectMenu
+              v-model="selectedColumns"
+              :options="columns.filter(row => !['actions'].includes(row.key))"
+              :ui-menu="{width: 'w-fit', option: {size: 'text-xs', icon: {base: 'w-4 h-4'}}}"
+              multiple
+            >
+              <UButton
+                color="gray"
+                icon="tabler:layout-columns"
+                size="xs"
+              >
+                显示列
+              </UButton>
+            </USelectMenu>
+          </div>
+        </div>
+        <UTable
+          :columns="selectedColumns"
+          :loading="usersDataStatus === 'pending'"
+          :progress="{color: 'amber', animation: 'carousel'}"
+          :rows="usersData?.data.items"
+          class="border dark:border-neutral-800 rounded-md"
+        >
+          <template #avatar-data="{ row }">
+            <UAvatar :alt="row.username.toUpperCase()" :src="row.avatar" size="sm"/>
+          </template>
+          <template #sex-data="{ row }">
+            {{ row.sex === 0 ? '' : row.sex === 1 ? '男' : '女' }}
+          </template>
+          <template #actions-data="{ row }">
+            <UDropdown :items="items(row)">
+              <UButton color="gray" icon="tabler:dots" variant="ghost"/>
+            </UDropdown>
+          </template>
+        </UTable>
+        <div class="flex justify-end py-3.5">
+          <UPagination
+            v-if="(usersData?.data.total || -1) > 0"
+            v-model="page"
+            :page-count="pageCount"
+            :total="usersData?.data.total || 0"
+          />
+        </div>
+      </div>
+    </div>
+    <USlideover v-model="isSlideOpen">
+      <UCard
+        :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"
+        class="flex flex-col flex-1"
+      >
+        <template #header>
+          <UButton
+            class="flex absolute end-5 top-5 z-10"
+            color="gray"
+            icon="tabler:x"
+            padded
+            size="sm"
+            square
+            variant="ghost"
+            @click="closeSlide"
+          />
+          数字人授权管理
+          <p class="text-sm font-medium text-primary">{{ viewingUser?.username }} (UID:{{ viewingUser?.id }})</p>
+        </template>
+
+        <div class="flex w-full justify-end pb-4">
+          <UButton
+            icon="tabler:plus"
+            size="xs"
+            @click="isDigitalSelectorOpen = true"
+          >
+            新增授权
+          </UButton>
+        </div>
+        <div class="border dark:border-neutral-700 rounded-md">
+          <UTable
+            :columns="[
+              {key: 'name', label: '名称'},
+              {key: 'digital_human_id', label: '平台ID'},
+              {key: 'model_id', label: '上游ID'},
+              {key: 'actions'},
+            ]"
+            :loading="digitalHumansDataStatus === 'pending'"
+            :rows="digitalHumansData?.data.items"
+          >
+            <template #actions-data="{ row }">
+              <UButton
+                color="gray"
+                icon="tabler:cancel"
+                size="xs"
+                variant="ghost"
+                @click="revokeDigitalHuman(viewingUser?.id || 0, row.digital_human_id)"
+              >
+                撤销授权
+              </UButton>
+            </template>
+          </UTable>
+        </div>
+        <div class="flex justify-end py-3.5">
+          <UPagination
+            v-if="(digitalHumansData?.data.total || -1) > 0"
+            v-model="dhPage"
+            :page-count="dhPageCount"
+            :total="digitalHumansData?.data.total || 0"
+          />
+        </div>
+      </UCard>
+      <ModalDigitalHumanSelect
+        :disabled-digital-human-ids="digitalHumansData?.data.items.map(d => d.model_id)"
+        :is-open="isDigitalSelectorOpen"
+        default-tab="system"
+        multiple
+        @close="isDigitalSelectorOpen = false"
+        @select="digitalHumans => onDigitalHumansSelected(digitalHumans as DigitalHumanItem[])"
+      />
+    </USlideover>
+  </LoginNeededContent>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/aigc/generation/course.vue b/pages/generation/course.vue
similarity index 100%
rename from pages/aigc/generation/course.vue
rename to pages/generation/course.vue
diff --git a/pages/aigc/generation/green-screen.vue b/pages/generation/green-screen.vue
similarity index 100%
rename from pages/aigc/generation/green-screen.vue
rename to pages/generation/green-screen.vue
diff --git a/pages/index.vue b/pages/index.vue
index 263681e..796e491 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,413 +1,10 @@
 <script setup lang="ts">
-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="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" :class="{'translate-x-0': showSidebar}">
-      <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"
-                  @update="file => {defaultFormState.file = file}"
-                  text="选择参考图片" text-on-select="已选择参考图"/>
-              </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 type="submit" color="indigo" size="lg" class="font-bold" :loading="generating" block>
-              {{ generating ? '生成中' : '生成' }}
-            </UButton>
-            <p class="text-xs text-neutral-400 dark:text-neutral-500 font-bold">
-              生成即代表您同意<a href="#" target="_blank"
-                                 class="underline underline-offset-2">用户许可协议</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 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" @click="modal.open(ModalAuthentication)" color="black" variant="solid"
-                   size="xs">
-            登录
-          </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 name="i-tabler-photo-hexagon" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
-          <p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
-        </div>
-        <ResultBlock v-else v-for="(result, k) in history.text2img" :fid="result.fid" :meta="result.meta"
-                     :prompt="result.prompt" :key="result.fid"
-                     @use-reference="file => {defaultFormState.file = file}">
-          <template #header-right>
-            <UPopover overlay>
-              <UButton color="black" size="xs" icon="i-tabler-trash" 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 color="gray" size="xs" class="font-bold" @click="close">
-                      取消
-                    </UButton>
-                    <UButton color="red" size="xs" class="font-bold"
-                             @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>
+    Homepage is still WIP
   </div>
 </template>
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5a1abd9..c715cff 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -61,5 +61,11 @@ export default <Partial<Config>>{
     {
       pattern: /^bg-/,
     },
+    {
+      pattern: /^from-/,
+    },
+    {
+      pattern: /^to-/,
+    },
   ],
 }
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 908b881..dbb164f 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -17,6 +17,12 @@ interface PagedData<T> {
   items: T[]
 }
 
+interface PagedDataRequest {
+  page?: number
+  perpage?: number
+  to_user_id?: number
+}
+
 interface UserSchema {
   id: number
   username: string
@@ -79,6 +85,12 @@ namespace req {
       mobile: string
       sms_code: string
     }
+
+    interface UserList {
+      page?: number
+      perpage?: number
+      is_verify: boolean
+    }
   }
 
   namespace file {