feat: 片头素材删除确认

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
+        <div v-if="type === 'user'">
-          size="xs"
+          <!-- <UButton
-          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>
 

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">