v24 第 5 轮：十条清单（天气填城市 / 输入即筛选 / 看板列＝看板 / 账本盘点折线图 / 纪念日分类）
用户 2026-10-03 的十条，逐条落点： 1. 天气改为**个人设置里填城市**（每人一份）：新增 app/Geo.php，内置 197 个 地级市坐标（离线、逐条核对，生成脚本 _tooling/_fb_geo_gen.py）。填坐标仍 作为内置表没有时的出口；老的家庭级坐标保留为兜底，升级当天天气不会凭空消失。 2. 所有"找个人"的地方**输入即筛选**：新增 assets/js/filter.js（纯前端显隐， 不发请求、回车不刷新）+ app/PersonQuery.php 把服务端判据收敛成一份 （名册 / 挑人 / 高级搜索共用，避免三处实现漂移）。 3. 名册列表：有昵称就不重复显示本名、行变矮、补齐手机/阴历阳历生日(带年份)/ 邮箱/工作单位；「清除」与「搜索」同款同尺寸。 4/5. 日程：撤掉左侧日历本栏改满宽，功能（显隐/颜色/导入/默认视图）全收进 右侧 ☰；**色块高度改为按起止时长**（旧实现一律 30 分钟，三小时的会跟 十五分钟的同高）；点日历空白处即建日程，开始时间＝点的那一格。 6/10. 资源：搜索提到最上；按"最近改动/最新新增"排序，默认只显示最新 10 条并 给「显示全部」出口。 7. 任务：看板的**列＝用户自定义的看板**（不再是写死的待办/进行中）， 拖动/左右键＝换看板（改 board_id，不动 status）。 8. 财务：概览在上账目在下、记一笔改右侧按钮、账本设置（共享/改名/新建/删除） 收进 ☰、默认账本名「xxx的账本」、"挂在谁名下"默认自己且用标准选人框； **新增盘点**（新增 ledger_entry_snapshots 只增不改的历史表，旧值不被清空） + 上面画金额变化折线图（app/chart.php 服务端画 SVG，零依赖）。 9. 纪念日：手动添加的与名册生日派生的**分两块**、手动的在上；右侧设置可增删 分类（家庭级，删分类不强改已用的历史）。 本轮另外修掉/加固的四类问题（都由新增的静态或运行时守卫兜住）： - index.php 少写 2 个 use 导入（Pinyin / UserSetting）→ 名册与个人设置 返回 200 但正文是 Fatal；顺带修了一处早已存在的 Attachment 未导入。 → 新增 _fb_import_check.py（1f 段）。 - 一次不精确替换弄丢了 app/Calendar.php 开头的 `<?php`，整份源码被当 HTML 吐给浏览器，而 `php -l` 报"无语法错误"（纯文本输出确实合法）。 → 新增 _fb_php_open_check.py（1e 段）。 - 模板片段 unset 了宿主模板的变量（账本片段 unset($canWrite)）→ 正文里一片 Undefined variable 而 HTTP 仍 200。同 _datetime.php 早年 $t 的坑。 → 新增 _fb_fragment_scope_check.py（1g 段）+ _fb_batch_e.py 的 26 页无告警巡检。 - 窄屏下页头动作区不换行 → 周视图横向溢出且按钮被挤成三种高度（用户提过三次 "按钮要同高"）→ .page-head .actions 加 flex-wrap。 验证战绩（全绿）： e2e 773/0 · 第 5 轮专项 91/0 · 结构升级 126/0 · 几何 428/0 · 移动端 684/0 · 交互 97/0 · 家谱 26/0 · 按钮 60/0；三轮反向验证各 3/3 抓到，还原后复绿。 线上：schema v14、指纹一致（9df6c9fccc6796db）、snapshots 表已建、197 城、 8 个关键文件 md5 与本地逐字节一致、app/ 403 无源码泄漏、错误日志无新增。
This commit is contained in:
+134
@@ -0,0 +1,134 @@
|
||||
<?php
|
||||
/**
|
||||
* 折线图（v24 用户 2026-10-03 第 8 条）—— **服务端画 SVG**，零依赖。
|
||||
*
|
||||
* 用户原话：「把这种变化，每个账目的金额变化，还有总金额的变化，在账本列表上面，
|
||||
* 画出一个图，折线图这样的，这样就能清晰的看到账户的金额变化。」
|
||||
*
|
||||
* 为什么不用 Chart.js / ECharts：
|
||||
* · 这个项目是**零依赖**的（没有 Composer，也没有前端构建）——
|
||||
* 为两张小图引一个几百 KB 的图表库、再配一个 CDN（线上未必连得上），
|
||||
* 代价和风险都不成比例；
|
||||
* · 折线图本来就是一个 polyline，SVG 手写十几行就够；
|
||||
* · 服务端画 = 没有 JS 也能看见（打印、禁用 JS 的场景都在）。
|
||||
*
|
||||
* 用法：
|
||||
* $ckSeries = [['date'=>'2025-01-01','cents'=>123456], …];
|
||||
* $ckLabel = '招商银行';
|
||||
* $ckKind = 'asset'; // 'asset' 红 / 'debt' 绿（**A 股口径：涨红跌绿**）
|
||||
* $ckWidth = 260;
|
||||
* echo chart_line($ckSeries, $ckLabel, $ckKind, $ckWidth);
|
||||
*
|
||||
* ⚠️ 颜色按**中式财务习惯**：金额变多 = 红，变少 = 绿（与 A 股一致）。
|
||||
* 这是项目里已经定下的口径（见 Ledger 的 led-asset/led-debt 配色），
|
||||
* 改成欧美口径（涨绿跌红）会让这个页面和账目表对不上。
|
||||
*/
|
||||
|
||||
/**
|
||||
* 把一串「日期 → 分值」画成一条折线。
|
||||
*
|
||||
* @param array $series ['date'=>'Y-m-d','cents'=>int] 列表，按时间正序；空数组返回 ''
|
||||
* @param string $label 图例上的名字
|
||||
* @param string $kind 'asset' | 'debt'（只影响配色）
|
||||
* @param int $width 画布宽（高度按 3:1 推）
|
||||
* @param bool $showVal 是否在两端标出金额
|
||||
* @return string SVG（可直接 echo）
|
||||
*/
|
||||
function chart_line(array $series, string $label, string $kind = 'asset', int $width = 260, bool $showVal = true): string
|
||||
{
|
||||
$pts = [];
|
||||
foreach ($series as $p) {
|
||||
$pts[] = ['d' => (string)($p['date'] ?? ''), 'v' => (int)($p['cents'] ?? 0)];
|
||||
}
|
||||
if (!$pts) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$w = max(120, $width);
|
||||
$h = (int)round($w / 3.2);
|
||||
// 内边距：左边留给"最高/最低"标签，下边留给日期，上边留给数值标
|
||||
$padL = 6; $padR = 6; $padT = 14; $padB = 16;
|
||||
$iw = $w - $padL - $padR;
|
||||
$ih = $h - $padT - $padB;
|
||||
|
||||
$vals = array_column($pts, 'v');
|
||||
$min = min($vals);
|
||||
$max = max($vals);
|
||||
// ⚠️ 只有一个点、或所有值相同 → max==min，除零。
|
||||
// 此时把线画在**中间**（比贴底好：贴底看起来像"跌到 0 了"）。
|
||||
$span = $max - $min;
|
||||
$flat = $span <= 0;
|
||||
if ($flat) {
|
||||
$span = 1;
|
||||
}
|
||||
|
||||
$n = count($pts);
|
||||
$xy = [];
|
||||
foreach ($pts as $i => $p) {
|
||||
$x = $n === 1 ? ($padL + $iw / 2) : ($padL + $iw * $i / ($n - 1));
|
||||
$ratio = $flat ? 0.5 : (($p['v'] - $min) / $span);
|
||||
$y = $padT + $ih * (1 - $ratio);
|
||||
$xy[] = [round($x, 2), round($y, 2)];
|
||||
}
|
||||
|
||||
$isDebt = $kind === 'debt';
|
||||
// 中式财务口径：资产涨=红、负债涨=绿（负债变多是"好"的方向相反，同样用绿表示"更多")
|
||||
$stroke = $isDebt ? '#1F7A4D' : '#B0342C';
|
||||
$fill = $isDebt ? 'rgba(31,122,77,.10)' : 'rgba(176,52,44,.10)';
|
||||
|
||||
$poly = [];
|
||||
foreach ($xy as $p) {
|
||||
$poly[] = $p[0] . ',' . $p[1];
|
||||
}
|
||||
$polyStr = implode(' ', $poly);
|
||||
|
||||
// 面积：从线走一遍再回到基线 —— 让"变化"比一条细线更醒目
|
||||
$areaStr = '';
|
||||
if ($n > 1) {
|
||||
$base = $padT + $ih;
|
||||
$areaStr = $padL . ',' . $base . ' ' . $polyStr . ' '
|
||||
. ($padL + $iw) . ',' . $base;
|
||||
}
|
||||
|
||||
$out = '<svg class="ck-svg" viewBox="0 0 ' . $w . ' ' . $h . '" width="100%" height="' . $h . '"'
|
||||
. ' role="img" aria-label="' . e($label) . ' 金额变化"'
|
||||
. ' xmlns="http://www.w3.org/2000/svg">';
|
||||
// 基线（0 或最低值那一条）—— 让图有个水平参照
|
||||
$out .= '<line x1="' . $padL . '" y1="' . ($padT + $ih) . '" x2="' . ($padL + $iw) . '" y2="' . ($padT + $ih)
|
||||
. '" stroke="currentColor" stroke-opacity=".18" stroke-width="1"/>';
|
||||
if ($areaStr !== '') {
|
||||
$out .= '<polygon points="' . $areaStr . '" fill="' . $fill . '" stroke="none"/>';
|
||||
}
|
||||
if ($n === 1) {
|
||||
$out .= '<circle cx="' . $xy[0][0] . '" cy="' . $xy[0][1] . '" r="3" fill="' . $stroke . '"/>';
|
||||
} else {
|
||||
$out .= '<polyline points="' . $polyStr . '" fill="none" stroke="' . $stroke . '"'
|
||||
. ' stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>';
|
||||
// 每个盘点点一个小圆点：有几处转折要看得出来
|
||||
foreach ($xy as $p) {
|
||||
$out .= '<circle cx="' . $p[0] . '" cy="' . $p[1] . '" r="2.4" fill="#fff" stroke="' . $stroke . '" stroke-width="1.6"/>';
|
||||
}
|
||||
}
|
||||
if ($showVal && $n > 0) {
|
||||
// 首尾各标一个数值：光看形状不知道"多少"
|
||||
$first = $pts[0];
|
||||
$last = $pts[$n - 1];
|
||||
$fy = max(9, $xy[0][1] - 6);
|
||||
$ly = max(9, $xy[$n - 1][1] - 6);
|
||||
$out .= '<text x="' . $padL . '" y="' . $fy . '" font-size="9" fill="currentColor" fill-opacity=".65">'
|
||||
. e(\App\Ledger::money($first['v'])) . '</text>';
|
||||
if ($n > 1) {
|
||||
$out .= '<text x="' . ($padL + $iw) . '" y="' . $ly . '" font-size="9" text-anchor="end"'
|
||||
. ' fill="' . $stroke . '">' . e(\App\Ledger::money($last['v'])) . '</text>';
|
||||
}
|
||||
}
|
||||
// 日期：首尾各一个（中间的点太密，标了反而糊）
|
||||
$out .= '<text x="' . $padL . '" y="' . ($h - 4) . '" font-size="9" fill="currentColor" fill-opacity=".55">'
|
||||
. e((string)$pts[0]['d']) . '</text>';
|
||||
if ($n > 1) {
|
||||
$out .= '<text x="' . ($padL + $iw) . '" y="' . ($h - 4) . '" font-size="9" text-anchor="end"'
|
||||
. ' fill="currentColor" fill-opacity=".55">' . e((string)$pts[$n - 1]['d']) . '</text>';
|
||||
}
|
||||
$out .= '</svg>';
|
||||
return $out;
|
||||
}
|
||||
Reference in New Issue
Block a user