添加插件页面组件显示

src/views/config/PluginConfigPage.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ref, shallowRef, provide, watch, computed } from 'vue';
+import { loadModule } from "vue3-sfc-loader/dist/vue3-sfc-loader"
+import * as Vue from 'vue'
+import { ref, shallowRef, provide, watch, computed, defineAsyncComponent, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { request } from '@/utils/request';
 
@@ -8,8 +10,10 @@ import UiParentCard from '@/components/shared/UiParentCard.vue';
 import RecursiveEditor from './RecursiveEditor.vue';
 
 import { useSnackbarStore } from '@/stores/snackbar';
+import { useServerStore } from '@/stores/server';
 
 const route = useRoute();
+const apiStore = useServerStore();
 const snackbarStore = useSnackbarStore()
 
 const breadcrumbs = ref([
@@ -30,9 +34,52 @@ const isFetchingConfigs = ref(false)
 const changeConfig = ref([])
 const setConfig = ref([])
 const page = ref(1)
+const widgets = ref([])
+
 const pageCount = computed(() => {
   return Math.ceil(changeConfig.value.length / 5)
 })
+const widgetsList = computed(() => {
+  const sortColsArray = (arr) => {
+    let result = []
+    let tempArr = [...arr]
+
+    while (tempArr.length > 0) {
+      let rowSum = 0
+      let rowIndexes = []
+
+      for (let i = 0; i < tempArr.length; i++) {
+        if (rowSum + tempArr[i].col <= 12) {
+          rowSum += tempArr[i].col
+          rowIndexes.push(i)
+        }
+      }
+
+      if (rowSum < 12 && tempArr.length > rowIndexes.length) {
+        let diff = 12 - rowSum
+        let closest = tempArr
+          .map((obj, index) => ({ index, diff: Math.abs(diff - obj.col) }))
+          .filter(obj => !rowIndexes.includes(obj.index))
+          .sort((a, b) => a.diff - b.diff)[0]
+
+        if (closest && closest.diff <= diff) {
+          rowSum += tempArr[closest.index].col
+          rowIndexes.push(closest.index)
+        }
+      }
+
+      result.push(...rowIndexes.map(index => tempArr[index]))
+      tempArr = tempArr.filter((_, index) => !rowIndexes.includes(index))
+    }
+
+    return result
+  }
+
+  let col4Array = widgets.value.filter(item => item.col === 4);
+  let otherColsArray = widgets.value.filter(item => item.col !== 4);
+  let sortedArray = sortColsArray(otherColsArray)
+  return [...col4Array, ...sortedArray]
+})
 const headers = shallowRef([
   { title: '配置文件', key: 'file' },
   { title: '配置项', key: 'key' },
@@ -99,11 +146,49 @@ const postAllConfig = () => {
 const getTitle = (file) => {
   return view.value?.find(el => el.file === (file.endsWith('.yaml') ? file : file + '.yaml')).name || file
 }
+const load = async () => {
+  request.post('/config/GetWidgets', { plugin: route.params.plugin }).then(res => {
+    if (res.data.status === 'success') {
+      let widgetList = []
+      for (const widget of res.data.data) {
+        const options = {
+          moduleCache: {
+            vue: Vue
+          },
+          async getFile() {
+            return widget.widget
+          },
+          addStyle(textContent) {
+            const style = Object.assign(document.createElement('style'), { textContent })
+            const ref = document.head.getElementsByTagName('style')[0] || null
+            document.head.insertBefore(style, ref)
+          },
+        }
+        // 加载远程组件
+        if (widget.plugin === route.params.plugin && widget.onPlugin) {
+          widgetList.push({
+            plugin: widget.plugin,
+            file: widget.file,
+            data: widget.data,
+            col: widget.data?.col || 4,
+            remote: defineAsyncComponent(() => loadModule(widget.file, options))
+          })
+        }
+      }
+      widgets.value = widgetList
+    }
+  })
+}
 watch(() => route.params, () => {
+  widgets.value = []
+  load()
   getConfigs()
 });
 provide('processData', processData);
-getConfigs()
+onMounted(() => {
+  load()
+  getConfigs()
+})
 </script>
 
 <template>
@@ -137,6 +222,16 @@ getConfigs()
     </v-data-table>
   </v-banner>
   <v-row>
+    <v-col v-if="widgetsList.length" cols="12" md="12">
+      <UiParentCard class="my-4">
+        <v-row>
+          <v-col v-for="widget in widgetsList" :key="`${widget.plugin}-${widget.file}`" :lg="widget.col || 4" cols="12">
+            <component v-if="widget.remote" :is="widget.remote" :request="request" :snackbar="snackbarStore"
+              :apiUrl="apiStore.baseUrl" :data="widget.data" />
+          </v-col>
+        </v-row>
+      </UiParentCard>
+    </v-col>
     <v-col cols="12" md="12">
       <UiParentCard v-for="(config, key, index) in configs" :key="index" :title="getTitle(key)" class="my-4">
         <recursive-editor :file="key" :data="config" />

src/views/dashboards/default/DefaultDashboard.vue

@@ -78,13 +78,15 @@ const load = async () => {
               },
             }
             // 加载远程组件
-            widgets.value.push({
-              plugin: widget.plugin,
-              file: widget.file,
-              data: widget.data,
-              col: widget.data?.col || 4,
-              remote: defineAsyncComponent(() => loadModule(widget.file, options))
-            })
+            if (!widget.disabledHome) {
+              widgets.value.push({
+                plugin: widget.plugin,
+                file: widget.file,
+                data: widget.data,
+                col: widget.data?.col || 4,
+                remote: defineAsyncComponent(() => loadModule(widget.file, options))
+              })
+            }
           }
         }
       })
@@ -98,8 +100,8 @@ const load = async () => {
     <!-- 远程组件 -->
     <v-col v-masonry-tile v-for="widget in widgetsList" :key="`${widget.plugin}-${widget.file}`" :lg="widget.col || 4"
       cols="12">
-      <component v-if="widget.remote" :is="widget.remote" :request="request" :snackbar="snackbarStore" :apiUrl="apiStore.baseUrl"
-        :data="widget.data" />
+      <component v-if="widget.remote" :is="widget.remote" :request="request" :snackbar="snackbarStore"
+        :apiUrl="apiStore.baseUrl" :data="widget.data" />
     </v-col>
   </v-row>
 </template>