wx-sky-ui 1.0.0

package/miniprogram_dist/editor/index.wxss

@@ -0,0 +1,613 @@
+@charset "UTF-8";
+/* ========================================== */
+/* Skyline-UI Editor 富文本编辑器组件样式      */
+/* ========================================== */
+.sky-editor {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  /* 编辑器白底容器 */
+}
+.sky-editor .sky-editor__container {
+  width: 100%;
+  min-height: 480rpx;
+  background-color: #ffffff;
+  border: 1px solid #e9ecef;
+  border-radius: 16rpx;
+  padding: 24rpx 30rpx;
+  box-sizing: border-box;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.005);
+}
+.sky-editor {
+  /* 输入核心区域 */
+}
+.sky-editor .sky-editor__input {
+  width: 100%;
+  height: 100%;
+  min-height: 430rpx;
+  font-size: 28rpx;
+  line-height: 1.68;
+  color: #343a40;
+}
+.sky-editor {
+  /* 键盘平滑避让安全占位 */
+}
+.sky-editor .sky-editor__safe-padding {
+  width: 100%;
+  transition: height 150ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.sky-editor {
+  /* ==================== 高档悬浮毛玻璃工具栏 (100% 溢出可见) ==================== */
+}
+.sky-editor .sky-editor__toolbar {
+  position: fixed;
+  left: 30rpx;
+  right: 30rpx;
+  height: 88rpx;
+  border-radius: 44rpx;
+  z-index: 99;
+  /* 采用高保真 backdrop-filter 毛玻璃滤镜，高雅通透 */
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  background-color: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  /* 必须强制溢出可见，确保上方调色气泡绝不被隐藏裁剪 */
+  overflow: visible !important;
+  /* 多重极弱环境阴影 */
+  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.06), 0 1rpx 3rpx rgba(0, 0, 0, 0.02);
+  /* 工具栏入场与隐藏的阻尼缩现动画 */
+  opacity: 0;
+  transform: translateY(30rpx) scale(0.95);
+  transition: opacity 250ms cubic-bezier(0.25, 1, 0.5, 1), transform 250ms cubic-bezier(0.175, 0.885, 0.32, 1.15), bottom 150ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.sky-editor .sky-editor__toolbar.sky-editor__toolbar--visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.sky-editor {
+  /* 均匀平铺的工具项容器 (无 scroll-view 裁剪) */
+}
+.sky-editor .sky-editor__toolbar-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between; /* 完美自适应平铺 9 个操作按钮 */
+  width: 100%;
+  height: 100%;
+  padding: 0 26rpx;
+  box-sizing: border-box;
+  overflow: visible !important;
+}
+.sky-editor {
+  /* 编辑器操作按键单项 (微调至 54rpx 确保无滚动平铺) */
+}
+.sky-editor .sky-editor__tool-item {
+  width: 54rpx;
+  height: 54rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #495057;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  overflow: visible !important;
+  transition: all 120ms ease;
+}
+.sky-editor .sky-editor__tool-item:active {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.sky-editor .sky-editor__tool-item--active {
+  color: hsl(250, 85%, 55%) !important;
+  background-color: hsl(250, 85%, 95%) !important;
+}
+.sky-editor {
+  /* ==================== 莫兰迪微型调色盘气泡面板 ==================== */
+}
+.sky-editor .sky-editor__color-picker {
+  position: absolute;
+  bottom: 78rpx; /* 微调距离，贴紧工具项 */
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 14rpx;
+  padding: 16rpx;
+  border-radius: 24rpx;
+  width: max-content;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  background-color: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.12);
+  /* 弹性出场阻尼 */
+  animation: picker-bounce-anim 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+  /* 气泡底角小尖角 */
+}
+.sky-editor .sky-editor__color-picker::after {
+  content: "";
+  position: absolute;
+  bottom: -12rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6rpx;
+  border-style: solid;
+  border-color: rgba(255, 255, 255, 0.96) transparent transparent transparent;
+}
+.sky-editor .color-dot {
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: 2rpx solid rgba(0, 0, 0, 0.08);
+  transition: all 120ms ease;
+}
+.sky-editor .color-dot:active {
+  transform: scale(0.8);
+}
+.sky-editor .color-dot--active {
+  transform: scale(1.15);
+  box-shadow: 0 0 0 2rpx hsl(250, 85%, 55%);
+}
+.sky-editor {
+  /* ==================== 胶囊字号选择气泡面板 ==================== */
+}
+.sky-editor .sky-editor__font-size-picker {
+  position: absolute;
+  bottom: 78rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12rpx;
+  padding: 16rpx;
+  border-radius: 24rpx;
+  width: max-content;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  background-color: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.12);
+  /* 弹性出场阻尼 */
+  animation: picker-bounce-anim 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+  /* 气泡底角小尖角 */
+}
+.sky-editor .sky-editor__font-size-picker::after {
+  content: "";
+  position: absolute;
+  bottom: -12rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6rpx;
+  border-style: solid;
+  border-color: rgba(255, 255, 255, 0.96) transparent transparent transparent;
+}
+.sky-editor .font-size-btn {
+  font-size: 20rpx;
+  color: #495057;
+  padding: 6rpx 14rpx;
+  border-radius: 12rpx;
+  background-color: rgba(0, 0, 0, 0.04);
+  transition: all 120ms ease;
+  white-space: nowrap;
+  min-width: 76rpx;
+  text-align: center;
+  box-sizing: border-box;
+}
+.sky-editor .font-size-btn:active {
+  transform: scale(0.9);
+}
+.sky-editor .font-size-btn--active {
+  color: #ffffff;
+  background-color: hsl(250, 85%, 55%);
+  font-weight: bold;
+}
+.sky-editor {
+  /* ==================== 纯 CSS 精绘高保真图标 ==================== */
+  /* 1. Bold 加粗 */
+}
+.sky-editor .icon-bold {
+  width: 16rpx;
+  height: 22rpx;
+  border: 2rpx solid #495057;
+  border-radius: 3px 6px 6px 3px;
+  position: relative;
+  box-sizing: border-box;
+}
+.sky-editor .icon-bold::after {
+  content: "";
+  position: absolute;
+  left: -2rpx;
+  top: 8rpx;
+  right: -2rpx;
+  height: 2rpx;
+  background-color: #495057;
+}
+.sky-editor {
+  /* 2. Italic 斜体 */
+}
+.sky-editor .icon-italic {
+  width: 16rpx;
+  height: 22rpx;
+  position: relative;
+  box-sizing: border-box;
+}
+.sky-editor .icon-italic::before {
+  content: "";
+  position: absolute;
+  width: 2rpx;
+  height: 22rpx;
+  background-color: #495057;
+  left: 7rpx;
+  transform: rotate(15deg);
+}
+.sky-editor .icon-italic::after {
+  content: "";
+  position: absolute;
+  width: 12rpx;
+  height: 2rpx;
+  background-color: #495057;
+  top: 0;
+  left: 4rpx;
+  box-shadow: 0 20rpx 0 #495057;
+}
+.sky-editor {
+  /* 3. Underline 下划线 */
+}
+.sky-editor .icon-underline {
+  width: 16rpx;
+  height: 22rpx;
+  position: relative;
+  box-sizing: border-box;
+}
+.sky-editor .icon-underline::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 16rpx;
+  height: 14rpx;
+  border: 2rpx solid #495057;
+  border-top: none;
+  border-radius: 0 0 8rpx 8rpx;
+  box-sizing: border-box;
+}
+.sky-editor .icon-underline::after {
+  content: "";
+  position: absolute;
+  left: -2rpx;
+  bottom: 2rpx;
+  width: 20rpx;
+  height: 2rpx;
+  background-color: #495057;
+}
+.sky-editor {
+  /* 3.2. FontSize 字体大小 (纯 CSS 精绘高保真大 A 小 A 组合图标) */
+}
+.sky-editor .icon-font-size {
+  width: 26rpx;
+  height: 22rpx;
+  position: relative;
+  box-sizing: border-box;
+  /* 左侧大 A 符号 */
+}
+.sky-editor .icon-font-size::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 2rpx;
+  width: 14rpx;
+  height: 18rpx;
+  border-left: 2rpx solid #495057;
+  border-right: 2rpx solid #495057;
+  border-top: 2rpx solid #495057;
+  border-top-left-radius: 7rpx;
+  border-top-right-radius: 7rpx;
+  background: linear-gradient(to bottom, transparent 9rpx, #495057 9rpx, #495057 11rpx, transparent 11rpx);
+  box-sizing: border-box;
+}
+.sky-editor .icon-font-size {
+  /* 右侧小 A 符号 */
+}
+.sky-editor .icon-font-size::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 2rpx;
+  width: 10rpx;
+  height: 12rpx;
+  border-left: 2rpx solid #495057;
+  border-right: 2rpx solid #495057;
+  border-top: 2rpx solid #495057;
+  border-top-left-radius: 5rpx;
+  border-top-right-radius: 5rpx;
+  background: linear-gradient(to bottom, transparent 5rpx, #495057 5rpx, #495057 7rpx, transparent 7rpx);
+  box-sizing: border-box;
+}
+.sky-editor {
+  /* 3.5. Color 字体颜色 (重构为挺拔、极具高辨识度的手绘大写 A 图标) */
+}
+.sky-editor .icon-color {
+  width: 22rpx;
+  height: 22rpx;
+  position: relative;
+  box-sizing: border-box;
+  /* 通过大倾角圆角，使其自然过渡为 A 字形的尖顶拱门 */
+}
+.sky-editor .icon-color::before {
+  content: "";
+  position: absolute;
+  left: 2rpx;
+  top: 0;
+  width: 18rpx;
+  height: 18rpx;
+  border-left: 2.5rpx solid #495057;
+  border-right: 2.5rpx solid #495057;
+  border-top: 2.5rpx solid #495057;
+  border-top-left-radius: 9rpx;
+  border-top-right-radius: 9rpx;
+  box-sizing: border-box;
+}
+.sky-editor .icon-color {
+  /* A 的中间一小横 */
+}
+.sky-editor .icon-color::after {
+  content: "";
+  position: absolute;
+  left: 4rpx;
+  top: 10rpx;
+  width: 14rpx;
+  height: 2rpx;
+  background-color: #495057;
+}
+.sky-editor .icon-color {
+  /* 底部动态彩色小横杠 */
+}
+.sky-editor .icon-color .icon-color-bar {
+  position: absolute;
+  left: 1rpx;
+  bottom: 0;
+  width: 20rpx;
+  height: 4rpx;
+  border-radius: 1px;
+  transition: background-color 150ms ease;
+}
+.sky-editor {
+  /* 4. 左对齐 */
+}
+.sky-editor .icon-align-left {
+  width: 22rpx;
+  height: 18rpx;
+  position: relative;
+  box-sizing: border-box;
+}
+.sky-editor .icon-align-left::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 22rpx;
+  height: 2rpx;
+  background-color: #495057;
+  box-shadow: 0 5rpx 0 #495057, 0 10rpx 0 #495057, 0 15rpx 0 #495057;
+}
+.sky-editor .icon-align-left::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 5rpx;
+  width: 14rpx;
+  height: 2rpx;
+  background-color: #495057;
+  box-shadow: 0 10rpx 0 #495057;
+}
+.sky-editor {
+  /* 5. 居中对齐 */
+}
+.sky-editor .icon-align-center {
+  width: 22rpx;
+  height: 18rpx;
+  position: relative;
+  box-sizing: border-box;
+}
+.sky-editor .icon-align-center::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 22rpx;
+  height: 2rpx;
+  background-color: #495057;
+  box-shadow: 0 10rpx 0 #495057;
+}
+.sky-editor .icon-align-center::after {
+  content: "";
+  position: absolute;
+  left: 4rpx;
+  top: 5rpx;
+  width: 14rpx;
+  height: 2rpx;
+  background-color: #495057;
+  box-shadow: 0 10rpx 0 #495057;
+}
+.sky-editor {
+  /* 6. 右对齐 */
+}
+.sky-editor .icon-align-right {
+  width: 22rpx;
+  height: 18rpx;
+  position: relative;
+  box-sizing: border-box;
+}
+.sky-editor .icon-align-right::before {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 22rpx;
+  height: 2rpx;
+  background-color: #495057;
+  box-shadow: 0 5rpx 0 #495057, 0 10rpx 0 #495057, 0 15rpx 0 #495057;
+}
+.sky-editor .icon-align-right::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 5rpx;
+  width: 14rpx;
+  height: 2rpx;
+  background-color: #495057;
+  box-shadow: 0 10rpx 0 #495057;
+}
+.sky-editor {
+  /* 7. Image 图片 */
+}
+.sky-editor .icon-image {
+  width: 22rpx;
+  height: 18rpx;
+  border: 2rpx solid #495057;
+  border-radius: 2px;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.sky-editor .icon-image::before {
+  content: "";
+  position: absolute;
+  width: 12rpx;
+  height: 12rpx;
+  border: 2rpx solid #495057;
+  transform: rotate(45deg);
+  bottom: -6rpx;
+  left: 2rpx;
+  box-sizing: border-box;
+}
+.sky-editor .icon-image::after {
+  content: "";
+  position: absolute;
+  width: 4rpx;
+  height: 4rpx;
+  border-radius: 50%;
+  background-color: #495057;
+  top: 3rpx;
+  right: 4rpx;
+}
+.sky-editor {
+  /* 8. Clear 清除格式 */
+}
+.sky-editor .icon-clear {
+  width: 22rpx;
+  height: 18rpx;
+  position: relative;
+  box-sizing: border-box;
+  /* 扫把柄 */
+}
+.sky-editor .icon-clear::before {
+  content: "";
+  position: absolute;
+  width: 2rpx;
+  height: 12rpx;
+  background-color: #495057;
+  left: 10rpx;
+  top: 0;
+  transform: rotate(25deg);
+}
+.sky-editor .icon-clear {
+  /* 扫把头 */
+}
+.sky-editor .icon-clear::after {
+  content: "";
+  position: absolute;
+  width: 14rpx;
+  height: 8rpx;
+  border: 2rpx solid #495057;
+  border-top: none;
+  border-radius: 0 0 3px 3px;
+  left: 4rpx;
+  bottom: 0;
+  box-sizing: border-box;
+}
+.sky-editor {
+  /* ==================== 激活态强制覆写为高亮品牌蓝紫 ==================== */
+}
+.sky-editor .sky-editor__tool-item--active .icon-font-size::before {
+  border-color: hsl(250, 85%, 55%) !important;
+  background: linear-gradient(to bottom, transparent 9rpx, hsl(250, 85%, 55%) 9rpx, hsl(250, 85%, 55%) 11rpx, transparent 11rpx) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-font-size::after {
+  border-color: hsl(250, 85%, 55%) !important;
+  background: linear-gradient(to bottom, transparent 5rpx, hsl(250, 85%, 55%) 5rpx, hsl(250, 85%, 55%) 7rpx, transparent 7rpx) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-bold {
+  border-color: hsl(250, 85%, 55%) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-bold::after {
+  background-color: hsl(250, 85%, 55%) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-italic::before {
+  background-color: hsl(250, 85%, 55%) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-italic::after {
+  background-color: hsl(250, 85%, 55%) !important;
+  box-shadow: 0 20rpx 0 hsl(250, 85%, 55%) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-underline::before {
+  border-color: hsl(250, 85%, 55%) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-underline::after {
+  background-color: hsl(250, 85%, 55%) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-color::before {
+  border-color: hsl(250, 85%, 55%) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-color::after {
+  background-color: hsl(250, 85%, 55%) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-align-left::before {
+  background-color: hsl(250, 85%, 55%) !important;
+  box-shadow: 0 5rpx 0 hsl(250, 85%, 55%), 0 10rpx 0 hsl(250, 85%, 55%), 0 15rpx 0 hsl(250, 85%, 55%) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-align-left::after {
+  background-color: hsl(250, 85%, 55%) !important;
+  box-shadow: 0 10rpx 0 hsl(250, 85%, 55%) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-align-center::before {
+  background-color: hsl(250, 85%, 55%) !important;
+  box-shadow: 0 10rpx 0 hsl(250, 85%, 55%) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-align-center::after {
+  background-color: hsl(250, 85%, 55%) !important;
+  box-shadow: 0 10rpx 0 hsl(250, 85%, 55%) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-align-right::before {
+  background-color: hsl(250, 85%, 55%) !important;
+  box-shadow: 0 5rpx 0 hsl(250, 85%, 55%), 0 10rpx 0 hsl(250, 85%, 55%), 0 15rpx 0 hsl(250, 85%, 55%) !important;
+}
+.sky-editor .sky-editor__tool-item--active .icon-align-right::after {
+  background-color: hsl(250, 85%, 55%) !important;
+  box-shadow: 0 10rpx 0 hsl(250, 85%, 55%) !important;
+}
+
+/* ==================== 气泡面板弹性入场阻尼 ==================== */
+@keyframes picker-bounce-anim {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(12rpx) scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+@keyframes picker-bounce-anim-safari {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(12rpx) scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}

package/miniprogram_dist/editor/index.wxss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["editor/index.scss","common/style/theme.scss"],"names":[],"mappings":";AAGA;AACA;AACA;AAEA;EACE;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA,kBC4Bc;ED3Bd;EACA;EACA;EACA;EACA;;AAdJ;AAiBE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA,OCqBe;;AD7CnB;AA2BE;;AACA;EACE;EACA;;AA9BJ;AAiCE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;AAEA;EACA;AAGA;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAhEN;AAoEE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA9EJ;AAiFE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OC7Ce;ED8Cf;EACA;EACA;EAEA;;AAEA;EACE;;AAGF;EACE;EACA;;AAtGN;AA0GE;;AACA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAEA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AA7JN;AAiKE;;AACA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAEA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA,OC5Je;ED6Jf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE,OClLY;EDmLZ,kBCtNc;EDuNd;;AAzNN;AA6NE;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCnMa;;AD5CnB;AAmPE;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA,kBCnNa;EDoNb;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA,kBC7Na;ED8Nb;EACA;EAEA;;AA7QN;AAiRE;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBChQa;;AD5CnB;AAgTE;;AACA;EACE;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AApBJ;AAuBE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAtVN;AA0VE;;AACA;EACE;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAnBJ;AAsBE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBC7Ua;;AD+SjB;AAiCE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AApYN;AAwYE;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBC1Wa;ED2Wb;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCvXa;EDwXb;;AApaN;AAwaE;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBC1Ya;ED2Yb;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCrZa;EDsZb;;AAlcN;AAscE;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCxaa;EDyab;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCrba;EDsbb;;AAleN;AAseE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBCtda;EDudb;EACA;;AApgBN;AAwgBE;;AACA;EACE;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA,kBCzea;ED0eb;EACA;EACA;;AAfJ;AAkBE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAtiBN;AA0iBE;;AAGI;EACE;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;;AACA;EAAW;;AAGX;EAAY;;AACZ;EAAW;EAAiD;;AAG5D;EAAY;;AACZ;EAAW;;AAGX;EAAY;;AACZ;EAAW;;AAGX;EACE;EACA;;AAEF;EACE;EACA;;AAIF;EACE;EACA;;AAEF;EACE;EACA;;AAIF;EACE;EACA;;AAEF;EACE;EACA;;;AAMR;AACA;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAGJ;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 Editor 富文本编辑器组件样式      */\n/* ========================================== */\n\n.sky-editor {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n\n  /* 编辑器白底容器 */\n  .sky-editor__container {\n    width: 100%;\n    min-height: 480rpx;\n    background-color: $sky-color-white;\n    border: 1px solid $sky-color-gray-3;\n    border-radius: 16rpx;\n    padding: 24rpx 30rpx;\n    box-sizing: border-box;\n    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.005);\n  }\n\n  /* 输入核心区域 */\n  .sky-editor__input {\n    width: 100%;\n    height: 100%;\n    min-height: 430rpx;\n    font-size: 28rpx;\n    line-height: 1.68;\n    color: $sky-color-gray-8;\n  }\n\n  /* 键盘平滑避让安全占位 */\n  .sky-editor__safe-padding {\n    width: 100%;\n    transition: height 150ms cubic-bezier(0.25, 1, 0.5, 1);\n  }\n\n  /* ==================== 高档悬浮毛玻璃工具栏 (100% 溢出可见) ==================== */\n  .sky-editor__toolbar {\n    position: fixed;\n    left: 30rpx;\n    right: 30rpx;\n    height: 88rpx;\n    border-radius: 44rpx;\n    z-index: 99;\n    \n    /* 采用高保真 backdrop-filter 毛玻璃滤镜，高雅通透 */\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    background-color: rgba(255, 255, 255, 0.86);\n    border: 1px solid rgba(255, 255, 255, 0.6);\n    \n    /* 必须强制溢出可见，确保上方调色气泡绝不被隐藏裁剪 */\n    overflow: visible !important;\n    \n    /* 多重极弱环境阴影 */\n    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.06),\n                0 1rpx 3rpx rgba(0, 0, 0, 0.02);\n    \n    /* 工具栏入场与隐藏的阻尼缩现动画 */\n    opacity: 0;\n    transform: translateY(30rpx) scale(0.95);\n    transition: opacity 250ms cubic-bezier(0.25, 1, 0.5, 1),\n                transform 250ms cubic-bezier(0.175, 0.885, 0.32, 1.15),\n                bottom 150ms cubic-bezier(0.25, 1, 0.5, 1);\n    \n    &.sky-editor__toolbar--visible {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  /* 均匀平铺的工具项容器 (无 scroll-view 裁剪) */\n  .sky-editor__toolbar-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between; /* 完美自适应平铺 9 个操作按钮 */\n    width: 100%;\n    height: 100%;\n    padding: 0 26rpx;\n    box-sizing: border-box;\n    overflow: visible !important;\n  }\n\n  /* 编辑器操作按键单项 (微调至 54rpx 确保无滚动平铺) */\n  .sky-editor__tool-item {\n    width: 54rpx;\n    height: 54rpx;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: $sky-color-gray-7;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    overflow: visible !important;\n    \n    transition: all 120ms ease;\n    \n    &:active {\n      background-color: rgba(0, 0, 0, 0.06);\n    }\n    \n    &--active {\n      color: $sky-color-primary !important;\n      background-color: $sky-color-primary-light !important;\n    }\n  }\n\n  /* ==================== 莫兰迪微型调色盘气泡面板 ==================== */\n  .sky-editor__color-picker {\n    position: absolute;\n    bottom: 78rpx; /* 微调距离，贴紧工具项 */\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 100;\n    \n    display: grid;\n    grid-template-columns: repeat(8, 1fr);\n    gap: 14rpx;\n    padding: 16rpx;\n    border-radius: 24rpx;\n    width: max-content;\n    \n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    background-color: rgba(255, 255, 255, 0.96);\n    border: 1px solid rgba(0, 0, 0, 0.08);\n    box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.12);\n    \n    /* 弹性出场阻尼 */\n    animation: picker-bounce-anim 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n\n    /* 气泡底角小尖角 */\n    &::after {\n      content: \"\";\n      position: absolute;\n      bottom: -12rpx;\n      left: 50%;\n      transform: translateX(-50%);\n      border-width: 6rpx;\n      border-style: solid;\n      border-color: rgba(255, 255, 255, 0.96) transparent transparent transparent;\n    }\n  }\n\n  .color-dot {\n    width: 32rpx;\n    height: 32rpx;\n    border-radius: 50%;\n    box-sizing: border-box;\n    border: 2rpx solid rgba(0, 0, 0, 0.08);\n    transition: all 120ms ease;\n    \n    &:active {\n      transform: scale(0.8);\n    }\n\n    &--active {\n      transform: scale(1.15);\n      box-shadow: 0 0 0 2rpx $sky-color-primary;\n    }\n  }\n\n  /* ==================== 胶囊字号选择气泡面板 ==================== */\n  .sky-editor__font-size-picker {\n    position: absolute;\n    bottom: 78rpx;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 100;\n    \n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 12rpx;\n    padding: 16rpx;\n    border-radius: 24rpx;\n    width: max-content;\n    \n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    background-color: rgba(255, 255, 255, 0.96);\n    border: 1px solid rgba(0, 0, 0, 0.08);\n    box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.12);\n    \n    /* 弹性出场阻尼 */\n    animation: picker-bounce-anim 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n\n    /* 气泡底角小尖角 */\n    &::after {\n      content: \"\";\n      position: absolute;\n      bottom: -12rpx;\n      left: 50%;\n      transform: translateX(-50%);\n      border-width: 6rpx;\n      border-style: solid;\n      border-color: rgba(255, 255, 255, 0.96) transparent transparent transparent;\n    }\n  }\n\n  .font-size-btn {\n    font-size: 20rpx;\n    color: $sky-color-gray-7;\n    padding: 6rpx 14rpx;\n    border-radius: 12rpx;\n    background-color: rgba(0, 0, 0, 0.04);\n    transition: all 120ms ease;\n    white-space: nowrap;\n    min-width: 76rpx;\n    text-align: center;\n    box-sizing: border-box;\n    \n    &:active {\n      transform: scale(0.9);\n    }\n    \n    &--active {\n      color: $sky-color-white;\n      background-color: $sky-color-primary;\n      font-weight: bold;\n    }\n  }\n\n  /* ==================== 纯 CSS 精绘高保真图标 ==================== */\n  \n  /* 1. Bold 加粗 */\n  .icon-bold {\n    width: 16rpx;\n    height: 22rpx;\n    border: 2rpx solid $sky-color-gray-7;\n    border-radius: 3px 6px 6px 3px;\n    position: relative;\n    box-sizing: border-box;\n    \n    &::after {\n      content: \"\";\n      position: absolute;\n      left: -2rpx;\n      top: 8rpx;\n      right: -2rpx;\n      height: 2rpx;\n      background-color: $sky-color-gray-7;\n    }\n  }\n\n  /* 2. Italic 斜体 */\n  .icon-italic {\n    width: 16rpx;\n    height: 22rpx;\n    position: relative;\n    box-sizing: border-box;\n    \n    &::before {\n      content: \"\";\n      position: absolute;\n      width: 2rpx;\n      height: 22rpx;\n      background-color: $sky-color-gray-7;\n      left: 7rpx;\n      transform: rotate(15deg);\n    }\n    \n    &::after {\n      content: \"\";\n      position: absolute;\n      width: 12rpx;\n      height: 2rpx;\n      background-color: $sky-color-gray-7;\n      top: 0;\n      left: 4rpx;\n      \n      box-shadow: 0 20rpx 0 $sky-color-gray-7;\n    }\n  }\n\n  /* 3. Underline 下划线 */\n  .icon-underline {\n    width: 16rpx;\n    height: 22rpx;\n    position: relative;\n    box-sizing: border-box;\n    \n    &::before {\n      content: \"\";\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 16rpx;\n      height: 14rpx;\n      border: 2rpx solid $sky-color-gray-7;\n      border-top: none;\n      border-radius: 0 0 8rpx 8rpx;\n      box-sizing: border-box;\n    }\n    \n    &::after {\n      content: \"\";\n      position: absolute;\n      left: -2rpx;\n      bottom: 2rpx;\n      width: 20rpx;\n      height: 2rpx;\n      background-color: $sky-color-gray-7;\n    }\n  }\n\n  /* 3.2. FontSize 字体大小 (纯 CSS 精绘高保真大 A 小 A 组合图标) */\n  .icon-font-size {\n    width: 26rpx;\n    height: 22rpx;\n    position: relative;\n    box-sizing: border-box;\n    \n    /* 左侧大 A 符号 */\n    &::before {\n      content: \"\";\n      position: absolute;\n      left: 0;\n      top: 2rpx;\n      width: 14rpx;\n      height: 18rpx;\n      border-left: 2rpx solid $sky-color-gray-7;\n      border-right: 2rpx solid $sky-color-gray-7;\n      border-top: 2rpx solid $sky-color-gray-7;\n      border-top-left-radius: 7rpx;\n      border-top-right-radius: 7rpx;\n      background: linear-gradient(to bottom, transparent 9rpx, $sky-color-gray-7 9rpx, $sky-color-gray-7 11rpx, transparent 11rpx);\n      box-sizing: border-box;\n    }\n    \n    /* 右侧小 A 符号 */\n    &::after {\n      content: \"\";\n      position: absolute;\n      right: 0;\n      bottom: 2rpx;\n      width: 10rpx;\n      height: 12rpx;\n      border-left: 2rpx solid $sky-color-gray-7;\n      border-right: 2rpx solid $sky-color-gray-7;\n      border-top: 2rpx solid $sky-color-gray-7;\n      border-top-left-radius: 5rpx;\n      border-top-right-radius: 5rpx;\n      background: linear-gradient(to bottom, transparent 5rpx, $sky-color-gray-7 5rpx, $sky-color-gray-7 7rpx, transparent 7rpx);\n      box-sizing: border-box;\n    }\n  }\n\n  /* 3.5. Color 字体颜色 (重构为挺拔、极具高辨识度的手绘大写 A 图标) */\n  .icon-color {\n    width: 22rpx;\n    height: 22rpx;\n    position: relative;\n    box-sizing: border-box;\n    \n    /* 通过大倾角圆角，使其自然过渡为 A 字形的尖顶拱门 */\n    &::before {\n      content: \"\";\n      position: absolute;\n      left: 2rpx;\n      top: 0;\n      width: 18rpx;\n      height: 18rpx;\n      border-left: 2.5rpx solid $sky-color-gray-7;\n      border-right: 2.5rpx solid $sky-color-gray-7;\n      border-top: 2.5rpx solid $sky-color-gray-7;\n      border-top-left-radius: 9rpx;\n      border-top-right-radius: 9rpx;\n      box-sizing: border-box;\n    }\n    \n    /* A 的中间一小横 */\n    &::after {\n      content: \"\";\n      position: absolute;\n      left: 4rpx;\n      top: 10rpx;\n      width: 14rpx;\n      height: 2rpx;\n      background-color: $sky-color-gray-7;\n    }\n\n    /* 底部动态彩色小横杠 */\n    .icon-color-bar {\n      position: absolute;\n      left: 1rpx;\n      bottom: 0;\n      width: 20rpx;\n      height: 4rpx;\n      border-radius: 1px;\n      transition: background-color 150ms ease;\n    }\n  }\n\n  /* 4. 左对齐 */\n  .icon-align-left {\n    width: 22rpx;\n    height: 18rpx;\n    position: relative;\n    box-sizing: border-box;\n    \n    &::before {\n      content: \"\";\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 22rpx;\n      height: 2rpx;\n      background-color: $sky-color-gray-7;\n      box-shadow: 0 5rpx 0 $sky-color-gray-7,\n                  0 10rpx 0 $sky-color-gray-7,\n                  0 15rpx 0 $sky-color-gray-7;\n    }\n    \n    &::after {\n      content: \"\";\n      position: absolute;\n      left: 0;\n      top: 5rpx;\n      width: 14rpx;\n      height: 2rpx;\n      background-color: $sky-color-gray-7;\n      box-shadow: 0 10rpx 0 $sky-color-gray-7;\n    }\n  }\n\n  /* 5. 居中对齐 */\n  .icon-align-center {\n    width: 22rpx;\n    height: 18rpx;\n    position: relative;\n    box-sizing: border-box;\n    \n    &::before {\n      content: \"\";\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 22rpx;\n      height: 2rpx;\n      background-color: $sky-color-gray-7;\n      box-shadow: 0 10rpx 0 $sky-color-gray-7;\n    }\n    \n    &::after {\n      content: \"\";\n      position: absolute;\n      left: 4rpx;\n      top: 5rpx;\n      width: 14rpx;\n      height: 2rpx;\n      background-color: $sky-color-gray-7;\n      box-shadow: 0 10rpx 0 $sky-color-gray-7;\n    }\n  }\n\n  /* 6. 右对齐 */\n  .icon-align-right {\n    width: 22rpx;\n    height: 18rpx;\n    position: relative;\n    box-sizing: border-box;\n    \n    &::before {\n      content: \"\";\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: 22rpx;\n      height: 2rpx;\n      background-color: $sky-color-gray-7;\n      box-shadow: 0 5rpx 0 $sky-color-gray-7,\n                  0 10rpx 0 $sky-color-gray-7,\n                  0 15rpx 0 $sky-color-gray-7;\n    }\n    \n    &::after {\n      content: \"\";\n      position: absolute;\n      right: 0;\n      top: 5rpx;\n      width: 14rpx;\n      height: 2rpx;\n      background-color: $sky-color-gray-7;\n      box-shadow: 0 10rpx 0 $sky-color-gray-7;\n    }\n  }\n\n  /* 7. Image 图片 */\n  .icon-image {\n    width: 22rpx;\n    height: 18rpx;\n    border: 2rpx solid $sky-color-gray-7;\n    border-radius: 2px;\n    position: relative;\n    box-sizing: border-box;\n    overflow: hidden;\n    \n    &::before {\n      content: \"\";\n      position: absolute;\n      width: 12rpx;\n      height: 12rpx;\n      border: 2rpx solid $sky-color-gray-7;\n      transform: rotate(45deg);\n      bottom: -6rpx;\n      left: 2rpx;\n      box-sizing: border-box;\n    }\n    \n    &::after {\n      content: \"\";\n      position: absolute;\n      width: 4rpx;\n      height: 4rpx;\n      border-radius: 50%;\n      background-color: $sky-color-gray-7;\n      top: 3rpx;\n      right: 4rpx;\n    }\n  }\n\n  /* 8. Clear 清除格式 */\n  .icon-clear {\n    width: 22rpx;\n    height: 18rpx;\n    position: relative;\n    box-sizing: border-box;\n    \n    /* 扫把柄 */\n    &::before {\n      content: \"\";\n      position: absolute;\n      width: 2rpx;\n      height: 12rpx;\n      background-color: $sky-color-gray-7;\n      left: 10rpx;\n      top: 0;\n      transform: rotate(25deg);\n    }\n    \n    /* 扫把头 */\n    &::after {\n      content: \"\";\n      position: absolute;\n      width: 14rpx;\n      height: 8rpx;\n      border: 2rpx solid $sky-color-gray-7;\n      border-top: none;\n      border-radius: 0 0 3px 3px;\n      left: 4rpx;\n      bottom: 0;\n      box-sizing: border-box;\n    }\n  }\n\n  /* ==================== 激活态强制覆写为高亮品牌蓝紫 ==================== */\n  .sky-editor__tool-item--active {\n    .icon-font-size {\n      &::before {\n        border-color: $sky-color-primary !important;\n        background: linear-gradient(to bottom, transparent 9rpx, $sky-color-primary 9rpx, $sky-color-primary 11rpx, transparent 11rpx) !important;\n      }\n      &::after {\n        border-color: $sky-color-primary !important;\n        background: linear-gradient(to bottom, transparent 5rpx, $sky-color-primary 5rpx, $sky-color-primary 7rpx, transparent 7rpx) !important;\n      }\n    }\n    .icon-bold {\n      border-color: $sky-color-primary !important;\n      &::after { background-color: $sky-color-primary !important; }\n    }\n    .icon-italic {\n      &::before { background-color: $sky-color-primary !important; }\n      &::after { background-color: $sky-color-primary !important; box-shadow: 0 20rpx 0 $sky-color-primary !important; }\n    }\n    .icon-underline {\n      &::before { border-color: $sky-color-primary !important; }\n      &::after { background-color: $sky-color-primary !important; }\n    }\n    .icon-color {\n      &::before { border-color: $sky-color-primary !important; }\n      &::after { background-color: $sky-color-primary !important; }\n    }\n    .icon-align-left {\n      &::before {\n        background-color: $sky-color-primary !important;\n        box-shadow: 0 5rpx 0 $sky-color-primary, 0 10rpx 0 $sky-color-primary, 0 15rpx 0 $sky-color-primary !important;\n      }\n      &::after {\n        background-color: $sky-color-primary !important;\n        box-shadow: 0 10rpx 0 $sky-color-primary !important;\n      }\n    }\n    .icon-align-center {\n      &::before {\n        background-color: $sky-color-primary !important;\n        box-shadow: 0 10rpx 0 $sky-color-primary !important;\n      }\n      &::after {\n        background-color: $sky-color-primary !important;\n        box-shadow: 0 10rpx 0 $sky-color-primary !important;\n      }\n    }\n    .icon-align-right {\n      &::before {\n        background-color: $sky-color-primary !important;\n        box-shadow: 0 5rpx 0 $sky-color-primary, 0 10rpx 0 $sky-color-primary, 0 15rpx 0 $sky-color-primary !important;\n      }\n      &::after {\n        background-color: $sky-color-primary !important;\n        box-shadow: 0 10rpx 0 $sky-color-primary !important;\n      }\n    }\n  }\n}\n\n/* ==================== 气泡面板弹性入场阻尼 ==================== */\n@keyframes picker-bounce-anim {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(12rpx) scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0) scale(1);\n  }\n}\n@keyframes picker-bounce-anim-safari {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(12rpx) scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0) scale(1);\n  }\n}\n","// ==========================================\r\n// Skyline-UI 极具质感的现代设计系统 (SCSS)\r\n// ==========================================\r\n\r\n// --- 品牌色体系 (HSL Tailored Colors) ---\r\n$sky-brand-h: 250; // 主品牌色相 (优雅深紫/蓝色调)\r\n$sky-brand-s: 85%;\r\n$sky-brand-l: 55%;\r\n\r\n$sky-color-primary: hsl($sky-brand-h, $sky-brand-s, $sky-brand-l);\r\n$sky-color-primary-hover: hsl($sky-brand-h, $sky-brand-s, $sky-brand-l - 8%);\r\n$sky-color-primary-active: hsl($sky-brand-h, $sky-brand-s, $sky-brand-l - 15%);\r\n$sky-color-primary-light: hsl($sky-brand-h, $sky-brand-s, 95%);\r\n\r\n// 辅助色体系 (意图表达)\r\n$sky-color-success: hsl(150, 80%, 40%);\r\n$sky-color-success-active: hsl(150, 80%, 32%);\r\n$sky-color-success-light: hsl(150, 80%, 96%);\r\n\r\n$sky-color-warning: hsl(35, 90%, 50%);\r\n$sky-color-warning-active: hsl(35, 90%, 42%);\r\n$sky-color-warning-light: hsl(35, 90%, 96%);\r\n\r\n$sky-color-danger: hsl(355, 85%, 55%);\r\n$sky-color-danger-active: hsl(355, 85%, 45%);\r\n$sky-color-danger-light: hsl(355, 85%, 96%);\r\n\r\n$sky-color-info: hsl(200, 85%, 50%);\r\n$sky-color-info-active: hsl(200, 85%, 42%);\r\n$sky-color-info-light: hsl(200, 85%, 96%);\r\n\r\n// --- Tag 标签组件专用色系 (莫兰迪低饱和) ---\r\n$sky-tag-blue: #edf2ff;\r\n$sky-tag-blue-text: #3b5bdb;\r\n$sky-tag-green: #ebfbee;\r\n$sky-tag-green-text: #2b8a3e;\r\n$sky-tag-yellow: #fff9db;\r\n$sky-tag-yellow-text: #f08c00;\r\n$sky-tag-red: #ffeef0;\r\n$sky-tag-red-text: #fa5252;\r\n$sky-tag-info: #e7f5ff;\r\n$sky-tag-info-text: #1c7ed6;\r\n\r\n// --- 纯净的中性色调 (Sleek Grays) ---\r\n$sky-color-white: #ffffff;\r\n$sky-color-gray-1: #f8f9fa; // 极浅背景\r\n$sky-color-gray-2: #f1f3f5; // 浅灰背景\r\n$sky-color-gray-3: #e9ecef; // 边框线/失效态\r\n$sky-color-gray-4: #dee2e6;\r\n$sky-color-gray-5: #adb5bd; // 提示文本\r\n$sky-color-gray-6: #868e96;\r\n$sky-color-gray-7: #495057; // 次级文本\r\n$sky-color-gray-8: #343a40;\r\n$sky-color-gray-9: #212529; // 主级文本\r\n\r\n// --- 阴影系统 (Premium Shadows) ---\r\n$sky-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);\r\n$sky-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n$sky-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);\r\n$sky-shadow-primary: 0 4px 14px rgba(100, 80, 240, 0.2);\r\n\r\n// --- 圆角规范 (Borders) ---\r\n$sky-border-radius-xs: 4rpx;\r\n$sky-border-radius-sm: 8rpx;\r\n$sky-border-radius-md: 12rpx;\r\n$sky-border-radius-lg: 20rpx;\r\n$sky-border-radius-round: 9999rpx;\r\n\r\n// --- 字体与字号规范 (Typography) ---\r\n$sky-font-family: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Helvetica, \"Segoe UI\", Arial, Roboto, sans-serif;\r\n$sky-font-size-xs: 20rpx;\r\n$sky-font-size-sm: 24rpx;\r\n$sky-font-size-md: 28rpx;\r\n$sky-font-size-lg: 32rpx;\r\n$sky-font-size-xl: 36rpx;\r\n\r\n// --- 动效与过渡 (Transitions) ---\r\n$sky-transition-duration: 200ms;\r\n$sky-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n// --- 间距规范 (Spacing) ---\r\n$sky-spacing-xs: 8rpx;\r\n$sky-spacing-sm: 16rpx;\r\n$sky-spacing-md: 24rpx;\r\n$sky-spacing-lg: 32rpx;\r\n$sky-spacing-xl: 48rpx;\r\n\r\n// --- 组件高度规范 (Component Heights) ---\r\n$sky-height-sm: 56rpx;\r\n$sky-height-md: 72rpx;\r\n$sky-height-lg: 88rpx;\r\n$sky-height-xl: 96rpx;\r\n\r\n// --- 层级规范 (Z-Index) ---\r\n$sky-z-dropdown: 100;\r\n$sky-z-fixed: 500;\r\n$sky-z-popup: 1000;\r\n$sky-z-toast: 2000;\r\n"]}