Compare commits

...

2 Commits

Author SHA1 Message Date
yuming 3f30c9c017 修复 person-detail 按钮文字未居中
部署到群晖 / deploy (push) Successful in 40s
原因:微信 <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>
2026-06-02 12:54:27 +08:00
yuming fb036fd65f 设置页改造:「设置」→「数据」,做成数据中心
- tabBar 文字 ⚙️ 设置 → 💾 数据
- Header 收敛成 标题 + 一行统计 + 上次备份时间
- 删除「关于」「温馨提示」整块装饰内容
- 「数据管理」拆成「备份」+「危险操作」两组
- 导出成功后写入 lastBackupAt,进页面格式化展示
- 图标背景从冷色统一为纸感暖色
- 底部加版本号 v2.1.3 小字

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-06-02 12:54:20 +08:00
6 changed files with 100 additions and 190 deletions
+1 -1
View File
@@ -30,7 +30,7 @@
},
{
"pagePath": "pages/settings/settings",
"text": "⚙️ 设置"
"text": "💾 数据"
}
]
},
+5 -5
View File
@@ -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>
<button class="action-btn danger" bindtap="onDeletePerson">删除</button>
<view class="action-btn" bindtap="onEditPerson">编辑</view>
<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>
<button class="delete-btn" bindtap="onDeleteAnniversary" data-id="{{item.id}}">删除</button>
<view class="edit-btn" bindtap="onEditAnniversary" data-id="{{item.id}}">编辑</view>
<view class="delete-btn" bindtap="onDeleteAnniversary" data-id="{{item.id}}">删除</view>
</view>
</view>
</view>
+10 -3
View File
@@ -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;
+29 -33
View File
@@ -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: {
persons: 0,
anniversaries: 0
}
personsCount: 0,
anniversariesCount: 0,
lastBackupText: '从未备份',
version: 'v2.1.3'
},
onLoad() {
this.loadDataCount()
this.loadSummary()
},
onShow() {
this.loadDataCount()
this.loadSummary()
},
/**
* 加载数据统计
*/
loadDataCount() {
loadSummary() {
const persons = storage.getPersons()
const anniversaries = storage.getAnniversaries()
const lastBackupAt = wx.getStorageSync(LAST_BACKUP_KEY) || 0
this.setData({
dataCount: {
persons: persons.length,
anniversaries: anniversaries.length
}
personsCount: persons.length,
anniversariesCount: 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({
})
}
})
+23 -71
View File
@@ -5,37 +5,29 @@
<view class="header">
<view class="header-top">
<view class="header-left">
<text class="header-title">设置</text>
<text class="header-sub">数据管理与关于</text>
<text class="header-title">数据</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-desc">复制 JSON 到剪贴板</text>
<text class="row-title">导出到剪贴板</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-desc">剪贴板读取并导入</text>
<text class="row-title">从剪贴板恢复</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;">
<text class="row-icon">🗑</text>
<view class="row-icon-wrap danger-icon-wrap">
<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="section-label">关于</view>
<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">农历转换使用寿星万年历算法(19002100</text>
</view>
<view class="tips-item">
<text class="tips-dot">·</text>
<text class="tips-text">开启提醒需授权订阅消息</text>
</view>
<view class="footer">
<text class="footer-version">{{version}}</text>
</view>
<view class="bottom-pad"></view>
+32 -77
View File
@@ -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;
padding-top: 12rpx;
align-items: baseline;
gap: 12rpx;
padding-top: 20rpx;
border-top: 1rpx solid #E8E2D5;
padding-top: 24rpx;
margin-top: 4rpx;
}
.stat-item {
display: flex;
flex-direction: column;
gap: 4rpx;
.meta-label {
font-size: 22rpx;
color: #A9A096;
letter-spacing: 1rpx;
}
.stat-num {
font-size: 44rpx;
font-weight: 600;
color: #1F1D2B;
line-height: 1;
letter-spacing: -1rpx;
}
.stat-label {
.meta-value {
font-size: 24rpx;
color: #8A8278;
}
.stat-sep {
display: none;
color: #1F1D2B;
font-weight: 500;
}
/* ───── 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 ───── */
/* 删原 border-left 6rpx 紫色条(禁项),改全边线 + 浅暖底标识 */
.tips-card {
background: #FFF8EE;
border: 1rpx solid #EFD9B5;
border-radius: 14rpx;
margin: 12rpx 24rpx 0;
padding: 24rpx 28rpx 28rpx;
/* ───── Footer ───── */
.footer {
text-align: center;
padding: 48rpx 0 16rpx;
}
.tips-title {
display: flex;
align-items: center;
gap: 12rpx;
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;
.footer-version {
font-size: 22rpx;
color: #C8C2B4;
letter-spacing: 2rpx;
}
/* ───── Bottom padding ───── */