From edaebbbc853063ee4bac1c8194f9afb093113a4d Mon Sep 17 00:00:00 2001
From: Timothy Yin <master@uniiem.com>
Date: Mon, 17 Feb 2025 20:22:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=89=87=E5=A4=B4=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E7=A1=AE=E8=AE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/aigc/generation/TitlesTemplate.vue | 62 ++++++++++++++++---
 pages/generation/materials.vue                | 15 ++++-
 2 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/components/aigc/generation/TitlesTemplate.vue b/components/aigc/generation/TitlesTemplate.vue
index e21bee9..7c6ec24 100644
--- a/components/aigc/generation/TitlesTemplate.vue
+++ b/components/aigc/generation/TitlesTemplate.vue
@@ -88,25 +88,69 @@ const closePreview = () => {
             color="white"
             @click="emit('user-titles-request', data)"
           />
-          <UButton
+          <!-- <UButton
             icon="tabler:trash"
             color="red"
             @click="emit('system-titles-delete', data)"
             v-if="loginState.user.auth_code === 2"
-          />
+          /> -->
+          <UPopover v-if="loginState.user.auth_code === 2">
+            <UButton
+              icon="tabler:trash"
+              color="red"
+            />
+
+            <template #panel="{ close }">
+              <div class="flex flex-col p-2 gap-2">
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  素材删除后不可恢复，确认删除？
+                </p>
+                <UButton
+                  class="w-fit"
+                  icon="tabler:trash"
+                  label="确认删除"
+                  color="red"
+                  size="xs"
+                  @click="emit('system-titles-delete', data)"
+                />
+              </div>
+            </template>
+          </UPopover>
         </UButtonGroup>
-        <UButtonGroup
-          size="xs"
-          v-if="type === 'user'"
-        >
-          <UButton
+        <div v-if="type === 'user'">
+          <!-- <UButton
             icon="tabler:trash"
             label="删除素材"
             variant="soft"
             color="red"
             @click="emit('user-titles-delete', data)"
-          />
-        </UButtonGroup>
+          /> -->
+          <UPopover>
+            <UButton
+              icon="tabler:trash"
+              label="删除素材"
+              variant="soft"
+              color="red"
+              size="xs"
+            />
+
+            <template #panel="{ close }">
+              <div class="flex flex-col p-2 gap-2">
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                  素材删除后不可恢复，确认删除？
+                </p>
+                <UButton
+                  class="w-fit"
+                  icon="tabler:trash"
+                  label="确认删除"
+                  color="red"
+                  size="xs"
+                  @click="emit('user-titles-delete', data)"
+                />
+              </div>
+            </template>
+          </UPopover>
+        </div>
       </div>
     </div>
 
diff --git a/pages/generation/materials.vue b/pages/generation/materials.vue
index c350069..58f2ec7 100644
--- a/pages/generation/materials.vue
+++ b/pages/generation/materials.vue
@@ -5,6 +5,7 @@ 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({
@@ -168,7 +169,19 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
       <BubbleTitle
         title="片头片尾模版"
         subtitle="Materials"
-      ></BubbleTitle>
+      >
+      <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">