feat: 用户管理和数字人授权

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>

pages/aigc/generation.vue

@@ -1,113 +0,0 @@
-<script setup lang="tsx">
-import NavItem from '~/components/aigc/NavItem.vue'
-
-useSeoMeta({
-  title: '智能生成',
-})
-
-const navList: {
-  label: string
-  icon: string
-  to: string
-  admin?: boolean
-}[] = [
-  {
-    label: '微课视频生成',
-    icon: 'tabler:presentation-analytics',
-    to: '/aigc/generation/course',
-  },
-  {
-    label: '绿幕视频生成',
-    icon: 'i-tabler-video',
-    to: '/aigc/generation/green-screen',
-  },
-  {
-    label: '数字人管理',
-    icon: 'i-tabler-video',
-    to: '/aigc/generation/green-screen',
-    admin: true,
-  },
-]
-
-const route = useRoute()
-const router = useRouter()
-const loginState = useLoginState()
-
-onMounted(() => {
-  if (route.fullPath === '/aigc/generation') {
-    router.push('/aigc/generation/course')
-  }
-})
-</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]
-               border-r border-neutral-200 dark:border-neutral-700 transition-all duration-300 ease-out">
-      <div class="flex flex-col flex-1 overflow-auto overflow-x-hidden">
-        <div class="flex flex-col gap-1">
-          <ClientOnly>
-            <NavItem
-              v-for="(item, i) in navList"
-              :key="i"
-              :icon="item.icon"
-              :label="item.label"
-              :to="item.to"
-              :admin="item.admin"
-              :hide="item.admin && loginState.user.auth_code !== 2"
-            />
-          </ClientOnly>
-        </div>
-      </div>
-    </div>
-
-    <LoginNeededContent
-      content-class="h-[calc(100vh-4rem)] flex-1 overflow-y-auto bg-white dark:bg-neutral-900"
-    >
-      <Transition name="subpage" mode="out-in">
-        <div>
-          <Suspense>
-            <NuxtPage :page-key="route.fullPath" keepalive/>
-          </Suspense>
-        </div>
-      </Transition>
-    </LoginNeededContent>
-
-  </div>
-</template>
-
-<style>
-.subpage-enter-active,
-.subpage-leave-active {
-  @apply transition-all duration-300;
-}
-
-.subpage-enter-from,
-.subpage-leave-to {
-  @apply opacity-0 translate-x-4;
-}
-
-.loading-screen-leave-active {
-  @apply transition-all duration-300;
-}
-
-.loading-screen-leave-to {
-  @apply opacity-0;
-}
-
-.card-move,
-.card-enter-active,
-.card-leave-active {
-  @apply transition-all duration-300;
-}
-
-.card-enter-from,
-.card-leave-to {
-  @apply opacity-0;
-}
-
-.card-leave-active {
-  @apply absolute;
-}
-</style>

pages/aigc/generation/course.vue

@@ -1,151 +0,0 @@
-<script lang="ts" setup>
-import CGTaskCard from '~/components/aigc/generation/CGTaskCard.vue'
-import ModalAuthentication from '~/components/ModalAuthentication.vue'
-import SlideCreateCourse from '~/components/SlideCreateCourse.vue'
-import { useFetchWrapped } from '~/composables/useFetchWrapped'
-
-const toast = useToast()
-const modal = useModal()
-const slide = useSlideover()
-const loginState = useLoginState()
-
-const deletePending = ref(false)
-const page = ref(1)
-
-const {
-  data: courseList,
-  refresh: refreshCourseList,
-} = useAsyncData(
-  () => useFetchWrapped<
-    req.gen.CourseGenList & AuthedRequest,
-    BaseResponse<PagedData<resp.gen.CourseGenItem>>
-  >('App.Digital_Convert.GetList', {
-    token: loginState.token!,
-    user_id: loginState.user.id,
-    to_user_id: loginState.user.id,
-    page: page.value,
-    perpage: 16,
-  }), {
-    watch: [page],
-  },
-)
-
-const onCreateCourseClick = () => {
-  slide.open(SlideCreateCourse, {
-    onSuccess: () => {
-      refreshCourseList()
-    },
-  })
-}
-
-const onCourseDelete = (task_id: string) => {
-  if (!task_id) return
-  deletePending.value = true
-  useFetchWrapped<
-    req.gen.CourseGenDelete & AuthedRequest,
-    BaseResponse<resp.gen.CourseGenDelete>
-  >('App.Digital_Convert.Delete', {
-    token: loginState.token!,
-    user_id: loginState.user.id,
-    to_user_id: loginState.user.id,
-    task_id,
-  }).then(res => {
-    if (res.ret === 200) {
-      toast.add({
-        title: '删除成功',
-        description: '已删除任务记录',
-        color: 'green',
-        icon: 'i-tabler-check',
-      })
-    } else {
-      toast.add({
-        title: '删除失败',
-        description: res.msg || '未知错误',
-        color: 'red',
-        icon: 'i-tabler-alert-triangle',
-      })
-    }
-  }).finally(() => {
-    deletePending.value = false
-    refreshCourseList()
-  })
-}
-
-const beforeLeave = (el: any) => {
-  el.style.width = `${ el.offsetWidth }px`
-  el.style.height = `${ el.offsetHeight }px`
-}
-
-const leave = (el: any, done: Function) => {
-  el.style.position = 'absolute'
-  el.style.transition = 'none' // 取消过渡动画
-  el.style.opacity = 0 // 立即隐藏元素
-  done()
-}
-
-onMounted(() => {
-  const i = setInterval(refreshCourseList, 1000 * 5)
-  onBeforeUnmount(() => clearInterval(i))
-})
-</script>
-
-<template>
-  <div>
-    <div class="p-4 pb-0">
-      <BubbleTitle subtitle="VIDEOS" title="我的微课视频">
-        <template #action>
-          <UButton
-            :trailing="false"
-            color="primary"
-            icon="i-tabler-plus"
-            label="新建微课"
-            size="md"
-            variant="solid"
-            @click="() => {
-              if (!loginState.is_logged_in) {
-                modal.open(ModalAuthentication)
-                return
-              }
-              onCreateCourseClick()
-            }"
-          />
-        </template>
-      </BubbleTitle>
-      <GradientDivider/>
-    </div>
-    <Transition name="loading-screen">
-      <div
-        v-if="courseList?.data.items.length === 0"
-        class="w-full py-20 flex flex-col justify-center items-center gap-2"
-      >
-        <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>
-      <div v-else class="p-4">
-        <div class="relative grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 fhd:grid-cols-5 gap-4">
-          <TransitionGroup
-            name="card"
-            @beforeLeave="beforeLeave"
-            @leave="leave"
-          >
-            <CGTaskCard
-              v-for="(course, index) in courseList?.data.items"
-              :key="course.task_id || 'unknown' + index"
-              :course="course"
-              @delete="task_id => onCourseDelete(task_id)"
-            />
-          </TransitionGroup>
-        </div>
-        <div class="flex justify-end mt-4">
-          <UPagination v-model="page" :max="9" :page-count="16" :total="courseList?.data.total || 0"/>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-
-</style>

pages/aigc/generation/green-screen.vue

@@ -1,207 +0,0 @@
-<script lang="ts" setup>
-import { useFetchWrapped } from '~/composables/useFetchWrapped'
-import GBTaskCard from '~/components/aigc/generation/GBTaskCard.vue'
-import { useTourState } from '~/composables/useTourState'
-import SlideCreateCourseGreen from '~/components/SlideCreateCourseGreen.vue'
-
-const route = useRoute()
-const slide = useSlideover()
-const toast = useToast()
-const loginState = useLoginState()
-const tourState = useTourState()
-
-const page = ref(1)
-const pageCount = ref(15)
-const searchInput = ref('')
-const debounceSearch = refDebounced(searchInput, 1000)
-
-watch(debounceSearch, () => page.value = 1)
-
-const {
-  data: videoList,
-  refresh: refreshVideoList,
-} = useAsyncData(
-  () => useFetchWrapped<
-    req.gen.GBVideoList & AuthedRequest,
-    BaseResponse<PagedData<GBVideoItem>>
-  >('App.Digital_VideoTask.GetList', {
-    token: loginState.token!,
-    user_id: loginState.user.id,
-    to_user_id: loginState.user.id,
-    page: page.value,
-    perpage: pageCount.value,
-    title: debounceSearch.value,
-  }), {
-    watch: [page, pageCount, debounceSearch],
-  },
-)
-
-const onCreateCourseGreenClick = () => {
-  slide.open(SlideCreateCourseGreen, {
-    onSuccess: () => {
-      refreshVideoList()
-    },
-  })
-}
-
-const onCourseGreenDelete = (task: GBVideoItem) => {
-  if (!task.task_id) return
-  useFetchWrapped<
-    req.gen.GBVideoDelete & AuthedRequest,
-    BaseResponse<resp.gen.GBVideoDelete>
-  >('App.Digital_VideoTask.Delete', {
-    token: loginState.token!,
-    user_id: loginState.user.id,
-    task_id: task.task_id,
-  }).then(res => {
-    if (res.data.code === 1) {
-      refreshVideoList()
-      toast.add({
-        title: '删除成功',
-        description: '已删除任务记录',
-        color: 'green',
-        icon: 'i-tabler-check',
-      })
-    } else {
-      toast.add({
-        title: '删除失败',
-        description: res.msg || '未知错误',
-        color: 'red',
-        icon: 'i-tabler-alert-triangle',
-      })
-    }
-  })
-}
-
-const beforeLeave = (el: any) => {
-  el.style.width = `${ el.offsetWidth }px`
-  el.style.height = `${ el.offsetHeight }px`
-}
-
-const leave = (el: any, done: Function) => {
-  el.style.position = 'absolute'
-  el.style.transition = 'none' // 取消过渡动画
-  el.style.opacity = 0 // 立即隐藏元素
-  done()
-}
-
-onMounted(() => {
-  const i = setInterval(refreshVideoList, 1000 * 5)
-  onBeforeUnmount(() => clearInterval(i))
-
-  const driver = useDriver({
-    showProgress: true,
-    animate: true,
-    smoothScroll: true,
-    disableActiveInteraction: true,
-    popoverOffset: 12,
-    progressText: '{{current}} / {{total}}',
-    prevBtnText: '上一步',
-    nextBtnText: '下一步',
-    doneBtnText: '完成',
-    steps: [
-      {
-        element: '#button-create',
-        popover: {
-          title: '新建视频',
-          description: '点击这里开始新建绿幕视频',
-        },
-      },
-      {
-        element: '#input-search',
-        popover: {
-          title: '搜索生成记录',
-          description: '在这里输入视频标题，可以搜索符合条件的生成记录',
-        },
-      },
-    ],
-  })
-
-  tourState.autoDriveTour(route.fullPath, driver)
-})
-</script>
-
-<template>
-  <div class="h-full">
-    <div class="p-4 pb-0">
-      <BubbleTitle
-        :subtitle="!debounceSearch ? 'GB VIDEOS' : 'SEARCH...'"
-        :title="!debounceSearch ? '我的绿幕视频' : `标题搜索：${debounceSearch.toLocaleUpperCase()}`"
-      >
-        <template #action>
-          <UButtonGroup size="md">
-            <UInput
-              id="input-search"
-              v-model="searchInput"
-              :autofocus="false"
-              :ui="{ icon: { trailing: { pointer: '' } } }"
-              autocomplete="off"
-              placeholder="标题搜索"
-              variant="outline"
-            >
-              <template #trailing>
-                <UButton
-                  v-show="searchInput !== ''"
-                  :padded="false"
-                  color="gray"
-                  icon="i-tabler-x"
-                  variant="link"
-                  @click="searchInput = ''"
-                />
-              </template>
-            </UInput>
-          </UButtonGroup>
-          <UButton
-            id="button-create"
-            :trailing="false"
-            color="primary"
-            icon="i-tabler-plus"
-            label="新建"
-            size="md"
-            variant="solid"
-            @click="onCreateCourseGreenClick"
-          />
-        </template>
-      </BubbleTitle>
-      <GradientDivider/>
-    </div>
-
-    <Transition name="loading-screen">
-      <div
-        v-if="videoList?.data.items.length === 0"
-        class="w-full py-20 flex flex-col justify-center items-center gap-2"
-      >
-        <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>
-      <div v-else>
-        <div class="p-4">
-          <div class="relative grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 fhd:grid-cols-5 gap-4">
-            <TransitionGroup
-              name="card"
-              @beforeLeave="beforeLeave"
-              @leave="leave"
-            >
-              <GBTaskCard
-                v-for="(v, i) in videoList?.data.items"
-                :key="v.task_id"
-                :video="v"
-                @delete="v => onCourseGreenDelete(v)"
-              />
-            </TransitionGroup>
-          </div>
-          <div class="flex justify-end mt-4">
-            <UPagination v-model="page" :max="9" :page-count="pageCount" :total="videoList?.data.total || 0"/>
-          </div>
-        </div>
-      </div>
-    </Transition>
-
-  </div>
-</template>
-
-<style scoped>
-
-</style>