wx-sky-ui 1.0.0

package/miniprogram_dist/rate/index.wxss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["rate/index.scss","common/style/theme.scss"],"names":[],"mappings":";AAGA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;AAjBJ;AAoBE;;AACA;EACE;;AAtBJ;AAyBE;;AACA;EACE;EAYA;;AAvCJ;AA0CE;;AACA;EACE,kBCJe,SDIsB;;AA5CzC;AA+CE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAxDJ;AA2DE;;AACA;EACE;;AA7DJ;AAgEE;;AACA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;;AAKN;AACA;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE","file":"index.wxss","sourcesContent":["@use \"../common/style/theme.scss\" as *;\n@use \"../common/style/mixins.scss\" as *;\n\n/* ========================================== */\n/* Skyline-UI Rate 评分组件样式 (Sass)        */\n/* ========================================== */\n\n.sky-rate {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n\n  /* ==================== 1. 星星包裹外壳 ==================== */\n  .sky-rate__item {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-sizing: border-box;\n    \n    /* 清除移动端默认直角高亮 */\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* 点亮激活时，执行轻微 3D 弹性贝塞尔反弹，手感惊艳 */\n  .sky-rate__item--active {\n    animation: sky-rate-bounce 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n\n  /* ==================== 2. 星星物理实体本身 ( clip-path 多边形手绘 ) ==================== */\n  .sky-rate__star {\n    clip-path: polygon(\n      50% 0%, \n      61% 35%, \n      98% 35%, \n      68% 57%, \n      79% 91%, \n      50% 70%, \n      21% 91%, \n      32% 57%, \n      2% 35%, \n      39% 35%\n    );\n    box-sizing: border-box;\n  }\n\n  /* 未激活灰色底星 */\n  .sky-rate__star--void {\n    background-color: $sky-color-gray-3; /* 默认未激活底槽柔和灰 */\n  }\n\n  /* ==================== 3. 点亮星裁剪容器 ==================== */\n  .sky-rate__active-wrap {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    overflow: hidden; /* 核心机制：超限剪裁以支持任意半星/小数星比例 */\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n\n  /* 已点亮高亮金黄星 */\n  .sky-rate__star--active {\n    background-color: #fab005; /* 经典的优雅温暖金黄，富有高质感 */\n  }\n\n  /* ==================== 4. 只读禁用态 (静默所有动效) ==================== */\n  &--disabled {\n    pointer-events: none;\n    cursor: not-allowed;\n\n    .sky-rate__item--active {\n      animation: none !important; /* 禁用只读模式下屏蔽任何反弹动效 */\n    }\n\n    .sky-rate__star--active {\n      background-color: $sky-color-gray-4 !important; /* 只读时亮星降饱和为柔灰，克制低调 */\n    }\n  }\n}\n\n/* 3D 弹性星星反弹物理轨道 */\n@keyframes sky-rate-bounce {\n  0% {\n    transform: scale(1);\n  }\n  35% {\n    transform: scale(0.82);\n  }\n  75% {\n    transform: scale(1.15);\n  }\n  100% {\n    transform: scale(1);\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/select-input/index.js

@@ -0,0 +1,116 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: true // 开启虚拟节点以减少 Skyline 节点层级，优化流式排版
+    },
+    properties: {
+        // 外部传入已选择的标签数组 (受控状态)
+        tags: {
+            type: Array,
+            value: []
+        },
+        // 输入框占位文本
+        placeholder: {
+            type: String,
+            value: '输入标签后回车...'
+        },
+        // 是否禁用
+        disabled: {
+            type: Boolean,
+            value: false
+        },
+        // 限制允许输入的最大标签数
+        maxTags: {
+            type: Number,
+            value: 99
+        },
+        // 自定义附加样式
+        customStyle: {
+            type: String,
+            value: ''
+        }
+    },
+    data: {
+        inputValue: '',
+        focused: false
+    },
+    methods: {
+        // 监听输入
+        onInput(e) {
+            this.setData({
+                inputValue: e.detail.value
+            });
+        },
+        // 键盘“完成/确认”触发：生成标签
+        onConfirm(e) {
+            if (this.data.disabled)
+                return;
+            const val = e.detail.value.trim();
+            if (!val) {
+                // 输入为空，仅清空多余空格
+                this.setData({ inputValue: '' });
+                return;
+            }
+            // 1. 限制最大标签数判定
+            if (this.data.tags.length >= this.data.maxTags) {
+                wx.showToast({
+                    title: `最多添加 ${this.data.maxTags} 个标签`,
+                    icon: 'none',
+                    duration: 1500
+                });
+                return;
+            }
+            // 2. 避免重复标签判定
+            if (this.data.tags.indexOf(val) > -1) {
+                wx.showToast({
+                    title: '标签已存在',
+                    icon: 'none',
+                    duration: 1000
+                });
+                return;
+            }
+            // 3. 浅拷贝并追加新标签
+            const nextTags = [...this.data.tags, val];
+            // 清空当前输入值
+            this.setData({
+                inputValue: ''
+            });
+            // 向上抛出更新后的标签数组
+            this.triggerEvent('change', nextTags);
+        },
+        // 点击 Tag 上的 × 删除对应标签
+        onDeleteTag(e) {
+            if (this.data.disabled)
+                return;
+            const { index } = e.currentTarget.dataset;
+            const nextTags = [...this.data.tags];
+            nextTags.splice(index, 1); // 裁剪移除
+            this.triggerEvent('change', nextTags);
+        },
+        // 点击右侧一键清除全部标签和输入内容
+        onClearAll() {
+            if (this.data.disabled)
+                return;
+            this.setData({
+                inputValue: ''
+            });
+            this.triggerEvent('change', []);
+        },
+        // 监听聚焦
+        onFocus() {
+            if (this.data.disabled)
+                return;
+            this.setData({
+                focused: true
+            });
+        },
+        // 监听失焦
+        onBlur() {
+            this.setData({
+                focused: false
+            });
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/select-input/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["Component({\r\n  options: {\r\n    virtualHost: true // 开启虚拟节点以减少 Skyline 节点层级，优化流式排版\r\n  },\r\n\r\n  properties: {\r\n    // 外部传入已选择的标签数组 (受控状态)\r\n    tags: {\r\n      type: Array,\r\n      value: []\r\n    },\r\n    // 输入框占位文本\r\n    placeholder: {\r\n      type: String,\r\n      value: '输入标签后回车...'\r\n    },\r\n    // 是否禁用\r\n    disabled: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 限制允许输入的最大标签数\r\n    maxTags: {\r\n      type: Number,\r\n      value: 99\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    inputValue: '',\r\n    focused: false\r\n  },\r\n\r\n  methods: {\r\n    // 监听输入\r\n    onInput(e: WechatMiniprogram.Input) {\r\n      this.setData({\r\n        inputValue: e.detail.value\r\n      });\r\n    },\r\n\r\n    // 键盘“完成/确认”触发：生成标签\r\n    onConfirm(e: WechatMiniprogram.Input) {\r\n      if (this.data.disabled) return;\r\n      \r\n      const val = e.detail.value.trim();\r\n      if (!val) {\r\n        // 输入为空，仅清空多余空格\r\n        this.setData({ inputValue: '' });\r\n        return;\r\n      }\r\n\r\n      // 1. 限制最大标签数判定\r\n      if (this.data.tags.length >= this.data.maxTags) {\r\n        wx.showToast({\r\n          title: `最多添加 ${this.data.maxTags} 个标签`,\r\n          icon: 'none',\r\n          duration: 1500\r\n        });\r\n        return;\r\n      }\r\n\r\n      // 2. 避免重复标签判定\r\n      if (this.data.tags.indexOf(val) > -1) {\r\n        wx.showToast({\r\n          title: '标签已存在',\r\n          icon: 'none',\r\n          duration: 1000\r\n        });\r\n        return;\r\n      }\r\n\r\n      // 3. 浅拷贝并追加新标签\r\n      const nextTags = [...this.data.tags, val];\r\n      \r\n      // 清空当前输入值\r\n      this.setData({\r\n        inputValue: ''\r\n      });\r\n\r\n      // 向上抛出更新后的标签数组\r\n      this.triggerEvent('change', nextTags);\r\n    },\r\n\r\n    // 点击 Tag 上的 × 删除对应标签\r\n    onDeleteTag(e: WechatMiniprogram.TouchEvent) {\r\n      if (this.data.disabled) return;\r\n\r\n      const { index } = e.currentTarget.dataset;\r\n      const nextTags = [...this.data.tags];\r\n      nextTags.splice(index, 1); // 裁剪移除\r\n\r\n      this.triggerEvent('change', nextTags);\r\n    },\r\n\r\n    // 点击右侧一键清除全部标签和输入内容\r\n    onClearAll() {\r\n      if (this.data.disabled) return;\r\n\r\n      this.setData({\r\n        inputValue: ''\r\n      });\r\n\r\n      this.triggerEvent('change', []);\r\n    },\r\n\r\n    // 监听聚焦\r\n    onFocus() {\r\n      if (this.data.disabled) return;\r\n      this.setData({\r\n        focused: true\r\n      });\r\n    },\r\n\r\n    // 监听失焦\r\n    onBlur() {\r\n      this.setData({\r\n        focused: false\r\n      });\r\n    }\r\n  }\r\n});\r\n"]}

package/miniprogram_dist/select-input/index.json

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

package/miniprogram_dist/select-input/index.wxml

@@ -0,0 +1,43 @@
+<view 
+  class="sky-select-input {{ focused ? 'sky-select-input--focused' : '' }} {{ disabled ? 'sky-select-input--disabled' : '' }}"
+  style="{{ customStyle }}"
+>
+  <!-- 流式 Tag 与 输入框内容区 -->
+  <view class="sky-select-input__content">
+    <!-- 已渲染生成的 Tag 列表 -->
+    <view 
+      wx:for="{{ tags }}" 
+      wx:key="*this" 
+      class="sky-select-tag"
+    >
+      <text class="sky-select-tag__text">{{ item }}</text>
+      <!-- 纯 CSS 手绘的 1px 极细删除键，catchtap 阻止冒泡防止触发输入框聚焦 -->
+      <view class="sky-select-tag__close" catchtap="onDeleteTag" data-index="{{ index }}"></view>
+    </view>
+
+    <!-- 原生输入框，自适应剩余宽度 -->
+    <input 
+      class="sky-select-input__field" 
+      type="text" 
+      placeholder="{{ tags.length > 0 ? '' : placeholder }}" 
+      placeholder-class="sky-select-input__placeholder" 
+      value="{{ inputValue }}" 
+      disabled="{{ disabled }}" 
+      bindinput="onInput" 
+      bindconfirm="onConfirm" 
+      bindfocus="onFocus" 
+      bindblur="onBlur" 
+      confirm-type="done" 
+      confirm-hold="{{ false }}"
+    />
+  </view>
+
+  <!-- 右侧一键清除按钮 (纯 CSS 物理手绘圆圈清除) -->
+  <view 
+    wx:if="{{ (tags.length > 0 || inputValue.length > 0) && !disabled }}" 
+    class="sky-select-input__clear-wrap" 
+    catchtap="onClearAll"
+  >
+    <view class="sky-select-input__clear-icon"></view>
+  </view>
+</view>

package/miniprogram_dist/select-input/index.wxss

@@ -0,0 +1,143 @@
+.sky-select-input {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 16rpx 24rpx;
+  min-height: 88rpx;
+  border-radius: 12rpx;
+  border: 2rpx solid #dee2e6;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), min-height 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.sky-select-input__content {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12rpx;
+}
+.sky-select-input .sky-select-tag {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  height: 48rpx;
+  padding: 0 16rpx;
+  border-radius: 10rpx;
+  background-color: #f1f3f5;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.sky-select-input .sky-select-tag__text {
+  font-size: 24rpx;
+  color: #495057;
+  line-height: 1;
+}
+.sky-select-input .sky-select-tag__close {
+  position: relative;
+  width: 14rpx;
+  height: 14rpx;
+  margin-left: 10rpx;
+  transform: rotate(45deg);
+  cursor: pointer;
+}
+.sky-select-input .sky-select-tag__close::before, .sky-select-input .sky-select-tag__close::after {
+  content: " ";
+  position: absolute;
+  background-color: #adb5bd;
+  border-radius: 1px;
+}
+.sky-select-input .sky-select-tag__close::before {
+  top: 6rpx;
+  left: 0;
+  width: 100%;
+  height: 2rpx;
+}
+.sky-select-input .sky-select-tag__close::after {
+  left: 6rpx;
+  top: 0;
+  width: 2rpx;
+  height: 100%;
+}
+.sky-select-input .sky-select-tag:active {
+  background-color: #e9ecef;
+}
+.sky-select-input .sky-select-tag:active .sky-select-tag__close::before, .sky-select-input .sky-select-tag:active .sky-select-tag__close::after {
+  background-color: #495057;
+}
+.sky-select-input__field {
+  flex: 1;
+  min-width: 160rpx;
+  height: 48rpx;
+  line-height: 48rpx;
+  font-size: 28rpx;
+  color: #212529;
+  background: transparent;
+  border: none;
+  outline: none;
+}
+.sky-select-input__placeholder {
+  color: #adb5bd;
+  font-size: 28rpx;
+}
+.sky-select-input__clear-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40rpx;
+  height: 40rpx;
+  margin-left: 12rpx;
+  cursor: pointer;
+}
+.sky-select-input__clear-wrap .sky-select-input__clear-icon {
+  position: relative;
+  box-sizing: border-box;
+  width: 28rpx;
+  height: 28rpx;
+  border-radius: 9999rpx;
+  background-color: #adb5bd;
+  transform: rotate(45deg);
+  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.sky-select-input__clear-wrap .sky-select-input__clear-icon::before, .sky-select-input__clear-wrap .sky-select-input__clear-icon::after {
+  content: " ";
+  position: absolute;
+  background-color: #ffffff;
+  border-radius: 1px;
+}
+.sky-select-input__clear-wrap .sky-select-input__clear-icon::before {
+  top: 13rpx;
+  left: 6rpx;
+  width: 16rpx;
+  height: 2rpx;
+}
+.sky-select-input__clear-wrap .sky-select-input__clear-icon::after {
+  left: 13rpx;
+  top: 6rpx;
+  width: 2rpx;
+  height: 16rpx;
+}
+.sky-select-input__clear-wrap:active .sky-select-input__clear-icon {
+  background-color: #868e96;
+}
+.sky-select-input--focused {
+  border-color: hsl(250, 85%, 55%);
+  box-shadow: 0 0 0 6rpx rgba(100, 80, 240, 0.08);
+}
+.sky-select-input--disabled {
+  background-color: #f8f9fa;
+  border-color: #e9ecef;
+  opacity: 0.65;
+  pointer-events: none;
+}
+.sky-select-input--disabled .sky-select-tag {
+  background-color: #e9ecef;
+}
+.sky-select-input--disabled .sky-select-tag .sky-select-tag__close {
+  display: none;
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["select-input/index.scss","common/style/theme.scss"],"names":[],"mappings":"AAOA;EACE;EACA;EACA;EAGA;EACA;EAGA,eC+CqB;ED5CrB;EACA,kBCuBgB;EDpBhB;EACA;EACA;EAGA;EACA;EAGA;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA,kBCde;EDgBf;;AAEA;EACE;EACA,OCfa;EDgBb;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,kBCjCW;EDkCX;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKJ;EACE,kBC1Da;;AD4DX;EACE,kBCzDS;;ADgEjB;EACE;EACA;EACA;EACA;EACA;EACA,OCpEe;EDqEf;EACA;EACA;;AAGF;EACE,OC/Ee;EDgFf;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA,eClFoB;EDmFpB,kBCpGa;EDqGb;EAEA;;AAEA;EACE;EACA;EACA,kBCjHU;EDkHV;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE,kBClIW;;ADwIjB;EACE,cClLgB;EDqLhB;;AAIF;EACE,kBCtJe;EDuJf,cCrJe;EDsJf;EACA;;AAEA;EACE,kBC1Ja;;AD2Jb;EACE","file":"index.wxss","sourcesContent":["@use \"../common/style/theme.scss\" as *;\n@use \"../common/style/mixins.scss\" as *;\n\n// ==========================================\n// Skyline-UI SelectInput 多选输入框样式 (Sass)\n// ==========================================\n\n.sky-select-input {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  \n  // 大方、自适应宽度的内 Padding 比例\n  padding: 16rpx 24rpx;\n  min-height: 88rpx;\n  \n  // 常规小圆角 (12rpx)\n  border-radius: $sky-border-radius-md;\n  \n  // 默认中性浅灰边框与纯白底色\n  border: 2rpx solid $sky-color-gray-4;\n  background-color: $sky-color-white;\n  \n  // 左右 Flex 结构分立\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  \n  // 极致的高级防直角打磨细节\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  \n  // 高度折行和聚焦光圈的平滑过渡 (Skyline 硬件渲染平润)\n  transition: border-color 200ms $sky-transition-timing,\n              box-shadow 200ms $sky-transition-timing,\n              min-height 200ms $sky-transition-timing;\n\n  // ==================== 1. 流式内容区 (Tags + Input) ====================\n  &__content {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap; // 开启多 Tag 自动换行\n    align-items: center;\n    gap: 12rpx;      // 换行及左右自动间隔 (Skyline 高性能排版)\n  }\n\n  // ==================== 2. 莫兰迪低饱和度微标签 (Premium Tags) ====================\n  .sky-select-tag {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    height: 48rpx;\n    padding: 0 16rpx;\n    \n    // 精致 10rpx 小圆角\n    border-radius: 10rpx;\n    \n    // 浅灰莫兰迪配色 (极其整洁)\n    background-color: $sky-color-gray-2;\n    \n    transition: all $sky-transition-duration $sky-transition-timing;\n    \n    &__text {\n      font-size: 24rpx;\n      color: $sky-color-gray-7;\n      line-height: 1;\n    }\n    \n    // 2a. 纯 CSS 物理手绘 1px 极细 \"×\" 删除键\n    &__close {\n      position: relative;\n      width: 14rpx;\n      height: 14rpx;\n      margin-left: 10rpx;\n      transform: rotate(45deg); // 顺时针旋转 45rpx 形成叉号\n      cursor: pointer;\n      \n      &::before, &::after {\n        content: \" \";\n        position: absolute;\n        background-color: $sky-color-gray-5;\n        border-radius: 1px;\n      }\n      \n      // 横线\n      &::before {\n        top: 6rpx;\n        left: 0;\n        width: 100%;\n        height: 2rpx;\n      }\n      \n      // 竖线\n      &::after {\n        left: 6rpx;\n        top: 0;\n        width: 2rpx;\n        height: 100%;\n      }\n    }\n    \n    // Hover 点击反馈\n    &:active {\n      background-color: $sky-color-gray-3;\n      .sky-select-tag__close {\n        &::before, &::after {\n          background-color: $sky-color-gray-7;\n        }\n      }\n    }\n  }\n\n  // ==================== 3. 原生输入域 ====================\n  &__field {\n    flex: 1;\n    min-width: 160rpx; // 标签满行时，输入框至少保留 160rpx 并在换行时自动拉满宽度\n    height: 48rpx;\n    line-height: 48rpx;\n    font-size: 28rpx;\n    color: $sky-color-gray-9;\n    background: transparent;\n    border: none;\n    outline: none;\n  }\n  \n  &__placeholder {\n    color: $sky-color-gray-5;\n    font-size: 28rpx;\n  }\n\n  // ==================== 4. 右侧一键清除 (手绘圆叉) ====================\n  &__clear-wrap {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 40rpx;\n    height: 40rpx;\n    margin-left: 12rpx;\n    cursor: pointer;\n    \n    // 4a. 纯 CSS 物理手绘圆清除图标\n    .sky-select-input__clear-icon {\n      position: relative;\n      box-sizing: border-box;\n      width: 28rpx;\n      height: 28rpx;\n      border-radius: $sky-border-radius-round;\n      background-color: $sky-color-gray-5;\n      transform: rotate(45deg); // 顺时针旋转 45 度形成叉号\n      \n      transition: background-color $sky-transition-duration $sky-transition-timing;\n      \n      &::before, &::after {\n        content: \" \";\n        position: absolute;\n        background-color: $sky-color-white;\n        border-radius: 1px;\n      }\n      \n      // 横线\n      &::before {\n        top: 13rpx;\n        left: 6rpx;\n        width: 16rpx;\n        height: 2rpx;\n      }\n      \n      // 竖线\n      &::after {\n        left: 13rpx;\n        top: 6rpx;\n        width: 2rpx;\n        height: 16rpx;\n      }\n    }\n    \n    &:active {\n      .sky-select-input__clear-icon {\n        background-color: $sky-color-gray-6;\n      }\n    }\n  }\n\n  // ==================== 5. 聚焦状态与克制呼吸光圈 ====================\n  &--focused {\n    border-color: $sky-color-primary;\n    \n    // 极淡雅 6rpx 品牌色呼吸光圈 (8% 不透明度)\n    box-shadow: 0 0 0 6rpx rgba(100, 80, 240, 0.08);\n  }\n\n  // ==================== 6. 禁用状态 ====================\n  &--disabled {\n    background-color: $sky-color-gray-1;\n    border-color: $sky-color-gray-3;\n    opacity: 0.65;\n    pointer-events: none; // 彻底失效\n    \n    .sky-select-tag {\n      background-color: $sky-color-gray-3;\n      .sky-select-tag__close {\n        display: none; // 禁用时隐藏删除叉\n      }\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/skeleton/index.js

@@ -0,0 +1,102 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: true // 开启虚拟节点降低 Skyline DOM 层级嵌套
+    },
+    properties: {
+        // 是否为加载状态 (若为 false 则展示真实内容 Slot)
+        loading: {
+            type: Boolean,
+            value: true
+        },
+        // 是否展示头像占位
+        avatar: {
+            type: Boolean,
+            value: false
+        },
+        // 头像尺寸 (支持 rpx 或 px)
+        avatarSize: {
+            type: String,
+            value: '64rpx'
+        },
+        // 头像形状: round, square
+        avatarShape: {
+            type: String,
+            value: 'round'
+        },
+        // 是否展示标题占位
+        title: {
+            type: Boolean,
+            value: false
+        },
+        // 标题占位宽度
+        titleWidth: {
+            type: String,
+            value: '40%'
+        },
+        // 文本行数，默认 3
+        row: {
+            type: Number,
+            value: 3
+        },
+        // 每一行的宽度，可以是用逗号分隔的字符串 (例如 '100%,90%,60%')
+        rowWidth: {
+            type: String,
+            value: ''
+        },
+        // 是否开启舒缓扫光过渡动画
+        animate: {
+            type: Boolean,
+            value: true
+        },
+        // 附加自定义样式
+        customStyle: {
+            type: String,
+            value: ''
+        }
+    },
+    data: {
+        rowList: [] // 智能生成的行宽数组
+    },
+    observers: {
+        'row, rowWidth': function () {
+            this.recalculateRows();
+        }
+    },
+    lifetimes: {
+        attached() {
+            this.recalculateRows();
+        }
+    },
+    methods: {
+        // 智能折算多行骨架条的行宽排布
+        recalculateRows() {
+            const { row, rowWidth } = this.data;
+            const list = [];
+            // 1. 若用户输入了逗号分隔的特定行宽
+            let widthArr = [];
+            if (rowWidth) {
+                widthArr = rowWidth.split(',');
+            }
+            // 2. 依次生成每一行的宽度
+            for (let i = 0; i < row; i++) {
+                let width = '100%';
+                if (widthArr[i]) {
+                    width = widthArr[i].trim();
+                }
+                else {
+                    // 若无指定宽度，且恰好是最后一行，自动收缩至 60% 达成高保真段落效果
+                    if (i === row - 1 && row > 1) {
+                        width = '60%';
+                    }
+                }
+                list.push({ width });
+            }
+            this.setData({
+                rowList: list
+            });
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/miniprogram_dist/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton/index.ts"],"names":[],"mappings":";AAAA,SAAS,CAAC;IACR,OAAO,EAAE;QACP,WAAW,EAAE,IAAI,CAAC,4BAA4B;KAC/C;IAED,UAAU,EAAE;QACV,kCAAkC;QAClC,OAAO,EAAE;YACP,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,IAAI;SACZ;QACD,WAAW;QACX,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,KAAK;SACb;QACD,qBAAqB;QACrB,UAAU,EAAE;YACV,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,OAAO;SACf;QACD,sBAAsB;QACtB,WAAW,EAAE;YACX,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,OAAO;SACf;QACD,WAAW;QACX,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,KAAK;SACb;QACD,SAAS;QACT,UAAU,EAAE;YACV,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,KAAK;SACb;QACD,YAAY;QACZ,GAAG,EAAE;YACH,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,CAAC;SACT;QACD,0CAA0C;QAC1C,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE;SACV;QACD,eAAe;QACf,OAAO,EAAE;YACP,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,IAAI;SACZ;QACD,UAAU;QACV,WAAW,EAAE;YACX,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE;SACV;KACF;IAED,IAAI,EAAE;QACJ,OAAO,EAAE,EAA8B,CAAC,YAAY;KACrD;IAED,SAAS,EAAE;QACT,eAAe,EAAE;YACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;KACF;IAED,SAAS,EAAE;QACT,QAAQ;YACN,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;KACF;IAED,OAAO,EAAE;QACP,iBAAiB;QACjB,eAAe;YACb,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC;YACpC,MAAM,IAAI,GAA6B,EAAE,CAAC;YAE1C,qBAAqB;YACrB,IAAI,QAAQ,GAAa,EAAE,CAAC;YAC5B,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACjC,CAAC;YAED,gBAAgB;YAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC7B,IAAI,KAAK,GAAG,MAAM,CAAC;gBAEnB,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;oBAChB,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;gBAC7B,CAAC;qBAAM,CAAC;oBACN,sCAAsC;oBACtC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,EAAE,CAAC;wBAC7B,KAAK,GAAG,KAAK,CAAC;oBAChB,CAAC;gBACH,CAAC;gBAED,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YACvB,CAAC;YAED,IAAI,CAAC,OAAO,CAAC;gBACX,OAAO,EAAE,IAAI;aACd,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    // 是否为加载状态 (若为 false 则展示真实内容 Slot)\r\n    loading: {\r\n      type: Boolean,\r\n      value: true\r\n    },\r\n    // 是否展示头像占位\r\n    avatar: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 头像尺寸 (支持 rpx 或 px)\r\n    avatarSize: {\r\n      type: String,\r\n      value: '64rpx'\r\n    },\r\n    // 头像形状: round, square\r\n    avatarShape: {\r\n      type: String,\r\n      value: 'round'\r\n    },\r\n    // 是否展示标题占位\r\n    title: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 标题占位宽度\r\n    titleWidth: {\r\n      type: String,\r\n      value: '40%'\r\n    },\r\n    // 文本行数，默认 3\r\n    row: {\r\n      type: Number,\r\n      value: 3\r\n    },\r\n    // 每一行的宽度，可以是用逗号分隔的字符串 (例如 '100%,90%,60%')\r\n    rowWidth: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 是否开启舒缓扫光过渡动画\r\n    animate: {\r\n      type: Boolean,\r\n      value: true\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    rowList: [] as Array<{ width: string }> // 智能生成的行宽数组\r\n  },\r\n\r\n  observers: {\r\n    'row, rowWidth': function() {\r\n      this.recalculateRows();\r\n    }\r\n  },\r\n\r\n  lifetimes: {\r\n    attached() {\r\n      this.recalculateRows();\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    // 智能折算多行骨架条的行宽排布\r\n    recalculateRows() {\r\n      const { row, rowWidth } = this.data;\r\n      const list: Array<{ width: string }> = [];\r\n\r\n      // 1. 若用户输入了逗号分隔的特定行宽\r\n      let widthArr: string[] = [];\r\n      if (rowWidth) {\r\n        widthArr = rowWidth.split(',');\r\n      }\r\n\r\n      // 2. 依次生成每一行的宽度\r\n      for (let i = 0; i < row; i++) {\r\n        let width = '100%';\r\n\r\n        if (widthArr[i]) {\r\n          width = widthArr[i].trim();\r\n        } else {\r\n          // 若无指定宽度，且恰好是最后一行，自动收缩至 60% 达成高保真段落效果\r\n          if (i === row - 1 && row > 1) {\r\n            width = '60%';\r\n          }\r\n        }\r\n\r\n        list.push({ width });\r\n      }\r\n\r\n      this.setData({\r\n        rowList: list\r\n      });\r\n    }\r\n  }\r\n});\r\n"]}

package/miniprogram_dist/skeleton/index.json

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

package/miniprogram_dist/skeleton/index.wxml

@@ -0,0 +1,40 @@
+<view class="sky-skeleton-container" style="{{ customStyle }}">
+  <!-- 骨架屏占位态 -->
+  <view 
+    wx:if="{{ loading }}" 
+    class="sky-skeleton {{ animate ? 'sky-skeleton--animate' : '' }}"
+  >
+    <!-- 1. 头像占位 -->
+    <view 
+      wx:if="{{ avatar }}" 
+      class="sky-skeleton__avatar sky-skeleton__avatar--{{ avatarShape }}"
+      style="width: {{ avatarSize }}; height: {{ avatarSize }};"
+    ></view>
+
+    <!-- 2. 文本内容占位 -->
+    <view class="sky-skeleton__content">
+      <!-- 标题占位 -->
+      <view 
+        wx:if="{{ title }}" 
+        class="sky-skeleton__title"
+        style="width: {{ titleWidth }}"
+      ></view>
+
+      <!-- 多行文本占位 -->
+      <view 
+        wx:for="{{ rowList }}" 
+        wx:key="index"
+        class="sky-skeleton__row"
+        style="width: {{ item.width }}"
+      ></view>
+    </view>
+  </view>
+
+  <!-- 真实内容淡现态 -->
+  <view 
+    wx:else 
+    class="sky-skeleton__content-real"
+  >
+    <slot></slot>
+  </view>
+</view>

package/miniprogram_dist/skeleton/index.wxss

@@ -0,0 +1,103 @@
+@charset "UTF-8";
+/* ========================================== */
+/* Skyline-UI Skeleton 骨架屏样式 (Sass)      */
+/* ========================================== */
+.sky-skeleton-container {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.sky-skeleton {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10rpx 0;
+  /* ==================== 1. 头像占位块 ==================== */
+}
+.sky-skeleton .sky-skeleton__avatar {
+  flex-shrink: 0;
+  margin-right: 24rpx;
+  background-color: #f8f9fa;
+  box-sizing: border-box;
+}
+.sky-skeleton .sky-skeleton__avatar--round {
+  border-radius: 50%;
+}
+.sky-skeleton .sky-skeleton__avatar--square {
+  border-radius: 12rpx;
+}
+.sky-skeleton {
+  /* ==================== 2. 文本占位内容 ==================== */
+}
+.sky-skeleton .sky-skeleton__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.sky-skeleton {
+  /* 标题骨架条 */
+}
+.sky-skeleton .sky-skeleton__title {
+  height: 32rpx;
+  background-color: #f8f9fa;
+  border-radius: 6rpx;
+  margin-bottom: 24rpx;
+}
+.sky-skeleton {
+  /* 文本骨架条 */
+}
+.sky-skeleton .sky-skeleton__row {
+  height: 28rpx;
+  background-color: #f8f9fa;
+  border-radius: 6rpx;
+  margin-top: 18rpx;
+}
+.sky-skeleton {
+  /* 消除文本首行的间隙 (若无标题) */
+}
+.sky-skeleton .sky-skeleton__row:first-child {
+  margin-top: 0;
+}
+
+/* ==================== 3. 舒缓 1.6s 扫光渐变动画 (GPU 加速) ==================== */
+.sky-skeleton--animate {
+  /* 对头像、标题和每行文本统一应用扫光底色 */
+}
+.sky-skeleton--animate .sky-skeleton__avatar,
+.sky-skeleton--animate .sky-skeleton__title,
+.sky-skeleton--animate .sky-skeleton__row {
+  background-image: linear-gradient(90deg, #f8f9fa 25%, #e9ecef 37%, #f8f9fa 63%);
+  background-size: 400% 100%;
+  /* 1.6s 舒缓扫光，在 Skyline 高性能引擎下满帧运行，丝毫不卡顿 */
+  animation: sky-skeleton-shimmer-anim 1.6s ease infinite;
+}
+
+/* ==================== 4. 真实内容淡现过渡容器 ==================== */
+.sky-skeleton__content-real {
+  animation: sky-skeleton-fade-in 350ms cubic-bezier(0.25, 1, 0.5, 1) both;
+}
+
+/* ==================== 5. 动画关键帧 ==================== */
+/* 扫光位移关键帧 */
+@keyframes sky-skeleton-shimmer-anim {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+/* 内容淡现关键帧 */
+@keyframes sky-skeleton-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(6rpx); /* 轻微上浮，增强拟物感 */
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/miniprogram_dist/skeleton/index.wxss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["skeleton/index.scss","common/style/theme.scss"],"names":[],"mappings":";AAGA;AACA;AACA;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA,kBCqBe;EDpBf;;AAEA;EACE;;AAGF;EACE;;AAnBN;AAuBE;;AACA;EACE;EACA;EACA;EACA;;AA5BJ;AA+BE;;AACA;EACE;EACA,kBCFe;EDGf;EACA;;AApCJ;AAuCE;;AACA;EACE;EACA,kBCVe;EDWf;EACA;;AA5CJ;AA+CE;;AACA;EACE;;;AAIJ;AACA;AAEE;;AACA;AAAA;AAAA;EAGE;EAMA;AAEA;EACA;;;AAIJ;AACA;EACE;;;AAGF;AAEA;AACA;EACE;IACE;;EAEF;IACE;;;AAIJ;AACA;EACE;IACE;IACA;;EAEF;IACE;IACA","file":"index.wxss","sourcesContent":["@use \"../common/style/theme.scss\" as *;\n@use \"../common/style/mixins.scss\" as *;\n\n/* ========================================== */\n/* Skyline-UI Skeleton 骨架屏样式 (Sass)      */\n/* ========================================== */\n\n.sky-skeleton-container {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.sky-skeleton {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 10rpx 0;\n  \n  /* ==================== 1. 头像占位块 ==================== */\n  .sky-skeleton__avatar {\n    flex-shrink: 0;\n    margin-right: 24rpx;\n    background-color: $sky-color-gray-1;\n    box-sizing: border-box;\n    \n    &--round {\n      border-radius: 50%;\n    }\n    \n    &--square {\n      border-radius: 12rpx;\n    }\n  }\n\n  /* ==================== 2. 文本占位内容 ==================== */\n  .sky-skeleton__content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  /* 标题骨架条 */\n  .sky-skeleton__title {\n    height: 32rpx;\n    background-color: $sky-color-gray-1;\n    border-radius: 6rpx;\n    margin-bottom: 24rpx;\n  }\n\n  /* 文本骨架条 */\n  .sky-skeleton__row {\n    height: 28rpx;\n    background-color: $sky-color-gray-1;\n    border-radius: 6rpx;\n    margin-top: 18rpx;\n  }\n\n  /* 消除文本首行的间隙 (若无标题) */\n  .sky-skeleton__row:first-child {\n    margin-top: 0;\n  }\n}\n\n/* ==================== 3. 舒缓 1.6s 扫光渐变动画 (GPU 加速) ==================== */\n.sky-skeleton--animate {\n  \n  /* 对头像、标题和每行文本统一应用扫光底色 */\n  .sky-skeleton__avatar,\n  .sky-skeleton__title,\n  .sky-skeleton__row {\n    background-image: linear-gradient(\n      90deg,\n      $sky-color-gray-1 25%,\n      $sky-color-gray-3 37%,\n      $sky-color-gray-1 63%\n    );\n    background-size: 400% 100%;\n    \n    /* 1.6s 舒缓扫光，在 Skyline 高性能引擎下满帧运行，丝毫不卡顿 */\n    animation: sky-skeleton-shimmer-anim 1.6s ease infinite;\n  }\n}\n\n/* ==================== 4. 真实内容淡现过渡容器 ==================== */\n.sky-skeleton__content-real {\n  animation: sky-skeleton-fade-in 350ms cubic-bezier(0.25, 1, 0.5, 1) both;\n}\n\n/* ==================== 5. 动画关键帧 ==================== */\n\n/* 扫光位移关键帧 */\n@keyframes sky-skeleton-shimmer-anim {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n\n/* 内容淡现关键帧 */\n@keyframes sky-skeleton-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(6rpx); /* 轻微上浮，增强拟物感 */\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\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"]}