fix(style-panel): resolve style-panel styles issue (#924)

1. 调整了tabsGroupConfigurator组件的一些颜色问题；
2. 修改所有大写的PX为小写；
3. 工具栏中调整屏幕大小的组件的弹窗内容样式全部丢失，重写了这部分样式；
4. TinyGrid组件的表格列编辑弹窗样式丢失，重写了这部分；
5. 属性面板和样式面板部分Label色值不对，统一修改；
6. 样式面板原有引用的部分颜色变量失效，重新替换；

designer-demo/public/mock/bundle.json

@@ -9823,8 +9823,7 @@
                             },
                             "description": {
                               "zh_CN": "单元格编辑渲染配置项，也可以是函数 Function(h, params)"
-                            },
-                            "labelPosition": "left"
+                            }
                           },
                           {
                             "property": "filter",

packages/common/component/ConfigItem.vue

@@ -527,7 +527,7 @@ export default {
   }
 
   .item-label {
-    color: var(--ti-lowcode-meta-config-item-label-color);
+    color: var(--te-common-text-secondary);
     font-size: 12px;
     display: flex;
     line-height: 18px;

packages/common/component/MetaCodeEditor.vue

@@ -302,8 +302,9 @@ export default {
   width: 100%;
   height: 24px;
   padding: 4px;
+  padding-left: 10px;
   border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color);
-  border-radius: 6px;
+  border-radius: var(--te-base-border-radius-1);
 
   &:hover {
     border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color);

packages/common/component/MetaListItem.vue

@@ -16,7 +16,8 @@
                 :popper-class="['option-popper', { 'fixed-left': expand }]"
                 :visible-arrow="!expand"
                 title=""
-                width="267"
+                width="295"
+                height="auto"
                 trigger="manual"
                 @hide="hide(item)"
               >
@@ -295,14 +296,21 @@ export default {
     }
   }
 }
+
 .tiny-popover {
+  position: relative;
   .icon-close {
-    float: right;
+    position: absolute;
+    top: 6px;
+    right: 6px;
   }
 }
 .add-options {
   overflow-y: scroll;
-  height: 100%;
+  padding: 20px 0 20px 2px;
+  &.top {
+    margin-bottom: 0;
+  }
   &::-webkit-scrollbar-track-piece {
     background: var(--ti-lowcode-toolbar-bg);
   }

packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue

@@ -5,7 +5,7 @@
       <div v-for="(slot, index) in slotList" :key="slot.name" class="use-slot">
         <div class="use-slot-item-name">
           {{ slot.name }}
-          <tiny-tooltip effect="dark" :content="state.currentComponent?.content" placement="top">
+          <tiny-tooltip effect="dark" :content="state.currentComponent?.content" placement="bottom" width="260">
             <span class="item-icon">
               <component :is="state.currentComponent?.icon"></component>
             </span>
@@ -74,7 +74,7 @@ export default {
       TinyGrid: {
         content:
           '暴露给插槽使用的变量，为解构的参数，可以使用多个用逗号分隔，如：row(行数据)，column(列数据)，$table(内部表格实例)，seq(序号)，cell(单元格)，columnIndex(列索引),rowIndex(行索引)',
-        icon: SvgICons['IconUnknow']()
+        icon: SvgICons['IconHelpCircle']()
       }
     }
 
@@ -202,6 +202,7 @@ export default {
 
   .use-slot-item-content {
     display: flex;
+    justify-content: space-between;
   }
 
   .use-slot-switch-wrap {
@@ -227,6 +228,7 @@ export default {
 
   .slot-name-form-item {
     margin-bottom: 0;
+    margin-right: 6px;
   }
 
   .item-icon {
@@ -240,6 +242,7 @@ export default {
   position: relative;
   font-size: 14px;
   line-height: 20px;
+  width: 40px;
   height: 20px;
   vertical-align: middle;
   cursor: pointer;
@@ -262,7 +265,7 @@ export default {
 .e__switch-core::after {
   content: '';
   position: absolute;
-  top: 1px;
+  top: 2px;
   left: 1px;
   border-radius: 100%;
   transition: all 0.3s;

packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue

@@ -2,34 +2,19 @@
   <div class="tab-container">
     <div class="tabs-wrap">
       <tiny-button-group>
-        <tiny-button
-          v-for="(item, index) in uncollapsedOptions"
-          :key="item.label || item.icon"
-          :style="{ width: getItemWidth() + 'px' }"
-          :class="['tab-item', { selected: picked === (valueKey ? item.value[valueKey] : item.value) }]"
-          @click.stop="change(item)"
-        >
-          <span
-            :class="[
-              'label-text',
-              { 'border-right': collapsedOptions.length || index < uncollapsedOptions.length - 1 }
-            ]"
+        <div class="button-wrap" v-for="(item, index) in uncollapsedOptions" :key="item.label || item.icon">
+          <tiny-button
+            :style="{ width: getItemWidth() + 'px' }"
+            :class="['tab-item', { selected: picked === (valueKey ? item.value[valueKey] : item.value) }]"
+            @click.stop="change(item)"
           >
-            <span v-if="item?.label && !item?.content">{{ item.label }}</span>
-            <tiny-popover
-              v-if="item?.content"
-              :placement="placement"
-              :visible-arrow="false"
-              :content="item.content"
-              trigger="hover"
-            >
-              <template #reference>
-                <span v-if="item?.label">{{ item.label }}</span>
-                <svg-icon v-if="item?.icon" :name="item.icon" class="bem-Svg"></svg-icon>
-              </template>
-            </tiny-popover>
-          </span>
-        </tiny-button>
+            <span class="label-text" :title="item?.content">
+              <span v-if="item?.label">{{ item.label }}</span>
+              <svg-icon v-if="item?.icon" :name="item.icon" class="bem-Svg"></svg-icon>
+            </span>
+          </tiny-button>
+          <span :class="[{ 'border-right': collapsedOptions.length || index < uncollapsedOptions.length - 1 }]"></span>
+        </div>
         <tiny-dropdown
           v-if="collapsedOptions.length"
           trigger="click"
@@ -39,47 +24,29 @@
           ]"
           :style="{ width: getItemWidth(true) + 'px' }"
         >
-          <span class="selected-option" @click.stop="change(selectedCollapsedOption)">
-            <span v-if="selectedCollapsedOption?.label && !selectedCollapsedOption?.content">{{
-              selectedCollapsedOption.label
-            }}</span>
-            <tiny-popover
-              v-if="selectedCollapsedOption?.content"
-              :placement="placement"
-              :visible-arrow="false"
-              :content="selectedCollapsedOption.content"
-              trigger="hover"
-            >
-              <template #reference>
-                <span v-if="selectedCollapsedOption?.label">{{ selectedCollapsedOption.label }}</span>
-                <svg-icon
-                  v-if="selectedCollapsedOption?.icon"
-                  :name="selectedCollapsedOption.icon"
-                  class="bem-Svg"
-                ></svg-icon>
-              </template>
-            </tiny-popover>
+          <span
+            class="selected-option"
+            :title="selectedCollapsedOption?.content"
+            @click.stop="change(selectedCollapsedOption)"
+          >
+            <span v-if="selectedCollapsedOption?.label">{{ selectedCollapsedOption.label }}</span>
+            <svg-icon
+              v-if="selectedCollapsedOption?.icon"
+              :name="selectedCollapsedOption.icon"
+              class="bem-Svg"
+            ></svg-icon>
           </span>
           <template #dropdown>
-            <tiny-dropdown-menu>
+            <tiny-dropdown-menu popper-class="dropdown-menu-list">
               <tiny-dropdown-item
                 v-for="item in foldsOptions"
                 :key="item.label || item.icon"
                 @click.stop="change(item)"
               >
-                <span v-if="item?.label && !item?.content">{{ item.label }}</span>
-                <tiny-popover
-                  v-if="item?.content"
-                  :placement="placement"
-                  :visible-arrow="false"
-                  :content="item.content"
-                  trigger="hover"
-                >
-                  <template #reference>
-                    <span v-if="item?.label">{{ item.label }}</span>
-                    <svg-icon v-if="item?.icon" :name="item.icon" class="bem-Svg"></svg-icon>
-                  </template>
-                </tiny-popover>
+                <span :title="item?.content">
+                  <span v-if="item?.label">{{ item.label }}</span>
+                  <svg-icon v-if="item?.icon" :name="item.icon" class="bem-Svg"></svg-icon>
+                </span>
               </tiny-dropdown-item>
             </tiny-dropdown-menu>
           </template>
@@ -91,7 +58,6 @@
 <script setup>
 import { ref, computed, watch, defineProps, defineEmits } from 'vue'
 import {
-  Popover as TinyPopover,
   ButtonGroup as TinyButtonGroup,
   Button as TinyButton,
   Dropdown as TinyDropdown,
@@ -110,11 +76,6 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  // 提示内容位置
-  placement: {
-    type: String,
-    default: 'top'
-  },
   // tabItem宽度
   labelWidth: {
     type: Number,
@@ -195,14 +156,23 @@ const change = (item) => {
   .tabs-wrap {
     display: flex;
     justify-content: space-between;
+    background-color: var(--te-common-bg-container);
+    border-radius: 4px;
+    .tiny-button-group {
+      display: flex;
+      .button-wrap {
+        display: flex;
+        align-items: center;
+      }
+    }
+
     .tiny-button.tiny-button.tiny-button--default {
       margin: 0;
       padding: 0;
       border: none;
-      background-color: var(--te-common-bg-container);
       line-height: 14px;
       min-width: 20px;
-      max-width: 80px;
+      background-color: var(--te-common-bg-container);
       color: var(--te-common-text-weaken);
 
       &:hover {
@@ -223,58 +193,61 @@ const change = (item) => {
       text-align: center;
       cursor: pointer;
       position: relative;
-      background-color: var(--te-common-bg-container);
       .label-text {
         width: 100%;
         height: 12px;
-
         .bem-Svg {
           margin-top: -3px;
         }
       }
     }
-    .tiny-dropdown {
+    :deep(.drop-down-options) {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 24px;
-      background-color: var(--ti-lowcode-base-bg-5);
       color: var(--te-common-text-weaken);
+
+      &:hover {
+        background-color: var(--te-common-bg-prompt);
+        border-radius: 4px;
+        color: var(--te-common-text-primary);
+      }
       &.selected {
-        background-color: var(--ti-lowcode-base-gray-101);
+        background-color: var(--te-common-bg-prompt);
         color: var(--te-common-text-primary);
         border-radius: 4px;
       }
-      :deep(.tiny-dropdown__title) {
+      .tiny-dropdown__title {
         margin: 0;
         line-height: 12px;
         .selected-option {
           text-align: center;
         }
       }
-
-      :deep(.tiny-dropdown__suffix-inner) {
+      .tiny-dropdown__suffix-inner {
         width: 20px;
         display: flex;
         justify-content: center;
       }
-
-      &:hover {
-        background-color: var(--ti-lowcode-base-gray-101);
-        border-radius: 4px;
+      .tiny-dropdown__trigger:hover {
         color: var(--te-common-text-primary);
       }
     }
   }
 }
-.tiny-dropdown-menu {
+.dropdown-menu-list.tiny-popper.tiny-dropdown-menu {
+  margin-top: 4px;
+}
+
+.dropdown-menu-list {
   padding: 8px 0px;
-  margin: 0px 0px 0px 20px;
+  margin-left: 20px;
+  border-radius: 4px;
   background-color: var(--te-common-bg-default);
   color: var(--te-common-text-weaken);
   z-index: 9999;
   box-shadow: 0 0 10px 0 var(--te-common-border-default);
-  --ti-dropdown-menu-arrow-margin-top: 0;
 
   :deep(.focusing) {
     background-color: var(--te-common-bg-default);
@@ -284,14 +257,16 @@ const change = (item) => {
     padding: 4px 12px;
     background-color: var(--te-common-bg-default);
 
-    &:hover {
-      background-color: var(--ti-lowcode-base-gray-101);
-      border-radius: 4px;
+    &:hover,
+    &:active {
+      background-color: var(--te-common-bg-container);
       color: var(--te-common-text-primary);
     }
   }
 }
 .border-right {
+  display: inline-block;
+  height: 12px;
   border-right: 1px solid var(--te-common-border-default);
 }
 </style>

packages/engine-cli/template/designer/public/mock/bundle.json

@@ -9525,8 +9525,7 @@
                             },
                             "description": {
                               "zh_CN": "单元格编辑渲染配置项，也可以是函数 Function(h, params)"
-                            },
-                            "labelPosition": "left"
+                            }
                           },
                           {
                             "property": "filter",

packages/settings/styles/src/Main.vue

@@ -223,7 +223,6 @@ export default {
   .line-style {
     padding: 0 8px 0 12px;
     display: block;
-    color: var(--ti-lowcode-setting-style-font-color);
     font-size: 12px;
     .line-text {
       display: block;