From fc877ed83635fc9cfd9024be129e3a13cb196823 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 16 May 2024 20:31:30 +0800
Subject: [PATCH] fix ui

---
 src/api/types.ts                              | 13 +++-
 src/components/cards/MediaCard.vue            |  5 +-
 src/components/cards/PluginAppCard.vue        |  1 +
 src/components/cards/PluginCard.vue           | 10 +--
 src/components/cards/SiteCard.vue             |  1 +
 src/components/dialog/ReorganizeDialog.vue    |  3 +-
 src/components/dialog/SiteAddEditDialog.vue   |  3 +-
 src/components/dialog/SubscribeEditDialog.vue |  4 +-
 .../dialog/SubscribeHistoryDialog.vue         |  3 +-
 src/components/misc/MediaIdSelector.vue       |  1 +
 src/components/render/DashboardRender.vue     | 11 +---
 src/components/render/FormRender.vue          | 64 +++++--------------
 src/components/render/PageRender.vue          | 12 +---
 src/pages/dashboard.vue                       | 10 +--
 14 files changed, 53 insertions(+), 88 deletions(-)

diff --git a/src/api/types.ts b/src/api/types.ts
index 67e5b6d1..cc1d001b 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -447,6 +447,17 @@ export interface Plugin {
   add_time?: number
 }
 
+// 渲染结构
+export interface RenderProps {
+  component: string
+  text?: string
+  html?: string
+  content?: any
+  slots?: any
+  props?: any
+  events?: any
+}
+
 // 仪表板组件
 export interface DashboardItem {
   // ID
@@ -458,7 +469,7 @@ export interface DashboardItem {
   // col列数
   cols: { [key: string]: number }
   // 页面元素
-  elements: { [key: string]: any }[]
+  elements: RenderProps[]
 }
 
 // 种子信息
diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 64dae602..3b1e716c 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -477,7 +477,10 @@ function getYear(airDate: string) {
   <VBottomSheet v-if="subscribeSeasonDialog" v-model="subscribeSeasonDialog" inset scrollable>
     <VCard class="rounded-t">
       <DialogCloseBtn @click="subscribeSeasonDialog = false" />
-      <VCardTitle class="pe-10"> 订阅 - {{ props.media?.title }} </VCardTitle>
+      <VCardItem>
+        <VCardTitle class="pe-10"> 订阅 - {{ props.media?.title }} </VCardTitle>
+      </VCardItem>
+      <VDivider />
       <VCardText>
         <VList v-model:selected="seasonsSelected" lines="three" select-strategy="classic">
           <VListItem v-for="(item, i) in seasonInfos" :key="i" :value="item">
diff --git a/src/components/cards/PluginAppCard.vue b/src/components/cards/PluginAppCard.vue
index e00d55a5..ffbd4984 100644
--- a/src/components/cards/PluginAppCard.vue
+++ b/src/components/cards/PluginAppCard.vue
@@ -215,6 +215,7 @@ const dropdownItems = ref([
   <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
     <VCard :title="`${props.plugin?.plugin_name} 更新说明`">
       <DialogCloseBtn @click="releaseDialog = false" />
+      <VDivider />
       <VersionHistory :history="props.plugin?.history" />
     </VCard>
   </VDialog>
diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
index aa470d69..1657a42c 100644
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -435,6 +435,7 @@ watch(
   <VDialog v-model="pluginConfigDialog" scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
     <VCard :title="`${props.plugin?.plugin_name} - 配置`" class="rounded-t">
       <DialogCloseBtn v-model="pluginConfigDialog" />
+      <VDivider />
       <VCardText>
         <FormRender v-for="(item, index) in pluginFormItems" :key="index" :config="item" :form="pluginConfigForm" />
       </VCardText>
@@ -452,13 +453,10 @@ watch(
   <VDialog v-model="pluginInfoDialog" scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
     <VCard :title="`${props.plugin?.plugin_name}`" class="rounded-t">
       <DialogCloseBtn v-model="pluginInfoDialog" />
-      <VCardText>
+      <VCardText class="min-h-40">
         <PageRender @action="loadPluginPage" v-for="(item, index) in pluginPageItems" :key="index" :config="item" />
       </VCardText>
-      <VCardActions class="pt-3">
-        <VSpacer />
-        <VBtn @click="showPluginConfig" variant="elevated" prepend-icon="mdi-cog" class="px-5"> 配置 </VBtn>
-      </VCardActions>
+      <VFab icon="mdi-cog" location="bottom end" size="x-large" fixed app appear @click="showPluginConfig" />
     </VCard>
   </VDialog>
 
@@ -469,7 +467,9 @@ watch(
   <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
     <VCard :title="`${props.plugin?.plugin_name} 更新说明`">
       <DialogCloseBtn @click="releaseDialog = false" />
+      <VDivider />
       <VersionHistory :history="props.plugin?.history" />
+      <VDivider />
       <VCardText>
         <VBtn @click="updatePlugin" block>
           <template #prepend>
diff --git a/src/components/cards/SiteCard.vue b/src/components/cards/SiteCard.vue
index 2550d805..c0d54f98 100644
--- a/src/components/cards/SiteCard.vue
+++ b/src/components/cards/SiteCard.vue
@@ -308,6 +308,7 @@ onMounted(() => {
     <!-- Dialog Content -->
     <VCard :title="`浏览站点 - ${cardProps.site?.name}`">
       <DialogCloseBtn @click="resourceDialog = false" />
+      <VDivider />
       <VCardText class="pt-2">
         <SiteTorrentTable :site="cardProps.site?.id" />
       </VCardText>
diff --git a/src/components/dialog/ReorganizeDialog.vue b/src/components/dialog/ReorganizeDialog.vue
index 2b022e7a..33a5a7ac 100644
--- a/src/components/dialog/ReorganizeDialog.vue
+++ b/src/components/dialog/ReorganizeDialog.vue
@@ -169,7 +169,8 @@ onMounted(() => {
       class="rounded-t"
     >
       <DialogCloseBtn @click="emit('close')" />
-      <VCardText class="pt-2">
+      <VDivider />
+      <VCardText>
         <VForm @submit.prevent="() => {}">
           <VRow>
             <VCol cols="12" md="8">
diff --git a/src/components/dialog/SiteAddEditDialog.vue b/src/components/dialog/SiteAddEditDialog.vue
index d6553458..2ad8d7b7 100644
--- a/src/components/dialog/SiteAddEditDialog.vue
+++ b/src/components/dialog/SiteAddEditDialog.vue
@@ -133,7 +133,8 @@ async function updateSiteInfo() {
       class="rounded-t"
     >
       <DialogCloseBtn @click="emit('close')" />
-      <VCardText class="pt-2">
+      <VDivider />
+      <VCardText>
         <VForm @submit.prevent="() => {}">
           <VRow>
             <VCol cols="12" md="6">
diff --git a/src/components/dialog/SubscribeEditDialog.vue b/src/components/dialog/SubscribeEditDialog.vue
index 86c6cad6..ba20e264 100644
--- a/src/components/dialog/SubscribeEditDialog.vue
+++ b/src/components/dialog/SubscribeEditDialog.vue
@@ -269,7 +269,8 @@ onMounted(() => {
       }`"
       class="rounded-t"
     >
-      <VCardText class="pt-2">
+      <VDivider />
+      <VCardText>
         <DialogCloseBtn @click="emit('close')" />
         <VForm @submit.prevent="() => {}">
           <VRow>
@@ -369,7 +370,6 @@ onMounted(() => {
           </VRow>
         </VForm>
       </VCardText>
-
       <VCardActions class="pt-3">
         <VBtn v-if="!props.default" color="error" @click="removeSubscribe" variant="outlined" class="me-3">
           取消订阅
diff --git a/src/components/dialog/SubscribeHistoryDialog.vue b/src/components/dialog/SubscribeHistoryDialog.vue
index 1dd5c417..9e93486e 100644
--- a/src/components/dialog/SubscribeHistoryDialog.vue
+++ b/src/components/dialog/SubscribeHistoryDialog.vue
@@ -134,9 +134,10 @@ const dropdownItems = ref([
 <template>
   <VDialog scrollable max-width="50rem" :fullscreen="!display.mdAndUp.value">
     <VCard class="mx-auto" width="100%">
-      <VCardItem class="pb-0">
+      <VCardItem>
         <VCardTitle>{{ props.type + '订阅历史' }}</VCardTitle>
       </VCardItem>
+      <VDivider />
       <DialogCloseBtn
         @click="
           () => {
diff --git a/src/components/misc/MediaIdSelector.vue b/src/components/misc/MediaIdSelector.vue
index b7606360..be1b11b9 100644
--- a/src/components/misc/MediaIdSelector.vue
+++ b/src/components/misc/MediaIdSelector.vue
@@ -110,6 +110,7 @@ onMounted(() => {
         }
       "
     />
+    <VDivider />
     <VList v-if="items.length > 0" lines="three">
       <template v-for="(item, i) in items" :key="i">
         <VListItem @click="selectMedia(item)">
diff --git a/src/components/render/DashboardRender.vue b/src/components/render/DashboardRender.vue
index 0179fe33..e3733a15 100644
--- a/src/components/render/DashboardRender.vue
+++ b/src/components/render/DashboardRender.vue
@@ -1,16 +1,7 @@
 <script lang="ts" setup>
+import { RenderProps } from '@/api/types'
 import { type PropType } from 'vue'
 
-// 组件接口
-interface RenderProps {
-  component: string
-  text: string
-  html: string
-  content?: any
-  slots?: any
-  props?: any
-}
-
 // 输入参数
 const elementProps = defineProps({
   config: Object as PropType<RenderProps>,
diff --git a/src/components/render/FormRender.vue b/src/components/render/FormRender.vue
index d172ec27..d639b52e 100644
--- a/src/components/render/FormRender.vue
+++ b/src/components/render/FormRender.vue
@@ -1,15 +1,7 @@
 <script lang="ts" setup>
+import { RenderProps } from '@/api/types'
 import { type PropType, ref } from 'vue'
 
-// 组件接口
-interface RenderProps {
-  component: string
-  text: string
-  html: string
-  content?: any
-  props?: any
-}
-
 // 输入参数
 const elementProps = defineProps({
   config: Object as PropType<RenderProps>,
@@ -17,13 +9,15 @@ const elementProps = defineProps({
 })
 
 // 配置元素
-const formItem = ref<RenderProps>(elementProps.config ?? {
-  component: 'div',
-  text: '',
-  html: '',
-  props: {},
-  content: [],
-})
+const formItem = ref<RenderProps>(
+  elementProps.config ?? {
+    component: 'div',
+    text: '',
+    html: '',
+    props: {},
+    content: [],
+  },
+)
 
 // 配置数据
 const formData = ref<any>(elementProps.form || {})
@@ -37,53 +31,27 @@ const formData = ref<any>(elementProps.form || {})
     v-model:value="formData[formItem.props?.modelvalue]"
   >
     {{ formItem.text }}
-    <template
-      v-for="(innerItem, innerIndex) in (formItem.content || [])"
-      :key="innerIndex"
-    >
+    <template v-for="(innerItem, innerIndex) in formItem.content || []" :key="innerIndex">
       <FormRender
         v-if="!!innerItem.props?.modelvalue"
         v-model:value="formData[innerItem.props?.modelvalue]"
         :config="innerItem"
         :form="formData"
       />
-      <FormRender
-        v-else
-        v-model="formData[innerItem.props?.model]"
-        :config="innerItem"
-        :form="formData"
-      />
+      <FormRender v-else v-model="formData[innerItem.props?.model]" :config="innerItem" :form="formData" />
     </template>
   </Component>
-  <Component
-    :is="formItem.component"
-    v-else-if="formItem.html"
-    v-bind="formItem.props"
-    v-html="formItem.html"
-  />
-  <Component
-    :is="formItem.component"
-    v-else
-    v-bind="formItem.props"
-    v-model="formData[formItem.props?.model]"
-  >
+  <Component :is="formItem.component" v-else-if="formItem.html" v-bind="formItem.props" v-html="formItem.html" />
+  <Component :is="formItem.component" v-else v-bind="formItem.props" v-model="formData[formItem.props?.model]">
     {{ formItem.text }}
-    <template
-      v-for="(innerItem, innerIndex) in (formItem.content || [])"
-      :key="innerIndex"
-    >
+    <template v-for="(innerItem, innerIndex) in formItem.content || []" :key="innerIndex">
       <FormRender
         v-if="!!innerItem.props?.modelvalue"
         v-model:value="formData[innerItem.props?.modelvalue]"
         :config="innerItem"
         :form="formData"
       />
-      <FormRender
-        v-else
-        v-model="formData[innerItem.props?.model]"
-        :config="innerItem"
-        :form="formData"
-      />
+      <FormRender v-else v-model="formData[innerItem.props?.model]" :config="innerItem" :form="formData" />
     </template>
   </Component>
 </template>
diff --git a/src/components/render/PageRender.vue b/src/components/render/PageRender.vue
index 74bd1251..74066735 100644
--- a/src/components/render/PageRender.vue
+++ b/src/components/render/PageRender.vue
@@ -3,21 +3,11 @@ import { isNullOrEmptyObject } from '@/@core/utils'
 import api from '@/api'
 import { type PropType } from 'vue'
 import ProgressDialog from '../dialog/ProgressDialog.vue'
+import { RenderProps } from '@/api/types'
 
 // 定议外部事件
 const emit = defineEmits(['action'])
 
-// 组件接口
-interface RenderProps {
-  component: string
-  text: string
-  html: string
-  content?: any
-  slots?: any
-  props?: any
-  events?: any
-}
-
 // 输入参数
 const elementProps = defineProps({
   config: Object as PropType<RenderProps>,
diff --git a/src/pages/dashboard.vue b/src/pages/dashboard.vue
index d2591fa5..97abf784 100644
--- a/src/pages/dashboard.vue
+++ b/src/pages/dashboard.vue
@@ -2,14 +2,10 @@
 import draggable from 'vuedraggable'
 import api from '@/api'
 import { isNullOrEmptyObject } from '@/@core/utils'
-import { useDisplay } from 'vuetify'
 import { DashboardItem } from '@/api/types'
 import store from '@/store'
 import DashboardElement from '@/components/misc/DashboardElement.vue'
 
-// 显示器宽度
-const display = useDisplay()
-
 // 从Vuex Store中获取superuser信息
 const superUser = store.state.auth.superUser
 
@@ -107,6 +103,9 @@ const dashboardConfigs = ref<DashboardItem[]>([
 // 有仪表板的插件
 const dashboardPlugins = ref<any[]>([])
 
+// 插件仪表板的刷新状态
+const pluginDashboardRefreshStatus = ref<{ [key: string]: boolean }>({})
+
 // 弹窗
 const dialog = ref(false)
 
@@ -196,9 +195,6 @@ async function getDashboardPlugins() {
   }
 }
 
-// 插件仪表板的刷新状态
-const pluginDashboardRefreshStatus = ref<{ [key: string]: boolean }>({})
-
 // 获取一个插件的仪表板配置项
 async function getPluginDashboard(id: string) {
   try {