v29 第 29 批（9 条）：日程定位/复选框提示/名册错乱三处真因修复 + 读书落盘 + 导航四设置 + 笔记阅读态与共享
前 4 条是"上批改了但用户仍报"的，这次先拿真机证据再动手，三处真因如下：
1. 首页没定位到红线 —— 真根因：定位脚本的 PHP 条件是
`if (!$todayEvents || empty($timed))`，**今天只有全天日程时整段脚本不渲染**
（实测 hasScript=False、scrollTop=0），而 .ag-grid(0–24h) 与红线都在。
有分时段日程时定位其实完全正确（偏差 0px）。已改成 `if (!$todayEvents)`。
2. 任务复选框提示还在 —— 真根因：`_task_check.php` 里那句无障碍文字
`<span class="visually-hidden">` 用的类名**在 app.css 里从来没有定义过**
（项目一直只用 .sr-only）→ 没有规则 = 普通 span = 直接可见。
已把两个类名合并到同一条规则（clip 隐藏，仍可读屏）。
3. 名册完全错乱 —— 真根因：v29 重写平铺列表时**漏了一个 `</div>`**（闭合 .person），
浏览器把下一张卡嵌进上一张里，实测 .person-main 只剩 24~151px（本该 ~800px）。
`php -l` 与全部静态断言都抓不到，只有真机量 DOM 才现形。已补上闭合。
另把 v28 引入的多列 grid 改回单列（它与 content-visibility 冲突）＋窄屏动作区折行。
4. 读书慢 —— 按用户给的思路「做一个同步，然后落盘」：
新增 weread_snapshots 表 + App\WeReadCache（按人+数据集存 JSON）；
渲染路径改走 notebooksCached()/readStatsCached()（永不联网）；
同步从"渲染之前"挪到"**响应之后**"（queueBackgroundSync + fastcgi_finish_request）。
5. 导航设置改成右上角**下拉菜单 + 四视图**（addr/general/board/engine），
表单带 back 域 → 保存后回原来那一项。
🔴 顺带修掉一个真 bug：`if (!$inSettings && $canWrite)` 的 endif 漂到了文件末尾，
把 board/engine 两个视图也包进了"非设置态" → 打开时标题对、**内容是空的**。
6. 笔记列表缩略图：cover → contain + 固定高度（按比例完整显示，不裁切）。
7. 笔记段落编辑器：加 Markdown 工具条 + 斜线命令（行首打 /co → 回车补全代码块），
两者共用同一份命令表。
8. 笔记点进来默认**阅读态**（图文混排、附件在最下方、图片四档宽度、点「编辑」才可改）；
清单块并入 Markdown —— 但**历史 list 块转写成 `- 项` 文本，老数据不丢**。
9. 笔记共享改成**逐人 + 权限**（note_shares，与 resource_shares 同构）；
可见性收敛成全站唯一的 Note::VIS_COND；迁移用一次性哨兵。
This commit is contained in:
+9
-10
@@ -470,14 +470,13 @@ $showNow = $nowPos >= 0 && $nowPos <= 1;
|
||||
用户原话：「每次进来，都要定位到当前时刻，就是红线出现的位置，让红线在中间。」
|
||||
⇒ 打开首页时把**滚动容器**滚到一个位置，使"当前时刻"落在可视区**正中**。
|
||||
|
||||
⚠️ 触发条件只看**网格在不在**（`$timed` 非空才有网格），**不要**再加 `$showNow`。
|
||||
第一版写了 `if (!empty($timed) && $showNow)`，后果是：
|
||||
· 红线落在区间外（现在 23:40、日程只到 18 点 → 页面不画红线）时**整段脚本不渲染**
|
||||
→ "每次进来都要定位"这条需求在最常见的场景（晚上开首页）直接失效；
|
||||
· 更糟的是**判据依赖了被优化掉的东西**：探针那次库里没有分时段日程，
|
||||
脚本根本没输出，页面看着"没报错"，实测 `scrollTop=0`（本轮实测抓到的）。
|
||||
⇒ 现在：**有网格就定位**。红线在就对齐红线；红线不在（在区间外）就用
|
||||
`$nowPos` 同一个比例算出"此刻"在网格里的位置来对齐（数值同源，不会两套口径）。
|
||||
⚠️ 触发条件：**今天有日程就定位**（只要 `$todayEvents` 非空，页面上就有
|
||||
`.ag-grid` 与红线）。曾经写成 `if (!$todayEvents || empty($timed))`，
|
||||
后果是**今天只有全天日程 / 全天日程都没有分时段的那种日子，脚本整段不输出**
|
||||
—— 而网格（0–24h）和红线照样渲染，于是"红线在，页面却停在最上面"
|
||||
（v29 用户第 1 条仍然报「没有定位到红线」，实测 `scrollTop=0`、脚本不在页面上，
|
||||
就是这个条件卡掉的；有分时段日程时定位其实完全正确、偏差 0px）。
|
||||
⇒ 只判"有没有网格可滚"，别判"是不是分时段日程"。
|
||||
|
||||
⚠️ 用 `scrollTop = 目标偏移 - 容器高/2`，**不要**用 `scrollIntoView({block:'center'})`：
|
||||
它会**连带滚动外层页面**（把整个浏览器窗口也滚下去），
|
||||
@@ -486,8 +485,8 @@ $showNow = $nowPos >= 0 && $nowPos <= 1;
|
||||
⚠️ 容器"没得滚"时（内容比容器矮）赋任何值都是 0，天然安全，不必特判。
|
||||
⚠️ 目标位置**由服务端算好**传进来（`$nowPos`），不在 JS 里再算一遍时间 ——
|
||||
两处各算一次迟早不一致（服务端用的是站点时区，JS 用的是浏览器时区）。 */ ?>
|
||||
<?php if (!$todayEvents || empty($timed)): ?>
|
||||
<?php /* 没有分时段日程 → 没有网格可滚，什么都不做 */ ?>
|
||||
<?php if (!$todayEvents): ?>
|
||||
<?php /* 今天一条日程都没有 → 页面是「今天没有安排」的空态，没有网格可滚 */ ?>
|
||||
<?php else: ?>
|
||||
<script>
|
||||
(function () {
|
||||
|
||||
+106
-15
@@ -55,25 +55,89 @@ $sc = static fn($k, $d = '') => (string)($navSet[$k] ?? $d);
|
||||
用参数就能让"保存后回到设置页"（下面的表单里保留了 `set=1` 的隐藏域）。
|
||||
⚠️ 保留 `$editSite` 等编辑态：正在编辑某个站点/板块/引擎时，**强制显示设置视图**，
|
||||
否则用户点"编辑板块"会看到一个没有板块表单的页面（看起来像功能坏了）。 */
|
||||
$inSettings = !empty($_GET['set']) || $editGroup !== null || $editEngine !== null;
|
||||
/* 🔴🔴 v29 用户第 5 条：「导航的设置，做成设置按钮，点击后，拉下来设置选项，
|
||||
分别是地址设置、导航设置、板块设置、搜索引擎设置，把现在的设置页面，拆开，
|
||||
放在不同的设置选项下。」
|
||||
⇒ 从"一个大的设置页"改成**下拉菜单 + 四个独立视图**：
|
||||
· `?set=addr` 地址设置（展示页地址 + 短语）
|
||||
· `?set=general` 导航设置（标题/搜索引擎/布局等，原 SimpleNav 的 settings）
|
||||
· `?set=board` 板块设置
|
||||
· `?set=engine` 搜索引擎设置
|
||||
· 不带 `set` 默认：新增网址 + 网址列表
|
||||
⚠️ 为什么拆开（而不只是把四块堆在一个?"设置页"里）：
|
||||
用户点的原话就是"拆开"。而且四块各自是**独立表单**，堆在一页里
|
||||
每次保存后 302 回来都要重新找自己在哪一块。分开之后
|
||||
"你在哪一块"由 URL 决定，保存后回到原地，位置感清楚。
|
||||
⚠️ 用**链接**（服务端渲染）而不是 JS 下拉切换内容：
|
||||
与 v28 的 `?set=1` 同一理由 —— 设置里有表单，保存会 302 回来，
|
||||
纯 JS 的展开状态在刷新后就丢了。`<details>` 只负责"菜单展开"这一个动效，
|
||||
点条目是**真实导航**（URL 变、视图变、刷新/回退都不丢）。
|
||||
⚠️ 编辑态（正在编辑某板块/某引擎）要落到对应的那个视图里，
|
||||
否则用户点"编辑板块"会看到一个没有板块表单的页面（看起来像功能坏了）。 */
|
||||
$setKey = (string)($_GET['set'] ?? '');
|
||||
if ($editGroup !== null) { $setKey = 'board'; }
|
||||
if ($editEngine !== null) { $setKey = 'engine'; }
|
||||
$inSettings = in_array($setKey, ['addr', 'general', 'board', 'engine'], true);
|
||||
|
||||
/* 设置项的登记表（菜单与"当前在哪一项"的标题都读它，只有一份） */
|
||||
$setItems = [
|
||||
'addr' => ['地址设置', 'M2.5 4h11M2.5 8h7M2.5 12h9'],
|
||||
'general' => ['导航设置', 'M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z M8 1.5v1.6M8 12.9v1.6M1.5 8h1.6M12.9 8h1.6M3.4 3.4l1.1 1.1M11.5 11.5l1.1 1.1M12.6 3.4l-1.1 1.1M4.5 11.5l-1.1 1.1'],
|
||||
'board' => ['板块设置', 'M2 3.5h4v4H2zM10 3.5h4v4h-4zM2 9.5h4v4H2zM10 9.5h4v4h-4z'],
|
||||
'engine' => ['搜索引擎设置', 'M7 2.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z M10.4 10.4L14 14'],
|
||||
];
|
||||
?>
|
||||
<div class="page-head">
|
||||
<h1>导航</h1>
|
||||
<span class="sub">你个人用的网址导航 · 每人一份</span>
|
||||
<div class="actions">
|
||||
<?php /* v28 用户第 11 条：右上角「设置」按钮，与其他模块的手指位置一致。
|
||||
⚠️ 它是个**链接**（服务端切换视图），不是 JS 开关 —— 理由见上面的注释。 */ ?>
|
||||
<h1><?= $inSettings ? e($setItems[$setKey][0]) : '导航' ?></h1>
|
||||
<span class="sub">
|
||||
<?php if ($inSettings): ?>
|
||||
<a class="btn btn-sm" href="<?= e(url('nav')) ?>">完成</a>
|
||||
<a href="<?= e(url('nav')) ?>">← 回到网址列表</a>
|
||||
<?php else: ?>
|
||||
<a class="btn btn-ghost btn-sm" href="<?= e(url('nav', ['set' => 1])) ?>">设置</a>
|
||||
你个人用的网址导航 · 每人一份
|
||||
<?php endif; ?>
|
||||
</span>
|
||||
<div class="actions">
|
||||
<?php /* 🔴 v29 用户第 5 条：右上角「设置」点开是**下拉菜单**，四项分设。
|
||||
⚠️ 用项目已有的 `.movie-set.menu`（任务/观影模块同款）：
|
||||
外观、点击外部收起、键盘可达全都是现成的，
|
||||
这里再手写一套 `<details>` 样式，迟早跟那边不一致。 */ ?>
|
||||
<details class="movie-set menu">
|
||||
<summary class="btn btn-ghost btn-sm" title="导航设置" aria-label="导航设置">
|
||||
设置
|
||||
<svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" fill="none"
|
||||
stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
|
||||
stroke-linejoin="round" style="margin-left:2px;vertical-align:-1px">
|
||||
<path d="M4 6.5l4 4 4-4"/>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="menu-list">
|
||||
<?php foreach ($setItems as $k => $it): ?>
|
||||
<a href="<?= e(url('nav', ['set' => $k])) ?>"<?= $setKey === $k ? ' class="on"' : '' ?>>
|
||||
<svg class="mi" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"
|
||||
fill="none" stroke="currentColor" stroke-width="1.5"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="<?= e($it[1]) ?>"/>
|
||||
</svg>
|
||||
<span><?= e($it[0]) ?></span>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
<a href="<?= e(url('nav')) ?>">
|
||||
<svg class="mi" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"
|
||||
fill="none" stroke="currentColor" stroke-width="1.5"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 8l3.5 3.5L13 5"/>
|
||||
</svg>
|
||||
<span>我的网址</span>
|
||||
</a>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php /* 设置视图里的四块（展示地址 / 导航设置 / 板块 / 搜索引擎）。
|
||||
只在设置态渲染 —— 默认进来看到的是"添加网址 + 网址列表"（用户原话）。 */ ?>
|
||||
<?php if ($inSettings): ?><?php /* ==== 设置视图开始 ==== */ ?>
|
||||
<?php /* ==== 地址设置（?set=addr）==== */ ?>
|
||||
<?php if ($setKey === 'addr'): ?>
|
||||
|
||||
<?php /* ==================== ① 展示页地址与短语（用户第 4 条的"特殊地址"）====================
|
||||
用户原话：「给他一个非常特殊的地址…地址后面可以跟着用户添加的一个短语，就跟类似
|
||||
@@ -117,17 +181,23 @@ $inSettings = !empty($_GET['set']) || $editGroup !== null || $editEngine !== nul
|
||||
<form method="post" action="<?= e(url('nav/save')) ?>" class="inline-form"
|
||||
onsubmit="return confirm('换成一串随机短语？之前的地址会立刻失效。')">
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="back" value="addr">
|
||||
<input type="hidden" name="act" value="phrase_random">
|
||||
<button class="btn btn-ghost btn-sm" type="submit">换一串随机的</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php endif; ?><?php /* ==== /地址设置 ==== */ ?>
|
||||
|
||||
<?php /* ==== 导航设置（?set=general）==== */ ?>
|
||||
<?php if ($setKey === 'general'): ?>
|
||||
<?php /* ==================== ② 设置（照搬 SimpleNav 的 settings）==================== */ ?>
|
||||
<div class="card card-pad">
|
||||
<h2 class="cinema-h2">导航设置</h2>
|
||||
<form method="post" action="<?= e(url('nav/save')) ?>">
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="back" value="general">
|
||||
<input type="hidden" name="act" value="settings_save">
|
||||
<div class="form-grid">
|
||||
<div class="field">
|
||||
@@ -196,10 +266,15 @@ $inSettings = !empty($_GET['set']) || $editGroup !== null || $editEngine !== nul
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<?php endif; ?><?php /* ==== 设置视图（前半：展示地址 + 导航设置）结束 ==== */ ?>
|
||||
<?php endif; ?><?php /* ==== /导航设置 ==== */ ?>
|
||||
|
||||
<?php /* ==================== ③ 站点：新增/编辑 ==================== */ ?>
|
||||
<?php if ($canWrite): ?>
|
||||
<?php /* ==================== ③ 站点：新增/编辑 ==================== */
|
||||
/* 🔴 v29 用户第 5 条：这两块（新增站点 + 站点列表）是**默认视图**的内容，
|
||||
设置视图（addr/general/board/engine）里不该出现 —— 用户原话是
|
||||
「进来之后，默认就是添加网址，和所有网址的列表」，反过来说
|
||||
进了设置就不该再看到"添加网址"。 */
|
||||
?>
|
||||
<?php if (!$inSettings && $canWrite): ?>
|
||||
<div class="card card-pad">
|
||||
<h2 class="cinema-h2"><?= $editSite ? '编辑站点' : '新增站点' ?></h2>
|
||||
<?php /* 🔴 v24 第 26 批 用户第 4 条：「输入 url 之后，如果其他用户添加了，
|
||||
@@ -276,6 +351,7 @@ $inSettings = !empty($_GET['set']) || $editGroup !== null || $editEngine !== nul
|
||||
</div>
|
||||
|
||||
<?php /* ==================== ④ 站点列表（按板块分组，可拖拽排序）==================== */ ?>
|
||||
<?php if (!$inSettings): ?>
|
||||
<div class="card card-pad">
|
||||
<h2 class="cinema-h2">
|
||||
站点列表
|
||||
@@ -327,13 +403,24 @@ $inSettings = !empty($_GET['set']) || $editGroup !== null || $editEngine !== nul
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?><?php /* ④ 站点列表（仅默认视图） */ ?>
|
||||
<?php /* ⚠️ 这里必须补上 277 行那个 `if (!$inSettings && $canWrite)` 的收尾 ——
|
||||
它原本一路开到了文件末尾（607 行），把**板块设置 / 搜索引擎设置**两个视图
|
||||
也一起包进了"非设置态"里 → 打开 `?set=board` 时整段被跳过，
|
||||
页面标题显示"板块设置"、内容却是空的（本轮实测抓到的真 bug：
|
||||
`<!--DBG-->` 探针证明执行根本没走到 409 行）。
|
||||
⇒ 「非设置态才显示」只该管**站点编辑 + 站点列表**这两块（见 v29 第 5 条），
|
||||
设置类视图（addr/general/board/engine）各自独立、不受它管。 */ ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($inSettings): ?><?php /* ==== 设置视图（后半：板块 + 搜索引擎）重新开始 ==== */ ?>
|
||||
<?php /* ==== 板块设置（?set=board）==== */ ?>
|
||||
<?php if ($setKey === 'board'): ?>
|
||||
<?php /* ==================== ⑤ 板块 ==================== */ ?>
|
||||
<div class="card card-pad">
|
||||
<h2 class="cinema-h2"><?= $editGroup ? '编辑板块' : '新增板块' ?></h2>
|
||||
<form method="post" action="<?= e(url('nav/save')) ?>">
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="back" value="board">
|
||||
<input type="hidden" name="act" value="group_save">
|
||||
<?php if ($editGroup): ?>
|
||||
<input type="hidden" name="id" value="<?= (int)$editGroup['id'] ?>">
|
||||
@@ -390,11 +477,16 @@ $inSettings = !empty($_GET['set']) || $editGroup !== null || $editEngine !== nul
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<?php endif; ?><?php /* ==== /板块设置 ==== */ ?>
|
||||
|
||||
<?php /* ==== 搜索引擎设置（?set=engine）==== */ ?>
|
||||
<?php if ($setKey === 'engine'): ?>
|
||||
<?php /* ==================== ⑥ 搜索引擎 ==================== */ ?>
|
||||
<div class="card card-pad">
|
||||
<h2 class="cinema-h2"><?= $editEngine ? '编辑搜索引擎' : '新增搜索引擎' ?></h2>
|
||||
<form method="post" action="<?= e(url('nav/save')) ?>">
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="back" value="engine">
|
||||
<input type="hidden" name="act" value="engine_save">
|
||||
<?php if ($editEngine): ?>
|
||||
<input type="hidden" name="id" value="<?= (int)$editEngine['id'] ?>">
|
||||
@@ -519,8 +611,7 @@ $inSettings = !empty($_GET['set']) || $editGroup !== null || $editEngine !== nul
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?><?php /* ==== 设置视图（后半：板块 + 搜索引擎）结束 ==== */ ?>
|
||||
<?php endif; ?><?php /* ==== /搜索引擎设置 ==== */ ?>
|
||||
|
||||
<script>
|
||||
/* 导航管理页的交互（v24 第 24 批）。
|
||||
|
||||
+326
-163
@@ -1,40 +1,62 @@
|
||||
<?php
|
||||
/**
|
||||
* 个人笔记 · 写 / 改（v27 用户 2026-10-07）。新建与编辑**同一个模板**。
|
||||
* 个人笔记 · 一条笔记的两种面貌（v29 用户 2026-10-08 第 6/7/8/9 条）。
|
||||
*
|
||||
* 「分块」的落点就在这一页：正文区由若干**块**组成，每块是
|
||||
* 段落 / 图片 / 清单 三者之一，可增、可删、可上下移。
|
||||
* 🔴 用户原话（第 8 条）：
|
||||
* 「笔记点进来，默认是阅读状态，图文混排，附件在最下方，图文混排时，
|
||||
* 需要可以调整大小。点击编辑按钮，才进入编辑功能。
|
||||
* 清单功能不要了吧，markdown 里面包含这个功能，把段落做的完善一点就可以了。」
|
||||
* ⇒ 这个模板现在有**两个态**：
|
||||
* · **阅读态**（`$editMode = false`）：图文按顺序排下来、附件在最底下、
|
||||
* 右上角一个「编辑」按钮。多数时候用户是来看的。
|
||||
* · **编辑态**（`$editMode = true`）：分块编辑器 + 工具条 + Markdown 补全。
|
||||
*
|
||||
* 三条刻意的轻量取舍（写清楚，免得后人"顺手升级"成重型编辑器）：
|
||||
* ① **不做富文本工具栏**（粗体/斜体/颜色…）。本项目全站的文本都是"纯文本 +
|
||||
* 换行"，只有这里破例就会出现两套文本口径（导出、搜索、复制都会不一致）。
|
||||
* 需要强调就写符号，需要排版就用清单块。
|
||||
* ② **不做 Markdown 预览**。可见即所得：段落块就是段落，清单块就是清单 ——
|
||||
* 用户不必再学"我打的东西会变成什么"。这也是"轻量"最实在的一层。
|
||||
* ③ **不做拖拽排序**，只有 ↑ ↓ 两个按钮。鼠标拖拽要引入一整套 pointer 事件
|
||||
* 与触摸兼容（本仓名册拖拽就为它写了上千行），而笔记的块通常只有几块，
|
||||
* 两个按钮足够，代码少一个数量级。
|
||||
* 🔴 用户原话（第 7 条）：
|
||||
* 「添加段落部分，还是不太好，这样就意味着用户还是要记住所有的 markdown 命令，
|
||||
* 要么有工具条，要么有代码提示，例如插入一个斜线，然后输入代码，例如 code，
|
||||
* 就能自动补全 code 的 markdown 代码。」
|
||||
* ⇒ **两样都给**（用户原话就是"要么…要么…"，那两样都给最省事）：
|
||||
* · 工具条：粗体 / 斜体 / 标题 / 列表 / 引用 / 代码 / 链接 —— 点一下插到光标处；
|
||||
* · 斜线提示：行首打 `/` 弹出命令菜单，打 `code` 回车就补上代码块。
|
||||
*
|
||||
* ⚠️ 提交形状：所有块打包成一个 JSON 放进隐藏域 `blocks`（见页尾脚本）。
|
||||
* 为什么不是 `kind[]` / `content[]` 并行数组：服务端要按下标对齐，
|
||||
* 一旦前端少发一个（比如空块被过滤）整个错位，而且很难在页面上看出来。
|
||||
* JSON 一把梭，服务端 `json_decode` 之后逐块清洗，简单且不会错位。
|
||||
* ⚠️ **无 JS 兜底**：`<noscript>` 里给一个普通 textarea（`body_plain`），
|
||||
* 服务端在 `blocks` 为空时会退回读它（见 index.php 的 notes/save）。
|
||||
* ⚠️ 为什么"阅读态"要单独一份渲染（而不是复用编辑器的预览）：
|
||||
* 编辑器里的预览是"每块一个方框、带虚线边框"，那是**编辑**的视觉语言；
|
||||
* 阅读态要的是干净的排版（没有框、没有按钮）。两者混用会让阅读页
|
||||
* 看着像"还没保存的草稿"。
|
||||
* ⚠️ 图片"可以调整大小"（第 8 条）：用 width 百分比存进图片块的内容里
|
||||
* （`key|50`），渲染时按它出宽度。见下面 `$imgW` 的解析与注释。
|
||||
*
|
||||
* @param array|null $editing 编辑时的笔记（带 blocks/tags/is_shared）；新建为 null
|
||||
* @param array|null $editing 笔记（阅读/编辑都以它为准）；新建时 null
|
||||
* @param bool $editMode true = 编辑态
|
||||
* @param string $perm 'owner' / 'write' / 'read' / ''
|
||||
* @param bool $canEdit 能不能改（作者或 write）
|
||||
* @param array $shares 已共享给谁（作者视角才有内容）
|
||||
* @param array $tagSuggest 我用过的标签（点一下就加）
|
||||
*/
|
||||
$editing = $editing ?? null;
|
||||
$isEditing = $editing !== null;
|
||||
$editMode = (bool)($editMode ?? ($isEditing ? false : true));
|
||||
$canWrite = \App\Auth::canWrite();
|
||||
$perm = (string)($perm ?? '');
|
||||
$canEdit = (bool)($canEdit ?? false);
|
||||
$shares = (array)($shares ?? []);
|
||||
$isMine = $isEditing && (int)$editing['person_id'] === (int)\App\Auth::personId();
|
||||
|
||||
// 把编辑中的数据整理成前端要的形状（块数组 + 标签词）
|
||||
$blocks = [];
|
||||
$tagsStr = '';
|
||||
if ($isEditing) {
|
||||
foreach ((array)$editing['blocks'] as $b) {
|
||||
$blocks[] = ['kind' => (string)$b['kind'], 'content' => (string)$b['content']];
|
||||
// ⚠️ 历史 list 块在编辑态里**转成 Markdown 文本**再放进编辑器：
|
||||
// 否则编辑器认不出这种块（v29 已把清单并入 Markdown），
|
||||
// 会渲染成一个空的方块 —— 用户一保存内容就丢了。
|
||||
$k = (string)$b['kind'];
|
||||
$c = (string)$b['content'];
|
||||
if ($k === 'list') {
|
||||
$c = \App\Note::blockHtmlOut($c); // 见 Note::blockHtmlOut（返回 Markdown 文本）
|
||||
$k = 'text';
|
||||
}
|
||||
$blocks[] = ['kind' => $k, 'content' => $c];
|
||||
}
|
||||
$tagsStr = implode(' ', array_map(static fn($t): string => '#' . $t, (array)$editing['tags']));
|
||||
}
|
||||
@@ -42,126 +64,86 @@ if (!$blocks) {
|
||||
// 新建时给一个空段落块打底（否则页面上一片空白，用户不知道从哪写）
|
||||
$blocks = [['kind' => 'text', 'content' => '']];
|
||||
}
|
||||
|
||||
/** 图片块内容 → [key, 宽度百分比]。内容形如 `abc123` 或 `abc123|50`。 */
|
||||
$imgParts = static function (string $c): array {
|
||||
$p = explode('|', $c);
|
||||
$w = isset($p[1]) ? (int)$p[1] : 0;
|
||||
if ($w < 20 || $w > 100) { $w = 0; }
|
||||
return [trim((string)$p[0]), $w];
|
||||
};
|
||||
?>
|
||||
<div class="page-head">
|
||||
<h1><?= $isEditing ? '改笔记' : '写笔记' ?></h1>
|
||||
<h1><?= $editMode ? ($isEditing ? '改笔记' : '写笔记') : '看笔记' ?></h1>
|
||||
<span class="sub">
|
||||
<?php if ($isEditing && !$editMode): ?>
|
||||
<?= e(substr((string)$editing['updated_at'], 0, 16)) ?>
|
||||
<?php if (!$isMine): ?>
|
||||
· 作者 <?= e((string)($editing['author_name'] ?? '')) ?>
|
||||
· 你的权限：<?= e(\App\Note::permWord($perm)) ?>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
</span>
|
||||
<div class="actions">
|
||||
<a class="btn btn-ghost" href="<?= e(url('notes')) ?>">返回列表</a>
|
||||
<?php /* 🔴 v29 第 8 条：阅读态的右上角就是那个「编辑」按钮 —— 用户明确说
|
||||
"点击编辑按钮，才进入编辑功能"。 */ ?>
|
||||
<?php if ($isEditing && !$editMode && $canEdit && $canWrite): ?>
|
||||
<a class="btn btn-sm" href="<?= e(url('notes/form', ['id' => (int)$editing['id'], 'edit' => 1])) ?>">编辑</a>
|
||||
<?php endif; ?>
|
||||
<a class="btn btn-ghost btn-sm" href="<?= e(url('notes')) ?>">返回列表</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (!$canWrite): ?>
|
||||
<?php if (!$isEditing && !$canWrite): ?>
|
||||
<div class="card card-pad"><p class="empty-hint">只读账号不能写笔记。</p></div>
|
||||
<?php else: ?>
|
||||
<form method="post" action="<?= e(url('notes/save')) ?>" id="noteForm" class="note-form">
|
||||
<?= csrf_field() ?>
|
||||
<?php if ($isEditing): ?>
|
||||
<input type="hidden" name="id" value="<?= (int)$editing['id'] ?>">
|
||||
<?php endif; ?>
|
||||
<?php /* 块的真实载荷（由页尾脚本维护） */ ?>
|
||||
<input type="hidden" name="blocks" id="noteBlocks" value="">
|
||||
<?php elseif (!$editMode): ?>
|
||||
<?php /* ==================== ✅ 阅读态（默认）====================
|
||||
用户第 8 条要的"图文混排 + 附件在最下方"，就在这一段。
|
||||
⚠️ 图片块用 `<figure>` 包：宽度可调（第 8 条），且要与正文有间距。
|
||||
⚠️ 附件（`$editing['files']`）**排在正文之后、页面最下方** ——
|
||||
用户原话「附件在最下方」。 */ ?>
|
||||
<article class="note-read card card-pad">
|
||||
<?php $title = trim((string)($editing['title'] ?? '')); ?>
|
||||
<?php if ($title !== ''): ?>
|
||||
<h1 class="note-read-title"><?= e($title) ?></h1>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="card card-pad">
|
||||
<div class="field">
|
||||
<label for="noteTitle">标题</label>
|
||||
<input class="input" id="noteTitle" name="title" maxlength="200"
|
||||
value="<?= e((string)($editing['title'] ?? '')) ?>"
|
||||
placeholder="一句话概括（也可以不写，只写正文）" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php /* ---------------- 分块编辑区 ---------------- */ ?>
|
||||
<div class="card card-pad">
|
||||
<div class="note-block-head">
|
||||
<h2 class="cinema-h2">正文</h2>
|
||||
<div class="note-add">
|
||||
<button class="btn btn-ghost btn-sm" type="button" data-add="text">+ 段落</button>
|
||||
<button class="btn btn-ghost btn-sm" type="button" data-add="image">+ 图片</button>
|
||||
<button class="btn btn-ghost btn-sm" type="button" data-add="list">+ 清单</button>
|
||||
<?php if (!empty($editing['tags'])): ?>
|
||||
<div class="note-tags note-read-tags">
|
||||
<?php foreach ((array)$editing['tags'] as $t): ?>
|
||||
<a class="note-tag" href="<?= e(url('notes', ['tag' => (string)$t])) ?>">#<?= e((string)$t) ?></a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php /* 🔴 v28 用户第 12 条：「段落是需要支持富文本的，可以使用 markdown，
|
||||
但是需要使用富文本的方式进行编辑，同时可以使用 markdown 源码观看编辑。
|
||||
就是说，允许所见即所得编辑，也允许 markdown 编辑。」
|
||||
<div class="note-read-body">
|
||||
<?php foreach ((array)$editing['blocks'] as $b): ?>
|
||||
<?php $k = (string)$b['kind']; $c = (string)$b['content']; ?>
|
||||
<?php if ($k === 'image'): ?>
|
||||
<?php [$key, $w] = $imgParts($c); ?>
|
||||
<?php if ($key !== ''): ?>
|
||||
<figure class="note-read-fig">
|
||||
<a href="<?= e(media_url($key)) ?>" data-prev>
|
||||
<img src="<?= e(media_url($key)) ?>" alt=""
|
||||
<?= $w > 0 ? 'style="width:' . (int)$w . '%"' : '' ?>
|
||||
loading="lazy" decoding="async">
|
||||
</a>
|
||||
</figure>
|
||||
<?php endif; ?>
|
||||
<?php else: ?>
|
||||
<div class="note-read-block md-body"><?= (string)($b['html'] ?? '') ?></div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
|
||||
⇒ 两件事：
|
||||
① **每个段落块下方实时显示渲染结果**（"所见即所得"）——
|
||||
写 Markdown 的同时就能看到它长什么样，不必切来切去；
|
||||
② 一个**全局"源码 / 预览"开关**：想专心改 Markdown 源码时，
|
||||
把实时预览关掉（长文档下预览会占很多地方，也会让人分心）。
|
||||
|
||||
⚠️ 为什么不做 contenteditable 那种"直接在渲染结果上编辑"：
|
||||
那要引入一套 HTML↔Markdown 的双向转换与清洗（正是"引大库"的那条路），
|
||||
而且富文本内容再存回 Markdown 时几乎必然丢格式或引入噪音。
|
||||
这里选择"**输入 Markdown + 实时预览**"—— 两个诉求都满足，
|
||||
数据始终是干净的 Markdown 纯文本（可导出、可搜索、可版本对比）。 */ ?>
|
||||
<div class="note-modebar">
|
||||
<span class="small muted">段落支持 Markdown：<code>**粗体**</code>
|
||||
<code>*斜体*</code> <code># 标题</code> <code>- 清单</code> <code>> 引用</code>
|
||||
<code>`代码`</code></span>
|
||||
<label class="note-live">
|
||||
<input type="checkbox" id="noteLivePreview" checked>
|
||||
<span>实时预览</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="noteBlockList" class="note-blocks"></div>
|
||||
|
||||
<?php /* 无 JS 兜底：脚本没跑时用户仍能写一条纯文字笔记 */ ?>
|
||||
<noscript>
|
||||
<div class="field" style="margin-top:10px">
|
||||
<label for="notePlain">正文（纯文本）</label>
|
||||
<textarea class="input" id="notePlain" name="body_plain" rows="8"
|
||||
placeholder="没有启用脚本时，可以在这里写纯文字正文"><?php
|
||||
echo e(implode("\n\n", array_map(
|
||||
static fn($b): string => (string)$b['content'], $blocks)));
|
||||
?></textarea>
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<?php /* 图片上传用的隐藏 file 框（点"+ 图片"时程序化触发） */ ?>
|
||||
<input type="file" id="noteImgInput" accept="image/*" hidden>
|
||||
</div>
|
||||
|
||||
<?php /* ---------------- 标签 + 共享 ---------------- */ ?>
|
||||
<div class="card card-pad">
|
||||
<div class="field">
|
||||
<label for="noteTags">标签</label>
|
||||
<input class="input" id="noteTags" name="tags" maxlength="300"
|
||||
value="<?= e($tagsStr) ?>"
|
||||
placeholder="用空格分开，如：读书 灵感 待办（可写 # 也可不写）" autocomplete="off">
|
||||
<?php if ($tagSuggest): ?>
|
||||
<div class="note-tags note-tags-suggest">
|
||||
<span class="small muted">用过的：</span>
|
||||
<?php foreach ($tagSuggest as $t): ?>
|
||||
<button type="button" class="note-tag" data-tag="<?= e((string)$t) ?>">
|
||||
#<?= e((string)$t) ?>
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php if (!$editing['blocks']): ?>
|
||||
<p class="empty-hint">（这条笔记没有正文）</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<label class="note-share-toggle">
|
||||
<input type="checkbox" name="is_shared" value="1"
|
||||
<?= !empty($editing['is_shared']) ? 'checked' : '' ?>>
|
||||
<span>共享给全家（默认只有自己看得到）</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<?php /* 🔴 v28 用户第 12 条：「再加上附件上传功能，附件，都放在笔记最下面就行了。」
|
||||
⇒ 附件区放在**整张表单的最下面**（标签与共享之后），与用户说的一致。
|
||||
⚠️ 附件要挂在**已存在的笔记**上（attachments.target_id 要真实 id），
|
||||
所以新建时这一区是**禁用并说明**的 —— 保存之后进入编辑态就能传了。
|
||||
不采用"草稿附件 + 保存时认领"（图片块那套）：附件不像图片那样内嵌在正文里，
|
||||
草稿态文件在用户放弃保存后会变成谁看不见的垃圾；宁可让他保存完再传。 */ ?>
|
||||
<?php if ($isEditing): ?>
|
||||
<div class="card card-pad" id="noteFilesCard">
|
||||
<h2 class="cinema-h2">附件 <span class="hint">放最后，与正文分开</span></h2>
|
||||
|
||||
<?php /* 已有附件：可下载、可删 */ ?>
|
||||
<?php if (!empty($editing['files'])): ?>
|
||||
<?php /* ---- 附件：永远在最后 ---- */ ?>
|
||||
<?php if (!empty($editing['files'])): ?>
|
||||
<section class="note-read-files">
|
||||
<h2 class="note-read-h2">附件</h2>
|
||||
<div class="note-files">
|
||||
<?php foreach ((array)$editing['files'] as $f): ?>
|
||||
<?php $fk = \App\Attachment::kind($f); ?>
|
||||
@@ -171,55 +153,236 @@ if (!$blocks) {
|
||||
<?= e((string)($f['name'] ?? '附件')) ?>
|
||||
</a>
|
||||
<span class="small muted"><?= e(\App\Attachment::sizeWord($f['size'] ?? 0)) ?></span>
|
||||
<button type="button" class="note-file-del" data-note-file-del="<?= (int)$f['id'] ?>"
|
||||
title="删掉这个附件">✕</button>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<p class="empty-hint" id="noteFilesEmpty">还没有附件。</p>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
</article>
|
||||
|
||||
<form method="post" enctype="multipart/form-data"
|
||||
action="<?= e(url('notes/attach_add')) ?>" id="noteAttForm">
|
||||
<?php /* ==================== 共享（v29 第 9 条：选人 + 权限，同资源）====================
|
||||
🔴 只在**作者**视角显示：共享范围是作者的决定，拿到只读的人不该看到名单。
|
||||
交互与资源页完全一致：选人 → 选权限 → 共享；已共享的逐个可「取消共享」。 */ ?>
|
||||
<?php if ($isMine && $canWrite): ?>
|
||||
<div class="card card-pad">
|
||||
<h2 class="cinema-h2">共享
|
||||
<span class="hint">默认只有自己看得到；共享出去给别人看或改</span></h2>
|
||||
|
||||
<form method="post" action="<?= e(url('notes/share')) ?>">
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="id" value="<?= (int)$editing['id'] ?>">
|
||||
<div class="note-att-drop" id="noteAttDrop">
|
||||
<input type="file" name="file[]" id="noteAttInput" multiple
|
||||
accept="image/*,.pdf,.txt,.md,.zip,.doc,.docx,.xls,.xlsx,.ppt,.pptx">
|
||||
<span class="note-att-tip">把文件拖到这里，或<label for="noteAttInput">点这里选文件</label></span>
|
||||
<div class="field">
|
||||
<label>共享给谁</label>
|
||||
<?php
|
||||
$ppName = 'person_id';
|
||||
$ppPeople = $people ?? [];
|
||||
$ppSelected = [];
|
||||
$ppMode = 'single';
|
||||
$ppOpenBtn = '选择要共享给谁';
|
||||
$ppTitle = '共享给谁';
|
||||
$ppEmptyText = '未选择';
|
||||
require __DIR__ . '/../_person_picker.php';
|
||||
?>
|
||||
<span class="tip">你自己本来就有全部权限，不用（也不能）共享给自己。</span>
|
||||
</div>
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-ghost btn-sm" type="submit">上传所选文件</button>
|
||||
<div class="field">
|
||||
<label>权限</label>
|
||||
<select class="select" name="perm">
|
||||
<option value="read">只读</option>
|
||||
<option value="write">可读写</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="btn-row" style="margin-top:0">
|
||||
<button class="btn btn-ok" type="submit">共享</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="card card-pad">
|
||||
<h2 class="cinema-h2">附件</h2>
|
||||
<p class="empty-hint">先「记下来」，保存之后回到这一页就能传附件了。</p>
|
||||
|
||||
<div class="note-share-now">
|
||||
<h3 class="note-read-h2">已共享给</h3>
|
||||
<?php if ($shares): ?>
|
||||
<div class="note-files">
|
||||
<?php foreach ($shares as $s): ?>
|
||||
<div class="note-file">
|
||||
<span class="note-file-ico"><?= e(\App\Note::permWord((string)$s['perm'])) ?></span>
|
||||
<span class="note-file-nm"><?= e((string)$s['name']) ?></span>
|
||||
<form method="post" action="<?= e(url('notes/unshare')) ?>" class="inline-form">
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="id" value="<?= (int)$editing['id'] ?>">
|
||||
<input type="hidden" name="person_id" value="<?= (int)$s['person_id'] ?>">
|
||||
<button type="submit" class="note-file-del" title="取消共享">取消共享</button>
|
||||
</form>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<p class="empty-hint">还没有共享给谁。</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="note-actions">
|
||||
<button class="btn" type="submit"><?= $isEditing ? '保存' : '记下来' ?></button>
|
||||
<a class="btn btn-ghost" href="<?= e(url('notes')) ?>">取消</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<?php if ($isEditing): ?>
|
||||
<?php /* 删附件：全页唯一的一份表单，脚本填 id 后提交（沿用项目既有做法，
|
||||
避免"每行一份 form"那种页面膨胀）。 */ ?>
|
||||
<form method="post" action="<?= e(url('notes/attach_del')) ?>" id="noteFileDelForm" hidden>
|
||||
<?php else: ?>
|
||||
<?php /* ==================== ✏️ 编辑态 ==================== */ ?>
|
||||
<form method="post" action="<?= e(url('notes/save')) ?>" id="noteForm" class="note-form">
|
||||
<?php /* ⚠️ media 地址**不在表单上注入**：`media_url('')` 返回的是默认头像
|
||||
（见 helpers.php 里 `$key === ''` 那一支），拿它当基址会拼出
|
||||
`avatar-default.svgabc123` 这种地址。基址统一由 layout 的
|
||||
`<body data-media-base="media.php?k=">` 提供，脚本读它就行。 */ ?>
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="id" value="">
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
<?php if ($isEditing): ?>
|
||||
<input type="hidden" name="id" value="<?= (int)$editing['id'] ?>">
|
||||
<?php endif; ?>
|
||||
<?php /* 块的真实载荷（由页尾脚本维护） */ ?>
|
||||
<input type="hidden" name="blocks" id="noteBlocks" value="">
|
||||
|
||||
<?php /* 初始块数据：JSON 塞进 <script type="application/json"> 而不是 data-* ——
|
||||
属性里的引号/换行会被 HTML 实体化，读出来还得反转义一次；JSON 块原样读。 */ ?>
|
||||
<script type="application/json" id="noteSeed"><?= json_encode(
|
||||
$blocks,
|
||||
JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP
|
||||
) ?></script>
|
||||
<div class="card card-pad">
|
||||
<div class="field">
|
||||
<label for="noteTitle">标题</label>
|
||||
<input class="input" id="noteTitle" name="title" maxlength="200"
|
||||
value="<?= e((string)($editing['title'] ?? '')) ?>"
|
||||
placeholder="一句话概括（也可以不写，只写正文）" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php /* ---------------- 分块编辑区 ---------------- */ ?>
|
||||
<div class="card card-pad">
|
||||
<div class="note-block-head">
|
||||
<h2 class="cinema-h2">正文</h2>
|
||||
<div class="note-add">
|
||||
<button class="btn btn-ghost btn-sm" type="button" data-add="text">+ 段落</button>
|
||||
<button class="btn btn-ghost btn-sm" type="button" data-add="image">+ 图片</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php /* 🔴 v29 第 7 条：**工具条**（点一下插到光标处）+ 斜线命令提示。
|
||||
工具条按钮与斜线菜单是**同一份命令表**（见 note_editor.js 的 CMDS），
|
||||
避免"按钮能插、斜线插不了"这种两套实现。 */ ?>
|
||||
<div class="note-cmdbar" data-cmdbar>
|
||||
<button type="button" class="cmd" data-cmd="b" title="粗体 **文字**"><b>B</b></button>
|
||||
<button type="button" class="cmd" data-cmd="i" title="斜体 *文字*"><i>I</i></button>
|
||||
<span class="cmd-sep"></span>
|
||||
<button type="button" class="cmd" data-cmd="h2" title="小标题 ## 文字">H</button>
|
||||
<button type="button" class="cmd" data-cmd="ul" title="列表 - 项目">≡</button>
|
||||
<button type="button" class="cmd" data-cmd="quote" title="引用 > 文字">❝</button>
|
||||
<button type="button" class="cmd" data-cmd="code" title="代码 ```"></></button>
|
||||
<button type="button" class="cmd" data-cmd="link" title="链接 [文字](地址)">🔗</button>
|
||||
<span class="cmd-sep"></span>
|
||||
<span class="small muted">行首打 <code>/</code> 也能选命令</span>
|
||||
<label class="note-live">
|
||||
<input type="checkbox" id="noteLivePreview" checked>
|
||||
<span>实时预览</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="noteBlockList" class="note-blocks"></div>
|
||||
|
||||
<?php /* 无 JS 兜底：脚本没跑时用户仍能写一条纯文字笔记 */ ?>
|
||||
<noscript>
|
||||
<div class="field" style="margin-top:10px">
|
||||
<label for="notePlain">正文（纯文本）</label>
|
||||
<textarea class="input" id="notePlain" name="body_plain" rows="8"
|
||||
placeholder="没有启用脚本时，可以在这里写纯文字正文"><?php
|
||||
echo e(implode("\n\n", array_map(
|
||||
static fn($b): string => (string)$b['content'], $blocks)));
|
||||
?></textarea>
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<?php /* 图片上传用的隐藏 file 框（点"+ 图片"时程序化触发） */ ?>
|
||||
<input type="file" id="noteImgInput" accept="image/*" hidden>
|
||||
</div>
|
||||
|
||||
<?php /* ---------------- 标签 ---------------- */ ?>
|
||||
<div class="card card-pad">
|
||||
<div class="field">
|
||||
<label for="noteTags">标签</label>
|
||||
<input class="input" id="noteTags" name="tags" maxlength="300"
|
||||
value="<?= e($tagsStr) ?>"
|
||||
placeholder="用空格分开，如：读书 灵感 待办（可写 # 也可不写）" autocomplete="off">
|
||||
<?php if ($tagSuggest): ?>
|
||||
<div class="note-tags note-tags-suggest">
|
||||
<span class="small muted">用过的：</span>
|
||||
<?php foreach ($tagSuggest as $t): ?>
|
||||
<button type="button" class="note-tag" data-tag="<?= e((string)$t) ?>">
|
||||
#<?= e((string)$t) ?>
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php /* ⚠️ v29：原来的「共享给全家」勾选框**删掉**了 ——
|
||||
共享改成"保存后在阅读态选人 + 选权限"（与资源一致，见第 9 条）。 */ ?>
|
||||
</div>
|
||||
|
||||
<?php /* 🔴 v28 用户第 12 条：「再加上附件上传功能，附件，都放在笔记最下面就行了。」
|
||||
⇒ 附件区放在**整张表单的最下面**。
|
||||
⚠️ 附件要挂在**已存在的笔记**上（attachments.target_id 要真实 id），
|
||||
所以新建时这一区是**禁用并说明**的 —— 保存之后进入编辑态就能传了。 */ ?>
|
||||
<?php if ($isEditing): ?>
|
||||
<div class="card card-pad" id="noteFilesCard">
|
||||
<h2 class="cinema-h2">附件 <span class="hint">放最后，与正文分开</span></h2>
|
||||
|
||||
<?php if (!empty($editing['files'])): ?>
|
||||
<div class="note-files">
|
||||
<?php foreach ((array)$editing['files'] as $f): ?>
|
||||
<?php $fk = \App\Attachment::kind($f); ?>
|
||||
<div class="note-file">
|
||||
<span class="note-file-ico"><?= e(\App\Attachment::kindWord($fk)) ?></span>
|
||||
<a class="note-file-nm" href="<?= e(media_url((string)$f['key'], ['dl' => 1])) ?>">
|
||||
<?= e((string)($f['name'] ?? '附件')) ?>
|
||||
</a>
|
||||
<span class="small muted"><?= e(\App\Attachment::sizeWord($f['size'] ?? 0)) ?></span>
|
||||
<button type="button" class="note-file-del" data-note-file-del="<?= (int)$f['id'] ?>"
|
||||
title="删掉这个附件">✕</button>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<p class="empty-hint" id="noteFilesEmpty">还没有附件。</p>
|
||||
<?php endif; ?>
|
||||
|
||||
<form method="post" enctype="multipart/form-data"
|
||||
action="<?= e(url('notes/attach_add')) ?>" id="noteAttForm">
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="id" value="<?= (int)$editing['id'] ?>">
|
||||
<div class="note-att-drop" id="noteAttDrop">
|
||||
<input type="file" name="file[]" id="noteAttInput" multiple
|
||||
accept="image/*,.pdf,.txt,.md,.zip,.doc,.docx,.xls,.xlsx,.ppt,.pptx">
|
||||
<span class="note-att-tip">把文件拖到这里，或<label for="noteAttInput">点这里选文件</label></span>
|
||||
</div>
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-ghost btn-sm" type="submit">上传所选文件</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="card card-pad">
|
||||
<h2 class="cinema-h2">附件</h2>
|
||||
<p class="empty-hint">先「记下来」，保存之后回到这一页就能传附件了。</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="note-actions">
|
||||
<button class="btn" type="submit"><?= $isEditing ? '保存' : '记下来' ?></button>
|
||||
<?php /* 取消：编辑已有笔记时回它的阅读态；新建时回列表 */ ?>
|
||||
<a class="btn btn-ghost"
|
||||
href="<?= e($isEditing ? url('notes/form', ['id' => (int)$editing['id']]) : url('notes')) ?>">取消</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<?php if ($isEditing): ?>
|
||||
<?php /* 删附件：全页唯一的一份表单，脚本填 id 后提交（沿用项目既有做法，
|
||||
避免"每行一份 form"那种页面膨胀）。 */ ?>
|
||||
<form method="post" action="<?= e(url('notes/attach_del')) ?>" id="noteFileDelForm" hidden>
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="id" value="">
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php /* 初始块数据：JSON 塞进 <script type="application/json"> 而不是 data-* ——
|
||||
属性里的引号/换行会被 HTML 实体化，读出来还得反转义一次；JSON 块原样读。 */ ?>
|
||||
<script type="application/json" id="noteSeed"><?= json_encode(
|
||||
$blocks,
|
||||
JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP
|
||||
) ?></script>
|
||||
<?php endif; ?>
|
||||
@@ -93,7 +93,9 @@ $canWrite = \App\Auth::canWrite();
|
||||
$firstImg = '';
|
||||
foreach ((array)$n['blocks'] as $b) {
|
||||
if ((string)$b['kind'] === 'image' && (string)$b['content'] !== '') {
|
||||
$firstImg = (string)$b['content'];
|
||||
// ⚠️ 图片块内容可能是 `key|50`（v29 第 8 条：可调宽度）。
|
||||
// 取 key 时要把 `|宽度` 去掉，否则拿它当 key 查会 404。
|
||||
$firstImg = trim(explode('|', (string)$b['content'])[0]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -101,8 +103,14 @@ $canWrite = \App\Auth::canWrite();
|
||||
<article class="note-card" data-note="<?= $nid ?>">
|
||||
<header class="note-head">
|
||||
<span class="note-meta">
|
||||
<?php if (!empty($n['is_shared'])): ?>
|
||||
<span class="note-share" title="全家可见">共享</span>
|
||||
<?php
|
||||
/* 🔴 v29 第 9 条：共享状态从"共享/私有"两态改成**按人数**显示 ——
|
||||
共享已升级成"逐人 + 权限"，只说"共享"已经说不清共享给了几个人。
|
||||
$shareN 是路由一次查好的映射（别在循环里再查库）。 */
|
||||
$sN = (int)($shareN[$nid] ?? 0);
|
||||
?>
|
||||
<?php if ($sN > 0): ?>
|
||||
<span class="note-share" title="共享给 <?= $sN ?> 个人">共享 <?= $sN ?></span>
|
||||
<?php else: ?>
|
||||
<span class="note-private" title="只有自己可见">私有</span>
|
||||
<?php endif; ?>
|
||||
@@ -110,7 +118,7 @@ $canWrite = \App\Auth::canWrite();
|
||||
</span>
|
||||
<?php if ($mine && $canWrite): ?>
|
||||
<span class="note-ops">
|
||||
<a class="note-op" href="<?= e(url('notes/form', ['id' => $nid])) ?>"
|
||||
<a class="note-op" href="<?= e(url('notes/form', ['id' => $nid, 'edit' => 1])) ?>"
|
||||
title="编辑这条笔记">改</a>
|
||||
<form method="post" action="<?= e(url('notes/destroy')) ?>" class="inline-form"
|
||||
onsubmit="return confirm('删掉这条笔记？');">
|
||||
@@ -122,6 +130,7 @@ $canWrite = \App\Auth::canWrite();
|
||||
<?php endif; ?>
|
||||
</header>
|
||||
|
||||
<?php /* 🔴 v29 第 8 条：卡片点进去是**阅读态**（不是编辑器） */ ?>
|
||||
<a class="note-hit" href="<?= e(url('notes/form', ['id' => $nid])) ?>">
|
||||
<?php if ($title !== ''): ?>
|
||||
<h3 class="note-title"><?= e($title) ?></h3>
|
||||
@@ -133,7 +142,13 @@ $canWrite = \App\Auth::canWrite();
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
|
||||
<?php /* 图片：等比缩放到卡片宽度，放在摘要下方（用户第 12 条原话） */ ?>
|
||||
<?php /* 🔴 v29 第 6 条：「笔记，首页显示的时候，里面的图片，和行程的类似，
|
||||
把图片按照比例缩放到固定的高度或者宽度，放在下面就行了。」
|
||||
⇒ 卡片下方的缩略图改成**固定高度 + 等比缩放**（`object-fit: cover`
|
||||
会裁切，用户看到的不再是完整的那张图；这里要的是"完整 + 整齐"）。
|
||||
⇒ 用 `object-fit: contain` + 固定高度：图片**完整**显示、
|
||||
高度**整齐划一**，宽的那张两侧留白（比裁掉内容好，也比卡片高矮不一好）。
|
||||
对比"行程"那边的做法（用户说"和行程的类似"）：同一套观感。 */ ?>
|
||||
<?php if ($firstImg !== ''): ?>
|
||||
<div class="note-thumb">
|
||||
<img src="<?= e(media_url($firstImg)) ?>" alt="" loading="lazy" decoding="async">
|
||||
|
||||
@@ -211,7 +211,18 @@ $renderGrid = function (array $list) use ($meId, $canMove): void {
|
||||
data-pm-hint="<?= ($p['roster_source'] ?? '') === 'kin' ? '1' : '' ?>"
|
||||
aria-label="更多操作" title="更多操作">⋯</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div><?php /* /.person-actions */ ?>
|
||||
</div><?php /* /.person
|
||||
🔴🔴 v29 第 3 条「名册页面完全错乱」的**真根因**就在这里：
|
||||
这一行 `</div>`（闭合 `.person`）在 v29 重写平铺列表时**漏掉了**。
|
||||
浏览器遇到"卡片没闭合"会**把下一张卡塞进上一张里**（DOM 修复行为），
|
||||
于是每张卡的宽度被前一张的按钮吃掉 —— 实测第一张的 `.person-main`
|
||||
只剩 24~151px（本该 ~800px），姓名与徽标全被挤碎，
|
||||
整页看起来就是"错乱"。
|
||||
⚠️ 这类"少一个闭合标签"的 bug，`php -l` 与静态断言**全绿**
|
||||
（PHP 语法没错、PHP 的 if/endif 也平衡），只有真机量 DOM 才现形。
|
||||
定位手法：量 `.person` 的 `children`，发现里面**有另一个 `.person`**
|
||||
—— 嵌套的同类元素 = 上一张没收尾。 */ ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php
|
||||
|
||||
Reference in New Issue
Block a user