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 @@ > -
- - - - -
+ + + +
{{ t('system.plugin.totalNum') }}{{ totalNum }}{{ t('system.plugin.dataList') }}
([]); 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; }