wx-sky-ui 1.0.0

package/miniprogram_dist/input/index.wxml

@@ -0,0 +1,57 @@
+<view class="sky-input-container">
+  <!-- 输入主体卡片（支持 Border, Round, Filled 三种视觉风格，及 Focus 发光高亮） -->
+  <view class="sky-input sky-input--{{ variant }} sky-input--{{ size }} {{ focused ? 'sky-input--focus' : '' }} {{ disabled ? 'sky-input--disabled' : '' }}">
+    
+    <!-- 搜索模式前置放大镜图标（纯 CSS 极致手绘） -->
+    <view wx:if="{{ search }}" class="sky-input__search-icon"></view>
+    
+    <!-- 前缀自定义插槽 -->
+    <view class="sky-input__prefix">
+      <slot name="prefix"></slot>
+    </view>
+    
+    <!-- 原生小程序高性能文本输入控件 -->
+    <input 
+      class="sky-input__control"
+      value="{{ value }}"
+      type="{{ type }}"
+      placeholder="{{ placeholder }}"
+      placeholder-style="{{ placeholderStyle }}"
+      disabled="{{ disabled }}"
+      maxlength="{{ maxlength }}"
+      password="{{ currentPassword }}"
+      focus="{{ focus }}"
+      confirm-type="{{ search ? 'search' : confirmType }}"
+      bindinput="onInput"
+      bindfocus="onFocus"
+      bindblur="onBlur"
+      bindconfirm="onConfirm"
+    />
+    
+    <!-- 后缀自定义插槽 -->
+    <view class="sky-input__suffix">
+      <slot name="suffix"></slot>
+    </view>
+    
+    <!-- 一键清除“X”图标（硬件加速 60fps 淡入淡出旋转过渡） -->
+    <view class="sky-input__clear-wrapper {{ showClear ? 'sky-input__clear-wrapper--show' : '' }}" hover-class="sky-input__clear-active" hover-stay-time="70" catchtap="onClear">
+      <view class="sky-input__clear-icon"></view>
+    </view>
+    
+    <!-- 密码眼睛可见性切换（睁眼/闭眼，纯 CSS 极高品味矢量几何魔法，移至最右侧） -->
+    <view wx:if="{{ password }}" class="sky-input__eye-wrapper" hover-class="sky-input__eye-active" hover-stay-time="70" catchtap="onPasswordToggle">
+      <view class="sky-input__eye-icon {{ currentPassword ? 'sky-input__eye-icon--closed' : 'sky-input__eye-icon--open' }}"></view>
+    </view>
+
+  </view>
+  
+  <!-- 弹性挤压滑入操作区域（仅在 actionText 有值且聚焦/有内容时从右侧优雅切入） -->
+  <view wx:if="{{ actionText }}" class="sky-input__action-wrapper {{ (focused || value) ? 'sky-input__action-wrapper--active' : '' }}" bindtap="onAction">
+    <text class="sky-input__action-text">{{ actionText }}</text>
+  </view>
+  
+  <!-- 静态右侧行动插槽 -->
+  <view class="sky-input__action-slot">
+    <slot name="action"></slot>
+  </view>
+</view>

package/miniprogram_dist/input/index.wxss

@@ -0,0 +1,331 @@
+@charset "UTF-8";
+.sky-input-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+}
+
+.sky-input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
+  position: relative;
+}
+
+.sky-input--border {
+  border: 2rpx solid #e9ecef;
+  background-color: #ffffff;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.01);
+}
+.sky-input--border.sky-input--focus {
+  border-color: hsl(250, 85%, 55%);
+  box-shadow: 0 0 12rpx rgba(75.225, 42.7125, 237.7875, 0.18);
+}
+
+.sky-input--round {
+  border: 2rpx solid #f1f3f5;
+  background-color: #ffffff;
+  border-radius: 100rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
+}
+.sky-input--round.sky-input--focus {
+  border-color: hsl(250, 85%, 55%);
+  background-color: #ffffff;
+  box-shadow: 0 0 12rpx rgba(75.225, 42.7125, 237.7875, 0.15);
+}
+
+.sky-input--filled {
+  border: 2rpx solid transparent;
+  background-color: #f8f9fa;
+  border-radius: 16rpx;
+}
+.sky-input--filled.sky-input--focus {
+  background-color: #ffffff;
+  border-color: rgba(75.225, 42.7125, 237.7875, 0.3);
+  box-shadow: 0 0 12rpx rgba(75.225, 42.7125, 237.7875, 0.1);
+}
+
+.sky-input--normal {
+  height: 80rpx;
+  border-radius: 12rpx;
+  padding: 0 20rpx;
+}
+.sky-input--normal.sky-input--round {
+  border-radius: 80rpx;
+}
+
+.sky-input--large {
+  height: 96rpx;
+  border-radius: 16rpx;
+  padding: 0 24rpx;
+}
+.sky-input--large.sky-input--round {
+  border-radius: 96rpx;
+}
+
+.sky-input__control {
+  flex: 1;
+  height: 100%;
+  font-size: 28rpx;
+  color: #212529;
+  padding: 0 8rpx;
+  box-sizing: border-box;
+  background-color: transparent;
+}
+
+.sky-input--disabled {
+  background-color: rgba(0, 0, 0, 0.02) !important;
+  border-color: #e9ecef !important;
+  box-shadow: none !important;
+}
+.sky-input--disabled .sky-input__control {
+  color: #adb5bd !important;
+}
+.sky-input--disabled .sky-input__search-icon,
+.sky-input--disabled .sky-input__prefix,
+.sky-input--disabled .sky-input__suffix {
+  opacity: 0.3 !important;
+}
+
+.sky-input__search-icon {
+  position: relative;
+  width: 24rpx;
+  height: 24rpx;
+  border: 3.5rpx solid #adb5bd;
+  border-radius: 50%;
+  margin-left: 8rpx;
+  margin-right: 8rpx;
+  box-sizing: border-box;
+  opacity: 0.5;
+  transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease;
+  pointer-events: none;
+}
+.sky-input__search-icon::after {
+  content: "";
+  position: absolute;
+  bottom: -6rpx;
+  right: -6rpx;
+  width: 10rpx;
+  height: 3.5rpx;
+  background-color: #adb5bd;
+  transform: rotate(45deg);
+  border-radius: 2rpx;
+  transition: background-color 0.25s ease;
+}
+
+.sky-input--focus .sky-input__search-icon {
+  border-color: hsl(250, 85%, 55%);
+  opacity: 0.9;
+}
+.sky-input--focus .sky-input__search-icon::after {
+  background-color: hsl(250, 85%, 55%);
+}
+
+.sky-input__clear-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36rpx;
+  height: 36rpx;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.05);
+  margin-right: 4rpx;
+  margin-left: 8rpx;
+  opacity: 0;
+  transform: scale(0.6) rotate(-45deg);
+  pointer-events: none;
+  transition: opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease;
+}
+
+.sky-input__clear-wrapper--show {
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
+  pointer-events: auto;
+}
+
+.sky-input__clear-active {
+  transform: scale(0.82) !important;
+  background-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+.sky-input__clear-icon {
+  position: relative;
+  width: 16rpx;
+  height: 16rpx;
+}
+.sky-input__clear-icon::before, .sky-input__clear-icon::after {
+  content: "";
+  position: absolute;
+  top: 7rpx;
+  left: 0;
+  width: 16rpx;
+  height: 2.5rpx;
+  background-color: #adb5bd;
+  border-radius: 2rpx;
+}
+.sky-input__clear-icon::before {
+  transform: rotate(45deg);
+}
+.sky-input__clear-icon::after {
+  transform: rotate(-45deg);
+}
+
+.sky-input__prefix,
+.sky-input__suffix {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.sky-input__action-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  box-sizing: border-box;
+  max-width: 0;
+  margin-left: 0;
+  opacity: 0;
+  transform: translateX(100%) scale(0.88);
+  pointer-events: none;
+  overflow: hidden;
+  transition: max-width 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), margin-left 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.sky-input__action-wrapper--active {
+  max-width: 120rpx;
+  margin-left: 20rpx;
+  opacity: 1;
+  transform: translateX(0) scale(1);
+  pointer-events: auto;
+}
+
+.sky-input__action-text {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: hsl(250, 85%, 55%);
+  letter-spacing: 0.5rpx;
+  white-space: nowrap;
+}
+.sky-input__action-text:active {
+  opacity: 0.7;
+}
+
+.sky-input__action-slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.sky-input__eye-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 50%;
+  margin-right: -16rpx; /* 高精度向右微调贴边，完美响应莫哥的要求，极速消除多余右侧空隙 */
+  margin-left: 4rpx;
+  transition: background-color 0.15s ease, transform 0.15s ease;
+  flex-shrink: 0;
+}
+
+.sky-input__eye-wrapper:active {
+  background-color: rgba(0, 0, 0, 0.05);
+  transform: scale(0.92);
+}
+
+/* 睁眼状态：橄榄形精致描边眼眶 */
+.sky-input__eye-icon {
+  position: relative;
+  width: 32rpx;
+  height: 20rpx;
+  border: 3rpx solid #adb5bd; /* 描边眼眶，极具空气感与通透呼吸感 */
+  border-radius: 50% 50%;
+  box-sizing: border-box;
+  background-color: transparent;
+  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 睁眼状态下的瞳孔（居中实心圆点） */
+.sky-input__eye-icon::before {
+  content: "";
+  position: absolute;
+  width: 10rpx;
+  height: 10rpx;
+  background-color: #adb5bd;
+  border-radius: 50%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(1);
+  box-shadow: 0 0 0 rgba(144, 147, 153, 0); /* 初始无投影，用于平滑过渡 */
+  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); /* 果冻级阻尼回弹贝塞尔 */
+  opacity: 1;
+}
+
+/* 闭眼状态下的优雅弯弯睫毛弧线（睁眼时处于隐匿状态） */
+.sky-input__eye-icon::after {
+  content: "";
+  position: absolute;
+  width: 30rpx;
+  height: 14rpx;
+  border-bottom: 3.5rpx solid #adb5bd; /* 只有下边框，形成向下弯曲的眼皮弧线 */
+  border-radius: 0 0 50% 50%; /* 下部椭圆圆角 */
+  left: 50%;
+  top: 35%; /* 垂直视觉重心微调，确保居中 */
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0;
+  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+/* 闭眼状态：仅将眼眶描边变透明，使其隐去，但容器本身保持不透明以供子元素睫毛与微粒完美展示 */
+.sky-input__eye-icon--closed {
+  border-color: transparent;
+  transform: scale(1);
+}
+
+/* 闭眼时：中心瞳孔圆点分裂飘散为两颗梦幻微尘，静静悬浮于弯弯睫毛的左右上方，带有些许胧朦感 */
+.sky-input__eye-icon--closed::before {
+  transform: translate(-14rpx, -18rpx) scale(0.4); /* 左上方魔法微尘 */
+  box-shadow: 24rpx 8rpx 0 rgba(144, 147, 153, 0.8); /* 右上方魔法微尘（利用阴影复制，零开销） */
+  background-color: rgba(144, 147, 153, 0.8);
+  opacity: 0.8;
+}
+
+/* 闭眼时：优雅的弯弯睫毛弧线平滑放大淡入显现，表现高档、温暖的闭目灵动效果 */
+.sky-input__eye-icon--closed::after {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+
+/* 联动输入框 Focus 状态进行高亮意图表达 */
+.sky-input--focus .sky-input__eye-icon {
+  border-color: #495057;
+}
+
+.sky-input--focus .sky-input__eye-icon::before {
+  background-color: hsl(250, 85%, 55%); /* 睁眼时：中心瞳孔高亮为主色蓝紫 */
+}
+
+.sky-input--focus .sky-input__eye-icon--closed::before {
+  background-color: rgba(71, 85, 105, 0.8); /* 闭眼时：左上方微尘同步高亮为墨灰 */
+  box-shadow: 24rpx 8rpx 0 rgba(71, 85, 105, 0.8); /* 闭眼时：右上方微尘同步高亮为墨灰 */
+}
+
+.sky-input--focus .sky-input__eye-icon--closed::after {
+  border-bottom-color: #495057; /* 闭眼时：弯弯睫毛同步高亮为墨灰 */
+}

package/miniprogram_dist/input/index.wxss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["input/index.scss","common/style/theme.scss"],"names":[],"mappings":";AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA,kBCagB;EDZhB;;AAEA;EACE,cC1BgB;ED2BhB;;;AAKJ;EACE;EACA,kBCCgB;EDAhB;EACA;;AAEA;EACE,cCvCgB;EDwChB,kBCLc;EDMd;;;AAKJ;EACE;EACA,kBCZiB;EDajB;;AAEA;EACE,kBCjBc;EDkBd;EACA;;;AAMJ;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAOJ;EACE;EACA;EACA;EACA,OC3CiB;ED4CjB;EACA;EACA;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;EAGE;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBC7Fe;ED8Ff;EACA;EACA;;;AAMF;EACE,cC/IgB;EDgJhB;;AAEA;EACE,kBCnJc;;;ADyJpB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA,kBC9Je;ED+Jf;;AAGF;EACE;;AAGF;EACE;;;AAMJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAOF;EACE;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA,OCnQkB;EDoQlB;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA,kBCpRiB;EDqRjB;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE,cCjUiB;;;ADoUnB;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE,qBC9UiB,SD8UuB","file":"index.wxss","sourcesContent":["@use \"../common/style/theme.scss\" as *;\n@use \"../common/style/mixins.scss\" as *;\n\n// 外层横向流式容器，为挤压滑入动画提供根基\n.sky-input-container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  position: relative;\n}\n\n// 输入主体卡片基类（支持 flex: 1 宽度平滑过渡）\n.sky-input {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;\n  position: relative;\n}\n\n// ------------------- 风格变体 -------------------\n\n// 1. Border：精致细边框卡表单风格\n.sky-input--border {\n  border: 2rpx solid $sky-color-gray-3;\n  background-color: $sky-color-white;\n  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.01);\n  \n  &.sky-input--focus {\n    border-color: $sky-color-primary;\n    box-shadow: 0 0 12rpx rgba($sky-color-primary, 0.18);\n  }\n}\n\n// 2. Round：全局搜索胶囊大圆角风格\n.sky-input--round {\n  border: 2rpx solid $sky-color-gray-2;\n  background-color: $sky-color-white;\n  border-radius: 100rpx;\n  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);\n  \n  &.sky-input--focus {\n    border-color: $sky-color-primary;\n    background-color: $sky-color-white;\n    box-shadow: 0 0 12rpx rgba($sky-color-primary, 0.15);\n  }\n}\n\n// 3. Filled：极简轻量级无边框填充背景风格\n.sky-input--filled {\n  border: 2rpx solid transparent;\n  background-color: $sky-color-gray-1;\n  border-radius: 16rpx;\n  \n  &.sky-input--focus {\n    background-color: $sky-color-white;\n    border-color: rgba($sky-color-primary, 0.3);\n    box-shadow: 0 0 12rpx rgba($sky-color-primary, 0.1);\n  }\n}\n\n// ------------------- 尺寸规格 -------------------\n\n.sky-input--normal {\n  height: 80rpx;\n  border-radius: 12rpx;\n  padding: 0 20rpx;\n  \n  &.sky-input--round {\n    border-radius: 80rpx;\n  }\n}\n\n.sky-input--large {\n  height: 96rpx;\n  border-radius: 16rpx;\n  padding: 0 24rpx;\n  \n  &.sky-input--round {\n    border-radius: 96rpx;\n  }\n}\n\n// ------------------- 内部元素 -------------------\n\n// 输入框原生控件\n.sky-input__control {\n  flex: 1;\n  height: 100%;\n  font-size: 28rpx;\n  color: $sky-color-gray-9;\n  padding: 0 8rpx;\n  box-sizing: border-box;\n  background-color: transparent;\n}\n\n// 禁用状态\n.sky-input--disabled {\n  background-color: rgba(0, 0, 0, 0.02) !important;\n  border-color: $sky-color-gray-3 !important;\n  box-shadow: none !important;\n  \n  .sky-input__control {\n    color: $sky-color-gray-5 !important;\n  }\n  \n  .sky-input__search-icon,\n  .sky-input__prefix,\n  .sky-input__suffix {\n    opacity: 0.3 !important;\n  }\n}\n\n// ------------------- 高保真纯 CSS 图标 -------------------\n\n// 1. 放大镜搜索图标\n.sky-input__search-icon {\n  position: relative;\n  width: 24rpx;\n  height: 24rpx;\n  border: 3.5rpx solid $sky-color-gray-5;\n  border-radius: 50%;\n  margin-left: 8rpx;\n  margin-right: 8rpx;\n  box-sizing: border-box;\n  opacity: 0.5;\n  transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease;\n  pointer-events: none;\n  \n  &::after {\n    content: \"\";\n    position: absolute;\n    bottom: -6rpx;\n    right: -6rpx;\n    width: 10rpx;\n    height: 3.5rpx;\n    background-color: $sky-color-gray-5;\n    transform: rotate(45deg);\n    border-radius: 2rpx;\n    transition: background-color 0.25s ease;\n  }\n}\n\n// 联动高亮搜索图标\n.sky-input--focus {\n  .sky-input__search-icon {\n    border-color: $sky-color-primary;\n    opacity: 0.9;\n    \n    &::after {\n      background-color: $sky-color-primary;\n    }\n  }\n}\n\n// 2. 一键清除 \"X\" 图标包装器 (由 Compositor 驱动的高性能缩放旋转与透明度过渡)\n.sky-input__clear-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36rpx;\n  height: 36rpx;\n  border-radius: 50%;\n  background-color: rgba(0, 0, 0, 0.05);\n  margin-right: 4rpx;\n  margin-left: 8rpx;\n  \n  // 核心动画定义：初始状态隐藏且轻微逆时针旋转收缩\n  opacity: 0;\n  transform: scale(0.6) rotate(-45deg);\n  pointer-events: none;\n  transition: opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease;\n}\n\n// 清除按钮激活态（淡入）\n.sky-input__clear-wrapper--show {\n  opacity: 1;\n  transform: scale(1) rotate(0deg);\n  pointer-events: auto;\n}\n\n// 清除按钮点击下按反馈\n.sky-input__clear-active {\n  transform: scale(0.82) !important;\n  background-color: rgba(0, 0, 0, 0.15) !important;\n}\n\n// 清除叉号线条手绘\n.sky-input__clear-icon {\n  position: relative;\n  width: 16rpx;\n  height: 16rpx;\n  \n  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 7rpx;\n    left: 0;\n    width: 16rpx;\n    height: 2.5rpx;\n    background-color: $sky-color-gray-5;\n    border-radius: 2rpx;\n  }\n  \n  &::before {\n    transform: rotate(45deg);\n  }\n  \n  &::after {\n    transform: rotate(-45deg);\n  }\n}\n\n// ------------------- 插槽占位 -------------------\n\n.sky-input__prefix,\n.sky-input__suffix {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n// ------------------- 弹性滑动挤压行动区 -------------------\n\n// 仅在拥有 actionText 时渲染的极奢滑动挤压容器\n.sky-input__action-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  box-sizing: border-box;\n  \n  // 核心过渡定义：初始情况下完全收缩并隐藏在右侧\n  max-width: 0;\n  margin-left: 0;\n  opacity: 0;\n  transform: translateX(100%) scale(0.88);\n  pointer-events: none;\n  overflow: hidden;\n  \n  transition: max-width 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), \n              margin-left 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), \n              opacity 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), \n              transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n// 输入框聚焦或有字时，行动按钮弹性滑入\n.sky-input__action-wrapper--active {\n  max-width: 120rpx;\n  margin-left: 20rpx;\n  opacity: 1;\n  transform: translateX(0) scale(1);\n  pointer-events: auto;\n}\n\n// 行动区精致字体\n.sky-input__action-text {\n  font-size: 28rpx;\n  font-weight: 500;\n  color: $sky-color-primary;\n  letter-spacing: 0.5rpx;\n  white-space: nowrap;\n  \n  &:active {\n    opacity: 0.7;\n  }\n}\n\n// 行动插槽\n.sky-input__action-slot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n// 3. 密码可见性切换“眼睛”图标 (100% 纯 CSS 矢量几何手绘，完美融入雅致极光白体系)\n.sky-input__eye-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 44rpx;\n  height: 44rpx;\n  border-radius: 50%;\n  margin-right: -16rpx; /* 高精度向右微调贴边，完美响应莫哥的要求，极速消除多余右侧空隙 */\n  margin-left: 4rpx;\n  transition: background-color 0.15s ease, transform 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sky-input__eye-wrapper:active {\n  background-color: rgba(0, 0, 0, 0.05);\n  transform: scale(0.92);\n}\n\n/* 睁眼状态：橄榄形精致描边眼眶 */\n.sky-input__eye-icon {\n  position: relative;\n  width: 32rpx;\n  height: 20rpx;\n  border: 3rpx solid $sky-color-gray-5; /* 描边眼眶，极具空气感与通透呼吸感 */\n  border-radius: 50% 50%;\n  box-sizing: border-box;\n  background-color: transparent;\n  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* 睁眼状态下的瞳孔（居中实心圆点） */\n.sky-input__eye-icon::before {\n  content: \"\";\n  position: absolute;\n  width: 10rpx;\n  height: 10rpx;\n  background-color: $sky-color-gray-5;\n  border-radius: 50%;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  box-shadow: 0 0 0 rgba(144, 147, 153, 0); /* 初始无投影，用于平滑过渡 */\n  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); /* 果冻级阻尼回弹贝塞尔 */\n  opacity: 1;\n}\n\n/* 闭眼状态下的优雅弯弯睫毛弧线（睁眼时处于隐匿状态） */\n.sky-input__eye-icon::after {\n  content: \"\";\n  position: absolute;\n  width: 30rpx;\n  height: 14rpx;\n  border-bottom: 3.5rpx solid $sky-color-gray-5; /* 只有下边框，形成向下弯曲的眼皮弧线 */\n  border-radius: 0 0 50% 50%; /* 下部椭圆圆角 */\n  left: 50%;\n  top: 35%; /* 垂直视觉重心微调，确保居中 */\n  transform: translate(-50%, -50%) scale(0);\n  opacity: 0;\n  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n/* 闭眼状态：仅将眼眶描边变透明，使其隐去，但容器本身保持不透明以供子元素睫毛与微粒完美展示 */\n.sky-input__eye-icon--closed {\n  border-color: transparent;\n  transform: scale(1);\n}\n\n/* 闭眼时：中心瞳孔圆点分裂飘散为两颗梦幻微尘，静静悬浮于弯弯睫毛的左右上方，带有些许胧朦感 */\n.sky-input__eye-icon--closed::before {\n  transform: translate(-14rpx, -18rpx) scale(0.4); /* 左上方魔法微尘 */\n  box-shadow: 24rpx 8rpx 0 rgba(144, 147, 153, 0.8); /* 右上方魔法微尘（利用阴影复制，零开销） */\n  background-color: rgba(144, 147, 153, 0.8);\n  opacity: 0.8;\n}\n\n/* 闭眼时：优雅的弯弯睫毛弧线平滑放大淡入显现，表现高档、温暖的闭目灵动效果 */\n.sky-input__eye-icon--closed::after {\n  transform: translate(-50%, -50%) scale(1);\n  opacity: 1;\n}\n\n/* 联动输入框 Focus 状态进行高亮意图表达 */\n.sky-input--focus .sky-input__eye-icon {\n  border-color: $sky-color-gray-7;\n}\n\n.sky-input--focus .sky-input__eye-icon::before {\n  background-color: #{$sky-color-primary}; /* 睁眼时：中心瞳孔高亮为主色蓝紫 */\n}\n\n.sky-input--focus .sky-input__eye-icon--closed::before {\n  background-color: rgba(71, 85, 105, 0.8); /* 闭眼时：左上方微尘同步高亮为墨灰 */\n  box-shadow: 24rpx 8rpx 0 rgba(71, 85, 105, 0.8); /* 闭眼时：右上方微尘同步高亮为墨灰 */\n}\n\n.sky-input--focus .sky-input__eye-icon--closed::after {\n  border-bottom-color: $sky-color-gray-7; /* 闭眼时：弯弯睫毛同步高亮为墨灰 */\n}\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/nav-bar/index.js

@@ -0,0 +1,162 @@
+"use strict";
+Component({
+    options: {
+        virtualHost: true,
+        multipleSlots: true
+    },
+    properties: {
+        // 标题文本
+        title: {
+            type: String,
+            value: ''
+        },
+        // 导航栏背景色，支持色值和渐变
+        background: {
+            type: String,
+            value: ''
+        },
+        // 全局文字颜色（标题和图标的默认色）
+        color: {
+            type: String,
+            value: ''
+        },
+        // 是否显示返回图标
+        back: {
+            type: Boolean,
+            value: true
+        },
+        // 是否显示加载指示器
+        loading: {
+            type: Boolean,
+            value: false
+        },
+        // 是否显示首页图标
+        homeButton: {
+            type: Boolean,
+            value: false
+        },
+        // 是否固定在顶部
+        fixed: {
+            type: Boolean,
+            value: true
+        },
+        // 返回时的页面层数
+        delta: {
+            type: Number,
+            value: 1
+        },
+        // 标题对齐方式：left（靠左）| center（居中）
+        align: {
+            type: String,
+            value: 'left'
+        },
+        // 标题颜色，覆盖全局 color
+        titleColor: {
+            type: String,
+            value: ''
+        },
+        // 标题字号，如 32rpx、16px
+        titleSize: {
+            type: String,
+            value: ''
+        },
+        // 标题是否加粗，默认 true
+        titleBold: {
+            type: Boolean,
+            value: true
+        },
+        // 返回图标颜色，覆盖全局 color
+        iconColor: {
+            type: String,
+            value: ''
+        },
+        // 返回图标尺寸，如 36rpx、18px
+        iconSize: {
+            type: String,
+            value: ''
+        },
+        // 返回图标描边粗细，如 2.5、3rpx
+        iconWeight: {
+            type: String,
+            value: ''
+        },
+        // 返回图标与标题之间的间距，如 12rpx、8px
+        titleSpacing: {
+            type: String,
+            value: ''
+        },
+        // 预览模式：去除状态栏高度和右侧内边距，适合卡片展示
+        preview: {
+            type: Boolean,
+            value: false
+        }
+    },
+    data: {
+        statusBarHeight: 44,
+        navBarHeight: 44,
+        innerPaddingRight: 97,
+        leftWidth: 'width: 97px'
+    },
+    lifetimes: {
+        attached() {
+            try {
+                if (this.data.preview) {
+                    this.setData({
+                        statusBarHeight: 0,
+                        navBarHeight: 44,
+                        innerPaddingRight: 0,
+                        leftWidth: 'width: 0px'
+                    });
+                    return;
+                }
+                const sysInfo = wx.getSystemInfoSync();
+                let rect = null;
+                try {
+                    rect = wx.getMenuButtonBoundingClientRect();
+                }
+                catch (e) {
+                    console.warn('Failed to get menu button bounding rect:', e);
+                }
+                const statusBarHeight = sysInfo.statusBarHeight || 20;
+                let navBarHeight = 44; // 默认高度
+                let innerPaddingRight = 97; // 默认右侧占位（胶囊宽度+边距）
+                // 只有当获取到的胶囊矩形数据合理（非零且在状态栏下方）时，才采用高精度计算
+                if (rect && rect.top && rect.height && rect.left && rect.top >= statusBarHeight) {
+                    navBarHeight = (rect.top - statusBarHeight) * 2 + rect.height;
+                    innerPaddingRight = sysInfo.windowWidth - rect.left;
+                }
+                else {
+                    // 不合理时进行平台默认回退
+                    const system = sysInfo.system ? sysInfo.system.toLowerCase() : '';
+                    const isIOS = system.indexOf('ios') > -1 || system.indexOf('macos') > -1;
+                    navBarHeight = isIOS ? 44 : 48;
+                    innerPaddingRight = isIOS ? 97 : 97; // 保持合理的胶囊默认间距
+                }
+                const leftWidth = `width: ${innerPaddingRight}px`;
+                this.setData({
+                    statusBarHeight,
+                    navBarHeight,
+                    innerPaddingRight,
+                    leftWidth
+                });
+            }
+            catch (err) {
+                console.error('Failed to calculate navigation bar dimensions:', err);
+            }
+        }
+    },
+    methods: {
+        onBack() {
+            if (this.data.delta) {
+                wx.navigateBack({ delta: this.data.delta });
+            }
+            this.triggerEvent('back', { delta: this.data.delta });
+        },
+        onHome() {
+            wx.reLaunch({ url: '/pages/index/index' });
+            this.triggerEvent('home');
+        }
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/miniprogram_dist/nav-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/nav-bar/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["Component({\r\n  options: {\r\n    virtualHost: true,\r\n    multipleSlots: true\r\n  },\r\n  properties: {\r\n    // 标题文本\r\n    title: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 导航栏背景色，支持色值和渐变\r\n    background: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 全局文字颜色（标题和图标的默认色）\r\n    color: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 是否显示返回图标\r\n    back: {\r\n      type: Boolean,\r\n      value: true\r\n    },\r\n    // 是否显示加载指示器\r\n    loading: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 是否显示首页图标\r\n    homeButton: {\r\n      type: Boolean,\r\n      value: false\r\n    },\r\n    // 是否固定在顶部\r\n    fixed: {\r\n      type: Boolean,\r\n      value: true\r\n    },\r\n    // 返回时的页面层数\r\n    delta: {\r\n      type: Number,\r\n      value: 1\r\n    },\r\n    // 标题对齐方式：left（靠左）| center（居中）\r\n    align: {\r\n      type: String,\r\n      value: 'left'\r\n    },\r\n    // 标题颜色，覆盖全局 color\r\n    titleColor: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 标题字号，如 32rpx、16px\r\n    titleSize: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 标题是否加粗，默认 true\r\n    titleBold: {\r\n      type: Boolean,\r\n      value: true\r\n    },\r\n    // 返回图标颜色，覆盖全局 color\r\n    iconColor: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 返回图标尺寸，如 36rpx、18px\r\n    iconSize: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 返回图标描边粗细，如 2.5、3rpx\r\n    iconWeight: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 返回图标与标题之间的间距，如 12rpx、8px\r\n    titleSpacing: {\r\n      type: String,\r\n      value: ''\r\n    },\r\n    // 预览模式：去除状态栏高度和右侧内边距，适合卡片展示\r\n    preview: {\r\n      type: Boolean,\r\n      value: false\r\n    }\r\n  },\r\n  data: {\r\n    statusBarHeight: 44,\r\n    navBarHeight: 44,\r\n    innerPaddingRight: 97,\r\n    leftWidth: 'width: 97px'\r\n  },\r\n  lifetimes: {\r\n    attached() {\r\n      try {\r\n        if (this.data.preview) {\r\n          this.setData({\r\n            statusBarHeight: 0,\r\n            navBarHeight: 44,\r\n            innerPaddingRight: 0,\r\n            leftWidth: 'width: 0px'\r\n          });\r\n          return;\r\n        }\r\n\r\n        const sysInfo = wx.getSystemInfoSync();\r\n        let rect = null;\r\n        try {\r\n          rect = wx.getMenuButtonBoundingClientRect();\r\n        } catch (e) {\r\n          console.warn('Failed to get menu button bounding rect:', e);\r\n        }\r\n\r\n        const statusBarHeight = sysInfo.statusBarHeight || 20;\r\n        let navBarHeight = 44; // 默认高度\r\n        let innerPaddingRight = 97; // 默认右侧占位（胶囊宽度+边距）\r\n        \r\n        // 只有当获取到的胶囊矩形数据合理（非零且在状态栏下方）时，才采用高精度计算\r\n        if (rect && rect.top && rect.height && rect.left && rect.top >= statusBarHeight) {\r\n          navBarHeight = (rect.top - statusBarHeight) * 2 + rect.height;\r\n          innerPaddingRight = sysInfo.windowWidth - rect.left;\r\n        } else {\r\n          // 不合理时进行平台默认回退\r\n          const system = sysInfo.system ? sysInfo.system.toLowerCase() : '';\r\n          const isIOS = system.indexOf('ios') > -1 || system.indexOf('macos') > -1;\r\n          navBarHeight = isIOS ? 44 : 48;\r\n          innerPaddingRight = isIOS ? 97 : 97; // 保持合理的胶囊默认间距\r\n        }\r\n\r\n        const leftWidth = `width: ${innerPaddingRight}px`;\r\n\r\n        this.setData({\r\n          statusBarHeight,\r\n          navBarHeight,\r\n          innerPaddingRight,\r\n          leftWidth\r\n        });\r\n      } catch (err) {\r\n        console.error('Failed to calculate navigation bar dimensions:', err);\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    onBack() {\r\n      if (this.data.delta) {\r\n        wx.navigateBack({ delta: this.data.delta });\r\n      }\r\n      this.triggerEvent('back', { delta: this.data.delta });\r\n    },\r\n    onHome() {\r\n      wx.reLaunch({ url: '/pages/index/index' });\r\n      this.triggerEvent('home');\r\n    }\r\n  }\r\n});\r\n"]}

package/miniprogram_dist/nav-bar/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "renderer": "skyline",
+  "componentFramework": "glass-easel",
+  "multipleSlots": true,
+  "usingComponents": {
+    "sky-icon": "../icon/index"
+  }
+}

package/miniprogram_dist/nav-bar/index.wxml

@@ -0,0 +1,46 @@
+<view
+  class="sky-nav-bar {{ fixed ? 'sky-nav-bar--fixed' : '' }}"
+  style="background: {{ background || '#ffffff' }}; color: {{ color || '#1a1e29' }}; --nav-bar-title-color: {{ titleColor || color || '#1a1e29' }}; --nav-bar-title-size: {{ titleSize || '32rpx' }}; --nav-bar-title-spacing: {{ titleSpacing || '12rpx' }}; --nav-bar-right-width: {{ innerPaddingRight }}px;"
+>
+  <!-- 状态栏占位区，独立撑高 -->
+  <view class="sky-nav-bar__status-bar" style="height:{{ statusBarHeight }}px;"></view>
+
+  <!-- 内容区，高度 = 导航栏内容高度 -->
+  <view class="sky-nav-bar__content-row sky-nav-bar__content--{{ align }}" style="height:{{ navBarHeight }}px;">
+
+      <!-- 左侧操作区 -->
+      <view class="sky-nav-bar__left-box">
+        <block wx:if="{{ back || homeButton }}">
+          <view wx:if="{{ back }}" class="sky-nav-bar__btn-wrapper" hover-class="sky-nav-bar__btn-active" hover-stay-time="70" bindtap="onBack">
+            <sky-icon name="arrow_left" size="{{ iconSize || '36rpx' }}" color="{{ iconColor || 'currentColor' }}" />
+          </view>
+          <view wx:if="{{ homeButton }}" class="sky-nav-bar__btn-wrapper" hover-class="sky-nav-bar__btn-active" hover-stay-time="70" bindtap="onHome">
+            <sky-icon name="31shouyexuanzhong" size="{{ iconSize || '36rpx' }}" color="{{ iconColor || 'currentColor' }}" />
+          </view>
+        </block>
+        <block wx:else>
+          <slot name="left"></slot>
+        </block>
+      </view>
+
+      <!-- 标题区 -->
+      <view class="sky-nav-bar__title-box">
+        <view class="sky-nav-bar__title-content">
+          <view wx:if="{{ loading }}" class="sky-nav-bar__loading-spinner"></view>
+          <text wx:if="{{ title }}" class="sky-nav-bar__title-text {{ titleBold ? 'sky-nav-bar__title-text--bold' : '' }}">{{ title }}</text>
+          <block wx:else>
+            <slot name="center"></slot>
+          </block>
+        </view>
+      </view>
+
+      <!-- 右侧扩展区 -->
+      <view class="sky-nav-bar__right-box">
+        <slot name="right"></slot>
+      </view>
+
+  </view>
+</view>
+
+<!-- fixed 模式占位器 -->
+<view wx:if="{{ fixed }}" class="sky-nav-bar__placeholder" style="height:{{ statusBarHeight + navBarHeight }}px;"></view>