From 8a10eeb3f58d8f98e8e1facb0d87f519dccb339f Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Fri, 28 Jul 2023 16:34:43 +0800
Subject: [PATCH] =?UTF-8?q?perf(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=E7=AE=A1=E7=90=86=E8=B0=83=E6=95=B4=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useExpandStyle.ts          |  59 ----
 .../pluginManager/components/pluginTable.vue  | 252 +++++++-----------
 2 files changed, 103 insertions(+), 208 deletions(-)
 delete mode 100644 frontend/src/hooks/useExpandStyle.ts

diff --git a/frontend/src/hooks/useExpandStyle.ts b/frontend/src/hooks/useExpandStyle.ts
deleted file mode 100644
index b7a90a8d31..0000000000
--- a/frontend/src/hooks/useExpandStyle.ts
+++ /dev/null
@@ -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;
diff --git a/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue b/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
index 0bec6cb774..5cb96b90f1 100644
--- a/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
+++ b/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
@@ -18,99 +18,95 @@
         ></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 }"
-        :expandable="expandable"
-        :loading="loading"
-        row-key="id"
-        :expanded-row-keys="expandedRowKeys"
-        @expand="handleExpand"
-      >
-        <template #columns>
-          <a-table-column fixed="left" :title="t('system.plugin.tableColunmName')">
-            <template #cell="{ record }">
-              {{ record.name }} <span class="text-[--color-text-4]">({{ record.pluginForms.length }})</span>
-            </template>
-          </a-table-column>
-          <a-table-column :title="t('system.plugin.tableColunmDescription')" data-index="description" />
-          <a-table-column :title="t('system.plugin.tableColunmStatus')">
-            <template #cell="{ record }">
-              <div v-if="record.enable" class="flex items-center">
-                <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
-                {{ t('system.user.tableEnable') }}
-              </div>
-              <div v-else class="flex items-center text-[var(--color-text-4)]">
-                <icon-stop class="mr-[2px]" />
-                {{ t('system.user.tableDisable') }}
-              </div>
-            </template>
-          </a-table-column>
-          <a-table-column :title="t('system.plugin.tableColunmApplicationScene')" data-index="scenario">
-            <template #cell="{ record }">{{
-              record.scenario === 'API' ? t('system.plugin.secneApi') : t('system.plugin.secneProManger')
-            }}</template>
-          </a-table-column>
-          <a-table-column :title="t('system.user.tableColunmOrg')">
-            <template #cell="{ record }">
-              <a-tag
-                v-for="org of record.organizations"
-                :key="org.id"
-                class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
-                bordered
-              >
-                {{ org.name }}
-              </a-tag>
-              <a-tag
-                v-show="record.organizations.length > 2"
-                class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
-                bordered
-              >
-                +{{ record.organizations.length - 2 }}
-              </a-tag>
-            </template>
-          </a-table-column>
-          <a-table-column :title="t('system.plugin.tableColunmDescription')" data-index="fileName" />
-          <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>
-            </template>
-          </a-table-column>
-          <a-table-column :title="t('system.plugin.tableColunmCreatedBy')" data-index="createUser" />
-          <a-table-column :title="t('system.plugin.tableColunmUpdateTime')">
-            <template #cell="{ record }">
-              <span>{{ getTime(record.updateTime) }}</span>
-            </template>
-          </a-table-column>
-          <a-table-column :width="200" fixed="right" align="center" :bordered="false">
-            <template #title>
-              {{ t('system.plugin.tableColunmActions') }}
-            </template>
-            <template #cell="{ record }">
-              <MsButton @click="update(record)">{{ t('system.plugin.edit') }}</MsButton>
-              <MsButton v-if="record.enable" @click="disableHandler(record)">{{
-                t('system.plugin.tableDisable')
-              }}</MsButton>
-              <MsButton v-else>{{ t('system.plugin.tableEnable') }}</MsButton>
-              <MsTableMoreAction :list="tableActions" @select="handleSelect($event, record)"></MsTableMoreAction>
-            </template>
-          </a-table-column>
-        </template>
-        <template #expand-icon="{ record, expanded }">
-          <span v-if="record.pluginForms.length && !expanded" class="collapsebtn"
-            ><icon-plus :style="{ 'font-size': '12px' }"
-          /></span>
-          <span v-else-if="record.pluginForms.length && expanded" class="expand"
-            ><icon-minus class="text-[rgb(var(--primary-6))]" :style="{ 'font-size': '12px' }"
-          /></span>
-        </template>
-      </a-table>
-    </div>
+    <a-table
+      :data="filterData"
+      :pagination="false"
+      :scroll="{ y: 386, x: 2400 }"
+      :expandable="expandable"
+      :loading="loading"
+      row-key="id"
+      :expanded-row-keys="expandedRowKeys"
+      @expand="handleExpand"
+    >
+      <template #columns>
+        <a-table-column fixed="left" :title="t('system.plugin.tableColunmName')">
+          <template #cell="{ record }">
+            {{ record.name }} <span class="text-[--color-text-4]">({{ record.pluginForms.length }})</span>
+          </template>
+        </a-table-column>
+        <a-table-column :title="t('system.plugin.tableColunmDescription')" data-index="description" />
+        <a-table-column :title="t('system.plugin.tableColunmStatus')">
+          <template #cell="{ record }">
+            <div v-if="record.enable" class="flex items-center">
+              <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
+              {{ t('system.user.tableEnable') }}
+            </div>
+            <div v-else class="flex items-center text-[var(--color-text-4)]">
+              <icon-stop class="mr-[2px]" />
+              {{ t('system.user.tableDisable') }}
+            </div>
+          </template>
+        </a-table-column>
+        <a-table-column :title="t('system.plugin.tableColunmApplicationScene')" data-index="scenario">
+          <template #cell="{ record }">{{
+            record.scenario === 'API' ? t('system.plugin.secneApi') : t('system.plugin.secneProManger')
+          }}</template>
+        </a-table-column>
+        <a-table-column :title="t('system.user.tableColunmOrg')">
+          <template #cell="{ record }">
+            <a-tag
+              v-for="org of record.organizations"
+              :key="org.id"
+              class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
+              bordered
+            >
+              {{ org.name }}
+            </a-tag>
+            <a-tag
+              v-show="record.organizations.length > 2"
+              class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
+              bordered
+            >
+              +{{ record.organizations.length - 2 }}
+            </a-tag>
+          </template>
+        </a-table-column>
+        <a-table-column :title="t('system.plugin.tableColunmDescription')" data-index="fileName" />
+        <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>
+          </template>
+        </a-table-column>
+        <a-table-column :title="t('system.plugin.tableColunmCreatedBy')" data-index="createUser" />
+        <a-table-column :title="t('system.plugin.tableColunmUpdateTime')">
+          <template #cell="{ record }">
+            <span>{{ getTime(record.updateTime) }}</span>
+          </template>
+        </a-table-column>
+        <a-table-column :width="200" fixed="right" align="center" :bordered="false">
+          <template #title>
+            {{ t('system.plugin.tableColunmActions') }}
+          </template>
+          <template #cell="{ record }">
+            <MsButton @click="update(record)">{{ t('system.plugin.edit') }}</MsButton>
+            <MsButton v-if="record.enable" @click="disableHandler(record)">{{
+              t('system.plugin.tableDisable')
+            }}</MsButton>
+            <MsButton v-else>{{ t('system.plugin.tableEnable') }}</MsButton>
+            <MsTableMoreAction :list="tableActions" @select="handleSelect($event, record)"></MsTableMoreAction>
+          </template>
+        </a-table-column>
+      </template>
+      <template #expand-icon="{ record, expanded }">
+        <span v-if="record.pluginForms.length && !expanded" class="collapsebtn"
+          ><icon-plus :style="{ 'font-size': '12px' }"
+        /></span>
+        <span v-else-if="record.pluginForms.length && expanded" class="expand"
+          ><icon-minus class="text-[rgb(var(--primary-6))]" :style="{ 'font-size': '12px' }"
+        /></span>
+      </template>
+    </a-table>
     <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>