fix：adjust some styles

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="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);
+  }
+  #buttons {
+    :deep(.svg-icon) {
+      color: var(--te-common-icon-secondary);
     }
   }
   .fullscreen {

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>

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;

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;

packages/plugins/state/src/CreateVariable.vue

@@ -419,14 +419,11 @@ export default {
     right: 4px;
   }
   .var {
-    padding: 12px;
+    padding: 12px 12px 0 12px;
   }
   .var-type-item {
     padding: 0 12px;
   }
-  .tiny-form-item:first-child {
-    padding-bottom: 12px;
-  }
   .tiny-form-item:not(:last-child) {
     margin-bottom: 12px;
   }
@@ -441,6 +438,12 @@ export default {
   }
   :deep(.tiny-collapse-item__wrap) {
     padding: 0 12px;
+    .tiny-collapse-item__content {
+      padding: 0;
+      .tiny-form-item:first-child {
+        padding-bottom: 12px;
+      }
+    }
   }
 }
 

packages/plugins/state/src/StateFullscreenHead.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="fullscreen-head-content">
-    <span>{{ title }}</span>
+    <span class="title">{{ title }}</span>
     <close-icon @close="close"></close-icon>
   </div>
 </template>
@@ -37,5 +37,10 @@ export default {
   width: 100%;
   display: flex;
   justify-content: space-between;
+  .title {
+    font-size: var(--te-base-font-size-base);
+    color: var(--te-common-text-primary);
+    font-weight: var(--te-base-font-weight-7);
+  }
 }
 </style>

packages/toolbars/save/src/Main.vue

@@ -200,9 +200,37 @@ export default {
 }
 
 .save-style {
-  padding: 14px;
+  padding: 20px 12px;
   font-size: 12px;
 
+  .save-setting {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    height: 20px;
+    margin-bottom: 16px;
+  }
+
+  .save-time {
+    line-height: 24px;
+    font-size: 12px;
+    margin: 12px 0 16px 0;
+    display: flex;
+    .save-time-label {
+      width: 60px;
+    }
+
+    .tiny-select {
+      width: 103px;
+      margin-left: 12px;
+
+      :deep(.tiny-input__suffix) {
+        width: 12px;
+        top: 12px;
+      }
+    }
+  }
+
   .save-button-group {
     text-align: right;
 
@@ -216,26 +244,6 @@ export default {
   }
 }
 
-.save-time {
-  line-height: 24px;
-  font-size: 12px;
-  margin: 13px 0 14px 0;
-  display: flex;
-  .save-time-label {
-    width: 60px;
-  }
-
-  .tiny-select {
-    width: 103px;
-    margin-left: 12px;
-
-    :deep(.tiny-input__suffix) {
-      width: 12px;
-      top: 12px;
-    }
-  }
-}
-
 #saving {
   cursor: not-allowed;
   color: var(--ti-lowcode-disabled-color);