wx-sky-ui 1.0.0

package/miniprogram_dist/html-renderer/index.wxml

@@ -0,0 +1,79 @@
+<view class="sky-html-renderer" style="{{ customStyle }}">
+  <block wx:for="{{ nodes }}" wx:key="index">
+
+    <!-- 1. 标题渲染 (H1 ~ H6) -->
+    <view 
+      wx:if="{{ item.name === 'h1' || item.name === 'h2' || item.name === 'h3' || item.name === 'h4' || item.name === 'h5' || item.name === 'h6' }}"
+      class="html-h html-{{ item.name }}"
+    >
+      <block wx:for="{{ item.children }}" wx:for-item="child" wx:key="index">
+        <text wx:if="{{ child.type === 'text' }}" class="html-text" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text }}</text>
+        <text wx:elif="{{ child.name === 'strong' || child.name === 'b' }}" class="html-strong" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text || child.children[0].text }}</text>
+        <text wx:elif="{{ child.name === 'em' || child.name === 'i' }}" class="html-em" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text || child.children[0].text }}</text>
+        <text wx:else class="html-text" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text || child.children[0].text }}</text>
+      </block>
+    </view>
+
+    <!-- 2. 普通段落渲染 (P / DIV) -->
+    <view 
+      wx:elif="{{ item.name === 'p' || item.name === 'div' }}" 
+      class="html-p"
+    >
+      <block wx:for="{{ item.children }}" wx:for-item="child" wx:key="index">
+        <text wx:if="{{ child.type === 'text' }}" class="html-text" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text }}</text>
+        <text wx:elif="{{ child.name === 'strong' || child.name === 'b' }}" class="html-strong" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text || child.children[0].text }}</text>
+        <text wx:elif="{{ child.name === 'em' || child.name === 'i' }}" class="html-em" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text || child.children[0].text }}</text>
+        <text wx:elif="{{ child.name === 'code' }}" class="html-code-inline" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text || child.children[0].text }}</text>
+        <text wx:elif="{{ child.name === 'br' }}" class="html-br">\n</text>
+        <text wx:else class="html-text" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text || child.children[0].text }}</text>
+      </block>
+    </view>
+
+    <!-- 3. 图片渲染 (IMG) -->
+    <view wx:elif="{{ item.name === 'img' }}" class="html-img-wrap">
+      <image 
+        class="html-img"
+        src="{{ item.attrs.src }}" 
+        mode="widthFix" 
+        lazy-load="{{ true }}"
+        show-menu-by-longpress="{{ true }}"
+      ></image>
+    </view>
+
+    <!-- 4. 代码块渲染 (PRE / CODE) -->
+    <view wx:elif="{{ item.name === 'pre' }}" class="html-pre-wrap">
+      <scroll-view class="html-pre-scroll" scroll-x="{{ true }}" show-scrollbar="{{ false }}">
+        <view class="html-pre">
+          <!-- 智能提取子节点 code 的纯文本进行渲染 -->
+          <text class="html-code-block" user-select="{{ selectable }}">{{ item.children[0].text || item.text || '/* empty code */' }}</text>
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 5. 引用块渲染 (BLOCKQUOTE) -->
+    <view wx:elif="{{ item.name === 'blockquote' }}" class="html-blockquote">
+      <block wx:for="{{ item.children }}" wx:for-item="child" wx:key="index">
+        <text wx:if="{{ child.type === 'text' }}" class="html-text" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text }}</text>
+        <text wx:else class="html-text" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text || child.children[0].text }}</text>
+      </block>
+    </view>
+
+    <!-- 6. 列表单项渲染 (LI) -->
+    <view wx:elif="{{ item.name === 'li' }}" class="html-li">
+      <view class="html-li-dot"></view>
+      <view class="html-li-content">
+        <block wx:for="{{ item.children }}" wx:for-item="child" wx:key="index">
+          <text wx:if="{{ child.type === 'text' }}" class="html-text" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text }}</text>
+          <text wx:elif="{{ child.name === 'strong' || child.name === 'b' }}" class="html-strong" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text || child.children[0].text }}</text>
+          <text wx:else class="html-text" style="{{ child.attrs.style }}" user-select="{{ selectable }}">{{ child.text || child.children[0].text }}</text>
+        </block>
+      </view>
+    </view>
+
+    <!-- 7. 兜底渲染 (例如 ul, ol 或其它未知块，转为扁平文字) -->
+    <view wx:else class="html-fallback">
+      <text class="html-text" style="{{ item.attrs.style }}" user-select="{{ selectable }}">{{ item.text }}</text>
+    </view>
+
+  </block>
+</view>

package/miniprogram_dist/html-renderer/index.wxss

@@ -0,0 +1,200 @@
+@charset "UTF-8";
+/* ========================================== */
+/* Skyline-UI HtmlRenderer 富文本渲染组件样式  */
+/* ========================================== */
+.sky-html-renderer {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  color: #343a40;
+  font-size: 28rpx;
+  line-height: 1.68;
+  /* ==================== 1. 块级节点段落排版 ==================== */
+}
+.sky-html-renderer .html-p {
+  margin-top: 0;
+  margin-bottom: 24rpx;
+  color: #343a40;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.sky-html-renderer {
+  /* 基础文本 */
+}
+.sky-html-renderer .html-text {
+  font-size: 28rpx;
+  color: #343a40;
+}
+.sky-html-renderer {
+  /* 换行符 */
+}
+.sky-html-renderer .html-br {
+  width: 100%;
+  height: 0;
+}
+.sky-html-renderer {
+  /* ==================== 2. 标题层级设计 (黄金字号) ==================== */
+}
+.sky-html-renderer .html-h {
+  font-weight: 700;
+  color: #212529;
+  margin-top: 40rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.sky-html-renderer .html-h1 {
+  font-size: 38rpx;
+  border-left: 8rpx solid hsl(250, 85%, 55%);
+  padding-left: 18rpx;
+}
+.sky-html-renderer .html-h2 {
+  font-size: 34rpx;
+  border-left: 6rpx solid hsl(250, 85%, 55%);
+  padding-left: 16rpx;
+}
+.sky-html-renderer .html-h3 {
+  font-size: 30rpx;
+  border-left: 4rpx solid hsl(250, 85%, 55%);
+  padding-left: 12rpx;
+}
+.sky-html-renderer .html-h4,
+.sky-html-renderer .html-h5,
+.sky-html-renderer .html-h6 {
+  font-size: 28rpx;
+  padding-left: 12rpx;
+  border-left: 4rpx solid #dee2e6;
+}
+.sky-html-renderer {
+  /* ==================== 3. 行内修饰样式 ==================== */
+}
+.sky-html-renderer .html-strong {
+  font-weight: 700;
+  color: #212529;
+}
+.sky-html-renderer .html-em {
+  font-style: italic;
+  color: #495057;
+}
+.sky-html-renderer {
+  /* 行内微型代码块 */
+}
+.sky-html-renderer .html-code-inline {
+  font-family: Consolas, Monaco, Courier, monospace;
+  font-size: 24rpx;
+  color: #e83e8c;
+  background-color: #f8f9fa;
+  padding: 2rpx 10rpx;
+  border-radius: 6rpx;
+  margin: 0 6rpx;
+  border: 1px solid #e9ecef;
+}
+.sky-html-renderer {
+  /* ==================== 4. 高保真自适应图像 (懒加载优雅渐现) ==================== */
+}
+.sky-html-renderer .html-img-wrap {
+  width: 100%;
+  margin: 24rpx 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.sky-html-renderer .html-img {
+  width: 100%;
+  border-radius: 12rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.015);
+  background-color: #f1f3f5;
+  /* 采用 400ms 的贝塞尔淡入并轻微上浮帧动画，彻底告别生硬闪变 */
+  animation: html-img-fade-anim 400ms cubic-bezier(0.25, 1, 0.5, 1) both;
+}
+.sky-html-renderer {
+  /* ==================== 5. 碳黑高规格代码容器 ==================== */
+}
+.sky-html-renderer .html-pre-wrap {
+  width: 100%;
+  margin: 28rpx 0;
+  background-color: #212529; /* 尊贵碳黑底色 */
+  border-radius: 16rpx;
+  padding: 24rpx 30rpx;
+  box-sizing: border-box;
+  box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+.sky-html-renderer .html-pre-scroll {
+  width: 100%;
+}
+.sky-html-renderer .html-pre {
+  width: 100%;
+  display: flex;
+}
+.sky-html-renderer .html-code-block {
+  font-family: Consolas, Monaco, Courier, monospace;
+  font-size: 24rpx;
+  color: #f8f9fa;
+  line-height: 1.6;
+  white-space: pre;
+}
+.sky-html-renderer {
+  /* ==================== 6. 引用块排版 ==================== */
+}
+.sky-html-renderer .html-blockquote {
+  margin: 28rpx 0;
+  padding: 20rpx 30rpx;
+  background-color: #f8f9fa;
+  border-left: 6rpx solid #dee2e6;
+  border-radius: 0 12rpx 12rpx 0;
+  color: #868e96;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.sky-html-renderer .html-blockquote .html-text {
+  color: #868e96 !important;
+}
+.sky-html-renderer {
+  /* ==================== 7. 列表排版 ==================== */
+}
+.sky-html-renderer .html-li {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  margin-bottom: 12rpx;
+  padding-left: 10rpx;
+}
+.sky-html-renderer .html-li-dot {
+  width: 10rpx;
+  height: 10rpx;
+  border-radius: 50%;
+  background-color: hsl(250, 85%, 55%); /* 采用品牌蓝紫圆点 */
+  margin-right: 18rpx;
+  margin-top: 14rpx;
+  flex-shrink: 0;
+}
+.sky-html-renderer .html-li-content {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.sky-html-renderer {
+  /* 兜底 */
+}
+.sky-html-renderer .html-fallback {
+  margin-bottom: 24rpx;
+}
+
+/* ==================== 8. 动画关键帧 ==================== */
+@keyframes html-img-fade-anim {
+  from {
+    opacity: 0;
+    transform: translateY(8rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/miniprogram_dist/html-renderer/index.wxss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["html-renderer/index.scss","common/style/theme.scss"],"names":[],"mappings":";AAGA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EACA,OCwCiB;EDvCjB;EACA;AAEA;;AACA;EACE;EACA;EACA,OCgCe;ED/Bf;EACA;EACA;;AAhBJ;AAmBE;;AACA;EACE;EACA,OCuBe;;AD7CnB;AAyBE;;AACA;EACE;EACA;;AA5BJ;AA+BE;;AACA;EACE;EACA,OCYe;EDXf;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;AAlEJ;AAqEE;;AACA;EACE;EACA,OC1Be;;AD6BjB;EACE;EACA,OCjCe;;AD5CnB;AAgFE;;AACA;EACE;EACA;EACA;EACA,kBC/Ce;EDgDf;EACA;EACA;EACA;;AAzFJ;AA4FE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,kBClEe;ADoEf;EACA;;AA5GJ;AA+GE;;AACA;EACE;EACA;EACA,kBCrEe,SDqEsB;EACrC;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA,OCjGe;EDkGf;EACA;;AAzIJ;AA4IE;;AACA;EACE;EACA;EACA,kBC1Ge;ED2Gf;EACA;EACA,OCxGe;EDyGf;EACA;EACA;;AAEA;EACE;;AAzJN;AA6JE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,kBCxKgB,oBDwKsB;EACtC;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AApLJ;AAuLE;;AACA;EACE;;;AAIJ;AACA;EACE;IACE;IACA;;EAEF;IACE;IACA","file":"index.wxss","sourcesContent":["@use \"../common/style/theme.scss\" as *;\n@use \"../common/style/mixins.scss\" as *;\n\n/* ========================================== */\n/* Skyline-UI HtmlRenderer 富文本渲染组件样式  */\n/* ========================================== */\n\n.sky-html-renderer {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  color: $sky-color-gray-8;\n  font-size: 28rpx;\n  line-height: 1.68;\n\n  /* ==================== 1. 块级节点段落排版 ==================== */\n  .html-p {\n    margin-top: 0;\n    margin-bottom: 24rpx;\n    color: $sky-color-gray-8;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  /* 基础文本 */\n  .html-text {\n    font-size: 28rpx;\n    color: $sky-color-gray-8;\n  }\n\n  /* 换行符 */\n  .html-br {\n    width: 100%;\n    height: 0;\n  }\n\n  /* ==================== 2. 标题层级设计 (黄金字号) ==================== */\n  .html-h {\n    font-weight: 700;\n    color: $sky-color-gray-9;\n    margin-top: 40rpx;\n    margin-bottom: 20rpx;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n\n  .html-h1 {\n    font-size: 38rpx;\n    border-left: 8rpx solid $sky-color-primary;\n    padding-left: 18rpx;\n  }\n\n  .html-h2 {\n    font-size: 34rpx;\n    border-left: 6rpx solid $sky-color-primary;\n    padding-left: 16rpx;\n  }\n\n  .html-h3 {\n    font-size: 30rpx;\n    border-left: 4rpx solid $sky-color-primary;\n    padding-left: 12rpx;\n  }\n\n  .html-h4,\n  .html-h5,\n  .html-h6 {\n    font-size: 28rpx;\n    padding-left: 12rpx;\n    border-left: 4rpx solid $sky-color-gray-4;\n  }\n\n  /* ==================== 3. 行内修饰样式 ==================== */\n  .html-strong {\n    font-weight: 700;\n    color: $sky-color-gray-9;\n  }\n\n  .html-em {\n    font-style: italic;\n    color: $sky-color-gray-7;\n  }\n\n  /* 行内微型代码块 */\n  .html-code-inline {\n    font-family: Consolas, Monaco, Courier, monospace;\n    font-size: 24rpx;\n    color: #e83e8c;\n    background-color: $sky-color-gray-1;\n    padding: 2rpx 10rpx;\n    border-radius: 6rpx;\n    margin: 0 6rpx;\n    border: 1px solid $sky-color-gray-3;\n  }\n\n  /* ==================== 4. 高保真自适应图像 (懒加载优雅渐现) ==================== */\n  .html-img-wrap {\n    width: 100%;\n    margin: 24rpx 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n  }\n\n  .html-img {\n    width: 100%;\n    border-radius: 12rpx;\n    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.015);\n    background-color: $sky-color-gray-2;\n    \n    /* 采用 400ms 的贝塞尔淡入并轻微上浮帧动画，彻底告别生硬闪变 */\n    animation: html-img-fade-anim 400ms cubic-bezier(0.25, 1, 0.5, 1) both;\n  }\n\n  /* ==================== 5. 碳黑高规格代码容器 ==================== */\n  .html-pre-wrap {\n    width: 100%;\n    margin: 28rpx 0;\n    background-color: $sky-color-gray-9; /* 尊贵碳黑底色 */\n    border-radius: 16rpx;\n    padding: 24rpx 30rpx;\n    box-sizing: border-box;\n    box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.15);\n    overflow: hidden;\n  }\n\n  .html-pre-scroll {\n    width: 100%;\n  }\n\n  .html-pre {\n    width: 100%;\n    display: flex;\n  }\n\n  .html-code-block {\n    font-family: Consolas, Monaco, Courier, monospace;\n    font-size: 24rpx;\n    color: $sky-color-gray-1;\n    line-height: 1.6;\n    white-space: pre;\n  }\n\n  /* ==================== 6. 引用块排版 ==================== */\n  .html-blockquote {\n    margin: 28rpx 0;\n    padding: 20rpx 30rpx;\n    background-color: $sky-color-gray-1;\n    border-left: 6rpx solid $sky-color-gray-4;\n    border-radius: 0 12rpx 12rpx 0;\n    color: $sky-color-gray-6;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    \n    .html-text {\n      color: $sky-color-gray-6 !important;\n    }\n  }\n\n  /* ==================== 7. 列表排版 ==================== */\n  .html-li {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    margin-bottom: 12rpx;\n    padding-left: 10rpx;\n  }\n\n  .html-li-dot {\n    width: 10rpx;\n    height: 10rpx;\n    border-radius: 50%;\n    background-color: $sky-color-primary; /* 采用品牌蓝紫圆点 */\n    margin-right: 18rpx;\n    margin-top: 14rpx;\n    flex-shrink: 0;\n  }\n\n  .html-li-content {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  /* 兜底 */\n  .html-fallback {\n    margin-bottom: 24rpx;\n  }\n}\n\n/* ==================== 8. 动画关键帧 ==================== */\n@keyframes html-img-fade-anim {\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"]}

package/miniprogram_dist/html-renderer/parser.d.ts

@@ -0,0 +1,12 @@
+export interface HtmlNode {
+    name: string;
+    type: 'block' | 'inline' | 'text';
+    text?: string;
+    attrs: Record<string, string>;
+    children: HtmlNode[];
+}
+/**
+ * 零依赖 HTML 转 AST 解析器 (状态机版)
+ * 专门针对小程序/Skyline富文本输出进行高弹力适配
+ */
+export declare function parseHtml(html: string): HtmlNode[];

package/miniprogram_dist/html-renderer/parser.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseHtml = parseHtml;
+/**
+ * 提取标签上的属性 (例如 class="foo" src="bar.jpg" ➔ { class: 'foo', src: 'bar.jpg' })
+ */
+function parseAttrs(attrStr) {
+    const attrs = {};
+    if (!attrStr)
+        return attrs;
+    // 正则匹配 key="value" 或 key='value' 或 key=value
+    const attrReg = /([a-zA-Z0-9_-]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;
+    let match;
+    while ((match = attrReg.exec(attrStr)) !== null) {
+        const key = match[1];
+        const val = match[2] || match[3] || match[4] || '';
+        attrs[key] = val;
+    }
+    return attrs;
+}
+/**
+ * 零依赖 HTML 转 AST 解析器 (状态机版)
+ * 专门针对小程序/Skyline富文本输出进行高弹力适配
+ */
+function parseHtml(html) {
+    const stack = [];
+    // 当前正在构建的虚拟根节点
+    const root = {
+        name: 'root',
+        type: 'block',
+        attrs: {},
+        children: []
+    };
+    stack.push(root);
+    // 匹配 <tag attrs> 或 </tag> 或 文本
+    const tagReg = /<(?:\/)?([a-zA-Z0-9-]+)(?:\s+([^>]*))?>|([^<]+)/g;
+    let match;
+    // 声明已知块级标签，用以归属 block 属性
+    const blockTags = new Set([
+        'p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+        'ul', 'ol', 'li', 'pre', 'code', 'blockquote', 'img', 'br'
+    ]);
+    while ((match = tagReg.exec(html)) !== null) {
+        const [fullToken, tagName, attrStr, textVal] = match;
+        if (textVal) {
+            // 1. 文本 Token
+            // 保留非空内容
+            const textNode = {
+                name: '#text',
+                type: 'text',
+                text: textVal,
+                attrs: {},
+                children: []
+            };
+            const currentParent = stack[stack.length - 1];
+            if (currentParent) {
+                currentParent.children.push(textNode);
+            }
+        }
+        else if (tagName) {
+            const isCloseTag = fullToken.startsWith('</');
+            const tagLower = tagName.toLowerCase();
+            if (isCloseTag) {
+                // 2. 闭合标签
+                // 寻找栈中匹配的开放标签进行出栈
+                let popIndex = -1;
+                for (let i = stack.length - 1; i >= 0; i--) {
+                    if (stack[i].name === tagLower) {
+                        popIndex = i;
+                        break;
+                    }
+                }
+                if (popIndex !== -1) {
+                    // 出栈到当前标签
+                    stack.splice(popIndex);
+                }
+            }
+            else {
+                // 3. 开放标签
+                const isSelfClosing = fullToken.endsWith('/>') || ['img', 'br', 'hr', 'input'].includes(tagLower);
+                const attrs = parseAttrs(attrStr);
+                const type = blockTags.has(tagLower) ? 'block' : 'inline';
+                const newNode = {
+                    name: tagLower,
+                    type,
+                    attrs,
+                    children: []
+                };
+                const currentParent = stack[stack.length - 1];
+                if (currentParent) {
+                    currentParent.children.push(newNode);
+                }
+                // 若不是自闭合标签，则入栈成为新的父容器
+                if (!isSelfClosing) {
+                    stack.push(newNode);
+                }
+            }
+        }
+    }
+    return root.children;
+}
+
+//# sourceMappingURL=parser.js.map

package/miniprogram_dist/html-renderer/parser.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/html-renderer/parser.ts"],"names":[],"mappings":"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","file":"parser.js","sourcesContent":["export interface HtmlNode {\r\n  name: string;                         // 标签名称 (如 p, h1, img, pre)\r\n  type: 'block' | 'inline' | 'text';    // 节点类型: block (块级), inline (行内), text (纯文本)\r\n  text?: string;                        // 文本内容\r\n  attrs: Record<string, string>;        // 标签属性 (如 src, href)\r\n  children: HtmlNode[];                 // 子节点\r\n}\r\n\r\n/**\r\n * 提取标签上的属性 (例如 class=\"foo\" src=\"bar.jpg\" ➔ { class: 'foo', src: 'bar.jpg' })\r\n */\r\nfunction parseAttrs(attrStr: string): Record<string, string> {\r\n  const attrs: Record<string, string> = {};\r\n  if (!attrStr) return attrs;\r\n\r\n  // 正则匹配 key=\"value\" 或 key='value' 或 key=value\r\n  const attrReg = /([a-zA-Z0-9_-]+)(?:=(?:\"([^\"]*)\"|'([^']*)'|([^\\s>]+)))?/g;\r\n  let match;\r\n  while ((match = attrReg.exec(attrStr)) !== null) {\r\n    const key = match[1];\r\n    const val = match[2] || match[3] || match[4] || '';\r\n    attrs[key] = val;\r\n  }\r\n  return attrs;\r\n}\r\n\r\n/**\r\n * 零依赖 HTML 转 AST 解析器 (状态机版)\r\n * 专门针对小程序/Skyline富文本输出进行高弹力适配\r\n */\r\nexport function parseHtml(html: string): HtmlNode[] {\r\n  const stack: HtmlNode[] = [];\r\n\r\n  // 当前正在构建的虚拟根节点\r\n  const root: HtmlNode = {\r\n    name: 'root',\r\n    type: 'block',\r\n    attrs: {},\r\n    children: []\r\n  };\r\n  stack.push(root);\r\n\r\n  // 匹配 <tag attrs> 或 </tag> 或 文本\r\n  const tagReg = /<(?:\\/)?([a-zA-Z0-9-]+)(?:\\s+([^>]*))?>|([^<]+)/g;\r\n  let match;\r\n\r\n  // 声明已知块级标签，用以归属 block 属性\r\n  const blockTags = new Set([\r\n    'p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', \r\n    'ul', 'ol', 'li', 'pre', 'code', 'blockquote', 'img', 'br'\r\n  ]);\r\n\r\n  while ((match = tagReg.exec(html)) !== null) {\r\n    const [fullToken, tagName, attrStr, textVal] = match;\r\n\r\n    if (textVal) {\r\n      // 1. 文本 Token\r\n      // 保留非空内容\r\n      const textNode: HtmlNode = {\r\n        name: '#text',\r\n        type: 'text',\r\n        text: textVal,\r\n        attrs: {},\r\n        children: []\r\n      };\r\n      const currentParent = stack[stack.length - 1];\r\n      if (currentParent) {\r\n        currentParent.children.push(textNode);\r\n      }\r\n    } else if (tagName) {\r\n      const isCloseTag = fullToken.startsWith('</');\r\n      const tagLower = tagName.toLowerCase();\r\n\r\n      if (isCloseTag) {\r\n        // 2. 闭合标签\r\n        // 寻找栈中匹配的开放标签进行出栈\r\n        let popIndex = -1;\r\n        for (let i = stack.length - 1; i >= 0; i--) {\r\n          if (stack[i].name === tagLower) {\r\n            popIndex = i;\r\n            break;\r\n          }\r\n        }\r\n        if (popIndex !== -1) {\r\n          // 出栈到当前标签\r\n          stack.splice(popIndex);\r\n        }\r\n      } else {\r\n        // 3. 开放标签\r\n        const isSelfClosing = fullToken.endsWith('/>') || ['img', 'br', 'hr', 'input'].includes(tagLower);\r\n        const attrs = parseAttrs(attrStr);\r\n        const type = blockTags.has(tagLower) ? 'block' : 'inline';\r\n\r\n        const newNode: HtmlNode = {\r\n          name: tagLower,\r\n          type,\r\n          attrs,\r\n          children: []\r\n        };\r\n\r\n        const currentParent = stack[stack.length - 1];\r\n        if (currentParent) {\r\n          currentParent.children.push(newNode);\r\n        }\r\n\r\n        // 若不是自闭合标签，则入栈成为新的父容器\r\n        if (!isSelfClosing) {\r\n          stack.push(newNode);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  return root.children;\r\n}\r\n"]}

package/miniprogram_dist/icon/index.d.ts

@@ -0,0 +1 @@
+export {};

package/miniprogram_dist/icon/index.js

@@ -0,0 +1,231 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const presets_1 = require("./presets");
+Component({
+    options: {
+        virtualHost: true,
+        multipleSlots: true
+    },
+    properties: {
+        name: {
+            type: String,
+            value: '',
+            observer() {
+                this.updatePath();
+            }
+        },
+        path: {
+            type: String,
+            value: '',
+            observer() {
+                this.updatePath();
+            }
+        },
+        // 新增 svgBody，用于传入完整的、多色、多路径、带渐变定义(defs)的复杂 SVG 内层结构
+        svgBody: {
+            type: String,
+            value: '',
+            observer() {
+                this.updatePath();
+            }
+        },
+        // 新增：参数直传渐变起始颜色
+        gradientStart: {
+            type: String,
+            value: '',
+            observer() {
+                this.updatePath();
+            }
+        },
+        gradientstart: {
+            type: String,
+            value: '',
+            observer() {
+                this.updatePath();
+            }
+        },
+        // 新增：参数直传渐变终点颜色
+        gradientEnd: {
+            type: String,
+            value: '',
+            observer() {
+                this.updatePath();
+            }
+        },
+        gradientend: {
+            type: String,
+            value: '',
+            observer() {
+                this.updatePath();
+            }
+        },
+        // 新增：参数直传渐变方向或角度，默认 to bottom right (135°)
+        gradientAngle: {
+            type: String,
+            value: 'to bottom right',
+            observer() {
+                this.updatePath();
+            }
+        },
+        gradientangle: {
+            type: String,
+            value: 'to bottom right',
+            observer() {
+                this.updatePath();
+            }
+        },
+        size: {
+            type: String,
+            value: '32rpx'
+        },
+        color: {
+            type: String,
+            value: '#334155', // 默认使用雅致深灰，支持 hex/rgb 自定义颜色
+            observer() {
+                this.updatePath();
+            }
+        },
+        fill: {
+            type: Boolean,
+            value: true, // 默认采用完美的填充/闭合线条风格，高保真还原阿里图标
+            observer() {
+                this.updatePath();
+            }
+        },
+        viewBox: {
+            type: String,
+            value: '0 0 1024 1024',
+            observer() {
+                this.updatePath();
+            }
+        },
+        strokeWidth: {
+            type: Number,
+            value: 64, // 默认线框描边大小
+            observer() {
+                this.updatePath();
+            }
+        }
+    },
+    data: {
+        svgSrc: ''
+    },
+    lifetimes: {
+        attached() {
+            this.updatePath();
+        }
+    },
+    methods: {
+        updatePath() {
+            const { name, path, svgBody, color, viewBox } = this.properties;
+            // WeChat 会将模板属性名转为小写，因此 lowercase 版本是主属性
+            const gStart = this.properties.gradientstart || this.properties.gradientStart;
+            const gEnd = this.properties.gradientend || this.properties.gradientEnd;
+            const gAngle = this.properties.gradientangle || this.properties.gradientAngle;
+            let currentBody = '';
+            let currentViewBox = viewBox;
+            let isComplexSVG = false; // 是否为复杂带多色/渐变/层叠的 SVG
+            // 1. 解析路径：优先使用复杂 svgBody 直传，其次直传 path，最后读取 presets 字典
+            if (svgBody) {
+                currentBody = svgBody;
+                isComplexSVG = true; // 复杂 SVG，不应被单色 fill/stroke 强行替换
+            }
+            else if (path) {
+                currentBody = `<path d="${path}" />`;
+            }
+            else if (name && presets_1.presetIcons[name]) {
+                const preset = presets_1.presetIcons[name];
+                if (typeof preset === 'object' && preset !== null) {
+                    currentBody = preset.body;
+                    currentViewBox = preset.viewBox || currentViewBox;
+                }
+                else if (typeof preset === 'string') {
+                    // 兼容老格式路径
+                    currentBody = `<path d="${preset}" />`;
+                }
+            }
+            if (currentBody) {
+                let finalBody = currentBody;
+                const finalColor = color === 'currentColor' ? '#334155' : color;
+                const hasGradient = gStart && gEnd;
+                // 2. 【高保真着色器与参数化渐变】
+                if (hasGradient) {
+                    // 自动产生全页面唯一的渐变标识 ID
+                    const gradId = `sky-grad-${this.__wxExparserNodeId__ || Math.random().toString(36).slice(2, 9)}`;
+                    // 解析渐变角度映射
+                    let x1 = '0%', y1 = '0%', x2 = '100%', y2 = '0%'; // 默认从左到右
+                    const angle = String(gAngle).toLowerCase();
+                    if (angle === 'to bottom right' || angle === '135') {
+                        x1 = '0%';
+                        y1 = '0%';
+                        x2 = '100%';
+                        y2 = '100%';
+                    }
+                    else if (angle === 'to bottom' || angle === '180') {
+                        x1 = '0%';
+                        y1 = '0%';
+                        x2 = '0%';
+                        y2 = '100%';
+                    }
+                    else if (angle === 'to top right' || angle === '45') {
+                        x1 = '0%';
+                        y1 = '100%';
+                        x2 = '100%';
+                        y2 = '0%';
+                    }
+                    else if (angle === 'to right' || angle === '90') {
+                        x1 = '0%';
+                        y1 = '0%';
+                        x2 = '100%';
+                        y2 = '0%';
+                    }
+                    // 内存拼接 linearGradient 节点
+                    const defsStr = `<defs><linearGradient id="${gradId}" x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}"><stop offset="0%" stop-color="${gStart}" /><stop offset="100%" stop-color="${gEnd}" /></linearGradient></defs>`;
+                    // 对 path 着色为该渐变 url
+                    let coloredBody = currentBody;
+                    if (coloredBody.indexOf('fill=') > -1) {
+                        coloredBody = coloredBody
+                            .replace(/fill="[^"]+"/gi, `fill="url(#${gradId})"`)
+                            .replace(/fill='[^']+'/gi, `fill="url(#${gradId})"`);
+                    }
+                    else if (coloredBody.indexOf('<path') > -1) {
+                        coloredBody = coloredBody.replace(/<path\s/gi, `<path fill="url(#${gradId})" `);
+                    }
+                    else {
+                        coloredBody = `<path fill="url(#${gradId})" d="${coloredBody}" />`;
+                    }
+                    finalBody = defsStr + coloredBody;
+                    isComplexSVG = true; // 强制启用复杂 SVG 机制，不被单色覆盖
+                }
+                else {
+                    // 仅在非参数渐变、非外部复杂 SVG 时，进行单色强制清洗着色
+                    if (!isComplexSVG) {
+                        finalBody = currentBody
+                            .replace(/fill="[^"]+"/gi, `fill="${finalColor}"`)
+                            .replace(/fill='[^']+'/gi, `fill="${finalColor}"`)
+                            .replace(/stroke="[^"]+"/gi, `stroke="${finalColor}"`)
+                            .replace(/stroke='[^']+'/gi, `stroke="${finalColor}"`);
+                    }
+                }
+                // 3. 原装高保真拼装：复杂 SVG 采用透明 fill 回退，防止外层覆盖
+                const svgString = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${currentViewBox}" fill="${isComplexSVG ? 'none' : finalColor}">${finalBody}</svg>`;
+                const encoded = encodeURIComponent(svgString)
+                    .replace(/'/g, '%27')
+                    .replace(/"/g, '%22');
+                this.setData({
+                    svgSrc: `data:image/svg+xml,${encoded}`
+                });
+            }
+            else {
+                this.setData({
+                    svgSrc: ''
+                });
+            }
+        },
+        onTap(e) {
+            this.triggerEvent('click', e);
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map