From 7690eaf1f296e2ea379219c2c500d249b04416a0 Mon Sep 17 00:00:00 2001 From: jianglinjun Date: Sun, 29 Sep 2024 15:57:48 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E6=A0=91=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=E5=B7=A5=E5=85=B7=E6=93=8D=E4=BD=9C=E5=92=8C=E9=A2=84?= =?UTF-8?q?=E8=A7=88=E5=8C=BA=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/tree-design/CHANGELOG.md | 4 ++ .../tree-design-popover.scss | 35 +++++++++++++--- .../tree-design-popover.tsx | 11 ++--- .../src/components/tree-shell/tree-shell.scss | 41 ++++++------------- .../tree-design-content.scss | 1 + .../tree_design_operation.scss | 31 ++++++++++++-- .../tree_design_operation.tsx | 24 +++++++---- 7 files changed, 96 insertions(+), 51 deletions(-) diff --git a/packages/tree-design/CHANGELOG.md b/packages/tree-design/CHANGELOG.md index 3692d536..25f636bd 100644 --- a/packages/tree-design/CHANGELOG.md +++ b/packages/tree-design/CHANGELOG.md @@ -7,6 +7,10 @@ ## [Unreleased] +### Change + +- 更新树设计工具操作和预览区样式 + ### Add - 更新预览区默认展开根节点，左侧预览区树节点点击时，操作区进行对应节点选中 diff --git a/packages/tree-design/src/components/tree-design-popover/tree-design-popover.scss b/packages/tree-design/src/components/tree-design-popover/tree-design-popover.scss index 62205f2c..2754a3ac 100644 --- a/packages/tree-design/src/components/tree-design-popover/tree-design-popover.scss +++ b/packages/tree-design/src/components/tree-design-popover/tree-design-popover.scss @@ -1,20 +1,33 @@ @include b('tree-design-popover') { - padding: 5px; + padding: getCssVar(spacing, tight); @include e('search') { display: flex; - gap: 4px; + gap: getCssVar(spacing, extra-tight); align-items: center; @include m('title') { flex: 1; + font-size: getCssVar(font-size, regular); white-space: nowrap; } + @include m('input') { + --el-input-height: #{getCssVar(spacing, loose)}; + font-size: getCssVar(font-size, small); + .el-input__suffix { + font-size: getCssVar(font-size, regular); + } + } + } + @include e('nodeitems'){ + padding: getCssVar(spacing,extra-tight) 0; } @include e('item') { position: relative; display: flex; align-items: center; - height: 24px; - font-size: 12px; + padding-left: getCssVar(spacing, base-tight); + height: getCssVar(font-size, header-3); + font-size: getCssVar(font-size, small); + line-height: 1.5; cursor: pointer; @include m('index') { position: absolute; @@ -25,7 +38,7 @@ justify-content: center; width: 100%; height: 100%; - background-color: lightgray; + background-color: #bcbcbc; opacity: 0.8; @include when('selected') { display: flex; @@ -36,12 +49,22 @@ height: 24px; line-height: 24px; text-align: center; - background-color: getCssVar(color, border); + background: #e6ebf1; + color: #808695; border-radius: 50%; } } @include e('footer') { display: flex; justify-content: end; + + @include m('btn') { + font-size: getCssVar(font-size, regular); + margin-right: 12px; + cursor: pointer; + &:hover { + color: #57a3f3; + } + } } } diff --git a/packages/tree-design/src/components/tree-design-popover/tree-design-popover.tsx b/packages/tree-design/src/components/tree-design-popover/tree-design-popover.tsx index 098346e4..f9fedce3 100644 --- a/packages/tree-design/src/components/tree-design-popover/tree-design-popover.tsx +++ b/packages/tree-design/src/components/tree-design-popover/tree-design-popover.tsx @@ -54,6 +54,7 @@ export default defineComponent({ {{ suffix: () => { @@ -62,7 +63,7 @@ export default defineComponent({ }} -
+
{this.items .filter((item: IData) => { return ( @@ -92,12 +93,12 @@ export default defineComponent({ })}
- +
确定 - - +
+
取消 - +
); diff --git a/packages/tree-design/src/components/tree-shell/tree-shell.scss b/packages/tree-design/src/components/tree-shell/tree-shell.scss index 9e3a45b8..ca1cc050 100644 --- a/packages/tree-design/src/components/tree-shell/tree-shell.scss +++ b/packages/tree-design/src/components/tree-shell/tree-shell.scss @@ -4,36 +4,19 @@ $tree-shell: ( // 亮色主题 @mixin mixin-light-theme { + #{getCssVarName(grey, 9)}: 29, 31, 35; - #{getCssVarName(control-treeview, item-disabled-button)}: rgba( - var(#{getCssVarName(grey, 4)}), - 0.5 - ); - #{getCssVarName(control-treeview, row-hover-bg-color)}: rgba( - var(#{getCssVarName(blue, cyan, 4)}), - 1 - ); - - #{getCssVarName(editor, default, text-color)}: rgba( - var(#{getCssVarName(grey, 9)}), - 1 - ); - #{getCssVarName(control-treeview, row-select-color)}: rgba( - var(#{getCssVarName(grey, 9)}), - 1 - ); - #{getCssVarName(control-treeview, row-hover-color)}: rgba( - var(#{getCssVarName(grey, 9)}), - 1 - ); - #{getCssVarName(control-treeview, text-color)}: rgba( - var(#{getCssVarName(grey, 9)}), - 1 - ); - #{getCssVarName(control-treeview, row-select-bg-color)}: rgba( - var(#{getCssVarName(blue, cyan, 0)}), - 1 - ); + #{getCssVarName(control-treeview, item-disabled-button)}: rgba(var(#{getCssVarName(grey, 4)}),0.5); + #{getCssVarName(control-treeview, row-hover-bg-color)}: rgba(#e6f7ff, 1 ); + + #{getCssVarName(editor, default, text-color)}: rgba( var(#{getCssVarName(grey, 9)}), 1); + #{getCssVarName(control-treeview, row-select-color)}: rgba(var(#{getCssVarName(grey, 9)}), 1); + #{getCssVarName(control-treeview, row-hover-color)}: rgba(var(#{getCssVarName(grey, 9)}), 1); + #{getCssVarName(control-treeview, text-color)}: rgba(var(#{getCssVarName(grey, 9)}), 1); + #{getCssVarName(control-treeview, row-select-bg-color)}: rgba(#bae7ff, 1); + + --el-tree-node-hover-bg-color:rgba(#bae7ff, 1); + --el-tree-expand-icon-color:rgba( var(#{getCssVarName(grey, 9)}), 1); } @include b('tree-shell') { diff --git a/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.scss b/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.scss index 1e7e4df3..159428de 100644 --- a/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.scss +++ b/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.scss @@ -1,4 +1,5 @@ @include b(tree-design-content) { width: 100%; height: 100%; + border: 1px solid getCssVar(color, border); } diff --git a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.scss b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.scss index ea461f11..45bb2c9d 100644 --- a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.scss +++ b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.scss @@ -5,6 +5,7 @@ $tree_design_operation: ( header-caption-padding: 5px, header-title-padding: 10px, header-height: 52px, + header-line-height: 21px, collapse-item-icon-margin: 4px, item-node-padding: 5px, item-select: getCssVar(color, primary, light-active), @@ -26,7 +27,9 @@ $tree_design_operation: ( align-items: center; padding: getCssVar(tree_design_operation, header-caption-padding); color: getCssVar(color, primary, text); - background-color: getCssVar(color, primary); + background-color: getCssVar(tree_design_operation, item-selected-bg); + font-size: getCssVar(font-size, regular); + line-height: getCssVar(tree_design_operation, header-line-height); border-radius: getCssVar(border-radius, small); @include m('title') { flex: 1; @@ -36,10 +39,13 @@ $tree_design_operation: ( } @include e('icon') { padding: getCssVar(spacing, extra, tight); - color: getCssVar(color, primary); + color: getCssVar(color, text, 0); cursor: pointer; background-color: getCssVar(color, primary, text); border-radius: getCssVar(border-radius, small); + &:hover { + color: getCssVar(tree_design_operation, item-selected-bg); + } } @include e('search') { display: flex; @@ -52,6 +58,7 @@ $tree_design_operation: ( @include m('icon') { padding: getCssVar(tree_design_operation, item-node-padding); cursor: pointer; + opacity: 0.5; } } @include when('selected') { @@ -111,10 +118,20 @@ $tree_design_operation: ( font-size: getCssVar(tree_design_operation, item-actions-font-size); @include m('icon') { margin: 0 getCssVar(tree_design_operation, item-actions-icon-margin); - color: getCssVar(color, primary); + color: getCssVar(color, text, 1); cursor: pointer; background-color: getCssVar(color, primary, text); border-radius: getCssVar(border-radius, small); + @include when('delete') { + &:hover { + color: getCssVar(color, danger); + } + } + @include when('add') { + &:hover { + color: getCssVar(tree_design_operation, item-selected-bg); + } + } } } @include e('children') { @@ -146,6 +163,11 @@ $tree_design_operation: ( border: 1px solid getCssVar(color, border); border-radius: getCssVar(border-radius, small); opacity: 0; + @include when('delete') { + &:hover { + color: getCssVar(color, danger); + } + } } &:hover { @@ -161,11 +183,12 @@ $tree_design_operation: ( } // 暗色主题 -:root.studio_dark { +:root.studio_dark,:root.dark { @include b('tree_design_operation-header') { @include e('icon') { color: getCssVar(color, primary, text); background-color: transparent; + font-size: getCssVar(font-size,header-6); } @include e('caption') { background-color: getCssVar(color, bg, 0); diff --git a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.tsx b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.tsx index 1a7b182b..3cac6e51 100644 --- a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.tsx +++ b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.tsx @@ -67,8 +67,11 @@ export default defineComponent({ c.removeRsItem(data)} > @@ -99,6 +102,7 @@ export default defineComponent({
{{ @@ -111,13 +115,13 @@ export default defineComponent({ ) : ( collapse(data.srfkey)} @@ -166,13 +170,19 @@ export default defineComponent({ c.removeItem(data)} > c.createRsItem(e, data, children)} >
-- Gitee