wx-sky-ui 1.0.0

package/miniprogram_dist/slider/index.js

@@ -0,0 +1,180 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: true // 开启虚拟节点降低 Skyline DOM 树嵌套层级
+    },
+    properties: {
+        // 当前数值 (支持双向数据受控)
+        value: {
+            type: Number,
+            value: 0,
+            observer(newVal) {
+                // 如果正在拖动中，以内置手势算出的 value 为主，防止受控数据抖动
+                if (this.data.isDragging)
+                    return;
+                this.updatePercent(newVal);
+            }
+        },
+        // 最小值
+        min: {
+            type: Number,
+            value: 0
+        },
+        // 最大值
+        max: {
+            type: Number,
+            value: 100
+        },
+        // 步长
+        step: {
+            type: Number,
+            value: 1
+        },
+        // 是否禁用
+        disabled: {
+            type: Boolean,
+            value: false
+        },
+        // 是否显示悬浮数值气泡
+        showValue: {
+            type: Boolean,
+            value: true
+        },
+        // 激活状态的滑轨颜色
+        activeColor: {
+            type: String,
+            value: ''
+        },
+        // 未激活状态的滑轨底色
+        inactiveColor: {
+            type: String,
+            value: ''
+        },
+        // 附加自定义样式
+        customStyle: {
+            type: String,
+            value: ''
+        }
+    },
+    data: {
+        percent: 0, // 当前激活轨道宽度百分比 (0 - 100)
+        currentValue: 0, // 手柄当前折算值
+        isDragging: false, // 拖曳中标志，驱动气泡显隐
+        trackLeft: 0, // 滑轨左边缘屏幕坐标
+        trackWidth: 0 // 滑轨物理宽度
+    },
+    lifetimes: {
+        ready() {
+            this.getTrackRect();
+        }
+    },
+    methods: {
+        // 测量滑轨的物理尺寸与左侧位置偏移
+        getTrackRect() {
+            const query = this.createSelectorQuery();
+            query.select('.sky-slider__track').boundingClientRect((rect) => {
+                if (rect) {
+                    this.setData({ trackLeft: rect.left, trackWidth: rect.width });
+                    // 初始化百分比
+                    this.updatePercent(this.data.value);
+                }
+            }).exec();
+        },
+        // 根据外部传入的值重算百分比与内置展示值
+        updatePercent(val) {
+            const { min, max } = this.data;
+            const safeVal = Math.max(min, Math.min(max, val));
+            const range = max - min;
+            const percent = range > 0 ? ((safeVal - min) / range) * 100 : 0;
+            this.setData({
+                percent,
+                currentValue: safeVal
+            });
+        },
+        // 物理滑动手势 - touchstart
+        onTouchStart(e) {
+            if (this.data.disabled)
+                return;
+            this.setData({ isDragging: true });
+            // 按下时，重新校准一次滑槽位置，以防页面发生尺寸形变或滚动
+            const query = this.createSelectorQuery();
+            query.select('.sky-slider__track').boundingClientRect((rect) => {
+                if (rect) {
+                    this.setData({ trackLeft: rect.left, trackWidth: rect.width });
+                    const clientX = e.touches[0].clientX;
+                    this.handleDrag(clientX, true);
+                }
+            }).exec();
+        },
+        // 物理滑动手势 - touchmove
+        onTouchMove(e) {
+            if (this.data.disabled)
+                return;
+            if (!this.data.isDragging)
+                return;
+            const clientX = e.touches[0].clientX;
+            this.handleDrag(clientX, true);
+        },
+        // 物理滑动手势 - touchend
+        onTouchEnd() {
+            if (this.data.disabled)
+                return;
+            if (!this.data.isDragging)
+                return;
+            this.setData({ isDragging: false });
+            // 拖拽完成，抛出最终的 change 事件
+            this.triggerEvent('change', { value: this.data.currentValue });
+        },
+        // 点击滑轨任意位置快速定位
+        onTrackTap(e) {
+            if (this.data.disabled)
+                return;
+            // 如果正在被拖动，忽略 tap 响应
+            if (this.data.isDragging)
+                return;
+            // 点击位置定位 (如果是点击定位，不展示气泡，但在松开后触发最终 change)
+            const clientX = e.detail.x;
+            const query = this.createSelectorQuery();
+            query.select('.sky-slider__track').boundingClientRect((rect) => {
+                if (rect) {
+                    this.setData({ trackLeft: rect.left, trackWidth: rect.width });
+                    this.handleDrag(clientX, false);
+                    this.triggerEvent('change', { value: this.data.currentValue });
+                }
+            }).exec();
+        },
+        // 核心位置拖曳计算与事件抛出
+        handleDrag(clientX, isChanging) {
+            const { min, max, step, trackLeft, trackWidth } = this.data;
+            if (!trackWidth)
+                return;
+            // 1. 折算触摸比率
+            let ratio = (clientX - trackLeft) / trackWidth;
+            ratio = Math.max(0, Math.min(1, ratio));
+            // 2. 根据区间折算绝对值
+            const rawValue = min + ratio * (max - min);
+            // 3. 自适应步长精度对齐
+            let stepValue = Math.round((rawValue - min) / step) * step + min;
+            stepValue = Math.max(min, Math.min(max, stepValue));
+            // 4. 浮点数精度规整，例如 step 设为 0.1 时防止出现 35.000000000004
+            const stepStr = step.toString();
+            const dotIndex = stepStr.indexOf('.');
+            if (dotIndex !== -1) {
+                const precision = stepStr.length - dotIndex - 1;
+                stepValue = parseFloat(stepValue.toFixed(precision));
+            }
+            // 计算百分比并更新视图
+            const percent = ((stepValue - min) / (max - min)) * 100;
+            this.setData({
+                percent,
+                currentValue: stepValue
+            });
+            // 5. 抛出拖拽中的 changing 事件
+            if (isChanging) {
+                this.triggerEvent('changing', { value: stepValue });
+            }
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/miniprogram_dist/slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slider/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["Component({\r\n  options: {\r\n    virtualHost: true // 开启虚拟节点降低 Skyline DOM 树嵌套层级\r\n  },\r\n\r\n  properties: {\r\n    // 当前数值 (支持双向数据受控)\r\n    value: {\r\n      type: Number,\r\n      value: 0,\r\n      observer(newVal) {\r\n        // 如果正在拖动中，以内置手势算出的 value 为主，防止受控数据抖动\r\n        if (this.data.isDragging) return;\r\n        this.updatePercent(newVal);\r\n      }\r\n    },\r\n    // 最小值\r\n    min: {\r\n      type: Number,\r\n      value: 0\r\n    },\r\n    // 最大值\r\n    max: {\r\n      type: Number,\r\n      value: 100\r\n    },\r\n    // 步长\r\n    step: {\r\n      type: Number,\r\n      value: 1\r\n    },\r\n    // 是否禁用\r\n    disabled: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 是否显示悬浮数值气泡\r\n    showValue: {\r\n      type: Boolean,\r\n      value: true\r\n    },\r\n    // 激活状态的滑轨颜色\r\n    activeColor: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 未激活状态的滑轨底色\r\n    inactiveColor: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 附加自定义样式\r\n    customStyle: {\r\n      type: String,\r\n      value: ''\r\n    }\r\n  },\r\n\r\n  data: {\r\n    percent: 0,      // 当前激活轨道宽度百分比 (0 - 100)\r\n    currentValue: 0, // 手柄当前折算值\r\n    isDragging: false, // 拖曳中标志，驱动气泡显隐\r\n    trackLeft: 0,    // 滑轨左边缘屏幕坐标\r\n    trackWidth: 0    // 滑轨物理宽度\r\n  },\r\n\r\n  lifetimes: {\r\n    ready() {\r\n      this.getTrackRect();\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    // 测量滑轨的物理尺寸与左侧位置偏移\r\n    getTrackRect() {\r\n      const query = this.createSelectorQuery();\r\n      query.select('.sky-slider__track').boundingClientRect((rect) => {\r\n        if (rect) {\r\n          this.setData({ trackLeft: rect.left, trackWidth: rect.width });\r\n\r\n          // 初始化百分比\r\n          this.updatePercent(this.data.value);\r\n        }\r\n      }).exec();\r\n    },\r\n\r\n    // 根据外部传入的值重算百分比与内置展示值\r\n    updatePercent(val: number) {\r\n      const { min, max } = this.data;\r\n      const safeVal = Math.max(min, Math.min(max, val));\r\n      const range = max - min;\r\n      const percent = range > 0 ? ((safeVal - min) / range) * 100 : 0;\r\n      \r\n      this.setData({\r\n        percent,\r\n        currentValue: safeVal\r\n      });\r\n    },\r\n\r\n    // 物理滑动手势 - touchstart\r\n    onTouchStart(e: WechatMiniprogram.TouchEvent) {\r\n      if (this.data.disabled) return;\r\n\r\n      this.setData({ isDragging: true });\r\n\r\n      // 按下时，重新校准一次滑槽位置，以防页面发生尺寸形变或滚动\r\n      const query = this.createSelectorQuery();\r\n      query.select('.sky-slider__track').boundingClientRect((rect) => {\r\n        if (rect) {\r\n          this.setData({ trackLeft: rect.left, trackWidth: rect.width });\r\n\r\n          const clientX = e.touches[0].clientX;\r\n          this.handleDrag(clientX, true);\r\n        }\r\n      }).exec();\r\n    },\r\n\r\n    // 物理滑动手势 - touchmove\r\n    onTouchMove(e: WechatMiniprogram.TouchEvent) {\r\n      if (this.data.disabled) return;\r\n\r\n      if (!this.data.isDragging) return;\r\n\r\n      const clientX = e.touches[0].clientX;\r\n      this.handleDrag(clientX, true);\r\n    },\r\n\r\n    // 物理滑动手势 - touchend\r\n    onTouchEnd() {\r\n      if (this.data.disabled) return;\r\n\r\n      if (!this.data.isDragging) return;\r\n\r\n      this.setData({ isDragging: false });\r\n\r\n      // 拖拽完成，抛出最终的 change 事件\r\n      this.triggerEvent('change', { value: this.data.currentValue });\r\n    },\r\n\r\n    // 点击滑轨任意位置快速定位\r\n    onTrackTap(e: WechatMiniprogram.BaseEvent & { detail: { x: number } }) {\r\n      if (this.data.disabled) return;\r\n\r\n      // 如果正在被拖动，忽略 tap 响应\r\n      if (this.data.isDragging) return;\r\n\r\n      // 点击位置定位 (如果是点击定位，不展示气泡，但在松开后触发最终 change)\r\n      const clientX = e.detail.x;\r\n\r\n      const query = this.createSelectorQuery();\r\n      query.select('.sky-slider__track').boundingClientRect((rect) => {\r\n        if (rect) {\r\n          this.setData({ trackLeft: rect.left, trackWidth: rect.width });\r\n\r\n          this.handleDrag(clientX, false);\r\n          this.triggerEvent('change', { value: this.data.currentValue });\r\n        }\r\n      }).exec();\r\n    },\r\n\r\n    // 核心位置拖曳计算与事件抛出\r\n    handleDrag(clientX: number, isChanging: boolean) {\r\n      const { min, max, step, trackLeft, trackWidth } = this.data;\r\n\r\n      if (!trackWidth) return;\r\n\r\n      // 1. 折算触摸比率\r\n      let ratio = (clientX - trackLeft) / trackWidth;\r\n      ratio = Math.max(0, Math.min(1, ratio));\r\n\r\n      // 2. 根据区间折算绝对值\r\n      const rawValue = min + ratio * (max - min);\r\n\r\n      // 3. 自适应步长精度对齐\r\n      let stepValue = Math.round((rawValue - min) / step) * step + min;\r\n      stepValue = Math.max(min, Math.min(max, stepValue));\r\n\r\n      // 4. 浮点数精度规整，例如 step 设为 0.1 时防止出现 35.000000000004\r\n      const stepStr = step.toString();\r\n      const dotIndex = stepStr.indexOf('.');\r\n      if (dotIndex !== -1) {\r\n        const precision = stepStr.length - dotIndex - 1;\r\n        stepValue = parseFloat(stepValue.toFixed(precision));\r\n      }\r\n\r\n      // 计算百分比并更新视图\r\n      const percent = ((stepValue - min) / (max - min)) * 100;\r\n      this.setData({\r\n        percent,\r\n        currentValue: stepValue\r\n      });\r\n\r\n      // 5. 抛出拖拽中的 changing 事件\r\n      if (isChanging) {\r\n        this.triggerEvent('changing', { value: stepValue });\r\n      }\r\n    }\r\n  }\r\n});\r\n"]}

package/miniprogram_dist/slider/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "renderer": "skyline",
+  "componentFramework": "glass-easel",
+  "usingComponents": {}
+}

package/miniprogram_dist/slider/index.wxml

@@ -0,0 +1,38 @@
+<view 
+  class="sky-slider {{ disabled ? 'sky-slider--disabled' : '' }}"
+  style="{{ customStyle }}"
+>
+  <!-- 滑轨主槽，绑定点击定位手势 -->
+  <view 
+    class="sky-slider__track" 
+    style="{{ inactiveColor ? 'background-color: ' + inactiveColor : '' }}"
+    bindtap="onTrackTap"
+  >
+    <!-- 已激活/点亮的滑轨部分 -->
+    <view 
+      class="sky-slider__bar" 
+      style="width: {{ percent }}%; {{ activeColor ? 'background-color: ' + activeColor : '' }}"
+    ></view>
+    
+    <!-- 滑块手柄，通过 left 百分比进行定位，绑定手滑动事件 -->
+    <view 
+      class="sky-slider__handle" 
+      style="left: {{ percent }}%;"
+      catchtouchstart="onTouchStart"
+      catchtouchmove="onTouchMove"
+      catchtouchend="onTouchEnd"
+      catchtouchcancel="onTouchEnd"
+    >
+      <!-- 悬浮数字气泡 Tooltip (拖拽激活且开启显示时浮现) -->
+      <view 
+        wx:if="{{ showValue }}" 
+        class="sky-slider__tooltip {{ isDragging ? 'sky-slider__tooltip--show' : '' }}"
+      >
+        <view class="sky-slider__tooltip-value">{{ currentValue }}</view>
+      </view>
+      
+      <!-- 滑块白心圆圈自身 -->
+      <view class="sky-slider__handle-button"></view>
+    </view>
+  </view>
+</view>

package/miniprogram_dist/slider/index.wxss

@@ -0,0 +1,132 @@
+@charset "UTF-8";
+/* ========================================== */
+/* Skyline-UI Slider 滑块选择器样式 (Sass)    */
+/* ========================================== */
+.sky-slider {
+  position: relative;
+  width: 100%;
+  height: 48rpx; /* 大方的手指物理点按热区，极佳的工效触控比 */
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  /* ==================== 1. 滑轨底槽 ==================== */
+}
+.sky-slider .sky-slider__track {
+  position: relative;
+  width: 100%;
+  height: 8rpx; /* 极细高雅滑轨 */
+  background-color: #e9ecef; /* 默认未激活底槽灰 */
+  border-radius: 4rpx;
+  cursor: pointer;
+}
+.sky-slider {
+  /* ==================== 2. 已点亮激活滑轨 ==================== */
+}
+.sky-slider .sky-slider__bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: hsl(250, 85%, 55%); /* 默认点亮品牌蓝紫 */
+  border-radius: 4rpx;
+}
+.sky-slider {
+  /* ==================== 3. 滑块定位器 (居中挂载) ==================== */
+}
+.sky-slider .sky-slider__handle {
+  position: absolute;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  z-index: 10;
+}
+.sky-slider {
+  /* ==================== 4. 滑块圆形实体按钮 ==================== */
+}
+.sky-slider .sky-slider__handle-button {
+  width: 40rpx; /* 完美的 40rpx 黄金比例 */
+  height: 40rpx;
+  background-color: #ffffff;
+  border-radius: 50%;
+  /* 多重低不透明度的微型散射环境悬浮投影，极其轻盈立体 */
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08), 0 1rpx 2rpx rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(0, 0, 0, 0.02); /* 微描边防止浅背景糊边 */
+  box-sizing: border-box;
+  transition: transform 150ms ease;
+  /* 去除移动端直角高亮 */
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.sky-slider {
+  /* 拖曳按压时滑块轻微微凹，增强物理按压确认感 */
+}
+.sky-slider .sky-slider__handle:active .sky-slider__handle-button {
+  transform: scale(0.92);
+}
+.sky-slider {
+  /* ==================== 5. 弹性悬浮数字气泡 Tooltip ==================== */
+}
+.sky-slider .sky-slider__tooltip {
+  position: absolute;
+  bottom: 56rpx; /* 浮现高度控制 */
+  left: 50%;
+  transform: translate3d(-50%, 12rpx, 0) scale(0.7); /* 默认微向下缩入隐藏 */
+  background-color: #212529; /* 高档黑深灰背景 */
+  border-radius: 10rpx;
+  padding: 10rpx 18rpx;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 默认完全淡化隐藏，屏蔽交互 */
+  opacity: 0;
+  pointer-events: none;
+  /* 核心贝塞尔弹性升起过渡 */
+  transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 200ms ease;
+}
+.sky-slider .sky-slider__tooltip-value {
+  font-size: 22rpx;
+  color: #ffffff;
+  font-weight: 600;
+  text-align: center;
+  line-height: 1;
+}
+.sky-slider {
+  /* 纯 CSS 精细手绘气泡下端小三角形 */
+}
+.sky-slider .sky-slider__tooltip::after {
+  content: " ";
+  position: absolute;
+  bottom: -8rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 8rpx solid transparent;
+  border-right: 8rpx solid transparent;
+  border-top: 8rpx solid #212529;
+}
+.sky-slider {
+  /* 气泡拖动激活升起显示 */
+}
+.sky-slider .sky-slider__tooltip--show {
+  opacity: 1;
+  transform: translate3d(-50%, 0, 0) scale(1); /* 平滑回弹锁位 */
+}
+.sky-slider {
+  /* ==================== 6. 置灰禁用态 (完全静默) ==================== */
+}
+.sky-slider--disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.sky-slider--disabled .sky-slider__track {
+  background-color: #f1f3f5 !important;
+}
+.sky-slider--disabled .sky-slider__bar {
+  background-color: #dee2e6 !important;
+}
+.sky-slider--disabled .sky-slider__handle-button {
+  background-color: #f8f9fa !important;
+  box-shadow: none !important;
+  border: 1px solid #e9ecef !important;
+}

package/miniprogram_dist/slider/index.wxss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["slider/index.scss","common/style/theme.scss"],"names":[],"mappings":";AAGA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA,kBC2Be,SD3BsB;EACrC;EACA;;AAfJ;AAkBE;;AACA;EACE;EACA;EACA;EACA;EACA,kBCtBgB,oBDsBsB;EACtC;;AAzBJ;AA4BE;;AACA;EACE;EACA;EACA;EACA;;AAjCJ;AAoCE;;AACA;EACE;EACA;EACA,kBCHc;EDId;AAEA;EACA;EAGA;EACA;EACA;AAEA;EACA;EACA;;AArDJ;AAwDE;;AACA;EACE;;AA1DJ;AA6DE;;AACA;EACE;EACA;EACA;EACA;EACA,kBCrBe,SDqBsB;EACrC;EACA;EACA,YCrBY;EDsBZ;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;;AAIF;EACE;EACA,OCjDc;EDkDd;EACA;EACA;;AAzFJ;AA4FE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAvGJ;AA0GE;;AACA;EACE;EACA;;AA7GJ;AAgHE;;AACA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA","file":"index.wxss","sourcesContent":["@use \"../common/style/theme.scss\" as *;\n@use \"../common/style/mixins.scss\" as *;\n\n/* ========================================== */\n/* Skyline-UI Slider 滑块选择器样式 (Sass)    */\n/* ========================================== */\n\n.sky-slider {\n  position: relative;\n  width: 100%;\n  height: 48rpx; /* 大方的手指物理点按热区，极佳的工效触控比 */\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  /* ==================== 1. 滑轨底槽 ==================== */\n  .sky-slider__track {\n    position: relative;\n    width: 100%;\n    height: 8rpx; /* 极细高雅滑轨 */\n    background-color: $sky-color-gray-3; /* 默认未激活底槽灰 */\n    border-radius: 4rpx;\n    cursor: pointer;\n  }\n\n  /* ==================== 2. 已点亮激活滑轨 ==================== */\n  .sky-slider__bar {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    background-color: $sky-color-primary; /* 默认点亮品牌蓝紫 */\n    border-radius: 4rpx;\n  }\n\n  /* ==================== 3. 滑块定位器 (居中挂载) ==================== */\n  .sky-slider__handle {\n    position: absolute;\n    top: 50%;\n    transform: translate3d(-50%, -50%, 0);\n    z-index: 10;\n  }\n\n  /* ==================== 4. 滑块圆形实体按钮 ==================== */\n  .sky-slider__handle-button {\n    width: 40rpx; /* 完美的 40rpx 黄金比例 */\n    height: 40rpx;\n    background-color: $sky-color-white;\n    border-radius: 50%;\n    \n    /* 多重低不透明度的微型散射环境悬浮投影，极其轻盈立体 */\n    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08),\n                0 1rpx 2rpx rgba(0, 0, 0, 0.04);\n                \n    border: 1px solid rgba(0, 0, 0, 0.02); /* 微描边防止浅背景糊边 */\n    box-sizing: border-box;\n    transition: transform 150ms ease;\n    \n    /* 去除移动端直角高亮 */\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* 拖曳按压时滑块轻微微凹，增强物理按压确认感 */\n  .sky-slider__handle:active .sky-slider__handle-button {\n    transform: scale(0.92);\n  }\n\n  /* ==================== 5. 弹性悬浮数字气泡 Tooltip ==================== */\n  .sky-slider__tooltip {\n    position: absolute;\n    bottom: 56rpx; /* 浮现高度控制 */\n    left: 50%;\n    transform: translate3d(-50%, 12rpx, 0) scale(0.7); /* 默认微向下缩入隐藏 */\n    background-color: $sky-color-gray-9; /* 高档黑深灰背景 */\n    border-radius: 10rpx;\n    padding: 10rpx 18rpx;\n    box-shadow: $sky-shadow-sm;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n    /* 默认完全淡化隐藏，屏蔽交互 */\n    opacity: 0;\n    pointer-events: none;\n    \n    /* 核心贝塞尔弹性升起过渡 */\n    transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275),\n                opacity 200ms ease;\n  }\n\n  .sky-slider__tooltip-value {\n    font-size: 22rpx;\n    color: $sky-color-white;\n    font-weight: 600;\n    text-align: center;\n    line-height: 1;\n  }\n\n  /* 纯 CSS 精细手绘气泡下端小三角形 */\n  .sky-slider__tooltip::after {\n    content: \" \";\n    position: absolute;\n    bottom: -8rpx;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: 8rpx solid transparent;\n    border-right: 8rpx solid transparent;\n    border-top: 8rpx solid $sky-color-gray-9;\n  }\n\n  /* 气泡拖动激活升起显示 */\n  .sky-slider__tooltip--show {\n    opacity: 1;\n    transform: translate3d(-50%, 0, 0) scale(1); /* 平滑回弹锁位 */\n  }\n\n  /* ==================== 6. 置灰禁用态 (完全静默) ==================== */\n  &--disabled {\n    pointer-events: none;\n    cursor: not-allowed;\n\n    .sky-slider__track {\n      background-color: $sky-color-gray-2 !important;\n    }\n\n    .sky-slider__bar {\n      background-color: $sky-color-gray-4 !important;\n    }\n\n    .sky-slider__handle-button {\n      background-color: $sky-color-gray-1 !important;\n      box-shadow: none !important;\n      border: 1px solid $sky-color-gray-3 !important;\n    }\n  }\n}\n","// ==========================================\r\n// Skyline-UI 极具质感的现代设计系统 (SCSS)\r\n// ==========================================\r\n\r\n// --- 品牌色体系 (HSL Tailored Colors) ---\r\n$sky-brand-h: 250; // 主品牌色相 (优雅深紫/蓝色调)\r\n$sky-brand-s: 85%;\r\n$sky-brand-l: 55%;\r\n\r\n$sky-color-primary: hsl($sky-brand-h, $sky-brand-s, $sky-brand-l);\r\n$sky-color-primary-hover: hsl($sky-brand-h, $sky-brand-s, $sky-brand-l - 8%);\r\n$sky-color-primary-active: hsl($sky-brand-h, $sky-brand-s, $sky-brand-l - 15%);\r\n$sky-color-primary-light: hsl($sky-brand-h, $sky-brand-s, 95%);\r\n\r\n// 辅助色体系 (意图表达)\r\n$sky-color-success: hsl(150, 80%, 40%);\r\n$sky-color-success-active: hsl(150, 80%, 32%);\r\n$sky-color-success-light: hsl(150, 80%, 96%);\r\n\r\n$sky-color-warning: hsl(35, 90%, 50%);\r\n$sky-color-warning-active: hsl(35, 90%, 42%);\r\n$sky-color-warning-light: hsl(35, 90%, 96%);\r\n\r\n$sky-color-danger: hsl(355, 85%, 55%);\r\n$sky-color-danger-active: hsl(355, 85%, 45%);\r\n$sky-color-danger-light: hsl(355, 85%, 96%);\r\n\r\n$sky-color-info: hsl(200, 85%, 50%);\r\n$sky-color-info-active: hsl(200, 85%, 42%);\r\n$sky-color-info-light: hsl(200, 85%, 96%);\r\n\r\n// --- Tag 标签组件专用色系 (莫兰迪低饱和) ---\r\n$sky-tag-blue: #edf2ff;\r\n$sky-tag-blue-text: #3b5bdb;\r\n$sky-tag-green: #ebfbee;\r\n$sky-tag-green-text: #2b8a3e;\r\n$sky-tag-yellow: #fff9db;\r\n$sky-tag-yellow-text: #f08c00;\r\n$sky-tag-red: #ffeef0;\r\n$sky-tag-red-text: #fa5252;\r\n$sky-tag-info: #e7f5ff;\r\n$sky-tag-info-text: #1c7ed6;\r\n\r\n// --- 纯净的中性色调 (Sleek Grays) ---\r\n$sky-color-white: #ffffff;\r\n$sky-color-gray-1: #f8f9fa; // 极浅背景\r\n$sky-color-gray-2: #f1f3f5; // 浅灰背景\r\n$sky-color-gray-3: #e9ecef; // 边框线/失效态\r\n$sky-color-gray-4: #dee2e6;\r\n$sky-color-gray-5: #adb5bd; // 提示文本\r\n$sky-color-gray-6: #868e96;\r\n$sky-color-gray-7: #495057; // 次级文本\r\n$sky-color-gray-8: #343a40;\r\n$sky-color-gray-9: #212529; // 主级文本\r\n\r\n// --- 阴影系统 (Premium Shadows) ---\r\n$sky-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);\r\n$sky-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n$sky-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);\r\n$sky-shadow-primary: 0 4px 14px rgba(100, 80, 240, 0.2);\r\n\r\n// --- 圆角规范 (Borders) ---\r\n$sky-border-radius-xs: 4rpx;\r\n$sky-border-radius-sm: 8rpx;\r\n$sky-border-radius-md: 12rpx;\r\n$sky-border-radius-lg: 20rpx;\r\n$sky-border-radius-round: 9999rpx;\r\n\r\n// --- 字体与字号规范 (Typography) ---\r\n$sky-font-family: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Helvetica, \"Segoe UI\", Arial, Roboto, sans-serif;\r\n$sky-font-size-xs: 20rpx;\r\n$sky-font-size-sm: 24rpx;\r\n$sky-font-size-md: 28rpx;\r\n$sky-font-size-lg: 32rpx;\r\n$sky-font-size-xl: 36rpx;\r\n\r\n// --- 动效与过渡 (Transitions) ---\r\n$sky-transition-duration: 200ms;\r\n$sky-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n// --- 间距规范 (Spacing) ---\r\n$sky-spacing-xs: 8rpx;\r\n$sky-spacing-sm: 16rpx;\r\n$sky-spacing-md: 24rpx;\r\n$sky-spacing-lg: 32rpx;\r\n$sky-spacing-xl: 48rpx;\r\n\r\n// --- 组件高度规范 (Component Heights) ---\r\n$sky-height-sm: 56rpx;\r\n$sky-height-md: 72rpx;\r\n$sky-height-lg: 88rpx;\r\n$sky-height-xl: 96rpx;\r\n\r\n// --- 层级规范 (Z-Index) ---\r\n$sky-z-dropdown: 100;\r\n$sky-z-fixed: 500;\r\n$sky-z-popup: 1000;\r\n$sky-z-toast: 2000;\r\n"]}

package/miniprogram_dist/subsection/index.js

@@ -0,0 +1,85 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: true // 开启虚拟节点降低 Skyline DOM 层级嵌套
+    },
+    properties: {
+        // 数据源数组，支持 ['选项一', '选项二'] 或 [{ name: '选项一', badge: 3 }]
+        list: {
+            type: Array,
+            value: []
+        },
+        // 当前激活项的索引
+        current: {
+            type: Number,
+            value: 0
+        },
+        // 显示模式：'button' (胶囊滑块) 或 'line' (下划线滑动)
+        mode: {
+            type: String,
+            value: 'button'
+        },
+        // 激活项的文字及滑块/下划线颜色
+        activeColor: {
+            type: String,
+            value: '#6450f0' // Skyline-UI 极光经典紫蓝
+        },
+        // 未激活项的文字颜色
+        inactiveColor: {
+            type: String,
+            value: '#64748b' // 石墨灰
+        },
+        // 分段器底色 (仅对 mode='button' 胶囊模式有效)
+        bgColor: {
+            type: String,
+            value: '#f1f3f5'
+        },
+        // 激活项的文字是否加粗
+        bold: {
+            type: Boolean,
+            value: true
+        },
+        // 获取徽标/数量值所对应的对象 key，默认为 'badge'
+        badgeKey: {
+            type: String,
+            value: 'badge'
+        },
+        // 数量/徽标的展示形式：
+        // 'parenthesis'：文字后直接带括号显示数量，例如 "待配送(3)"，与文字颜色一致
+        // 'capsule'：右上角微型高亮红色胶囊气泡数字
+        // 'dot'：右上角微型红点
+        badgeType: {
+            type: String,
+            value: 'parenthesis'
+        },
+        // 自定义附加样式
+        customStyle: {
+            type: String,
+            value: ''
+        }
+    },
+    data: {
+    // 内部只读变量或派生变量
+    },
+    methods: {
+        // 点击某一项的响应
+        onTapItem(e) {
+            const { index } = e.currentTarget.dataset;
+            const item = this.properties.list[index];
+            // 防御性拦截：如果点击的项是 disabled 或是当前项，则不做操作
+            if (!item)
+                return;
+            if (typeof item === 'object' && item.disabled)
+                return;
+            if (index === this.properties.current)
+                return;
+            // 触发外部 change 事件
+            this.triggerEvent('change', {
+                index,
+                item
+            });
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/miniprogram_dist/subsection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/subsection/index.ts"],"names":[],"mappings":";AAAA,SAAS,CAAC;IACR,OAAO,EAAE;QACP,WAAW,EAAE,IAAI,CAAC,4BAA4B;KAC/C;IAED,UAAU,EAAE;QACV,wDAAwD;QACxD,IAAI,EAAE;YACJ,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,EAAE;SACV;QACD,WAAW;QACX,OAAO,EAAE;YACP,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,CAAC;SACT;QACD,wCAAwC;QACxC,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,QAAQ;SAChB;QACD,kBAAkB;QAClB,WAAW,EAAE;YACX,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,SAAS,CAAC,oBAAoB;SACtC;QACD,YAAY;QACZ,aAAa,EAAE;YACb,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,SAAS,CAAC,MAAM;SACxB;QACD,kCAAkC;QAClC,OAAO,EAAE;YACP,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,SAAS;SACjB;QACD,aAAa;QACb,IAAI,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,IAAI;SACZ;QACD,iCAAiC;QACjC,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,OAAO;SACf;QACD,cAAc;QACd,iDAAiD;QACjD,4BAA4B;QAC5B,gBAAgB;QAChB,SAAS,EAAE;YACT,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,aAAa;SACrB;QACD,UAAU;QACV,WAAW,EAAE;YACX,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE;SACV;KACF;IAED,IAAI,EAAE;IACJ,cAAc;KACf;IAED,OAAO,EAAE;QACP,WAAW;QACX,SAAS,CAAC,CAA+B;YACvC,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC;YAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEzC,qCAAqC;YACrC,IAAI,CAAC,IAAI;gBAAE,OAAO;YAClB,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YACtD,IAAI,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,OAAO;gBAAE,OAAO;YAE9C,iBAAiB;YACjB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE;gBAC1B,KAAK;gBACL,IAAI;aACL,CAAC,CAAC;QACL,CAAC;KACF;CACF,CAAC,CAAC","file":"index.js","sourcesContent":["Component({\r\n  options: {\r\n    virtualHost: true // 开启虚拟节点降低 Skyline DOM 层级嵌套\r\n  },\r\n\r\n  properties: {\r\n    // 数据源数组，支持 ['选项一', '选项二'] 或 [{ name: '选项一', badge: 3 }]\r\n    list: {\r\n      type: Array,\r\n      value: []\r\n    },\r\n    // 当前激活项的索引\r\n    current: {\r\n      type: Number,\r\n      value: 0\r\n    },\r\n    // 显示模式：'button' (胶囊滑块) 或 'line' (下划线滑动)\r\n    mode: {\r\n      type: String,\r\n      value: 'button'\r\n    },\r\n    // 激活项的文字及滑块/下划线颜色\r\n    activeColor: {\r\n      type: String,\r\n      value: '#6450f0' // Skyline-UI 极光经典紫蓝\r\n    },\r\n    // 未激活项的文字颜色\r\n    inactiveColor: {\r\n      type: String,\r\n      value: '#64748b' // 石墨灰\r\n    },\r\n    // 分段器底色 (仅对 mode='button' 胶囊模式有效)\r\n    bgColor: {\r\n      type: String,\r\n      value: '#f1f3f5'\r\n    },\r\n    // 激活项的文字是否加粗\r\n    bold: {\r\n      type: Boolean,\r\n      value: true\r\n    },\r\n    // 获取徽标/数量值所对应的对象 key，默认为 'badge'\r\n    badgeKey: {\r\n      type: String,\r\n      value: 'badge'\r\n    },\r\n    // 数量/徽标的展示形式：\r\n    // 'parenthesis'：文字后直接带括号显示数量，例如 \"待配送(3)\"，与文字颜色一致\r\n    // 'capsule'：右上角微型高亮红色胶囊气泡数字\r\n    // 'dot'：右上角微型红点\r\n    badgeType: {\r\n      type: String,\r\n      value: 'parenthesis'\r\n    },\r\n    // 自定义附加样式\r\n    customStyle: {\r\n      type: String,\r\n      value: ''\r\n    }\r\n  },\r\n\r\n  data: {\r\n    // 内部只读变量或派生变量\r\n  },\r\n\r\n  methods: {\r\n    // 点击某一项的响应\r\n    onTapItem(e: WechatMiniprogram.TouchEvent) {\r\n      const { index } = e.currentTarget.dataset;\r\n      const item = this.properties.list[index];\r\n\r\n      // 防御性拦截：如果点击的项是 disabled 或是当前项，则不做操作\r\n      if (!item) return;\r\n      if (typeof item === 'object' && item.disabled) return;\r\n      if (index === this.properties.current) return;\r\n\r\n      // 触发外部 change 事件\r\n      this.triggerEvent('change', {\r\n        index,\r\n        item\r\n      });\r\n    }\r\n  }\r\n});\r\n"]}

package/miniprogram_dist/subsection/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "renderer": "skyline",
+  "componentFramework": "glass-easel",
+  "usingComponents": {}
+}

package/miniprogram_dist/subsection/index.wxml

@@ -0,0 +1,55 @@
+<view 
+  class="sky-subsection sky-subsection--{{ mode }}" 
+  style="background-color: {{ mode === 'button' ? bgColor : 'transparent' }}; {{ customStyle }}"
+>
+  <!-- 1. 高性能纯 CSS 阻尼滑块 (Button 模式下的白胶囊 / Line 模式下的底横线) -->
+  <view 
+    class="sky-subsection__slider-wrap" 
+    style="width: {{ 100 / list.length }}%; transform: translate3d({{ current * 100 }}%, 0, 0);"
+  >
+    <!-- Button 模式下的精致发光白胶囊背景 -->
+    <view wx:if="{{ mode === 'button' }}" class="sky-subsection__slider-bg"></view>
+    
+    <!-- Line 模式下的优雅小下划线 -->
+    <view 
+      wx:if="{{ mode === 'line' }}" 
+      class="sky-subsection__line-indicator" 
+      style="background-color: {{ activeColor }};"
+    ></view>
+  </view>
+
+  <!-- 2. 分段列表项目渲染 -->
+  <view 
+    wx:for="{{ list }}" 
+    wx:key="index"
+    class="sky-subsection__item {{ index === current ? 'sky-subsection__item--active' : '' }} {{ item.disabled ? 'sky-subsection__item--disabled' : '' }}"
+    style="color: {{ index === current ? activeColor : inactiveColor }}; font-weight: {{ (index === current && bold) ? '700' : '500' }};"
+    data-index="{{ index }}"
+    bindtap="onTapItem"
+  >
+    <view class="sky-subsection__item-inner">
+      <!-- 渲染文本主体：若为对象则取 item.name，否则直接渲染 item -->
+      <text class="sky-subsection__item-text">{{ item.name !== undefined ? item.name : item }}</text>
+
+      <!-- 选项一：文字后带括号显示数量 (如 "待配送(3)"，与文字同色) -->
+      <text 
+        wx:if="{{ badgeType === 'parenthesis' && item[badgeKey] !== undefined && item[badgeKey] > 0 }}"
+        class="sky-subsection__item-parenthesis"
+      >({{ item[badgeKey] }})</text>
+
+      <!-- 选项二：右上角高亮胶囊徽标 -->
+      <view 
+        wx:if="{{ badgeType === 'capsule' && item[badgeKey] !== undefined && item[badgeKey] > 0 }}"
+        class="sky-subsection__item-capsule"
+      >
+        <text class="sky-subsection__item-capsule-text">{{ item[badgeKey] }}</text>
+      </view>
+
+      <!-- 选项三：右上角小红点 -->
+      <view 
+        wx:if="{{ badgeType === 'dot' && item[badgeKey] !== undefined && item[badgeKey] > 0 }}"
+        class="sky-subsection__item-dot"
+      ></view>
+    </view>
+  </view>
+</view>