修复 person-detail 按钮文字未居中

原因：微信 <button> 自带 min-height 88rpx 和固有 line-height，
会顶歪自定义高度。改用 <view> + flex 居中。

- 5 个 button 改为 view（保留 class/bindtap/data-id）
- action-btn / edit-btn / delete-btn 改 flex 居中
- add-btn 加 inline-flex 居中

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app.json

@@ -30,7 +30,7 @@
       },
       {
         "pagePath": "pages/settings/settings",
-        "text": "⚙️ 设置"
+        "text": "💾 数据"
       }
     ]
   },

pages/person-detail/person-detail.wxml

@@ -12,8 +12,8 @@
     <text wx:if="{{person.remark}}" class="person-remark">{{person.remark}}</text>
 
     <view class="actions">
-      <button class="action-btn" bindtap="onEditPerson">编辑</button>
+      <view class="action-btn" bindtap="onEditPerson">编辑</view>
-      <button class="action-btn danger" bindtap="onDeletePerson">删除</button>
+      <view class="action-btn danger" bindtap="onDeletePerson">删除</view>
     </view>
   </view>
 
@@ -21,7 +21,7 @@
   <view class="section">
     <view class="section-header">
       <text class="section-title">纪念日列表 ({{anniversaries.length}})</text>
-      <button class="add-btn" bindtap="onAddAnniversary">+ 添加纪念日</button>
+      <view class="add-btn" bindtap="onAddAnniversary">+ 添加纪念日</view>
     </view>
 
     <view wx:if="{{anniversaries.length === 0}}" class="empty-state">
@@ -54,8 +54,8 @@
       <view wx:if="{{item.remark}}" class="anniversary-remark">{{item.remark}}</view>
 
       <view class="anniversary-actions">
-        <button class="edit-btn" bindtap="onEditAnniversary" data-id="{{item.id}}">编辑</button>
+        <view class="edit-btn" bindtap="onEditAnniversary" data-id="{{item.id}}">编辑</view>
-        <button class="delete-btn" bindtap="onDeleteAnniversary" data-id="{{item.id}}">删除</button>
+        <view class="delete-btn" bindtap="onDeleteAnniversary" data-id="{{item.id}}">删除</view>
       </view>
     </view>
   </view>

pages/person-detail/person-detail.wxss

@@ -68,7 +68,9 @@
 .action-btn {
   flex: 1;
   height: 72rpx;
-  line-height: 72rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: 12rpx;
   font-size: 26rpx;
   font-weight: 500;
@@ -122,8 +124,11 @@
   color: #FAF6ED;
   border-radius: 36rpx;
   font-size: 22rpx;
-  border: none;
   font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.4;
 }
 
 .add-btn::after {
@@ -258,7 +263,9 @@
 .delete-btn {
   flex: 1;
   height: 60rpx;
-  line-height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: 10rpx;
   font-size: 22rpx;
   border: 1rpx solid #E8E2D5;

pages/settings/settings.js

@@ -1,50 +1,56 @@
 // settings.js
 const storage = require('../../utils/storage')
 
+const LAST_BACKUP_KEY = 'lastBackupAt'
+
+function formatRelativeTime(ts) {
+  if (!ts) return '从未备份'
+  const diff = Date.now() - ts
+  if (diff < 60 * 1000) return '刚刚'
+  if (diff < 60 * 60 * 1000) return Math.floor(diff / 60000) + ' 分钟前'
+  if (diff < 24 * 60 * 60 * 1000) return Math.floor(diff / 3600000) + ' 小时前'
+  if (diff < 30 * 24 * 60 * 60 * 1000) return Math.floor(diff / 86400000) + ' 天前'
+  const d = new Date(ts)
+  return (d.getMonth() + 1) + '月' + d.getDate() + '日'
+}
+
 Page({
   data: {
-    dataCount: {
+    personsCount: 0,
-      persons: 0,
+    anniversariesCount: 0,
-      anniversaries: 0
+    lastBackupText: '从未备份',
-    }
+    version: 'v2.1.3'
   },
 
   onLoad() {
-    this.loadDataCount()
+    this.loadSummary()
   },
 
   onShow() {
-    this.loadDataCount()
+    this.loadSummary()
   },
 
-  /**
+  loadSummary() {
-   * 加载数据统计
-   */
-  loadDataCount() {
     const persons = storage.getPersons()
     const anniversaries = storage.getAnniversaries()
+    const lastBackupAt = wx.getStorageSync(LAST_BACKUP_KEY) || 0
 
     this.setData({
-      dataCount: {
+      personsCount: persons.length,
-        persons: persons.length,
+      anniversariesCount: anniversaries.length,
-        anniversaries: anniversaries.length
+      lastBackupText: formatRelativeTime(lastBackupAt)
-      }
     })
   },
 
-  /**
-   * 导出数据
-   */
   onExportData() {
     const data = storage.exportData()
-    
-    // 转换为JSON字符串
     const jsonStr = JSON.stringify(data, null, 2)
 
-    // 在小程序中，可以通过提示用户复制
     wx.setClipboardData({
       data: jsonStr,
       success: () => {
+        wx.setStorageSync(LAST_BACKUP_KEY, Date.now())
+        this.loadSummary()
         wx.showToast({
           title: '数据已复制到剪贴板',
           icon: 'success'
@@ -53,9 +59,6 @@ Page({
     })
   },
 
-  /**
-   * 导入数据
-   */
   onImportData() {
     wx.showModal({
       title: '导入数据',
@@ -64,7 +67,6 @@ Page({
       cancelText: '取消',
       success: (res) => {
         if (res.confirm) {
-          // 读取剪贴板
           wx.getClipboardData({
             success: (res) => {
               try {
@@ -87,25 +89,20 @@ Page({
     })
   },
 
-  /**
-   * 清空所有数据
-   */
   onClearData() {
     wx.showModal({
       title: '确认清空',
       content: '确定要清空所有数据吗？此操作不可恢复！',
       confirmText: '确认清空',
-      confirmColor: '#ff5722',
+      confirmColor: '#C8412F',
       success: (res) => {
         if (res.confirm) {
           const success = storage.clearAllData()
-          
           if (success) {
             wx.showToast({
               title: '已清空',
               icon: 'success'
             })
-            
             setTimeout(() => {
               wx.reLaunch({
                 url: '/pages/index/index'
@@ -117,4 +114,3 @@ Page({
     })
   }
 })
-

pages/settings/settings.wxml

@@ -5,37 +5,29 @@
   <view class="header">
     <view class="header-top">
       <view class="header-left">
-        <text class="header-title">设置</text>
+        <text class="header-title">数据</text>
-        <text class="header-sub">数据管理与关于</text>
+        <text class="header-sub">{{personsCount}} 位好友 · {{anniversariesCount}} 个纪念日</text>
       </view>
-      <view class="header-icon">⚙️</view>
+      <view class="header-icon">💾</view>
-    </view>
-    <!-- 数据统计 -->
-    <view class="stats-row">
-      <view class="stat-item">
-        <text class="stat-num">{{dataCount.persons}}</text>
-        <text class="stat-label">位好友</text>
-      </view>
-      <view class="stat-sep"></view>
-      <view class="stat-item">
-        <text class="stat-num">{{dataCount.anniversaries}}</text>
-        <text class="stat-label">个纪念日</text>
     </view>
+    <view class="header-meta">
+      <text class="meta-label">上次备份</text>
+      <text class="meta-value">{{lastBackupText}}</text>
     </view>
   </view>
 
   <scroll-view class="body" scroll-y>
 
-    <!-- 数据管理 -->
+    <!-- 备份 -->
-    <view class="section-label">数据管理</view>
+    <view class="section-label">备份</view>
     <view class="card-group">
       <view class="row" bindtap="onExportData">
-        <view class="row-icon-wrap" style="background:#fff7ed;">
+        <view class="row-icon-wrap">
           <text class="row-icon">📤</text>
         </view>
         <view class="row-body">
-          <text class="row-title">导出数据</text>
+          <text class="row-title">导出到剪贴板</text>
-          <text class="row-desc">复制 JSON 到剪贴板</text>
+          <text class="row-desc">复制 JSON，粘贴到备忘录或邮件保存</text>
         </view>
         <text class="row-arrow">›</text>
       </view>
@@ -43,74 +35,34 @@
       <view class="row-divider"></view>
 
       <view class="row" bindtap="onImportData">
-        <view class="row-icon-wrap" style="background:#eff6ff;">
+        <view class="row-icon-wrap">
           <text class="row-icon">📥</text>
         </view>
         <view class="row-body">
-          <text class="row-title">导入数据</text>
+          <text class="row-title">从剪贴板恢复</text>
-          <text class="row-desc">从剪贴板读取并导入</text>
+          <text class="row-desc">读取剪贴板内容并覆盖本地数据</text>
         </view>
         <text class="row-arrow">›</text>
       </view>
+    </view>
 
-      <view class="row-divider"></view>
+    <!-- 危险操作 -->
-
+    <view class="section-label danger-label">危险操作</view>
+    <view class="card-group">
       <view class="row" bindtap="onClearData">
-        <view class="row-icon-wrap" style="background:#fff1f2;">
+        <view class="row-icon-wrap danger-icon-wrap">
-          <text class="row-icon">🗑️</text>
+          <text class="row-icon">🗑</text>
         </view>
         <view class="row-body">
           <text class="row-title danger">清空所有数据</text>
-          <text class="row-desc danger">此操作不可恢复，请谨慎</text>
+          <text class="row-desc danger">此操作不可恢复，请先导出备份</text>
         </view>
         <text class="row-arrow danger">›</text>
       </view>
     </view>
 
-    <!-- 关于 -->
+    <view class="footer">
-    <view class="section-label">关于</view>
+      <text class="footer-version">{{version}}</text>
-    <view class="card-group">
-      <view class="row">
-        <view class="row-icon-wrap" style="background:#f0fdf4;">
-          <text class="row-icon">📱</text>
-        </view>
-        <view class="row-body">
-          <text class="row-title">版本号</text>
-        </view>
-        <text class="row-value">v1.0.0</text>
-      </view>
-
-      <view class="row-divider"></view>
-
-      <view class="row">
-        <view class="row-icon-wrap" style="background:#faf5ff;">
-          <text class="row-icon">👨‍💻</text>
-        </view>
-        <view class="row-body">
-          <text class="row-title">开发作者</text>
-        </view>
-        <text class="row-value">生日提醒团队</text>
-      </view>
-    </view>
-
-    <!-- 提示 -->
-    <view class="tips-card">
-      <view class="tips-title">
-        <text class="tips-icon">💡</text>
-        <text class="tips-heading">温馨提示</text>
-      </view>
-      <view class="tips-item">
-        <text class="tips-dot">·</text>
-        <text class="tips-text">建议定期导出数据备份</text>
-      </view>
-      <view class="tips-item">
-        <text class="tips-dot">·</text>
-        <text class="tips-text">农历转换使用寿星万年历算法（1900–2100）</text>
-      </view>
-      <view class="tips-item">
-        <text class="tips-dot">·</text>
-        <text class="tips-text">开启提醒需授权订阅消息</text>
-      </view>
     </view>
 
     <view class="bottom-pad"></view>

pages/settings/settings.wxss

@@ -1,5 +1,6 @@
 /* settings.wxss
- * 视觉方向：纸感编辑风（A 方案，与首页/日历一致）
+ * 视觉方向：纸感编辑风（A 方案，与全局一致）
+ * 定位：数据中心（备份 + 危险操作 + 版本号）
  */
 
 page {
@@ -23,7 +24,7 @@ page {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: 28rpx;
+  margin-bottom: 20rpx;
 }
 
 .header-left {
@@ -50,36 +51,24 @@ page {
   opacity: 0.85;
 }
 
-.stats-row {
+.header-meta {
   display: flex;
-  gap: 64rpx;
+  align-items: baseline;
-  padding-top: 12rpx;
+  gap: 12rpx;
+  padding-top: 20rpx;
   border-top: 1rpx solid #E8E2D5;
-  padding-top: 24rpx;
-  margin-top: 4rpx;
 }
 
-.stat-item {
+.meta-label {
-  display: flex;
+  font-size: 22rpx;
-  flex-direction: column;
+  color: #A9A096;
-  gap: 4rpx;
+  letter-spacing: 1rpx;
 }
 
-.stat-num {
+.meta-value {
-  font-size: 44rpx;
-  font-weight: 600;
-  color: #1F1D2B;
-  line-height: 1;
-  letter-spacing: -1rpx;
-}
-
-.stat-label {
   font-size: 24rpx;
-  color: #8A8278;
+  color: #1F1D2B;
-}
+  font-weight: 500;
-
-.stat-sep {
-  display: none;
 }
 
 /* ───── Body ───── */
@@ -98,6 +87,10 @@ page {
   text-transform: uppercase;
 }
 
+.section-label.danger-label {
+  color: #C8412F;
+}
+
 /* ───── Card group ───── */
 .card-group {
   background: #FFFFFF;
@@ -123,6 +116,7 @@ page {
   width: 64rpx;
   height: 64rpx;
   border-radius: 14rpx;
+  background: #F2EEE5;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -130,6 +124,10 @@ page {
   margin-right: 20rpx;
 }
 
+.row-icon-wrap.danger-icon-wrap {
+  background: #FFF1EA;
+}
+
 .row-icon {
   font-size: 32rpx;
 }
@@ -139,6 +137,7 @@ page {
   display: flex;
   flex-direction: column;
   gap: 4rpx;
+  min-width: 0;
 }
 
 .row-title {
@@ -170,66 +169,22 @@ page {
   color: #E29F92;
 }
 
-.row-value {
-  font-size: 26rpx;
-  color: #8A8278;
-}
-
 .row-divider {
   height: 1rpx;
   background: #E8E2D5;
   margin-left: 112rpx;
 }
 
-/* ───── Tips card ───── */
+/* ───── Footer ───── */
-/* 删原 border-left 6rpx 紫色条（禁项），改全边线 + 浅暖底标识 */
+.footer {
-.tips-card {
+  text-align: center;
-  background: #FFF8EE;
+  padding: 48rpx 0 16rpx;
-  border: 1rpx solid #EFD9B5;
-  border-radius: 14rpx;
-  margin: 12rpx 24rpx 0;
-  padding: 24rpx 28rpx 28rpx;
 }
 
-.tips-title {
+.footer-version {
-  display: flex;
+  font-size: 22rpx;
-  align-items: center;
+  color: #C8C2B4;
-  gap: 12rpx;
+  letter-spacing: 2rpx;
-  margin-bottom: 16rpx;
-}
-
-.tips-icon {
-  font-size: 30rpx;
-}
-
-.tips-heading {
-  font-size: 26rpx;
-  font-weight: 600;
-  color: #1F1D2B;
-}
-
-.tips-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 12rpx;
-  margin-bottom: 10rpx;
-}
-
-.tips-item:last-child {
-  margin-bottom: 0;
-}
-
-.tips-dot {
-  font-size: 26rpx;
-  color: #B36A1F;
-  line-height: 1.8;
-  flex-shrink: 0;
-}
-
-.tips-text {
-  font-size: 24rpx;
-  color: #5A5247;
-  line-height: 1.7;
 }
 
 /* ───── Bottom padding ───── */