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
assets/style.css
+76 -15
View File
@@ -641,6 +641,15 @@ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; padding
.member-emotion { font-size: 17px; line-height: 1; }
.member-checkin { font-size: 12.5px; color: var(--text-mute); }
.member-del-form { display: inline; margin-left: auto; }
.member-edit {
margin-left: auto;
border: 1px solid var(--border-strong); background: var(--surface);
color: var(--text-soft); font-size: 12.5px;
padding: 3px 10px; border-radius: 999px; cursor: pointer;
}
.member-edit:hover { border-color: var(--accent); color: var(--accent); }
/* 有「编辑」按钮时，移出按钮紧跟其后即可，不再负责把整行推到最右 */
.member-row .member-edit + .member-del-form { margin-left: 0; }
.member-del-form button {
border: 0; background: none; color: var(--text-mute);
font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px;
@@ -658,18 +667,7 @@ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; padding
.emotion-face { font-size: 16px; line-height: 1; }
.emotion-text { font-size: 12.5px; color: var(--text-soft); }
/* ── 13. 花销 ────────────────────────────────────────────────────────────── */
.expense-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.expense-stat {
flex: 1 1 130px;
padding: 11px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.expense-stat > div:first-child { font-size: 12px; color: var(--text-mute); }
.expense-stat strong { font-size: 16px; }
/* ── 13. 花销（只记真实花销：上面一笔一笔，下面总计） ────────────────────── */
.expense-list { display: flex; flex-direction: column; gap: 10px; }
.expense-row {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
@@ -683,9 +681,15 @@ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; padding
.expense-desc { font-size: 13px; color: var(--text-soft); margin-top: 2px; }
.expense-sub { font-size: 12.5px; color: var(--text-mute); margin-top: 3px; }
.expense-amount { font-size: 15px; font-weight: 650; white-space: nowrap; }
.expense-kind { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; font-weight: 550; }
.expense-kind-budget { background: var(--bg-soft); color: var(--text-soft); }
.expense-kind-actual { background: var(--success-soft); color: var(--success); }
.expense-total {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
margin-top: 12px; padding: 11px 14px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
font-size: 13.5px; color: var(--text-soft);
}
.expense-total strong { font-size: 18px; font-weight: 750; color: var(--text); }
/* ── 14. 附件与照片 ──────────────────────────────────────────────────────── */
.drop-zone {
@@ -1098,3 +1102,60 @@ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; padding
.settings-chip { flex: 1 1 100%; }
.inline-row { align-items: stretch; }
}
/* ── 17. 照片灯箱：当前页弹窗看大图，左右箭头/键盘/滑动切换 ────────────────── */
.lightbox {
position: fixed; inset: 0; z-index: 120;
display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(10, 13, 20, .88); }
.lightbox-body {
position: relative; z-index: 1;
margin: 0; max-width: min(1100px, 92vw);
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.lightbox-img {
max-width: min(1100px, 92vw);
max-height: 78vh;
object-fit: contain;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
background: transparent;
}
.lightbox-cap {
max-width: min(1100px, 92vw);
color: rgba(255, 255, 255, .82); font-size: 13px;
text-align: center; overflow-wrap: anywhere;
}
.lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 52px; height: 52px;
border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .14); color: #fff;
font-size: 34px; line-height: 1;
cursor: pointer; user-select: none;
display: flex; align-items: center; justify-content: center;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, .28); }
.lightbox-prev { left: max(12px, calc((100vw - min(1100px, 92vw)) / 2 - 72px)); }
.lightbox-next { right: max(12px, calc((100vw - min(1100px, 92vw)) / 2 - 72px)); }
.lightbox-close {
position: absolute; top: 14px; right: 16px; z-index: 2;
width: 42px; height: 42px;
border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .14); color: #fff;
font-size: 26px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .28); }
.lightbox-count {
position: absolute; top: 24px; left: 20px; z-index: 2;
color: rgba(255, 255, 255, .75); font-size: 13px;
font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
.lightbox-nav { width: 46px; height: 46px; font-size: 30px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-img { max-height: 66vh; }
}
src/Expenses.php
+21 -37
View File
@@ -6,8 +6,11 @@ namespace App;
/**
* 花销与分摊
*
* 表结构：expenses（挂在 trip_nodes 上，is_budget 区分"预算"和"实际"）
* + expense_splits（这笔钱按人分摊，谁承担多少）
* 表结构：expenses（挂在 trip_nodes 上）+ expense_splits（这笔钱按人分摊，谁承担多少）
*
* ⚠️ 历史上 expenses 有 is_budget（预算 / 实际）之分，用户明确反馈「预算没有意义」，
* 现在只记真实花销：查询一律 is_budget = 0，表单也不再提供「预算」选项。
* 列本身保留（老数据还在库里，不至于丢），但 UI 与汇总都不再出现预算概念。
*/
class Expenses
{
@@ -23,7 +26,7 @@ class Expenses
return ['CNY' => '人民币 ¥', 'JPY' => '日元 ¥', 'USD' => '美元 $', 'EUR' => '欧元 €', 'HKD' => '港币 HK$'];
}
/** 某个节点下的花销，带付款人和分摊明细 */
/** 某个节点下的花销（只看真实花销），带付款人和分摊明细 */
public static function forNode(int $nodeId): array
{
$db = Database::get();
@@ -31,8 +34,8 @@ class Expenses
SELECT e.*, u.name AS payer_name, u.avatar AS payer_avatar
FROM expenses e
LEFT JOIN users u ON u.id = e.payer_user_id
WHERE e.trip_node_id = ?
ORDER BY e.is_budget ASC, e.created_at ASC, e.id ASC');
WHERE e.trip_node_id = ? AND e.is_budget = 0
ORDER BY e.created_at ASC, e.id ASC');
$stmt->execute([$nodeId]);
$rows = $stmt->fetchAll();
if (empty($rows)) return [];
@@ -56,41 +59,32 @@ class Expenses
return $rows;
}
/** 活动下的花销合计（预算 / 实际），以及各节点的小计 */
/** 活动下的真实花销总计，以及各节点的小计 */
public static function summaryForActivity(int $activityId): array
{
$db = Database::get();
$stmt = $db->prepare('
SELECT tn.id AS node_id, e.is_budget, SUM(e.total_amount) AS amount, COUNT(*) AS cnt
SELECT tn.id AS node_id, SUM(e.total_amount) AS amount, COUNT(*) AS cnt
FROM expenses e
JOIN trip_nodes tn ON tn.id = e.trip_node_id
WHERE tn.activity_id = ?
GROUP BY tn.id, e.is_budget');
WHERE tn.activity_id = ? AND e.is_budget = 0
GROUP BY tn.id');
$stmt->execute([$activityId]);
$byNode = [];
$budgetTotal = 0.0;
$actualTotal = 0.0;
$total = 0.0;
$count = 0;
foreach ($stmt->fetchAll() as $row) {
$nodeId = (int)$row['node_id'];
$isBudget = (int)$row['is_budget'] === 1;
$amount = (float)$row['amount'];
$byNode[$nodeId][$isBudget ? 'budget' : 'actual'] = $amount;
if ($isBudget) {
$budgetTotal += $amount;
} else {
$actualTotal += $amount;
}
$byNode[(int)$row['node_id']] = $amount;
$total += $amount;
$count += (int)$row['cnt'];
}
return [
'budget' => $budgetTotal,
'actual' => $actualTotal,
'total' => $total,
'count' => $count,
'by_node' => $byNode,
'diff' => $actualTotal - $budgetTotal,
];
}
@@ -191,23 +185,13 @@ class Expenses
return true;
}
/** 某个节点的花销合计 */
/** 某个节点的真实花销合计 */
public static function summaryForNode(int $nodeId): array
{
$stmt = Database::get()->prepare('SELECT is_budget, SUM(total_amount) AS amount, COUNT(*) AS cnt
FROM expenses WHERE trip_node_id = ? GROUP BY is_budget');
$stmt = Database::get()->prepare('SELECT COALESCE(SUM(total_amount), 0) AS amount, COUNT(*) AS cnt
FROM expenses WHERE trip_node_id = ? AND is_budget = 0');
$stmt->execute([$nodeId]);
$budget = 0.0;
$actual = 0.0;
$count = 0;
foreach ($stmt->fetchAll() as $row) {
if ((int)$row['is_budget'] === 1) {
$budget = (float)$row['amount'];
} else {
$actual = (float)$row['amount'];
}
$count += (int)$row['cnt'];
}
return ['budget' => $budget, 'actual' => $actual, 'count' => $count, 'diff' => $actual - $budget];
$row = $stmt->fetch();
return ['total' => (float)$row['amount'], 'count' => (int)$row['cnt']];
}
}
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'; ?>