fix: Modify UI review comments (#941)

* fix:Modify Code Font in bridge/state * fix:modify the block list style in block * fix:Modify schema panel style * fix:Modify tabs in materials * fix:Modify global dialog, modal and search * fix:Modify the component list style in materials * fix:Modify search in i18n * fix: Modify UI in Schema Panel * fix:Modify dialog style and i18n Panel shadow * fix:Modify the component list style in materials * fix:Modify the block list style in block * fix: Modify UI review comments in i18n * fix: Modify modal style * fix: Modify modal in clean * fix: Modify modal in block * fix: Modify the block list and modal in block * fix: modify the block list in block * fix: modify font size * fix: Modify global button * fix: delete comment code * fix: change plugin-icon-js.svg * fix:Modify Code Font in bridge/state * fix:Modify button in header * fix: Modify button in state * fix:Modify Font Size in datasource * fix: Modify icon in lifecycle/blockEvent * fix: Modify validate in dialog * fix: modify second-panel and tree styles * fix: Modify tree componentType * fix: Modify the fixed column style of the table * fix: Modify top save and more * fix:Modify code style in state * fix:Modify the block list in block * fix: Modify remote panel * fix: Modify the icon to tips and gray background * fix:Modify global popover and toolTip * fix:Modify open-delay to a constant
opentiny · Jan 7, 2025 · 15597a1 · 15597a1
1 parent b38af9f
commit 15597a1
Show file tree

Hide file tree

Showing 39 changed files with 339 additions and 253 deletions.
diff --git a/packages/common/component/BlockDeployDialog.vue b/packages/common/component/BlockDeployDialog.vue
@@ -14,6 +14,7 @@
       label-align
       :model="formState"
       :rules="formRules"
+      validate-type="text"
     >
       <tiny-form-item label="版本号" prop="version">
         <tiny-input v-model="formState.version" placeholder="请输入X.Y.Z格式版本号，如1.0.0"></tiny-input>

diff --git a/packages/common/component/I18nInput.vue b/packages/common/component/I18nInput.vue
@@ -26,7 +26,7 @@
           </div>
 
           <template #reference>
-            <icon-language :class="['icon-language', { isBind }]"></icon-language>
+            <svg-icon name="internationalization" :class="['icon-language', { isBind }]"></svg-icon>
           </template>
         </tiny-popover>
       </template>
@@ -38,7 +38,7 @@
 import { computed, ref, watchEffect } from 'vue'
 import { useTranslate } from '@opentiny/tiny-engine-meta-register'
 import { Input, Popover } from '@opentiny/vue'
-import { IconClose, IconLanguage } from '@opentiny/vue-icon'
+import { IconClose } from '@opentiny/vue-icon'
 import BindI18n from './BindI18n.vue'
 
 export default {
@@ -47,8 +47,7 @@ export default {
     TinyInput: Input,
     BindI18n,
     TinyPopover: Popover,
-    IconClose: IconClose(),
-    IconLanguage: IconLanguage()
+    IconClose: IconClose()
   },
   inheritAttrs: false,
   props: {
@@ -139,6 +138,9 @@ export default {
     right: 0;
   }
 }
+.icon-language {
+  color: var(--te-common-icon-secondary);
+}
 </style>
 
 <style>

diff --git a/packages/common/component/LifeCycles.vue b/packages/common/component/LifeCycles.vue
@@ -21,13 +21,18 @@
   <div class="life-cycle-tips">{{ lifeCycleTips }}</div>
   <meta-list-items :optionsList="Object.keys(state.bindLifeCycles)" :draggable="false">
     <template #content="{ data }">
-      <div>
+      <div class="life-cycle-content-item">
         {{ data }}
       </div>
     </template>
     <template #operate="{ data }">
-      <svg-button name="setting-outline" tips="编辑" placement="top" @click="openLifeCyclesPanel(data)"></svg-button>
-      <svg-button name="delete" tips="删除" placement="top" @click="deleteLifeCycle(data)"></svg-button>
+      <svg-button
+        class="opt-button"
+        :hoverBgColor="false"
+        name="text-source-setting"
+        @click="openLifeCyclesPanel(data)"
+      ></svg-button>
+      <svg-button class="opt-button" :hoverBgColor="false" name="delete" @click="deleteLifeCycle(data)"></svg-button>
     </template>
   </meta-list-items>
   <tiny-dialog-box v-model:visible="state.showLifeCyclesDialog" fullscreen :title="state.title" :append-to-body="true">
@@ -268,12 +273,20 @@ export default {
   margin-left: 20px;
   margin-right: 20px;
 }
+.life-cycle-content-item {
+  color: var(--te-common-text-primary);
+}
+.opt-button {
+  width: auto;
+  &:last-child {
+    margin-right: var(--te-base-space-3x);
+  }
+}
 
 .popover-list {
-  margin: 8px 0;
   li {
     padding: 0 12px;
-    margin: 0 -8px;
+    margin: 0 -16px;
     line-height: 24px;
     cursor: pointer;
     &:hover {

diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue
@@ -8,14 +8,19 @@
         </div>
         <div :class="['buttons', { fullscreen: fullscreen }]" id="icon-buttons">
           <slot name="buttons"></slot>
-          <tiny-tooltip v-if="showFormatBtn && options.language === 'json'" content="格式化" placement="top">
+          <tiny-tooltip
+            v-if="showFormatBtn && options.language === 'json'"
+            content="格式化"
+            placement="top"
+            :open-delay="OPEN_DELAY.Default"
+          >
             <public-icon name="json" @click="formatCode"></public-icon>
           </tiny-tooltip>
           <span v-if="showFullScreenBtn">
-            <tiny-tooltip v-if="!fullscreen" content="全屏" placement="top">
+            <tiny-tooltip v-if="!fullscreen" content="全屏" placement="top" :open-delay="OPEN_DELAY.Default">
               <public-icon name="full-screen" @click="switchFullScreen(true)"></public-icon>
             </tiny-tooltip>
-            <tiny-tooltip v-else content="退出全屏" placement="top">
+            <tiny-tooltip v-else content="退出全屏" placement="top" :open-delay="OPEN_DELAY.Default">
               <public-icon name="cancel-full-screen" @click="switchFullScreen(false)"></public-icon>
             </tiny-tooltip>
           </span>
@@ -39,6 +44,8 @@ import { computed, ref, onActivated, onDeactivated } from 'vue'
 import { Tooltip } from '@opentiny/vue'
 import PublicIcon from './PublicIcon.vue'
 import VueMonaco from './VueMonaco.vue'
+import { constants } from '@opentiny/tiny-engine-utils'
+const { OPEN_DELAY } = constants
 
 export default {
   components: {
@@ -122,7 +129,8 @@ export default {
       fullscreen,
       switchFullScreen,
       getValue,
-      formatCode
+      formatCode,
+      OPEN_DELAY
     }
   }
 }

diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
@@ -741,7 +741,6 @@ export default {
     box-sizing: border-box;
     cursor: pointer;
     &:hover {
-      background-color: var(--ti-lowcode-component-block-setting-item-hover-bg);
       color: var(--ti-lowcode-common-primary-text-color);
     }
     .list-item-icon {
@@ -752,7 +751,7 @@ export default {
       color: var(--te-common-icon-secondary);
     }
     .list-item-svg:hover {
-      background-color: var(--ti-lowcode-component-block-setting-item-hover-bg);
+      background-color: transparent;
     }
   }
 }

diff --git a/packages/common/component/PluginSetting.vue b/packages/common/component/PluginSetting.vue
@@ -9,15 +9,14 @@
       </slot>
       <div class="button-group-wrap">
         <slot name="header">
-          <div v-if="showIfFullScreen" class="cursor" @click="fullScreen">
-            <icon-fullscreen v-if="!state.isFullScreen" class="icon-fullscreen"></icon-fullscreen>
-            <icon-minscreen v-if="state.isFullScreen" class="icon-minscreen"></icon-minscreen>
-            <span class="full-screen-label">{{ getFullScreenLabel(state.isFullScreen) }}</span>
-          </div>
           <tiny-button v-if="!isIconButton" type="info" @click="$emit('save')" class="plugin-save">保存</tiny-button>
           <tiny-button v-if="isIconButton" :icon="icon" type="info" @click="$emit('add')">
             {{ iconButtonText }}
           </tiny-button>
+          <div v-if="showIfFullScreen" class="cursor" @click="fullScreen">
+            <svg-icon v-if="!state.isFullScreen" name="full-screen"></svg-icon>
+            <svg-icon v-if="state.isFullScreen" name="cancel-full-screen"></svg-icon>
+          </div>
           <icon-close class="icon-close close" @click="$emit('cancel')"></icon-close>
         </slot>
       </div>
@@ -32,7 +31,7 @@
 <script>
 import { reactive, watchEffect } from 'vue'
 import { Button } from '@opentiny/vue'
-import { iconPlus, iconFullscreen, iconMinscreen, iconClose } from '@opentiny/vue-icon'
+import { iconPlus, iconClose } from '@opentiny/vue-icon'
 
 const EVENTS = {
   FULL_SCREEN_CHANGE: 'fullScreenChange',
@@ -45,8 +44,6 @@ const EVENTS = {
 export default {
   components: {
     TinyButton: Button,
-    IconFullscreen: iconFullscreen(),
-    IconMinscreen: iconMinscreen(),
     IconClose: iconClose()
   },
   props: {
@@ -114,8 +111,6 @@ export default {
       state,
       fullScreen,
       getFullScreenLabel,
-      IconFullscreen: iconFullscreen(),
-      IconMinscreen: iconMinscreen(),
       IconClose: iconClose()
     }
   }
@@ -125,7 +120,7 @@ export default {
 <style lang="less" scoped>
 .plugin-setting {
   position: absolute;
-  left: calc(var(--base-left-panel-width) - 6px);
+  left: var(--base-left-panel-width);
   top: 0;
   width: var(--base-collection-panel-width);
   height: 100%;
@@ -136,6 +131,7 @@ export default {
   &:not(.second-panel) {
     box-shadow: 6px 0px 3px 0px rgba(0, 0, 0, 0.05);
     border-right: none;
+    border-left: none;
   }
   &.full-screen {
     width: var(--base-collection-panel-full-screen-width);
@@ -154,11 +150,12 @@ export default {
   }
 
   .cursor {
+    margin-left: 12px;
     cursor: pointer;
   }
 
   .close {
-    margin-left: 16px;
+    margin-left: 12px;
     cursor: pointer;
   }
 

diff --git a/packages/common/component/SvgButton.vue b/packages/common/component/SvgButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="svg-button" @click="$emit('click', $event)">
+  <span class="svg-button" :class="{ 'svg-button-hover': hoverBgColor }" @click="$emit('click', $event)">
     <tiny-tooltip effect="dark" :content="tips" :placement="placement">
       <component :is="name" v-if="isTinyIcon" />
       <svg-icon v-else :name="name"></svg-icon>
@@ -27,6 +27,10 @@ export default {
     name: {
       type: String,
       default: 'add'
+    },
+    hoverBgColor: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['click'],
@@ -45,17 +49,13 @@ export default {
   width: 24px;
   height: 24px;
   font-size: 16px;
-  color: var(--ti-lowcode-component-svg-button-color);
+  color: var(--te-common-icon-secondary);
   border: 1px solid transparent;
   border-radius: 4px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  &:hover {
-    color: var(--ti-lowcode-component-svg-button-hover-color);
-    background-color: var(--ti-lowcode-component-svg-button-hover-bg-color);
-  }
   &.active {
     color: var(--ti-lowcode-component-svg-button-active-color);
     background-color: var(--ti-lowcode-component-svg-button-active-bg-color);
@@ -68,4 +68,11 @@ export default {
     outline: none;
   }
 }
+.svg-button-hover {
+  color: var(--te-common-icon-primary);
+  &:hover {
+    color: var(--te-common-icon-primary);
+    background-color: var(--te-common-bg-prompt);
+  }
+}
 </style>
diff --git a/packages/common/component/toolbar-built-in/ToolbarBaseButton.vue b/packages/common/component/toolbar-built-in/ToolbarBaseButton.vue
@@ -56,9 +56,8 @@ export default {
     right: 2px;
     z-index: 100;
   }
-}
-
-.save-title {
-  margin: 0 6px;
+  .svg-icon.svg-icon.svg-icon {
+    color: var(--te-common-icon-primary);
+  }
 }
 </style>
diff --git a/packages/layout/src/ToolbarCollapse.vue b/packages/layout/src/ToolbarCollapse.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-popover :visible-arrow="false" width="140" trigger="hover">
+  <tiny-popover :visible-arrow="false" width="140" trigger="click" :open-delay="OPEN_DELAY.Default">
     <template #reference>
       <span class="toolbar-ellipsis">
         <svg-icon name="ellipsis"></svg-icon>
@@ -25,6 +25,8 @@
 import { Popover } from '@opentiny/vue'
 import { IconPopup } from '@opentiny/vue-icon'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
+import { constants } from '@opentiny/tiny-engine-utils'
+const { OPEN_DELAY } = constants
 
 export default {
   components: {
@@ -39,7 +41,8 @@ export default {
   },
   setup() {
     return {
-      getMergeMeta
+      getMergeMeta,
+      OPEN_DELAY
     }
   }
 }
@@ -60,13 +63,14 @@ export default {
 }
 
 .collapse-content {
-  margin: 8px 4px;
   .empty-bar {
     font-size: 12px;
 
     .toolbar-list-button {
       height: 24px;
       line-height: 24px;
+      margin: 0 -16px;
+      padding: 0 16px;
 
       &:hover {
         background-color: var(--ti-lowcode-toolbar-ellipsis-hover-bg);
@@ -81,13 +85,12 @@ export default {
 
     .icon-hides {
       margin-right: 8px;
-      color: var(--te-common-icon-secondary);
+      color: var(--te-common-icon-primary);
     }
   }
 }
 
 .collapse-content .empty-bar:last-child {
-  margin-bottom: 4px;
   .empty-line {
     display: none;
   }