fix(theme-generator): slider position not correct

Author: RylanBot

packages/theme-generator/src/common/components/SegmentSelection/index.vue

@@ -18,7 +18,7 @@
           :min="1"
           :disabled="disabled"
           :max="selectOptions.length - 1"
-          :value="step"
+          :value="sliderValue"
           @change="handleSliderChange"
           :label="renderLabel"
           :tooltipProps="{ attach: handleAttach }"
@@ -76,6 +76,13 @@ export default {
       innerSelectOptions: this.selectOptions,
     };
   },
+  computed: {
+    sliderValue() {
+      const maxValue = this.selectOptions.length - 1;
+      // 如果 step 超过 max（自定义选项），依旧显示 max 值
+      return this.step > maxValue ? maxValue : this.step;
+    },
+  },
   watch: {
     value(val) {
       this.step = val;

packages/theme-generator/src/font-panel/components/FontSizeAdjust.vue

@@ -2,11 +2,10 @@
   <div>
     <!-- 顶部调整 -->
     <SegmentSelection
+      v-model="step"
       :selectOptions="FONT_SIZE_OPTIONS"
       :suspendedLabels="FONT_SIZE_LABELS"
-      v-model="step"
       :disabled="segmentSelectionDisabled"
-      @enable="segmentSelectionDisabled = false"
     >
       <template v-slot:left>
         <div class="font-panel__round-tag-left">Aa</div>

packages/theme-generator/src/font-panel/components/LineHeightAdjust.vue

@@ -2,13 +2,12 @@
   <div>
     <!-- 顶部调整 -->
     <SegmentSelection
-      :style="{ margin: '8px 0' }"
       v-if="tokenType === 'plus'"
       v-model="step"
+      :style="{ margin: '8px 0' }"
       :selectOptions="lineHeightOptions"
       :suspendedLabels="lineHeightLabels"
       :disabled="segmentSelectionDisabled"
-      @enable="segmentSelectionDisabled = false"
     >
       <template v-slot:left>
         <div class="font-panel__round-tag-left"><p>Aa</p></div>

packages/theme-generator/src/radius-panel/index.vue

@@ -11,11 +11,10 @@
       <div class="radius-content__main">
         <p class="radius-content__title">{{ lang.borerRadius.radiusSize }}</p>
         <SegmentSelection
+          v-model="step"
           :selectOptions="RADIUS_OPTIONS"
           :suspendedLabels="RADIUS_LABELS"
-          v-model="step"
           :disabled="segmentSelectionDisabled"
-          @enable="segmentSelectionDisabled = false"
         >
           <template v-slot:left>
             <div class="radius-content__round-tag-left" :class="{ disabled: segmentSelectionDisabled }"></div>

packages/theme-generator/src/shadow-panel/index.vue

@@ -10,45 +10,19 @@
     <div class="shadow-content__content" :style="contentStyle">
       <div class="shadow-content__main">
         <p class="shadow-content__title">{{ lang.shadow.title }}</p>
-        <!-- 顶部调整 -->
-        <div :style="{ display: 'flex' }">
-          <div class="shadow-panel__round">
-            <div class="shadow-panel__round-tag">
-              <div class="shadow-panel__round-box" :style="{ 'box-shadow': leftShadow }"></div>
-            </div>
-            <div class="shadow-panel__round-slider">
-              <div
-                class="slider-split"
-                :key="i"
-                :style="{
-                  opacity: i == 0 || i === selectOptions.length - 2 ? 0 : 1,
-                }"
-                v-for="(v, i) in selectOptions.slice(0, selectOptions.length - 1)"
-              ></div>
-
-              <t-slider
-                :min="0"
-                :max="selectOptions.length - 2"
-                :value="step"
-                :label="renderLabel"
-                :disabled="forbidden"
-                :tooltipProps="{ attach: handleAttach }"
-                @change="handleSliderChange"
-              ></t-slider>
-            </div>
-            <div class="shadow-panel__round-tag">
-              <div class="shadow-panel__round-box" :style="{ 'box-shadow': rightShadow }"></div>
-            </div>
-          </div>
-          <t-select
-            class="shadow-panel__select"
-            :options="selectOptions"
-            v-model="step"
-            :keys="isEn ? { label: 'enLabel' } : null"
-            :popup-props="{ attach: handleAttach }"
-            style="width: 82px"
-          ></t-select>
-        </div>
+        <SegmentSelection
+          v-model="step"
+          :selectOptions="selectOptions"
+          :suspendedLabels="suspendedLabels"
+          :disabled="forbidden"
+        >
+          <template #left>
+            <div class="shadow-panel__round-box" :style="{ 'box-shadow': leftShadow }"></div>
+          </template>
+          <template #right>
+            <div class="shadow-panel__round-box" :style="{ 'box-shadow': rightShadow }"></div>
+          </template>
+        </SegmentSelection>
         <shadow-card
           v-for="(shadow, i) in shadowPalette"
           :key="i"
@@ -63,11 +37,10 @@
 </template>
 
 <script lang="jsx">
-import { Select as TSelect, Slider as TSlider } from 'tdesign-vue';
-
+import { SegmentSelection } from '@/common/components';
 import { langMixin } from '@/common/i18n';
 import { getOptionFromLocal, modifyToken, updateLocalOption } from '@/common/themes';
-import { getTokenValue, handleAttach } from '@/common/utils';
+import { getTokenValue } from '@/common/utils';
 
 import {
   ShadowSelect,
@@ -84,8 +57,7 @@ export default {
     top: Number,
   },
   components: {
-    TSlider,
-    TSelect,
+    SegmentSelection,
     ShadowCard,
   },
   mixins: [langMixin],
@@ -95,10 +67,15 @@ export default {
       selectOptions: ShadowSelect,
       selfDefined: ShadowSelectType,
       step: getOptionFromLocal('shadow') || ShadowSelectType.Default,
+      suspendedLabels: {},
     };
   },
   created() {
     this.shadowTypeDetail = ShadowTypeDetail;
+    this.suspendedLabels = this.selectOptions.reduce((acc, option) => {
+      acc[option.value] = this.isEn ? option.enLabel : option.label;
+      return acc;
+    }, {});
   },
   computed: {
     contentStyle() {
@@ -155,14 +132,6 @@ export default {
     },
   },
   methods: {
-    handleAttach,
-    handleSliderChange(v) {
-      if (this.forbidden) return;
-      this.step = v;
-    },
-    renderLabel() {
-      return this.selectOptions[this.step].label;
-    },
     // 拆分 box-shadow 的值 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%)
     splitShadowValue(data) {
       const tempData = `${data},`;
@@ -248,93 +217,11 @@ export default {
   }
 }
 .shadow-panel {
-  &__round {
-    display: flex;
-    height: 32px;
-    > div {
-      display: flex;
-      background-color: var(--bg-color-theme-secondary);
-      margin-right: 2px;
-      align-items: center;
-      justify-content: center;
-    }
-    &-tag {
-      height: 100%;
-      width: 32px;
-      color: var(--text-primary);
-      &:first-child {
-        border-radius: 9px 0px 0px 9px;
-      }
-      &:last-child {
-        border-radius: 0px 9px 9px 0px;
-        margin-right: 0;
-      }
-    }
-    &-box {
-      width: 20px;
-      height: 20px;
-      background: var(--bg-color-theme-surface);
-      border-radius: 3px;
-    }
-    &-slider {
-      width: 76px;
-      padding: 6px;
-      position: relative;
-      display: flex;
-      justify-content: space-between !important;
-      .slider-split {
-        background-color: var(--bg-color-theme-secondary);
-        width: 2px;
-        height: 8px;
-        z-index: 2;
-      }
-      /deep/ .t-slider__container {
-        position: absolute;
-        top: 6px;
-        width: 60px;
-        left: 8px;
-      }
-      /deep/ .t-slider {
-        padding: 6px 0;
-      }
-      /deep/ .t-slider__rail {
-        height: 8px;
-        background-color: var(--bg-color-theme-tertiary);
-      }
-      /deep/ .t-slider__track {
-        height: 8px;
-      }
-      /deep/ .t-slider__button {
-        box-shadow: var(--shadow-1);
-        border-color: var(--bg-color-tag);
-      }
-    }
-  }
-  &__select {
-    text-align: center;
-    padding: 0;
-    margin-left: 8px;
-    /deep/ .t-input {
-      background: var(--bg-color-theme-secondary);
-      border: 1px solid transparent;
-      height: 32px;
-      border-radius: 9px;
-      padding: 0 8px;
-      transition: border-color 0.2s;
-    }
-    /deep/ .t-select:hover {
-      border-color: var(--component-border);
-    }
-    /deep/ .t-is-active {
-      border-color: var(--brand-main) !important;
-    }
-    /deep/ .t-select__right-icon {
-      color: var(--text-placeholder) !important;
-    }
-
-    /deep/ .t-select__single {
-      margin-left: 0;
-    }
+  &__round-box {
+    width: 20px;
+    height: 20px;
+    background: var(--bg-color-theme-surface);
+    border-radius: 3px;
   }
 }
 </style>