From 31dcf0d53b26b1e5677edba18d31bbb6700b9532 Mon Sep 17 00:00:00 2001 From: betterdancing Date: Wed, 4 Dec 2024 00:12:43 -0800 Subject: [PATCH 01/13] fix(style-review): resolve the style-panel styles review; --- packages/common/component/MetaListItem.vue | 14 +++++++++++--- .../JsSlotConfigurator.vue | 9 ++++++--- .../TabsGroupConfigurator.vue | 19 +++++++++++-------- .../components/background/BackgroundGroup.vue | 1 + .../components/background/ImageSetting.vue | 2 +- .../src/components/inputs/NumericSelect.vue | 2 +- packages/toolbars/media/src/Main.vue | 4 ++-- 7 files changed, 33 insertions(+), 18 deletions(-) diff --git a/packages/common/component/MetaListItem.vue b/packages/common/component/MetaListItem.vue index 30b2344e75..767250ef77 100644 --- a/packages/common/component/MetaListItem.vue +++ b/packages/common/component/MetaListItem.vue @@ -16,7 +16,8 @@ :popper-class="['option-popper', { 'fixed-left': expand }]" :visible-arrow="!expand" title="" - width="267" + width="295" + height="706" trigger="manual" @hide="hide(item)" > @@ -295,14 +296,21 @@ export default { } } } + .tiny-popover { + position: relative; .icon-close { - float: right; + position: absolute; + top: 6px; + right: 6px; } } .add-options { overflow-y: scroll; - height: 100%; + padding: 20px 0 20px 2px; + &.top { + margin-bottom: 0; + } &::-webkit-scrollbar-track-piece { background: var(--ti-lowcode-toolbar-bg); } diff --git a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue index e8839afde0..dd3e7c2206 100644 --- a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue +++ b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue @@ -5,7 +5,7 @@
{{ slot.name }} - + @@ -74,7 +74,7 @@ export default { TinyGrid: { content: '暴露给插槽使用的变量，为解构的参数，可以使用多个用逗号分隔，如：row(行数据)，column(列数据)，$table(内部表格实例)，seq(序号)，cell(单元格)，columnIndex(列索引),rowIndex(行索引)', - icon: SvgICons['IconUnknow']() + icon: SvgICons['IconHelpCircle']() } } @@ -189,6 +189,7 @@ export default { .use-slot-item-content { display: flex; + justify-content: space-between; } .use-slot-switch-wrap { @@ -214,6 +215,7 @@ export default { .slot-name-form-item { margin-bottom: 0; + margin-right: 6px; } .item-icon { @@ -227,6 +229,7 @@ export default { position: relative; font-size: 14px; line-height: 20px; + width: 40px; height: 20px; vertical-align: middle; cursor: pointer; @@ -249,7 +252,7 @@ export default { .e__switch-core::after { content: ''; position: absolute; - top: 1px; + top: 2px; left: 1px; border-radius: 100%; transition: all 0.3s; diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue index 841beb01a1..55c1121a0a 100644 --- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue +++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue @@ -202,7 +202,6 @@ const change = (item) => { background-color: var(--te-common-bg-container); line-height: 14px; min-width: 20px; - max-width: 80px; color: var(--te-common-text-weaken); &:hover { @@ -238,8 +237,18 @@ const change = (item) => { justify-content: center; align-items: center; height: 24px; - background-color: var(--ti-lowcode-base-bg-5); + background-color: var(--te-common-bg-container); color: var(--te-common-text-weaken); + + &:hover { + background-color: var(--ti-lowcode-base-gray-101); + border-radius: 4px; + } + .selected-option { + span:hover { + color: var(--te-common-text-primary); + } + } &.selected { background-color: var(--ti-lowcode-base-gray-101); color: var(--te-common-text-primary); @@ -258,12 +267,6 @@ const change = (item) => { display: flex; justify-content: center; } - - &:hover { - background-color: var(--ti-lowcode-base-gray-101); - border-radius: 4px; - color: var(--te-common-text-primary); - } } } } diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue index 92bd6ba456..dac3474aa6 100644 --- a/packages/settings/styles/src/components/background/BackgroundGroup.vue +++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue @@ -567,6 +567,7 @@ export default { span { font-weight: 600; + color: var(--te-common-text-primary); } .svg-icon { diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue index bcb0227de7..04244bc281 100644 --- a/packages/settings/styles/src/components/background/ImageSetting.vue +++ b/packages/settings/styles/src/components/background/ImageSetting.vue @@ -327,7 +327,7 @@ onMounted(() => { justify-content: center; height: 24px; border-radius: 4px; - color: var(--te-common-bg-prompt); + color: var(--te-common-text-primary); border-width: 1px; border-style: solid; align-self: center; diff --git a/packages/settings/styles/src/components/inputs/NumericSelect.vue b/packages/settings/styles/src/components/inputs/NumericSelect.vue index b0a775bb38..f84a821e8b 100644 --- a/packages/settings/styles/src/components/inputs/NumericSelect.vue +++ b/packages/settings/styles/src/components/inputs/NumericSelect.vue @@ -46,7 +46,7 @@ export default { }, suffix: { type: String, - default: 'PX' + default: 'px' } }, emits: useEvent(), diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue index 65c24e0441..378fa9f146 100644 --- a/packages/toolbars/media/src/Main.vue +++ b/packages/toolbars/media/src/Main.vue @@ -45,7 +45,7 @@ {{ parseInt(state.width) }} - PX + px {{ scale.toFixed(2) }} @@ -62,7 +62,7 @@
From 5ef1864f8566fe6d35725f628157a7b56977037d Mon Sep 17 00:00:00 2001 From: betterdancing Date: Wed, 4 Dec 2024 01:07:32 -0800 Subject: [PATCH 02/13] fix(style-review): resolve the style-panel styles review --- designer-demo/public/mock/bundle.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/designer-demo/public/mock/bundle.json b/designer-demo/public/mock/bundle.json index 700964c4af..725408dc0a 100644 --- a/designer-demo/public/mock/bundle.json +++ b/designer-demo/public/mock/bundle.json @@ -9823,8 +9823,7 @@ }, "description": { "zh_CN": "单元格编辑渲染配置项，也可以是函数 Function(h, params)" - }, - "labelPosition": "left" + } }, { "property": "filter", From a80c39b5b8fdb8283db1f046be0d31c7f9a310f2 Mon Sep 17 00:00:00 2001 From: betterdancing Date: Wed, 4 Dec 2024 22:18:24 -0800 Subject: [PATCH 03/13] fix(style-review): resolve the style-panel styles review --- packages/toolbars/media/src/Main.vue | 78 ++++++++++++++++++---------- 1 file changed, 51 insertions(+), 27 deletions(-) diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue index 378fa9f146..d7293fc425 100644 --- a/packages/toolbars/media/src/Main.vue +++ b/packages/toolbars/media/src/Main.vue @@ -11,17 +11,20 @@ >
-
{{ item.title }}
-
- （ {{ item.subTitle }}） +
+ {{ item.title }} + + （ + {{ item.subTitle }}） +
{{ item.content }}
@@ -32,15 +35,10 @@
- +
+
+ + +
- - @@ -456,7 +447,6 @@ export default { flex-wrap: nowrap; align-items: center; gap: 6px; - .icon { width: 24px; height: 24px; @@ -485,7 +475,6 @@ export default { } } } - .more-setting { .setting-item { display: flex; @@ -494,4 +483,39 @@ export default { } } } +.media-content { + padding: 12px 8px; + line-height: 18px; + .media-title { + font-weight: 600; + } +} +.setting-content { + padding: 12px 8px; +} + +.content-wrap { + padding: 20px 12px; + .title { + font-weight: 600; + margin-bottom: 16px; + } + + .setting { + display: flex; + flex-direction: column; + gap: 12px; + div { + display: flex; + align-items: center; + justify-content: space-between; + label { + min-width: 64px; + } + &:last-child { + justify-content: flex-start; + } + } + } +} From 540223f45bec74bead3e0bc742c1dbe3916a0f79 Mon Sep 17 00:00:00 2001 From: betterdancing Date: Wed, 4 Dec 2024 22:23:32 -0800 Subject: [PATCH 04/13] fix(style-review): resolve the style-panel styles review --- packages/toolbars/media/src/Main.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue index d7293fc425..28d6d0292f 100644 --- a/packages/toolbars/media/src/Main.vue +++ b/packages/toolbars/media/src/Main.vue @@ -510,6 +510,7 @@ export default { align-items: center; justify-content: space-between; label { + color: var(--te-common-text-secondary); min-width: 64px; } &:last-child { From 0bed41fc2d014f50eda5b1f893946ab2b0affa3d Mon Sep 17 00:00:00 2001 From: betterdancing Date: Thu, 5 Dec 2024 00:18:17 -0800 Subject: [PATCH 05/13] fix(style-review): resolve the style-panel styles review --- .../src/tabs-group-configurator/TabsGroupConfigurator.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue index 55c1121a0a..4cc8b553cd 100644 --- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue +++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue @@ -241,7 +241,7 @@ const change = (item) => { color: var(--te-common-text-weaken); &:hover { - background-color: var(--ti-lowcode-base-gray-101); + background-color: var(--te-common-bg-prompt); border-radius: 4px; } .selected-option { @@ -250,7 +250,7 @@ const change = (item) => { } } &.selected { - background-color: var(--ti-lowcode-base-gray-101); + background-color: var(--te-common-bg-prompt); color: var(--te-common-text-primary); border-radius: 4px; } @@ -288,7 +288,7 @@ const change = (item) => { background-color: var(--te-common-bg-default); &:hover { - background-color: var(--ti-lowcode-base-gray-101); + background-color: var(--te-common-bg-prompt); border-radius: 4px; color: var(--te-common-text-primary); } From 628c0206c1ad480a68ba09d5f56f99ecf868cb80 Mon Sep 17 00:00:00 2001 From: betterdancing Date: Fri, 6 Dec 2024 01:09:20 -0800 Subject: [PATCH 06/13] fix(style-panel): modify settings panel label color & some reviews --- packages/common/component/ConfigItem.vue | 2 +- .../TabsGroupConfigurator.vue | 41 ++++++++++--------- .../components/background/BackgroundGroup.vue | 2 +- .../background/BackgroundImageGradient.vue | 4 +- .../src/components/layout/LayoutGroup.vue | 1 + .../styles/src/components/size/SizeGroup.vue | 2 + .../components/typography/TypographyGroup.vue | 2 +- packages/toolbars/media/src/Main.vue | 7 +++- 8 files changed, 35 insertions(+), 26 deletions(-) diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue index 39f81f8e31..d4d57bb652 100644 --- a/packages/common/component/ConfigItem.vue +++ b/packages/common/component/ConfigItem.vue @@ -527,7 +527,7 @@ export default { } .item-label { - color: var(--ti-lowcode-meta-config-item-label-color); + color: var(--te-common-text-secondary); font-size: 12px; display: flex; line-height: 18px; diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue index 4cc8b553cd..a155ed76e9 100644 --- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue +++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue @@ -19,6 +19,7 @@ {{ item.label }} { &:hover { background-color: var(--te-common-bg-prompt); border-radius: 4px; - } - .selected-option { - span:hover { - color: var(--te-common-text-primary); - } + color: var(--te-common-text-primary); } &.selected { background-color: var(--te-common-bg-prompt); color: var(--te-common-text-primary); border-radius: 4px; } - :deep(.tiny-dropdown__title) { - margin: 0; - line-height: 12px; - .selected-option { - text-align: center; - } - } - - :deep(.tiny-dropdown__suffix-inner) { - width: 20px; - display: flex; - justify-content: center; + } + :deep(.tiny-dropdown__title) { + margin: 0; + line-height: 12px; + .selected-option { + text-align: center; } } + :deep(.tiny-dropdown__suffix-inner) { + width: 20px; + display: flex; + justify-content: center; + } + :deep(.tiny-dropdown .tiny-dropdown__trigger:not(.tiny-dropdown__caret-button):not(.is-disabled)):hover { + color: var(--te-common-text-primary); + } } } .tiny-dropdown-menu { padding: 8px 0px; - margin: 0px 0px 0px 20px; + margin-left: 20px; + margin-top: 4px !important; + border-radius: 4px; background-color: var(--te-common-bg-default); color: var(--te-common-text-weaken); z-index: 9999; @@ -288,7 +291,7 @@ const change = (item) => { background-color: var(--te-common-bg-default); &:hover { - background-color: var(--te-common-bg-prompt); + background-color: var(--te-common-bg-container); border-radius: 4px; color: var(--te-common-text-primary); } diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue index dac3474aa6..78fd535901 100644 --- a/packages/settings/styles/src/components/background/BackgroundGroup.vue +++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue @@ -398,7 +398,7 @@ export default { padding: 2px; } .background-label { - color: var(--te-common-text-primary); + color: var(--te-common-text-secondary); } .background-color, .background-clip { diff --git a/packages/settings/styles/src/components/background/BackgroundImageGradient.vue b/packages/settings/styles/src/components/background/BackgroundImageGradient.vue index 0c76d76204..3ddd25d457 100644 --- a/packages/settings/styles/src/components/background/BackgroundImageGradient.vue +++ b/packages/settings/styles/src/components/background/BackgroundImageGradient.vue @@ -12,9 +12,9 @@
- Repeat + 调整列宽
- +
diff --git a/packages/settings/styles/src/components/layout/LayoutGroup.vue b/packages/settings/styles/src/components/layout/LayoutGroup.vue index 6d927efbdc..815becf729 100644 --- a/packages/settings/styles/src/components/layout/LayoutGroup.vue +++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue @@ -129,6 +129,7 @@ export default { flex: 0 0 50px; padding: 0 3px; line-height: 24px; + color: var(--te-common-text-secondary); span { padding: 2px; diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue index 89ab3a67a2..d5022c39d2 100644 --- a/packages/settings/styles/src/components/size/SizeGroup.vue +++ b/packages/settings/styles/src/components/size/SizeGroup.vue @@ -487,6 +487,7 @@ span { flex: 0 0 54px; padding: 0 2px; line-height: 24px; + color: var(--te-common-text-secondary); } } @@ -546,6 +547,7 @@ span { flex: 0 0 54px; padding: 0 2px; line-height: 28px; + color: var(--te-common-text-secondary); span { padding: 2px; } diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue index 9d6c5ac131..71c2370724 100644 --- a/packages/settings/styles/src/components/typography/TypographyGroup.vue +++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue @@ -520,7 +520,7 @@ export default { .typography-label { margin-right: -16px; line-height: 16px; - color: var(--ti-lowcode-component-setting-panel-label-color); + color: var(--te-common-text-secondary); .font-family-col { width: 118px; diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue index 28d6d0292f..d7a3fc7c50 100644 --- a/packages/toolbars/media/src/Main.vue +++ b/packages/toolbars/media/src/Main.vue @@ -187,8 +187,8 @@ export default { maxWidth: '1920px', title: '大屏', subTitle: '1200px 及以上', - content: '此处添加的样式将适用于 1200 像素及以上，除非它们在更大的断点处进行编辑', - enContent: 'Style added here will apply at 1200px and up,unless they′re edited at a larger breakpoint' + content: '此处添加的样式将适用于 1200 像素及以上，除非它们在更大的断点处进行编辑。', + enContent: 'Style added here will apply at 1200px and up,unless they′re edited at a larger breakpoint.' }, { idx: 1, @@ -489,6 +489,9 @@ export default { .media-title { font-weight: 600; } + .content { + color: var(--te-common-text-secondary); + } } .setting-content { padding: 12px 8px; From 3f64e3d8ecd04231b5a44e44d17e533ed390edc8 Mon Sep 17 00:00:00 2001 From: betterdancing Date: Fri, 6 Dec 2024 01:30:29 -0800 Subject: [PATCH 07/13] fix(style-panel): modify settings panel label color & some reviews --- packages/common/component/MetaListItem.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/component/MetaListItem.vue b/packages/common/component/MetaListItem.vue index 767250ef77..332baf51c5 100644 --- a/packages/common/component/MetaListItem.vue +++ b/packages/common/component/MetaListItem.vue @@ -17,7 +17,7 @@ :visible-arrow="!expand" title="" width="295" - height="706" + height="auto" trigger="manual" @hide="hide(item)" > From 9a03f5e74c506090678aaa4751e190feffc1d5c1 Mon Sep 17 00:00:00 2001 From: betterdancing Date: Sun, 8 Dec 2024 23:19:03 -0800 Subject: [PATCH 08/13] fix(style-panel): modify some reviews & color variables & Align lables --- packages/common/component/MetaCodeEditor.vue | 2 +- .../TabsGroupConfigurator.vue | 74 ++++++++++--------- .../components/background/BackgroundGroup.vue | 2 +- .../src/components/border/BorderGroup.vue | 9 +-- .../components/classNamesContainer/index.vue | 6 +- .../src/components/effects/EffectGroup.vue | 2 +- .../src/components/inputs/InputSelect.vue | 2 +- .../styles/src/components/layout/GridBox.vue | 2 +- .../src/components/layout/LayoutGroup.vue | 3 +- .../src/components/position/PositionGroup.vue | 4 +- .../styles/src/components/size/SizeGroup.vue | 5 +- .../src/components/spacing/SpacingGroup.vue | 2 +- .../src/components/spacing/SpacingSetting.vue | 4 +- .../components/typography/TypographyGroup.vue | 6 +- packages/theme/base/src/common.less | 1 + 15 files changed, 62 insertions(+), 62 deletions(-) diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue index d74b7c700d..1b18c3ebd9 100644 --- a/packages/common/component/MetaCodeEditor.vue +++ b/packages/common/component/MetaCodeEditor.vue @@ -303,7 +303,7 @@ export default { height: 24px; padding: 4px; border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color); - border-radius: 6px; + border-radius: var(--te-base-border-radius-1); &:hover { border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color); diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue index a155ed76e9..7618ab0bba 100644 --- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue +++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue @@ -2,35 +2,31 @@
- - + - {{ item.label }} - - - - - + + {{ item.label }} + + + + + + +
{ .tabs-wrap { display: flex; justify-content: space-between; + background-color: var(--te-common-bg-container); + border-radius: 4px; + .tiny-button-group { + display: flex; + .button-wrap { + display: flex; + align-items: center; + } + } + .tiny-button.tiny-button.tiny-button--default { margin: 0; padding: 0; border: none; - background-color: var(--te-common-bg-container); line-height: 14px; min-width: 20px; + background-color: var(--te-common-bg-container); color: var(--te-common-text-weaken); &:hover { @@ -225,7 +231,6 @@ const change = (item) => { text-align: center; cursor: pointer; position: relative; - background-color: var(--te-common-bg-container); .label-text { width: 100%; height: 12px; @@ -240,7 +245,6 @@ const change = (item) => { justify-content: center; align-items: center; height: 24px; - background-color: var(--te-common-bg-container); color: var(--te-common-text-weaken); &:hover { @@ -290,14 +294,16 @@ const change = (item) => { padding: 4px 12px; background-color: var(--te-common-bg-default); - &:hover { - background-color: var(--te-common-bg-container); - border-radius: 4px; + &:hover, + &:active { + background-color: var(--te-common-bg-prompt); color: var(--te-common-text-primary); } } } .border-right { + display: inline-block; + height: 12px; border-right: 1px solid var(--te-common-border-default); } diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue index 78fd535901..63b148e447 100644 --- a/packages/settings/styles/src/components/background/BackgroundGroup.vue +++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue @@ -554,7 +554,7 @@ export default { cursor: pointer; border-radius: 2px; color: var(--te-common-text-emphasize); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } } } diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue index 5eb2432e76..4535111260 100644 --- a/packages/settings/styles/src/components/border/BorderGroup.vue +++ b/packages/settings/styles/src/components/border/BorderGroup.vue @@ -90,7 +90,7 @@ :class="{ 'is-setting': isBorderSetting(), 'set-border-style': true }" @click="openSetting(BORDER_PROPERTY.Border, $event)" > - 边框 + 边框
@@ -574,7 +574,6 @@ export default { .radius-label { flex: 0 0 48px; - padding: 0 2px; line-height: 24px; color: var(--ti-lowcode-component-setting-panel-label-color); } @@ -655,10 +654,6 @@ export default { .border-label { color: var(--te-common-text-secondary); flex-shrink: 0; - - .border-title { - margin-left: 2px; - } } .border-container { display: flex; @@ -724,7 +719,7 @@ export default { span { border-radius: 2px; color: var(--ti-lowcode-style-setting-label-color); - background: var(--ti-lowcode-style-setting-label-bg); + background: var(--te-common-bg-text-emphasize); cursor: pointer; } } diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue index b9af5b6edf..dcecfdc054 100644 --- a/packages/settings/styles/src/components/classNamesContainer/index.vue +++ b/packages/settings/styles/src/components/classNamesContainer/index.vue @@ -516,7 +516,7 @@ const handleDeleteCurSelector = () => { display: flex; padding: 3px; border: 1px solid var(--ti-lowcode-className-selector-container-border-color); - border-radius: 6px; + border-radius: var(--te-base-border-radius-1); cursor: pointer; } @@ -528,7 +528,7 @@ const handleDeleteCurSelector = () => { min-width: 0; padding: 1px 10px; border: 1px solid var(--ti-lowcode-className-selector-container-border-color); - border-radius: 6px; + border-radius: var(--te-base-border-radius-1); border-top-right-radius: 0; border-bottom-right-radius: 0; font-size: 12px; @@ -670,7 +670,7 @@ const handleDeleteCurSelector = () => { flex: 4; min-width: 84px; border: 1px solid var(--ti-lowcode-className-selector-container-border-color); - border-radius: 6px; + border-radius: var(--te-base-border-radius-1); border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; diff --git a/packages/settings/styles/src/components/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue index 7fc575ec99..0f878d1056 100644 --- a/packages/settings/styles/src/components/effects/EffectGroup.vue +++ b/packages/settings/styles/src/components/effects/EffectGroup.vue @@ -539,7 +539,7 @@ export default { cursor: pointer; border-radius: 2px; color: var(--te-common-text-emphasize); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } } diff --git a/packages/settings/styles/src/components/inputs/InputSelect.vue b/packages/settings/styles/src/components/inputs/InputSelect.vue index 642a50a2a8..1dd947a3ad 100644 --- a/packages/settings/styles/src/components/inputs/InputSelect.vue +++ b/packages/settings/styles/src/components/inputs/InputSelect.vue @@ -118,7 +118,7 @@ export default { .input-select { display: flex; align-items: center; - background-color: var(--ti-lowcode-tabs-bg); + background-color: var(--te-common-bg-default); border-radius: 3px; transition: 0.3s; &.focus { diff --git a/packages/settings/styles/src/components/layout/GridBox.vue b/packages/settings/styles/src/components/layout/GridBox.vue index 9a2e0a497c..62db085a9d 100644 --- a/packages/settings/styles/src/components/layout/GridBox.vue +++ b/packages/settings/styles/src/components/layout/GridBox.vue @@ -552,7 +552,7 @@ export default { } .is-setting { color: var(--ti-lowcode-style-setting-label-color); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } :deep(.reference-wrapper) { width: 100%; diff --git a/packages/settings/styles/src/components/layout/LayoutGroup.vue b/packages/settings/styles/src/components/layout/LayoutGroup.vue index 815becf729..4a05418de4 100644 --- a/packages/settings/styles/src/components/layout/LayoutGroup.vue +++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue @@ -127,7 +127,6 @@ export default { .display-label { flex: 0 0 50px; - padding: 0 3px; line-height: 24px; color: var(--te-common-text-secondary); @@ -139,7 +138,7 @@ export default { cursor: pointer; border-radius: 2px; color: var(--te-common-text-emphasize); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } } } diff --git a/packages/settings/styles/src/components/position/PositionGroup.vue b/packages/settings/styles/src/components/position/PositionGroup.vue index 671173925e..c0165b29a3 100644 --- a/packages/settings/styles/src/components/position/PositionGroup.vue +++ b/packages/settings/styles/src/components/position/PositionGroup.vue @@ -522,7 +522,7 @@ export default { align-items: center; justify-content: center; &.is-setting { - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } &.is-show { @@ -603,7 +603,7 @@ export default { cursor: pointer; border-radius: 2px; color: var(--te-common-text-emphasize); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } } .lr-path-color { diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue index d5022c39d2..2684c6b5d1 100644 --- a/packages/settings/styles/src/components/size/SizeGroup.vue +++ b/packages/settings/styles/src/components/size/SizeGroup.vue @@ -468,7 +468,6 @@ span { .size-label { flex: 0 0 52px; - padding-left: 2px; margin-right: 2px; line-height: 28px; color: var(--te-common-text-secondary); @@ -485,7 +484,6 @@ span { } .overflow-label { flex: 0 0 54px; - padding: 0 2px; line-height: 24px; color: var(--te-common-text-secondary); } @@ -495,7 +493,7 @@ span { cursor: pointer; border-radius: 2px; color: var(--te-common-text-emphasize); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } .is-setting { @@ -545,7 +543,6 @@ span { } .fit-label { flex: 0 0 54px; - padding: 0 2px; line-height: 28px; color: var(--te-common-text-secondary); span { diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue index 347d441110..50e34929f3 100644 --- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue +++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue @@ -513,7 +513,7 @@ export default { justify-content: center; &.is-setting { - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } &.is-show { diff --git a/packages/settings/styles/src/components/spacing/SpacingSetting.vue b/packages/settings/styles/src/components/spacing/SpacingSetting.vue index c906e2dba8..f4b3654e07 100644 --- a/packages/settings/styles/src/components/spacing/SpacingSetting.vue +++ b/packages/settings/styles/src/components/spacing/SpacingSetting.vue @@ -150,7 +150,7 @@ export default { &:hover, &.active { color: var(--ti-lowcode-style-setting-label-color); - background: var(--ti-lowcode-style-setting-label-bg); + background: var(--te-common-bg-text-emphasize); } } @@ -187,7 +187,7 @@ export default { &:hover, &.active { color: var(--ti-lowcode-style-setting-label-color); - background: var(--ti-lowcode-style-setting-label-bg); + background: var(--te-common-bg-text-emphasize); } } } diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue index 71c2370724..b6628a8723 100644 --- a/packages/settings/styles/src/components/typography/TypographyGroup.vue +++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue @@ -520,7 +520,6 @@ export default { .typography-label { margin-right: -16px; line-height: 16px; - color: var(--te-common-text-secondary); .font-family-col { width: 118px; @@ -663,12 +662,15 @@ export default { } } + .typography-label { + color: var(--te-common-text-secondary); + } .is-setting { span { cursor: pointer; border-radius: 2px; color: var(--te-common-text-emphasize); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } } } diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less index 5e77d231f7..43e1526172 100644 --- a/packages/theme/base/src/common.less +++ b/packages/theme/base/src/common.less @@ -49,6 +49,7 @@ --te-common-bg-switch: var(--te-base-gray-50); // 开关默认色 #c2c2c2 --te-common-bg-error: var(--te-base-red-20); // 浅色错误背景-背景色 #fce2e0 --te-common-bg-popover: var(--te-base-gray-0); // 对话框/tooltip/popover背景 #fff + --te-common-bg-text-emphasize: var(--te-base-blue-140); // 强调性文字背景色 rgba(20, 118, 255, 0.1) // 通用间距 --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等 From 2b7122d667c03abdf01e07e1355fc2f3ffb78bf4 Mon Sep 17 00:00:00 2001 From: betterdancing Date: Mon, 9 Dec 2024 01:33:53 -0800 Subject: [PATCH 09/13] fix(style-panel): modify some reviews; --- .../TabsGroupConfigurator.vue | 73 +++++-------------- .../design-core/assets/restart.svg | 0 .../template/designer/public/mock/bundle.json | 3 +- .../background/BackgroundImageGradient.vue | 4 +- packages/toolbars/media/src/Main.vue | 25 +++---- 5 files changed, 30 insertions(+), 75 deletions(-) rename "packages/design-core/assets/\351\207\215\345\220\257.svg" => packages/design-core/assets/restart.svg (100%) diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue index 7618ab0bba..5cd038fdf1 100644 --- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue +++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue @@ -8,21 +8,11 @@ :class="['tab-item', { selected: picked === (valueKey ? item.value[valueKey] : item.value) }]" @click.stop="change(item)" > - - {{ item.label }} - - - + + + {{ item.label }} + + @@ -37,26 +27,14 @@ :style="{ width: getItemWidth(true) + 'px' }" > - {{ - selectedCollapsedOption.label - }} - - - + + {{ selectedCollapsedOption.label }} + + @@ -90,7 +58,6 @@