From aa146b1cdfdcf1631cde28ea890ef074ec347a4e Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Mon, 6 May 2024 18:18:05 +0800
Subject: [PATCH] Update confirmation dialog styles and props in
 UserProfile.vue, FileList.vue, PluginCard.vue, and dashboard.vue

---
 src/api/types.ts                              |   2 +
 src/components/cards/SubscribeCard.vue        | 136 ++++++------------
 src/components/dialog/ImportCodeDialog.vue    |  18 +--
 src/components/dialog/ReorganizeDialog.vue    |   3 +-
 src/components/dialog/SiteAddEditDialog.vue   |  38 ++++-
 src/components/dialog/SubscribeEditDialog.vue |  21 ++-
 src/main.ts                                   |   2 +-
 7 files changed, 100 insertions(+), 120 deletions(-)

diff --git a/src/api/types.ts b/src/api/types.ts
index 41e217fc..1416d945 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -61,6 +61,8 @@ export interface Subscribe {
   save_path: string
   // 时间
   date: string
+  // 编辑框设置项
+  show_edit_dialog: boolean
 }
 
 // 历史记录
diff --git a/src/components/cards/SubscribeCard.vue b/src/components/cards/SubscribeCard.vue
index e37e345c..42de160a 100644
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -1,4 +1,4 @@
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
 import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
 import { formatDateDifference } from '@/@core/utils/formatters'
@@ -25,11 +25,7 @@ const imageLoaded = ref(false)
 const subscribeEditDialog = ref(false)
 
 // 上一次更新时间
-const lastUpdateText = ref(
-    props.media && props.media.last_update
-    ? formatDateDifference(props.media.last_update)
-    : '',
-)
+const lastUpdateText = ref(props.media && props.media.last_update ? formatDateDifference(props.media.last_update) : '')
 
 // 图片加载完成响应
 function imageLoadHandler() {
@@ -38,23 +34,17 @@ function imageLoadHandler() {
 
 // 根据 type 返回不同的图标
 function getIcon() {
-  if (props.media?.type === '电影')
-    return 'mdi-movie'
-  else if (props.media?.type === '电视剧')
-    return 'mdi-television-classic'
-  else
-    return 'mdi-help-circle'
+  if (props.media?.type === '电影') return 'mdi-movie'
+  else if (props.media?.type === '电视剧') return 'mdi-television-classic'
+  else return 'mdi-help-circle'
 }
 
 // 计算百分比
 function getPercentage() {
-  if (props.media?.total_episode === 0)
-    return 0
+  if (props.media?.total_episode === 0) return 0
 
   return Math.round(
-    (((props.media?.total_episode ?? 0) - (props.media?.lack_episode ?? 0))
-      / (props.media?.total_episode ?? 1))
-    * 100,
+    (((props.media?.total_episode ?? 0) - (props.media?.lack_episode ?? 0)) / (props.media?.total_episode ?? 1)) * 100,
   )
 }
 
@@ -71,16 +61,13 @@ function getTextClass() {
 // 删除订阅
 async function removeSubscribe() {
   try {
-    const result: { [key: string]: any } = await api.delete(
-      `subscribe/${props.media?.id}`,
-    )
+    const result: { [key: string]: any } = await api.delete(`subscribe/${props.media?.id}`)
 
     if (result.success) {
       // 通知父组件刷新
       emit('remove')
     }
-  }
-  catch (e) {
+  } catch (e) {
     console.log(e)
   }
 }
@@ -88,15 +75,11 @@ async function removeSubscribe() {
 // 搜索订阅
 async function searchSubscribe() {
   try {
-    const result: { [key: string]: any } = await api.get(
-      `subscribe/search/${props.media?.id}`,
-    )
+    const result: { [key: string]: any } = await api.get(`subscribe/search/${props.media?.id}`)
 
     // 提示
-    if (result.success)
-      $toast.success(`${props.media?.name} 提交搜索请求成功！`)
-  }
-  catch (e) {
+    if (result.success) $toast.success(`${props.media?.name} 提交搜索请求成功！`)
+  } catch (e) {
     console.log(e)
   }
 }
@@ -133,11 +116,7 @@ const dropdownItems = ref([
         router.push({
           path: '/media',
           query: {
-            mediaid: `${
-              props.media?.tmdbid
-                ? `tmdb:${props.media?.tmdbid}`
-                : `douban:${props.media?.doubanid}`
-            }`,
+            mediaid: `${props.media?.tmdbid ? `tmdb:${props.media?.tmdbid}` : `douban:${props.media?.doubanid}`}`,
             type: props.media?.type,
           },
         })
@@ -160,6 +139,7 @@ const dropdownItems = ref([
   <VCard
     :key="props.media?.id"
     :class="`${props.media?.best_version ? 'outline-dashed outline-1' : ''}`"
+    class="flex flex-col"
     @click="editSubscribeDialog"
   >
     <template #image>
@@ -173,11 +153,7 @@ const dropdownItems = ref([
     </template>
     <VCardItem>
       <template #prepend>
-        <VIcon
-          size="1.9rem"
-          :color="getTextColor()"
-          :icon="getIcon()"
-        />
+        <VIcon size="1.9rem" :color="getTextColor()" :icon="getIcon()" />
       </template>
       <VCardTitle :class="getTextClass()">
         {{ props.media?.name }}
@@ -186,14 +162,8 @@ const dropdownItems = ref([
       <template #append>
         <div class="me-n3">
           <IconBtn>
-            <VIcon
-              icon="mdi-dots-vertical"
-              :color="getTextColor()"
-            />
-            <VMenu
-              activator="parent"
-              close-on-content-click
-            >
+            <VIcon icon="mdi-dots-vertical" :color="getTextColor()" />
+            <VMenu activator="parent" close-on-content-click>
               <VList>
                 <VListItem
                   v-for="(item, i) in dropdownItems"
@@ -213,29 +183,15 @@ const dropdownItems = ref([
         </div>
       </template>
     </VCardItem>
-
     <VCardText>
-      <p
-        class="clamp-text mb-0"
-        :class="getTextClass()"
-      >
+      <p class="clamp-text mb-0" :class="getTextClass()">
         {{ props.media?.description }}
       </p>
     </VCardText>
-
     <VCardText class="d-flex justify-space-between align-center flex-wrap">
       <div class="d-flex align-center">
-        <IconBtn
-          icon="mdi-star"
-          :color="getTextColor()"
-          class="me-1"
-        />
-        <span
-          class="text-subtitle-2 me-4"
-          :class="getTextClass()"
-        >{{
-          props.media?.vote
-        }}</span>
+        <IconBtn icon="mdi-star" :color="getTextColor()" class="me-1" />
+        <span class="text-subtitle-2 me-4" :class="getTextClass()">{{ props.media?.vote }}</span>
         <IconBtn
           v-if="props.media?.total_episode"
           v-bind="props"
@@ -243,51 +199,39 @@ const dropdownItems = ref([
           :color="getTextColor()"
           class="me-1"
         />
-        <span
-          v-if="props.media?.season"
-          class="text-subtitle-2 me-4"
-          :class="getTextClass()"
-        >{{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
-          {{ props.media?.total_episode }}</span>
-        <IconBtn
-          v-if="props.media?.username"
-          icon="mdi-account"
-          :color="getTextColor()"
-          class="me-1"
-        />
-        <span
-          v-if="props.media?.username"
-          class="text-subtitle-2 me-4"
-          :class="getTextClass()"
+        <span v-if="props.media?.season" class="text-subtitle-2 me-4" :class="getTextClass()"
+          >{{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
+          {{ props.media?.total_episode }}</span
         >
+        <IconBtn v-if="props.media?.username" icon="mdi-account" :color="getTextColor()" class="me-1" />
+        <span v-if="props.media?.username" class="text-subtitle-2 me-4" :class="getTextClass()">
           {{ props.media?.username }}
         </span>
       </div>
     </VCardText>
-    <VCardText
-      v-if="lastUpdateText"
-      class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300"
-    >
-      <VIcon
-        icon="mdi-download"
-        class="me-1"
-      />
+    <VCardText v-if="lastUpdateText" class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
+      <VIcon icon="mdi-download" class="me-1" />
       {{ lastUpdateText }}
     </VCardText>
-    <VProgressLinear
-      v-if="getPercentage() > 0"
-      :model-value="getPercentage()"
-      bg-color="success"
-      color="success"
-    />
+    <VProgressLinear v-if="getPercentage() > 0" :model-value="getPercentage()" bg-color="success" color="success" />
   </VCard>
   <!-- 订阅编辑弹窗 -->
   <SubscribeEditDialog
     v-if="subscribeEditDialog"
     v-model="subscribeEditDialog"
     :subid="props.media?.id"
-    @remove="() => { emit('remove');subscribeEditDialog = false; }"
-    @save="() => { emit('save');subscribeEditDialog = false; }"
+    @remove="
+      () => {
+        emit('remove')
+        subscribeEditDialog = false
+      }
+    "
+    @save="
+      () => {
+        emit('save')
+        subscribeEditDialog = false
+      }
+    "
     @close="subscribeEditDialog = false"
   />
 </template>
diff --git a/src/components/dialog/ImportCodeDialog.vue b/src/components/dialog/ImportCodeDialog.vue
index bc723628..7fff02cd 100644
--- a/src/components/dialog/ImportCodeDialog.vue
+++ b/src/components/dialog/ImportCodeDialog.vue
@@ -18,27 +18,15 @@ function handleImport() {
 </script>
 
 <template>
-  <VDialog
-    width="40rem"
-    scrollable
-    max-height="85vh"
-  >
-    <VCard
-      :title="props.title"
-      class="rounded-t"
-    >
+  <VDialog width="40rem" scrollable max-height="85vh">
+    <VCard :title="props.title" class="rounded-t">
       <DialogCloseBtn @click="emit('close')" />
       <VCardText class="pt-2">
         <VTextarea v-model="codeString" />
       </VCardText>
       <VCardActions>
         <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="handleImport"
-        >
-          导入
-        </VBtn>
+        <VBtn variant="elevated" @click="handleImport" prepend-icon="mdi-import" class="px-5 me-3"> 导入 </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>
diff --git a/src/components/dialog/ReorganizeDialog.vue b/src/components/dialog/ReorganizeDialog.vue
index d651e86d..aebad517 100644
--- a/src/components/dialog/ReorganizeDialog.vue
+++ b/src/components/dialog/ReorganizeDialog.vue
@@ -287,9 +287,8 @@ onMounted(() => {
         </VForm>
       </VCardText>
       <VCardActions>
-        <VBtn depressed @click="emit('close')"> 取消 </VBtn>
         <VSpacer />
-        <VBtn variant="tonal" @click="transfer"> 开始整理 </VBtn>
+        <VBtn variant="elevated" @click="transfer" prepend-icon="mdi-arrow-right-bold" class="px-5"> 开始整理 </VBtn>
       </VCardActions>
     </VCard>
     <!-- 手动整理进度框 -->
diff --git a/src/components/dialog/SiteAddEditDialog.vue b/src/components/dialog/SiteAddEditDialog.vue
index 3b758afd..e3c17772 100644
--- a/src/components/dialog/SiteAddEditDialog.vue
+++ b/src/components/dialog/SiteAddEditDialog.vue
@@ -5,10 +5,14 @@ import { doneNProgress, startNProgress } from '@/api/nprogress'
 import { numberValidator, requiredValidator } from '@/@validators'
 import api from '@/api'
 import { useDisplay } from 'vuetify'
+import { useConfirm } from 'vuetify-use-dialog'
 
 // 显示器宽度
 const display = useDisplay()
 
+// 确认框
+const createConfirm = useConfirm()
+
 // 输入参数
 const props = defineProps({
   siteid: Number,
@@ -86,6 +90,13 @@ async function addSite() {
 
 // 调用API删除站点信息
 async function deleteSiteInfo() {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认删除站点？`,
+  })
+
+  if (!isConfirmed) return
+
   try {
     const result: { [key: string]: any } = await api.delete(`site/${siteForm.value?.id}`)
     if (result.success) emit('remove')
@@ -220,11 +231,30 @@ async function updateSiteInfo() {
         </VForm>
       </VCardText>
       <VCardActions>
-        <VBtn v-if="props.oper === 'add'" @click="emit('close')"> 取消 </VBtn>
-        <VBtn v-else color="error" @click="deleteSiteInfo"> 删除 </VBtn>
+        <VBtn v-if="props.oper !== 'add'" color="error" @click="deleteSiteInfo" variant="outlined" class="me-3">
+          删除
+        </VBtn>
         <VSpacer />
-        <VBtn v-if="props.oper === 'add'" color="primary" variant="tonal" @click="addSite"> 新增 </VBtn>
-        <VBtn v-else color="primary" variant="tonal" @click="updateSiteInfo"> 保存 </VBtn>
+        <VBtn
+          v-if="props.oper === 'add'"
+          color="primary"
+          variant="elevated"
+          @click="addSite"
+          prepend-icon="mdi-plus"
+          class="px-5"
+        >
+          新增
+        </VBtn>
+        <VBtn
+          v-else
+          color="primary"
+          variant="elevated"
+          @click="updateSiteInfo"
+          prepend-icon="mdi-content-save"
+          class="px-5"
+        >
+          保存
+        </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>
diff --git a/src/components/dialog/SubscribeEditDialog.vue b/src/components/dialog/SubscribeEditDialog.vue
index 19c04b73..8c95b64b 100644
--- a/src/components/dialog/SubscribeEditDialog.vue
+++ b/src/components/dialog/SubscribeEditDialog.vue
@@ -4,10 +4,14 @@ import { numberValidator } from '@/@validators'
 import api from '@/api'
 import type { Site, Subscribe } from '@/api/types'
 import { useDisplay } from 'vuetify'
+import { useConfirm } from 'vuetify-use-dialog'
 
 // 显示器宽度
 const display = useDisplay()
 
+// 确认框
+const createConfirm = useConfirm()
+
 // 输入参数
 const props = defineProps({
   subid: Number,
@@ -145,6 +149,12 @@ async function getSubscribeInfo() {
 
 // 删除订阅
 async function removeSubscribe() {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认取消订阅？`,
+  })
+
+  if (!isConfirmed) return
   try {
     const result: { [key: string]: any } = await api.delete(`subscribe/${props.subid}`)
 
@@ -361,9 +371,16 @@ onMounted(() => {
       </VCardText>
 
       <VCardActions>
-        <VBtn v-if="!props.default" color="error" @click="removeSubscribe"> 取消订阅 </VBtn>
+        <VBtn v-if="!props.default" color="error" @click="removeSubscribe" variant="outlined" class="me-3">
+          取消订阅
+        </VBtn>
         <VSpacer />
-        <VBtn variant="tonal" @click=";`${props.default ? saveDefaultSubscribeConfig() : updateSubscribeInfo()}`">
+        <VBtn
+          variant="elevated"
+          @click=";`${props.default ? saveDefaultSubscribeConfig() : updateSubscribeInfo()}`"
+          prepend-icon="mdi-content-save"
+          class="px-5"
+        >
           保存
         </VBtn>
       </VCardActions>
diff --git a/src/main.ts b/src/main.ts
index 31f4c210..14b05e6d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -46,7 +46,7 @@ app
   .use(VuetifyUseDialog, {
     confirmDialog: {
       dialogProps: {
-        maxWidth: '50rem',
+        maxWidth: '40rem',
       },
       confirmationButtonProps: {
         variant: 'elevated',