feat(style-panel): Resolved the remainning styles issues

betterdancing · Nov 6, 2024 · f66542f · f66542f
1 parent bfd1449
commit f66542f
Show file tree

Hide file tree

Showing 9 changed files with 161 additions and 106 deletions.
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
@@ -298,7 +298,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: 32px;
+  height: 24px;
   padding: 4px;
   border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color);
   border-radius: 6px;

diff --git a/packages/configurator/src/color-configurator/ColorConfigurator.vue b/packages/configurator/src/color-configurator/ColorConfigurator.vue
@@ -23,7 +23,7 @@ export default {
     },
     modelValue: {
       type: String,
-      default: ''
+      default: '#FFFFFF'
     }
   },
   emits: ['change', 'update:modelValue'],
@@ -57,7 +57,7 @@ export default {
   width: 100%;
 
   .input-color {
-    width: 22px;
+    width: 20px;
     height: 24px;
     border: none;
     background: transparent;
@@ -68,6 +68,10 @@ export default {
   :deep(.tiny-input-prefix) {
     .tiny-input__prefix {
       left: 2px;
+
+      input[type='color' i] {
+        border-color: red;
+      }
     }
     .tiny-input__inner {
       padding-left: 24px;

diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -133,20 +133,21 @@ export default {
     padding: 0;
     cursor: pointer;
     border: 0;
-    background-color: transparent;
+    background-color: var(--te-common-border-bg-divider);
     position: relative;
     outline: 0;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
   }
+
   input[type='range']::-webkit-slider-thumb {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     border: 0;
     background-color: var(--te-common-bg-default);
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.4);
     -webkit-transition: border-color 0.15s, background-color 0.15s;
     transition: border-color 0.15s, background-color 0.15s;
     cursor: pointer;

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -223,6 +223,7 @@ const change = (item) => {
       text-align: center;
       cursor: pointer;
       position: relative;
+      background-color: var(--te-common-bg-container);
       .label-text {
         width: 100%;
         height: 12px;
@@ -270,6 +271,7 @@ const change = (item) => {
   margin: 0px 0px 0px 20px;
   background-color: rgb(255, 255, 255);
   z-index: 9999;
+  box-shadow: 0 0 10px 0 rgba(25, 25, 25, 0.15);
   --ti-dropdown-menu-arrow-margin-top: 0;
 
   :deep(.tiny-dropdown-item__wrap) {

diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue
@@ -4,7 +4,7 @@
       :class="['radius-label', { 'is-setting': isRadiusSetting() }]"
       @click="openSetting(BORDER_RADIUS_PROPERTY.BorderRadius, $event)"
     >
-      圆角
+      <span>圆角</span>
     </div>
     <div class="radius-content">
       <div class="radius-btn-group">
@@ -85,12 +85,13 @@
   </div>
 
   <div class="item-row">
-    <span
+    <label
       class="border-label"
       :class="{ 'is-setting': isBorderSetting(), 'set-border-style': true }"
       @click="openSetting(BORDER_PROPERTY.Border, $event)"
-      >边框</span
     >
+      <span class="border-title">边框</span>
+    </label>
   </div>
   <div class="border-container">
     <div class="position-selector">
@@ -138,27 +139,32 @@
     </div>
     <div class="inputs">
       <div class="input-row">
-        <span
+        <label
           class="border-label"
           :class="{ 'is-setting': isBorderStyleSetting() }"
           @click="openSetting(BORDER_PROPERTY.BorderStyle, $event)"
-          >样式</span
         >
+          <span>样式</span>
+        </label>
         <div class="styles-container">
-          <button-group
+          <tabs-group-configurator
             :options="styleOptions"
             :modelValue="styleValue"
+            label-width="30"
+            :effect="effect"
+            :placement="placement"
             @update:modelValue="(value) => selectBorderStyle(value)"
-          ></button-group>
+          ></tabs-group-configurator>
         </div>
       </div>
       <div class="input-row">
-        <span
+        <label
           class="border-label"
           :class="{ 'is-setting': isBorderWidthSetting() }"
           @click="openSetting(BORDER_PROPERTY.BorderWidth, $event)"
-          >宽度</span
         >
+          <span>宽度</span>
+        </label>
         <numeric-select
           :name="borderWidthValue.name"
           :numericalText="borderWidthValue.text"
@@ -167,12 +173,13 @@
         />
       </div>
       <div class="input-row">
-        <span
+        <label
           class="border-label"
           :class="{ 'is-setting': isBorderColorSetting() }"
           @click="openSetting(BORDER_PROPERTY.BorderColor, $event)"
-          >颜色</span
         >
+          <span>颜色</span>
+        </label>
         <color-configurator :modelValue="borderColorValue" @change="changeBorderColor"></color-configurator>
       </div>
     </div>
@@ -190,7 +197,7 @@ import ModalMask, { useModal } from '../inputs/ModalMask.vue'
 import NumericSelect from '../inputs/NumericSelect.vue'
 import ResetButton from '../inputs/ResetButton.vue'
 import ButtonGroup from '../buttons/ButtonGroup.vue'
-import { ColorConfigurator, SliderConfigurator } from '@opentiny/tiny-engine-configurator'
+import { ColorConfigurator, SliderConfigurator, TabsGroupConfigurator } from '@opentiny/tiny-engine-configurator'
 import useEvent from '../../js/useEvent'
 import { useProperties } from '../../js/useStyle'
 import { RADIUS_SETTING, BORDER_SETTING, BORDER_STYLE_TYPE } from '../../js/cssType'
@@ -223,6 +230,7 @@ const BORDER_COLOR = {
 export default {
   components: {
     SliderConfigurator,
+    TabsGroupConfigurator,
     ModalMask,
     ResetButton,
     ColorConfigurator,
@@ -399,10 +407,10 @@ export default {
     }
 
     const styleOptions = [
-      { icon: 'cross', value: BORDER_STYLE_TYPE.None, tip: 'none-无' },
-      { icon: 'border-style-solid', value: BORDER_STYLE_TYPE.Solid, tip: 'solid-实线' },
-      { icon: 'border-style-dashed', value: BORDER_STYLE_TYPE.Dashed, tip: 'dashed-虚线' },
-      { icon: 'border-style-dotted', value: BORDER_STYLE_TYPE.Dotted, tip: 'dotted-圆点' }
+      { icon: 'cross', value: BORDER_STYLE_TYPE.None, content: 'none-无' },
+      { icon: 'border-style-solid', value: BORDER_STYLE_TYPE.Solid, content: 'solid-实线' },
+      { icon: 'border-style-dashed', value: BORDER_STYLE_TYPE.Dashed, content: 'dashed-虚线' },
+      { icon: 'border-style-dotted', value: BORDER_STYLE_TYPE.Dotted, content: 'dotted-圆点' }
     ]
 
     const styleValue = computed(() => {
@@ -569,11 +577,6 @@ export default {
     padding: 0 2px;
     line-height: 24px;
     color: var(--ti-lowcode-component-setting-panel-label-color);
-
-    &.is-setting {
-      color: var(--ti-lowcode-style-setting-label-color);
-      background: var(--ti-lowcode-style-setting-label-bg);
-    }
   }
 
   .radius-content {
@@ -626,6 +629,13 @@ export default {
   }
 }
 
+.border-label,
+.radius-label {
+  span {
+    padding: 2px;
+  }
+}
+
 .radius-multiple-container {
   flex: 1;
   display: grid;
@@ -645,6 +655,10 @@ export default {
 .border-label {
   color: var(--te-common-text-secondary);
   flex-shrink: 0;
+
+  .border-title {
+    margin-left: 2px;
+  }
 }
 .border-container {
   display: flex;
@@ -707,8 +721,11 @@ export default {
 }
 
 .is-setting {
-  color: var(--ti-lowcode-style-setting-label-color);
-  background: var(--ti-lowcode-style-setting-label-bg);
-  padding: 2px;
+  span {
+    border-radius: 2px;
+    color: var(--ti-lowcode-style-setting-label-color);
+    background: var(--ti-lowcode-style-setting-label-bg);
+    cursor: pointer;
+  }
 }
 </style>
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -490,6 +490,7 @@ const handleDeleteCurSelector = () => {
 .selector-container {
   display: flex;
   margin-top: 10px;
+  height: 24px;
   color: var(--ti-lowcode-className-selector-container-color);
 
   .selector-right-container {
@@ -502,17 +503,18 @@ const handleDeleteCurSelector = () => {
   }
   .selector-right-container-wrap {
     display: flex;
+    height: 24px;
   }
   .className-selector-wrap {
     max-width: 180px;
     min-width: 0;
   }
   :deep(.editor-wrap) {
-    width: 30px;
+    width: 24px;
   }
   .edit-global-css {
     display: flex;
-    padding: 7px;
+    padding: 3px;
     border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
     border-radius: 6px;
     cursor: pointer;
@@ -522,7 +524,6 @@ const handleDeleteCurSelector = () => {
     display: flex;
     row-gap: 2px;
     align-items: center;
-    flex-wrap: wrap;
     max-width: 180px;
     min-width: 0;
     padding: 1px 10px;
@@ -555,9 +556,9 @@ const handleDeleteCurSelector = () => {
         align-items: center;
         background-color: var(--ti-lowcode-className-selector-container-label-bg-color);
         color: var(--ti-lowcode-className-selector-container-label-color);
-        padding: 1px 4px;
+        padding: 0 4px;
         border-radius: 4px;
-        line-height: 26px;
+        line-height: 18px;
         .selector-label-text {
           outline: none;
           overflow: hidden;
@@ -591,7 +592,7 @@ const handleDeleteCurSelector = () => {
       color: var(--ti-lowcode-className-selector-container-color);
       min-width: 0;
       flex: 0 0 0;
-      line-height: 28px;
+      line-height: 24px;
       z-index: 1;
       border: none;
       outline: none;
@@ -635,7 +636,7 @@ const handleDeleteCurSelector = () => {
     .selector-dropdown-list-tips {
       font-size: 12px;
       padding: 0 10px;
-      line-height: 32px;
+      line-height: 24px;
       color: var(--ti-lowcode-className-selector-dropdown-list-tips-color);
     }
 
@@ -648,7 +649,7 @@ const handleDeleteCurSelector = () => {
 
     .exist-class-item {
       cursor: pointer;
-      height: 32px;
+      height: 24px;
       padding: 0 16px;
       display: flex;
       align-items: center;
@@ -677,6 +678,11 @@ const handleDeleteCurSelector = () => {
       padding-right: 30px;
       border: none;
       font-size: 12px;
+      height: 22px;
+      border-radius: 6px;
+    }
+    :deep(.tiny-input__suffix) {
+      top: 10px;
     }
   }
 }