perf(系统设置): 插件管理调整展示方式

frontend/src/hooks/useExpandStyle.ts

@@ -1,59 +0,0 @@
-import { nextTick, reactive, onMounted, onUnmounted } from 'vue';
-// 自定义展开行:表格的高度计算和展开折叠图标颜色控制
-const useExpandStyle = (wrapperName?: string, className?: string[]) => {
-  const cssHeight = reactive({
-    height: '460px',
-  });
-  // 设置折叠展开后图标的颜色
-  const expandOrcollapseStyle = () => {
-    nextTick(() => {
-      const expandBtns = document.querySelectorAll('.expand');
-      const collapseBtns = document.querySelectorAll('.collapsebtn');
-      expandBtns.forEach((node) => {
-        (node.parentNode as HTMLElement).style.borderColor = 'rgb(var(--primary-6))';
-      });
-      collapseBtns.forEach((node) => {
-        (node.parentNode as HTMLElement).style.borderColor = 'var(--color-border-4)';
-      });
-    });
-  };
-  // 获取盒子的总高度
-  const getPageContentHeight = (boxElement: string) => {
-    const pageContent = document.querySelector(boxElement);
-    return pageContent ? pageContent.getBoundingClientRect().height : 0;
-  };
-  // 计算每一个元素的高度
-  const getDomHeightWithMargin = (selector: string) => {
-    const dom = document.querySelector(selector) as HTMLElement;
-    const computedStyle = getComputedStyle(dom);
-    const marginTop = parseFloat(computedStyle.marginTop);
-    const marginBottom = parseFloat(computedStyle.marginBottom);
-    return dom ? dom.getBoundingClientRect().height + marginTop + marginBottom : 460;
-  };
-  // 计算最后的高度
-  const countHeight = () => {
-    const contentHeight = getPageContentHeight(wrapperName as string);
-    const excludeTotalHeight =
-      className?.reduce((prev, item) => {
-        return prev + getDomHeightWithMargin(item);
-      }, 0) || 0;
-    return `${contentHeight - excludeTotalHeight - 70}px`;
-  };
-  const onResize = () => {
-    cssHeight.height = countHeight();
-  };
-  window.addEventListener('resize', onResize);
-  onMounted(() => {
-    onResize();
-  });
-  onUnmounted(() => {
-    window.removeEventListener('resize', onResize);
-  });
-
-  return {
-    expandOrcollapseStyle,
-    cssHeight,
-  };
-};
-
-export default useExpandStyle;

frontend/src/views/setting/system/pluginManager/components/pluginTable.vue

@@ -18,11 +18,10 @@
         ></a-input-search>
       </a-col>
     </a-row>
-    <div class="mb-6" style="overflow: auto">
     <a-table
       :data="filterData"
       :pagination="false"
-        :scroll="{ y: 'auto', x: 2400 }"
+      :scroll="{ y: 386, x: 2400 }"
       :expandable="expandable"
       :loading="loading"
       row-key="id"
@@ -76,9 +75,7 @@
         <a-table-column :title="t('system.plugin.tableColunmVersion')" data-index="pluginId" />
         <a-table-column :title="t('system.plugin.tableColunmAuthorization')">
           <template #cell="{ record }">
-              <span>{{
-                record.xpack ? t('system.plugin.uploadOpenSource') : t('system.plugin.uploadCompSource')
-              }}</span>
+            <span>{{ record.xpack ? t('system.plugin.uploadOpenSource') : t('system.plugin.uploadCompSource') }}</span>
           </template>
         </a-table-column>
         <a-table-column :title="t('system.plugin.tableColunmCreatedBy')" data-index="createUser" />
@@ -110,7 +107,6 @@
         /></span>
       </template>
     </a-table>
-    </div>
     <div class="ms-footerNum"
       >{{ t('system.plugin.totalNum') }}<span class="mx-2">{{ totalNum }}</span
       >{{ t('system.plugin.dataList') }}</div
@@ -133,7 +129,6 @@
   import uploadSuccessModal from './uploadSuccessModal.vue';
   import scriptDetailDrawer from './scriptDetailDrawer.vue';
   import { useCommandComponent } from '@/hooks/useCommandComponent';
-  import useExpandStyle from '@/hooks/useExpandStyle';
   import useModal from '@/hooks/useModal';
   import { Message, TableData } from '@arco-design/web-vue';
   import useVisit from '@/hooks/useVisit';
@@ -144,11 +139,6 @@
   const { t } = useI18n();
   const visitedKey = 'doNotShowAgain';
   const { getIsVisited } = useVisit(visitedKey);
-  const { expandOrcollapseStyle, cssHeight } = useExpandStyle('.ms-card', [
-    '.arco-alert',
-    '.arco-row',
-    '.ms-footerNum',
-  ]);
 
   const data = ref<PluginList>([]);
   const loading = ref<boolean>(false);
@@ -319,7 +309,6 @@
   });
   const handleExpand = (rowKey: string | number) => {
     Object.assign(expandedRowKeys, [rowKey]);
-    expandOrcollapseStyle();
   };
   onMounted(() => {
     data.value = [
@@ -472,53 +461,6 @@
           },
         ],
       },
-      {
-        id: 'string6',
-        name: '插件5',
-        pluginId: 'string',
-        fileName: 'string',
-        createTime: 0,
-        updateTime: 3084234,
-        createUser: '创建人',
-        enable: true,
-        global: true,
-        xpack: true,
-        description: 'string',
-        scenario: 'PLATFORM',
-        pluginForms: [
-          {
-            id: '111',
-            name: '步骤一',
-          },
-          {
-            id: '222',
-            name: '步骤二',
-          },
-          {
-            id: '333',
-            name: '步骤三',
-          },
-          {
-            id: '444',
-            name: '步骤四',
-          },
-          {
-            id: '555',
-            name: '步骤五',
-          },
-          {
-            id: '666',
-            name: '步骤六',
-          },
-        ],
-        organizations: [
-          {
-            id: 'string',
-            num: 0,
-            name: 'string',
-          },
-        ],
-      },
     ];
     loadData();
     filterData.value = [...data.value];
@@ -536,9 +478,21 @@
     margin-right: -10px;
     padding-right: 10px;
     max-width: 100%;
-    height: v-bind('cssHeight.height') !important;
+  }
+  :deep(.collapsebtn) {
+    padding: 0 1px;
+    border: 1px solid var(--color-text-4);
+    @apply bg-white;
+  }
+  :deep(.expand) {
+    padding: 0 1px;
+    border: 1px solid rgb(var(--primary-5));
+    @apply bg-white;
+  }
+  :deep(.arco-table-expand-btn) {
+    @apply bg-white;
   }
   .ms-footerNum {
-    @apply mt-4 text-sm text-slate-500;
+    @apply absolute bottom-0 mt-4 text-sm text-slate-500;
   }
 </style>