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 @@
>
-
-
-
-
-
- {{ record.name }} ({{ record.pluginForms.length }})
-
-
-
-
-
-
-
- {{ t('system.user.tableEnable') }}
-
-
-
- {{ t('system.user.tableDisable') }}
-
-
-
-
- {{
- record.scenario === 'API' ? t('system.plugin.secneApi') : t('system.plugin.secneProManger')
- }}
-
-
-
-
- {{ org.name }}
-
-
- +{{ record.organizations.length - 2 }}
-
-
-
-
-
-
-
- {{
- record.xpack ? t('system.plugin.uploadOpenSource') : t('system.plugin.uploadCompSource')
- }}
-
-
-
-
-
- {{ getTime(record.updateTime) }}
-
-
-
-
- {{ t('system.plugin.tableColunmActions') }}
-
-
- {{ t('system.plugin.edit') }}
- {{
- t('system.plugin.tableDisable')
- }}
- {{ t('system.plugin.tableEnable') }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ {{ record.name }} ({{ record.pluginForms.length }})
+
+
+
+
+
+
+
+ {{ t('system.user.tableEnable') }}
+
+
+
+ {{ t('system.user.tableDisable') }}
+
+
+
+
+ {{
+ record.scenario === 'API' ? t('system.plugin.secneApi') : t('system.plugin.secneProManger')
+ }}
+
+
+
+
+ {{ org.name }}
+
+
+ +{{ record.organizations.length - 2 }}
+
+
+
+
+
+
+
+ {{ record.xpack ? t('system.plugin.uploadOpenSource') : t('system.plugin.uploadCompSource') }}
+
+
+
+
+
+ {{ getTime(record.updateTime) }}
+
+
+
+
+ {{ t('system.plugin.tableColunmActions') }}
+
+
+ {{ t('system.plugin.edit') }}
+ {{
+ t('system.plugin.tableDisable')
+ }}
+ {{ t('system.plugin.tableEnable') }}
+
+
+
+
+
+
+
+
+
([]);
const loading = ref(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;
}