refactor(deps): migrate to nuxt v4

app/pages/generation/materials.vue

@@ -0,0 +1,424 @@
+<script lang="ts" setup>
+import type { FormSubmitEvent } from '#ui/types'
+import { number, object, string, type InferType } from 'yup'
+
+const loginState = useLoginState()
+const toast = useToast()
+
+const isCreateSystemTitlesSlideActive = ref(false)
+const isUserTitlesRequestModalActive = ref(false)
+
+const systemPagination = reactive({
+  page: 1,
+  pageSize: 15,
+})
+
+const userPagination = reactive({
+  page: 1,
+  pageSize: 15,
+})
+
+const {
+  data: systemTitlesTemplate,
+  status: systemTitlesTemplateStatus,
+  refresh: refreshSystemTitlesTemplate,
+} = useAsyncData(
+  'systemTitlesTemplate',
+  () =>
+    useFetchWrapped<
+      PagedDataRequest & AuthedRequest,
+      BaseResponse<PagedData<TitlesTemplate>>
+    >('App.Digital_Titles.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      page: systemPagination.page,
+      perpage: systemPagination.pageSize,
+    }),
+  {
+    watch: [systemPagination],
+  }
+)
+
+const {
+  data: userTitlesTemplate,
+  status: userTitlesTemplateStatus,
+  refresh: refreshUserTitlesTemplate,
+} = useAsyncData(
+  'userTitlesTemplate',
+  () =>
+    useFetchWrapped<
+      PagedDataRequest & AuthedRequest & { process_status: 0 | 1 },
+      BaseResponse<PagedData<TitlesTemplate>>
+    >('App.User_UserTitles.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      page: userPagination.page,
+      perpage: userPagination.pageSize,
+      process_status: 1,
+    }),
+  {
+    watch: [userPagination],
+  }
+)
+
+const { data: userTitlesRequests, refresh: refreshUserTitlesRequests } =
+  useAsyncData('userTitlesTemplateRequests', () =>
+    useFetchWrapped<
+      PagedDataRequest & AuthedRequest & { process_status: 0 | 1 },
+      BaseResponse<PagedData<TitlesTemplate>>
+    >('App.User_UserTitles.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      process_status: 0,
+    })
+  )
+
+const userTitlesSchema = object({
+  title_id: number().required().moreThan(0, '模板 ID 无效'),
+  title: string().required('请填写课程名称'),
+  description: string().required('请填写主讲人名字'),
+  remark: string().optional(),
+})
+
+type UserTitlesSchema = InferType<typeof userTitlesSchema>
+
+const userTitlesState = reactive({
+  title_id: 0,
+  title: '',
+  description: '',
+  remark: '',
+})
+
+const onUserTitlesRequest = (titles: TitlesTemplate) => {
+  userTitlesState.title_id = titles.id
+  isUserTitlesRequestModalActive.value = true
+}
+
+const onSystemTitlesDelete = (titles: TitlesTemplate) => {
+  useFetchWrapped<
+    { title_id: number } & AuthedRequest,
+    BaseResponse<{ code: 0 | 1 }>
+  >('App.Digital_Titles.Delete', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    title_id: titles.id,
+  })
+    .then((res) => {
+      if (res.ret === 200 && res.data.code === 1) {
+        toast.add({
+          title: '删除成功',
+          description: '已删除系统片头模板',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+      } else {
+        toast.add({
+          title: '删除失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    })
+    .catch((error) => {
+      toast.add({
+        title: '删除失败',
+        description: error instanceof Error ? error.message : '未知错误',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    })
+    .finally(() => {
+      systemPagination.page = 1
+      refreshSystemTitlesTemplate()
+    })
+}
+
+const onUserTitlesDelete = (titles: TitlesTemplate) => {
+  useFetchWrapped<
+    Pick<req.gen.TitlesTemplateRequest, 'to_user_id'> & {
+      user_title_id: number
+    } & AuthedRequest,
+    BaseResponse<any>
+  >('App.User_UserTitles.DeleteConn', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    to_user_id: loginState.user.id,
+    user_title_id: titles.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(() => {
+      userPagination.page = 1
+      refreshUserTitlesTemplate()
+    })
+}
+
+const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
+  useFetchWrapped<
+    req.gen.TitlesTemplateRequest & AuthedRequest,
+    BaseResponse<any>
+  >('App.User_UserTitles.CreateConn', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    to_user_id: loginState.user.id,
+    ...event.data,
+  })
+    .then((res) => {
+      if (res.ret === 200) {
+        userTitlesState.title = ''
+        userTitlesState.description = ''
+        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(() => {
+      isUserTitlesRequestModalActive.value = false
+      userPagination.page = 1
+      refreshUserTitlesRequests()
+    })
+}
+</script>
+
+<template>
+  <div class="h-full">
+    <div class="p-4 pb-0">
+      <BubbleTitle
+        title="片头片尾模版"
+        subtitle="Materials"
+      >
+        <template #action>
+          <UButton
+            color="amber"
+            icon="tabler:plus"
+            variant="soft"
+            v-if="loginState.user.auth_code === 2"
+            @click="isCreateSystemTitlesSlideActive = true"
+          >
+            创建模板
+          </UButton>
+        </template>
+      </BubbleTitle>
+      <GradientDivider />
+    </div>
+    <div class="p-4">
+      <div
+        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
+        v-if="systemTitlesTemplateStatus === 'pending'"
+      >
+        <USkeleton
+          class="w-full aspect-video"
+          v-for="i in systemPagination.pageSize"
+          :key="i"
+        />
+      </div>
+      <div
+        v-else-if="systemTitlesTemplate?.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
+        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
+        v-else
+      >
+        <AigcGenerationTitlesTemplate
+          v-for="titles in systemTitlesTemplate?.data.items"
+          :data="titles"
+          type="system"
+          :key="titles.id"
+          @user-titles-request="onUserTitlesRequest"
+          @system-titles-delete="onSystemTitlesDelete"
+        />
+      </div>
+    </div>
+    <div class="p-4 pb-0 pt-12">
+      <BubbleTitle
+        title="我的片头片尾"
+        :bubble="false"
+      ></BubbleTitle>
+      <GradientDivider />
+    </div>
+    <div class="p-4 pt-2">
+      <UAlert
+        v-if="userTitlesRequests?.data.total"
+        color="primary"
+        icon="tabler:info-circle"
+        variant="subtle"
+        class="mb-4"
+      >
+        <template #title>
+          有 {{ userTitlesRequests?.data.total }} 个片头正在制作中
+        </template>
+        <template #description>
+          <div class="flex gap-2">
+            <div
+              v-for="titles in userTitlesRequests?.data.items"
+              :key="titles.id"
+            >
+              <p>
+                {{ titles.title }}
+              </p>
+            </div>
+          </div>
+        </template>
+      </UAlert>
+      <div
+        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
+        v-if="userTitlesTemplateStatus === 'pending'"
+      >
+        <USkeleton
+          class="w-full aspect-video"
+          v-for="i in userPagination.pageSize"
+          :key="i"
+        />
+      </div>
+      <div
+        v-else-if="userTitlesTemplate?.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
+        class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
+        v-else
+      >
+        <AigcGenerationTitlesTemplate
+          v-for="titles in userTitlesTemplate?.data.items"
+          type="user"
+          :data="titles"
+          :key="titles.id"
+          @user-titles-delete="onUserTitlesDelete"
+        />
+      </div>
+    </div>
+
+    <UModal v-model="isUserTitlesRequestModalActive">
+      <UCard
+        :ui="{
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
+            >
+              <p>使用模板</p>
+            </div>
+            <UButton
+              class="-my-1"
+              color="gray"
+              icon="i-tabler-x"
+              variant="ghost"
+              @click="isUserTitlesRequestModalActive = false"
+            />
+          </div>
+        </template>
+
+        <div>
+          <UForm
+            class="space-y-4"
+            :schema="userTitlesSchema"
+            :state="userTitlesState"
+            @submit="onUserTitlesSubmit"
+          >
+            <UFormGroup
+              label="课程名称"
+              name="title"
+              required
+            >
+              <UInput v-model="userTitlesState.title" />
+            </UFormGroup>
+            <UFormGroup
+              label="主讲人"
+              name="description"
+              required
+            >
+              <UInput v-model="userTitlesState.description" />
+            </UFormGroup>
+            <UFormGroup
+              label="备注"
+              name="remark"
+              help="可选，可以在此处填写学校、单位等额外信息"
+            >
+              <UTextarea v-model="userTitlesState.remark" />
+            </UFormGroup>
+            <UFormGroup name="title_id">
+              <UInput
+                type="hidden"
+                v-model="userTitlesState.title_id"
+              />
+            </UFormGroup>
+
+            <UAlert
+              icon="tabler:info-circle"
+              color="primary"
+              variant="subtle"
+              title="片头片尾模板"
+              description="提交模板相应字段后，待工作人员制作好后即可使用"
+            />
+
+            <div class="flex justify-end gap-2">
+              <UButton
+                color="primary"
+                variant="soft"
+                label="取消"
+                @click="isUserTitlesRequestModalActive = false"
+              />
+              <UButton
+                color="primary"
+                type="submit"
+              >
+                提交
+              </UButton>
+            </div>
+          </UForm>
+        </div>
+      </UCard>
+    </UModal>
+  </div>
+</template>
+
+<style scoped></style>