wx-sky-ui 1.0.0

package/miniprogram_dist/progress/index.wxml

@@ -0,0 +1,31 @@
+<view class="sky-progress" style="{{ customStyle }}">
+  <!-- 进度条轨道容器 -->
+  <view 
+    class="sky-progress__track {{ inactive ? 'sky-progress__track--inactive' : '' }}"
+    style="height: {{ strokeWidth }}; background-color: {{ inactiveColor }};"
+  >
+    <!-- 已激活的进度条 -->
+    <view 
+      class="sky-progress__bar {{ type ? 'sky-progress__bar--' + type : '' }} {{ inactive ? 'sky-progress__bar--inactive' : '' }}"
+      style="width: {{ displayPercentage }}%; {{ barStyle }}"
+    >
+      <!-- 斜向条纹流动加载层 -->
+      <view wx:if="{{ striped && !inactive }}" class="sky-progress__stripes {{ animated ? 'sky-progress__stripes--animated' : '' }}"></view>
+
+      <!-- 高阶液体流光效果层 -->
+      <view wx:if="{{ !inactive && !striped }}" class="sky-progress__bar-glow"></view>
+
+      <!-- 呼吸流星发光端头 -->
+      <view wx:if="{{ !inactive && percentage > 0 }}" class="sky-progress__meteor-glow"></view>
+
+      <!-- 内嵌百分比字样 (Pivot) -->
+      <view 
+      wx:if="{{ showPivot && displayPercentage >= 8 }}" 
+        class="sky-progress__pivot"
+        style="color: {{ textColor }}"
+      >
+        <text class="sky-progress__pivot-text">{{ percentage }}%</text>
+      </view>
+    </view>
+  </view>
+</view>

package/miniprogram_dist/progress/index.wxss

@@ -0,0 +1,163 @@
+@charset "UTF-8";
+/* ========================================== */
+/* Skyline-UI Progress 进度条组件样式 (Sass)   */
+/* ========================================== */
+.sky-progress {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  /* 轨道基础背景 */
+}
+.sky-progress .sky-progress__track {
+  position: relative;
+  width: 100%;
+  border-radius: 999rpx;
+  background-color: #f1f3f5; /* 默认轻灰底轨 */
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.sky-progress {
+  /* 轨道置灰静默 */
+}
+.sky-progress .sky-progress__track--inactive {
+  background-color: #e9ecef !important;
+}
+.sky-progress {
+  /* 点亮段进度条 */
+}
+.sky-progress .sky-progress__bar {
+  position: relative;
+  height: 100%;
+  border-radius: 999rpx;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  /* 采用工效学平滑液体缓动曲线，让数值变化温润流畅 */
+  transition: width 350ms cubic-bezier(0.25, 1, 0.5, 1);
+  /* ==================== 1. 莫兰迪高规格渐变色变体 ==================== */
+}
+.sky-progress .sky-progress__bar--primary {
+  background: linear-gradient(90deg, #5c7cfa 0%, #3b5bdb 100%);
+}
+.sky-progress .sky-progress__bar--success {
+  background: linear-gradient(90deg, #51cf66 0%, #2b8a3e 100%);
+}
+.sky-progress .sky-progress__bar--warning {
+  background: linear-gradient(90deg, #ffd43b 0%, #f08c00 100%);
+}
+.sky-progress .sky-progress__bar--danger {
+  background: linear-gradient(90deg, #ff8787 0%, #fa5252 100%);
+}
+.sky-progress .sky-progress__bar--info {
+  background: linear-gradient(90deg, #4dabf7 0%, #1c7ed6 100%);
+}
+.sky-progress .sky-progress__bar {
+  /* 置灰静默状态 */
+}
+.sky-progress .sky-progress__bar--inactive {
+  background: #dee2e6 !important;
+}
+.sky-progress {
+  /* ==================== 2. 高阶液体流光效果层 ==================== */
+}
+.sky-progress .sky-progress__bar-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
+  background-size: 200% 100%;
+  border-radius: 999rpx;
+  /* 2.5s 周期舒缓流光动画，呈现极佳的高阶拟物光环 */
+  animation: sky-progress-glow-anim 2.5s linear infinite;
+}
+.sky-progress {
+  /* ==================== 3. 内嵌百分比文字 (Pivot) ==================== */
+}
+.sky-progress .sky-progress__pivot {
+  position: relative;
+  padding-right: 12rpx;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+  box-sizing: border-box;
+  z-index: 1; /* 保证文字置于扫光层上方 */
+}
+.sky-progress .sky-progress__pivot-text {
+  font-size: 18rpx;
+  font-weight: 700;
+  color: #ffffff;
+  line-height: 1;
+}
+.sky-progress {
+  /* ==================== 5. 斜向斑马条纹加载层 ==================== */
+}
+.sky-progress .sky-progress__stripes {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-size: 40rpx 40rpx;
+  border-radius: 999rpx;
+}
+.sky-progress .sky-progress__stripes--animated {
+  animation: sky-progress-stripes-anim 1.2s linear infinite;
+}
+.sky-progress {
+  /* ==================== 6. 呼吸流星发光端头 ==================== */
+}
+.sky-progress .sky-progress__meteor-glow {
+  position: absolute;
+  top: 50%;
+  right: -4rpx;
+  transform: translateY(-50%);
+  width: 14rpx;
+  height: 14rpx;
+  border-radius: 50%;
+  background-color: #ffffff;
+  box-shadow: 0 0 10rpx #ffffff, 0 0 18rpx currentColor;
+  animation: sky-progress-pulse-anim 1.2s ease-in-out infinite alternate;
+  z-index: 2;
+}
+
+/* ==================== 4. 舒缓流光平移关键帧 ==================== */
+@keyframes sky-progress-glow-anim {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+/* ==================== 5. 斑马条纹流动加载关键帧 ==================== */
+@keyframes sky-progress-stripes-anim {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 40rpx 0;
+  }
+}
+/* ==================== 6. 端头粒子呼吸闪烁关键帧 ==================== */
+@keyframes sky-progress-pulse-anim {
+  0% {
+    transform: translateY(-50%) scale(0.85);
+    opacity: 0.7;
+    box-shadow: 0 0 8rpx #ffffff, 0 0 12rpx currentColor;
+  }
+  100% {
+    transform: translateY(-50%) scale(1.2);
+    opacity: 1;
+    box-shadow: 0 0 16rpx #ffffff, 0 0 24rpx currentColor;
+  }
+}

package/miniprogram_dist/progress/index.wxss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["progress/index.scss","common/style/theme.scss"],"names":[],"mappings":";AAGA;AACA;AACA;AAEA;EACE;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA,kBC6Be,SD7BsB;EACrC;EACA;EACA;EACA;EACA;;AAfJ;AAkBE;;AACA;EACE;;AApBJ;AAuBE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AAEA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAhCJ;AAmCE;;AACA;EACE;;AA7DN;AAiEE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EAMA;EACA;AAEA;EACA;;AAlFJ;AAqFE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,OChEc;EDiEd;;AAtGJ;AAyGE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EAUA;EACA;;AAGF;EACE;;AA/HJ;AAkIE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCtGc;EDuGd;EACA;EACA;;;AAIJ;AACA;EACE;IACE;;EAEF;IACE;;;AAIJ;AACA;EACE;IACE;;EAEF;IACE;;;AAIJ;AACA;EACE;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA","file":"index.wxss","sourcesContent":["@use \"../common/style/theme.scss\" as *;\n@use \"../common/style/mixins.scss\" as *;\n\n/* ========================================== */\n/* Skyline-UI Progress 进度条组件样式 (Sass)   */\n/* ========================================== */\n\n.sky-progress {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n\n  /* 轨道基础背景 */\n  .sky-progress__track {\n    position: relative;\n    width: 100%;\n    border-radius: 999rpx;\n    background-color: $sky-color-gray-2; /* 默认轻灰底轨 */\n    overflow: hidden;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n\n  /* 轨道置灰静默 */\n  .sky-progress__track--inactive {\n    background-color: $sky-color-gray-3 !important;\n  }\n\n  /* 点亮段进度条 */\n  .sky-progress__bar {\n    position: relative;\n    height: 100%;\n    border-radius: 999rpx;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    \n    /* 采用工效学平滑液体缓动曲线，让数值变化温润流畅 */\n    transition: width 350ms cubic-bezier(0.25, 1, 0.5, 1);\n    \n    /* ==================== 1. 莫兰迪高规格渐变色变体 ==================== */\n    \n    &--primary {\n      background: linear-gradient(90deg, #5c7cfa 0%, #3b5bdb 100%);\n    }\n\n    &--success {\n      background: linear-gradient(90deg, #51cf66 0%, #2b8a3e 100%);\n    }\n\n    &--warning {\n      background: linear-gradient(90deg, #ffd43b 0%, #f08c00 100%);\n    }\n\n    &--danger {\n      background: linear-gradient(90deg, #ff8787 0%, #fa5252 100%);\n    }\n\n    &--info {\n      background: linear-gradient(90deg, #4dabf7 0%, #1c7ed6 100%);\n    }\n\n    /* 置灰静默状态 */\n    &--inactive {\n      background: $sky-color-gray-4 !important;\n    }\n  }\n\n  /* ==================== 2. 高阶液体流光效果层 ==================== */\n  .sky-progress__bar-glow {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-image: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 0.25) 50%,\n      rgba(255, 255, 255, 0) 100%\n    );\n    background-size: 200% 100%;\n    border-radius: 999rpx;\n    \n    /* 2.5s 周期舒缓流光动画，呈现极佳的高阶拟物光环 */\n    animation: sky-progress-glow-anim 2.5s linear infinite;\n  }\n\n  /* ==================== 3. 内嵌百分比文字 (Pivot) ==================== */\n  .sky-progress__pivot {\n    position: relative;\n    padding-right: 12rpx;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    white-space: nowrap;\n    box-sizing: border-box;\n    z-index: 1; /* 保证文字置于扫光层上方 */\n  }\n\n  .sky-progress__pivot-text {\n    font-size: 18rpx;\n    font-weight: 700;\n    color: $sky-color-white;\n    line-height: 1;\n  }\n\n  /* ==================== 5. 斜向斑马条纹加载层 ==================== */\n  .sky-progress__stripes {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-image: linear-gradient(\n      45deg,\n      rgba(255, 255, 255, 0.15) 25%,\n      transparent 25%,\n      transparent 50%,\n      rgba(255, 255, 255, 0.15) 50%,\n      rgba(255, 255, 255, 0.15) 75%,\n      transparent 75%,\n      transparent\n    );\n    background-size: 40rpx 40rpx;\n    border-radius: 999rpx;\n  }\n\n  .sky-progress__stripes--animated {\n    animation: sky-progress-stripes-anim 1.2s linear infinite;\n  }\n\n  /* ==================== 6. 呼吸流星发光端头 ==================== */\n  .sky-progress__meteor-glow {\n    position: absolute;\n    top: 50%;\n    right: -4rpx;\n    transform: translateY(-50%);\n    width: 14rpx;\n    height: 14rpx;\n    border-radius: 50%;\n    background-color: $sky-color-white;\n    box-shadow: 0 0 10rpx $sky-color-white, 0 0 18rpx currentColor;\n    animation: sky-progress-pulse-anim 1.2s ease-in-out infinite alternate;\n    z-index: 2;\n  }\n}\n\n/* ==================== 4. 舒缓流光平移关键帧 ==================== */\n@keyframes sky-progress-glow-anim {\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -100% 0;\n  }\n}\n\n/* ==================== 5. 斑马条纹流动加载关键帧 ==================== */\n@keyframes sky-progress-stripes-anim {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: 40rpx 0;\n  }\n}\n\n/* ==================== 6. 端头粒子呼吸闪烁关键帧 ==================== */\n@keyframes sky-progress-pulse-anim {\n  0% {\n    transform: translateY(-50%) scale(0.85);\n    opacity: 0.7;\n    box-shadow: 0 0 8rpx $sky-color-white, 0 0 12rpx currentColor;\n  }\n  100% {\n    transform: translateY(-50%) scale(1.2);\n    opacity: 1;\n    box-shadow: 0 0 16rpx $sky-color-white, 0 0 24rpx currentColor;\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/radio/index.js

@@ -0,0 +1,52 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: true // 开启虚拟节点以减少 Skyline 节点层级
+    },
+    properties: {
+        // 是否被选中
+        checked: {
+            type: Boolean,
+            value: false
+        },
+        // 是否禁用
+        disabled: {
+            type: Boolean,
+            value: false
+        },
+        // 该选项代表的值 (支持任意数据类型)
+        value: {
+            type: null,
+            value: ''
+        },
+        // 显示的主文本
+        label: {
+            type: String,
+            value: ''
+        },
+        // 主题变体：primary, success, warning, danger, info
+        type: {
+            type: String,
+            value: 'primary'
+        },
+        // 附加样式
+        customStyle: {
+            type: String,
+            value: ''
+        }
+    },
+    methods: {
+        onTap() {
+            if (this.data.disabled) {
+                return;
+            }
+            // 单选框最常规也最符合直觉的逻辑：一旦被选中，再次点击自身不应反选
+            if (this.data.checked) {
+                return;
+            }
+            this.triggerEvent('change', this.data.value);
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/miniprogram_dist/radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radio/index.ts"],"names":[],"mappings":";AAAA,SAAS,CAAC;IACR,OAAO,EAAE;QACP,WAAW,EAAE,IAAI,CAAC,yBAAyB;KAC5C;IAED,UAAU,EAAE;QACV,QAAQ;QACR,OAAO,EAAE;YACP,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,KAAK;SACb;QACD,OAAO;QACP,QAAQ,EAAE;YACR,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,KAAK;SACb;QACD,qBAAqB;QACrB,KAAK,EAAE;YACL,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,EAAE;SACV;QACD,SAAS;QACT,KAAK,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE;SACV;QACD,+CAA+C;QAC/C,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,SAAS;SACjB;QACD,OAAO;QACP,WAAW,EAAE;YACX,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE;SACV;KACF;IAED,OAAO,EAAE;QACP,KAAK;YACH,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,mCAAmC;YACnC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACtB,OAAO;YACT,CAAC;YACD,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/C,CAAC;KACF;CACF,CAAC,CAAC","file":"index.js","sourcesContent":["Component({\r\n  options: {\r\n    virtualHost: true // 开启虚拟节点以减少 Skyline 节点层级\r\n  },\r\n\r\n  properties: {\r\n    // 是否被选中\r\n    checked: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 是否禁用\r\n    disabled: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 该选项代表的值 (支持任意数据类型)\r\n    value: {\r\n      type: null,\r\n      value: ''\r\n    },\r\n    // 显示的主文本\r\n    label: {\r\n      type: String,\r\n      value: ''\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    customStyle: {\r\n      type: String,\r\n      value: ''\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    onTap() {\r\n      if (this.data.disabled) {\r\n        return;\r\n      }\r\n      // 单选框最常规也最符合直觉的逻辑：一旦被选中，再次点击自身不应反选\r\n      if (this.data.checked) {\r\n        return;\r\n      }\r\n      this.triggerEvent('change', this.data.value);\r\n    }\r\n  }\r\n});\r\n"]}

package/miniprogram_dist/radio/index.json

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

package/miniprogram_dist/radio/index.wxml

@@ -0,0 +1,16 @@
+<view 
+  class="sky-radio {{ checked ? 'sky-radio--checked' : '' }} {{ disabled ? 'sky-radio--disabled' : '' }} sky-radio--{{ type }}"
+  style="{{ customStyle }}"
+  bindtap="onTap"
+>
+  <!-- 单选标记圆圈 -->
+  <view class="sky-radio__icon-wrap">
+    <view class="sky-radio__icon-dot"></view>
+  </view>
+
+  <!-- 选项文字 -->
+  <view class="sky-radio__label">
+    <text wx:if="{{ label }}">{{ label }}</text>
+    <slot wx:else></slot>
+  </view>
+</view>

package/miniprogram_dist/radio/index.wxss

@@ -0,0 +1,62 @@
+.sky-radio {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.sky-radio__icon-wrap {
+  box-sizing: border-box;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 9999rpx;
+  margin-right: 16rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: 3rpx solid #dee2e6;
+  background-color: #ffffff;
+  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.sky-radio__icon-dot {
+  width: 18rpx;
+  height: 18rpx;
+  border-radius: 9999rpx;
+  background-color: #ffffff;
+  transform: scale(0);
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.sky-radio__label {
+  font-size: 28rpx;
+  color: #343a40;
+  line-height: 1.4;
+}
+.sky-radio--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.sky-radio--checked .sky-radio__icon-dot {
+  transform: scale(1);
+}
+.sky-radio--checked.sky-radio--primary .sky-radio__icon-wrap {
+  background-color: hsl(250, 85%, 55%);
+  border-color: hsl(250, 85%, 55%);
+}
+.sky-radio--checked.sky-radio--success .sky-radio__icon-wrap {
+  background-color: hsl(150, 80%, 40%);
+  border-color: hsl(150, 80%, 40%);
+}
+.sky-radio--checked.sky-radio--warning .sky-radio__icon-wrap {
+  background-color: hsl(35, 90%, 50%);
+  border-color: hsl(35, 90%, 50%);
+}
+.sky-radio--checked.sky-radio--danger .sky-radio__icon-wrap {
+  background-color: hsl(355, 85%, 55%);
+  border-color: hsl(355, 85%, 55%);
+}
+.sky-radio--checked.sky-radio--info .sky-radio__icon-wrap {
+  background-color: hsl(200, 85%, 50%);
+  border-color: hsl(200, 85%, 50%);
+}

package/miniprogram_dist/radio/index.wxss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["radio/index.scss","common/style/theme.scss","common/style/mixins.scss"],"names":[],"mappings":"AAOA;EACE;EACA;EACA;EACA;EAGA;EACA;;AAGA;EACE;EACA;EACA;EACA,eC4CsB;ED3CtB;EERF;EACA;EACA;EACA;EFWE;EACA,kBCcc;EDZd;;AAKF;EACE;EACA;EACA,eC0BsB;EDzBtB,kBCGc;EDAd;EACA;;AAIF;EACE;EACA,OCCe;EDAf;;AAIF;EACE;EACA;;AAMA;EACE;;AAKF;EACE,kBC9Dc;ED+Dd,cC/Dc;;ADoEhB;EACE,kBC/Dc;EDgEd,cChEc;;ADqEhB;EACE,kBClEc;EDmEd,cCnEc;;ADwEhB;EACE,kBCrEa;EDsEb,cCtEa;;AD2Ef;EACE,kBCxEW;EDyEX,cCzEW","file":"index.wxss","sourcesContent":["@use \"../common/style/theme.scss\" as *;\n@use \"../common/style/mixins.scss\" as *;\n\n// ==========================================\n// Skyline-UI Radio 单选组件样式 (Sass)\n// ==========================================\n\n.sky-radio {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n  \n  // 极致的高级防直角打磨细节\n  outline: none;\n  -webkit-tap-highlight-color: transparent; // 彻底消除移动端点击时默认的半透明直角高亮框\n  \n  // ==================== 1. 外围圆框 ====================\n  &__icon-wrap {\n    box-sizing: border-box;\n    width: 40rpx;\n    height: 40rpx;\n    border-radius: $sky-border-radius-round;\n    margin-right: 16rpx;\n    \n    // 弹性 Flex 居中白点\n    @include flex-center;\n    \n    // 默认中性浅灰边框\n    border: 3rpx solid $sky-color-gray-4;\n    background-color: $sky-color-white;\n    \n    transition: background-color $sky-transition-duration $sky-transition-timing,\n                border-color $sky-transition-duration $sky-transition-timing;\n  }\n\n  // ==================== 2. 内部白点 ====================\n  &__icon-dot {\n    width: 18rpx;\n    height: 18rpx;\n    border-radius: $sky-border-radius-round;\n    background-color: $sky-color-white;\n    \n    // 默认缩为零点，实现 scale 充盈动效\n    transform: scale(0);\n    transition: transform $sky-transition-duration $sky-transition-timing;\n  }\n\n  // ==================== 3. 选项文字 ====================\n  &__label {\n    font-size: 28rpx;\n    color: $sky-color-gray-8;\n    line-height: 1.4;\n  }\n\n  // ==================== 4. 禁用态 ====================\n  &--disabled {\n    opacity: 0.5;\n    pointer-events: none; // 彻底失效\n  }\n\n  // ==================== 5. 选中状态与 HSL 主题色 ====================\n  \n  &--checked {\n    .sky-radio__icon-dot {\n      transform: scale(1); // 白点充盈放大\n    }\n  }\n\n  &--checked.sky-radio--primary {\n    .sky-radio__icon-wrap {\n      background-color: $sky-color-primary;\n      border-color: $sky-color-primary;\n    }\n  }\n\n  &--checked.sky-radio--success {\n    .sky-radio__icon-wrap {\n      background-color: $sky-color-success;\n      border-color: $sky-color-success;\n    }\n  }\n\n  &--checked.sky-radio--warning {\n    .sky-radio__icon-wrap {\n      background-color: $sky-color-warning;\n      border-color: $sky-color-warning;\n    }\n  }\n\n  &--checked.sky-radio--danger {\n    .sky-radio__icon-wrap {\n      background-color: $sky-color-danger;\n      border-color: $sky-color-danger;\n    }\n  }\n\n  &--checked.sky-radio--info {\n    .sky-radio__icon-wrap {\n      background-color: $sky-color-info;\n      border-color: $sky-color-info;\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","// ==========================================\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/rate/index.js

@@ -0,0 +1,128 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: true // 开启虚拟节点降低 Skyline DOM 层级嵌套
+    },
+    properties: {
+        // 当前评分值 (支持受控双向绑定)
+        value: {
+            type: Number,
+            value: 0
+        },
+        // 星星总个数
+        count: {
+            type: Number,
+            value: 5
+        },
+        // 星星尺寸大小 (rpx)
+        size: {
+            type: Number,
+            value: 44
+        },
+        // 未选中时星星底色
+        color: {
+            type: String,
+            value: ''
+        },
+        // 选中点亮时星星主题色 (默认优雅金黄)
+        activeColor: {
+            type: String,
+            value: ''
+        },
+        // 是否允许半星选择
+        allowHalf: {
+            type: Boolean,
+            value: false
+        },
+        // 是否只读禁用
+        disabled: {
+            type: Boolean,
+            value: false
+        },
+        // 星星之间的间距 (rpx)
+        gutter: {
+            type: Number,
+            value: 14
+        },
+        // 附加自定义样式
+        customStyle: {
+            type: String,
+            value: ''
+        }
+    },
+    data: {
+        countList: [], // 星星循环迭代数组
+        activeWidths: [], // 每个星星高亮裁剪比率百分比 (0 - 100)
+        itemState: [] // 控制每个星星是否处于激活态 (用以触发 css 微按压反馈)
+    },
+    observers: {
+        'value, count': function () {
+            this.recalculateStars(this.data.value, this.data.count);
+        }
+    },
+    lifetimes: {
+        attached() {
+            this.recalculateStars(this.data.value, this.data.count);
+        }
+    },
+    methods: {
+        // 根据当前分值与星星数量重新计算渲染层数据
+        recalculateStars(val, count) {
+            // 1. 生成星星迭代循环数组
+            const countList = Array.from({ length: count }, (_, i) => i);
+            const activeWidths = [];
+            const itemState = [];
+            for (let i = 0; i < count; i++) {
+                const starIndex = i + 1;
+                // 2. 根据当前数值裁剪高亮宽度百分比 (支持任意高精度浮点裁剪)
+                if (val >= starIndex) {
+                    activeWidths.push(100);
+                    itemState.push(true);
+                }
+                else if (val <= i) {
+                    activeWidths.push(0);
+                    itemState.push(false);
+                }
+                else {
+                    // 在当前星与上一颗星之间，折算精确百分比
+                    const remain = val - i;
+                    activeWidths.push(parseFloat((remain * 100).toFixed(1)));
+                    itemState.push(remain >= 0.5); // 如果过半，认为其处于激活微缩放动效态
+                }
+            }
+            this.setData({
+                countList,
+                activeWidths,
+                itemState
+            });
+        },
+        // 精准星星点击位置折算
+        onRateTap(e) {
+            if (this.data.disabled)
+                return;
+            const score = e.currentTarget.dataset.score;
+            const tapX = e.detail.x;
+            const query = this.createSelectorQuery();
+            query.selectAll('.sky-rate__item').boundingClientRect((rects) => {
+                if (Array.isArray(rects) && rects[score - 1]) {
+                    const rect = rects[score - 1];
+                    const starWidth = rect.width;
+                    const starLeft = rect.left;
+                    // 计算触摸点击在此颗星星内部的相对偏移量
+                    const relativeX = tapX - starLeft;
+                    let finalValue = score;
+                    // 若支持半星选择，按 50% 轴距进行归整折算
+                    if (this.data.allowHalf) {
+                        if (relativeX < starWidth / 2) {
+                            finalValue = score - 0.5;
+                        }
+                    }
+                    // 触发双向变化事件
+                    this.triggerEvent('change', { value: finalValue });
+                }
+            }).exec();
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/miniprogram_dist/rate/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/rate/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    },\r\n    // 星星总个数\r\n    count: {\r\n      type: Number,\r\n      value: 5\r\n    },\r\n    // 星星尺寸大小 (rpx)\r\n    size: {\r\n      type: Number,\r\n      value: 44\r\n    },\r\n    // 未选中时星星底色\r\n    color: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 选中点亮时星星主题色 (默认优雅金黄)\r\n    activeColor: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 是否允许半星选择\r\n    allowHalf: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 是否只读禁用\r\n    disabled: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 星星之间的间距 (rpx)\r\n    gutter: {\r\n      type: Number,\r\n      value: 14\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    countList: [] as number[],      // 星星循环迭代数组\r\n    activeWidths: [] as number[],   // 每个星星高亮裁剪比率百分比 (0 - 100)\r\n    itemState: [] as boolean[]      // 控制每个星星是否处于激活态 (用以触发 css 微按压反馈)\r\n  },\r\n\r\n  observers: {\r\n    'value, count': function() {\r\n      this.recalculateStars(this.data.value, this.data.count);\r\n    }\r\n  },\r\n\r\n  lifetimes: {\r\n    attached() {\r\n      this.recalculateStars(this.data.value, this.data.count);\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    // 根据当前分值与星星数量重新计算渲染层数据\r\n    recalculateStars(val: number, count: number) {\r\n      // 1. 生成星星迭代循环数组\r\n      const countList = Array.from({ length: count }, (_, i) => i);\r\n      \r\n      const activeWidths: number[] = [];\r\n      const itemState: boolean[] = [];\r\n\r\n      for (let i = 0; i < count; i++) {\r\n        const starIndex = i + 1;\r\n        \r\n        // 2. 根据当前数值裁剪高亮宽度百分比 (支持任意高精度浮点裁剪)\r\n        if (val >= starIndex) {\r\n          activeWidths.push(100);\r\n          itemState.push(true);\r\n        } else if (val <= i) {\r\n          activeWidths.push(0);\r\n          itemState.push(false);\r\n        } else {\r\n          // 在当前星与上一颗星之间，折算精确百分比\r\n          const remain = val - i;\r\n          activeWidths.push(parseFloat((remain * 100).toFixed(1)));\r\n          itemState.push(remain >= 0.5); // 如果过半，认为其处于激活微缩放动效态\r\n        }\r\n      }\r\n\r\n      this.setData({\r\n        countList,\r\n        activeWidths,\r\n        itemState\r\n      });\r\n    },\r\n\r\n    // 精准星星点击位置折算\r\n    onRateTap(e: WechatMiniprogram.BaseEvent & { detail: { x: number } }) {\r\n      if (this.data.disabled) return;\r\n\r\n      const score = e.currentTarget.dataset.score;\r\n      const tapX = e.detail.x;\r\n\r\n      const query = this.createSelectorQuery();\r\n      query.selectAll('.sky-rate__item').boundingClientRect((rects) => {\r\n        if (Array.isArray(rects) && rects[score - 1]) {\r\n          const rect = rects[score - 1];\r\n          const starWidth = rect.width;\r\n          const starLeft = rect.left;\r\n          \r\n          // 计算触摸点击在此颗星星内部的相对偏移量\r\n          const relativeX = tapX - starLeft;\r\n          let finalValue = score;\r\n\r\n          // 若支持半星选择，按 50% 轴距进行归整折算\r\n          if (this.data.allowHalf) {\r\n            if (relativeX < starWidth / 2) {\r\n              finalValue = score - 0.5;\r\n            }\r\n          }\r\n\r\n          // 触发双向变化事件\r\n          this.triggerEvent('change', { value: finalValue });\r\n        }\r\n      }).exec();\r\n    }\r\n  }\r\n});\r\n"]}

package/miniprogram_dist/rate/index.json

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

package/miniprogram_dist/rate/index.wxml

@@ -0,0 +1,31 @@
+<view 
+  class="sky-rate {{ disabled ? 'sky-rate--disabled' : '' }}"
+  style="{{ customStyle }}"
+>
+  <!-- 循环渲染 count 数量的星星项 -->
+  <view 
+    wx:for="{{ countList }}" 
+    wx:key="index"
+    class="sky-rate__item {{ itemState[index] ? 'sky-rate__item--active' : '' }}"
+    style="margin-right: {{ index === count - 1 ? 0 : gutter }}rpx;"
+    data-score="{{ index + 1 }}"
+    bindtap="onRateTap"
+  >
+    <!-- 底层未点亮灰色星 -->
+    <view 
+      class="sky-rate__star sky-rate__star--void"
+      style="width: {{ size }}rpx; height: {{ size }}rpx; {{ color ? 'background-color: ' + color : '' }}"
+    ></view>
+    
+    <!-- 覆盖在上面的高亮星 (利用 width 百分比实现任意比例裁剪，完美半星及浮点星) -->
+    <view 
+      class="sky-rate__active-wrap"
+      style="width: {{ activeWidths[index] }}%;"
+    >
+      <view 
+        class="sky-rate__star sky-rate__star--active"
+        style="width: {{ size }}rpx; height: {{ size }}rpx; {{ activeColor ? 'background-color: ' + activeColor : '' }}"
+      ></view>
+    </view>
+  </view>
+</view>

package/miniprogram_dist/rate/index.wxss

@@ -0,0 +1,89 @@
+@charset "UTF-8";
+/* ========================================== */
+/* Skyline-UI Rate 评分组件样式 (Sass)        */
+/* ========================================== */
+.sky-rate {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  /* ==================== 1. 星星包裹外壳 ==================== */
+}
+.sky-rate .sky-rate__item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  /* 清除移动端默认直角高亮 */
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.sky-rate {
+  /* 点亮激活时，执行轻微 3D 弹性贝塞尔反弹，手感惊艳 */
+}
+.sky-rate .sky-rate__item--active {
+  animation: sky-rate-bounce 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.sky-rate {
+  /* ==================== 2. 星星物理实体本身 ( clip-path 多边形手绘 ) ==================== */
+}
+.sky-rate .sky-rate__star {
+  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
+  box-sizing: border-box;
+}
+.sky-rate {
+  /* 未激活灰色底星 */
+}
+.sky-rate .sky-rate__star--void {
+  background-color: #e9ecef; /* 默认未激活底槽柔和灰 */
+}
+.sky-rate {
+  /* ==================== 3. 点亮星裁剪容器 ==================== */
+}
+.sky-rate .sky-rate__active-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  overflow: hidden; /* 核心机制：超限剪裁以支持任意半星/小数星比例 */
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.sky-rate {
+  /* 已点亮高亮金黄星 */
+}
+.sky-rate .sky-rate__star--active {
+  background-color: #fab005; /* 经典的优雅温暖金黄，富有高质感 */
+}
+.sky-rate {
+  /* ==================== 4. 只读禁用态 (静默所有动效) ==================== */
+}
+.sky-rate--disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.sky-rate--disabled .sky-rate__item--active {
+  animation: none !important; /* 禁用只读模式下屏蔽任何反弹动效 */
+}
+.sky-rate--disabled .sky-rate__star--active {
+  background-color: #dee2e6 !important; /* 只读时亮星降饱和为柔灰，克制低调 */
+}
+
+/* 3D 弹性星星反弹物理轨道 */
+@keyframes sky-rate-bounce {
+  0% {
+    transform: scale(1);
+  }
+  35% {
+    transform: scale(0.82);
+  }
+  75% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}