feat(style): modify advance panel ui (#826)

* feat(style): modify advance panel ui * feat(style): modify button margin * feat(style): modify button margin * feat(style): modify button margin * feat(style): modify button margin
opentiny · Sep 30, 2024 · ff3695a · ff3695a
1 parent fbb42d2
commit ff3695a
Show file tree

Hide file tree

Showing 18 changed files with 127 additions and 107 deletions.
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
@@ -271,7 +271,6 @@ export default {
 .btn-box {
   display: flex;
   justify-content: flex-end;
-
   &: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
@@ -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
@@ -107,9 +107,7 @@
 
     <template #footer>
       <div class="bind-dialog-footer">
-        <div class="left">
-          <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>

diff --git a/packages/design-core/assets/add.svg b/packages/design-core/assets/add.svg
diff --git 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,8 +485,11 @@ export default {
     margin-right: 6px;
     color: var(--ti-lowcode-i18n-icon-color);
   }
+  .middle-btn {
+    margin-left: 0;
+  }
   :deep(.tiny-file-upload) {
-    margin: 0 8px;
+    margin-right: 8px;
   }
   :deep(.tiny-button--default) {
     height: 24px;

diff --git 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
@@ -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
@@ -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;
@@ -251,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/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
@@ -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;