From 945b3810746ee84320749a56e8809ac5f7f7cb8a Mon Sep 17 00:00:00 2001 From: lixuan Date: Thu, 9 Jan 2025 22:34:36 -0800 Subject: [PATCH 01/20] fix:Modify dialog footer button --- packages/common/component/MetaCodeEditor.vue | 4 +- .../VariableConfigurator.vue | 37 +++++++----- packages/theme/base/src/base.less | 1 + packages/theme/base/src/common.less | 10 +++- packages/theme/base/src/component-common.less | 57 +++++++++++++++++-- packages/theme/light/metaComponent.less | 2 +- 6 files changed, 87 insertions(+), 24 deletions(-) diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue index 5e730bf8a9..c92de3a627 100644 --- a/packages/common/component/MetaCodeEditor.vue +++ b/packages/common/component/MetaCodeEditor.vue @@ -267,7 +267,7 @@ export default { width: 100%; display: flex; text-align: center; - .tiny-button.edit-btn { + .tiny-button.tiny-button.edit-btn { color: var(--te-common-text-primary); border-color: var(--te-common-border-default); flex: 1; @@ -291,6 +291,7 @@ export default { .btn-box { display: flex; justify-content: flex-end; + width: 100%; &:has(.format-btn) { justify-content: space-between; } @@ -304,6 +305,7 @@ export default { height: 24px; padding: 4px; padding-left: 10px; + padding-right: 12px; border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color); border-radius: var(--te-base-border-radius-1); diff --git a/packages/configurator/src/variable-configurator/VariableConfigurator.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue index 5bba722d72..e7e67eab2d 100644 --- a/packages/configurator/src/variable-configurator/VariableConfigurator.vue +++ b/packages/configurator/src/variable-configurator/VariableConfigurator.vue @@ -21,6 +21,7 @@ type="info" description="你可以通过点击左侧区域变量列表绑定变量或处理函数，也可以在右边输入模式输入复杂的表达式。" class="header-alert" + :closable="false" >
@@ -85,7 +86,7 @@
-

用法

+ 用法

你可以通过点击左侧区域绑定变量或处理函数，或者点击右边的铅笔按钮切换到输入模式，输入复杂的表达式。 @@ -554,7 +555,6 @@ export default { .header-alert { margin-top: 0; margin-bottom: 12px; - color: var(--ti-lowcode-meta-bind-variable-header-alert-color); } .bind-dialog-content { display: flex; @@ -565,11 +565,11 @@ export default { width: 38%; .content-left__title { - color: var(--ti-lowcode-meta-bind-variable-content-left-title-color); + color: var(--te-common-text-primary); } .list-wrap { - border: 1px solid var(--ti-lowcode-meta-bind-variable-list-wrap-border-color); + border: 1px solid var(--te-common-border-divider); border-radius: 4px; height: 300px; margin-top: 8px; @@ -578,8 +578,8 @@ export default { .content-left__list { width: 120px; - color: var(--ti-lowcode-meta-bind-variable-content-left-list-color); - border-right: 1px solid var(--ti-lowcode-meta-bind-variable-content-left-list-border-right-color); + color: var(--te-common-text-secondary); + border-right: 1px solid var(--te-common-border-divider); } .content-left__list-item { @@ -588,21 +588,23 @@ export default { transition: background 0.3s; &.active, &:hover { - background: var(--ti-lowcode-meta-bind-variable-list-item-hover-bg-color); + background: var(--te-common-bg-container); + color: var(--te-common-text-primary); } } .item-selected { - background-color: var(--ti-lowcode-meta-bind-variable-item-selected-bg-color); + background-color: var(--te-common-bg-container); } .item-text { padding: 8px 12px; cursor: pointer; - color: var(--ti-lowcode-meta-bind-variable-item-text-color); + color: var(--te-common-text-secondary); &:hover { - background-color: var(--ti-lowcode-meta-bind-variable-item-hover-bg-color); + background-color: var(--te-common-bg-container); + color: var(--te-common-text-primary); } } @@ -635,7 +637,7 @@ export default { } .content-right__title { - color: var(--ti-lowcode-meta-bind-variable-content-right-title-color); + color: var(--te-common-text-primary); font-weight: 600; margin-right: 5px; } @@ -658,8 +660,8 @@ export default { height: 54%; border-radius: 4px; padding: 12px 8px; - color: var(--ti-lowcode-meta-bind-variable-top-color); - border: 1px solid var(--ti-lowcode-meta-bind-variable-top-border-color); + color: var(--te-common-text-primary); + border: 1px solid var(--te-common-border-divider); box-sizing: border-box; & > div { height: 100%; @@ -695,11 +697,15 @@ export default { border-radius: 4px; box-sizing: border-box; overflow: auto; - color: var(--ti-lowcode-meta-bind-variable-bottom-color); - border: 1px solid var(--ti-lowcode-meta-bind-variable-bottom-border-color); + color: var(--te-common-text-secondary); + border: 1px solid var(--te-common-border-divider); pre { font-family: consolas; } + .bottom__title { + font-weight: var(--te-base-font-weight-6); + color: var(--te-common-text-primary); + } } } } @@ -709,6 +715,7 @@ export default { display: flex; justify-content: space-between; align-items: center; + width: 100%; } } diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less index bddb556158..3e4c6cf8e4 100644 --- a/packages/theme/base/src/base.less +++ b/packages/theme/base/src/base.less @@ -39,6 +39,7 @@ --te-base-red-120: #d4827f; --te-base-red-130: #f2c5c2; --te-base-red-140: rgba(242, 48, 48, 0.3); + --te-base-red-150: #330002; // expand-orange --te-base-orange-10: #fff5e8; diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less index 43e1526172..fdc4bdd184 100644 --- a/packages/theme/base/src/common.less +++ b/packages/theme/base/src/common.less @@ -19,6 +19,7 @@ --te-common-text-checked: var(--te-base-blue-60); // 选中或者hover文字 #1476ff --te-common-icon-primary: var(--te-base-gray-90); // 重要图标色 #191919 + --te-common-icon-hover: var(--te-base-gray-70); // 图标悬浮色 #595959 --te-common-icon-secondary: var(--te-base-gray-60); // 图标默认色 #808080 --te-common-icon-disabled: var(--te-base-gray-50); // 图标禁用色 #c2c2c2 --te-common-icon-link: var(--te-base-blue-60); // 图标提示色 #1476ff @@ -32,6 +33,7 @@ --te-common-border-divider: var(--te-base-gray-30); //线条-白色背景分割线颜色 #e6e6e6 --te-common-border-bg-divider: var(--te-base-gray-40); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb --te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #1476ff + --te-common-border-error-hover: var(--te-base-red-30); // 线条 红色按钮边框hover色 #faa7a3 --te-common-bg-primary: var(--te-base-gray-90); // 主要按钮-背景色 #191919 --te-common-bg-primary-checked: var(--te-base-blue-60); // 主色-背景色 选中和hover等颜色 #1476ff @@ -47,9 +49,10 @@ --te-common-bg-default: var(--te-base-gray-0); // 白色背景-输入框背景/面板背景色 #fff --te-common-bg-disabled: var(--te-base-gray-20); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0 --te-common-bg-switch: var(--te-base-gray-50); // 开关默认色 #c2c2c2 - --te-common-bg-error: var(--te-base-red-20); // 浅色错误背景-背景色 #fce2e0 + --te-common-bg-error: var(--te-base-red-10); // 浅色错误背景-背景色 #fff1f0 --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-bg-info: var(--te-base-blue-20); // 提示框info背景色 #e7f1ff // 通用间距 --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等 @@ -75,6 +78,7 @@ --te-common-text-checked: var(--te-base-blue-60); // 选中或者hover文字 #1476ff --te-common-icon-primary: var(--te-base-gray-20); // 重要图标色 #F0F0F0 + --te-common-icon-hover: var(--te-base-gray-110); // 图标悬浮色 #B4B5B8 --te-common-icon-secondary: var(--te-base-gray-120); // 图标默认色 #8B8C8F --te-common-icon-disabled: var(--te-base-gray-50); // 图标禁用色 #C2C2C2 --te-common-icon-link: var(--te-base-blue-60); // 图标提示色 #1476ff @@ -88,6 +92,7 @@ --te-common-border-divider: var(--te-base-gray-140); //线条-白色背景分割线颜色 #36383D --te-common-border-bg-divider: var(--te-base-gray-130); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4E52 --te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #1476ff + --te-common-border-error-hover: var(--te-base-red-90); // 线条 红色按钮边框hover色 #78080e --te-common-bg-primary: var(--te-base-gray-20); // 主要按钮-背景色 #F0F0F0 --te-common-bg-primary-checked: var(--te-base-blue-60); // 主色-背景色 选中和hover等颜色 #1476ff @@ -102,8 +107,9 @@ --te-common-bg-default: var(--te-base-gray-160); // 深色背景-输入框背景/面板背景色 #212329 --te-common-bg-disabled: var(--te-base-gray-150); // 禁用/标签/下拉框多选标签 背景色 #2a2c31 --te-common-bg-switch: var(--te-base-gray-130); // 开关默认色 #4D4E52 - --te-common-bg-error: var(--te-base-red-20); // 浅色错误背景-背景色 #fce2e0 + --te-common-bg-error: var(--te-base-red-150); // 深色错误背景-背景色 #330002 --te-common-bg-popover: var(--te-base-gray-170); // 对话框/tooltip/popover背景 #0F1115 + --te-common-bg-info: var(--te-base-blue-110); // 提示框info背景色 #202b3f // 通用间距 --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等 diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less index 81d629128b..51c59fda1d 100644 --- a/packages/theme/base/src/component-common.less +++ b/packages/theme/base/src/component-common.less @@ -47,6 +47,9 @@ font-size: var(--te-base-font-size-base); } } + .tiny-select-dropdown__empty { + font-size: var(--te-base-font-size-base); + } // 下拉选项框 .tiny-select-dropdown__item { padding: 0px 12px; @@ -109,6 +112,10 @@ color: var(--te-common-text-disabled); font-size: var(--te-base-font-size-base); } + input::-webkit-input-placeholder { + color: var(--te-common-text-weaken); + font-size: var(--te-base-font-size-base); + } } // 3、折叠框 @@ -126,7 +133,7 @@ border-bottom-style: none; .tiny-collapse-item__word-overflow { - margin: var(--te-common-vertical-item-spacing-normal) 0px var(--te-common-vertical-form-label-spacing); + margin: var(--te-common-vertical-item-spacing-normal) 0px; width: 100%; line-height: var(--te-base-line-height-4); } @@ -309,10 +316,21 @@ } .tiny-button--danger { margin-right: 8px; + border-color: var(--te-common-color-error); + color: var(--te-common-color-error); + background-color: transparent; + &:hover { + border-color: var(--te-common-border-error-hover); + color: var(--te-common-color-error); + background-color: transparent; + } } .tiny-button--primary, .tiny-button--info { - margin-left: 8px; + margin-left: 4px; + } + .tiny-button--default.tiny-button--default { + border-color: var(--te-common-border-secondary); } } } @@ -343,7 +361,7 @@ background-color: var(--te-common-bg-primary); color: var(--te-common-text-inverse); border: 1px solid var(--te-common-border-active); - &:hover { + &:not(.is-disabled):hover { border: 1px solid var(--te-common-border-hover); background-color: var(--te-common-bg-secondary); } @@ -353,7 +371,7 @@ border-color: var(--te-common-border-active); background-color: var(--te-common-bg-primary); - &:hover { + &:not(.is-disabled):hover { border-color: var(--te-common-border-secondary); } } @@ -367,6 +385,7 @@ &.is-disabled { background-color: var(--te-common-bg-disabled); color: var(--te-common-text-disabled); + border-color: var(--te-common-border-disabled); .btn-icon { color: var(--te-common-icon-disabled); } @@ -516,6 +535,12 @@ .tiny-numeric__increase { border-bottom-color: var(--te-common-border-default); } + .tiny-numeric__decrease { + height: calc(50% - 0.5px); + svg { + transform: scale(0.8) translateY(1px); + } + } } .tiny-numeric-base .is-disabled { background: var(--te-common-bg-disabled); @@ -534,6 +559,7 @@ border: 0; width: 14px; margin-right: 4px; + height: auto; } } @@ -772,7 +798,7 @@ .tiny-form-item.is-error .tiny-textarea__inner, .tiny-form-item.is-error .tiny-textarea__inner:focus { border-color: var(--te-common-color-error); - background-color: var(--te-base-red-10); + background-color: var(--te-common-bg-error); } } .tiny-form--label-left.label-align .tiny-form-item.is-required .tiny-form-item__label.tiny-form-item__label { @@ -799,6 +825,19 @@ .tiny-form-item__label.tiny-form-item__label { padding-right: 16px; } +.tiny-form--label-left.has-required .tiny-form-item__label, +.tiny-form--label-left.label-align .tiny-form-item.is-required .tiny-form-item__label.tiny-form-item__label { + padding-left: 0; +} +.tiny-form--label-left.label-align + .tiny-form-item.is-required + ~ .tiny-form-item + .tiny-form-item__label.tiny-form-item__label { + padding-left: 0; +} +.tiny-form-item__label.tiny-form-item__label { + padding-right: 16px; +} // 19、表格 .tiny-grid__wrapper.tiny-grid__wrapper.tiny-grid__wrapper { @@ -982,3 +1021,11 @@ } } } + +.tiny-alert { + &.tiny-alert--info { + background: var(--te-common-bg-info); + border-color: transparent; + color: var(--te-common-text-primary); + } +} diff --git a/packages/theme/light/metaComponent.less b/packages/theme/light/metaComponent.less index 49cf1a5a37..9fe592bd26 100644 --- a/packages/theme/light/metaComponent.less +++ b/packages/theme/light/metaComponent.less @@ -10,7 +10,7 @@ // MetaCodeEditor --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-base-text-color); --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default); --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-base-default-button-border-hover-color); --ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken); } From 7e5d847abb8d3ca065044924a0f8cde762a62098 Mon Sep 17 00:00:00 2001 From: lixuan Date: Thu, 9 Jan 2025 22:36:26 -0800 Subject: [PATCH 02/20] fix: modify the block list in block --- .../common/component/BlockHistoryList.vue | 105 +++++++----------- packages/plugins/block/src/BlockSetting.vue | 22 +--- 2 files changed, 44 insertions(+), 83 deletions(-) diff --git a/packages/common/component/BlockHistoryList.vue b/packages/common/component/BlockHistoryList.vue index 22622cce4e..ed52196db0 100644 --- a/packages/common/component/BlockHistoryList.vue +++ b/packages/common/component/BlockHistoryList.vue @@ -1,26 +1,31 @@ diff --git a/packages/plugins/block/src/BlockSetting.vue b/packages/plugins/block/src/BlockSetting.vue index 2b347c2ce8..639fc6d808 100644 --- a/packages/plugins/block/src/BlockSetting.vue +++ b/packages/plugins/block/src/BlockSetting.vue @@ -69,6 +69,7 @@ @@ -154,6 +155,7 @@ export default { const state = reactive({ activeName: ['base', 'attribute', 'event', 'lifeCycle', 'history'], backupList: [], + lastVersion: {}, showDeployBlock: false, bindLifeCycles: {}, showAttributeGuide: false, @@ -174,6 +176,7 @@ export default { if (block?.id) { state.backupList = block.histories + state.lastVersion = block.last_build_info } } ) @@ -292,22 +295,10 @@ export default { .plugin-block-setting { :deep(.plugin-setting-header) { border: 0; - .button-group { - column-gap: 2px; - } - .tiny-button { - width: 40px; - padding: 0; - min-width: 40px; - margin-right: 2px; - } .close-plugin-setting-icon { margin-left: 4px; } } - .publish-btn { - margin-right: 8px; - } .video-close { font-size: 16px; @@ -337,10 +328,6 @@ export default { } } - .life-cycles-container { - padding: 0 0 12px 0; - } - .block-attribute, .block-event { position: relative; @@ -377,5 +364,8 @@ export default { color: var(--ti-lowcode-block-video-tip-color); } } + :deep(.tiny-collapse-item__content) { + padding: 0 12px 12px; + } } From 9a9164f367c877cbdfad32813e24ecb198b91186 Mon Sep 17 00:00:00 2001 From: lixuan Date: Thu, 9 Jan 2025 22:42:09 -0800 Subject: [PATCH 03/20] fix: Modify global button --- packages/common/component/ButtonGroup.vue | 15 +++++++- packages/common/component/PluginBlockList.vue | 14 ++----- packages/common/component/PluginPanel.vue | 5 ++- packages/common/component/PluginSetting.vue | 37 +++++++++++-------- packages/common/component/SvgButton.vue | 6 +-- packages/plugins/block/src/BlockEventList.vue | 9 ++--- .../plugins/block/src/BlockPropertyList.vue | 9 ++--- .../plugins/page/src/PageFolderSetting.vue | 11 ------ packages/plugins/page/src/PageSetting.vue | 26 +++---------- packages/plugins/schema/src/Main.vue | 2 - packages/plugins/script/src/Main.vue | 7 +--- packages/toolbars/save/src/Main.vue | 4 -- 12 files changed, 62 insertions(+), 83 deletions(-) diff --git a/packages/common/component/ButtonGroup.vue b/packages/common/component/ButtonGroup.vue index 81d65c9958..f55498c365 100644 --- a/packages/common/component/ButtonGroup.vue +++ b/packages/common/component/ButtonGroup.vue @@ -8,12 +8,25 @@ .button-group { display: grid; grid-auto-flow: column; - column-gap: 8px; + column-gap: 4px; align-items: center; :deep(.svg-button), :deep(.tiny-button) { margin: 0; } + :deep(.tiny-button) { + padding: 0; + min-width: 40px; + } + :deep(.tiny-button + .svg-button) { + margin-left: 4px; + } + :deep(.tiny-button + .tiny-button) { + margin-left: 8px; + } + :deep(.tiny-button.tiny-button.tiny-button--default) { + border-color: var(--te-common-border-secondary); + } } diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue index 3709f89730..071f6f2843 100644 --- a/packages/common/component/PluginBlockList.vue +++ b/packages/common/component/PluginBlockList.vue @@ -53,14 +53,14 @@

  • - +
  • - +
@@ -74,12 +74,12 @@
  • - +
  • - +
@@ -747,12 +747,6 @@ export default { font-size: 14px; color: var(--te-common-icon-secondary); } - .list-item-svg { - color: var(--te-common-icon-secondary); - } - .list-item-svg:hover { - background-color: transparent; - } } } diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue index cf0fb240fb..297ef4fd27 100644 --- a/packages/common/component/PluginPanel.vue +++ b/packages/common/component/PluginPanel.vue @@ -108,7 +108,10 @@ export default { align-items: center; :deep(.svg-button + .svg-button) { - margin: 0; + margin-left: 4px; + } + :deep(.svg-button + .icon-wrap) { + margin-left: 4px; } } } diff --git a/packages/common/component/PluginSetting.vue b/packages/common/component/PluginSetting.vue index 4491fed5c9..37e50e972a 100644 --- a/packages/common/component/PluginSetting.vue +++ b/packages/common/component/PluginSetting.vue @@ -9,15 +9,17 @@
- 保存 - - {{ iconButtonText }} - -
- - -
- + + 保存 + + {{ iconButtonText }} + +
+ + +
+ +
@@ -31,7 +33,9 @@ diff --git a/packages/settings/events/src/components/AddEventsDialog.vue b/packages/settings/events/src/components/AddEventsDialog.vue index ccfcdc16da..8926d282b6 100644 --- a/packages/settings/events/src/components/AddEventsDialog.vue +++ b/packages/settings/events/src/components/AddEventsDialog.vue @@ -11,7 +11,7 @@ ref="ruleForm" :model="formData" :rules="rules" - label-width="100px" + label-width="80px" :inline-message="true" validate-type="text" label-position="left" @@ -117,7 +117,7 @@ const addMethod = () => { From eb5eefd674aea810ff0fc122131a43635ce8db16 Mon Sep 17 00:00:00 2001 From: lixuan Date: Thu, 9 Jan 2025 22:52:38 -0800 Subject: [PATCH 07/20] fix: Modify icon --- packages/design-core/assets/add-folder.svg | 24 ++++++++++++------- .../design-core/assets/background-color.svg | 16 ++++++++++++- packages/design-core/assets/expand_all.svg | 18 ++++++++++++++ .../design-core/assets/global-setting.svg | 15 ++++++++++++ packages/design-core/assets/retract_all.svg | 17 +++++++++++++ packages/plugins/datasource/src/Main.vue | 10 ++------ 6 files changed, 83 insertions(+), 17 deletions(-) create mode 100644 packages/design-core/assets/expand_all.svg create mode 100644 packages/design-core/assets/global-setting.svg create mode 100644 packages/design-core/assets/retract_all.svg diff --git a/packages/design-core/assets/add-folder.svg b/packages/design-core/assets/add-folder.svg index 87a99124fd..e33cd5d4fc 100644 --- a/packages/design-core/assets/add-folder.svg +++ b/packages/design-core/assets/add-folder.svg @@ -1,9 +1,17 @@ - - - - - - - - + + + + + + diff --git a/packages/design-core/assets/background-color.svg b/packages/design-core/assets/background-color.svg index 5a5b78857b..93473265e7 100644 --- a/packages/design-core/assets/background-color.svg +++ b/packages/design-core/assets/background-color.svg @@ -1 +1,15 @@ - \ No newline at end of file + + + + + + + diff --git a/packages/design-core/assets/expand_all.svg b/packages/design-core/assets/expand_all.svg new file mode 100644 index 0000000000..deb75e7ddc --- /dev/null +++ b/packages/design-core/assets/expand_all.svg @@ -0,0 +1,18 @@ + + + + + + + diff --git a/packages/design-core/assets/global-setting.svg b/packages/design-core/assets/global-setting.svg new file mode 100644 index 0000000000..fdac99a7f2 --- /dev/null +++ b/packages/design-core/assets/global-setting.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/packages/design-core/assets/retract_all.svg b/packages/design-core/assets/retract_all.svg new file mode 100644 index 0000000000..2c692a2237 --- /dev/null +++ b/packages/design-core/assets/retract_all.svg @@ -0,0 +1,17 @@ + + + + + + + diff --git a/packages/plugins/datasource/src/Main.vue b/packages/plugins/datasource/src/Main.vue index 2f47712183..23e49fbcf6 100644 --- a/packages/plugins/datasource/src/Main.vue +++ b/packages/plugins/datasource/src/Main.vue @@ -5,13 +5,13 @@ @@ -146,12 +146,6 @@ export default { }
- +
@@ -40,12 +40,18 @@
我是你的开发小助手
智能对话
- 需要一个注册表单？ + 需要一个注册表单？ 如何将表单嵌进我的网站？ - 需要一个注册表单？
-
+
- + @@ -63,7 +74,6 @@
- 新对话 + 新对话
@@ -114,7 +122,7 @@ import { DropdownItem as TinyDropdownItem } from '@opentiny/vue' import { useCanvas, useHistory, usePage, useModal, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register' -import { iconChevronDown, iconPlus } from '@opentiny/vue-icon' +import { iconChevronDown } from '@opentiny/vue-icon' import { extend } from '@opentiny/vue-renderless/common/object' import { getBlockContent, initBlockList, AIModelOptions } from './js/robotSetting' @@ -128,8 +136,7 @@ export default { TinyDropdown, TinyDropdownMenu, TinyDropdownItem, - IconChevronDown: iconChevronDown(), - IconPlus: iconPlus() + IconChevronDown: iconChevronDown() }, emits: ['close-chat'], setup() { @@ -255,7 +262,7 @@ export default { } const resetContent = async () => { - activeMessages.value = chatWindowOpened.value ? messages.value : [messages.value[messages.value.length - 1]] + activeMessages.value = messages.value await scrollContent() } @@ -400,7 +407,7 @@ export default { .robot-dialog { position: fixed; - width: 600px; + width: 450px; z-index: 5; right: 40px; bottom: 40px; @@ -410,7 +417,7 @@ export default { var(--ti-lowcode-chat-bg-bottom-color) ); box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.15); - padding: 16px 16px 30px 16px; + padding: 16px; border-radius: 12px; } .common-svg { @@ -418,17 +425,20 @@ export default { } .chat-title-icons { - font-size: 16px; - height: 16px; + font-size: 20px; + height: 20px; margin-bottom: 20px; svg { float: right; - margin: 0 4px; + margin: 0 6px; cursor: pointer; - color: var(--ti-lowcode-chat-model-text); + color: var(--te-common-icon-primary); &:hover { opacity: 0.8; } + &:first-child { + margin-right: 0; + } } } .chat-title { @@ -449,6 +459,7 @@ export default { font-size: 16px; } .ml8 { + color: var(--te-common-icon-secondary); margin-left: 10px; } } @@ -494,7 +505,6 @@ export default { } } .chat-window { - max-height: 400px; overflow: scroll; .chat-avatar-wrap { width: 40px; @@ -508,14 +518,16 @@ export default { border: none; } } + .chat-avatar-wrap-ai { + padding-left: 0; + } .chat-content { - max-width: 568px; + max-width: 465px; border-radius: 8px; font-size: 12px; font-weight: normal; - line-height: 36px; - height: 36px; - padding: 0 12px; + line-height: 20px; + padding: 12px; &.chat-content-user { background-color: var(--ti-lowcode-chat-model-user-text-bg); @@ -525,6 +537,12 @@ export default { .chat-message-row { margin-bottom: 20px; } + &.max-chat-window { + height: 520px; + } + &.min-chat-window { + height: 80px; + } } .chat-content-ai { @@ -550,6 +568,7 @@ export default { height: 40px; border: 2px solid var(--ti-lowcode-chat-model-input-border); border-radius: 8px; + padding-right: 44px; } .tiny-input__inner:hover { border-color: var(--ti-lowcode-chat-model-input-border); @@ -557,13 +576,17 @@ export default { .tiny-input__inner:focus { border-color: var(--ti-lowcode-chat-model-input-border); } + .tiny-input__prefix, + .tiny-input__suffix { + padding-right: 8px; + } clip-path: inset(0 0 round 2px); svg { font-size: 16px; } } - .tiny-button { + .tiny-button.tiny-button.tiny-button { margin-left: 12px; background-image: linear-gradient( to bottom right, @@ -581,8 +604,9 @@ export default { float: right; padding: 0; transition: all 0.1s linear; - .icon-plus { - stroke: var(--ti-lowcode-chat-model-button-text); + .svg-icon { + color: var(--ti-lowcode-chat-model-button-text); + margin-right: 0; } span { display: none; @@ -590,7 +614,7 @@ export default { &:hover { transform: scale(1); border-radius: 8px; - width: 100px; + width: 105px; padding: 0 12px; span { display: inline-block; @@ -611,18 +635,20 @@ export default { .chat-loading .tiny-loading__spinner .tiny-loading__text { color: var(--ti-lowcode-chat-loading-text-color); } -.chat-model-popover { - background-color: var(--ti-lowcode-chat-model-popover-bg); +.chat-model-popover.chat-model-popover { + width: 220px; + background-color: var(--te-common-bg-default); .tiny-dropdown-item { - color: var(--ti-lowcode-chat-model-popover-color); + color: var(--te-common-text-primary); + max-width: 220px; &:hover { - color: var(--ti-lowcode-chat-model-popover-active-color); - background-color: var(--ti-lowcode-chat-model-popover-active-bg); + color: var(--te-common-text-primary); + background-color: var(--te-common-bg-container); } } .selected-model { - color: var(--ti-lowcode-chat-model-popover-active-color); - background-color: var(--ti-lowcode-chat-model-popover-active-bg); + color: var(--te-common-text-primary); + background-color: var(--te-common-bg-container); } } diff --git a/packages/plugins/robot/src/js/robotSetting.js b/packages/plugins/robot/src/js/robotSetting.js index d3ff7455d9..c4bee9ca29 100644 --- a/packages/plugins/robot/src/js/robotSetting.js +++ b/packages/plugins/robot/src/js/robotSetting.js @@ -15,7 +15,7 @@ import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register' export const AIModelOptions = [ { label: 'ChatGPT：gpt-3.5-turbo', value: 'gpt-3.5-turbo', manufacturer: 'openai' }, - { label: '文心一言：ERNIE-Bot-turbo', value: 'ERNIE-Bot-turbo', manufacturer: 'baiduai' } + { label: '文心一言：ERNIE-4.0-8k', value: 'ERNIE-4.0-8k', manufacturer: 'baiduai' } ] // 这里存放的是aichat的响应式数据 From ec993d11d0ed382fe3eec979f5b147eb6b02cd2c Mon Sep 17 00:00:00 2001 From: lixuan Date: Thu, 9 Jan 2025 22:56:41 -0800 Subject: [PATCH 09/20] fix: Modify form verification --- packages/plugins/block/src/BlockConfig.vue | 16 ++-- packages/plugins/state/src/CreateStore.vue | 22 ++++- packages/plugins/state/src/CreateVariable.vue | 22 ++++- packages/plugins/state/src/Main.vue | 84 +++++++++---------- 4 files changed, 86 insertions(+), 58 deletions(-) diff --git a/packages/plugins/block/src/BlockConfig.vue b/packages/plugins/block/src/BlockConfig.vue index 25c13f2045..e932f9bc1d 100644 --- a/packages/plugins/block/src/BlockConfig.vue +++ b/packages/plugins/block/src/BlockConfig.vue @@ -1,5 +1,12 @@ @@ -126,13 +129,28 @@ export default { diff --git a/packages/configurator/src/variable-configurator/VariableConfigurator.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue index e7e67eab2d..24de54a62a 100644 --- a/packages/configurator/src/variable-configurator/VariableConfigurator.vue +++ b/packages/configurator/src/variable-configurator/VariableConfigurator.vue @@ -86,7 +86,7 @@
- 用法 + 用法

你可以通过点击左侧区域绑定变量或处理函数，或者点击右边的铅笔按钮切换到输入模式，输入复杂的表达式。 @@ -702,7 +702,7 @@ export default { pre { font-family: consolas; } - .bottom__title { + .bottom-title { font-weight: var(--te-base-font-weight-6); color: var(--te-common-text-primary); } diff --git a/packages/design-core/assets/add-folder.svg b/packages/design-core/assets/add-folder.svg index e33cd5d4fc..b42f93b831 100644 --- a/packages/design-core/assets/add-folder.svg +++ b/packages/design-core/assets/add-folder.svg @@ -1,5 +1,4 @@ - diff --git a/packages/plugins/help/src/HelpIcon.vue b/packages/plugins/help/src/HelpIcon.vue index 9b38b51048..43e9d81141 100644 --- a/packages/plugins/help/src/HelpIcon.vue +++ b/packages/plugins/help/src/HelpIcon.vue @@ -7,7 +7,6 @@ trigger="click" :visible-arrow="false" id="help-icon-popover" - :key="offset" >

diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue index 70b6764b96..21a74a54b8 100644 --- a/packages/plugins/page/src/PageSetting.vue +++ b/packages/plugins/page/src/PageSetting.vue @@ -44,7 +44,7 @@
- + diff --git a/packages/plugins/state/src/CreateStore.vue b/packages/plugins/state/src/CreateStore.vue index 8b20cecf87..302d86826d 100644 --- a/packages/plugins/state/src/CreateStore.vue +++ b/packages/plugins/state/src/CreateStore.vue @@ -154,7 +154,7 @@ export default { } const rules = { name: { validator: validateName, required: true }, - state: { required: true } + STATE: { required: true } } const editorCode = computed(() => { const { state: storeState } = state.storeData.variable || {} @@ -227,17 +227,19 @@ export default { const storeDataForm = ref(null) const validateForm = () => { - return new Promise((resolve, reject) => { + return new Promise((resolve) => { storeDataForm.value.validate((valid) => { if (valid) { resolve() - } else { - reject(new Error('校验失败')) } }) }) } + const clearValidateForm = () => { + storeDataForm.value?.clearValidate() + } + return { STATE, GETTERS, @@ -258,7 +260,8 @@ export default { actions, cancel, validateForm, - storeDataForm + storeDataForm, + clearValidateForm } } } diff --git a/packages/plugins/state/src/CreateVariable.vue b/packages/plugins/state/src/CreateVariable.vue index caef2bbc20..acfb81fcac 100644 --- a/packages/plugins/state/src/CreateVariable.vue +++ b/packages/plugins/state/src/CreateVariable.vue @@ -373,17 +373,19 @@ export default { const createDataForm = ref(null) const validateForm = () => { - return new Promise((resolve, reject) => { + return new Promise((resolve) => { createDataForm.value.validate((valid) => { if (valid) { resolve() - } else { - reject(new Error('校验失败')) } }) }) } + const clearValidateForm = () => { + createDataForm.value?.clearValidate() + } + const options = { lineNumbers: true, language: 'javascript', @@ -420,7 +422,8 @@ export default { fullscreenChange, cancel, validateForm, - createDataForm + createDataForm, + clearValidateForm } } } diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue index b3aa9db5a7..62e548086e 100644 --- a/packages/plugins/state/src/Main.vue +++ b/packages/plugins/state/src/Main.vue @@ -54,6 +54,7 @@ :createData="state.createData" @nameInput="updateName" @close="cancel" + @mouseleave="onMouseLeaveVariable" />
@@ -208,6 +210,7 @@ export default { updateSchema({ state: { ...(schema.state || {}), [name]: variable } }) useHistory().addHistory() + openCommon() }) } else { storeRef.value.validateForm().then(() => { @@ -241,9 +244,9 @@ export default { isPanelShow.value = false useResource().appSchemaState.globalState = res.global_state || [] }) + openCommon() }) } - openCommon() } const search = (value) => { @@ -340,6 +343,12 @@ export default { query.value = '' initDataSource() } + const onMouseLeaveVariable = () => { + variableRef.value?.clearValidateForm() + } + const onMouseLeaveStore = () => { + storeRef.value?.clearValidateForm() + } onActivated(() => { initDataSource() @@ -371,7 +380,9 @@ export default { storeRef, OPTION_TYPE, open, - docsUrl + docsUrl, + onMouseLeaveVariable, + onMouseLeaveStore } } } diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue index c089003ca9..dd1fb79f29 100644 --- a/packages/settings/styles/src/components/background/ImageSetting.vue +++ b/packages/settings/styles/src/components/background/ImageSetting.vue @@ -1,21 +1,6 @@