From 4f92bfb480c7c2faa7f699c87aeb7df7534cd054 Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Fri, 27 Sep 2024 17:12:13 +0800
Subject: [PATCH 1/5] feat(style): modify advance panel ui

---
 packages/common/component/MetaCodeEditor.vue  |  4 +-
 .../slot-configurator/SlotConfigurator.vue    |  3 +
 .../VariableConfigurator.vue                  |  3 +
 packages/design-core/assets/add.svg           | 17 ++--
 packages/plugins/i18n/src/Main.vue            |  7 +-
 .../settings/events/src/commonjs/events.js    |  2 +-
 .../events/src/components/AddEventsDialog.vue |  2 +-
 .../events/src/components/AdvanceConfig.vue   |  4 +-
 .../events/src/components/BindEvents.vue      | 80 ++++++++++---------
 .../src/components/BindEventsDialog.vue       | 26 +++++-
 .../components/BindEventsDialogContent.vue    | 46 +++--------
 .../components/BindEventsDialogSidebar.vue    |  6 +-
 packages/theme/base/src/component-common.less |  6 +-
 packages/theme/dark/canvas.less               |  4 +-
 packages/theme/dark/events.less               |  6 +-
 packages/theme/light/canvas.less              |  4 +-
 packages/theme/light/events.less              |  6 +-
 17 files changed, 124 insertions(+), 102 deletions(-)

diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index f46f715a0a..bf2a9b70c8 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -271,7 +271,9 @@ export default {
 .btn-box {
   display: flex;
   justify-content: flex-end;
-
+  .format-btn {
+    margin-right: 8px;
+  }
   &:has(.format-btn) {
     justify-content: space-between;
   }
diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
index 4dd00bd524..35ebbe0f49 100644
--- a/packages/configurator/src/slot-configurator/SlotConfigurator.vue
+++ b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
@@ -136,6 +136,9 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  &:not(:last-child) {
+    margin-bottom: 8px;
+  }
   .slot-name {
     width: 30%;
     color: var(--ti-lowcode-dialog-font-color);
diff --git a/packages/configurator/src/variable-configurator/VariableConfigurator.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
index 35253d2dd5..d0411dee38 100644
--- a/packages/configurator/src/variable-configurator/VariableConfigurator.vue
+++ b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
@@ -712,6 +712,9 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    .left {
+      margin-right: 8px;
+    }
   }
 }
 </style>
diff --git a/packages/design-core/assets/add.svg b/packages/design-core/assets/add.svg
index 44f21fa3b4..bb20e704dc 100644
--- a/packages/design-core/assets/add.svg
+++ b/packages/design-core/assets/add.svg
@@ -1,11 +1,6 @@
-<svg
-  viewBox="0 0 1024 1024"
-  version="1.1"
-  xmlns="http://www.w3.org/2000/svg"
-  p-id="17880"
-  >
-  <path
-    d="M915.7 80.6H143.2c-4.6 0-8.4 3.7-8.4 8.4v63.3c0 4.6 3.7 8.4 8.4 8.4h772.6c4.6 0 8.4-3.7 8.4-8.4V88.9c-0.1-4.6-3.9-8.3-8.5-8.3zM525.2 451.2H142.9c-4.4 0-8 3.6-8 8v63.9c0 4.4 3.6 8 8 8h382.4c4.9 0 8.9-4 8.9-8.9V460c-0.1-4.8-4.1-8.8-9-8.8zM143 901.9h261c4.5 0 8.2-3.7 8.2-8.2v-63.6c0-4.5-3.7-8.2-8.2-8.2H143c-4.5 0-8.2 3.7-8.2 8.2v63.6c0 4.5 3.7 8.2 8.2 8.2zM952.7 661H774.8V483.2c0-4.5-3.6-8.1-8.1-8.1H703c-4.5 0-8.2 3.6-8.2 8.1V661H517c-4.5 0-8.1 3.6-8.1 8.1v63.7c0 4.5 3.6 8.1 8.1 8.1h177.8v177.8c0 4.5 3.6 8.1 8.2 8.1h63.7c4.5 0 8.1-3.6 8.1-8.1V741h177.8c4.5 0 8.1-3.6 8.1-8.1v-63.7c0.1-4.5-3.5-8.2-8-8.2z"
-    p-id="17881"
-  ></path>
-</svg>
\ No newline at end of file
+<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+	<g mask="url(#mask413_9366)">
+		<path id="形状结合" d="M8 2.5C8.27 2.5 8.5 2.71 8.5 3L8.5 7.48L13 7.5C13.27 7.5 13.5 7.71 13.5 8C13.5 8.27 13.27 8.5 13 8.5L8.5 8.48L8.5 13C8.5 13.27 8.27 13.5 8 13.5C7.71 13.5 7.5 13.27 7.5 13L7.5 8.5L3 8.5C2.71 8.5 2.5 8.27 2.5 8C2.5 7.71 2.71 7.5 3 7.5L7.5 7.5L7.5 3C7.5 2.71 7.71 2.5 8 2.5Z" fill="currentColor" fill-opacity="1.000000" fill-rule="nonzero"/>
+	</g>
+</svg>
diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue
index 1b5656b7b0..5976c85594 100644
--- a/packages/plugins/i18n/src/Main.vue
+++ b/packages/plugins/i18n/src/Main.vue
@@ -18,7 +18,9 @@
         </tiny-input>
       </div>
       <div class="btn-box">
-        <tiny-button @click="openEditor($event, {})"><icon-plus class="btn-icon"></icon-plus>添加词条</tiny-button>
+        <tiny-button @click="openEditor($event, {})" class="left"
+          ><icon-plus class="btn-icon"></icon-plus>添加词条</tiny-button
+        >
         <tiny-button @click="batchDelete" :disabled="!selectedRowLength"
           ><svg-icon class="btn-icon" name="delete"></svg-icon>删除</tiny-button
         >
@@ -485,6 +487,9 @@ export default {
     margin-right: 6px;
     color: var(--ti-lowcode-i18n-icon-color);
   }
+  .left {
+    margin-right: 8px;
+  }
   :deep(.tiny-file-upload) {
     margin: 0 8px;
   }
diff --git a/packages/settings/events/src/commonjs/events.js b/packages/settings/events/src/commonjs/events.js
index 53572d4508..d89b96c377 100644
--- a/packages/settings/events/src/commonjs/events.js
+++ b/packages/settings/events/src/commonjs/events.js
@@ -13,7 +13,7 @@
 export const commonEvents = {
   onClick: {
     label: {
-      zh_CN: '鼠标单击时触发'
+      zh_CN: '点击事件'
     },
     description: {
       zh_CN: '鼠标单击时触发的回调函数'
diff --git a/packages/settings/events/src/components/AddEventsDialog.vue b/packages/settings/events/src/components/AddEventsDialog.vue
index 885fb85e9e..ccfcdc16da 100644
--- a/packages/settings/events/src/components/AddEventsDialog.vue
+++ b/packages/settings/events/src/components/AddEventsDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <tiny-dialog-box
     :visible="visible"
-    title="添加自定义事件"
+    title="添加新事件"
     width="400px"
     :append-to-body="true"
     :close-on-click-modal="false"
diff --git a/packages/settings/events/src/components/AdvanceConfig.vue b/packages/settings/events/src/components/AdvanceConfig.vue
index 310c54381a..15f082a8e5 100644
--- a/packages/settings/events/src/components/AdvanceConfig.vue
+++ b/packages/settings/events/src/components/AdvanceConfig.vue
@@ -235,7 +235,9 @@ export default {
 <style lang="less" scoped>
 .advanced-config-container {
   .advnce-config {
-    padding: 10px;
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
     align-items: center;
     display: flex;
     column-gap: 12px;
diff --git a/packages/settings/events/src/components/BindEvents.vue b/packages/settings/events/src/components/BindEvents.vue
index fae2082d1d..da3715b10a 100644
--- a/packages/settings/events/src/components/BindEvents.vue
+++ b/packages/settings/events/src/components/BindEvents.vue
@@ -1,25 +1,14 @@
 <template>
   <div class="bind-action-list">
     <div class="popover-head">
-      <span class="head-left">
-        <tiny-button
-          class="title add-custom-event-button"
-          :reset-time="0"
-          @click.stop="handleToggleAddEventDialog(true)"
-        >
-          <span class="custom-event-button-text">添加自定义事件</span>
-          <tiny-popover placement="bottom-start" trigger="hover" popperClass="setting-advanced-add-custom-event-tip">
-            <template #reference>
-              <icon-help-query class="icon-help"></icon-help-query>
-            </template>
-            <div class="add-custom-event-tip">
-              支持添加原生 DOM 事件，添加后点击
-              <span class="event-tip-highlight"> 绑定事件 </span> 为画布中所选元素增加事件
-            </div>
-          </tiny-popover>
-        </tiny-button>
-      </span>
-      <tiny-popover popperClass="option-popper setting-advanced-bind-event-list" placement="bottom-end" trigger="hover">
+      <tiny-popover
+        popperClass="option-popper setting-advanced-bind-event-list"
+        placement="bottom-start"
+        trigger="hover"
+        class="bind-action-button-item"
+        width="256"
+        :visible-arrow="false"
+      >
         <template #reference>
           <tiny-button class="bind-event-btn">
             <span>绑定事件</span>
@@ -33,10 +22,17 @@
             :class="['bind-event-list-item', { 'bind-event-list-item-notallow': state.bindActions[name] }]"
             @click="openActionDialog({ eventName: name }, true)"
           >
-            <div>{{ name }}&nbsp;&nbsp;{{ event?.label?.zh_CN || name }}</div>
+            <div>{{ name }}&nbsp; | &nbsp;{{ event?.label?.zh_CN || name }}</div>
           </li>
         </ul>
       </tiny-popover>
+      <tiny-button
+        class="title add-custom-event-button bind-action-button-item"
+        @click="handleToggleAddEventDialog(true)"
+      >
+        <svg-icon name="add" class="custom-event-button-icon"></svg-icon>
+        <span class="custom-event-button-text">添加新事件</span>
+      </tiny-button>
     </div>
     <ul v-show="!isEmpty" class="bind-actions">
       <li v-for="action in state.bindActions" :key="action.eventName">
@@ -71,8 +67,7 @@
       <div class="icon">
         <svg-icon name="empty-action" class="empty-action-icon"></svg-icon>
       </div>
-      <div class="center">元素事件绑定</div>
-      <span class="text"> 点击 <span class="empty-bind-event-tip">绑定事件</span>为画布中所选元素增加事件</span>
+      <div class="center">支持添加原生DOM事件，然后点击 绑定事件 为画布所选元素增加事件</div>
     </div>
   </div>
   <bind-events-dialog :eventBinding="state.eventBinding"></bind-events-dialog>
@@ -98,7 +93,7 @@ import {
   META_APP
 } from '@opentiny/tiny-engine-meta-register'
 import { BlockLinkEvent, SvgButton } from '@opentiny/tiny-engine-common'
-import { iconHelpQuery, iconChevronDown } from '@opentiny/vue-icon'
+import { iconChevronDown } from '@opentiny/vue-icon'
 import BindEventsDialog, { open as openDialog } from './BindEventsDialog.vue'
 import AddEventsDialog from './AddEventsDialog.vue'
 
@@ -108,7 +103,6 @@ export default {
     BindEventsDialog,
     TinyPopover: Popover,
     TinyButton: Button,
-    IconHelpQuery: iconHelpQuery(),
     IconChevronDown: iconChevronDown(),
     SvgButton,
     AddEventsDialog
@@ -145,7 +139,6 @@ export default {
       const props = pageState?.currentSchema?.props || {}
       const keys = Object.keys(props)
       state.bindActions = {}
-
       // 遍历组件事件元数据
       Object.entries(state.componentEvents).forEach(([eventName, componentEvent]) => {
         // 查找组件已添加的事件
@@ -317,28 +310,42 @@ export default {
     display: flex;
     justify-content: space-between;
     margin-top: 12px;
-    .head-left {
-      margin-right: 8px;
-      .add-custom-event-button {
-        padding: 0 16px;
-        font-size: 12px;
-        .custom-event-button-text {
-          margin-right: 4px;
-        }
+    .bind-action-button-item {
+      width: 50%;
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+    .add-custom-event-button {
+      padding: 0 16px;
+      font-size: 12px;
+      margin-right: 0;
+      .custom-event-button-text {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .custom-event-button-icon {
+        display: inline-block;
+        vertical-align: middle;
+        color: var(--ti-lowcode-events-custom-icon-color);
+        font-size: 13px;
       }
     }
     .bind-event-btn {
       padding: 0 16px;
       font-size: 12px;
+      width: 100%;
     }
   }
   .empty-action {
     display: flex;
     flex-direction: column;
     align-items: center;
+    background-color: var(--ti-lowcode-events-empty-action-bg-color);
     color: var(--ti-lowcode-events-empty-action-color);
+    padding: 24px 18px;
+    margin-top: 8px;
     .empty-action-icon {
-      margin-top: 20px;
       font-size: 48px;
     }
     .icon {
@@ -358,6 +365,7 @@ export default {
   }
 }
 .bind-event-list {
+  padding: 8px 0;
   color: var(--ti-lowcode-events-bind-event-list-color);
 }
 .bind-event-list-item-notallow {
@@ -366,8 +374,8 @@ export default {
   color: var(--ti-lowcode-events-bind-event-list-item-disabled-color);
 }
 .bind-event-list-item {
-  padding: 8px 12px;
-
+  padding: 0 12px;
+  line-height: 24px;
   &:hover {
     cursor: pointer;
     background: var(--lowcode-events-bind-event-list-item-hover-bg-color);
diff --git a/packages/settings/events/src/components/BindEventsDialog.vue b/packages/settings/events/src/components/BindEventsDialog.vue
index ed1cc5909c..10d387a91a 100644
--- a/packages/settings/events/src/components/BindEventsDialog.vue
+++ b/packages/settings/events/src/components/BindEventsDialog.vue
@@ -3,18 +3,23 @@
     :visible="dialogVisible"
     title="事件绑定"
     width="50%"
+    dialog-class="bind-event-dialog"
+    draggable
     :append-to-body="true"
     @close="closeDialog"
     @opened="openedDialog"
   >
+    <div class="bind-event-dialog-tip">
+      选择已有方法或者添加新方法（点击 确定 之后将在JS面板中创建一个该名称的新方法）。
+    </div>
     <div class="bind-event-dialog-content">
       <component :is="BindEventsDialogSidebar" :eventBinding="eventBinding"></component>
       <component :is="BindEventsDialogContent" :dialogVisible="dialogVisible"></component>
     </div>
     <template #footer>
       <div class="bind-dialog-footer">
-        <tiny-button type="info" @click="confirm">确 定</tiny-button>
         <tiny-button @click="closeDialog">取 消</tiny-button>
+        <tiny-button type="info" @click="confirm">确 定</tiny-button>
       </div>
     </template>
   </tiny-dialog-box>
@@ -32,7 +37,6 @@ import {
 } from '@opentiny/tiny-engine-meta-register'
 import { Button, DialogBox } from '@opentiny/vue'
 import { nextTick, provide, reactive, ref } from 'vue'
-import { METHOD_TIPS_MAP } from './constants'
 import meta from '../../meta'
 
 const dialogVisible = ref(false)
@@ -67,7 +71,7 @@ export default {
     const state = reactive({
       editorContent: '',
       bindMethodInfo: {},
-      tip: METHOD_TIPS_MAP.default,
+      tip: '',
       tipError: false,
       enableExtraParams: false,
       isValidParams: true
@@ -116,7 +120,7 @@ export default {
 
     const resetTipError = () => {
       state.tipError = false
-      state.tip = METHOD_TIPS_MAP.default
+      state.tip = ''
       state.isValidParams = true
     }
 
@@ -227,6 +231,20 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.bind-event-dialog {
+  z-index: 99;
+  :deep(.tiny-dialog-box) {
+    min-width: 760px;
+  }
+}
+
+.bind-event-dialog-tip {
+  padding: 8px 14px;
+  margin-bottom: 8px;
+  background-color: var(--te-common-bg-container);
+  color: var(--te-common-text-weaken);
+}
+
 .bind-event-dialog-content {
   display: flex;
   min-width: 700px;
diff --git a/packages/settings/events/src/components/BindEventsDialogContent.vue b/packages/settings/events/src/components/BindEventsDialogContent.vue
index 45fafdb5b2..31b00d1e86 100644
--- a/packages/settings/events/src/components/BindEventsDialogContent.vue
+++ b/packages/settings/events/src/components/BindEventsDialogContent.vue
@@ -13,27 +13,13 @@
     </div>
     <div :class="['content-right-bottom', { 'tip-error': !context.isValidParams }]">
       <div class="content-right-title">
-        <span class="set-params-tip">扩展参数设置</span>
-        <tiny-popover placement="top-start" width="350" trigger="hover">
-          <template #reference>
-            <icon-help-query></icon-help-query>
-          </template>
-          <p>
-            扩展参数：调用当前事件传入的真实参数，数组格式，追加在原有事件参数之后<br />
-            如:
-            {{ context.bindMethodInfo.name }}(eventArgs, extParam1, extParam2, ...)
-          </p>
-        </tiny-popover>
-
-        <tiny-switch v-model="context.enableExtraParams" class="set-switch" :show-text="true">
-          <template #open>
-            <span>开启</span>
-          </template>
-          <template #close>
-            <span>关闭</span>
-          </template>
-        </tiny-switch>
+        <tiny-checkbox v-model="context.enableExtraParams" name="tiny-checkbox">扩展参数设置</tiny-checkbox>
+        <div class="set-params-tip">
+          <div>扩展参数：调用当前事件传入的真实参数，数组格式，追加在原有事件参数之后</div>
+          如: {{ context.bindMethodInfo.name }}(eventArgs, extParam1, extParam2, ...)
+        </div>
       </div>
+
       <div class="content-right-monaco">
         <monaco-editor
           v-if="dialogVisible"
@@ -54,8 +40,7 @@
 <script>
 import { VueMonaco } from '@opentiny/tiny-engine-common'
 import { getMetaApi, META_APP } from '@opentiny/tiny-engine-meta-register'
-import { Input, Popover, Switch } from '@opentiny/vue'
-import { iconHelpQuery } from '@opentiny/vue-icon'
+import { Input, Checkbox } from '@opentiny/vue'
 import { inject } from 'vue'
 import { METHOD_TIPS_MAP, NEW_METHOD_TYPE, VALID_VARNAME_RE } from './constants'
 
@@ -63,9 +48,7 @@ export default {
   components: {
     MonacoEditor: VueMonaco,
     TinyInput: Input,
-    TinyPopover: Popover,
-    IconHelpQuery: iconHelpQuery(),
-    TinySwitch: Switch
+    TinyCheckbox: Checkbox
   },
   props: {
     dialogVisible: Boolean
@@ -110,7 +93,7 @@ export default {
         }
       }
       context.tipError = false
-      context.tip = METHOD_TIPS_MAP.default
+      context.tip = ''
     }
 
     return {
@@ -163,14 +146,11 @@ export default {
   }
   .content-right-top .content-right-title,
   .content-right-bottom .content-right-title {
-    font-weight: 600;
-    margin-bottom: 12px;
+    margin-bottom: 8px;
     .set-params-tip {
-      margin-right: 3px;
-    }
-    .set-switch {
-      width: 60px;
-      margin-left: 10px;
+      margin-top: 6px;
+      font-weight: 400;
+      color: var(--te-common-text-weaken);
     }
   }
 
diff --git a/packages/settings/events/src/components/BindEventsDialogSidebar.vue b/packages/settings/events/src/components/BindEventsDialogSidebar.vue
index 9171eec081..554f612f32 100644
--- a/packages/settings/events/src/components/BindEventsDialogSidebar.vue
+++ b/packages/settings/events/src/components/BindEventsDialogSidebar.vue
@@ -106,14 +106,14 @@ export default {
   flex-direction: column;
 
   .left-title {
-    font-weight: 600;
+    font-weight: 400;
   }
 
   .left-list-wrap {
     border: 1px solid var(--ti-lowcode-bind-event-dialog-content-left-border-color);
     border-radius: 4px;
     height: 300px;
-    margin-top: 12px;
+    margin-top: 8px;
     display: flex;
     flex: 1;
 
@@ -131,7 +131,7 @@ export default {
         justify-content: space-between;
         padding: 8px 12px;
         cursor: pointer;
-
+        color: var(--ti-lowcode-bind-event-dialog-color);
         &.active {
           background: var(--ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color);
         }
diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
index ec6fb9581c..e07ebe67a5 100644
--- a/packages/theme/base/src/component-common.less
+++ b/packages/theme/base/src/component-common.less
@@ -247,6 +247,9 @@
     padding: 0;
     display: flex;
     flex-direction: row-reverse;
+    button:not(:first-child) {
+      margin-right: 8px;
+    }
   }
 }
 
@@ -259,8 +262,6 @@
   line-height: 24px;
   // 默认按钮
   &.tiny-button--default {
-    margin-right: 8px;
-    margin-left: 0px;
     border: 1px solid var(--te-common-border-secondary);
     color: var(--te-common-text-primary);
     background-color: var(--te-common-bg-default);
@@ -581,6 +582,7 @@
       color: var(--te-common-text-primary);
       font-size: var(--te-base-font-size-base);
       padding: 12px;
+      border: 1px solid var(--te-common-border-default);
       &[x-placement^='top'] {
         .popper__arrow {
           &.popper__arrow::after {
diff --git a/packages/theme/dark/canvas.less b/packages/theme/dark/canvas.less
index 5db552ce40..c05a1c6375 100644
--- a/packages/theme/dark/canvas.less
+++ b/packages/theme/dark/canvas.less
@@ -5,8 +5,8 @@
   --ti-lowcode-canvas-hover-line-in-forbid-bg-color: rgba(242, 48, 48, 0.3);
   --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-base-text-color-2);
   --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-canvas-corner-mark-left-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--te-common-text-weaken);
+  --ti-lowcode-canvas-corner-mark-left-color: var(--te-common-text-emphasize);
+  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--te-common-text-emphasize);
   --ti-lowcode-canvas-corner-mark-bottom-right-border-color: #c2c2c2;
   --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: #f5f5f5;
   --ti-lowcode-canvas-corner-mark-right-color: var(--ti-lowcode-base-gray-0);
diff --git a/packages/theme/dark/events.less b/packages/theme/dark/events.less
index db31330fd0..4a43098d1f 100644
--- a/packages/theme/dark/events.less
+++ b/packages/theme/dark/events.less
@@ -14,7 +14,9 @@
   --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
   --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-base-success-color);
   --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-events-empty-action-color: var(--ti-lowcode-base-text-color-1);
+  --ti-lowcode-events-empty-action-bg-color: var(--te-common-bg-container);
+  --ti-lowcode-events-empty-action-color: var(--te-common-text-weaken);
+  --ti-lowcode-events-custom-icon-color: var(--te-common-text-weaken);
   --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color);
 }
 
@@ -26,7 +28,7 @@
 }
 
 .bind-event-dialog-content {
-  --ti-lowcode-bind-event-dialog-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-bind-event-dialog-color: var(--te-common-text-secondary);
   --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-base-split-color-1);
   --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-base-split-color-1);
   --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-base-gray-90);
diff --git a/packages/theme/light/canvas.less b/packages/theme/light/canvas.less
index aec4ae443b..d9539b31ed 100644
--- a/packages/theme/light/canvas.less
+++ b/packages/theme/light/canvas.less
@@ -5,8 +5,8 @@
   --ti-lowcode-canvas-hover-line-in-forbid-bg-color: var(--te-base-rgba-26);
   --ti-lowcode-canvas-choose-slot-border-color: var(--te-common-border-checked);
   --ti-lowcode-canvas-choose-slot-color: var(--te-common-text-dark-inverse);
-  --ti-lowcode-canvas-corner-mark-left-color: var(--te-common-border-checked);
-  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-canvas-corner-mark-left-color: var(--te-common-text-emphasize);
+  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--te-common-text-emphasize);
   --ti-lowcode-canvas-corner-mark-bottom-right-border-color: var(--te-common-border-hover);
   --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: var(--te-common-bg-container);
   --ti-lowcode-canvas-corner-mark-right-color: var(--te-common-text-dark-inverse);
diff --git a/packages/theme/light/events.less b/packages/theme/light/events.less
index 9191a7543b..34b0345adf 100644
--- a/packages/theme/light/events.less
+++ b/packages/theme/light/events.less
@@ -16,7 +16,9 @@
   --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
   --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-base-success-color);
   --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-events-empty-action-color: var(--ti-lowcode-base-text-color-1);
+  --ti-lowcode-events-empty-action-bg-color: var(--te-common-bg-container);
+  --ti-lowcode-events-empty-action-color: var(--te-common-text-weaken);
+  --ti-lowcode-events-custom-icon-color: var(--te-common-text-weaken);
   --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color);
 }
 
@@ -28,7 +30,7 @@
 }
 
 .bind-event-dialog-content {
-  --ti-lowcode-bind-event-dialog-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-bind-event-dialog-color: var(--te-common-text-secondary);
   --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-base-split-color-1);
   --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-base-split-color-1);
   --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-base-bg-1);

From 71bbaa404c1b12b228ae76c0924cf7b09f0bba2f Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Fri, 27 Sep 2024 18:07:50 +0800
Subject: [PATCH 2/5] feat(style): modify button margin

---
 .../src/variable-configurator/VariableConfigurator.vue |  5 +----
 packages/plugins/i18n/src/Main.vue                     |  9 ++-------
 .../settings/events/src/components/AdvanceConfig.vue   |  1 +
 packages/theme/base/src/component-common.less          | 10 +++++++++-
 packages/toolbars/generate-code/src/Main.vue           |  1 -
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/configurator/src/variable-configurator/VariableConfigurator.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
index d0411dee38..9019e6dab0 100644
--- a/packages/configurator/src/variable-configurator/VariableConfigurator.vue
+++ b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
@@ -107,7 +107,7 @@
 
     <template #footer>
       <div class="bind-dialog-footer">
-        <div class="left">
+        <div>
           <tiny-button type="danger" plain @click="remove">移除绑定</tiny-button>
         </div>
         <div class="right">
@@ -712,9 +712,6 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    .left {
-      margin-right: 8px;
-    }
   }
 }
 </style>
diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue
index 5976c85594..c11b66a516 100644
--- a/packages/plugins/i18n/src/Main.vue
+++ b/packages/plugins/i18n/src/Main.vue
@@ -18,9 +18,7 @@
         </tiny-input>
       </div>
       <div class="btn-box">
-        <tiny-button @click="openEditor($event, {})" class="left"
-          ><icon-plus class="btn-icon"></icon-plus>添加词条</tiny-button
-        >
+        <tiny-button @click="openEditor($event, {})"><icon-plus class="btn-icon"></icon-plus>添加词条</tiny-button>
         <tiny-button @click="batchDelete" :disabled="!selectedRowLength"
           ><svg-icon class="btn-icon" name="delete"></svg-icon>删除</tiny-button
         >
@@ -487,11 +485,8 @@ export default {
     margin-right: 6px;
     color: var(--ti-lowcode-i18n-icon-color);
   }
-  .left {
-    margin-right: 8px;
-  }
   :deep(.tiny-file-upload) {
-    margin: 0 8px;
+    margin-right: 8px;
   }
   :deep(.tiny-button--default) {
     height: 24px;
diff --git a/packages/settings/events/src/components/AdvanceConfig.vue b/packages/settings/events/src/components/AdvanceConfig.vue
index 15f082a8e5..7e7754f6bd 100644
--- a/packages/settings/events/src/components/AdvanceConfig.vue
+++ b/packages/settings/events/src/components/AdvanceConfig.vue
@@ -253,6 +253,7 @@ export default {
     .advanced-config-form-item {
       display: grid;
       grid-template-columns: 1fr auto;
+      flex: 1;
     }
     .binding-state {
       box-sizing: border-box;
diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
index e07ebe67a5..971dd63525 100644
--- a/packages/theme/base/src/component-common.less
+++ b/packages/theme/base/src/component-common.less
@@ -247,9 +247,16 @@
     padding: 0;
     display: flex;
     flex-direction: row-reverse;
-    button:not(:first-child) {
+    .tiny-button {
+      margin: 0;
+    }
+    .tiny-button--danger {
       margin-right: 8px;
     }
+    .tiny-button--primary,
+    .tiny-button--info {
+      margin-left: 8px;
+    }
   }
 }
 
@@ -265,6 +272,7 @@
     border: 1px solid var(--te-common-border-secondary);
     color: var(--te-common-text-primary);
     background-color: var(--te-common-bg-default);
+    margin-right: 8px;
     &:hover {
       border: 1px solid var(--te-common-border-hover);
     }
diff --git a/packages/toolbars/generate-code/src/Main.vue b/packages/toolbars/generate-code/src/Main.vue
index 48d63e5b74..3f27c2fd3c 100644
--- a/packages/toolbars/generate-code/src/Main.vue
+++ b/packages/toolbars/generate-code/src/Main.vue
@@ -261,7 +261,6 @@ export default {
 </script>
 <style lang="less" scoped>
 .toolbar-generate {
-  margin-right: 6px;
   .toolbar-generate-btn {
     display: flex;
     align-items: center;

From 7df381f2a4c553d9a159a1276a878f55ea9379c0 Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Fri, 27 Sep 2024 18:09:46 +0800
Subject: [PATCH 3/5] feat(style): modify button margin

---
 packages/common/component/MetaCodeEditor.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index bf2a9b70c8..d5bfef0f19 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -271,9 +271,6 @@ export default {
 .btn-box {
   display: flex;
   justify-content: flex-end;
-  .format-btn {
-    margin-right: 8px;
-  }
   &:has(.format-btn) {
     justify-content: space-between;
   }

From 6c04cd9c7a5b58cea3428369567f6bcd64fb85d2 Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Fri, 27 Sep 2024 18:11:01 +0800
Subject: [PATCH 4/5] feat(style): modify button margin

---
 .../src/variable-configurator/VariableConfigurator.vue        | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/configurator/src/variable-configurator/VariableConfigurator.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
index 9019e6dab0..fb821fa015 100644
--- a/packages/configurator/src/variable-configurator/VariableConfigurator.vue
+++ b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
@@ -107,9 +107,7 @@
 
     <template #footer>
       <div class="bind-dialog-footer">
-        <div>
-          <tiny-button type="danger" plain @click="remove">移除绑定</tiny-button>
-        </div>
+        <tiny-button type="danger" plain @click="remove">移除绑定</tiny-button>
         <div class="right">
           <tiny-button @click="cancel">取 消</tiny-button>
           <tiny-button type="info" @click="confirm">确 定</tiny-button>

From 6c2e75e534014ba1cac4027869f717827ac28d16 Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Fri, 27 Sep 2024 18:13:56 +0800
Subject: [PATCH 5/5] feat(style): modify button margin

---
 packages/plugins/i18n/src/Main.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue
index c11b66a516..445a2d5fcc 100644
--- a/packages/plugins/i18n/src/Main.vue
+++ b/packages/plugins/i18n/src/Main.vue
@@ -19,7 +19,7 @@
       </div>
       <div class="btn-box">
         <tiny-button @click="openEditor($event, {})"><icon-plus class="btn-icon"></icon-plus>添加词条</tiny-button>
-        <tiny-button @click="batchDelete" :disabled="!selectedRowLength"
+        <tiny-button class="middle-btn" @click="batchDelete" :disabled="!selectedRowLength"
           ><svg-icon class="btn-icon" name="delete"></svg-icon>删除</tiny-button
         >
         <tiny-file-upload
@@ -485,6 +485,9 @@ export default {
     margin-right: 6px;
     color: var(--ti-lowcode-i18n-icon-color);
   }
+  .middle-btn {
+    margin-left: 0;
+  }
   :deep(.tiny-file-upload) {
     margin-right: 8px;
   }