视觉重构：紫渐变 SaaS 风 → 纸感编辑风（A 方案）

旧版多处违反 impeccable 设计规范（gradient text、6rpx 粗色条 border-left、 glassmorphism、bounce 动画）且整体呈现典型「AI/SaaS 通用紫渐变」（#6366f1 系、 #667eea 系），用户反馈「AI 味儿太浓」。色板（OKLCH 概念，hex 落地）： - 背景：浅米黄 #FAF6ED - 主文字：深墨蓝 #1F1D2B - 暖灰副文字：#8A8278 - 强调（仅 today / FAB）：墨红 #C8412F 涉及改动： - app.wxss：删模板自带 .container padding 200rpx（首页/日历顶部空白真凶）+ 重写全局色板 - index.wxml/wxss：去紫渐变 Header + glassmorphism stats + border-left 大色条 + bounce - calendar.wxml/wxss/json：去紫渐变月份头 + today 大色块 + section-title 6rpx 紫条 - settings.wxss：同款紫 Header + tips-card 6rpx 紫条 → 全卡边线 + 浅暖底 - add-anniversary.wxss：chip-active 紫 / 取消提交按钮渐变 / importance 高饱和色 → 统一 - add-person.wxss：gradient text + 紫 dashed 头像占位 + 多重渐变 → 全套重写 - person-detail.wxss：微信绿 + 灰底默认色 → 方向 A 色板 - utils/constants.js：IMPORTANCE_COLORS 高/中/低 = 墨红/焦糖/苔绿（替代橙红/橘/鲜绿） Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-06-02 09:27:16 +08:00
parent 323c566597
commit 3f176924d0
12 changed files with 577 additions and 598 deletions
@@ -1,161 +1,159 @@
-/**add-person.wxss**/
+/* add-person.wxss
+ * 视觉方向：纸感编辑风（A 方案，与全局一致）
+ * 原版含 2 个 impeccable 绝对禁项：gradient text (background-clip: text) 和 dashed border 大色块
+ */
+
 .container {
  min-height: 100vh;
-  background: linear-gradient(180deg, rgba(102, 126, 234, 0.08) 0%, transparent 30%);
+  background: #FAF6ED;
  padding-bottom: 120rpx;
 }

 .form {
-  padding: 32rpx;
+  padding: 24rpx;
 }

 .form-item {
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
-  border-radius: 24rpx;
-  padding: 36rpx;
-  margin-bottom: 24rpx;
-  box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.12);
-  border: 2rpx solid rgba(255, 255, 255, 0.8);
+  background: #FFFFFF;
+  border: 1rpx solid #E8E2D5;
+  border-radius: 14rpx;
+  padding: 28rpx;
+  margin-bottom: 20rpx;
 }

 .label {
-  font-size: 28rpx;
-  font-weight: 600;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 24rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #1F1D2B;
+  margin-bottom: 18rpx;
  display: block;
 }

 .label.required::after {
  content: ' *';
-  color: #ff5722;
-  -webkit-text-fill-color: #ff5722;
+  color: #C8412F;
 }

-/* 头像上传 */
+/* ───── 头像上传 ───── */
 .avatar-upload {
  text-align: center;
 }

 .avatar {
-  width: 200rpx;
-  height: 200rpx;
+  width: 176rpx;
+  height: 176rpx;
  border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border: 6rpx solid rgba(255, 255, 255, 0.9);
-  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+  background: #EFE9DC;
+  border: 1rpx solid #E8E2D5;
 }

 .avatar-placeholder {
-  width: 200rpx;
-  height: 200rpx;
+  width: 176rpx;
+  height: 176rpx;
  margin: 0 auto;
  border-radius: 50%;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+  background: #FAF6ED;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
-  border: 4rpx dashed rgba(102, 126, 234, 0.4);
-  transition: all 0.3s ease;
+  border: 1rpx dashed #C8C2B4;
+  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .avatar-placeholder:active {
-  transform: scale(0.95);
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
+  background: #F2EEE5;
 }

 .avatar-placeholder .icon {
-  font-size: 64rpx;
+  font-size: 52rpx;
  display: block;
-  margin-bottom: 16rpx;
-  filter: grayscale(0.5);
+  margin-bottom: 12rpx;
+  opacity: 0.6;
 }

 .avatar-placeholder .text {
  font-size: 24rpx;
-  color: #667eea;
+  color: #8A8278;
  font-weight: 500;
 }

+/* ───── 输入 ───── */
 .input {
-  background-color: #f8f9fa;
-  border-radius: 12rpx;
-  padding: 24rpx;
+  background-color: #FAF6ED;
+  border: 1rpx solid #E8E2D5;
+  border-radius: 10rpx;
+  padding: 22rpx 24rpx;
  font-size: 28rpx;
-  border: 2rpx solid transparent;
-  transition: all 0.3s ease;
+  color: #1F1D2B;
+  transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .input:focus {
-  background-color: #fff;
-  border-color: #667eea;
+  background-color: #FFFFFF;
+  border-color: #1F1D2B;
 }

 .textarea {
-  background-color: #f8f9fa;
-  border-radius: 12rpx;
-  padding: 24rpx;
+  background-color: #FAF6ED;
+  border: 1rpx solid #E8E2D5;
+  border-radius: 10rpx;
+  padding: 22rpx 24rpx;
  font-size: 28rpx;
-  min-height: 160rpx;
-  border: 2rpx solid transparent;
-  transition: all 0.3s ease;
+  color: #1F1D2B;
+  min-height: 140rpx;
+  transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  box-sizing: border-box;
+  width: 100%;
 }

 .textarea:focus {
-  background-color: #fff;
-  border-color: #667eea;
+  background-color: #FFFFFF;
+  border-color: #1F1D2B;
 }

+/* ───── 按钮 ───── */
 .buttons {
  display: flex;
-  gap: 24rpx;
-  margin-top: 40rpx;
-  padding: 0 32rpx 32rpx;
+  gap: 20rpx;
+  margin-top: 32rpx;
+  padding: 0 24rpx 32rpx;
 }

 .btn {
  flex: 1;
-  height: 96rpx;
-  line-height: 96rpx;
-  border-radius: 48rpx;
-  font-size: 32rpx;
-  font-weight: 600;
+  height: 88rpx;
+  line-height: 88rpx;
+  border-radius: 12rpx;
+  font-size: 30rpx;
+  font-weight: 500;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .btn-cancel {
-  background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf0 100%);
-  color: #666;
-  border: 2rpx solid rgba(102, 126, 234, 0.2);
+  background: #FFFFFF;
+  color: #1F1D2B;
+  border: 1rpx solid #E8E2D5;
 }

 .btn-cancel:active {
-  transform: scale(0.98);
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+  background: #F2EEE5;
 }

 .btn-submit {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #fff;
-  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
+  background: #1F1D2B;
+  color: #FAF6ED;
 }

 .btn-submit:active {
-  transform: scale(0.98);
-  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+  opacity: 0.85;
 }

 .btn-cancel::after,
 .btn-submit::after {
  border: none;
 }
-