feat(ppt-templates): 添加PPT模板库页面

pages/generation.vue

@@ -33,6 +33,11 @@ const navList = ref<
     icon: 'tabler:keyframes',
     to: '/generation/materials',
   },
+  {
+    label: 'PPT 模板库',
+    icon: 'tabler:file-type-ppt',
+    to: '/generation/ppt-templates',
+  },
   {
     label: '用户管理',
     icon: 'tabler:users',

pages/generation/ppt-templates.vue

@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+const loginState = useLoginState()
+
+const { data: pptCategories } = useAsyncData('pptCategories', () =>
+  useFetchWrapped<
+    PagedDataRequest & AuthedRequest,
+    BaseResponse<PagedData<PPTCategory>>
+  >('App.Digital_PowerPointCat.GetList', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    page: 1,
+    perpage: 20,
+  })
+)
+
+const selectedCat = ref<number>(0)
+const pagination = reactive({
+  page: 1,
+  perpage: 18,
+})
+
+const { data: pptTemplates } = useAsyncData(
+  'pptTemplates',
+  () =>
+    useFetchWrapped<
+      PagedDataRequest & { type: string | number } & AuthedRequest,
+      BaseResponse<PagedData<PPTTemplate>>
+    >('App.Digital_PowerPoint.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      page: pagination.page,
+      perpage: pagination.perpage,
+      type: selectedCat.value === 0 ? '' : selectedCat.value,
+    }),
+  {
+    watch: [selectedCat, pagination],
+  }
+)
+
+const onDownloadClick = (ppt: PPTTemplate) => {
+  const { download } = useDownload(ppt.file_url, `${ppt.title}.pptx`)
+  download()
+}
+</script>
+
+<template>
+  <div>
+    <div class="p-4 pb-0">
+      <BubbleTitle
+        title="PPT 模板库"
+        subtitle="Slide Templates"
+      />
+      <GradientDivider />
+    </div>
+    <div class="p-4 pt-0">
+      <!-- cat selector -->
+      <div class="flex flex-wrap gap-2">
+        <div
+          v-for="cat in [
+            { id: 0, type: '全部' },
+            ...(pptCategories?.data.items || []),
+          ]"
+          @click="selectedCat = cat.id"
+          :key="cat.id"
+          :class="{
+            'bg-primary text-white': selectedCat === cat.id,
+            'bg-gray-100 text-gray-500': selectedCat !== cat.id,
+          }"
+          class="rounded-lg px-4 py-2 text-sm cursor-pointer"
+        >
+          {{ cat.type }}
+        </div>
+      </div>
+
+      <div class="space-y-4">
+        <div
+          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 mt-4"
+        >
+          <div
+            v-for="ppt in pptTemplates?.data.items"
+            :key="ppt.id"
+            class="relative bg-white rounded-lg shadow-md overflow-hidden"
+          >
+            <NuxtImg
+              :src="ppt.preview_url"
+              :alt="ppt.title"
+              class="w-full aspect-video object-cover"
+            />
+            <div
+              class="absolute inset-x-0 bottom-0 p-3 pt-6 flex justify-between items-end bg-gradient-to-t from-black/50 to-transparent"
+            >
+              <div class="space-y-0.5">
+                <h3 class="text-base font-bold text-white">{{ ppt.title }}</h3>
+                <p class="text-xs font-medium text-neutral-400">
+                  {{ ppt.description }}
+                </p>
+              </div>
+              <div>
+                <UButton
+                  label="下载"
+                  size="sm"
+                  color="primary"
+                  icon="tabler:download"
+                  @click="onDownloadClick(ppt)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="w-full flex justify-end">
+          <UPagination
+            v-if="pptTemplates?.data.total > pagination.perpage"
+            :total="pptTemplates?.data.total"
+            :page-count="pagination.perpage"
+            :max="9"
+            v-model="pagination.page"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>