laoyang/TripLog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

节点详情：照片灯箱浏览、参与人点击编辑、花销只记总计

Browse Source 
1) 照片与附件不再新开窗口看
   之前点缩略图直接 target=_blank 打开原始文件，看完还得切回来。
   现在统一走当前页灯箱（templates/_lightbox.php，详情页照片墙与
   照片管理页共用）：左右箭头 / 键盘 ←→ / 手机滑动切上一张下一张，
   Esc 或点背景关闭，带「第几张 / 共几张」计数并预加载相邻两张。
   非图片附件（PDF 等）仍保留直接打开与下载。

2) 参与人可以直接改了
   之前加完只能移出重加。现在每个参与人旁有「编辑」，点开预填弹窗
   （角色标签 / 心情 / 签到时间），保存仍走 members/store ——
   Members::save() 本来就是 upsert（同节点同人一条），服务端零改动。
   失败回填按 user_id 精确匹配，只回填刚才没保存成的那个人。

3) 花销去掉预算，只记真实花费
   明细上移，底部一行「总计（N 笔）¥X」。表单不再有「预算」选项，
   查询一律 is_budget=0（历史预算行不再出现在列表与合计里）；
   活动页统计同步改成「共 N 笔 · 总计」。列保留在库里不删数据。

已验证：本地全链 11 步全绿（php -l / 渲染 286 项 / SQL / PDO / CSS /
Mime / amap / 内联 JS×11 / 布局几何 / 表单交互 73 项）；远端 e2e
296 项 0 失败（含灯箱、编辑弹窗、历史预算行排除的专项断言）；
部署后双 PHP 渲染逐字节一致、60 文件哈希一致，线上 style.css 含新规则。
This commit is contained in:
laoyang
2026-09-23 14:59:02 +08:00
parent 86e0481a19
commit 48237c8947
8 changed files with 386 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/_lightbox.php
+125
View File
@@ -0,0 +1,125 @@
<?php
/**
* 照片灯箱（Lightbox）：点页面里带 class="js-photo" 的链接，就在当前页弹窗里看大图，
* 左右箭头（或键盘 ←/→、触摸滑动）切上一张/下一张，不再新开窗口。
*
* 用法：
* 1. 图片链接写成 <a class="js-photo" href="<大图地址>" data-cap="<说明文字>">…</a>
* （没有 data-cap 时回落到 title / alt / href）
* 2. 在页面末尾 require 本模板（一份就够，多页共用同一份标记与脚本）
*
* 依赖外部变量：无。
*/
?>
<div class="lightbox" id="lightbox" aria-hidden="true" role="dialog" aria-label="图片浏览">
<div class="lightbox-backdrop" data-lb-close="1"></div>
<button type="button" class="lightbox-nav lightbox-prev" data-lb-prev="1" aria-label="上一张">&#8249;</button>
<figure class="lightbox-body">
<img class="lightbox-img" id="lightbox-img" alt="">
<figcaption class="lightbox-cap" id="lightbox-cap"></figcaption>
</figure>
<button type="button" class="lightbox-nav lightbox-next" data-lb-next="1" aria-label="下一张">&#8250;</button>
<button type="button" class="lightbox-close" data-lb-close="1" aria-label="关闭">×</button>
<div class="lightbox-count" id="lightbox-count"></div>
</div>
<script>
(function () {
'use strict';
var box = document.getElementById('lightbox');
if (!box) return;
var img = document.getElementById('lightbox-img');
var cap = document.getElementById('lightbox-cap');
var count = document.getElementById('lightbox-count');
var items = []; // 打开时现收集页面上所有 js-photo（DOM 顺序）
var idx = 0;
function collect() {
return Array.prototype.slice.call(document.querySelectorAll('a.js-photo'));
}
function captionOf(a) {
return a.getAttribute('data-cap') || a.getAttribute('title')
|| (a.querySelector('img') ? a.querySelector('img').alt : '') || '';
}
function show(i) {
if (!items.length) return;
idx = (i + items.length) % items.length; // 循环切换
var a = items[idx];
var full = a.getAttribute('data-full') || a.getAttribute('href');
img.alt = captionOf(a);
cap.textContent = captionOf(a);
count.textContent = items.length > 1 ? (idx + 1) + ' / ' + items.length : '';
img.src = full;
// 预加载相邻两张，切换不等待
[idx - 1, idx + 1].forEach(function (j) {
var na = items[(j + items.length) % items.length];
if (!na) return;
var pre = new Image();
pre.src = na.getAttribute('data-full') || na.getAttribute('href');
});
}
function openAt(anchor) {
items = collect();
var at = items.indexOf(anchor);
if (at < 0) { items = [anchor]; at = 0; }
box.classList.add('open');
box.setAttribute('aria-hidden', 'false');
document.body.style.overflow = 'hidden';
show(at);
}
function close() {
box.classList.remove('open');
box.setAttribute('aria-hidden', 'true');
document.body.style.overflow = '';
img.src = '';
}
document.addEventListener('click', function (ev) {
var link = ev.target.closest ? ev.target.closest('a.js-photo') : null;
if (link) {
ev.preventDefault();
openAt(link);
return;
}
if (!box.classList.contains('open')) return;
if (ev.target.closest('[data-lb-prev]')) { show(idx - 1); return; }
if (ev.target.closest('[data-lb-next]')) { show(idx + 1); return; }
if (ev.target.closest('[data-lb-close]')) { close(); }
});
document.addEventListener('keydown', function (ev) {
if (!box.classList.contains('open')) return;
if (ev.key === 'Escape') close();
else if (ev.key === 'ArrowLeft') show(idx - 1);
else if (ev.key === 'ArrowRight') show(idx + 1);
});
// 触摸滑动切图（手机上不用去够箭头）
var touchX = null, touchY = null;
box.addEventListener('touchstart', function (ev) {
if (ev.touches.length === 1) {
touchX = ev.touches[0].clientX;
touchY = ev.touches[0].clientY;
}
}, { passive: true });
box.addEventListener('touchend', function (ev) {
if (touchX === null || !ev.changedTouches.length) return;
var dx = ev.changedTouches[0].clientX - touchX;
var dy = ev.changedTouches[0].clientY - touchY;
if (Math.abs(dx) > 48 && Math.abs(dx) > Math.abs(dy) * 1.5) {
show(dx < 0 ? idx + 1 : idx - 1);
}
touchX = touchY = null;
}, { passive: true });
})();
</script>
templates/activities/show.php
+2 -7
View File
@@ -22,16 +22,11 @@
</div>
<?php endif; ?>
<?php $expenseSummary = $expenseSummary ?? ['budget' => 0.0, 'actual' => 0.0, 'count' => 0, 'diff' => 0.0]; ?>
<?php $expenseSummary = $expenseSummary ?? ['total' => 0.0, 'count' => 0]; ?>
<?php if ((int)$expenseSummary['count'] > 0): ?>
<div class="activity-stats">
<span class="activity-stat">💰 共 <?= (int)$expenseSummary['count'] ?> 笔</span>
<span class="activity-stat">预算 ¥<?= number_format((float)$expenseSummary['budget'], 2) ?></span>
<span class="activity-stat">实际 ¥<?= number_format((float)$expenseSummary['actual'], 2) ?></span>
<span class="activity-stat <?= (float)$expenseSummary['diff'] > 0 ? 'money-over' : 'money-under' ?>">
<?= (float)$expenseSummary['diff'] > 0 ? '超出预算' : '比预算省' ?>
¥<?= number_format(abs((float)$expenseSummary['diff']), 2) ?>
</span>
<span class="activity-stat">总计 ¥<?= number_format((float)$expenseSummary['total'], 2) ?></span>
</div>
<?php endif; ?>
templates/nodes/_expenses.php
+10 -37
View File
@@ -3,18 +3,18 @@
* 节点花销面板
* 依赖外部变量：$node、$expenses、$expenseSummary、$familyUsers、
* $categories、$currencies（code=>中文名）、$expenseSymbols（code=>符号）、$currentUserId
*
* 用户明确反馈「预算没有意义」：只记真实花销，上面一笔一笔列出来，下面给个总计。
* （expenses.is_budget 列仍在库里，但 UI 与查询都不再使用 —— 见 Expenses 类注释。）
*/
$expenses = $expenses ?? [];
$familyUsers = $familyUsers ?? [];
$categories = $categories ?? [];
$currencies = $currencies ?? [];
$expenseSymbols = $expenseSymbols ?? [];
$expenseSummary = $expenseSummary ?? ['budget' => 0.0, 'actual' => 0.0, 'count' => 0, 'diff' => 0.0];
$budget = (float)$expenseSummary['budget'];
$actual = (float)$expenseSummary['actual'];
$diff = (float)$expenseSummary['diff'];
$expenseSummary = $expenseSummary ?? ['total' => 0.0, 'count' => 0];
$total = (float)$expenseSummary['total'];
$money = static function (float $v): string {
return number_format($v, 2);
};
@@ -22,21 +22,6 @@ $money = static function (float $v): string {
<section class="panel" id="expenses">
<h2 class="section-title">💰 花销 (<?= (int)$expenseSummary['count'] ?>)</h2>
<div class="expense-summary">
<div class="expense-stat">
<span class="muted">预算</span>
<strong>¥<?= $money($budget) ?></strong>
</div>
<div class="expense-stat">
<span class="muted">实际</span>
<strong>¥<?= $money($actual) ?></strong>
</div>
<div class="expense-stat">
<span class="muted"><?= $diff > 0 ? '超出预算' : '比预算省' ?></span>
<strong class="<?= $diff > 0 ? 'money-over' : 'money-under' ?>">¥<?= $money(abs($diff)) ?></strong>
</div>
</div>
<?php if (empty($expenses)): ?>
<p class="muted">还没有记账</p>
<?php else: ?>
@@ -53,11 +38,6 @@ $money = static function (float $v): string {
<div class="expense-row">
<div class="expense-main">
<span class="expense-cat"><?= e($ex['category']) ?></span>
<?php if ((int)$ex['is_budget'] === 1): ?>
<span class="expense-kind expense-kind-budget">预算</span>
<?php else: ?>
<span class="expense-kind expense-kind-actual">实际</span>
<?php endif; ?>
<span class="expense-desc"><?= e($ex['description'] ?: $ex['category']) ?></span>
<span class="expense-amount"><?= e($sym) ?><?= $money((float)$ex['total_amount']) ?></span>
</div>
@@ -76,6 +56,11 @@ $money = static function (float $v): string {
</div>
<?php endforeach; ?>
</div>
<div class="expense-total">
<span>总计（<?= (int)$expenseSummary['count'] ?> 笔）</span>
<strong>¥<?= $money($total) ?></strong>
</div>
<?php endif; ?>
<details class="inline-panel">
@@ -126,18 +111,6 @@ $money = static function (float $v): string {
<input type="text" name="description" maxlength="200" placeholder="例如：三人门票">
</div>
<div class="form-row">
<label>性质</label>
<div class="radio-group">
<label class="radio-label">
<input type="radio" name="is_budget" value="0" checked> 实际花费
</label>
<label class="radio-label">
<input type="radio" name="is_budget" value="1"> 预算
</label>
</div>
</div>
<div class="form-row">
<label>分摊人（默认全家平摊，可只勾选部分人）</label>
<div class="check-grid">
templates/nodes/_members.php
+138 -3
View File
@@ -2,6 +2,10 @@
/**
* 节点参与人面板
* 依赖外部变量：$node、$members、$familyUsers、$roleTags（id=>name）、$emotions（emoji=>中文）
*
* 编辑走弹窗：点某个参与人旁的「编辑」，弹出预填好的表单（角色 / 心情 / 签到时间），
* 提交目标仍是 members/store —— Members::save() 本来就是 upsert（同一节点同一人一条），
* 所以「编辑已加入的人」不需要任何新接口。
*/
$members = $members ?? [];
$familyUsers = $familyUsers ?? [];
@@ -16,6 +20,11 @@ $notJoined = [];
foreach ($familyUsers as $u) {
if (!isset($joinedIds[(int)$u['id']])) $notJoined[] = $u;
}
/* 上一次提交的原始值（flash_old 存的）只用来回填「刚才没保存成功的那个人」的表单，
按 user_id 精确匹配，避免污染其他参与人的编辑弹窗。 */
$mOldFilled = !empty($_SESSION['_old']);
$mOldUid = (string)old('user_id', '');
?>
<section class="panel" id="members">
<h2 class="section-title">👥 参与人 (<?= count($members) ?>)</h2>
@@ -27,6 +36,8 @@ foreach ($familyUsers as $u) {
<?php foreach ($members as $m):
$mName = (string)($m['name'] ?? '');
if ($mName === '') $mName = '已注销用户';
$mUid = (int)$m['user_id'];
$mUseOld = $mOldFilled && $mOldUid === (string)$mUid;
?>
<div class="member-row">
<?php if (!empty($m['avatar'])): ?>
@@ -50,14 +61,90 @@ foreach ($familyUsers as $u) {
<span class="member-checkin">✓ 签到 <?= date('m-d H:i', strtotime((string)$m['check_in_time'])) ?></span>
<?php endif; ?>
<button type="button" class="member-edit" data-edit-member="<?= $mUid ?>"
title="修改 <?= e($mName) ?> 的角色 / 心情 / 签到">编辑</button>
<form method="post" action="<?= url('members/destroy') ?>" class="member-del-form"
onsubmit="return confirm('把 <?= e($mName) ?> 从本节点移出？');">
<input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
<input type="hidden" name="node_id" value="<?= (int)$node['id'] ?>">
<input type="hidden" name="user_id" value="<?= (int)$m['user_id'] ?>">
<input type="hidden" name="user_id" value="<?= $mUid ?>">
<button type="submit" class="comment-del">移出</button>
</form>
</div>
<?php /* ── 该参与人的编辑弹窗（预填当前值） ───────────────── */ ?>
<div class="modal" id="member-edit-<?= $mUid ?>" aria-hidden="true" role="dialog"
aria-label="编辑参与人 <?= e($mName) ?>">
<div class="modal-backdrop" data-close-member="1"></div>
<div class="modal-content">
<h3 class="modal-title">编辑参与人：<?= e($mName) ?></h3>
<p class="modal-hint">改完点「保存」即可，同一人只会有一条参与记录。</p>
<form method="post" action="<?= url('members/store') ?>" class="form form-plain">
<input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
<input type="hidden" name="node_id" value="<?= (int)$node['id'] ?>">
<input type="hidden" name="user_id" value="<?= $mUid ?>">
<?php if (!empty($roleTags)): ?>
<div class="form-row">
<label>角色标签（可多选）</label>
<div class="check-grid">
<?php $eSelTags = $mUseOld ? old_array('role_tag_ids') : array_map('strval', $m['role_tag_ids'] ?? []); ?>
<?php foreach ($roleTags as $tagId => $tagName): ?>
<label class="checkbox-label">
<input type="checkbox" name="role_tag_ids[]" value="<?= (int)$tagId ?>"
<?= in_array((string)(int)$tagId, $eSelTags, true) ? ' checked' : '' ?>>
<span><?= e($tagName) ?></span>
</label>
<?php endforeach; ?>
</div>
</div>
<?php else: ?>
<p class="muted" style="font-size:12px;">
还没有角色标签，去
<a href="<?= url('role_tags/index') ?>">角色标签管理</a>
先建几个（例如：司机 / 摄影师 / 记账员）
</p>
<?php endif; ?>
<div class="form-row">
<label>心情（可选）</label>
<div class="emotion-grid">
<?php $eSelEmotion = $mUseOld ? (string)old('emotion', '') : (string)($m['emotion'] ?? ''); ?>
<label class="emotion-option">
<input type="radio" name="emotion" value=""<?= $eSelEmotion === '' ? ' checked' : '' ?>>
<span class="emotion-face">🚫</span>
<span class="emotion-text">不记录</span>
</label>
<?php foreach ($emotions as $emoji => $label): ?>
<label class="emotion-option" title="<?= e($label) ?>">
<input type="radio" name="emotion" value="<?= e($emoji) ?>"<?= $eSelEmotion === (string)$emoji ? ' checked' : '' ?>>
<span class="emotion-face"><?= e($emoji) ?></span>
<span class="emotion-text"><?= e($label) ?></span>
</label>
<?php endforeach; ?>
</div>
</div>
<div class="form-row">
<label>签到时间（可选，留空表示未签到）</label>
<?php
$dtName = 'check_in_time';
$dtValue = $mUseOld ? old_dt('check_in_time', null) : ($m['check_in_time'] ?? null);
$dtRequired = false;
$dtId = 'check-in-date-' . $mUid;
require __DIR__ . '/../_datetime.php';
?>
</div>
<div class="form-actions">
<button type="submit" class="btn-primary">保存</button>
<button type="button" class="btn btn-sm" data-close-member="1">取消</button>
</div>
</form>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
@@ -72,8 +159,7 @@ foreach ($familyUsers as $u) {
<?php endif; ?>
<details class="inline-panel">
<summary>＋ 添加 / 修改参与人</summary>
<?php $mOldFilled = !empty($_SESSION['_old']); ?>
<summary>＋ 添加参与人</summary>
<form method="post" action="<?= url('members/store') ?>" class="form form-plain"
data-old="<?= $mOldFilled ? '1' : '0' ?>">
<input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
@@ -145,3 +231,52 @@ foreach ($familyUsers as $u) {
</form>
</details>
</section>
<script>
(function () {
'use strict';
var openId = null;
function modalOf(uid) {
return document.getElementById('member-edit-' + uid);
}
function openModal(uid) {
var modal = modalOf(uid);
if (!modal) return;
if (openId !== null) closeModal(openId);
openId = uid;
modal.classList.add('open');
modal.setAttribute('aria-hidden', 'false');
document.body.style.overflow = 'hidden';
}
function closeModal(uid) {
var modal = modalOf(uid);
if (!modal) return;
modal.classList.remove('open');
modal.setAttribute('aria-hidden', 'true');
document.body.style.overflow = '';
if (openId === uid) openId = null;
}
document.addEventListener('click', function (ev) {
var opener = ev.target.closest ? ev.target.closest('[data-edit-member]') : null;
if (opener) {
ev.preventDefault();
openModal(opener.getAttribute('data-edit-member'));
return;
}
var closer = ev.target.closest ? ev.target.closest('[data-close-member]') : null;
if (closer && openId !== null) {
ev.preventDefault();
closeModal(openId);
}
});
document.addEventListener('keydown', function (ev) {
if (ev.key === 'Escape' && openId !== null) closeModal(openId);
});
})();
</script>
templates/nodes/attachments.php
+5 -1
View File
@@ -133,7 +133,8 @@ $iconByMime = [
], static fn($v) => $v !== '' && $v !== null);
?>
<div class="photo-card">
<a href="<?= e($url) ?>" target="_blank" rel="noopener" title="<?= e($name) ?>">
<a href="<?= e($url) ?>" title="<?= e($name) ?>"
<?= $isImg ? 'class="js-photo" data-cap="' . e($name) . '"' : 'target="_blank" rel="noopener"' ?>>
<?php if ($isImg): ?>
<img src="<?= e($url) ?>" alt="<?= e($name) ?>" loading="lazy">
<?php else: ?>
@@ -168,6 +169,9 @@ $iconByMime = [
<?php /* ── 裁剪弹窗（与节点表单共用同一份模板，避免两边漂移） ───────────── */ ?>
<?php require dirname(__DIR__) . '/_crop_modal.php'; ?>
<?php /* ── 照片灯箱：已上传的图片在当前页弹窗浏览，左右箭头切换 ────────── */ ?>
<?php require dirname(__DIR__) . '/_lightbox.php'; ?>
<script>
(function () {
'use strict';
templates/nodes/show.php
+7 -3
View File
@@ -162,9 +162,10 @@ $showPhotos = array_slice($photoRows, 0, 12);
<?php if (!empty($showPhotos)): ?>
<div class="photo-grid photo-grid-sm">
<?php foreach ($showPhotos as $attRow): ?>
<a class="photo-card" href="<?= e(media_att((int)$attRow['id'])) ?>"
target="_blank" rel="noopener" title="<?= e($attRow['file_name']) ?>">
<img src="<?= e(media_att((int)$attRow['id'])) ?>" alt="" loading="lazy">
<?php /* js-photo：点击在当前页灯箱里看大图，不再新开窗口（见 _lightbox.php） */ ?>
<a class="photo-card js-photo" href="<?= e(media_att((int)$attRow['id'])) ?>"
data-cap="<?= e($attRow['file_name']) ?>" title="<?= e($attRow['file_name']) ?>">
<img src="<?= e(media_att((int)$attRow['id'])) ?>" alt="<?= e($attRow['file_name']) ?>" loading="lazy">
</a>
<?php endforeach; ?>
<?php if (count($photoRows) > count($showPhotos)): ?>
@@ -194,3 +195,6 @@ $commentTargetType = Comments::TARGET_NODE;
$commentTargetId = (int)$node['id'];
require dirname(__DIR__) . '/comments/_block.php';
?>
<?php /* 照片灯箱：当前页弹窗看大图，左右箭头切换 */ ?>
<?php require dirname(__DIR__) . '/_lightbox.php'; ?>