wx-sky-ui 1.0.0

package/miniprogram_dist/switch/index.js

@@ -0,0 +1,53 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: true // 开启虚拟节点以减少 Skyline 节点层级，提升样式继承效率
+    },
+    properties: {
+        checked: {
+            type: Boolean,
+            value: false
+        },
+        disabled: {
+            type: Boolean,
+            value: false
+        },
+        loading: {
+            type: Boolean,
+            value: false
+        },
+        type: {
+            type: String,
+            value: 'primary' // 预置主题：primary, success, warning, danger, info
+        },
+        size: {
+            type: String,
+            value: 'normal' // 尺寸：normal (104x60rpx), small (84x48rpx)
+        },
+        // 开启态时胶囊内嵌入的自定义文本 (如 '开', 'ON')
+        activeText: {
+            type: String,
+            value: ''
+        },
+        // 关闭态时胶囊内嵌入的自定义文本 (如 '关', 'OFF')
+        inactiveText: {
+            type: String,
+            value: ''
+        },
+        customStyle: {
+            type: String,
+            value: ''
+        }
+    },
+    methods: {
+        onTap() {
+            if (this.data.disabled || this.data.loading) {
+                return;
+            }
+            const nextChecked = !this.data.checked;
+            this.triggerEvent('change', nextChecked);
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/miniprogram_dist/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/switch/index.ts"],"names":[],"mappings":";AAAA,SAAS,CAAC;IACR,OAAO,EAAE;QACP,WAAW,EAAE,IAAI,CAAC,kCAAkC;KACrD;IAED,UAAU,EAAE;QACV,OAAO,EAAE;YACP,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,KAAK;SACb;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,KAAK;SACb;QACD,OAAO,EAAE;YACP,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,KAAK;SACb;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,SAAS,CAAC,+CAA+C;SACjE;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,QAAQ,CAAC,0CAA0C;SAC3D;QACD,gCAAgC;QAChC,UAAU,EAAE;YACV,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE;SACV;QACD,iCAAiC;QACjC,YAAY,EAAE;YACZ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE;SACV;QACD,WAAW,EAAE;YACX,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE;SACV;KACF;IAED,OAAO,EAAE;QACP,KAAK;YACH,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC5C,OAAO;YACT,CAAC;YACD,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;YACvC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAC3C,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    checked: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    disabled: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    loading: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    type: {\r\n      type: String,\r\n      value: 'primary' // 预置主题：primary, success, warning, danger, info\r\n    },\r\n    size: {\r\n      type: String,\r\n      value: 'normal' // 尺寸：normal (104x60rpx), small (84x48rpx)\r\n    },\r\n    // 开启态时胶囊内嵌入的自定义文本 (如 '开', 'ON')\r\n    activeText: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 关闭态时胶囊内嵌入的自定义文本 (如 '关', 'OFF')\r\n    inactiveText: {\r\n      type: String,\r\n      value: ''\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 || this.data.loading) {\r\n        return;\r\n      }\r\n      const nextChecked = !this.data.checked;\r\n      this.triggerEvent('change', nextChecked);\r\n    }\r\n  }\r\n});\r\n"]}

package/miniprogram_dist/switch/index.json

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

package/miniprogram_dist/switch/index.wxml

@@ -0,0 +1,21 @@
+<view 
+  class="sky-switch sky-switch--{{ type }} sky-switch--{{ size }} {{ checked ? 'sky-switch--checked' : '' }} {{ disabled || loading ? 'sky-switch--disabled' : '' }} {{ loading ? 'sky-switch--loading' : '' }}"
+  style="{{ customStyle }}"
+  bindtap="onTap"
+>
+  <!-- 胶囊内嵌状态文字 (Active / Inactive) -->
+  <text 
+    wx:if="{{ checked && activeText }}" 
+    class="sky-switch__label sky-switch__label--active"
+  >{{ activeText }}</text>
+  
+  <text 
+    wx:if="{{ !checked && inactiveText }}" 
+    class="sky-switch__label sky-switch__label--inactive"
+  >{{ inactiveText }}</text>
+
+  <!-- 滑块节点 -->
+  <view class="sky-switch__node">
+    <view wx:if="{{ loading }}" class="sky-switch__loading"></view>
+  </view>
+</view>

package/miniprogram_dist/switch/index.wxss

@@ -0,0 +1,198 @@
+@charset "UTF-8";
+/* ========================================== */
+/* Skyline-UI Switch 开关组件样式 (Sass)      */
+/* ========================================== */
+/* 60 - 2 * 4 */
+/* 104 - 52 - 2 * 4 */
+/* 48 - 2 * 3 */
+/* 84 - 42 - 2 * 3 */
+.sky-switch {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  cursor: pointer;
+  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  /* 极致的高级防直角打磨细节 */
+  overflow: hidden;
+  outline: none;
+  -webkit-tap-highlight-color: transparent; /* 彻底消除移动端点击时默认的半透明直角高亮框 */
+  /* 经典未选中背景 (克制中性灰) */
+  background-color: #dee2e6;
+  /* ==================== 尺寸变体 ==================== */
+}
+.sky-switch--normal {
+  width: 104rpx;
+  height: 60rpx;
+  border-radius: 9999rpx;
+  padding: 4rpx;
+}
+.sky-switch--normal .sky-switch__node {
+  width: 52rpx;
+  height: 52rpx;
+}
+.sky-switch--normal {
+  /* normal 状态下的字号与定位 */
+}
+.sky-switch--normal .sky-switch__label {
+  font-size: 20rpx;
+}
+.sky-switch--normal .sky-switch__label--active {
+  left: 20rpx;
+}
+.sky-switch--normal .sky-switch__label--inactive {
+  right: 20rpx;
+}
+.sky-switch--small {
+  width: 84rpx;
+  height: 48rpx;
+  border-radius: 9999rpx;
+  padding: 3rpx;
+}
+.sky-switch--small .sky-switch__node {
+  width: 42rpx;
+  height: 42rpx;
+}
+.sky-switch--small {
+  /* small 状态下的字号与定位 */
+}
+.sky-switch--small .sky-switch__label {
+  font-size: 16rpx;
+}
+.sky-switch--small .sky-switch__label--active {
+  left: 14rpx;
+}
+.sky-switch--small .sky-switch__label--inactive {
+  right: 14rpx;
+}
+.sky-switch {
+  /* ==================== 状态内嵌文本 (Inline Text) ==================== */
+}
+.sky-switch__label {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  line-height: 1;
+  z-index: 1; /* 保证文字处于背景之上，但会被滑块自然覆盖 */
+  user-select: none;
+  pointer-events: none;
+  /* 伴随状态淡入 */
+  animation: label-fade-anim 200ms ease both;
+}
+.sky-switch__label--active {
+  color: #ffffff;
+}
+.sky-switch__label--inactive {
+  color: #adb5bd; /* 优雅的中性灰 */
+}
+.sky-switch {
+  /* ==================== 内部滑块 (Premium Node) ==================== */
+}
+.sky-switch__node {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
+  border-radius: 9999rpx;
+  z-index: 2; /* 确保滑块在文字之上，达成完美的遮挡拟物感 */
+  /* 淡雅多重灰阶阴影 (常规但极致高级) */
+  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.08), 0 2rpx 4rpx rgba(0, 0, 0, 0.03);
+  /* 使用 translate3d 触发合成器硬件加速位移 */
+  transform: translate3d(0, 0, 0);
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.sky-switch {
+  /* ==================== 状态变体 ==================== */
+  /* 1. 选中态 (Checked) */
+}
+.sky-switch--checked.sky-switch--normal .sky-switch__node {
+  transform: translate3d(44rpx, 0, 0);
+}
+.sky-switch--checked.sky-switch--small .sky-switch__node {
+  transform: translate3d(36rpx, 0, 0);
+}
+.sky-switch {
+  /* 2. 禁用与加载态 (Disabled / Loading) */
+}
+.sky-switch--disabled {
+  opacity: 0.55;
+  pointer-events: none; /* 彻底失效 */
+}
+.sky-switch {
+  /* ==================== 按压微拉伸形变 (Micro-interaction) ==================== */
+}
+.sky-switch:active:not(.sky-switch--disabled) {
+  /* 2a. 未选中态按压：滑块朝右方拉伸 */
+}
+.sky-switch:active:not(.sky-switch--disabled):not(.sky-switch--checked).sky-switch--normal .sky-switch__node {
+  width: 60rpx; /* 52 -> 60rpx */
+}
+.sky-switch:active:not(.sky-switch--disabled):not(.sky-switch--checked).sky-switch--small .sky-switch__node {
+  width: 48rpx; /* 42 -> 48rpx */
+}
+.sky-switch:active:not(.sky-switch--disabled) {
+  /* 2b. 选中态按压：滑块向左方拉伸 (通过平移回缩 + 宽度增加实现向左挤压效果) */
+}
+.sky-switch:active:not(.sky-switch--disabled).sky-switch--checked.sky-switch--normal .sky-switch__node {
+  width: 60rpx;
+  transform: translate3d(36rpx, 0, 0);
+}
+.sky-switch:active:not(.sky-switch--disabled).sky-switch--checked.sky-switch--small .sky-switch__node {
+  width: 48rpx;
+  transform: translate3d(30rpx, 0, 0);
+}
+.sky-switch {
+  /* ==================== 主题色体系 (HSL Colors) ==================== */
+}
+.sky-switch--checked.sky-switch--primary {
+  background-color: hsl(250, 85%, 55%);
+}
+.sky-switch--checked.sky-switch--success {
+  background-color: hsl(150, 80%, 40%);
+}
+.sky-switch--checked.sky-switch--warning {
+  background-color: hsl(35, 90%, 50%);
+}
+.sky-switch--checked.sky-switch--danger {
+  background-color: hsl(355, 85%, 55%);
+}
+.sky-switch--checked.sky-switch--info {
+  background-color: hsl(200, 85%, 50%);
+}
+.sky-switch {
+  /* ==================== 纯 CSS 物理手绘 Loading 图标 ==================== */
+}
+.sky-switch__loading {
+  box-sizing: border-box;
+  width: 50%;
+  height: 50%;
+  border: 3rpx solid #dee2e6;
+  border-radius: 9999rpx;
+  /* 形成四分之三圆环缺口 */
+  border-top-color: transparent;
+  /* Skyline 级的纯合成器线程旋转动画 */
+  animation: sky-rotate 0.8s linear infinite;
+}
+
+/* ==================== 旋转关键帧 ==================== */
+@keyframes sky-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* ==================== 文字淡现关键帧 ==================== */
+@keyframes label-fade-anim {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/miniprogram_dist/switch/index.wxss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["switch/index.scss","common/style/theme.scss","common/style/mixins.scss"],"names":[],"mappings":";AAGA;AACA;AACA;AAKiC;AACA;AAKD;AACA;AAEhC;EACE;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA,kBCgBiB;ADdjB;;AAEA;EACE,OA9BkB;EA+BlB,QA9BmB;EA+BnB,eC2BsB;ED1BtB,SA/BoB;;AAiCpB;EACE,OAjCoB;EAkCpB,QAlCoB;;AA0BxB;AAWE;;AACA;EACE;;AAEA;EACE;;AAGF;EACE;;AAKN;EACE,OAjDiB;EAkDjB,QAjDkB;EAkDlB,eCEsB;EDDtB,SAlDmB;;AAoDnB;EACE,OApDmB;EAqDnB,QArDmB;;AA6CvB;AAWE;;AACA;EACE;;AAEA;EACE;;AAGF;EACE;;AA9DR;AAmEE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;;AAEA;EACE,OC5DY;;AD+Dd;EACE,OC3Da,SD2Da;;AAzFhC;AA6FE;;AAEA;EEnGA;EACA;EACA;EACA;EFkGE,kBCxEc;EDyEd,eCnDsB;EDoDtB;AAEA;EACA;AAGA;EACA;EACA;;AA3GJ;AA+GE;AAEA;;AAGI;EACE;;AAIF;EACE;;AA1HR;AA+HE;;AACA;EACE;EACA;;AAlIJ;AAqIE;;AAEA;AACE;;AAGI;EACE;;AAIF;EACE;;AAVR;AAeE;;AAGI;EACE;EACA;;AAIF;EACE;EACA;;AAjKV;AAuKE;;AAEA;EACE,kBCpLgB;;ADuLlB;EACE,kBClLgB;;ADqLlB;EACE,kBClLgB;;ADqLlB;EACE,kBClLe;;ADqLjB;EACE,kBClLa;;ADRjB;AA6LE;;AAEA;EACE;EACA;EACA;EACA;EACA,eCrJsB;ADuJtB;EACA;AAEA;EACA;;;AAIJ;AACA;EACE;IACE;;EAEF;IACE;;;AAIJ;AACA;EACE;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 Switch 开关组件样式 (Sass)      */\n/* ========================================== */\n\n$switch-normal-width: 104rpx;\n$switch-normal-height: 60rpx;\n$switch-normal-padding: 4rpx;\n$switch-normal-node-size: 52rpx; /* 60 - 2 * 4 */\n$switch-normal-translate: 44rpx; /* 104 - 52 - 2 * 4 */\n\n$switch-small-width: 84rpx;\n$switch-small-height: 48rpx;\n$switch-small-padding: 3rpx;\n$switch-small-node-size: 42rpx; /* 48 - 2 * 3 */\n$switch-small-translate: 36rpx; /* 84 - 42 - 2 * 3 */\n\n.sky-switch {\n  position: relative;\n  box-sizing: border-box;\n  display: inline-block;\n  cursor: pointer;\n  transition: background-color $sky-transition-duration $sky-transition-timing;\n  \n  /* 极致的高级防直角打磨细节 */\n  overflow: hidden;\n  outline: none;\n  -webkit-tap-highlight-color: transparent; /* 彻底消除移动端点击时默认的半透明直角高亮框 */\n  \n  /* 经典未选中背景 (克制中性灰) */\n  background-color: $sky-color-gray-4;\n  \n  /* ==================== 尺寸变体 ==================== */\n  \n  &--normal {\n    width: $switch-normal-width;\n    height: $switch-normal-height;\n    border-radius: $sky-border-radius-round;\n    padding: $switch-normal-padding;\n    \n    .sky-switch__node {\n      width: $switch-normal-node-size;\n      height: $switch-normal-node-size;\n    }\n\n    /* normal 状态下的字号与定位 */\n    .sky-switch__label {\n      font-size: 20rpx;\n      \n      &--active {\n        left: 20rpx;\n      }\n      \n      &--inactive {\n        right: 20rpx;\n      }\n    }\n  }\n  \n  &--small {\n    width: $switch-small-width;\n    height: $switch-small-height;\n    border-radius: $sky-border-radius-round;\n    padding: $switch-small-padding;\n    \n    .sky-switch__node {\n      width: $switch-small-node-size;\n      height: $switch-small-node-size;\n    }\n\n    /* small 状态下的字号与定位 */\n    .sky-switch__label {\n      font-size: 16rpx;\n      \n      &--active {\n        left: 14rpx;\n      }\n      \n      &--inactive {\n        right: 14rpx;\n      }\n    }\n  }\n\n  /* ==================== 状态内嵌文本 (Inline Text) ==================== */\n  &__label {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: 700;\n    line-height: 1;\n    z-index: 1; /* 保证文字处于背景之上，但会被滑块自然覆盖 */\n    user-select: none;\n    pointer-events: none;\n    \n    /* 伴随状态淡入 */\n    animation: label-fade-anim 200ms ease both;\n    \n    &--active {\n      color: $sky-color-white;\n    }\n    \n    &--inactive {\n      color: $sky-color-gray-5; /* 优雅的中性灰 */\n    }\n  }\n\n  /* ==================== 内部滑块 (Premium Node) ==================== */\n  \n  &__node {\n    @include flex-center;\n    background-color: $sky-color-white;\n    border-radius: $sky-border-radius-round;\n    z-index: 2; /* 确保滑块在文字之上，达成完美的遮挡拟物感 */\n    \n    /* 淡雅多重灰阶阴影 (常规但极致高级) */\n    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.08), \n                0 2rpx 4rpx rgba(0, 0, 0, 0.03);\n                \n    /* 使用 translate3d 触发合成器硬件加速位移 */\n    transform: translate3d(0, 0, 0);\n    transition: transform $sky-transition-duration $sky-transition-timing,\n                width $sky-transition-duration $sky-transition-timing;\n  }\n\n  /* ==================== 状态变体 ==================== */\n\n  /* 1. 选中态 (Checked) */\n  &--checked {\n    &.sky-switch--normal {\n      .sky-switch__node {\n        transform: translate3d($switch-normal-translate, 0, 0);\n      }\n    }\n    &.sky-switch--small {\n      .sky-switch__node {\n        transform: translate3d($switch-small-translate, 0, 0);\n      }\n    }\n  }\n  \n  /* 2. 禁用与加载态 (Disabled / Loading) */\n  &--disabled {\n    opacity: 0.55;\n    pointer-events: none; /* 彻底失效 */\n  }\n\n  /* ==================== 按压微拉伸形变 (Micro-interaction) ==================== */\n  \n  &:active:not(.sky-switch--disabled) {\n    /* 2a. 未选中态按压：滑块朝右方拉伸 */\n    &:not(.sky-switch--checked) {\n      &.sky-switch--normal {\n        .sky-switch__node {\n          width: $switch-normal-node-size + 8rpx; /* 52 -> 60rpx */\n        }\n      }\n      &.sky-switch--small {\n        .sky-switch__node {\n          width: $switch-small-node-size + 6rpx; /* 42 -> 48rpx */\n        }\n      }\n    }\n    \n    /* 2b. 选中态按压：滑块向左方拉伸 (通过平移回缩 + 宽度增加实现向左挤压效果) */\n    &.sky-switch--checked {\n      &.sky-switch--normal {\n        .sky-switch__node {\n          width: $switch-normal-node-size + 8rpx;\n          transform: translate3d($switch-normal-translate - 8rpx, 0, 0);\n        }\n      }\n      &.sky-switch--small {\n        .sky-switch__node {\n          width: $switch-small-node-size + 6rpx;\n          transform: translate3d($switch-small-translate - 6rpx, 0, 0);\n        }\n      }\n    }\n  }\n\n  /* ==================== 主题色体系 (HSL Colors) ==================== */\n  \n  &--checked.sky-switch--primary {\n    background-color: $sky-color-primary;\n  }\n  \n  &--checked.sky-switch--success {\n    background-color: $sky-color-success;\n  }\n  \n  &--checked.sky-switch--warning {\n    background-color: $sky-color-warning;\n  }\n  \n  &--checked.sky-switch--danger {\n    background-color: $sky-color-danger;\n  }\n  \n  &--checked.sky-switch--info {\n    background-color: $sky-color-info;\n  }\n\n  /* ==================== 纯 CSS 物理手绘 Loading 图标 ==================== */\n  \n  &__loading {\n    box-sizing: border-box;\n    width: 50%;\n    height: 50%;\n    border: 3rpx solid $sky-color-gray-4;\n    border-radius: $sky-border-radius-round;\n    \n    /* 形成四分之三圆环缺口 */\n    border-top-color: transparent;\n    \n    /* Skyline 级的纯合成器线程旋转动画 */\n    animation: sky-rotate 0.8s linear infinite;\n  }\n}\n\n/* ==================== 旋转关键帧 ==================== */\n@keyframes sky-rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ==================== 文字淡现关键帧 ==================== */\n@keyframes label-fade-anim {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 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","// ==========================================\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/tag/index.js

@@ -0,0 +1,114 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: true // 开启虚拟节点降低 Skyline DOM 层级嵌套
+    },
+    properties: {
+        // 标签类型：default (灰), primary (蓝紫), success (绿), warning (黄), danger (红), info (蔚蓝)
+        type: {
+            type: String,
+            value: 'default'
+        },
+        // 标签尺寸：normal, medium, large
+        size: {
+            type: String,
+            value: 'normal'
+        },
+        // 是否为镂空 Plain 样式 (白底彩框)
+        plain: {
+            type: Boolean,
+            value: false
+        },
+        // 是否为胶囊圆角身段
+        round: {
+            type: Boolean,
+            value: false
+        },
+        // 是否可关闭 (展示右侧微型叉)
+        closeable: {
+            type: Boolean,
+            value: false
+        },
+        // 自定义背景色 (若为 plain 镂空，此色会自动智能演变为边框色)
+        color: {
+            type: String,
+            value: ''
+        },
+        // 自定义文本颜色
+        textColor: {
+            type: String,
+            value: ''
+        },
+        // 附加自定义样式
+        customStyle: {
+            type: String,
+            value: ''
+        }
+    },
+    data: {
+        isClosing: false, // 操纵缩退过渡
+        destroyed: false, // 物理 DOM 卸载
+        tagStyle: '' // 动态行内演变样式
+    },
+    observers: {
+        'plain, color, textColor': function () {
+            this.recalculateStyle();
+        }
+    },
+    lifetimes: {
+        attached() {
+            this.recalculateStyle();
+        },
+        detached() {
+            if (this._timer) {
+                clearTimeout(this._timer);
+            }
+        }
+    },
+    methods: {
+        // 智能折算行内演变样式
+        recalculateStyle() {
+            const { color, textColor, plain } = this.data;
+            const styleArr = [];
+            if (color || textColor) {
+                if (plain) {
+                    /* 镂空状态：白底。color 演化为 border 边框色与 text 文本色 */
+                    styleArr.push('background-color: transparent !important;');
+                    const finalBorderColor = color || textColor;
+                    const finalTextColor = textColor || color;
+                    if (finalBorderColor) {
+                        styleArr.push(`border-color: ${finalBorderColor} !important;`);
+                    }
+                    if (finalTextColor) {
+                        styleArr.push(`color: ${finalTextColor} !important;`);
+                    }
+                }
+                else {
+                    /* 填充状态：彩色背景 */
+                    if (color) {
+                        styleArr.push(`background-color: ${color} !important;`);
+                        styleArr.push(`border-color: ${color} !important;`); // 边框也同步成底色以防穿帮
+                    }
+                    if (textColor) {
+                        styleArr.push(`color: ${textColor} !important;`);
+                    }
+                }
+            }
+            this.setData({
+                tagStyle: styleArr.join(' ')
+            });
+        },
+        // 优雅过渡关闭
+        onClose() {
+            // 1. 先触发闭合过渡
+            this.setData({ isClosing: true });
+            // 2. 待 200ms 弹性缩退动画播放完毕后，执行物理卸载，并向外抛出事件
+            this._timer = setTimeout(() => {
+                this.setData({ destroyed: true });
+                this.triggerEvent('close');
+            }, 200);
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/miniprogram_dist/tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tag/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    // 标签类型：default (灰), primary (蓝紫), success (绿), warning (黄), danger (红), info (蔚蓝)\r\n    type: {\r\n      type: String,\r\n      value: 'default'\r\n    },\r\n    // 标签尺寸：normal, medium, large\r\n    size: {\r\n      type: String,\r\n      value: 'normal'\r\n    },\r\n    // 是否为镂空 Plain 样式 (白底彩框)\r\n    plain: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 是否为胶囊圆角身段\r\n    round: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 是否可关闭 (展示右侧微型叉)\r\n    closeable: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 自定义背景色 (若为 plain 镂空，此色会自动智能演变为边框色)\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    customStyle: {\r\n      type: String,\r\n      value: ''\r\n    }\r\n  },\r\n\r\n  data: {\r\n    isClosing: false,   // 操纵缩退过渡\r\n    destroyed: false,   // 物理 DOM 卸载\r\n    tagStyle: ''        // 动态行内演变样式\r\n  },\r\n\r\n  observers: {\r\n    'plain, color, textColor': function() {\r\n      this.recalculateStyle();\r\n    }\r\n  },\r\n\r\n  lifetimes: {\r\n    attached() {\r\n      this.recalculateStyle();\r\n    },\r\n    detached() {\r\n      if ((this as any)._timer) {\r\n        clearTimeout((this as any)._timer);\r\n      }\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    // 智能折算行内演变样式\r\n    recalculateStyle() {\r\n      const { color, textColor, plain } = this.data;\r\n      const styleArr: string[] = [];\r\n\r\n      if (color || textColor) {\r\n        if (plain) {\r\n          /* 镂空状态：白底。color 演化为 border 边框色与 text 文本色 */\r\n          styleArr.push('background-color: transparent !important;');\r\n          const finalBorderColor = color || textColor;\r\n          const finalTextColor = textColor || color;\r\n          \r\n          if (finalBorderColor) {\r\n            styleArr.push(`border-color: ${finalBorderColor} !important;`);\r\n          }\r\n          if (finalTextColor) {\r\n            styleArr.push(`color: ${finalTextColor} !important;`);\r\n          }\r\n        } else {\r\n          /* 填充状态：彩色背景 */\r\n          if (color) {\r\n            styleArr.push(`background-color: ${color} !important;`);\r\n            styleArr.push(`border-color: ${color} !important;`); // 边框也同步成底色以防穿帮\r\n          }\r\n          if (textColor) {\r\n            styleArr.push(`color: ${textColor} !important;`);\r\n          }\r\n        }\r\n      }\r\n\r\n      this.setData({\r\n        tagStyle: styleArr.join(' ')\r\n      });\r\n    },\r\n\r\n    // 优雅过渡关闭\r\n    onClose() {\r\n      // 1. 先触发闭合过渡\r\n      this.setData({ isClosing: true });\r\n\r\n      // 2. 待 200ms 弹性缩退动画播放完毕后，执行物理卸载，并向外抛出事件\r\n      (this as any)._timer = setTimeout(() => {\r\n        this.setData({ destroyed: true });\r\n        this.triggerEvent('close');\r\n      }, 200);\r\n    }\r\n  }\r\n});\r\n"]}

package/miniprogram_dist/tag/index.json

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

package/miniprogram_dist/tag/index.wxml

@@ -0,0 +1,19 @@
+<view 
+  wx:if="{{ !destroyed }}"
+  class="sky-tag {{ type ? 'sky-tag--' + type : '' }} {{ size ? 'sky-tag--' + size : '' }} {{ plain ? 'sky-tag--plain' : '' }} {{ round ? 'sky-tag--round' : '' }} {{ isClosing ? 'sky-tag--closing' : '' }}"
+  style="{{ customStyle }} {{ tagStyle }}"
+>
+  <!-- 标签默认插槽文本内容 -->
+  <text class="sky-tag__text"><slot></slot></text>
+  
+  <!-- 右侧纯 CSS 物理手绘关闭删除叉 -->
+  <view 
+    wx:if="{{ closeable }}" 
+    class="sky-tag__close"
+    hover-class="sky-tag__close--hover"
+    hover-stay-time="70"
+    catchtap="onClose"
+  >
+    <view class="sky-tag__close-icon"></view>
+  </view>
+</view>

package/miniprogram_dist/tag/index.wxss

@@ -0,0 +1,182 @@
+@charset "UTF-8";
+/* ========================================== */
+/* Skyline-UI Tag 标签组件样式 (Sass)         */
+/* ========================================== */
+.sky-tag {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  border-radius: 6rpx; /* 默认微小圆角 (6rpx) */
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  /* 极致防直角 Tap 高亮 */
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  /* 离场过渡属性 */
+  transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1), opacity 200ms ease;
+  /* ==================== 1. 莫兰迪低饱和色系变体 ==================== */
+  /* 灰色默认 */
+}
+.sky-tag--default {
+  background-color: #f1f3f5;
+  border-color: #e9ecef;
+  color: #495057;
+}
+.sky-tag--default.sky-tag--plain {
+  border-color: #dee2e6;
+  color: #868e96;
+}
+.sky-tag {
+  /* 品牌蓝紫 */
+}
+.sky-tag--primary {
+  background-color: #edf2ff;
+  border-color: #edf2ff;
+  color: #3b5bdb;
+}
+.sky-tag--primary.sky-tag--plain {
+  border-color: #3b5bdb;
+  color: #3b5bdb;
+}
+.sky-tag {
+  /* 典雅翠绿 */
+}
+.sky-tag--success {
+  background-color: #ebfbee;
+  border-color: #ebfbee;
+  color: #2b8a3e;
+}
+.sky-tag--success.sky-tag--plain {
+  border-color: #2b8a3e;
+  color: #2b8a3e;
+}
+.sky-tag {
+  /* 琥珀温暖黄 */
+}
+.sky-tag--warning {
+  background-color: #fff9db;
+  border-color: #fff9db;
+  color: #f08c00;
+}
+.sky-tag--warning.sky-tag--plain {
+  border-color: #f08c00;
+  color: #f08c00;
+}
+.sky-tag {
+  /* 珊瑚危险红 */
+}
+.sky-tag--danger {
+  background-color: #ffeef0;
+  border-color: #ffeef0;
+  color: #fa5252;
+}
+.sky-tag--danger.sky-tag--plain {
+  border-color: #fa5252;
+  color: #fa5252;
+}
+.sky-tag {
+  /* 蔚蓝信息蓝 */
+}
+.sky-tag--info {
+  background-color: #e7f5ff;
+  border-color: #e7f5ff;
+  color: #1c7ed6;
+}
+.sky-tag--info.sky-tag--plain {
+  border-color: #1c7ed6;
+  color: #1c7ed6;
+}
+.sky-tag {
+  /* ==================== 2. 镂空样式 (白底彩边，继承于变体) ==================== */
+}
+.sky-tag--plain {
+  background-color: #ffffff !important;
+}
+.sky-tag {
+  /* ==================== 3. 尺寸规范 (呼吸感内边距) ==================== */
+  /* 精致小号 */
+}
+.sky-tag--normal {
+  height: 38rpx;
+  padding: 0 10rpx;
+  font-size: 20rpx;
+}
+.sky-tag {
+  /* 匀称中号 */
+}
+.sky-tag--medium {
+  height: 46rpx;
+  padding: 0 16rpx;
+  font-size: 24rpx;
+}
+.sky-tag {
+  /* 大气大号 */
+}
+.sky-tag--large {
+  height: 54rpx;
+  padding: 0 20rpx;
+  font-size: 28rpx;
+}
+.sky-tag {
+  /* ==================== 4. 胶囊圆角 (Round) ==================== */
+}
+.sky-tag--round {
+  border-radius: 999rpx;
+}
+.sky-tag {
+  /* ==================== 5. 右侧纯 CSS 物理手绘关闭小叉 ==================== */
+}
+.sky-tag .sky-tag__close {
+  width: 28rpx;
+  height: 100%;
+  margin-left: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  border-radius: 50%;
+  transition: background-color 150ms ease;
+}
+.sky-tag {
+  /* 点击删除小叉微按压态反馈 */
+}
+.sky-tag .sky-tag__close--hover {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.sky-tag .sky-tag__close-icon {
+  position: relative;
+  width: 14rpx;
+  height: 14rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  /* 采用 currentColor 保证叉的颜色始终与父标签的主题文字色保持绝对一致 */
+}
+.sky-tag .sky-tag__close-icon::before, .sky-tag .sky-tag__close-icon::after {
+  content: " ";
+  position: absolute;
+  width: 2rpx;
+  height: 14rpx;
+  background-color: currentColor;
+  border-radius: 1px;
+}
+.sky-tag .sky-tag__close-icon::before {
+  transform: rotate(45deg);
+}
+.sky-tag .sky-tag__close-icon::after {
+  transform: rotate(-45deg);
+}
+.sky-tag {
+  /* ==================== 6. 点击关闭时平滑缩退动效 (离场) ==================== */
+}
+.sky-tag--closing {
+  opacity: 0;
+  transform: scale(0);
+}