打卡页: 「点环即打卡」提示换成新建按钮, 去掉底部歪掉的按钮

问题:
- 当日栏右侧的「点环即打卡」是纯文字提示, 看着像可点但实际无交互, 容易误导
- 分组列表底部另有一个「+ 新建打卡项」按钮, 带内联 margin,
  与卡片左右边距不一致, 视觉上是歪的

改动:
- 当日栏右侧改为「+ 新建」按钮 (antd-mobile Button, mini) 右对齐,
  复用原有 openCreate, 一个入口完成新建
- 删除底部「+ 新建打卡项」按钮及其 .mv-add-wrap 样式
- .mv-daybar 移除废弃的 .sum 样式, 新增 .mv-new-btn (margin-left:auto 右对齐)

空态「创建第一个打卡项」保留 (无任何打卡项时的引导)。
This commit is contained in:
jif2.zhang
2026-10-24 08:40:09 +08:00
parent 330e6585d9
commit 7e229ecc84
2 changed files with 11 additions and 12 deletions
+9 -10
View File
@@ -257,13 +257,20 @@ export default function MergedView({ date, onDateChange }) {
{err && <div className="error-banner">{err}<span className="retry-link" onClick={() => { loadCal(false); loadDetail(false) }}>重试</span></div>} {err && <div className="error-banner">{err}<span className="retry-link" onClick={() => { loadCal(false); loadDetail(false) }}>重试</span></div>}
{/* 当日栏 */} {/* 当日栏: 右侧放「+ 新建」, 替代原来无实际作用的「点环即打卡」提示 */}
<div className="mv-daybar"> <div className="mv-daybar">
{dayLabel(date, detail?.today || today)} {dayLabel(date, detail?.today || today)}
{isFuture {isFuture
? <span className="badge">计划(不可打卡)</span> ? <span className="badge">计划(不可打卡)</span>
: <span className="badge">已完成 {summary.done} / {summary.total}</span>} : <span className="badge">已完成 {summary.done} / {summary.total}</span>}
<span className="sum">点环即打卡</span> <Button
className="mv-new-btn"
size="mini"
color="primary"
onClick={openCreate}
>
+ 新建
</Button>
</div> </div>
{detail === null && !err && <div className="monitor-loading"><DotLoading /> 加载中...</div>} {detail === null && !err && <div className="monitor-loading"><DotLoading /> 加载中...</div>}
@@ -318,14 +325,6 @@ export default function MergedView({ date, onDateChange }) {
))} ))}
</div> </div>
{detail !== null && (
<div className="mv-add-wrap">
<Button block fill="outline" size="small" onClick={openCreate} style={{ margin: '4px 12px 12px' }}>
+ 新建打卡项
</Button>
</div>
)}
{/* 「⋯」操作面板: 撤销 / 编辑 / 归档 */} {/* 「⋯」操作面板: 撤销 / 编辑 / 归档 */}
<Popup <Popup
visible={!!sheetItem} visible={!!sheetItem}
+2 -2
View File
@@ -847,7 +847,8 @@ body.me-safe-top .app-safe-top { height: 0; }
/* ---- 当日栏 ---- */ /* ---- 当日栏 ---- */
.mv-daybar { display: flex; align-items: center; gap: 8px; padding: 10px 14px 2px; font-size: 13px; font-weight: 600; } .mv-daybar { display: flex; align-items: center; gap: 8px; padding: 10px 14px 2px; font-size: 13px; font-weight: 600; }
.mv-daybar .badge { font-weight: 400; color: var(--color-muted); font-size: 11px; } .mv-daybar .badge { font-weight: 400; color: var(--color-muted); font-size: 11px; }
.mv-daybar .sum { margin-left: auto; font-size: 11px; color: var(--color-muted); font-weight: 400; } /* 「+ 新建」按钮右对齐 (原「点环即打卡」文字位置) */
.mv-daybar .mv-new-btn { margin-left: auto; flex-shrink: 0; font-size: 11px; }
/* ---- 分组 ---- */ /* ---- 分组 ---- */
.mv-groups { padding-bottom: 4px; } .mv-groups { padding-bottom: 4px; }
@@ -871,7 +872,6 @@ body.me-safe-top .app-safe-top { height: 0; }
} }
.mv-btn.grey { background: #f2f3f5; color: var(--color-muted); } .mv-btn.grey { background: #f2f3f5; color: var(--color-muted); }
.mv-more { color: #c0c4cc; font-size: 15px; line-height: 1; padding: 4px 2px 4px 6px; flex-shrink: 0; cursor: pointer; } .mv-more { color: #c0c4cc; font-size: 15px; line-height: 1; padding: 4px 2px 4px 6px; flex-shrink: 0; cursor: pointer; }
.mv-add-wrap { margin-top: 2px; }
/* ---- 「⋯」操作面板 ---- */ /* ---- 「⋯」操作面板 ---- */
.mv-sheet { padding: 16px 16px 4px; } .mv-sheet { padding: 16px 16px 4px; }