Merge pull request #124 from hotlcc/develop-20240515-页面优化

src/components/misc/DashboardElement.vue

@@ -16,6 +16,15 @@ import { isNullOrEmptyObject } from '@/@core/utils'
 const props = defineProps({
   // 仪表板配置
   config: Object as PropType<DashboardItem>,
+  // 刷新状态
+  refreshStatus: Boolean,
+})
+
+const emit = defineEmits(['update:refreshStatus'])
+
+onUnmounted(() => {
+  // 组件卸载时禁用刷新状态
+  emit('update:refreshStatus', false)
 })
 </script>
 <template>
@@ -37,7 +46,7 @@ const props = defineProps({
         <VIcon class="cursor-move">mdi-drag</VIcon>
       </template>
       <VCardTitle>
-        {{ props.config?.name }}
+        {{ props.config?.name + (props.config?.attrs?.subtitle ? ' - ' + props.config.attrs.subtitle : '') }}
       </VCardTitle>
     </VCardItem>
     <VCardText :class="{ 'p-0': props.config?.attrs.border === false }">

src/pages/dashboard.vue

@@ -172,6 +172,8 @@ function saveDashboardConfig() {
   } catch (error) {
     console.error(error)
   }
+  // 保存后重新获取插件仪表板
+  getDashboardPlugins()
   dialog.value = false
 }
 
@@ -184,6 +186,8 @@ async function getDashboardPlugins() {
     if (!isNullOrEmptyObject(dashboardPlugins.value)) {
       // 下载插件仪表板配置
       dashboardPlugins.value.forEach(async (plugin: { id: string }) => {
+        // 初始化插件仪表板的刷新状态
+        pluginDashboardRefreshStatus.value[plugin.id] = true
         await getPluginDashboard(plugin.id)
       })
     }
@@ -192,6 +196,9 @@ async function getDashboardPlugins() {
   }
 }
 
+// 插件仪表板的刷新状态
+const pluginDashboardRefreshStatus = ref<{ [key: string]: boolean }>({})
+
 // 获取一个插件的仪表板配置项
 async function getPluginDashboard(id: string) {
   try {
@@ -209,7 +216,7 @@ async function getPluginDashboard(id: string) {
         // 定时刷新
         if (res.attrs?.refresh) {
           setTimeout(() => {
-            getPluginDashboard(id)
+            pluginDashboardRefreshStatus.value[id] && getPluginDashboard(id)
           }, res.attrs.refresh * 1000)
         }
       }
@@ -243,7 +250,7 @@ onBeforeMount(async () => {
   >
     <template #item="{ element }">
       <VCol v-if="enableConfig[element.id] && element.cols" v-bind:="element.cols">
-        <DashboardElement :config="element" />
+        <DashboardElement :config="element" v-model:refreshStatus="pluginDashboardRefreshStatus[element.id]" />
       </VCol>
     </template>
   </draggable>
@@ -261,7 +268,10 @@ onBeforeMount(async () => {
       <VCardText>
         <VRow>
           <VCol v-for="item in dashboardConfigs" :key="item.id" cols="6" md="4" sm="4">
-            <VCheckbox v-model="enableConfig[item.id]" :label="item.name" />
+            <VCheckbox
+              v-model="enableConfig[item.id]"
+              :label="item.name + (item.attrs?.subtitle ? ' - ' + item.attrs.subtitle : '')"
+            />
           </VCol>
         </VRow>
       </VCardText>