From df20aec81a568706a19714d7f99b5e592e534132 Mon Sep 17 00:00:00 2001 From: "xinxin.wu" Date: Thu, 27 Jul 2023 17:02:58 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=B3=BB=E7=BB=9F=5F=E6=8F=92=E4=BB=B6?= =?UTF-8?q?=E7=AE=A1=E7=90=86=5F=E5=88=97=E8=A1=A8=E6=BB=9A=E5=8A=A8=5F?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 2 +- .../components/pure/ms-table/base-table.vue | 2 +- frontend/src/hooks/useHiddenButton.ts | 65 +++ .../pluginManager/components/pluginTable.vue | 457 +++++++++++------- .../components/scriptDetailDrawer.vue | 3 +- .../pluginManager/components/uploadModel.vue | 56 +-- .../setting/system/pluginManager/index.vue | 5 +- 7 files changed, 374 insertions(+), 216 deletions(-) create mode 100644 frontend/src/hooks/useHiddenButton.ts diff --git a/frontend/package.json b/frontend/package.json index c4a9ce7758..1a40d27cd6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -37,7 +37,7 @@ "@7polo/kity": "2.0.8", "@7polo/kityminder-core": "1.4.53", "@arco-design/web-vue": "^2.48.0", - "@arco-themes/vue-ms-theme-default": "^0.0.19", + "@arco-themes/vue-ms-theme-default": "^0.0.21", "@form-create/arco-design": "^3.1.21", "@vueuse/core": "^9.13.0", "ace-builds": "^1.22.0", diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue index 8bb449e7cf..111da57cb2 100644 --- a/frontend/src/components/pure/ms-table/base-table.vue +++ b/frontend/src/components/pure/ms-table/base-table.vue @@ -165,7 +165,7 @@ }; function getRowClass(record: TableData) { - if (!record.raw.enable && !props.noDisable) { + if (!record.enable && !props.noDisable) { return 'ms-table-row-disabled'; } } diff --git a/frontend/src/hooks/useHiddenButton.ts b/frontend/src/hooks/useHiddenButton.ts new file mode 100644 index 0000000000..2b922cc393 --- /dev/null +++ b/frontend/src/hooks/useHiddenButton.ts @@ -0,0 +1,65 @@ +import { nextTick, reactive } from 'vue'; +// 自定义展开行:如果当前行下边无内容，隐藏表格折叠按钮 +const useButtonStyle = (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(() => { + 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`; + }; + window.onresize = () => { + cssHeight.height = countHeight(); + }; + + return { + hiddenButton, + expandOrcollapseStyle, + countHeight, + cssHeight, + }; +}; + +export default useButtonStyle; diff --git a/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue b/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue index b26900b8c9..52fcde8309 100644 --- a/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue +++ b/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue @@ -1,119 +1,126 @@