feat(系统设置): 插件管理插件步骤左侧滚动条

frontend/src/hooks/useExpandStyle.ts

@@ -1,18 +1,9 @@
-import { nextTick, reactive } from 'vue';
+import { nextTick, reactive, onMounted, onUnmounted } from 'vue';
-// 自定义展开行:如果当前行下边无内容，隐藏表格折叠按钮
+// 自定义展开行:表格的高度计算和展开折叠图标颜色控制
-const useButtonStyle = (wrapperName?: string, className?: string[]) => {
+const useExpandStyle = (wrapperName?: string, className?: string[]) => {
   const cssHeight = reactive({
     height: '460px',
   });
-  // 隐藏按钮以及图标
-  const hiddenButton = () => {
-    nextTick(() => {
-      const emptyBtns = document.querySelectorAll('.empty-button');
-      emptyBtns.forEach((node) => {
-        (node.parentNode as HTMLElement).style.display = 'none';
-      });
-    });
-  };
   // 设置折叠展开后图标的颜色
   const expandOrcollapseStyle = () => {
     nextTick(() => {
@@ -31,7 +22,6 @@ const useButtonStyle = (wrapperName?: string, className?: string[]) => {
     const pageContent = document.querySelector(boxElement);
     return pageContent ? pageContent.getBoundingClientRect().height : 0;
   };
-
   // 计算每一个元素的高度
   const getDomHeightWithMargin = (selector: string) => {
     const dom = document.querySelector(selector) as HTMLElement;
@@ -40,7 +30,6 @@ const useButtonStyle = (wrapperName?: string, className?: string[]) => {
     const marginBottom = parseFloat(computedStyle.marginBottom);
     return dom ? dom.getBoundingClientRect().height + marginTop + marginBottom : 460;
   };
-
   // 计算最后的高度
   const countHeight = () => {
     const contentHeight = getPageContentHeight(wrapperName as string);
@@ -50,16 +39,21 @@ const useButtonStyle = (wrapperName?: string, className?: string[]) => {
       }, 0) || 0;
     return `${contentHeight - excludeTotalHeight - 70}px`;
   };
-  window.onresize = () => {
+  const onResize = () => {
     cssHeight.height = countHeight();
   };
+  window.addEventListener('resize', onResize);
+  onMounted(() => {
+    onResize();
+  });
+  onUnmounted(() => {
+    window.removeEventListener('resize', onResize);
+  });
 
   return {
-    hiddenButton,
     expandOrcollapseStyle,
-    countHeight,
     cssHeight,
   };
 };
 
-export default useButtonStyle;
+export default useExpandStyle;

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

@@ -108,15 +108,6 @@
           <span v-else-if="record.pluginForms.length && expanded" class="expand"
             ><icon-minus class="text-[rgb(var(--primary-6))]" :style="{ 'font-size': '12px' }"
           /></span>
-          <span v-else class="empty-button"></span>
-        </template>
-        <template #expand-row="{ record }">
-          <div v-for="(item, index) in record.pluginForms" :key="item.id" class="ms-self"
-            ><span class="circle"> {{ index + 1 }} </span
-            ><span class="cursor-pointer text-[rgb(var(--primary-6))]" @click="detailScript(record, item)">{{
-              item.name
-            }}</span></div
-          >
         </template>
       </a-table>
     </div>
@@ -131,7 +122,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, reactive } from 'vue';
+  import { ref, onMounted, reactive, h } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
   import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
   import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
@@ -142,17 +133,18 @@
   import uploadSuccessModal from './uploadSuccessModal.vue';
   import scriptDetailDrawer from './scriptDetailDrawer.vue';
   import { useCommandComponent } from '@/hooks/useCommandComponent';
-  import useButtonStyle from '@/hooks/useHiddenButton';
+  import useExpandStyle from '@/hooks/useExpandStyle';
   import useModal from '@/hooks/useModal';
-  import { Message } from '@arco-design/web-vue';
+  import { Message, TableData } from '@arco-design/web-vue';
   import useVisit from '@/hooks/useVisit';
   import type { PluginForms, PluginList, PluginItem, Options, DrawerConfig } from '@/models/setting/plugin';
   import dayjs from 'dayjs';
+  import TableExpand from './tableExpand.vue';
 
   const { t } = useI18n();
   const visitedKey = 'doNotShowAgain';
   const { getIsVisited } = useVisit(visitedKey);
-  const { hiddenButton, expandOrcollapseStyle, countHeight, cssHeight } = useButtonStyle('.ms-card', [
+  const { expandOrcollapseStyle, cssHeight } = useExpandStyle('.ms-card', [
     '.arco-alert',
     '.arco-row',
     '.ms-footerNum',
@@ -160,10 +152,6 @@
 
   const data = ref<PluginList>([]);
   const loading = ref<boolean>(false);
-  const expandable = reactive({
-    title: '',
-    width: 54,
-  });
   const expandedRowKeys = reactive([]);
 
   const config = ref<DrawerConfig>({
@@ -320,6 +308,15 @@
       console.log(error);
     }
   };
+  const expandable = reactive({
+    title: '',
+    width: 54,
+    expandedRowRender: (record: TableData) => {
+      if (record.pluginForms && record.pluginForms.length > 0) {
+        return h(TableExpand, { record, onMessageEvent: (recordItem, item) => detailScript(recordItem, item) });
+      }
+    },
+  });
   const handleExpand = (rowKey: string | number) => {
     Object.assign(expandedRowKeys, [rowKey]);
     expandOrcollapseStyle();
@@ -348,6 +345,22 @@
             id: '222',
             name: '步骤二',
           },
+          {
+            id: '333',
+            name: '步骤三',
+          },
+          {
+            id: '444',
+            name: '步骤四',
+          },
+          {
+            id: '555',
+            name: '步骤五',
+          },
+          {
+            id: '666',
+            name: '步骤六',
+          },
         ],
         organizations: [
           {
@@ -459,20 +472,60 @@
           },
         ],
       },
+      {
+        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];
-    hiddenButton();
-    cssHeight.height = countHeight();
   });
 </script>
 
 <style scoped lang="less">
-  .circle {
-    color: var(--color-text-3);
-    background: var(--color-fill-3);
-    @apply ml-6 mr-10 inline-block h-4 w-4 text-center text-xs leading-4;
-  }
   :deep(.arco-table-tr-expand .arco-table-td) {
     background: none;
   }
@@ -480,15 +533,11 @@
     padding: 0 !important;
   }
   :deep(.arco-table) {
-    overflow: hidden !important;
+    margin-right: -10px;
+    padding-right: 10px;
+    max-width: 100%;
     height: v-bind('cssHeight.height') !important;
   }
-  .ms-self {
-    height: 40px;
-    line-height: 40px;
-    border-bottom: 1px solid var(--color-text-n8);
-    @apply flex items-center align-middle leading-6;
-  }
   .ms-footerNum {
     @apply mt-4 text-sm text-slate-500;
   }

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

@@ -0,0 +1,52 @@
+<template>
+  <a-scrollbar
+    :style="{
+      'overflow': 'auto',
+      'min-height': '40px',
+      'max-height': '120px',
+    }"
+  >
+    <div class="ms-scroll">
+      <div v-for="(item, index) in record.pluginForms" :key="item.id" class="ms-self"
+        ><span class="circle"> {{ index + 1 }} </span
+        ><span class="cursor-pointer text-[rgb(var(--primary-6))]" @click="emit('MessageEvent', record, item)">{{
+          item.name
+        }}</span></div
+      >
+    </div>
+  </a-scrollbar>
+</template>
+
+<script setup lang="ts">
+  import type { PluginForms, PluginItem } from '@/models/setting/plugin';
+
+  defineProps<{
+    record: PluginItem;
+  }>();
+  const emit = defineEmits<{
+    (e: 'MessageEvent', record: PluginItem, item: PluginForms): void;
+  }>();
+</script>
+
+<style scoped lang="less">
+  :deep(.arco-scrollbar-container + .arco-scrollbar-track-direction-vertical) {
+    left: 0 !important;
+  }
+  .ms-scroll {
+    width: 100%;
+  }
+  .circle {
+    color: var(--color-text-3);
+    background: var(--color-fill-3);
+    @apply ml-6 mr-10 inline-block h-4 w-4 text-center text-xs leading-4;
+  }
+  :deep(.arco-table-tr-expand .arco-table-cell) {
+    padding: 0 !important;
+  }
+  .ms-self {
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid var(--color-text-n8);
+    @apply flex items-center align-middle leading-6;
+  }
+</style>