FamilyBook/templates/notes/index.php

<?php
/**
 * 个人笔记 · 列表（v27 用户 2026-10-07）。
 *
 * 形态参考 **flomo**：一条一张卡片、按时间倒序的流；顶部一个搜索框；
 * 侧边一列标签云（点一下只看这个标签）。
 * 「图文混排」在**卡片里就看得见**（图以缩略图排在文字之下），
 * 不必点进去 —— 笔记是"回看"的东西，回看时应该一眼看到内容。
 *
 * 分块只在**编辑页**体现（卡内可加段/图/清单并上下移）；列表页只做**只读渲染**，
 * 这是刻意的取舍：列表页可编辑就得为每张卡片配一套 JS 状态，与"轻量级"冲突。
 *
 * @param array  $rows      我能看到的笔记（带 blocks / tags / is_mine）
 * @param array  $tagCloud  标签 + 条数
 * @param string $keyword   搜索词
 * @param string $tag       当前筛的标签
 * @param int    $totalAll  一共几条
 * @param bool   $showAll   是否已展开全部
 * @param int    $limit     列表默认条数
 */
$canWrite = \App\Auth::canWrite();
$myPerson = (int)\App\Auth::personId();
?>
<div class="page-head">
  <h1>笔记</h1>
  <span class="sub">共 <?= (int)$totalAll ?> 条</span>
  <div class="actions">
    <?php if ($canWrite): ?>
      <a class="btn" href="<?= e(url('notes/form')) ?>">写笔记</a>
    <?php else: ?>
      <span class="link-quiet">只读账号</span>
    <?php endif; ?>
  </div>
</div>

<div class="note-layout">
  <?php /* ---------------- 左侧：标签云 ---------------- */ ?>
  <aside class="note-side">
    <div class="card card-pad">
      <h2 class="cinema-h2">标签</h2>
      <?php if (!$tagCloud): ?>
        <p class="empty-hint">还没有标签。写笔记时加上 <code>#标签</code> 就会出现在这里。</p>
      <?php else: ?>
        <div class="note-tags">
          <a class="note-tag<?= $tag === '' ? ' is-on' : '' ?>" href="<?= e(url('notes')) ?>">
            全部 <b><?= (int)$totalAll ?></b>
          </a>
          <?php foreach ($tagCloud as $t): ?>
            <a class="note-tag<?= $tag === (string)$t['tag'] ? ' is-on' : '' ?>"
               href="<?= e(url('notes', ['tag' => (string)$t['tag']])) ?>">
              #<?= e((string)$t['tag']) ?> <b><?= (int)$t['n'] ?></b>
            </a>
          <?php endforeach; ?>
        </div>
      <?php endif; ?>
    </div>
  </aside>

  <?php /* ---------------- 右侧：卡片流 ---------------- */ ?>
  <div class="note-main">
    <div class="card card-pad note-search-card">
      <form class="search" method="get" action="index.php">
        <input type="hidden" name="r" value="notes">
        <?php if ($tag !== ''): ?>
          <input type="hidden" name="tag" value="<?= e($tag) ?>">
        <?php endif; ?>
        <label class="sr-only" for="noteKw">搜索笔记</label>
        <input class="input" id="noteKw" name="keyword" value="<?= e($keyword) ?>"
               placeholder="搜标题 / 正文 / 标签，如「读书」" autocomplete="off">
        <button class="btn btn-ghost btn-sm" type="submit">搜索</button>
        <?php if ($keyword !== '' || $tag !== ''): ?>
          <a class="btn btn-ghost btn-sm" href="<?= e(url('notes')) ?>">清除</a>
        <?php endif; ?>
      </form>
    </div>

    <?php if (!$rows): ?>
      <div class="card card-pad">
        <p class="empty-hint">
          <?php if ($keyword !== '' || $tag !== ''): ?>
            没有匹配的笔记。
          <?php elseif ($canWrite): ?>
            还没有笔记。点右上角「写笔记」随手记一条吧。
          <?php else: ?>
            还没有笔记。
          <?php endif; ?>
        </p>
      </div>
    <?php else: ?>
      <?php foreach ($rows as $n): ?>
        <?php $mine = !empty($n['is_mine']); ?>
        <article class="card card-pad note-card">
          <header class="note-head">
            <div class="note-meta">
              <?php /* 头像 + 作者：共享笔记要一眼看出是谁写的 */ ?>
              <img class="note-ava" src="<?= e(avatar_url($n['avatar'] ?? null)) ?>" alt="">
              <span class="note-who"><?= e((string)$n['author_name']) ?></span>
              <?php if (!empty($n['is_shared'])): ?>
                <span class="note-share" title="全家可见">共享</span>
              <?php else: ?>
                <span class="note-private" title="只有自己可见">私有</span>
              <?php endif; ?>
              <?php /* 只显示到分钟、且把 T 换成空格后的形态（全站惯例：不引第三方时间库） */ ?>
              <span class="note-time"><?= e(substr((string)$n['updated_at'], 0, 16)) ?></span>
            </div>
            <?php if ($mine && $canWrite): ?>
              <div class="note-ops">
                <a class="btn btn-ghost btn-sm" href="<?= e(url('notes/form', ['id' => (int)$n['id']])) ?>">编辑</a>
                <form method="post" action="<?= e(url('notes/destroy')) ?>" class="inline-form"
                      onsubmit="return confirm('删掉这条笔记？');">
                  <?= csrf_field() ?>
                  <input type="hidden" name="id" value="<?= (int)$n['id'] ?>">
                  <button class="btn btn-ghost btn-sm" type="submit">删除</button>
                </form>
              </div>
            <?php endif; ?>
          </header>

          <?php if (trim((string)$n['title']) !== ''): ?>
            <h3 class="note-title"><?= e((string)$n['title']) ?></h3>
          <?php endif; ?>

          <?php /* 块渲染：文字段 / 图片 / 清单 —— 「图文混排」就在这儿 */ ?>
          <div class="note-body">
            <?php foreach ((array)$n['blocks'] as $b): ?>
              <?php $kind = (string)$b['kind']; $c = (string)$b['content']; ?>
              <?php if ($kind === 'image'): ?>
                <a class="note-img" href="<?= e(media_url($c)) ?>"
                   data-prev="image" data-prev-src="<?= e(media_url($c)) ?>">
                  <img src="<?= e(media_url($c)) ?>" alt="笔记图片" loading="lazy">
                </a>
              <?php elseif ($kind === 'list'): ?>
                <ul class="note-list">
                  <?php foreach (preg_split('/\R/u', $c) ?: [] as $line): ?>
                    <?php $line = trim((string)$line); ?>
                    <?php if ($line !== ''): ?>
                      <li><?= e($line) ?></li>
                    <?php endif; ?>
                  <?php endforeach; ?>
                </ul>
              <?php else: ?>
                <p class="note-text"><?= nl2br(e($c)) ?></p>
              <?php endif; ?>
            <?php endforeach; ?>
          </div>

          <?php if (!empty($n['tags'])): ?>
            <div class="note-tags note-tags-inline">
              <?php foreach ((array)$n['tags'] as $t): ?>
                <a class="note-tag" href="<?= e(url('notes', ['tag' => (string)$t])) ?>">
                  #<?= e((string)$t) ?>
                </a>
              <?php endforeach; ?>
            </div>
          <?php endif; ?>
        </article>
      <?php endforeach; ?>

      <?php if (!$showAll && (int)$totalAll > count($rows)): ?>
        <div class="note-more">
          <a class="btn btn-ghost" href="<?= e(url('notes', ['all' => 1, 'keyword' => $keyword, 'tag' => $tag])) ?>">
            显示全部 <?= (int)$totalAll ?> 条
          </a>
        </div>
      <?php endif; ?>
    <?php endif; ?>
  </div>
</div>