node-resource-utils 0.0.0-stage → 1.1.8

package/resources/src/components/admin/CountBadge.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { BADGE_COLOR, BADGE_MAX, badgeText } from '@/lib/badges';
+import { fs } from '@/lib/theme';
+
+/**
+ * 侧边栏红色数字徽标。
+ *
+ * 自己画而不是用 antd <Badge>：antd 的 count 是给"叠在头像/图标右上角"设计的，
+ * 默认 20px 高、12px 字，塞进 222px 侧边栏会顶到文字。这里要的是
+ * 「行尾一枚紧凑的红色数字」，尺寸、对齐、以及深色底上的边缘处理都得自己说了算。
+ *
+ * 视觉上做了三件事，让它"跳"但不"脏"：
+ *   - 色值取深一档的砖红（见 badges.ts 的 BADGE_COLOR），白字对比度 5.3:1
+ *   - 一道极淡的内描边：深绿背景上纯红色块边缘会糊进去，白描边把它剥出来
+ *   - 轻微投影：让徽标浮在菜单行之上，而不是贴在同一层
+ */
+export default function CountBadge({
+  value,
+  floating = false,
+  label,
+}: {
+  value: number;
+  /** 折叠态：叠在图标右上角，不占一行宽度 */
+  floating?: boolean;
+  /** 无障碍/悬浮提示里的主语，如「问题反馈」 */
+  label?: string;
+}) {
+  const text = badgeText(value);
+  if (!text) return null;
+
+  const title = label
+    ? `${label}：${value > BADGE_MAX ? `超过 ${BADGE_MAX}` : value} 条待处理`
+    : `${value > BADGE_MAX ? `超过 ${BADGE_MAX}` : value} 条待处理`;
+
+  return (
+    <span
+      title={title}
+      // 端到端走查用的锚点：徽标没有可读文本语义（就是个数字），
+      // 靠 data-badge 才能稳定地"找到侧边栏上那个红点"，而不是去匹配一堆同名数字
+      data-badge={text}
+      style={{
+        position: floating ? 'absolute' : undefined,
+        top: floating ? -6 : undefined,
+        right: floating ? -9 : undefined,
+        flex: floating ? undefined : '0 0 auto',
+        display: 'inline-block',
+        minWidth: floating ? 15 : 18,
+        height: floating ? 15 : 18,
+        padding: floating ? '0 3px' : '0 5px',
+        borderRadius: 9,
+        background: BADGE_COLOR,
+        color: '#FFFFFF',
+        fontSize: floating ? fs(9.5) : fs(11),
+        fontWeight: 600,
+        lineHeight: floating ? '15px' : '18px',
+        textAlign: 'center',
+        fontVariantNumeric: 'tabular-nums',
+        letterSpacing: 0,
+        whiteSpace: 'nowrap',
+        boxShadow: '0 0 0 1px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.32)',
+      }}
+    >
+      {text}
+    </span>
+  );
+}

package/resources/src/components/admin/GlobalSearch.tsx

@@ -0,0 +1,509 @@
+'use client';
+
+/**
+ * 全局搜索（Ctrl K / ⌘K）—— 两层结果：
+ *
+ *   功能：菜单树（`buildSearchEntries`），纯前端匹配，零延迟、零请求
+ *   数据：`/api/search` 在**当前用户权限范围内**搜业务记录（服务端过滤）
+ *
+ * ★ 数据层的权限由服务端把关（菜单可见性 + 部门范围 + 敏感字段），
+ *   前端拿到什么就显示什么 —— 组件里不做任何"要不要过滤"的判断，
+ *   否则一旦漏判就是越权展示。
+ *
+ * ★ 交互约定（和常见后台一致，用户零学习成本）：
+ *   - 顶栏点搜索框 / 按 Ctrl K 打开
+ *   - ↑↓ 选择，Enter 跳转，Esc 关闭；功能在前、数据在后，共用一套键盘导航
+ *   - 目录也能搜：搜到目录会跳到它的第一个页面
+ *
+ * ★ 为什么自己写匹配而不用 antd AutoComplete：
+ *   要「多分词 AND + 别名命中 + 无序子序列兜底 + 命中高亮」这套打分，
+ *   AutoComplete 的 options 模型表达不了，而且弹层位置在顶栏场景下容易错位。
+ */
+
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { useRouter } from 'next/navigation';
+import { Input, Modal, Spin, type InputRef } from 'antd';
+import { DatabaseOutlined, SearchOutlined } from '@ant-design/icons';
+import type { SearchEntry } from '@/lib/menu-service';
+import type { DataHit } from '@/lib/search-data';
+import { iconOf } from './menu-icons';
+import { fs, MILITARY } from '@/lib/theme';
+import { startRouteProgress } from '@/components/feedback/RouteProgress';
+import { trackedFetch } from '@/lib/http';
+
+/** 分词：空白 + 中英文逗号 + 顿号 + 斜杠 */
+function tokenize(q: string): string[] {
+  return q
+    .toLowerCase()
+    .split(/[\s,，、/]+/)
+    .map((t) => t.trim())
+    .filter(Boolean);
+}
+
+/** 无序子序列匹配（兜底：用户只记得名字里几个字） */
+function isSubsequence(text: string, token: string): boolean {
+  let i = 0;
+  for (const ch of text) {
+    if (ch === token[i]) i += 1;
+    if (i >= token.length) return true;
+  }
+  return i >= token.length;
+}
+
+/**
+ * 打分：所有分词都命中才返回分数，任一落空返回 null（淘汰）。
+ * 命中位置越靠前、越是「名字本身」命中，分越高。
+ */
+function scoreOf(entry: SearchEntry, tokens: string[]): number | null {
+  const name = entry.name.toLowerCase();
+  const trail = entry.trail.toLowerCase();
+  const path = entry.path.toLowerCase();
+  const keywords = entry.keywords
+    .toLowerCase()
+    .split(/[\s,，、]+/)
+    .filter(Boolean);
+
+  let total = 0;
+  for (const t of tokens) {
+    let s = 0;
+    if (name.startsWith(t)) s = 100;
+    else if (name.includes(t)) s = 70;
+    else if (keywords.includes(t)) s = 60;
+    else if (keywords.some((k) => k.includes(t))) s = 40;
+    else if (trail.includes(t)) s = 25;
+    else if (path.includes(t)) s = 15;
+    else if (isSubsequence(name, t)) s = 8;
+    if (s === 0) return null;
+    total += s;
+  }
+  // 完整等于菜单名时额外加分，保证精确查询排第一
+  if (tokens.length === 1 && name === tokens[0]) total += 50;
+  return total;
+}
+
+/** 把命中分词在原文里高亮出来 */
+function highlight(text: string, tokens: string[]): ReactNode {
+  if (!tokens.length) return text;
+  const lower = text.toLowerCase();
+  const ranges: [number, number][] = [];
+  for (const t of tokens) {
+    let from = 0;
+    for (;;) {
+      const i = lower.indexOf(t, from);
+      if (i < 0) break;
+      ranges.push([i, i + t.length]);
+      from = i + t.length;
+    }
+  }
+  if (!ranges.length) return text;
+  ranges.sort((a, b) => a[0] - b[0]);
+  const merged: [number, number][] = [];
+  for (const r of ranges) {
+    const last = merged[merged.length - 1];
+    if (last && r[0] <= last[1]) last[1] = Math.max(last[1], r[1]);
+    else merged.push([...r]);
+  }
+  const out: ReactNode[] = [];
+  let pos = 0;
+  merged.forEach(([s, e], i) => {
+    if (s > pos) out.push(text.slice(pos, s));
+    out.push(
+      <mark
+        key={i}
+        style={{
+          background: MILITARY.accentSoft,
+          color: MILITARY.primaryActive,
+          padding: '0 1px',
+          borderRadius: 2,
+        }}
+      >
+        {text.slice(s, e)}
+      </mark>
+    );
+    pos = e;
+  });
+  if (pos < text.length) out.push(text.slice(pos));
+  return out;
+}
+
+/** 空查询时展示的功能数量上限，避免一次渲染几百条 */
+const IDLE_LIMIT = 40;
+
+type Row = { kind: 'function'; entry: SearchEntry } | { kind: 'record'; hit: DataHit };
+
+export default function GlobalSearch({ entries }: { entries: SearchEntry[] }) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [active, setActive] = useState(0);
+  const [hits, setHits] = useState<DataHit[]>([]);
+  const [loadingData, setLoadingData] = useState(false);
+  const inputRef = useRef<InputRef>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const tokens = useMemo(() => tokenize(query), [query]);
+
+  /* --------------------------- 功能（本地） --------------------------- */
+  const funcs = useMemo(() => {
+    if (!tokens.length) return entries.slice(0, IDLE_LIMIT);
+    const scored: { entry: SearchEntry; score: number }[] = [];
+    for (const entry of entries) {
+      const score = scoreOf(entry, tokens);
+      if (score !== null) scored.push({ entry, score });
+    }
+    // 分数降序；同分保持菜单顺序（buildSearchEntries 已按 sort 排好）
+    scored.sort((a, b) => b.score - a.score);
+    return scored.map((s) => s.entry);
+  }, [entries, tokens]);
+
+  /* --------------------------- 数据（远端） --------------------------- */
+  useEffect(() => {
+    if (!open) {
+      setHits([]);
+      return;
+    }
+    const q = query.trim();
+    if (!q) {
+      setHits([]);
+      setLoadingData(false);
+      return;
+    }
+
+    setHits([]); // 立刻清空旧结果，避免"结果和输入框对不上"的错觉
+    setLoadingData(true);
+    const ctrl = new AbortController();
+    const timer = setTimeout(async () => {
+      try {
+        // trackedFetch：搜索本身有自己的小 Spin，但库大/磁盘慢时可能超过 3 秒，
+        // 交给全局兜底再报一次"正在全库检索…"，不会出现转圈转半天没解释
+        const res = await trackedFetch(`/api/search?q=${encodeURIComponent(q)}`, {
+          signal: ctrl.signal,
+        });
+        const json = (await res.json()) as { code?: number; data?: { items?: DataHit[] } };
+        if (!ctrl.signal.aborted) setHits(json.code === 0 ? json.data?.items ?? [] : []);
+      } catch {
+        if (!ctrl.signal.aborted) setHits([]);
+      } finally {
+        if (!ctrl.signal.aborted) setLoadingData(false);
+      }
+    }, 240);
+
+    return () => {
+      clearTimeout(timer);
+      ctrl.abort();
+    };
+  }, [query, open]);
+
+  /* ------------------------- 合并成一列给键盘用 ------------------------- */
+  const rows = useMemo<Row[]>(
+    () => [
+      ...funcs.map((entry) => ({ kind: 'function' as const, entry })),
+      ...hits.map((hit) => ({ kind: 'record' as const, hit })),
+    ],
+    [funcs, hits]
+  );
+
+  // 查询变化 / 打开时，选中项复位到第一条
+  useEffect(() => {
+    setActive(0);
+  }, [tokens, open]);
+
+  // 打开后自动聚焦输入框
+  useEffect(() => {
+    if (open) {
+      const t = setTimeout(() => inputRef.current?.focus(), 50);
+      return () => clearTimeout(t);
+    }
+    setQuery('');
+  }, [open]);
+
+  // Ctrl K / ⌘K 全局开关
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        setOpen((v) => !v);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  // 选中项滚入可视区
+  useEffect(() => {
+    if (!open) return;
+    const el = listRef.current?.querySelector<HTMLElement>('[data-active="1"]');
+    el?.scrollIntoView({ block: 'nearest' });
+  }, [active, open]);
+
+  const go = (row: Row | undefined) => {
+    if (!row) return;
+    setOpen(false);
+    // 先点亮顶部进度条：搜索命中后跳重页面时，不至于"点了没动静"
+    startRouteProgress();
+    router.push(row.kind === 'function' ? row.entry.path : row.hit.link);
+  };
+
+  const onInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActive((i) => (rows.length ? (i + 1) % rows.length : 0));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActive((i) => (rows.length ? (i - 1 + rows.length) % rows.length : 0));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      go(rows[active]);
+    }
+  };
+
+  const isMac =
+    typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
+
+  /** 一行结果（功能 / 数据共用外壳，右侧信息不同） */
+  const renderRow = (row: Row, index: number) => {
+    const isActive = index === active;
+    const name = row.kind === 'function' ? row.entry.name : row.hit.title;
+    const sub =
+      row.kind === 'function'
+        ? [row.entry.trail, row.entry.keywords ? `别名：${row.entry.keywords}` : '']
+            .filter(Boolean)
+            .join(' · ')
+        : [row.hit.entityLabel, row.hit.subtitle].filter(Boolean).join(' · ');
+    const right = row.kind === 'function' ? row.entry.path : '打开记录';
+    const icon = row.kind === 'function' ? iconOf(row.entry.icon) : <DatabaseOutlined />;
+
+    return (
+      <div
+        key={row.kind === 'function' ? row.entry.id : `hit-${row.hit.entityId}-${row.hit.id}`}
+        role="option"
+        aria-selected={isActive}
+        data-testid={row.kind === 'function' ? 'global-search-item' : 'global-search-record'}
+        data-path={row.kind === 'function' ? row.entry.path : row.hit.link}
+        data-entity={row.kind === 'record' ? row.hit.entityId : undefined}
+        data-active={isActive ? '1' : '0'}
+        onMouseEnter={() => setActive(index)}
+        onClick={() => go(row)}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+          padding: '8px 10px',
+          borderRadius: 8,
+          cursor: 'pointer',
+          background: isActive ? MILITARY.soft : 'transparent',
+          border: `1px solid ${isActive ? MILITARY.border : 'transparent'}`,
+        }}
+      >
+        <span
+          style={{
+            width: 28,
+            height: 28,
+            flex: '0 0 28px',
+            borderRadius: 7,
+            display: 'grid',
+            placeItems: 'center',
+            background: isActive ? MILITARY.softStrong : MILITARY.paper,
+            border: `1px solid ${MILITARY.borderSoft}`,
+            color: MILITARY.primary,
+            fontSize: fs(14),
+          }}
+        >
+          {icon}
+        </span>
+        <span style={{ flex: 1, minWidth: 0 }}>
+          <span
+            style={{
+              display: 'block',
+              fontSize: fs(14),
+              color: MILITARY.text,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {highlight(name, tokens)}
+          </span>
+          {sub && (
+            <span
+              style={{
+                display: 'block',
+                fontSize: fs(12),
+                color: MILITARY.textMuted,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {sub}
+            </span>
+          )}
+        </span>
+        <span
+          style={{
+            fontSize: fs(11),
+            color: MILITARY.textMuted,
+            flexShrink: 0,
+            fontFamily:
+              row.kind === 'function' ? 'ui-monospace, SFMono-Regular, Consolas, monospace' : undefined,
+          }}
+        >
+          {right}
+        </span>
+      </div>
+    );
+  };
+
+  const sectionLabel = (text: string, extra?: ReactNode) => (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: '8px 10px 4px',
+        fontSize: fs(11),
+        letterSpacing: 1,
+        color: MILITARY.textMuted,
+      }}
+    >
+      {text}
+      {extra}
+    </div>
+  );
+
+  const nothing = !funcs.length && !hits.length && !loadingData;
+
+  return (
+    <>
+      {/* 顶栏触发器：长得像个搜索框，比一个放大镜图标更好发现 */}
+      <button
+        type="button"
+        data-testid="global-search-trigger"
+        className="header-search-trigger"
+        onClick={() => setOpen(true)}
+        style={{
+          height: 32,
+          minWidth: 210,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          padding: '0 10px',
+          borderRadius: 8,
+          border: `1px solid ${MILITARY.border}`,
+          background: MILITARY.paper,
+          color: MILITARY.textMuted,
+          fontSize: fs(13),
+          cursor: 'pointer',
+        }}
+      >
+        <SearchOutlined style={{ color: MILITARY.textSecondary }} />
+        <span className="header-search-label" style={{ flex: 1, textAlign: 'left' }}>
+          搜索功能与数据…
+        </span>
+        <kbd
+          className="header-search-kbd"
+          style={{
+            fontSize: fs(11),
+            lineHeight: '16px',
+            padding: '0 5px',
+            borderRadius: 4,
+            border: `1px solid ${MILITARY.border}`,
+            background: MILITARY.card,
+            color: MILITARY.textSecondary,
+          }}
+        >
+          {isMac ? '⌘K' : 'Ctrl K'}
+        </kbd>
+      </button>
+
+      <Modal
+        open={open}
+        onCancel={() => setOpen(false)}
+        title={null}
+        footer={null}
+        closable={false}
+        width={580}
+        destroyOnHidden
+        styles={{ body: { padding: 0 } }}
+      >
+        <div style={{ padding: '12px 16px 8px' }}>
+          <Input
+            ref={inputRef}
+            data-testid="global-search-input"
+            allowClear
+            size="large"
+            prefix={<SearchOutlined style={{ color: MILITARY.textMuted }} />}
+            placeholder="搜索功能、页面，以及你有权限查看的数据"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={onInputKeyDown}
+          />
+        </div>
+
+        <div
+          ref={listRef}
+          role="listbox"
+          style={{ maxHeight: 410, overflow: 'auto', padding: '0 8px 8px' }}
+        >
+          {nothing && (
+            <div
+              style={{
+                padding: '28px 16px',
+                textAlign: 'center',
+                color: MILITARY.textMuted,
+                fontSize: fs(13),
+                lineHeight: 1.9,
+              }}
+            >
+              <div style={{ fontSize: fs(22), marginBottom: 4 }}>
+                <SearchOutlined />
+              </div>
+              没有找到「{query.trim()}」相关的功能或数据
+              <div style={{ fontSize: fs(12) }}>换个说法试试，或确认是否有权限查看对应页面</div>
+            </div>
+          )}
+
+          {funcs.length > 0 && sectionLabel(`功能 ${funcs.length}`)}
+          {funcs.map((entry, i) => renderRow({ kind: 'function', entry }, i))}
+
+          {(hits.length > 0 || loadingData) && (
+            <>
+              {sectionLabel(
+                '数据',
+                loadingData ? (
+                  <Spin size="small" />
+                ) : (
+                  <span style={{ letterSpacing: 0 }}>{hits.length} 条</span>
+                )
+              )}
+              {!loadingData && hits.length === 0 && (
+                <div style={{ padding: '4px 10px 8px', fontSize: fs(12), color: MILITARY.textMuted }}>
+                  没有匹配的数据
+                </div>
+              )}
+              {hits.map((hit, j) => renderRow({ kind: 'record', hit }, funcs.length + j))}
+            </>
+          )}
+        </div>
+
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            padding: '8px 16px',
+            borderTop: `1px solid ${MILITARY.borderSoft}`,
+            fontSize: fs(12),
+            color: MILITARY.textMuted,
+          }}
+        >
+          <span>↑↓ 选择 · Enter 打开 · Esc 关闭</span>
+          <span>
+            {tokens.length
+              ? `${funcs.length} 个功能 · ${hits.length} 条数据`
+              : `共 ${entries.length} 个功能`}
+          </span>
+        </div>
+      </Modal>
+    </>
+  );
+}

package/resources/src/components/admin/InboxBell.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Badge, Button, Tooltip } from 'antd';
+import { BellOutlined } from '@ant-design/icons';
+import { startRouteProgress } from '@/components/feedback/RouteProgress';
+import { fs } from '@/lib/theme';
+
+/**
+ * 顶栏铃铛。
+ *
+ * 数字 = 待办数 + 未读消息数，由 `/api/inbox/summary` 提供。
+ * 和侧边栏徽标一样，轮询失败一律静默：提示数字不是业务数据，
+ * 不能因为一次后台请求失败就弹错误。
+ *
+ * 页面里把消息标为已读后会广播 `inbox:changed`，铃铛立即刷新，
+ * 不必等下一次 60 秒轮询。
+ */
+export default function InboxBell({ initialCount }: { initialCount: number }) {
+  const router = useRouter();
+  const [count, setCount] = useState(Math.max(0, initialCount || 0));
+
+  useEffect(() => {
+    setCount(Math.max(0, initialCount || 0));
+  }, [initialCount]);
+
+  useEffect(() => {
+    let alive = true;
+
+    const sync = async () => {
+      try {
+        const res = await fetch('/api/inbox/summary', { cache: 'no-store' });
+        const json = (await res.json()) as { code?: number; data?: { total?: number } };
+        if (alive && json?.code === 0) {
+          setCount(Math.max(0, Number(json.data?.total ?? 0)));
+        }
+      } catch {
+        /* 静默：铃铛数字拉不到就保持旧值 */
+      }
+    };
+
+    const onChanged = () => void sync();
+    const onVisible = () => {
+      if (document.visibilityState === 'visible') void sync();
+    };
+
+    const timer = window.setInterval(onVisible, 60_000);
+    document.addEventListener('visibilitychange', onVisible);
+    window.addEventListener('focus', onVisible);
+    window.addEventListener('inbox:changed', onChanged);
+
+    return () => {
+      alive = false;
+      window.clearInterval(timer);
+      document.removeEventListener('visibilitychange', onVisible);
+      window.removeEventListener('focus', onVisible);
+      window.removeEventListener('inbox:changed', onChanged);
+    };
+  }, []);
+
+  return (
+    <Tooltip title={count > 0 ? `待办与消息（${count}）` : '待办与消息'}>
+      <Badge count={count} overflowCount={99} size="small" offset={[-2, 2]}>
+        <Button
+          type="text"
+          aria-label="待办与消息"
+          data-testid="inbox-bell"
+          icon={<BellOutlined style={{ fontSize: fs(16) }} />}
+          onClick={() => {
+            startRouteProgress();
+            router.push('/inbox');
+          }}
+        />
+      </Badge>
+    </Tooltip>
+  );
+}