wx-sky-ui 1.0.0

package/miniprogram_dist/nav-bar/index.wxss

@@ -0,0 +1,160 @@
+.sky-nav-bar {
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.02);
+}
+
+.sky-nav-bar--fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}
+
+.sky-nav-bar__status-bar {
+  width: 100%;
+}
+
+.sky-nav-bar__content-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.sky-nav-bar__left-box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.sky-nav-bar__btn-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  transition: background-color 0.2s ease;
+  box-sizing: border-box;
+}
+
+.sky-nav-bar__btn-active {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.sky-nav-bar__btn-wrapper sky-icon {
+  display: inline-flex;
+}
+
+.sky-nav-bar__title-box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+  flex: 1;
+  width: 0;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.sky-nav-bar__title-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: inherit;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+}
+
+.sky-nav-bar__title-text {
+  font-size: var(--nav-bar-title-size, 32rpx);
+  color: var(--nav-bar-title-color, currentColor);
+  letter-spacing: -0.5rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  line-height: 1.4;
+  display: block;
+}
+
+.sky-nav-bar__title-text--bold {
+  font-weight: 700;
+}
+
+.sky-nav-bar__loading-spinner {
+  width: 28rpx;
+  height: 28rpx;
+  border: 3rpx solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  margin-right: 12rpx;
+  animation: sky-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+
+.sky-nav-bar__right-box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.sky-nav-bar__placeholder {
+  width: 100%;
+  background-color: transparent;
+  pointer-events: none;
+}
+
+.sky-nav-bar__content--left {
+  justify-content: flex-start;
+}
+.sky-nav-bar__content--left .sky-nav-bar__left-box {
+  padding-left: 24rpx;
+  flex-shrink: 0;
+}
+.sky-nav-bar__content--left .sky-nav-bar__title-box {
+  flex: 1;
+  margin-left: var(--nav-bar-title-spacing, 12rpx);
+  justify-content: flex-start;
+  min-width: 0;
+}
+.sky-nav-bar__content--left .sky-nav-bar__title-text {
+  text-align: left;
+}
+.sky-nav-bar__content--left .sky-nav-bar__right-box {
+  width: var(--nav-bar-right-width, 97px);
+  flex-shrink: 0;
+  justify-content: flex-end;
+  padding-right: 24rpx;
+  margin-left: auto;
+}
+
+.sky-nav-bar__content--center {
+  justify-content: space-between;
+}
+.sky-nav-bar__content--center .sky-nav-bar__left-box {
+  width: var(--nav-bar-right-width, 97px);
+  flex-shrink: 0;
+  padding-left: 24rpx;
+}
+.sky-nav-bar__content--center .sky-nav-bar__title-box {
+  flex: 1;
+  justify-content: center;
+  min-width: 0;
+}
+.sky-nav-bar__content--center .sky-nav-bar__title-text {
+  text-align: center;
+}
+.sky-nav-bar__content--center .sky-nav-bar__right-box {
+  width: var(--nav-bar-right-width, 97px);
+  flex-shrink: 0;
+  justify-content: flex-end;
+  padding-right: 24rpx;
+}

package/miniprogram_dist/nav-bar/index.wxss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["nav-bar/index.scss","common/style/mixins.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAMA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;ECpDA;EACA;EACA;EDoDA;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAMF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAOJ;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA","file":"index.wxss","sourcesContent":["@use \"../common/style/theme.scss\" as *;\n@use \"../common/style/mixins.scss\" as *;\n\n.sky-nav-bar {\n  width: 100%;\n  box-sizing: border-box;\n  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.02);\n}\n\n.sky-nav-bar--fixed {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 999;\n}\n\n// 状态栏占位区：纯粹撑高\n.sky-nav-bar__status-bar {\n  width: 100%;\n}\n\n// 内容行：三栏 flex 布局\n.sky-nav-bar__content-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n// 左侧操作区\n.sky-nav-bar__left-box {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n// 图标按钮容器\n.sky-nav-bar__btn-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 64rpx;\n  height: 64rpx;\n  border-radius: 50%;\n  transition: background-color 0.2s ease;\n  box-sizing: border-box;\n}\n\n.sky-nav-bar__btn-active {\n  background-color: rgba(0, 0, 0, 0.05);\n}\n\n// 左右侧图标自适应样式\n.sky-nav-bar__btn-wrapper {\n  // 可以内置 sky-icon 渲染修正样式\n  sky-icon {\n    display: inline-flex;\n  }\n}\n\n// 标题区容器\n.sky-nav-bar__title-box {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 100%;\n  flex: 1;\n  width: 0;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.sky-nav-bar__title-content {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: inherit;\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n}\n\n// 标题文字\n.sky-nav-bar__title-text {\n  font-size: var(--nav-bar-title-size, 32rpx);\n  color: var(--nav-bar-title-color, currentColor);\n  letter-spacing: -0.5rpx;\n  @include text-ellipsis;\n  max-width: 100%;\n  line-height: 1.4;\n  display: block;\n}\n\n.sky-nav-bar__title-text--bold {\n  font-weight: 700;\n}\n\n// 加载指示器\n.sky-nav-bar__loading-spinner {\n  width: 28rpx;\n  height: 28rpx;\n  border: 3rpx solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  margin-right: 12rpx;\n  animation: sky-spin 0.8s linear infinite;\n  flex-shrink: 0;\n}\n\n// 右侧扩展区\n.sky-nav-bar__right-box {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n// fixed 占位器\n.sky-nav-bar__placeholder {\n  width: 100%;\n  background-color: transparent;\n  pointer-events: none;\n}\n\n// ========================\n// 靠左模式\n// ========================\n.sky-nav-bar__content--left {\n  justify-content: flex-start;\n\n  .sky-nav-bar__left-box {\n    padding-left: 24rpx;\n    flex-shrink: 0;\n  }\n\n  .sky-nav-bar__title-box {\n    flex: 1;\n    margin-left: var(--nav-bar-title-spacing, 12rpx);\n    justify-content: flex-start;\n    min-width: 0;\n  }\n\n  .sky-nav-bar__title-text {\n    text-align: left;\n  }\n\n  .sky-nav-bar__right-box {\n    width: var(--nav-bar-right-width, 97px);\n    flex-shrink: 0;\n    justify-content: flex-end;\n    padding-right: 24rpx;\n    margin-left: auto;\n  }\n}\n\n// ========================\n// 居中模式\n// ========================\n.sky-nav-bar__content--center {\n  justify-content: space-between;\n\n  .sky-nav-bar__left-box {\n    width: var(--nav-bar-right-width, 97px);\n    flex-shrink: 0;\n    padding-left: 24rpx;\n  }\n\n  .sky-nav-bar__title-box {\n    flex: 1;\n    justify-content: center;\n    min-width: 0;\n  }\n\n  .sky-nav-bar__title-text {\n    text-align: center;\n  }\n\n  .sky-nav-bar__right-box {\n    width: var(--nav-bar-right-width, 97px);\n    flex-shrink: 0;\n    justify-content: flex-end;\n    padding-right: 24rpx;\n  }\n}\n","// ==========================================\r\n// Skyline-UI Flex 布局与样式混合宏 (SCSS)\r\n// ==========================================\r\n\r\n@mixin flex-row {\r\n  display: flex;\r\n  flex-direction: row;\r\n}\r\n\r\n@mixin flex-column {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n@mixin flex-center {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n@mixin flex-align-center {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n}\r\n\r\n@mixin absolute-full {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n// 文本溢出隐藏 (在微信小程序 Flex 布局下，通常需要在容器上设置 overflow 和 flex)\r\n@mixin text-ellipsis {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n// 多行文本溢出隐藏\r\n@mixin text-ellipsis-multiline($lines: 2) {\r\n  display: -webkit-box;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-line-clamp: $lines;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n// 安全区域底部适配\r\n@mixin safe-area-bottom {\r\n  padding-bottom: constant(safe-area-inset-bottom);\r\n  padding-bottom: env(safe-area-inset-bottom);\r\n}\r\n\r\n// 1px 高清屏边框 (使用 transform 缩放方案)\r\n@mixin hairline-border($color: $sky-color-gray-3, $radius: 0) {\r\n  position: relative;\r\n  &::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 200%;\r\n    height: 200%;\r\n    border: 1px solid $color;\r\n    border-radius: $radius * 2;\r\n    transform: scale(0.5);\r\n    transform-origin: 0 0;\r\n    box-sizing: border-box;\r\n    pointer-events: none;\r\n  }\r\n}\r\n\r\n// 禁用态通用样式\r\n@mixin disabled-state {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n// 按钮重置\r\n@mixin button-reset {\r\n  border: none;\r\n  outline: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  background: none;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n"]}

package/miniprogram_dist/popup-select/index.d.ts

@@ -0,0 +1,4 @@
+interface OptionItem {
+    text: string;
+    value: string | number | boolean;
+}

package/miniprogram_dist/popup-select/index.js

@@ -0,0 +1,70 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: true
+    },
+    properties: {
+        value: {
+            type: null,
+            value: '',
+            observer: 'updateSelectedText'
+        },
+        title: {
+            type: String,
+            value: ''
+        },
+        options: {
+            type: Array,
+            value: [],
+            observer: 'updateSelectedText'
+        },
+        placeholder: {
+            type: String,
+            value: '请选择'
+        },
+        disabled: {
+            type: Boolean,
+            value: false
+        }
+    },
+    data: {
+        isVisible: false,
+        selectedText: ''
+    },
+    lifetimes: {
+        attached() {
+            this.updateSelectedText();
+        }
+    },
+    methods: {
+        updateSelectedText() {
+            const { options, value } = this.properties;
+            const found = options.find(item => item.value === value);
+            this.setData({
+                selectedText: found ? found.text : ''
+            });
+        },
+        handleOpen() {
+            if (this.data.disabled)
+                return;
+            this.setData({ isVisible: true });
+        },
+        handleClose() {
+            this.setData({ isVisible: false });
+        },
+        handleSelect(e) {
+            const { item } = e.currentTarget.dataset;
+            this.triggerEvent('change', item);
+            this.triggerEvent('input', item.value);
+            this.handleClose();
+        },
+        handleClear() {
+            this.triggerEvent('change', { text: '', value: '' });
+            this.triggerEvent('input', '');
+            this.setData({ selectedText: '' });
+        },
+        noop() { }
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/miniprogram_dist/popup-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/popup-select/index.ts"],"names":[],"mappings":";AAKA,SAAS,CAAC;IACR,OAAO,EAAE;QACP,WAAW,EAAE,IAAI;KAClB;IACD,UAAU,EAAE;QACV,KAAK,EAAE;YACL,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,EAAE;YACT,QAAQ,EAAE,oBAAoB;SAC/B;QACD,KAAK,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE;SACV;QACD,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,EAAkB;YACzB,QAAQ,EAAE,oBAAoB;SAC/B;QACD,WAAW,EAAE;YACX,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,KAAK;SACb;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,KAAK;SACb;KACF;IAED,IAAI,EAAE;QACJ,SAAS,EAAE,KAAK;QAChB,YAAY,EAAE,EAAE;KACjB;IAED,SAAS,EAAE;QACT,QAAQ;YACN,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;KACF;IAED,OAAO,EAAE;QACP,kBAAkB;YAChB,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;YAC3C,MAAM,KAAK,GAAI,OAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;YAC3E,IAAI,CAAC,OAAO,CAAC;gBACX,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;aACtC,CAAC,CAAC;QACL,CAAC;QAED,UAAU;YACR,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC/B,IAAI,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QACpC,CAAC;QAED,WAAW;YACT,IAAI,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;QACrC,CAAC;QAED,YAAY,CAAC,CAA+B;YAC1C,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC;YACzC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YAClC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACvC,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAED,WAAW;YACT,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YACrD,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YAC/B,IAAI,CAAC,OAAO,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;QACrC,CAAC;QAED,IAAI,KAAI,CAAC;KACV;CACF,CAAC,CAAC","file":"index.js","sourcesContent":["interface OptionItem {\r\n  text: string;\r\n  value: string | number | boolean;\r\n}\r\n\r\nComponent({\r\n  options: {\r\n    virtualHost: true\r\n  },\r\n  properties: {\r\n    value: {\r\n      type: null,\r\n      value: '',\r\n      observer: 'updateSelectedText'\r\n    },\r\n    title: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    options: {\r\n      type: Array,\r\n      value: [] as OptionItem[],\r\n      observer: 'updateSelectedText'\r\n    },\r\n    placeholder: {\r\n      type: String,\r\n      value: '请选择'\r\n    },\r\n    disabled: {\r\n      type: Boolean,\r\n      value: false\r\n    }\r\n  },\r\n\r\n  data: {\r\n    isVisible: false,\r\n    selectedText: ''\r\n  },\r\n\r\n  lifetimes: {\r\n    attached() {\r\n      this.updateSelectedText();\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    updateSelectedText() {\r\n      const { options, value } = this.properties;\r\n      const found = (options as OptionItem[]).find(item => item.value === value);\r\n      this.setData({\r\n        selectedText: found ? found.text : ''\r\n      });\r\n    },\r\n\r\n    handleOpen() {\r\n      if (this.data.disabled) return;\r\n      this.setData({ isVisible: true });\r\n    },\r\n\r\n    handleClose() {\r\n      this.setData({ isVisible: false });\r\n    },\r\n\r\n    handleSelect(e: WechatMiniprogram.TouchEvent) {\r\n      const { item } = e.currentTarget.dataset;\r\n      this.triggerEvent('change', item);\r\n      this.triggerEvent('input', item.value);\r\n      this.handleClose();\r\n    },\r\n\r\n    handleClear() {\r\n      this.triggerEvent('change', { text: '', value: '' });\r\n      this.triggerEvent('input', '');\r\n      this.setData({ selectedText: '' });\r\n    },\r\n\r\n    noop() {}\r\n  }\r\n});\r\n"]}

package/miniprogram_dist/popup-select/index.json

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

package/miniprogram_dist/popup-select/index.wxml

@@ -0,0 +1,48 @@
+<view class="sky-popup-select">
+  <view class="sky-select__trigger" bindtap="handleOpen">
+    <slot>
+      <!-- 默认的高颜值触发输入框 -->
+      <view class="sky-select__input {{ disabled ? 'sky-select__input--disabled' : '' }}">
+        <text class="sky-select__value {{ selectedText === '' ? 'sky-select__value--placeholder' : '' }}">
+          {{ selectedText !== '' ? selectedText : placeholder }}
+        </text>
+        <view class="sky-select__icon-box">
+          <view wx:if="{{ selectedText !== '' && !disabled }}" class="sky-select__btn-clear" catchtap="handleClear"></view>
+          <view wx:else class="sky-select__arrow"></view>
+        </view>
+      </view>
+    </slot>
+  </view>
+
+  <!-- 遮罩层 (Mask) -->
+  <view wx:if="{{ isVisible }}" class="sky-select__mask" bindtap="handleClose" catchtouchmove="noop"></view>
+
+  <!-- 底部弹出卡片 (Popup Drawer) -->
+  <view wx:if="{{ isVisible }}" class="sky-select__popup" catchtouchmove="noop">
+    <!-- 头部操作栏 -->
+    <view class="sky-select__popup-header">
+      <text class="sky-select__popup-title">{{ title || placeholder }}</text>
+      <view class="sky-select__popup-btn-close" hover-class="sky-select__btn-active" hover-stay-time="70" bindtap="handleClose">
+        <text class="sky-select__popup-close-text">取消</text>
+      </view>
+    </view>
+    
+    <!-- 选项滚动列表 -->
+    <scroll-view class="sky-select__option-list" type="list" scroll-y>
+      <view
+        wx:for="{{ options }}"
+        wx:key="value"
+        class="sky-select__option-item"
+        hover-class="sky-select__option-item--active"
+        hover-stay-time="70"
+        bindtap="handleSelect"
+        data-item="{{ item }}"
+      >
+        <text class="sky-select__option-text {{ item.value === value ? 'sky-select__option-text--selected' : '' }}">
+          {{ item.text }}
+        </text>
+        <view wx:if="{{ item.value === value }}" class="sky-select__option-icon-checked"></view>
+      </view>
+    </scroll-view>
+  </view>
+</view>

package/miniprogram_dist/popup-select/index.wxss

@@ -0,0 +1,184 @@
+.sky-popup-select {
+  width: 100%;
+}
+
+.sky-select__trigger {
+  width: 100%;
+}
+
+.sky-select__input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+  height: 88rpx;
+  padding: 0 32rpx;
+  background-color: #ffffff;
+  border: 2rpx solid #e9ecef;
+  border-radius: 12rpx;
+  transition: all 0.2s ease;
+}
+
+.sky-select__input--disabled {
+  background-color: #f8f9fa;
+  border-color: #e9ecef;
+  opacity: 0.6;
+}
+
+.sky-select__value {
+  font-size: 28rpx;
+  color: #212529;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.sky-select__value--placeholder {
+  color: #adb5bd;
+}
+
+.sky-select__icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48rpx;
+  height: 48rpx;
+  margin-left: 16rpx;
+}
+
+.sky-select__arrow {
+  width: 12rpx;
+  height: 12rpx;
+  border-right: 4rpx solid #adb5bd;
+  border-bottom: 4rpx solid #adb5bd;
+  transform: rotate(45deg);
+  margin-bottom: 4rpx;
+}
+
+.sky-select__btn-clear {
+  position: relative;
+  width: 32rpx;
+  height: 32rpx;
+  background-color: transparent;
+}
+.sky-select__btn-clear::before, .sky-select__btn-clear::after {
+  content: "";
+  position: absolute;
+  top: 14rpx;
+  left: 8rpx;
+  width: 16rpx;
+  height: 4rpx;
+  background-color: #adb5bd;
+  border-radius: 2rpx;
+  transition: background-color 0.2s ease;
+}
+.sky-select__btn-clear::before {
+  transform: rotate(45deg);
+}
+.sky-select__btn-clear::after {
+  transform: rotate(-45deg);
+}
+.sky-select__btn-clear:active::before, .sky-select__btn-clear:active::after {
+  background-color: #495057;
+}
+
+.sky-select__mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+}
+
+.sky-select__popup {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1001;
+  background-color: #ffffff;
+  border-top-left-radius: 32rpx;
+  border-top-right-radius: 32rpx;
+  box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);
+  padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.sky-select__popup-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 36rpx 40rpx;
+  border-bottom: 2rpx solid #f1f3f5;
+}
+
+.sky-select__popup-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #343a40;
+}
+
+.sky-select__popup-btn-close {
+  padding: 10rpx 20rpx;
+  border-radius: 12rpx;
+  transition: background-color 0.2s ease;
+}
+
+.sky-select__btn-active {
+  background-color: #f1f3f5;
+}
+
+.sky-select__popup-close-text {
+  font-size: 28rpx;
+  color: #495057;
+  font-weight: 500;
+}
+
+.sky-select__option-list {
+  max-height: 500rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.sky-select__option-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 36rpx 40rpx;
+  border-bottom: 2rpx solid #f8f9fa;
+  box-sizing: border-box;
+}
+
+.sky-select__option-item--active {
+  background-color: #f8f9fa;
+}
+
+.sky-select__option-text {
+  font-size: 28rpx;
+  color: #343a40;
+  transition: all 0.2s ease;
+}
+
+.sky-select__option-text--selected {
+  color: hsl(250, 85%, 55%);
+  font-weight: 700;
+}
+
+.sky-select__option-icon-checked {
+  width: 10rpx;
+  height: 20rpx;
+  border-right: 4rpx solid hsl(250, 85%, 55%);
+  border-bottom: 4rpx solid hsl(250, 85%, 55%);
+  transform: rotate(45deg);
+  margin-right: 12rpx;
+  margin-bottom: 6rpx;
+}

package/miniprogram_dist/popup-select/index.wxss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["popup-select/index.scss","common/style/theme.scss","common/style/mixins.scss"],"names":[],"mappings":"AAGA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCwBgB;EDvBhB;EACA,eC0CqB;EDzCrB;;;AAGF;EACE,kBCkBiB;EDjBjB,cCmBiB;EDlBjB;;;AAGF;EACE;EACA,OCmBiB;EChBjB;EACA;EACA;EFHA;;;AAGF;EACE,OCSiB;;;ADNnB;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBC3Be;ED4Bf;EACA;;AAEF;EACE;;AAEF;EACE;;AAIA;EACE,kBCtCa;;;AD4CnB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA,kBCpEgB;EDqEhB;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA,OClFiB;;;ADqFnB;EACE;EACA;EACA;;;AAGF;EACE,kBClGiB;;;ADqGnB;EACE;EACA,OClGiB;EDmGjB;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE,kBC7HiB;;;ADgInB;EACE;EACA,OC3HiB;ED4HjB;;;AAGF;EACE,OC3KkB;ED4KlB;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"index.wxss","sourcesContent":["@use \"../common/style/theme.scss\" as *;\n@use \"../common/style/mixins.scss\" as *;\n\n.sky-popup-select {\n  width: 100%;\n}\n\n.sky-select__trigger {\n  width: 100%;\n}\n\n.sky-select__input {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  width: 100%;\n  height: 88rpx;\n  padding: 0 32rpx;\n  background-color: $sky-color-white;\n  border: 2rpx solid $sky-color-gray-3;\n  border-radius: $sky-border-radius-md;\n  transition: all 0.2s ease;\n}\n\n.sky-select__input--disabled {\n  background-color: $sky-color-gray-1;\n  border-color: $sky-color-gray-3;\n  opacity: 0.6;\n}\n\n.sky-select__value {\n  font-size: 28rpx;\n  color: $sky-color-gray-9;\n  @include text-ellipsis;\n  flex: 1;\n}\n\n.sky-select__value--placeholder {\n  color: $sky-color-gray-5;\n}\n\n.sky-select__icon-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48rpx;\n  height: 48rpx;\n  margin-left: 16rpx;\n}\n\n// 纯 CSS 下拉灰色箭头\n.sky-select__arrow {\n  width: 12rpx;\n  height: 12rpx;\n  border-right: 4rpx solid $sky-color-gray-5;\n  border-bottom: 4rpx solid $sky-color-gray-5;\n  transform: rotate(45deg);\n  margin-bottom: 4rpx;\n}\n\n// 纯 CSS 简洁 X 形状清空按钮\n.sky-select__btn-clear {\n  position: relative;\n  width: 32rpx;\n  height: 32rpx;\n  background-color: transparent;\n  \n  &::before, &::after {\n    content: \"\";\n    position: absolute;\n    top: 14rpx;\n    left: 8rpx;\n    width: 16rpx;\n    height: 4rpx;\n    background-color: $sky-color-gray-5;\n    border-radius: 2rpx;\n    transition: background-color 0.2s ease;\n  }\n  &::before {\n    transform: rotate(45deg);\n  }\n  &::after {\n    transform: rotate(-45deg);\n  }\n\n  &:active {\n    &::before, &::after {\n      background-color: $sky-color-gray-7;\n    }\n  }\n}\n\n// 遮罩层\n.sky-select__mask {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.4);\n  z-index: 1000;\n}\n\n// 底部滑出抽屉卡片\n.sky-select__popup {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  z-index: 1001;\n  background-color: $sky-color-white;\n  border-top-left-radius: 32rpx;\n  border-top-right-radius: 32rpx;\n  box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);\n  padding-bottom: env(safe-area-inset-bottom);\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n\n.sky-select__popup-header {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 36rpx 40rpx;\n  border-bottom: 2rpx solid $sky-color-gray-2;\n}\n\n.sky-select__popup-title {\n  font-size: 32rpx;\n  font-weight: 700;\n  color: $sky-color-gray-8;\n}\n\n.sky-select__popup-btn-close {\n  padding: 10rpx 20rpx;\n  border-radius: 12rpx;\n  transition: background-color 0.2s ease;\n}\n\n.sky-select__btn-active {\n  background-color: $sky-color-gray-2;\n}\n\n.sky-select__popup-close-text {\n  font-size: 28rpx;\n  color: $sky-color-gray-7;\n  font-weight: 500;\n}\n\n.sky-select__option-list {\n  max-height: 500rpx;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.sky-select__option-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 36rpx 40rpx;\n  border-bottom: 2rpx solid $sky-color-gray-1;\n  box-sizing: border-box;\n}\n\n.sky-select__option-item--active {\n  background-color: $sky-color-gray-1;\n}\n\n.sky-select__option-text {\n  font-size: 28rpx;\n  color: $sky-color-gray-8;\n  transition: all 0.2s ease;\n}\n\n.sky-select__option-text--selected {\n  color: $sky-color-primary;\n  font-weight: 700;\n}\n\n// 纯 CSS 耀眼品牌色对勾\n.sky-select__option-icon-checked {\n  width: 10rpx;\n  height: 20rpx;\n  border-right: 4rpx solid $sky-color-primary;\n  border-bottom: 4rpx solid $sky-color-primary;\n  transform: rotate(45deg);\n  margin-right: 12rpx;\n  margin-bottom: 6rpx;\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","// ==========================================\r\n// Skyline-UI Flex 布局与样式混合宏 (SCSS)\r\n// ==========================================\r\n\r\n@mixin flex-row {\r\n  display: flex;\r\n  flex-direction: row;\r\n}\r\n\r\n@mixin flex-column {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n@mixin flex-center {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n@mixin flex-align-center {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n}\r\n\r\n@mixin absolute-full {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n// 文本溢出隐藏 (在微信小程序 Flex 布局下，通常需要在容器上设置 overflow 和 flex)\r\n@mixin text-ellipsis {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n// 多行文本溢出隐藏\r\n@mixin text-ellipsis-multiline($lines: 2) {\r\n  display: -webkit-box;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-line-clamp: $lines;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n// 安全区域底部适配\r\n@mixin safe-area-bottom {\r\n  padding-bottom: constant(safe-area-inset-bottom);\r\n  padding-bottom: env(safe-area-inset-bottom);\r\n}\r\n\r\n// 1px 高清屏边框 (使用 transform 缩放方案)\r\n@mixin hairline-border($color: $sky-color-gray-3, $radius: 0) {\r\n  position: relative;\r\n  &::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 200%;\r\n    height: 200%;\r\n    border: 1px solid $color;\r\n    border-radius: $radius * 2;\r\n    transform: scale(0.5);\r\n    transform-origin: 0 0;\r\n    box-sizing: border-box;\r\n    pointer-events: none;\r\n  }\r\n}\r\n\r\n// 禁用态通用样式\r\n@mixin disabled-state {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n// 按钮重置\r\n@mixin button-reset {\r\n  border: none;\r\n  outline: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  background: none;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n"]}

package/miniprogram_dist/progress/index.js

@@ -0,0 +1,120 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: true // 开启虚拟节点降低 Skyline DOM 层级嵌套
+    },
+    properties: {
+        // 进度百分比，限制在 0 - 100 之间
+        percentage: {
+            type: Number,
+            value: 0
+        },
+        // 进度条粗细，默认 12rpx
+        strokeWidth: {
+            type: String,
+            value: '12rpx'
+        },
+        // 进度条主题色：primary, success, warning, danger, info
+        type: {
+            type: String,
+            value: 'primary'
+        },
+        // 是否置灰 (置灰时静默一切彩光与动画)
+        inactive: {
+            type: Boolean,
+            value: false
+        },
+        // 是否显示内嵌进度文字
+        showPivot: {
+            type: Boolean,
+            value: false
+        },
+        // 自定义进度条颜色 (支持 linear-gradient 渐变色)
+        color: {
+            type: String,
+            value: ''
+        },
+        // 内嵌百分比文字自定义颜色
+        textColor: {
+            type: String,
+            value: ''
+        },
+        // 轨道未点亮背景色
+        inactiveColor: {
+            type: String,
+            value: '#f1f3f5'
+        },
+        // 附加自定义样式
+        customStyle: {
+            type: String,
+            value: ''
+        },
+        // 是否显示斜向斑马条纹
+        striped: {
+            type: Boolean,
+            value: false
+        },
+        // 条纹是否伴随流动加载动画
+        animated: {
+            type: Boolean,
+            value: false
+        }
+    },
+    data: {
+        barStyle: '', // 动态点亮条行内样式
+        displayPercentage: 0, // 实际用于渲染宽度的值（入场动画从 0 开始）
+        _progressMounted: false, // 入场动画是否已完成
+        _timer: 0 // 入场动画定时器 ID
+    },
+    observers: {
+        'percentage': function (val) {
+            const clamped = Math.max(0, Math.min(100, val));
+            if (clamped !== val) {
+                this.setData({ percentage: clamped });
+            }
+            // 外部动态更新时同步展示值（非首次 attached，已有入场动画）
+            if (this.data._progressMounted) {
+                this.setData({ displayPercentage: clamped });
+            }
+        },
+        'color': function () {
+            this.recalculateBarStyle();
+        }
+    },
+    lifetimes: {
+        detached() {
+            if (this.data._timer) {
+                clearTimeout(this.data._timer);
+            }
+        },
+        attached() {
+            const clamped = Math.max(0, Math.min(100, this.data.percentage));
+            // 先将展示值设为 0，让轨道以 0 宽度渲染
+            this.setData({ displayPercentage: 0 });
+            this.recalculateBarStyle();
+            // 延迟一帧后驱动 CSS transition 从 0 → 目标值，实现左→右入场动画
+            const timer = setTimeout(() => {
+                this.setData({ displayPercentage: clamped, _progressMounted: true });
+            }, 80);
+            this.setData({ _timer: timer });
+        }
+    },
+    methods: {
+        // 智能计算点亮条的渐变或自定义色样式
+        recalculateBarStyle() {
+            const { color } = this.data;
+            const styleArr = [];
+            if (color) {
+                // 支持背景色直接赋值自定义颜色或 linear-gradient
+                styleArr.push(`background: ${color} !important;`);
+                // 边框也同步成底色以防溢出或粗边
+                styleArr.push(`border-color: transparent !important;`);
+            }
+            this.setData({
+                barStyle: styleArr.join(' ')
+            });
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/miniprogram_dist/progress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/progress/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    // 进度百分比，限制在 0 - 100 之间\r\n    percentage: {\r\n      type: Number,\r\n      value: 0\r\n    },\r\n    // 进度条粗细，默认 12rpx\r\n    strokeWidth: {\r\n      type: String,\r\n      value: '12rpx'\r\n    },\r\n    // 进度条主题色：primary, success, warning, danger, info\r\n    type: {\r\n      type: String,\r\n      value: 'primary'\r\n    },\r\n    // 是否置灰 (置灰时静默一切彩光与动画)\r\n    inactive: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 是否显示内嵌进度文字\r\n    showPivot: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 自定义进度条颜色 (支持 linear-gradient 渐变色)\r\n    color: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 内嵌百分比文字自定义颜色\r\n    textColor: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 轨道未点亮背景色\r\n    inactiveColor: {\r\n      type: String,\r\n      value: '#f1f3f5'\r\n    },\r\n    // 附加自定义样式\r\n    customStyle: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 是否显示斜向斑马条纹\r\n    striped: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 条纹是否伴随流动加载动画\r\n    animated: {\r\n      type: Boolean,\r\n      value: false\r\n    }\r\n  },\r\n\r\n  data: {\r\n    barStyle: '',          // 动态点亮条行内样式\r\n    displayPercentage: 0,  // 实际用于渲染宽度的值（入场动画从 0 开始）\r\n    _progressMounted: false, // 入场动画是否已完成\r\n    _timer: 0                // 入场动画定时器 ID\r\n  },\r\n\r\n  observers: {\r\n    'percentage': function(val: number) {\r\n      const clamped = Math.max(0, Math.min(100, val));\r\n      if (clamped !== val) {\r\n        this.setData({ percentage: clamped });\r\n      }\r\n      // 外部动态更新时同步展示值（非首次 attached，已有入场动画）\r\n      if (this.data._progressMounted) {\r\n        this.setData({ displayPercentage: clamped });\r\n      }\r\n    },\r\n    'color': function() {\r\n      this.recalculateBarStyle();\r\n    }\r\n  },\r\n\r\n  lifetimes: {\r\n    detached() {\r\n      if (this.data._timer) {\r\n        clearTimeout(this.data._timer);\r\n      }\r\n    },\r\n    attached() {\r\n      const clamped = Math.max(0, Math.min(100, this.data.percentage));\r\n      // 先将展示值设为 0，让轨道以 0 宽度渲染\r\n      this.setData({ displayPercentage: 0 });\r\n      this.recalculateBarStyle();\r\n      // 延迟一帧后驱动 CSS transition 从 0 → 目标值，实现左→右入场动画\r\n      const timer = setTimeout(() => {\r\n        this.setData({ displayPercentage: clamped, _progressMounted: true });\r\n      }, 80);\r\n      this.setData({ _timer: timer });\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    // 智能计算点亮条的渐变或自定义色样式\r\n    recalculateBarStyle() {\r\n      const { color } = this.data;\r\n      const styleArr: string[] = [];\r\n\r\n      if (color) {\r\n        // 支持背景色直接赋值自定义颜色或 linear-gradient\r\n        styleArr.push(`background: ${color} !important;`);\r\n        // 边框也同步成底色以防溢出或粗边\r\n        styleArr.push(`border-color: transparent !important;`);\r\n      }\r\n\r\n      this.setData({\r\n        barStyle: styleArr.join(' ')\r\n      });\r\n    }\r\n  }\r\n});\r\n"]}

package/miniprogram_dist/progress/index.json

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