wx-sky-ui 1.0.0

package/miniprogram_dist/dropdown-select/index.wxss

@@ -0,0 +1,189 @@
+.sky-dropdown-select {
+  position: relative;
+  width: 100%;
+}
+
+.sky-dropdown__trigger {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+  height: 88rpx;
+  padding: 0 32rpx;
+  background-color: #ffffff;
+  border: 2rpx solid #e9ecef;
+  border-radius: 12rpx;
+  transition: border-color 0.25s ease, box-shadow 0.25s ease;
+}
+
+.sky-dropdown__trigger--active {
+  border-color: hsl(250, 85%, 55%);
+  box-shadow: 0 0 12rpx rgba(75.225, 42.7125, 237.7875, 0.15);
+}
+
+.sky-dropdown__trigger--disabled {
+  background-color: #f8f9fa;
+  border-color: #e9ecef;
+  opacity: 0.6;
+}
+
+.sky-dropdown__value {
+  font-size: 28rpx;
+  color: #212529;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.sky-dropdown__value--placeholder {
+  color: #adb5bd;
+}
+
+.sky-dropdown__icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48rpx;
+  height: 48rpx;
+  margin-left: 16rpx;
+}
+
+.sky-dropdown__arrow {
+  width: 12rpx;
+  height: 12rpx;
+  border-right: 4rpx solid #adb5bd;
+  border-bottom: 4rpx solid #adb5bd;
+  transform: rotate(45deg);
+  margin-bottom: 4rpx;
+  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.sky-dropdown__arrow--rotated {
+  transform: rotate(-135deg);
+  margin-bottom: -4rpx;
+}
+
+.sky-dropdown__btn-clear {
+  position: relative;
+  width: 32rpx;
+  height: 32rpx;
+}
+.sky-dropdown__btn-clear::before, .sky-dropdown__btn-clear::after {
+  content: "";
+  position: absolute;
+  top: 14rpx;
+  left: 8rpx;
+  width: 16rpx;
+  height: 4rpx;
+  background-color: #adb5bd;
+  border-radius: 2rpx;
+}
+.sky-dropdown__btn-clear::before {
+  transform: rotate(45deg);
+}
+.sky-dropdown__btn-clear::after {
+  transform: rotate(-45deg);
+}
+.sky-dropdown__btn-clear:active::before, .sky-dropdown__btn-clear:active::after {
+  background-color: #495057;
+}
+
+.sky-dropdown__mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  z-index: 998;
+}
+
+.sky-dropdown__panel {
+  position: absolute;
+  top: calc(100% + 8rpx);
+  left: 0;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.98);
+  border-radius: 12rpx;
+  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.05), 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
+  border: 1rpx solid rgba(233, 236, 239, 0.4);
+  overflow: hidden;
+  box-sizing: border-box;
+  z-index: 999;
+  backdrop-filter: blur(20px);
+  animation: dropdown-fade-in 0.25s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.sky-dropdown__list {
+  max-height: 400rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.sky-dropdown__item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 28rpx 32rpx;
+  border-bottom: 2rpx solid #f8f9fa;
+  box-sizing: border-box;
+}
+
+.sky-dropdown__item:last-child {
+  border-bottom: none;
+}
+
+.sky-dropdown__item--active {
+  background-color: #f8f9fa;
+}
+
+.sky-dropdown__item-text {
+  font-size: 28rpx;
+  color: #343a40;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sky-dropdown__item-text--selected {
+  color: hsl(250, 85%, 55%);
+  font-weight: 700;
+}
+
+.sky-dropdown__item-icon-checked {
+  width: 10rpx;
+  height: 20rpx;
+  border-right: 4rpx solid hsl(250, 85%, 55%);
+  border-bottom: 4rpx solid hsl(250, 85%, 55%);
+  transform: rotate(45deg);
+  margin-right: 8rpx;
+  margin-bottom: 6rpx;
+}
+
+.sky-dropdown__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40rpx 0;
+}
+
+.sky-dropdown__empty-text {
+  font-size: 26rpx;
+  color: #adb5bd;
+}
+
+@keyframes dropdown-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["dropdown-select/index.scss","common/style/theme.scss","common/style/mixins.scss"],"names":[],"mappings":"AAGA;EACE;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBC0BgB;EDzBhB;EACA,eC4CqB;ED3CrB;;;AAGF;EACE,cChBkB;EDiBlB;;;AAGF;EACE,kBCeiB;EDdjB,cCgBiB;EDfjB;;;AAGF;EACE;EACA,OCgBiB;EChBjB;EACA;EACA;EFAA;;;AAGF;EACE,OCMiB;;;ADHnB;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCnCe;EDoCf;;AAEF;EAAY;;AACZ;EAAW;;AAGT;EAAsB,kBCxCP;;;AD6CnB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA,eCjDqB;EDkDrB;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,kBCrGiB;;;ADwGnB;EACE;EACA,OCnGiB;EDoGjB;EEnHA;EACA;EACA;;;AFqHF;EACE,OCpJkB;EDqJlB;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA,OCrIiB;;;ADyInB;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.sky-dropdown-select {\n  position: relative;\n  width: 100%;\n}\n\n// 触发器\n.sky-dropdown__trigger {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  width: 100%;\n  height: 88rpx;\n  padding: 0 32rpx;\n  background-color: $sky-color-white;\n  border: 2rpx solid $sky-color-gray-3;\n  border-radius: $sky-border-radius-md;\n  transition: border-color 0.25s ease, box-shadow 0.25s ease;\n}\n\n.sky-dropdown__trigger--active {\n  border-color: $sky-color-primary;\n  box-shadow: 0 0 12rpx rgba($sky-color-primary, 0.15);\n}\n\n.sky-dropdown__trigger--disabled {\n  background-color: $sky-color-gray-1;\n  border-color: $sky-color-gray-3;\n  opacity: 0.6;\n}\n\n.sky-dropdown__value {\n  font-size: 28rpx;\n  color: $sky-color-gray-9;\n  @include text-ellipsis;\n  flex: 1;\n}\n\n.sky-dropdown__value--placeholder {\n  color: $sky-color-gray-5;\n}\n\n.sky-dropdown__icon-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48rpx;\n  height: 48rpx;\n  margin-left: 16rpx;\n}\n\n// 下拉箭头\n.sky-dropdown__arrow {\n  width: 12rpx;\n  height: 12rpx;\n  border-right: 4rpx solid $sky-color-gray-5;\n  border-bottom: 4rpx solid $sky-color-gray-5;\n  transform: rotate(45deg);\n  margin-bottom: 4rpx;\n  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.sky-dropdown__arrow--rotated {\n  transform: rotate(-135deg);\n  margin-bottom: -4rpx;\n}\n\n// 清除按钮\n.sky-dropdown__btn-clear {\n  position: relative;\n  width: 32rpx;\n  height: 32rpx;\n\n  &::before, &::after {\n    content: \"\";\n    position: absolute;\n    top: 14rpx;\n    left: 8rpx;\n    width: 16rpx;\n    height: 4rpx;\n    background-color: $sky-color-gray-5;\n    border-radius: 2rpx;\n  }\n  &::before { transform: rotate(45deg); }\n  &::after { transform: rotate(-45deg); }\n\n  &:active {\n    &::before, &::after { background-color: $sky-color-gray-7; }\n  }\n}\n\n// 全屏透明遮罩\n.sky-dropdown__mask {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n  z-index: 998;\n}\n\n// 下拉面板 (绝对定位在触发器下方)\n.sky-dropdown__panel {\n  position: absolute;\n  top: calc(100% + 8rpx);\n  left: 0;\n  width: 100%;\n  background-color: rgba($sky-color-white, 0.98);\n  border-radius: $sky-border-radius-md;\n  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.05), 0 2rpx 10rpx rgba(0, 0, 0, 0.02);\n  border: 1rpx solid rgba($sky-color-gray-3, 0.4);\n  overflow: hidden;\n  box-sizing: border-box;\n  z-index: 999;\n  backdrop-filter: blur(20px);\n  animation: dropdown-fade-in 0.25s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n// 滚动列表\n.sky-dropdown__list {\n  max-height: 400rpx;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n// 选项\n.sky-dropdown__item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 28rpx 32rpx;\n  border-bottom: 2rpx solid $sky-color-gray-1;\n  box-sizing: border-box;\n}\n\n.sky-dropdown__item:last-child {\n  border-bottom: none;\n}\n\n.sky-dropdown__item--active {\n  background-color: $sky-color-gray-1;\n}\n\n.sky-dropdown__item-text {\n  font-size: 28rpx;\n  color: $sky-color-gray-8;\n  flex: 1;\n  @include text-ellipsis;\n}\n\n.sky-dropdown__item-text--selected {\n  color: $sky-color-primary;\n  font-weight: 700;\n}\n\n// 选中对勾\n.sky-dropdown__item-icon-checked {\n  width: 10rpx;\n  height: 20rpx;\n  border-right: 4rpx solid $sky-color-primary;\n  border-bottom: 4rpx solid $sky-color-primary;\n  transform: rotate(45deg);\n  margin-right: 8rpx;\n  margin-bottom: 6rpx;\n}\n\n// 缺省\n.sky-dropdown__empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40rpx 0;\n}\n\n.sky-dropdown__empty-text {\n  font-size: 26rpx;\n  color: $sky-color-gray-5;\n}\n\n// 展开动画\n@keyframes dropdown-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-8rpx);\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","// ==========================================\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/editor/index.js

@@ -0,0 +1,254 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: false // 关闭虚拟节点以避免 Skyline 原生同层渲染组件手势失效
+    },
+    properties: {
+        // 编辑器占位提示文本
+        placeholder: {
+            type: String,
+            value: '开始书写精彩内容吧...'
+        },
+        // 是否为只读状态
+        readOnly: {
+            type: Boolean,
+            value: false
+        },
+        // 是否显示悬浮工具栏
+        showToolbar: {
+            type: Boolean,
+            value: true
+        },
+        // 附加自定义样式
+        customStyle: {
+            type: String,
+            value: ''
+        }
+    },
+    data: {
+        formats: {}, // 当前光标选区的格式状态
+        keyboardHeight: 0, // 动态避让的键盘物理像素高度
+        isFocused: false, // 是否获得焦点
+        showColorPicker: false, // 是否开启色彩选择盘
+        showFontSizePicker: false, // 是否开启字号选择面板
+        // 十六大经典而高雅的莫兰迪/活力编辑色
+        morandiColors: [
+            '#212529', '#495057', '#868e96', '#fa5252', '#ff8787', '#e64980', '#f76707', '#ffd43b',
+            '#7048e8', '#ae3ec9', '#3b5bdb', '#4263eb', '#1098ad', '#0ca678', '#37b24d', '#f783ac'
+        ],
+        // 经典的八档中英文字号选项
+        fontSizeOptions: [
+            { value: '12px', label: '12px' },
+            { value: '14px', label: '14px' },
+            { value: '16px', label: '16px' },
+            { value: '18px', label: '18px' },
+            { value: '20px', label: '20px' },
+            { value: '24px', label: '24px' },
+            { value: '28px', label: '28px' },
+            { value: '32px', label: '32px' }
+        ]
+    },
+    lifetimes: {
+        detached() {
+            if (this._timer) {
+                clearTimeout(this._timer);
+            }
+        }
+    },
+    methods: {
+        // 1. 编辑器初创就绪
+        onEditorReady() {
+            const query = this.createSelectorQuery();
+            query.select('#sky-editor')
+                .context((res) => {
+                if (!res || !res.context) {
+                    console.warn('Skyline-UI Editor: res.context is not ready yet.');
+                    return;
+                }
+                this.editorCtx = res.context;
+                this.triggerEvent('ready');
+                // 工业级严格防御：校验 onStatusChange 确保在特定基础库及多端上 100% 不崩溃
+                const ctx = this.editorCtx;
+                if (ctx && typeof ctx.onStatusChange === 'function') {
+                    ctx.onStatusChange((res) => {
+                        this.setData({
+                            formats: res || {}
+                        });
+                    });
+                }
+                else {
+                    console.warn('Skyline-UI Editor: ctx.onStatusChange is not supported on this platform/library.');
+                }
+            })
+                .exec();
+        },
+        // 2. 键盘聚焦事件 (高性能视口避让)
+        onFocus(e) {
+            const { height } = e.detail;
+            this.setData({
+                keyboardHeight: height || 0,
+                isFocused: true
+            });
+            this.triggerEvent('focus', { height });
+        },
+        // 3. 键盘失焦事件 (隐退下落)
+        // 注意：此处绝不操作 showColorPicker / showFontSizePicker 的状态！
+        // 面板的关闭完全由用户的显式交互驱动（点击工具栏按钮、选中选项等），
+        // 而不是由不可控的 blur 事件驱动，从根本上杜绝异步事件时序竞争导致的闪退。
+        onBlur() {
+            this.setData({
+                isFocused: false
+            });
+            this.triggerEvent('blur');
+            // 延迟重置 keyboardHeight 解决点击工具栏事件被吞噬的问题
+            // 当键盘弹起时点击工具栏，会优先触发 editor 的 blur，导致 keyboardHeight 瞬间归 0 布局下落。
+            // 这会导致手指 touchend 时元素已经不在原位，从而取消 tap 事件，表现为第一次点击毫无反应（或用户以为的“弹窗瞬间关闭”）。
+            this._timer = setTimeout(() => {
+                if (!this.data.isFocused) {
+                    this.setData({
+                        keyboardHeight: 0
+                    });
+                }
+            }, 150);
+        },
+        // 3.5. 选区格式状态变更
+        onStatusChange(e) {
+            this.setData({
+                formats: e.detail || {}
+            });
+        },
+        // 4. 输入动态流
+        onInput(e) {
+            const { html, text } = e.detail;
+            this.triggerEvent('input', { html, text });
+        },
+        // ==================== 5. 工具栏常用编排命令 ====================
+        // 私有辅助：安全调用编辑器 format 并关闭所有选择面板
+        _format(property, value) {
+            const ctx = this.editorCtx;
+            if (!ctx || typeof ctx.format !== 'function') {
+                console.warn('Skyline-UI Editor: ctx.format is not supported.');
+                return;
+            }
+            ctx.format(property, value);
+            this.setData({
+                showColorPicker: false,
+                showFontSizePicker: false
+            });
+        },
+        // 切换加粗
+        toggleBold() {
+            this._format('bold');
+        },
+        // 切换斜体
+        toggleItalic() {
+            this._format('italic');
+        },
+        // 切换下划线
+        toggleUnderline() {
+            this._format('underline');
+        },
+        // 切换调色盘气泡显隐
+        toggleColorPicker() {
+            this.setData({
+                showColorPicker: !this.data.showColorPicker,
+                showFontSizePicker: false // 互斥关闭字号选择面板
+            });
+        },
+        // 选中颜色意图赋予文字并关闭调色盘
+        selectColor(e) {
+            const { color } = e.currentTarget.dataset;
+            this._format('color', color);
+        },
+        // 切换字号选择面板显隐
+        toggleFontSizePicker() {
+            this.setData({
+                showFontSizePicker: !this.data.showFontSizePicker,
+                showColorPicker: false // 互斥关闭色彩选择盘
+            });
+        },
+        // 选中字号意图赋予文字并关闭字号面板
+        selectFontSize(e) {
+            const { size } = e.currentTarget.dataset;
+            this._format('fontSize', size);
+        },
+        // 阻止冒泡
+        preventBubble() {
+            // 仅用于阻止 catchtap 向上抛出
+        },
+        // 左对齐
+        alignLeft() {
+            this._format('align', 'left');
+        },
+        // 居中对齐
+        alignCenter() {
+            this._format('align', 'center');
+        },
+        // 右对齐
+        alignRight() {
+            this._format('align', 'right');
+        },
+        // 插入图片
+        insertImage() {
+            const ctx = this.editorCtx;
+            if (!ctx || typeof ctx.insertImage !== 'function') {
+                console.warn('Skyline-UI Editor: ctx.insertImage is not supported.');
+                return;
+            }
+            wx.chooseImage({
+                count: 1,
+                sizeType: ['compressed'],
+                sourceType: ['album', 'camera'],
+                success: (res) => {
+                    const tempFilePath = res.tempFilePaths[0];
+                    // 优雅往编辑器中插入高品质图片
+                    ctx.insertImage({
+                        src: tempFilePath,
+                        alt: '图片',
+                        width: '100%',
+                        success: () => {
+                            this.setData({
+                                showColorPicker: false,
+                                showFontSizePicker: false
+                            });
+                            wx.showToast({
+                                title: '插入图片成功',
+                                icon: 'none'
+                            });
+                        }
+                    });
+                }
+            });
+        },
+        // 清除一切格式
+        clearFormat() {
+            const ctx = this.editorCtx;
+            if (ctx && typeof ctx.removeFormat === 'function') {
+                ctx.removeFormat();
+                this.setData({
+                    showColorPicker: false,
+                    showFontSizePicker: false
+                });
+                wx.showToast({
+                    title: '已清除选区格式',
+                    icon: 'none',
+                    duration: 800
+                });
+            }
+            else {
+                console.warn('Skyline-UI Editor: ctx.removeFormat is not supported.');
+            }
+        },
+        // 点击容器时主动触发编辑器聚焦，防御手势穿透与失效
+        focusEditor() {
+            if (this.data.readOnly)
+                return;
+            const ctx = this.editorCtx;
+            if (ctx && typeof ctx.focus === 'function') {
+                ctx.focus();
+            }
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/miniprogram_dist/editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/editor/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["Component({\r\n  options: {\r\n    virtualHost: false // 关闭虚拟节点以避免 Skyline 原生同层渲染组件手势失效\r\n  },\r\n\r\n  properties: {\r\n    // 编辑器占位提示文本\r\n    placeholder: {\r\n      type: String,\r\n      value: '开始书写精彩内容吧...'\r\n    },\r\n    // 是否为只读状态\r\n    readOnly: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 是否显示悬浮工具栏\r\n    showToolbar: {\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    formats: {} as Record<string, any>, // 当前光标选区的格式状态\r\n    keyboardHeight: 0,                  // 动态避让的键盘物理像素高度\r\n    isFocused: false,                    // 是否获得焦点\r\n    showColorPicker: false,             // 是否开启色彩选择盘\r\n    showFontSizePicker: false,          // 是否开启字号选择面板\r\n    // 十六大经典而高雅的莫兰迪/活力编辑色\r\n    morandiColors: [\r\n      '#212529', '#495057', '#868e96', '#fa5252', '#ff8787', '#e64980', '#f76707', '#ffd43b',\r\n      '#7048e8', '#ae3ec9', '#3b5bdb', '#4263eb', '#1098ad', '#0ca678', '#37b24d', '#f783ac'\r\n    ],\r\n    // 经典的八档中英文字号选项\r\n    fontSizeOptions: [\r\n      { value: '12px', label: '12px' },\r\n      { value: '14px', label: '14px' },\r\n      { value: '16px', label: '16px' },\r\n      { value: '18px', label: '18px' },\r\n      { value: '20px', label: '20px' },\r\n      { value: '24px', label: '24px' },\r\n      { value: '28px', label: '28px' },\r\n      { value: '32px', label: '32px' }\r\n    ]\r\n  },\r\n\r\n  lifetimes: {\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    // 1. 编辑器初创就绪\r\n    onEditorReady() {\r\n      const query = this.createSelectorQuery();\r\n      query.select('#sky-editor')\r\n        .context((res: any) => {\r\n          if (!res || !res.context) {\r\n            console.warn('Skyline-UI Editor: res.context is not ready yet.');\r\n            return;\r\n          }\r\n\r\n          (this as any).editorCtx = res.context;\r\n          this.triggerEvent('ready');\r\n          \r\n          // 工业级严格防御：校验 onStatusChange 确保在特定基础库及多端上 100% 不崩溃\r\n          const ctx = (this as any).editorCtx;\r\n          if (ctx && typeof ctx.onStatusChange === 'function') {\r\n            ctx.onStatusChange((res: any) => {\r\n              this.setData({\r\n                formats: res || {}\r\n              });\r\n            });\r\n          } else {\r\n            console.warn('Skyline-UI Editor: ctx.onStatusChange is not supported on this platform/library.');\r\n          }\r\n        })\r\n        .exec();\r\n    },\r\n\r\n    // 2. 键盘聚焦事件 (高性能视口避让)\r\n    onFocus(e: any) {\r\n      const { height } = e.detail;\r\n      this.setData({\r\n        keyboardHeight: height || 0,\r\n        isFocused: true\r\n      });\r\n      this.triggerEvent('focus', { height });\r\n    },\r\n\r\n    // 3. 键盘失焦事件 (隐退下落)\r\n    // 注意：此处绝不操作 showColorPicker / showFontSizePicker 的状态！\r\n    // 面板的关闭完全由用户的显式交互驱动（点击工具栏按钮、选中选项等），\r\n    // 而不是由不可控的 blur 事件驱动，从根本上杜绝异步事件时序竞争导致的闪退。\r\n    onBlur() {\r\n      this.setData({\r\n        isFocused: false\r\n      });\r\n      this.triggerEvent('blur');\r\n\r\n      // 延迟重置 keyboardHeight 解决点击工具栏事件被吞噬的问题\r\n      // 当键盘弹起时点击工具栏，会优先触发 editor 的 blur，导致 keyboardHeight 瞬间归 0 布局下落。\r\n      // 这会导致手指 touchend 时元素已经不在原位，从而取消 tap 事件，表现为第一次点击毫无反应（或用户以为的“弹窗瞬间关闭”）。\r\n      (this as any)._timer = setTimeout(() => {\r\n        if (!this.data.isFocused) {\r\n          this.setData({\r\n            keyboardHeight: 0\r\n          });\r\n        }\r\n      }, 150);\r\n    },\r\n\r\n    // 3.5. 选区格式状态变更\r\n    onStatusChange(e: any) {\r\n      this.setData({\r\n        formats: e.detail || {}\r\n      });\r\n    },\r\n\r\n    // 4. 输入动态流\r\n    onInput(e: any) {\r\n      const { html, text } = e.detail;\r\n      this.triggerEvent('input', { html, text });\r\n    },\r\n\r\n    // ==================== 5. 工具栏常用编排命令 ====================\r\n\r\n    // 私有辅助：安全调用编辑器 format 并关闭所有选择面板\r\n    _format(property: string, value?: any) {\r\n      const ctx = (this as any).editorCtx;\r\n      if (!ctx || typeof ctx.format !== 'function') {\r\n        console.warn('Skyline-UI Editor: ctx.format is not supported.');\r\n        return;\r\n      }\r\n      ctx.format(property, value);\r\n      this.setData({\r\n        showColorPicker: false,\r\n        showFontSizePicker: false\r\n      });\r\n    },\r\n\r\n    // 切换加粗\r\n    toggleBold() {\r\n      this._format('bold');\r\n    },\r\n\r\n    // 切换斜体\r\n    toggleItalic() {\r\n      this._format('italic');\r\n    },\r\n\r\n    // 切换下划线\r\n    toggleUnderline() {\r\n      this._format('underline');\r\n    },\r\n\r\n    // 切换调色盘气泡显隐\r\n    toggleColorPicker() {\r\n      this.setData({\r\n        showColorPicker: !this.data.showColorPicker,\r\n        showFontSizePicker: false // 互斥关闭字号选择面板\r\n      });\r\n    },\r\n\r\n    // 选中颜色意图赋予文字并关闭调色盘\r\n    selectColor(e: any) {\r\n      const { color } = e.currentTarget.dataset;\r\n      this._format('color', color);\r\n    },\r\n\r\n    // 切换字号选择面板显隐\r\n    toggleFontSizePicker() {\r\n      this.setData({\r\n        showFontSizePicker: !this.data.showFontSizePicker,\r\n        showColorPicker: false // 互斥关闭色彩选择盘\r\n      });\r\n    },\r\n\r\n    // 选中字号意图赋予文字并关闭字号面板\r\n    selectFontSize(e: any) {\r\n      const { size } = e.currentTarget.dataset;\r\n      this._format('fontSize', size);\r\n    },\r\n\r\n    // 阻止冒泡\r\n    preventBubble() {\r\n      // 仅用于阻止 catchtap 向上抛出\r\n    },\r\n\r\n    // 左对齐\r\n    alignLeft() {\r\n      this._format('align', 'left');\r\n    },\r\n\r\n    // 居中对齐\r\n    alignCenter() {\r\n      this._format('align', 'center');\r\n    },\r\n\r\n    // 右对齐\r\n    alignRight() {\r\n      this._format('align', 'right');\r\n    },\r\n\r\n    // 插入图片\r\n    insertImage() {\r\n      const ctx = (this as any).editorCtx;\r\n      if (!ctx || typeof ctx.insertImage !== 'function') {\r\n        console.warn('Skyline-UI Editor: ctx.insertImage is not supported.');\r\n        return;\r\n      }\r\n      \r\n      wx.chooseImage({\r\n        count: 1,\r\n        sizeType: ['compressed'],\r\n        sourceType: ['album', 'camera'],\r\n        success: (res) => {\r\n          const tempFilePath = res.tempFilePaths[0];\r\n          \r\n          // 优雅往编辑器中插入高品质图片\r\n          ctx.insertImage({\r\n            src: tempFilePath,\r\n            alt: '图片',\r\n            width: '100%',\r\n            success: () => {\r\n              this.setData({\r\n                showColorPicker: false,\r\n                showFontSizePicker: false\r\n              });\r\n              wx.showToast({\r\n                title: '插入图片成功',\r\n                icon: 'none'\r\n              });\r\n            }\r\n          });\r\n        }\r\n      });\r\n    },\r\n\r\n    // 清除一切格式\r\n    clearFormat() {\r\n      const ctx = (this as any).editorCtx;\r\n      if (ctx && typeof ctx.removeFormat === 'function') {\r\n        ctx.removeFormat();\r\n        this.setData({\r\n          showColorPicker: false,\r\n          showFontSizePicker: false\r\n        });\r\n        wx.showToast({\r\n          title: '已清除选区格式',\r\n          icon: 'none',\r\n          duration: 800\r\n        });\r\n      } else {\r\n        console.warn('Skyline-UI Editor: ctx.removeFormat is not supported.');\r\n      }\r\n    },\r\n\r\n    // 点击容器时主动触发编辑器聚焦，防御手势穿透与失效\r\n    focusEditor() {\r\n      if (this.data.readOnly) return;\r\n      const ctx = (this as any).editorCtx;\r\n      if (ctx && typeof ctx.focus === 'function') {\r\n        ctx.focus();\r\n      }\r\n    }\r\n  }\r\n});\r\n"]}

package/miniprogram_dist/editor/index.json

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

package/miniprogram_dist/editor/index.wxml

@@ -0,0 +1,142 @@
+<view class="sky-editor" style="{{ customStyle }}">
+  <!-- 核心编辑器视图区域 -->
+  <view class="sky-editor__container" bindtap="focusEditor">
+    <editor 
+      id="sky-editor" 
+      class="sky-editor__input" 
+      placeholder="{{ placeholder }}" 
+      read-only="{{ readOnly }}" 
+      bindready="onEditorReady" 
+      bindinput="onInput" 
+      bindfocus="onFocus" 
+      bindblur="onBlur"
+      bindstatuschange="onStatusChange"
+    ></editor>
+  </view>
+
+  <!-- 动态键盘占位避让层 (高性能 Worklet 视口抬升) -->
+  <view 
+    class="sky-editor__safe-padding" 
+    style="height: {{ keyboardHeight }}px;"
+  ></view>
+
+  <!-- 高档悬浮毛玻璃工具栏 (彻底去除带剪裁截断效应的 scroll-view，实现 100% 气泡可见性) -->
+  <view 
+    wx:if="{{ showToolbar && !readOnly }}" 
+    class="sky-editor__toolbar sky-editor__toolbar--visible"
+    style="bottom: calc(env(safe-area-inset-bottom) + {{ keyboardHeight }}px + 20rpx); overflow: visible;"
+  >
+    <view class="sky-editor__toolbar-content" style="overflow: visible;">
+      <!-- 1. 加粗 Bold -->
+      <view 
+        class="sky-editor__tool-item {{ formats.bold ? 'sky-editor__tool-item--active' : '' }}" 
+        bindtap="toggleBold"
+      >
+        <view class="icon-bold"></view>
+      </view>
+
+      <!-- 2. 斜体 Italic -->
+      <view 
+        class="sky-editor__tool-item {{ formats.italic ? 'sky-editor__tool-item--active' : '' }}" 
+        bindtap="toggleItalic"
+      >
+        <view class="icon-italic"></view>
+      </view>
+
+      <!-- 3. 下划线 Underline -->
+      <view 
+        class="sky-editor__tool-item {{ formats.underline ? 'sky-editor__tool-item--active' : '' }}" 
+        bindtap="toggleUnderline"
+      >
+        <view class="icon-underline"></view>
+      </view>
+
+      <!-- 3.5. 字体大小 FontSize (Aa 选择器) -->
+      <view 
+        class="sky-editor__tool-item {{ formats.fontSize ? 'sky-editor__tool-item--active' : '' }}" 
+        bindtap="toggleFontSizePicker"
+        style="position: relative; overflow: visible;"
+      >
+        <!-- 纯 CSS 精绘字号图标 -->
+        <view class="icon-font-size"></view>
+
+        <!-- 微型胶囊字号选择气泡面板 -->
+        <view 
+          wx:if="{{ showFontSizePicker }}" 
+          class="sky-editor__font-size-picker"
+          catchtap="preventBubble"
+        >
+          <view 
+            wx:for="{{ fontSizeOptions }}" 
+            wx:key="value"
+            class="font-size-btn {{ formats.fontSize === item.value ? 'font-size-btn--active' : '' }}" 
+            catchtap="selectFontSize"
+            data-size="{{ item.value }}"
+          >{{ item.label }}</view>
+        </view>
+      </view>
+
+      <!-- 4. 字体颜色 Color Picker (莫兰迪色彩选择器) -->
+      <view 
+        class="sky-editor__tool-item {{ formats.color ? 'sky-editor__tool-item--active' : '' }}" 
+        bindtap="toggleColorPicker"
+        style="position: relative; overflow: visible;"
+      >
+        <!-- 手绘 A 及动态彩色条 -->
+        <view class="icon-color">
+          <view class="icon-color-bar" style="background-color: {{ formats.color || '#333333' }}"></view>
+        </view>
+
+        <!-- 莫兰迪微型调色气泡面板 -->
+        <view 
+          wx:if="{{ showColorPicker }}" 
+          class="sky-editor__color-picker"
+          catchtap="preventBubble"
+        >
+          <view 
+            wx:for="{{ morandiColors }}" 
+            wx:key="item"
+            class="color-dot {{ formats.color === item ? 'color-dot--active' : '' }}" 
+            style="background-color: {{ item }}"
+            catchtap="selectColor"
+            data-color="{{ item }}"
+          ></view>
+        </view>
+      </view>
+
+      <!-- 5. 左对齐 -->
+      <view 
+        class="sky-editor__tool-item {{ formats.align === 'left' ? 'sky-editor__tool-item--active' : '' }}" 
+        bindtap="alignLeft"
+      >
+        <view class="icon-align-left"></view>
+      </view>
+
+      <!-- 6. 居中对齐 -->
+      <view 
+        class="sky-editor__tool-item {{ formats.align === 'center' ? 'sky-editor__tool-item--active' : '' }}" 
+        bindtap="alignCenter"
+      >
+        <view class="icon-align-center"></view>
+      </view>
+
+      <!-- 7. 右对齐 -->
+      <view 
+        class="sky-editor__tool-item {{ formats.align === 'right' ? 'sky-editor__tool-item--active' : '' }}" 
+        bindtap="alignRight"
+      >
+        <view class="icon-align-right"></view>
+      </view>
+
+      <!-- 8. 插入图片 -->
+      <view class="sky-editor__tool-item" bindtap="insertImage">
+        <view class="icon-image"></view>
+      </view>
+
+      <!-- 9. 清除格式 -->
+      <view class="sky-editor__tool-item" bindtap="clearFormat">
+        <view class="icon-clear"></view>
+      </view>
+    </view>
+  </view>
+</view>