fix：adjust some styles (#884)

opentiny · Nov 14, 2024 · ef582f8 · ef582f8
1 parent c4cf606
commit ef582f8
Show file tree

Hide file tree

Showing 18 changed files with 220 additions and 135 deletions.
diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue
@@ -6,7 +6,7 @@
         <div class="toolbar-start">
           <slot name="toolbarStart"></slot>
         </div>
-        <div :class="['buttons', { fullscreen: fullscreen }]">
+        <div :class="['buttons', { fullscreen: fullscreen }]" id="icon-buttons">
           <slot name="buttons"></slot>
           <tiny-tooltip v-if="showFormatBtn && options.language === 'json'" content="格式化" placement="top">
             <public-icon name="json" @click="formatCode"></public-icon>
@@ -158,8 +158,10 @@ export default {
     gap: 8px;
     color: var(--ti-lowcode-component-svg-button-color);
     cursor: pointer;
-    :hover {
-      color: var(--ti-lowcode-component-svg-button-hover-color);
+  }
+  #icon-buttons {
+    :deep(.svg-icon) {
+      color: var(--te-common-icon-secondary);
     }
   }
   .fullscreen {

diff --git a/packages/common/component/ToolbarBase.vue b/packages/common/component/ToolbarBase.vue
@@ -71,6 +71,10 @@ export default {
   margin: 0 4px;
   font-size: 14px;
 }
+.toolbar-item-wrap {
+  display: flex;
+  align-items: center;
+}
 .toolbar-item-wrap div {
   display: inline-block;
 }

diff --git a/packages/design-core/assets/cn-en.svg b/packages/design-core/assets/cn-en.svg
diff --git a/packages/design-core/assets/full-screen.svg b/packages/design-core/assets/full-screen.svg
diff --git a/packages/design-core/assets/refresh.svg b/packages/design-core/assets/refresh.svg
diff --git a/packages/design-core/assets/team-collaboration.svg b/packages/design-core/assets/team-collaboration.svg
diff --git a/packages/design-core/assets/全屏.svg b/packages/design-core/assets/全屏.svg
diff --git a/packages/layout/src/ToolbarCollapse.vue b/packages/layout/src/ToolbarCollapse.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-popover width="140" trigger="hover">
+  <tiny-popover :visible-arrow="false" width="140" trigger="hover">
     <template #reference>
       <span class="toolbar-ellipsis">
         <svg-icon name="ellipsis"></svg-icon>
@@ -59,28 +59,33 @@ export default {
   }
 }
 
-.empty-bar {
-  font-size: 12px;
+.collapse-content {
+  margin: 8px 4px;
+  .empty-bar {
+    font-size: 12px;
 
-  .toolbar-list-button {
-    padding-top: 4px;
-    box-sizing: border-box;
+    .toolbar-list-button {
+      height: 24px;
+      line-height: 24px;
 
-    &:hover {
-      background-color: var(--ti-lowcode-toolbar-ellipsis-hover-bg);
-      cursor: pointer;
+      &:hover {
+        background-color: var(--ti-lowcode-toolbar-ellipsis-hover-bg);
+        cursor: pointer;
+      }
     }
-  }
 
-  .empty-line {
-    margin: 4px 0px;
-    border-top: 1px solid var(--ti-lowcode-canvas-wrap-bg);
-  }
+    .empty-line {
+      margin: 4px 0px;
+      border-top: 1px solid var(--ti-lowcode-canvas-wrap-bg);
+    }
 
-  .icon-hides {
-    margin-right: 8px;
+    .icon-hides {
+      margin-right: 8px;
+      color: var(--te-common-icon-secondary);
+    }
   }
 }
+
 .collapse-content .empty-bar:last-child {
   margin-bottom: 4px;
   .empty-line {

diff --git a/packages/plugins/help/src/HelpIcon.vue b/packages/plugins/help/src/HelpIcon.vue
@@ -1,40 +1,55 @@
 <template>
   <div id="help-plugin">
-    <div title="帮助">
-      <svg-icon name="plugin-icon-plugin-help" @click.stop="openHelpBox"></svg-icon>
-    </div>
-    <div v-if="state.helpBox" class="help-plugin-box">
-      <div class="help-plugin-box-top">
-        <svg-icon name="close" class="help-plugin-close" @click.stop="closeHelpBox"></svg-icon>
-      </div>
-      <div class="help-plugin-box-title">
-        {{ helpTitle }}
-      </div>
-      <div class="help-plugin-box-body">
-        <a :href="courseUrl" target="_blank" class="help-plugin-box-item">
-          <span><svg-icon class="svg-icon" name="user-guide"></svg-icon>使用手册</span
-          ><icon-fillet-external-link class="icon-fillet-external-link" />
-        </a>
-        <tiny-tooltip v-model="state.showTooltip" :manual="true" effect="light" placement="right-end">
-          <template #content>
-            <div>
-              <span>{{ toolTipContent }}</span>
-              <svg-icon name="close" class="help-plugin-tooltip-close" @click="closeToolTip"></svg-icon>
+    <tiny-popover
+      :offset="50"
+      placement="right"
+      width="208"
+      trigger="click"
+      :visible-arrow="false"
+      id="help-icon-popover"
+    >
+      <template #reference>
+        <div title="帮助">
+          <svg-icon name="plugin-icon-plugin-help"></svg-icon>
+        </div>
+      </template>
+      <div class="help-plugin-box">
+        <div class="help-plugin-box-title">
+          {{ helpTitle }}
+        </div>
+        <div class="help-plugin-box-body">
+          <a :href="courseUrl" target="_blank" class="help-plugin-box-item">
+            <span><svg-icon class="svg-icon" name="user-guide"></svg-icon>使用手册</span
+            ><icon-fillet-external-link class="icon-fillet-external-link" />
+          </a>
+          <tiny-tooltip v-model="state.showTooltip" :manual="true" effect="light" placement="right-end">
+            <template #content>
+              <div>
+                <span>{{ toolTipContent }}</span>
+                <svg-icon name="close" class="help-plugin-tooltip-close" @click="closeToolTip"></svg-icon>
+              </div>
+            </template>
+            <div class="help-plugin-box-item" @click="toShowStep">
+              <span><svg-icon class="svg-icon" name="beginner-guide"></svg-icon>新手引导</span>
             </div>
-          </template>
-          <div class="help-plugin-box-item" @click="toShowStep">
-            <span><svg-icon class="svg-icon" name="beginner-guide"></svg-icon>新手引导</span>
-          </div>
-        </tiny-tooltip>
-      </div>
-      <div class="help-plugin-box-ques">
-        <div class="help-plugin-box-title help-plugin-box-ques-title">{{ questionTitle }}</div>
-        <a v-for="(item, idx) in questionList" :key="idx" :href="item.url" target="_blank" class="help-plugin-box-item">
-          <span> {{ idx + 1 }}.{{ item.label }} </span>
-          <icon-fillet-external-link class="icon-fillet-external-link" />
-        </a>
+          </tiny-tooltip>
+        </div>
+        <div class="help-plugin-box-ques">
+          <div class="help-plugin-box-title help-plugin-box-ques-title">{{ questionTitle }}</div>
+          <a
+            v-for="(item, idx) in questionList"
+            :key="idx"
+            :href="item.url"
+            target="_blank"
+            class="help-plugin-box-item"
+          >
+            <span> {{ idx + 1 }}.{{ item.label }} </span>
+            <icon-fillet-external-link class="icon-fillet-external-link" />
+          </a>
+        </div>
       </div>
-    </div>
+    </tiny-popover>
+
     <tiny-guide
       ref="tinyGuideRef"
       :show-step="state.showStep"
@@ -46,7 +61,7 @@
 
 <script>
 import { reactive, onMounted, ref } from 'vue'
-import { Guide, Tooltip } from '@opentiny/vue'
+import { Guide, Tooltip, Popover } from '@opentiny/vue'
 import { IconFilletExternalLink } from '@opentiny/vue-icon'
 import { useLayout, META_APP } from '@opentiny/tiny-engine-meta-register'
 
@@ -57,6 +72,7 @@ export default {
   components: {
     TinyTooltip: Tooltip,
     TinyGuide: Guide,
+    TinyPopover: Popover,
     IconFilletExternalLink: IconFilletExternalLink()
   },
   setup() {
@@ -87,7 +103,6 @@ export default {
       showStep: false,
       guideWidth: '360',
       showTooltip: false,
-      showHelpDialog: false,
       helpBox: false
     })
 
@@ -249,13 +264,6 @@ export default {
   margin-left: 20px;
   cursor: pointer;
 }
-.help-plugin-close {
-  cursor: pointer;
-  position: absolute;
-  right: 16px;
-  top: 14px;
-  font-size: 12px;
-}
 </style>
 
 <!-- tiny-guide在body元素上，所以不使用scoped -->
@@ -327,13 +335,8 @@ div.tiny-guide.shepherd-element {
 
 .help-plugin-box {
   cursor: auto;
-  position: absolute;
-  left: var(--base-nav-panel-width);
-  bottom: 68px;
-  width: 208px;
   background-color: var(--ti-lowcode-help-box-bg-color);
   border-radius: 6px;
-  box-shadow: var(--ti-lowcode-help-box-shadow);
   padding: 16px 0;
   &-top {
     text-align: right;
@@ -343,13 +346,13 @@ div.tiny-guide.shepherd-element {
     font-size: 12px;
     font-weight: 600;
     line-height: 18px;
-    margin: 0 16px 8px 16px;
+    margin: 0 8px 8px 8px;
   }
   &-body {
     padding-bottom: 8px;
   }
   &-item {
-    padding: 0 16px;
+    padding: 0 8px;
     display: flex;
     justify-content: space-between;
     align-items: center;

diff --git a/packages/plugins/state/src/CreateStore.vue b/packages/plugins/state/src/CreateStore.vue
@@ -254,6 +254,9 @@ export default {
   overflow-y: auto;
   :deep(.tiny-collapse-item__wrap) {
     padding: 0 12px;
+    .tiny-collapse-item__content {
+      padding: 0;
+    }
   }
   :deep(.toolbar) {
     position: absolute;