v24 第 12 批：5 条（删除按钮位置/日期控件三修/日历跳转/节气节日/财务图）
用户 2026-10-05 的 5 条。第 11 批交付后用户追问"确定这些需求都做完了？"—— 没有， 这 5 条是进一步要求。实现过程中查出 4 个真 bug。 #1 详情页删除按钮紧贴「开通账号」 上一版放在页面最下方独立区块（danger-zone），用户要「就放在开通账号按钮下面， 紧挨着，长度大小和开通账号一样，颜色改成红色」。→ 搬进「登录账号」卡片内 （.del-inline + 细分隔线 + .btn-block-lg）。 线上几何实测：同一张卡片、左边缘对齐 255==255、宽度一致 990==990、红色 rgb(192,83,63)。 #2 日期控件三修（两个真 bug + 一次闪烁） · 灰底：Semi **外层** .semi-datepicker-input 自带 rgba(46,50,56,.05)、高 32px； 内层 wrapper 白底 40px → 灰的露在外面。实测「灰底元素」= 1 个 → 修后 0 个。 · 不垂直居中：外层 32px < 内层 40px，实测 gapTop=1 / **gapBottom=17**（文字贴顶） → 修后 gapTop=1 / gapBottom=1。 · 闪烁：实测首 **200ms** 原生输入框可见（要等 3.4MB React 解析）。 用 no-js/js 二态：<html class="no-js"> + head 内联脚本立刻换 js + CSS `html.js .dt-input:not(.is-semi) .dt-native { visibility:hidden }` （配同高骨架 ::after 防布局跳动）。实测「出现过原生可见」= False。 #3 日历跳转保留视图 + 下拉日历 原来写死 view=day（在月视图点跳转会被踢进日视图）。→ 表单带当前 $view（月还带 ym）； 选择器从"居中弹窗"改成**按钮下方下拉** .cal-jump-drop。 实测：月视图跳 8/15 仍在月视图且是 8 月；周视图跳 8/15 → 落 8/10 那一周； 日视图跳 8/15 → 显示 8/15。 #4 传统节日 + 二十四节气两个系统本（Schema v18） Holiday::SOLAR_TERMS（24 项 C 常数近似公式 + 例外表）+ traditionalRange （农历推导；除夕用"次日是否正月初一"反推，写死腊月廿九会有一半年份错）。 实测 2026：节气 24 条全对（清明 4/5、冬至 12/22）；春节 2/17、除夕 2/16、中秋 9/25。 ⚠️ ENUM 必须显式 ALTER（对已存在的表不生效）——同一坑第二次踩，VERSION 17→18。 #5 财务（一个真 bug + 一个假起点 + 一个真 bug） · chart_line 读 `cents` 而 timeline() 返回 `net` → 键名不匹配，**总资产图每点读成 0** （正是用户说的"图上是 0"）。修：兼容 cents ?? net ?? asset。 实测 timeline net=800000（8000 元），线上 polyline 有真实起伏。 · 去掉 timeline 人为插的"前一天=0"假起点（用户："总资产不应该是 0， 应该是所有账目创建时的金额的总数"）。 · ppSetSelected 只用 document.querySelector 按名字找，而财务页有**两个** person_id 组件（「记一笔」+ 修改弹框）→ 永远灌到第一个。加 root 参数、调用方传 panel。 验证：e2e 786/0、交互 92/0、升级 129/0（+3 条 v18 断言）、batch_e 91/0、batch10 46/0、 batch9 38/0、picker_unify 28/0、picker_lazy 11/0、crop 17/0、formbloat 9/0、semi 27/0、 mobile 688/0、drag 5/0、geom 5/5；第 12 批专项：财务 7/0、日历 19/0。 部署静态断言新增 5 组（含反向验证：注入回退 → FAIL=1）。 线上自检 19/19；线上真实账号验收 **30/0**（含真实浏览器几何量删除按钮位置）。
This commit is contained in:
+105
-12
@@ -569,8 +569,29 @@ textarea.input { min-height: 76px; resize: vertical; }
|
||||
/* v24 第 9 批 #9：Semi DatePicker 升级态 —— .dt-native 是 display:contents（不干扰
|
||||
flex 布局），升级成功后由 app.js 内联 display:none 藏掉；.dt-semi 顶上同一格。 */
|
||||
.dt-input .dt-native { display: contents; }
|
||||
/* ---- v24 第 12 批 #2：消除「先闪原生框、再变 Semi」----
|
||||
html.js 由 <head> 里的内联脚本立刻加上（见 layout.php 的 no-js/js 二态）。
|
||||
有 JS 时：原生控件**从一开始就不显示**，等 Semi 就绪（app.js 加 .is-semi）再露出。
|
||||
没 JS 时（html 仍是 no-js）：什么都不藏，原生控件照旧可用 —— 渐进增强的兜底不变。
|
||||
⚠️ 用 visibility:hidden 而不是 display:none —— 保留元素占位高度，
|
||||
否则升级完成的那一瞬表单会"跳"一下（高度从 0 变 40px）。 */
|
||||
html.js .dt-input:not(.is-semi) .dt-native { visibility: hidden; }
|
||||
html.js .dt-range:not(.is-semi-range) > .dt-input { visibility: hidden; }
|
||||
/* Semi 未就绪前，先给一个同高的"占位骨架"，让表单高度在升级前后保持一致 */
|
||||
html.js .dt-input:not(.is-semi)::after {
|
||||
content: ''; display: block; flex: 1 1 150px; height: 40px;
|
||||
border: 1px solid var(--line); border-radius: var(--radius-s);
|
||||
background: var(--surface); opacity: .55;
|
||||
}
|
||||
html.js .dt-range:not(.is-semi-range)::before {
|
||||
content: ''; display: block; width: 100%; max-width: 460px; height: 40px;
|
||||
border: 1px solid var(--line); border-radius: var(--radius-s);
|
||||
background: var(--surface); opacity: .55;
|
||||
}
|
||||
html.js .dt-range.is-semi-range::before { display: none; }
|
||||
.dt-input .dt-semi { display: none; flex: 1 1 220px; min-width: 0; }
|
||||
.dt-input.is-semi .dt-semi { display: block; }
|
||||
.dt-input.is-semi::after { display: none; }
|
||||
/* 工作经历的月份选择器（type="month" 升级）：占满原 .job-cell 格子 */
|
||||
.dt-semi.dt-semi-month { display: none; }
|
||||
.dt-semi.dt-semi-month.is-live { display: block; width: 100%; }
|
||||
@@ -591,6 +612,35 @@ body[class] .dt-semi-range .semi-input-wrapper {
|
||||
}
|
||||
body[class] .dt-semi-range .semi-input-wrapper:hover { border-color: var(--brand-2); }
|
||||
body[class] .dt-semi-range .semi-input { font: inherit; font-size: 13.5px; color: var(--ink); }
|
||||
/* ---- v24 第 12 批 #2：范围控件的「灰底 + 不垂直居中」（实测定位）----
|
||||
用真浏览器量出来两个毛病：
|
||||
① 灰底：Semi 的 **外层** `.semi-datepicker-input` 自带 `rgba(46,50,56,.05)`
|
||||
灰底、高只有 32px；而内层 `.semi-input-wrapper` 是白底、40px ——
|
||||
两层套着，灰的那层露在外面（用户看到的"灰色背景色"）。
|
||||
② 不居中：外层 32px < 内层 40px，输入框上下都被挤出去
|
||||
（实测 gapTop=1 / gapBottom=17 → 文字贴顶）。
|
||||
修法：把**外层容器**改成透明 + 不限高 + 垂直居中，让内层 40px 的白底框
|
||||
自己撑起来（与站内 .input 完全一致）。 */
|
||||
body[class] .dt-semi-range .semi-datepicker-input {
|
||||
background: transparent !important;
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
body[class] .dt-semi-range .semi-datepicker-range-input-wrapper {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
}
|
||||
/* 两端的白底框就是"可见的输入框"：撑满高度、文字垂直居中 */
|
||||
body[class] .dt-semi-range .semi-input-wrapper {
|
||||
display: flex; align-items: center;
|
||||
}
|
||||
body[class] .dt-semi-range .semi-input-wrapper .semi-input {
|
||||
height: 100%; line-height: 40px; padding: 0 8px;
|
||||
background: transparent;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.dt-semi-range { max-width: none; }
|
||||
}
|
||||
@@ -608,10 +658,24 @@ body[class] .dt-semi .semi-input-wrapper {
|
||||
width: 100%; height: 40px;
|
||||
border: 1px solid var(--line); border-radius: var(--radius-s);
|
||||
background: var(--surface); color: var(--ink);
|
||||
/* v24 第 12 批 #2：单点控件也做同样处理 —— 外层半透明灰底去掉、文字垂直居中
|
||||
（用户说"这种情况同样出现在其他的日期选择功能中"）。 */
|
||||
display: flex; align-items: center;
|
||||
}
|
||||
body[class] .dt-semi .semi-input-wrapper:hover { border-color: var(--brand-2); background: var(--surface); }
|
||||
body[class] .dt-semi .semi-input { font: inherit; color: var(--ink); }
|
||||
body[class] .dt-semi .semi-input::placeholder { color: var(--muted); }
|
||||
body[class] .dt-semi .semi-datepicker-input,
|
||||
body[class] .dt-semi .semi-datepicker {
|
||||
background: transparent !important;
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body[class] .dt-semi .semi-input-wrapper .semi-input {
|
||||
height: 100%; line-height: 40px; padding: 0 11px; background: transparent;
|
||||
}
|
||||
/* 日历面板：白纸底色统一成卡片的纸色，选中/悬停色走上面的 brand 变量 */
|
||||
body[class] .semi-popover .semi-datepicker { background: var(--surface, #fff); }
|
||||
body[class] .semi-datepicker-day-selected { background-color: var(--brand, #A84A28); }
|
||||
@@ -1097,6 +1161,25 @@ body[class] .semi-datepicker-day-inhover { background-color: color-mix(in srgb,
|
||||
border: 1px solid #F0D6D1; border-radius: 8px; font-size: 13px; color: #7A2A20;
|
||||
}
|
||||
.del-big-confirm[hidden] { display: none; }
|
||||
|
||||
/* ---- v24 第 12 批 #1：删除按钮紧挨「开通账号」放在同一列 ----
|
||||
用户原话：「删除按钮，就放在开通账号按钮下面，紧挨着，长度大小，
|
||||
和开通账号一样，就是颜色改成红色。」
|
||||
所以这里只做两件事：① 与账号区的按钮**左对齐同宽**（都以账号卡片内容宽为准）；
|
||||
② 上方留一条细分隔线，让人一眼看出"这是同一个区块里的第二件事"。
|
||||
⚠️ 尺寸一致性靠 .btn-block-lg（100% 宽 + 同 padding），不在这里写死宽度，
|
||||
否则窄屏下会与「开通账号」对不齐。 */
|
||||
.del-inline {
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px dashed var(--line);
|
||||
}
|
||||
.del-inline-tip {
|
||||
margin: 0 0 10px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.7;
|
||||
color: var(--muted);
|
||||
}
|
||||
.person-move { display: flex; gap: 6px; padding: 8px 12px; flex-wrap: wrap; }
|
||||
.person-move .select { flex: 1 1 auto; min-width: 0; padding: 6px 8px; font-size: 13px; }
|
||||
.person-move .btn { flex: 0 0 auto; }
|
||||
@@ -2691,21 +2774,31 @@ body[class] .semi-datepicker-day-inhover { background-color: color-mix(in srgb,
|
||||
点开弹一个只含 Semi 日期选择器的轻浮层，选中即跳。 */
|
||||
.cal-jump { display: inline-flex; margin: 0; }
|
||||
.cal-jump-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.cal-jump-host { position: fixed; inset: 0; z-index: 80; display: flex;
|
||||
align-items: center; justify-content: center; }
|
||||
.cal-jump-pop {
|
||||
background: var(--surface); border: 1px solid var(--line);
|
||||
border-radius: 14px; box-shadow: var(--shadow-l); padding: 10px 12px 12px;
|
||||
/* ---- v24 第 12 批 #3：跳转日期改成**按钮下方的下拉日历** ----
|
||||
用户原话：「选择这个日期，不用弹窗，直接把日历选择，弹出在这个按钮下面就可以了。」
|
||||
所以把原来"全屏遮罩 + 居中弹窗"（.cal-jump-host/.cal-jump-pop）换成
|
||||
贴着按钮下方展开的下拉面板（.cal-jump-drop）。 */
|
||||
.cal-jump { position: relative; }
|
||||
.cal-jump-drop {
|
||||
position: absolute; z-index: 70;
|
||||
top: calc(100% + 8px); left: auto; right: 0; /* 贴右：与按钮同一列，不会跑出屏外 */
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow-l);
|
||||
padding: 8px;
|
||||
/* 下拉里放的是 Semi 的**内联**日历面板，去掉它自己的浮层阴影/描边避免双层框 */
|
||||
}
|
||||
.cal-jump-pop-head {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-size: 13.5px; font-weight: 600; margin-bottom: 8px;
|
||||
.cal-jump-drop[hidden] { display: none; }
|
||||
.cal-jump-drop .semi-datepicker,
|
||||
.cal-jump-drop .semi-popover {
|
||||
box-shadow: none !important;
|
||||
border: 0 !important;
|
||||
background: var(--surface) !important;
|
||||
}
|
||||
.cal-jump-x {
|
||||
margin-left: auto; border: 0; background: transparent; cursor: pointer;
|
||||
font-size: 14px; color: var(--muted); padding: 3px 6px; border-radius: 6px;
|
||||
.cal-jump-drop .semi-datepicker {
|
||||
display: block;
|
||||
}
|
||||
.cal-jump-x:hover { background: var(--line-2); color: var(--ink); }
|
||||
|
||||
/* ==================== 周 / 天：按小时铺的时间网格 ==================== */
|
||||
/* 结构：左边一条"小时刻度"沟槽（tg-gutter），右边 N 个日期列（tg-col）。
|
||||
|
||||
Reference in New Issue
Block a user