wx-sky-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 sky-ui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,138 @@
+# skyline-ui
+
+#### 介绍
+`skyline-ui` 是专为微信小程序 **Skyline 渲染引擎** 打造的高性能、高颜值、轻量化自定义组件库。
+
+在微信小程序全新推出的 Skyline 渲染引擎下，许多传统的 WebView 组件库面临排版错乱、动画生硬或样式不兼容的严峻挑战。本项目致力于填补这一生态空白，采用全 Flex 盒模型排版、Compositor 硬件加速动画与高颜值的 HSL 色彩体系，为您提供开箱即用、媲美原生 App 的极致流畅组件交互体验。
+
+---
+
+## 已就绪组件地图 (Component Map)
+
+### 基础组件
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| Button 按钮 | 拥有流畅微阴影与按压 HSL 降明度反馈的示范级按钮 | - |
+| Icon 图标 | 支持 SVG 路径、渐变色、多色复杂 SVG 的高性能图标组件 | - |
+| NavBar 导航栏 | 胶囊高度动态避让、向左返回图标后自适应流式标题栏 | - |
+| Cell 单元格 | 纯 CSS 手绘极细右箭头，高档按压态过渡 | [文档](src/cell/README.md) |
+| Tag 标签 | 莫兰迪低饱和度色彩，搭配同色系极淡背景 | - |
+
+### 表单组件
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| Input 输入框 | 支持搜索、一键清除、三大变体以及硬件加速弹性挤压动画 | [文档](src/input/README.md) |
+| Textarea 多行输入 | 支持自动增高、字数统计的多行文本输入框 | [文档](src/textarea/README.md) |
+| Switch 开关 | 滑块四周保留黄金边距，按压时横向微缩扁变形 | [文档](src/switch/README.md) |
+| Radio 单选 | 勾选对勾采用纯 CSS 路径延迟过渡绘制 | [文档](src/radio/README.md) |
+| Checkbox 复选 | 选中时采用高对比、低饱和度 HSL 品牌色 | [文档](src/checkbox/README.md) |
+| Slider 滑块 | 滑块按压伴随呼吸光晕，数字气泡弹性淡入 | [文档](src/slider/README.md) |
+| Rate 评分 | 纯 CSS 物理手绘高精度五角星，点亮时微缩放反弹 | [文档](src/rate/README.md) |
+| SelectInput 多选输入 | Tag 标签堆叠，支持删除和清除 | [文档](src/select-input/README.md) |
+| Uploader 上传 | 支持图片预览、删除的上传组件 | - |
+
+### 反馈组件
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| Dialog 模态弹出框 | 极克制的 scale + opacity 双向平滑缓动渐现 | [文档](src/dialog/README.md) |
+| Toast 轻提示 | 淡入淡出贝塞尔曲线调优，极低包体积 | - |
+| ActionSheet 动作面板 | 上边缘 24rpx 大圆角，按压反馈柔和 | [文档](src/action-sheet/README.md) |
+| PopupSelect 弹出选择 | 高颜值底部半屏大圆角滑出抽屉式滚动选项选择器 | - |
+| DropdownSelect 下拉选择 | 从触发元素下方弹出的轻量级下拉选择器 | - |
+| SwipeCell 滑动单元格 | 基于 gesture-handler，摩擦阻尼经物理公式调优 | [文档](src/swipe-cell/README.md) |
+
+### 展示组件
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| Badge 徽标角标 | 自带极细白边描边，数字字体选用等宽排版 | [文档](src/badge/README.md) |
+| Progress 进度条 | 端点完美圆角，进度变化使用缓动插值 | [文档](src/progress/README.md) |
+| Skeleton 骨架屏 | 亮暗扫光采用极轻柔渐变，约 1.5s 周期 | [文档](src/skeleton/README.md) |
+| Swiper 轮播 | 支持卡片模式、指示器、自动播放的轮播组件 | [文档](src/swiper/README.md) |
+| Subsection 分段器 | 高颜值分段切换控制器 | - |
+
+### 高阶组件
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| Editor 富文本编辑器 | 尊贵悬浮毛玻璃工具栏，视口防遮挡避让 | [文档](src/editor/README.md) |
+| HtmlRenderer 富文本渲染 | 人眼工效阅读排版，多媒体懒加载渐现 | [文档](src/html-renderer/README.md) |
+| DatetimePicker 时间选择 | 内置日历与时间滑块，支持日期时间范围多选 | - |
+| FloatButton 悬浮按钮 | 支持胶囊/圆形形态、Speed Dial 子菜单展开 | - |
+
+---
+
+## 快速开始（使用者）
+
+### 1. 安装
+```bash
+npm install skyline-ui
+```
+
+### 2. 构建 npm
+在微信开发者工具中，点击 **工具 → 构建 npm**，生成 `miniprogram_npm` 目录。
+
+### 3. 按需引入组件
+在页面的 `index.json` 中声明需要的组件（用哪个引哪个）：
+```json
+{
+  "usingComponents": {
+    "sky-button": "skyline-ui/button/index",
+    "sky-icon": "skyline-ui/icon/index",
+    "sky-input": "skyline-ui/input/index"
+  }
+}
+```
+
+### 4. 在 WXML 中使用
+```xml
+<sky-button type="primary" round>确认提交</sky-button>
+<sky-icon name="arrow_right" size="32rpx" />
+<sky-input placeholder="请输入" clearable />
+```
+
+> **按需加载说明**: 微信小程序的 `usingComponents` 天然支持按需加载，只有声明的组件会被打包进最终代码包，未声明的组件不会包含。请勿在 `app.json` 中全局注册组件，否则会导致所有页面加载全部组件。
+
+---
+
+## 自动化构建与开发指南
+
+本项目采用 **TypeScript + Sass/SCSS + Gulp** 的现代化构建体系：
+
+### 1. 安装开发依赖
+```bash
+npm install
+```
+
+### 2. 自动化构建与同步
+```bash
+# 启动一次性编译打包（将 src 编译至 miniprogram_dist 并同步至 example/components）
+npm run build
+
+# 挂起后台实时监听（推荐在本地开发和调整组件源码时开启）
+npm run dev
+
+# 清理构建产物
+npm run clean
+```
+
+### 3. 代码规范检查
+```bash
+# ESLint 检查
+npx eslint src/
+
+# Prettier 格式检查
+npx prettier --check src/
+```
+
+### 4. 微信开发者工具预览联调
+1. 打开微信开发者工具，选择 **"导入项目"**。
+2. 导入本项目下的 [skyline-ui/example](example) 目录。
+3. 在模拟器或真机中预览组件效果。
+
+---
+
+## 设计与视觉规范
+
+*   **全 Flex 排版**：Skyline 引擎不支持 Grid 布局，全量采用高性能 Flex 布局。
+*   **零图标体积压力**：所有图标采用纯 SVG 路径渲染，无需外部字体图标库。
+*   **Compositor 硬件加速动画**：所有动画仅改变 `transform` 与 `opacity`，避开重排机制。
+*   **HSL 色彩体系**：统一使用 HSL 色彩空间，便于全局换肤与主题定制。

package/miniprogram_dist/action-sheet/index.js

@@ -0,0 +1,67 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: true // 开启虚拟节点以降低 Skyline DOM 树嵌套层级
+    },
+    properties: {
+        // 是否显示动作面板
+        show: {
+            type: Boolean,
+            value: false
+        },
+        // 顶部说明区主标题
+        title: {
+            type: String,
+            value: ''
+        },
+        // 顶部说明区副描述文本
+        description: {
+            type: String,
+            value: ''
+        },
+        // 动作选项列表
+        actions: {
+            type: Array,
+            value: []
+        },
+        // 取消按钮文本，为空时不渲染取消按钮
+        cancelText: {
+            type: String,
+            value: '取消'
+        },
+        // 点击遮罩是否触发关闭/取消
+        closeOnClickOverlay: {
+            type: Boolean,
+            value: true
+        }
+    },
+    methods: {
+        // 监听动作项点击
+        onSelect(e) {
+            const { index } = e.currentTarget.dataset;
+            const item = this.data.actions[index];
+            // 若处于禁用态或加载态，拦截所有点击响应
+            if (!item || item.disabled || item.loading) {
+                return;
+            }
+            // 向上抛出选中项及索引，由父级执行业务并受控关闭
+            this.triggerEvent('select', { item, index });
+        },
+        // 监听取消按钮点击
+        onCancel() {
+            this.triggerEvent('cancel');
+            this.triggerEvent('close');
+        },
+        // 监听半透遮罩层点击
+        onClickOverlay() {
+            if (this.data.closeOnClickOverlay) {
+                this.triggerEvent('cancel');
+                this.triggerEvent('close');
+            }
+        },
+        // 空辅助方法，用以拦截背景层滚动穿透
+        noop() { }
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/miniprogram_dist/action-sheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/action-sheet/index.ts"],"names":[],"mappings":";AAAA,SAAS,CAAC;IACR,OAAO,EAAE;QACP,WAAW,EAAE,IAAI,CAAC,8BAA8B;KACjD;IAED,UAAU,EAAE;QACV,WAAW;QACX,IAAI,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,KAAK;SACb;QACD,WAAW;QACX,KAAK,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE;SACV;QACD,aAAa;QACb,WAAW,EAAE;YACX,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE;SACV;QACD,SAAS;QACT,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,EAAE;SACV;QACD,oBAAoB;QACpB,UAAU,EAAE;YACV,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,IAAI;SACZ;QACD,gBAAgB;QAChB,mBAAmB,EAAE;YACnB,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,IAAI;SACZ;KACF;IAED,OAAO,EAAE;QACP,UAAU;QACV,QAAQ,CAAC,CAA8B;YACrC,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC;YAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YAEtC,sBAAsB;YACtB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC3C,OAAO;YACT,CAAC;YAED,0BAA0B;YAC1B,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/C,CAAC;QAED,WAAW;QACX,QAAQ;YACN,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC;QAED,YAAY;QACZ,cAAc;YACZ,IAAI,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBAClC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBAC5B,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC;QAED,oBAAoB;QACpB,IAAI,KAAI,CAAC;KACV;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    // 是否显示动作面板\r\n    show: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 顶部说明区主标题\r\n    title: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 顶部说明区副描述文本\r\n    description: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 动作选项列表\r\n    actions: {\r\n      type: Array,\r\n      value: []\r\n    },\r\n    // 取消按钮文本，为空时不渲染取消按钮\r\n    cancelText: {\r\n      type: String,\r\n      value: '取消'\r\n    },\r\n    // 点击遮罩是否触发关闭/取消\r\n    closeOnClickOverlay: {\r\n      type: Boolean,\r\n      value: true\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    // 监听动作项点击\r\n    onSelect(e: WechatMiniprogram.BaseEvent) {\r\n      const { index } = e.currentTarget.dataset;\r\n      const item = this.data.actions[index];\r\n\r\n      // 若处于禁用态或加载态，拦截所有点击响应\r\n      if (!item || item.disabled || item.loading) {\r\n        return;\r\n      }\r\n\r\n      // 向上抛出选中项及索引，由父级执行业务并受控关闭\r\n      this.triggerEvent('select', { item, index });\r\n    },\r\n\r\n    // 监听取消按钮点击\r\n    onCancel() {\r\n      this.triggerEvent('cancel');\r\n      this.triggerEvent('close');\r\n    },\r\n\r\n    // 监听半透遮罩层点击\r\n    onClickOverlay() {\r\n      if (this.data.closeOnClickOverlay) {\r\n        this.triggerEvent('cancel');\r\n        this.triggerEvent('close');\r\n      }\r\n    },\r\n\r\n    // 空辅助方法，用以拦截背景层滚动穿透\r\n    noop() {}\r\n  }\r\n});\r\n"]}

package/miniprogram_dist/action-sheet/index.json

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

package/miniprogram_dist/action-sheet/index.wxml

@@ -0,0 +1,62 @@
+<view 
+  class="sky-action-sheet {{ show ? 'sky-action-sheet--show' : '' }}" 
+  catchtouchmove="noop"
+>
+  <!-- 黑色柔和半透遮罩层 -->
+  <view class="sky-action-sheet__mask" bindtap="onClickOverlay"></view>
+
+  <!-- 动作面板卡片主体 (从底部向上滑出) -->
+  <view class="sky-action-sheet__content">
+    <!-- 头部说明区 -->
+    <view 
+      wx:if="{{ title || description }}" 
+      class="sky-action-sheet__header"
+    >
+      <view wx:if="{{ title }}" class="sky-action-sheet__title">{{ title }}</view>
+      <view wx:if="{{ description }}" class="sky-action-sheet__description">{{ description }}</view>
+    </view>
+
+    <!-- 选项列表 -->
+    <view class="sky-action-sheet__list">
+      <view 
+        wx:for="{{ actions }}" 
+        wx:key="index"
+        class="sky-action-sheet__item {{ item.disabled ? 'sky-action-sheet__item--disabled' : '' }} {{ item.danger ? 'sky-action-sheet__item--danger' : '' }}"
+        hover-class="{{ item.disabled ? 'none' : 'sky-action-sheet__item--hover' }}"
+        hover-stay-time="70"
+        data-index="{{ index }}"
+        bindtap="onSelect"
+      >
+        <!-- 加载状态反馈 (可选，增加高质感体验) -->
+        <view wx:if="{{ item.loading }}" class="sky-action-sheet__loading"></view>
+        
+        <block wx:else>
+          <!-- 动作项主标题 -->
+          <view 
+            class="sky-action-sheet__name" 
+            style="{{ item.color ? 'color: ' + item.color : '' }}"
+          >
+            {{ item.name }}
+          </view>
+          
+          <!-- 动作项辅助描述文字 -->
+          <view wx:if="{{ item.subname }}" class="sky-action-sheet__subname">{{ item.subname }}</view>
+        </block>
+      </view>
+    </view>
+
+    <!-- 16rpx 厚实分层隔离条 -->
+    <view wx:if="{{ cancelText }}" class="sky-action-sheet__gap"></view>
+
+    <!-- 独立取消按钮 (自适应全面屏安全区 padding) -->
+    <view 
+      wx:if="{{ cancelText }}" 
+      class="sky-action-sheet__cancel"
+      hover-class="sky-action-sheet__cancel--hover"
+      hover-stay-time="70"
+      bindtap="onCancel"
+    >
+      {{ cancelText }}
+    </view>
+  </view>
+</view>

package/miniprogram_dist/action-sheet/index.wxss

@@ -0,0 +1,227 @@
+@charset "UTF-8";
+/* ========================================== */
+/* Skyline-UI ActionSheet 动作面板样式 (Sass) */
+/* ========================================== */
+.sky-action-sheet {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2000;
+  /* 默认完全隐藏 */
+  visibility: hidden;
+  pointer-events: none;
+  transition: visibility 240ms cubic-bezier(0.4, 0, 0.2, 1);
+  /* ==================== 1. 背景遮罩层 ==================== */
+}
+.sky-action-sheet .sky-action-sheet__mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.45); /* 柔和深色半透 */
+  z-index: 1;
+  /* 默认完全透明，随 show 激活渐显 */
+  opacity: 0;
+  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.sky-action-sheet {
+  /* ==================== 2. 动作面板卡片主体 (从底部向上滑出) ==================== */
+}
+.sky-action-sheet .sky-action-sheet__content {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #ffffff;
+  border-radius: 24rpx 24rpx 0 0; /* 高雅头部大圆角 */
+  z-index: 2;
+  overflow: hidden; /* 裁剪内部节点，确保圆角包圆 */
+  display: flex;
+  flex-direction: column;
+  /* 高级悬浮环境投影 */
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  /* 极致的高级防直角打磨细节 */
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  /* 全面屏自适应安全边距 */
+  padding-bottom: env(safe-area-inset-bottom);
+  /* 核心退场过渡：平滑向下滑出 */
+  transform: translate3d(0, 100%, 0);
+  transition: transform 240ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.sky-action-sheet {
+  /* ==================== 3. 激活显示状态 (由父级 show 驱动) ==================== */
+}
+.sky-action-sheet--show {
+  visibility: visible;
+  pointer-events: auto;
+}
+.sky-action-sheet--show .sky-action-sheet__mask {
+  opacity: 1; /* 遮罩渐显 */
+}
+.sky-action-sheet--show .sky-action-sheet__content {
+  transform: translate3d(0, 0, 0); /* 主体滑入锁位 */
+}
+.sky-action-sheet {
+  /* ==================== 4. 头部标题及副描述排版区 ==================== */
+}
+.sky-action-sheet .sky-action-sheet__header {
+  position: relative;
+  padding: 34rpx 40rpx; /* 呼吸感宽裕留白，避免窒息拥挤 */
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
+  /* 底部 1px 极细底分割线 */
+}
+.sky-action-sheet .sky-action-sheet__header::after {
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: #f1f3f5;
+  transform: scaleY(0.5);
+  transform-origin: center bottom;
+}
+.sky-action-sheet .sky-action-sheet__title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #212529;
+  line-height: 1.4;
+}
+.sky-action-sheet .sky-action-sheet__description {
+  font-size: 26rpx;
+  color: #868e96;
+  line-height: 1.5;
+  margin-top: 10rpx;
+}
+.sky-action-sheet {
+  /* ==================== 5. 选项列表项目 (黄金工效 112rpx 高度) ==================== */
+}
+.sky-action-sheet .sky-action-sheet__list {
+  display: flex;
+  flex-direction: column;
+}
+.sky-action-sheet .sky-action-sheet__item {
+  position: relative;
+  height: 112rpx;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
+  cursor: pointer;
+  /* 彻底清除移动端默认直角高亮 */
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color 150ms ease;
+  /* 选项与选项之间 1px 极细底边线隔离 */
+}
+.sky-action-sheet .sky-action-sheet__item::after {
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: #f1f3f5;
+  transform: scaleY(0.5);
+  transform-origin: center bottom;
+}
+.sky-action-sheet .sky-action-sheet__item {
+  /* 最后一个动作项消除 1px 底分割线，防止重叠 */
+}
+.sky-action-sheet .sky-action-sheet__item:last-child::after {
+  display: none;
+}
+.sky-action-sheet .sky-action-sheet__name {
+  font-size: 30rpx;
+  color: #212529;
+  font-weight: 500;
+}
+.sky-action-sheet .sky-action-sheet__subname {
+  font-size: 22rpx;
+  color: #adb5bd;
+  margin-top: 4rpx;
+}
+.sky-action-sheet {
+  /* 选项按压变深 5% 反馈 (温润如玉) */
+}
+.sky-action-sheet .sky-action-sheet__item--hover {
+  background-color: #f8f9fa !important;
+}
+.sky-action-sheet {
+  /* 警示选项 (珊瑚红) */
+}
+.sky-action-sheet .sky-action-sheet__item--danger .sky-action-sheet__name {
+  color: hsl(355, 85%, 55%) !important;
+  font-weight: 600;
+}
+.sky-action-sheet {
+  /* 禁用项状态 (灰度置灰，不可点击) */
+}
+.sky-action-sheet .sky-action-sheet__item--disabled {
+  cursor: not-allowed;
+}
+.sky-action-sheet .sky-action-sheet__item--disabled .sky-action-sheet__name {
+  color: #dee2e6 !important;
+}
+.sky-action-sheet .sky-action-sheet__item--disabled .sky-action-sheet__subname {
+  color: #e9ecef !important;
+}
+.sky-action-sheet {
+  /* 加载中转圈的简单手写动效 (高品质细节) */
+}
+.sky-action-sheet .sky-action-sheet__loading {
+  width: 36rpx;
+  height: 36rpx;
+  border: 3rpx solid #e9ecef;
+  border-top-color: hsl(250, 85%, 55%);
+  border-radius: 50%;
+  animation: sky-spin 800ms linear infinite;
+}
+.sky-action-sheet {
+  /* ==================== 6. 厚实隔离条 (16rpx 高档浅灰) ==================== */
+}
+.sky-action-sheet .sky-action-sheet__gap {
+  height: 16rpx;
+  background-color: #f8f9fa;
+}
+.sky-action-sheet {
+  /* ==================== 7. 独立取消按钮 ==================== */
+}
+.sky-action-sheet .sky-action-sheet__cancel {
+  height: 112rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
+  font-size: 30rpx;
+  color: #495057;
+  font-weight: 500;
+  cursor: pointer;
+  /* 彻底清除移动端默认直角高亮 */
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color 150ms ease;
+}
+.sky-action-sheet .sky-action-sheet__cancel--hover {
+  background-color: #f8f9fa !important;
+}
+
+@keyframes sky-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/miniprogram_dist/action-sheet/index.wxss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["action-sheet/index.scss","common/style/mixins.scss","common/style/theme.scss"],"names":[],"mappings":";AAGA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EAEA;AAEA;;AACA;ECMA;EACA;EACA;EACA;EACA;EDRE;EACA;AAEA;EACA;EACA;;AAtBJ;AAyBE;;AACA;EACE;EACA;EACA;EACA;EACA,kBEMc;EFLd;EACA;EACA;EACA;EACA;AAEA;EACA,YEYY;AFVZ;EACA;EACA;AAEA;EACA;AAEA;EACA;EACA;;AAlDJ;AAqDE;;AACA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AA/DN;AAmEE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBEvCc;AFyCd;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBE/Ca;EFgDb;EACA;;AAIJ;EACE;EACA;EACA,OEjDe;EFkDf;;AAGF;EACE;EACA,OE1De;EF2Df;EACA;;AAvGJ;AA0GE;;AACA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBEnFc;EFoFd;AAEA;EACA;EACA;EAEA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBElGa;EFmGb;EACA;;AA3BJ;AA8BE;;AACA;EACE;;AAIJ;EACE;EACA,OExGe;EFyGf;;AAGF;EACE;EACA,OElHe;EFmHf;;AA7JJ;AAgKE;;AACA;EACE;;AAlKJ;AAqKE;;AAEE;EACE;EACA;;AAzKN;AA6KE;;AACA;EACE;;AAEA;EACE;;AAGF;EACE;;AAtLN;AA0LE;;AACA;EACE;EACA;EACA;EACA,kBE7LgB;EF8LhB;EACA;;AAjMJ;AAoME;;AACA;EACE;EACA,kBEjKe;;AFtCnB;AA0ME;;AACA;EACE;EACA;EACA;EACA;EACA,kBE3Kc;EF4Kd;EACA,OEtKe;EFuKf;EACA;AAEA;EACA;EACA;EAEA;;AAGF;EACE;;;AAIJ;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 ActionSheet 动作面板样式 (Sass) */\n/* ========================================== */\n\n.sky-action-sheet {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 2000;\n  \n  /* 默认完全隐藏 */\n  visibility: hidden;\n  pointer-events: none;\n  \n  transition: visibility 240ms $sky-transition-timing;\n\n  /* ==================== 1. 背景遮罩层 ==================== */\n  .sky-action-sheet__mask {\n    @include absolute-full;\n    background-color: rgba(0, 0, 0, 0.45); /* 柔和深色半透 */\n    z-index: 1;\n    \n    /* 默认完全透明，随 show 激活渐显 */\n    opacity: 0;\n    transition: opacity 240ms $sky-transition-timing;\n  }\n\n  /* ==================== 2. 动作面板卡片主体 (从底部向上滑出) ==================== */\n  .sky-action-sheet__content {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: $sky-color-white;\n    border-radius: 24rpx 24rpx 0 0; /* 高雅头部大圆角 */\n    z-index: 2;\n    overflow: hidden; /* 裁剪内部节点，确保圆角包圆 */\n    display: flex;\n    flex-direction: column;\n    \n    /* 高级悬浮环境投影 */\n    box-shadow: $sky-shadow-lg;\n    \n    /* 极致的高级防直角打磨细节 */\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n\n    /* 全面屏自适应安全边距 */\n    padding-bottom: env(safe-area-inset-bottom);\n    \n    /* 核心退场过渡：平滑向下滑出 */\n    transform: translate3d(0, 100%, 0);\n    transition: transform 240ms cubic-bezier(0.25, 1, 0.5, 1);\n  }\n\n  /* ==================== 3. 激活显示状态 (由父级 show 驱动) ==================== */\n  &--show {\n    visibility: visible;\n    pointer-events: auto;\n    \n    .sky-action-sheet__mask {\n      opacity: 1; /* 遮罩渐显 */\n    }\n    \n    .sky-action-sheet__content {\n      transform: translate3d(0, 0, 0); /* 主体滑入锁位 */\n    }\n  }\n\n  /* ==================== 4. 头部标题及副描述排版区 ==================== */\n  .sky-action-sheet__header {\n    position: relative;\n    padding: 34rpx 40rpx; /* 呼吸感宽裕留白，避免窒息拥挤 */\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background-color: $sky-color-white;\n\n    /* 底部 1px 极细底分割线 */\n    &::after {\n      content: \" \";\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: 1px;\n      background-color: $sky-color-gray-2;\n      transform: scaleY(0.5);\n      transform-origin: center bottom;\n    }\n  }\n\n  .sky-action-sheet__title {\n    font-size: 30rpx;\n    font-weight: 600;\n    color: $sky-color-gray-9;\n    line-height: 1.4;\n  }\n\n  .sky-action-sheet__description {\n    font-size: 26rpx;\n    color: $sky-color-gray-6;\n    line-height: 1.5;\n    margin-top: 10rpx;\n  }\n\n  /* ==================== 5. 选项列表项目 (黄金工效 112rpx 高度) ==================== */\n  .sky-action-sheet__list {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .sky-action-sheet__item {\n    position: relative;\n    height: 112rpx;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background-color: $sky-color-white;\n    cursor: pointer;\n    \n    /* 彻底清除移动端默认直角高亮 */\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    \n    transition: background-color 150ms ease;\n\n    /* 选项与选项之间 1px 极细底边线隔离 */\n    &::after {\n      content: \" \";\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: 1px;\n      background-color: $sky-color-gray-2;\n      transform: scaleY(0.5);\n      transform-origin: center bottom;\n    }\n\n    /* 最后一个动作项消除 1px 底分割线，防止重叠 */\n    &:last-child::after {\n      display: none;\n    }\n  }\n\n  .sky-action-sheet__name {\n    font-size: 30rpx;\n    color: $sky-color-gray-9;\n    font-weight: 500;\n  }\n\n  .sky-action-sheet__subname {\n    font-size: 22rpx;\n    color: $sky-color-gray-5;\n    margin-top: 4rpx;\n  }\n\n  /* 选项按压变深 5% 反馈 (温润如玉) */\n  .sky-action-sheet__item--hover {\n    background-color: $sky-color-gray-1 !important;\n  }\n\n  /* 警示选项 (珊瑚红) */\n  .sky-action-sheet__item--danger {\n    .sky-action-sheet__name {\n      color: $sky-color-danger !important;\n      font-weight: 600;\n    }\n  }\n\n  /* 禁用项状态 (灰度置灰，不可点击) */\n  .sky-action-sheet__item--disabled {\n    cursor: not-allowed;\n    \n    .sky-action-sheet__name {\n      color: $sky-color-gray-4 !important;\n    }\n    \n    .sky-action-sheet__subname {\n      color: $sky-color-gray-3 !important;\n    }\n  }\n\n  /* 加载中转圈的简单手写动效 (高品质细节) */\n  .sky-action-sheet__loading {\n    width: 36rpx;\n    height: 36rpx;\n    border: 3rpx solid $sky-color-gray-3;\n    border-top-color: $sky-color-primary;\n    border-radius: 50%;\n    animation: sky-spin 800ms linear infinite;\n  }\n\n  /* ==================== 6. 厚实隔离条 (16rpx 高档浅灰) ==================== */\n  .sky-action-sheet__gap {\n    height: 16rpx;\n    background-color: $sky-color-gray-1;\n  }\n\n  /* ==================== 7. 独立取消按钮 ==================== */\n  .sky-action-sheet__cancel {\n    height: 112rpx;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: $sky-color-white;\n    font-size: 30rpx;\n    color: $sky-color-gray-7;\n    font-weight: 500;\n    cursor: pointer;\n    \n    /* 彻底清除移动端默认直角高亮 */\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    \n    transition: background-color 150ms ease;\n  }\n\n  .sky-action-sheet__cancel--hover {\n    background-color: $sky-color-gray-1 !important;\n  }\n}\n\n@keyframes sky-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n","// ==========================================\r\n// Skyline-UI Flex 布局与样式混合宏 (SCSS)\r\n// ==========================================\r\n\r\n@mixin flex-row {\r\n  display: flex;\r\n  flex-direction: row;\r\n}\r\n\r\n@mixin flex-column {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n@mixin flex-center {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n@mixin flex-align-center {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n}\r\n\r\n@mixin absolute-full {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n// 文本溢出隐藏 (在微信小程序 Flex 布局下，通常需要在容器上设置 overflow 和 flex)\r\n@mixin text-ellipsis {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n// 多行文本溢出隐藏\r\n@mixin text-ellipsis-multiline($lines: 2) {\r\n  display: -webkit-box;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-line-clamp: $lines;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n// 安全区域底部适配\r\n@mixin safe-area-bottom {\r\n  padding-bottom: constant(safe-area-inset-bottom);\r\n  padding-bottom: env(safe-area-inset-bottom);\r\n}\r\n\r\n// 1px 高清屏边框 (使用 transform 缩放方案)\r\n@mixin hairline-border($color: $sky-color-gray-3, $radius: 0) {\r\n  position: relative;\r\n  &::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 200%;\r\n    height: 200%;\r\n    border: 1px solid $color;\r\n    border-radius: $radius * 2;\r\n    transform: scale(0.5);\r\n    transform-origin: 0 0;\r\n    box-sizing: border-box;\r\n    pointer-events: none;\r\n  }\r\n}\r\n\r\n// 禁用态通用样式\r\n@mixin disabled-state {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n// 按钮重置\r\n@mixin button-reset {\r\n  border: none;\r\n  outline: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  background: none;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n","// ==========================================\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/badge/index.js

@@ -0,0 +1,114 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: true // 开启虚拟节点降低 Skyline DOM 层级嵌套
+    },
+    properties: {
+        // 徽标显示内容 (支持数字或字符串，如 9、'99+'、'NEW')
+        content: {
+            type: null, // 接收任意类型
+            value: ''
+        },
+        // 最大数值上限，超过此限制将自动折算成 max+ (例如 99+)
+        max: {
+            type: Number,
+            value: 99
+        },
+        // 是否渲染为红点小圆点 (只显示红色正圆，忽略数字)
+        dot: {
+            type: Boolean,
+            value: false
+        },
+        // 当数值内容刚好为数字 0 时，是否仍然强行显示
+        showZero: {
+            type: Boolean,
+            value: false
+        },
+        // 徽标背景颜色 (默认危险珊瑚红)
+        color: {
+            type: String,
+            value: ''
+        },
+        // 自定义微调偏移，格式为 [top, right] 单位 rpx (例如 [-10, 10])
+        offset: {
+            type: Array,
+            value: []
+        },
+        // 附加自定义样式
+        customStyle: {
+            type: String,
+            value: ''
+        }
+    },
+    data: {
+        isShow: false, // 操纵显隐
+        displayContent: '', // 页面实际渲染的规整文本
+        offsetStyle: '' // 偏移的行内 style 语句
+    },
+    observers: {
+        'content, max, dot, showZero': function () {
+            this.recalculateBadge();
+        },
+        'offset': function () {
+            this.recalculateOffset();
+        }
+    },
+    lifetimes: {
+        attached() {
+            this.recalculateBadge();
+            this.recalculateOffset();
+        }
+    },
+    methods: {
+        // 核心规整折算逻辑
+        recalculateBadge() {
+            const { content, max, dot, showZero } = this.data;
+            // 1. 判断是否需要显现
+            let isShow = true;
+            if (dot) {
+                // 小红点类型直接显现
+                isShow = true;
+            }
+            else if (content === null || content === undefined || content === '') {
+                // 内容为空，静默隐藏
+                isShow = false;
+            }
+            else if (typeof content === 'number' && content === 0) {
+                // 数字为 0，根据 showZero 配置决定
+                isShow = showZero;
+            }
+            // 2. 精确换算文字内容
+            let displayContent = '';
+            if (!dot && isShow) {
+                const numVal = Number(content);
+                if (!isNaN(numVal) && typeof content !== 'string') {
+                    // 是纯数值，进行超限折算
+                    displayContent = numVal > max ? `${max}+` : String(numVal);
+                }
+                else {
+                    // 是字符串（如 'NEW'、'hot'），直接原样展示
+                    displayContent = String(content);
+                }
+            }
+            this.setData({
+                isShow,
+                displayContent
+            });
+        },
+        // 换算微调偏移位置 style
+        recalculateOffset() {
+            const { offset } = this.data;
+            let offsetStyle = '';
+            if (Array.isArray(offset) && offset.length === 2) {
+                const top = offset[0];
+                const right = offset[1];
+                offsetStyle = `top: ${top}rpx; right: ${right}rpx;`;
+            }
+            this.setData({
+                offsetStyle
+            });
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map