Fix/styles review: resolve style-panel/media/grid-column-panel styles reviews

designer-demo/public/mock/bundle.json

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

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="706"
                 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

@@ -202,7 +202,6 @@ const change = (item) => {
       background-color: var(--te-common-bg-container);
       line-height: 14px;
       min-width: 20px;
-      max-width: 80px;
       color: var(--te-common-text-weaken);
 
       &:hover {
@@ -238,8 +237,18 @@ const change = (item) => {
       justify-content: center;
       align-items: center;
       height: 24px;
-      background-color: var(--ti-lowcode-base-bg-5);
+      background-color: var(--te-common-bg-container);
       color: var(--te-common-text-weaken);
+
+      &:hover {
+        background-color: var(--ti-lowcode-base-gray-101);
+        border-radius: 4px;
+      }
+      .selected-option {
+        span:hover {
+          color: var(--te-common-text-primary);
+        }
+      }
       &.selected {
         background-color: var(--ti-lowcode-base-gray-101);
         color: var(--te-common-text-primary);
@@ -258,12 +267,6 @@ const change = (item) => {
         display: flex;
         justify-content: center;
       }
-
-      &:hover {
-        background-color: var(--ti-lowcode-base-gray-101);
-        border-radius: 4px;
-        color: var(--te-common-text-primary);
-      }
     }
   }
 }

packages/settings/styles/src/components/background/BackgroundGroup.vue

@@ -567,6 +567,7 @@ export default {
 
   span {
     font-weight: 600;
+    color: var(--te-common-text-primary);
   }
 
   .svg-icon {

packages/settings/styles/src/components/background/ImageSetting.vue

@@ -327,7 +327,7 @@ onMounted(() => {
   justify-content: center;
   height: 24px;
   border-radius: 4px;
-  color: var(--te-common-bg-prompt);
+  color: var(--te-common-text-primary);
   border-width: 1px;
   border-style: solid;
   align-self: center;

packages/settings/styles/src/components/inputs/NumericSelect.vue

@@ -46,7 +46,7 @@ export default {
     },
     suffix: {
       type: String,
-      default: 'PX'
+      default: 'px'
     }
   },
   emits: useEvent(),

packages/toolbars/media/src/Main.vue

@@ -11,17 +11,20 @@
           >
             <tiny-popover
               trigger="hover"
-              width="225"
+              width="260"
               append-to-body
               :open-delay="1000"
               popper-class="media-icon-popover"
             >
               <div class="media-content">
                 <div class="media-title">
-                  <div>{{ item.title }}</div>
-                  <div v-if="item.subTitle" class="sub-title">
-                    （<svg-icon v-if="item.view === 'desktop'" name="stars"></svg-icon> <span>{{ item.subTitle }}</span
-                    >）
+                  <div>
+                    {{ item.title }}
+                    <span v-if="item.subTitle" class="sub-title">
+                      （<svg-icon v-if="item.view === 'desktop'" name="stars"></svg-icon>
+                      <span>{{ item.subTitle }}</span
+                      >）
+                    </span>
                   </div>
                 </div>
                 <div class="content">{{ item.content }}</div>
@@ -32,20 +35,15 @@
             </tiny-popover>
           </span>
         </div>
-        <tiny-popover v-if="isCanvas" width="290" trigger="click" popper-class="toolbar-media-popper">
+        <tiny-popover v-if="isCanvas" width="200" trigger="click" popper-class="toolbar-media-popper">
           <template #reference>
-            <tiny-popover
-              trigger="hover"
-              :open-delay="1000"
-              popper-class="toolbar-right-popover"
-              append-to-body
-              content="画布设置"
-            >
+            <tiny-popover trigger="hover" :open-delay="1000" popper-class="toolbar-right-popover" append-to-body>
+              <div class="setting-content">{{ '画布设置' }}</div>
               <template #reference>
                 <span class="reference-text">
                   <span>
                     <span>{{ parseInt(state.width) }}</span>
-                    <span class="symbol">PX</span>
+                    <span class="symbol">px</span>
                   </span>
                   <span>
                     <span>{{ scale.toFixed(2) }}</span>
@@ -56,13 +54,13 @@
             </tiny-popover>
           </template>
           <div class="content-wrap text-content">
-            <span class="title text-title">{{ state.textData.title }}</span>
+            <div class="title text-title">{{ state.textData.title }}</div>
             <div class="setting">
               <div>
                 <label for="">{{ state.textData.width }}</label>
                 <tiny-input v-model="state.width" @change="widthChange">
                   <template #suffix>
-                    <span>PX</span>
+                    <span>px</span>
                   </template>
                 </tiny-input>
               </div>
@@ -74,18 +72,11 @@
                   </template>
                 </tiny-input>
               </div>
+              <div>
+                <label for="">{{ '自由布局' }}</label>
+                <tiny-switch v-model="isAbsolute" @change="changeCanvasType"></tiny-switch>
+              </div>
             </div>
-
-            <ul class="more-setting">
-              <li>
-                <div>
-                  <span>{{ '自由布局' }}</span>
-                </div>
-                <div>
-                  <tiny-switch v-model="isAbsolute" @change="changeCanvasType"></tiny-switch>
-                </div>
-              </li>
-            </ul>
           </div>
         </tiny-popover>
       </div>
@@ -456,7 +447,6 @@ export default {
     flex-wrap: nowrap;
     align-items: center;
     gap: 6px;
-
     .icon {
       width: 24px;
       height: 24px;
@@ -485,7 +475,6 @@ export default {
       }
     }
   }
-
   .more-setting {
     .setting-item {
       display: flex;
@@ -494,4 +483,40 @@ export default {
     }
   }
 }
+.media-content {
+  padding: 12px 8px;
+  line-height: 18px;
+  .media-title {
+    font-weight: 600;
+  }
+}
+.setting-content {
+  padding: 12px 8px;
+}
+
+.content-wrap {
+  padding: 20px 12px;
+  .title {
+    font-weight: 600;
+    margin-bottom: 16px;
+  }
+
+  .setting {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      label {
+        color: var(--te-common-text-secondary);
+        min-width: 64px;
+      }
+      &:last-child {
+        justify-content: flex-start;
+      }
+    }
+  }
+}
 </style>