首次提交：初始化项目代码

2026-07-31 14:42:05 +08:00
commit ecca407485
84 changed files with 24158 additions and 0 deletions
@@ -0,0 +1,156 @@
+// =============================================================
+// Apple HIG 按钮设计规范（全局统一）
+// 设计原则：清晰层级 / 统一圆角 / 充足点击热区(≥44pt) / 流畅按压反馈
+// 颜色通过全局 CSS 变量(--primaryColor 等) 驱动，跟随主题切换
+// 所有变量均带 fallback，未注入时也保证可用
+// =============================================================
+
+// ---------- 基础按钮 ----------
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-weight: 600;
+  letter-spacing: 0.3rpx;
+  border-radius: 14rpx;          // iOS 标准圆角
+  min-height: 88rpx;             // ≥44pt 点击热区
+  padding: 0 40rpx;
+  font-size: 30rpx;
+  line-height: 1.2;
+  color: var(--textPrimary, #3D3630);
+  background: var(--btn-secondary-bg, rgba(0, 0, 0, 0.06));
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 0.2s ease,
+              background-color 0.2s ease,
+              box-shadow 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  cursor: pointer;
+  white-space: nowrap;
+
+  // 兼容小程序 text 子节点
+  text {
+    line-height: 1.2;
+  }
+}
+
+// ---------- 主按钮：填充主题色（渐变） ----------
+.btn--primary {
+  background: var(--gradientSoft, linear-gradient(135deg, #C68E3F 0%, #D4AA60 100%));
+  color: #ffffff;
+  box-shadow: 0 8rpx 24rpx rgba(var(--primaryColorRGB, 198, 142, 63), 0.28);
+}
+.btn--primary:active {
+  transform: scale(0.97);
+  opacity: 0.92;
+  box-shadow: 0 4rpx 12rpx rgba(var(--primaryColorRGB, 198, 142, 63), 0.2);
+}
+
+// ---------- 强调按钮：纯色主题填充（无渐变，更克制） ----------
+.btn--solid {
+  background: var(--primaryColor, #C68E3F);
+  color: #ffffff;
+}
+.btn--solid:active {
+  transform: scale(0.97);
+  opacity: 0.9;
+}
+
+// ---------- 次要按钮：iOS 经典灰底 ----------
+.btn--secondary {
+  background: var(--btn-secondary-bg, rgba(0, 0, 0, 0.06));
+  color: var(--textPrimary, #3D3630);
+}
+.btn--secondary:active {
+  transform: scale(0.97);
+  opacity: 0.85;
+}
+
+// ---------- 描边/幽灵按钮：透明底 + 主题色 + 细边框 ----------
+.btn--ghost {
+  background: transparent;
+  color: var(--primaryColor, #C68E3F);
+  border: 2rpx solid var(--primaryColor, #C68E3F);
+}
+.btn--ghost:active {
+  transform: scale(0.97);
+  background: rgba(var(--primaryColorRGB, 198, 142, 63), 0.08);
+}
+
+// ---------- 纯文字按钮：无底无框 ----------
+.btn--plain {
+  background: transparent;
+  color: var(--primaryColor, #C68E3F);
+  min-height: 72rpx;
+  padding: 0 24rpx;
+}
+.btn--plain:active {
+  opacity: 0.6;
+}
+
+// ---------- 危险按钮 ----------
+.btn--danger {
+  background: var(--dangerColor, #C75B4A);
+  color: #ffffff;
+}
+.btn--danger:active {
+  transform: scale(0.97);
+  opacity: 0.9;
+}
+
+// ---------- 图标按钮（圆形） ----------
+.btn--icon {
+  width: 72rpx;
+  height: 72rpx;
+  min-height: 0;
+  padding: 0;
+  border-radius: 50%;
+  background: var(--btn-secondary-bg, rgba(0, 0, 0, 0.06));
+  color: var(--textPrimary, #3D3630);
+}
+.btn--icon:active {
+  transform: scale(0.92);
+  opacity: 0.85;
+}
+
+// ---------- 尺寸变体 ----------
+.btn--block {
+  display: flex;
+  width: 100%;
+}
+.btn--sm {
+  min-height: 64rpx;
+  padding: 0 28rpx;
+  font-size: 26rpx;
+  border-radius: 12rpx;
+}
+.btn--lg {
+  min-height: 96rpx;
+  font-size: 32rpx;
+  border-radius: 16rpx;
+}
+.btn--pill {
+  border-radius: 999rpx;
+}
+
+// ---------- 禁用态 ----------
+.btn[disabled],
+.btn.is-disabled,
+.btn.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+// ---------- 按钮组（Action Sheet 风格，iOS 等分排列） ----------
+.btn-group {
+  display: flex;
+  align-items: stretch;
+  gap: 24rpx;
+}
+.btn-group .btn {
+  flex: 1;
+}