dsh-compact-relay 0.3.2 → 0.3.4

package/lib/client.js

@@ -376,6 +376,355 @@ window.__ModuleLoader__.load({
       return theme;
     }
 
+    /**
+     * 跨片段共享的浮层 / 指示灯环小部件（30-indicator 与 50-settings 共用）。
+     *
+     * 为什么单独一个片段：这些几何/材质在「指示灯」和「设置页教学卡片」里各画过一遍，
+     * 以前是两份点坐标/弧线 path/原生线刻度/闪烁 keyframes。放在 15 号片段（按文件名
+     * 排序在 10-runtime 之后、20-format/30-indicator/50-settings 之前），函数声明会
+     * 提升，后面的片段可直接调用；常量在使用点（组件渲染时）早已初始化。
+     */
+
+    /**
+     * 环上比例 → SVG 坐标（viewBox 0 0 20 20，圆心 10,10，半径用 10-runtime 的 RADIUS）。
+     * @param {number} value 0–1 的比例
+     * @returns {[number, number]}
+     */
+    function ringPoint(value) {
+      const angle = value * Math.PI * 2 - Math.PI / 2;
+      return [10 + RADIUS * Math.cos(angle), 10 + RADIUS * Math.sin(angle)];
+    }
+
+    /**
+     * 环上两比例之间的弧线 path（0.5 以上用大弧标志）。
+     * @param {number} from
+     * @param {number} to
+     * @returns {string}
+     */
+    function ringArcPath(from, to) {
+      const [x1, y1] = ringPoint(from);
+      const [x2, y2] = ringPoint(to);
+      const large = to - from > 0.5 ? 1 : 0;
+      return `M ${x1.toFixed(3)} ${y1.toFixed(3)} A ${RADIUS} ${RADIUS} 0 ${large} 1 ${x2.toFixed(3)} ${y2.toFixed(3)}`;
+    }
+
+    /**
+     * DSH 原生自动压缩线的「径向刻度」：穿过环带的一条短线（内 5.6 → 外 9.6）。
+     * 指示灯与设置页教学图用同一套几何，只是描边/属性不同。
+     * @param {number} value 合法的原生阈值比例（0.02–1 之间，调用方先校验）
+     * @returns {{x1:number, y1:number, x2:number, y2:number}}
+     */
+    function nativeTickAt(value) {
+      const angle = value * Math.PI * 2 - Math.PI / 2;
+      const cos = Math.cos(angle);
+      const sin = Math.sin(angle);
+      return { x1: 10 + 5.6 * cos, y1: 10 + 5.6 * sin, x2: 10 + 9.6 * cos, y2: 10 + 9.6 * sin };
+    }
+
+    /** 越过原生自动压缩线后「整环红色闪烁」的 keyframes（指示灯/教学图共用一份）。 */
+    const NATIVE_ALERT_CSS = '@keyframes cr-native-alert { 0%,100% { opacity: 1 } 50% { opacity: 0.15 } } @media (prefers-reduced-motion: reduce) { [data-cr-native-alert] { animation: none !important; opacity: 0.85 !important; } }';
+
+    /**
+     * 浮层外观（菜单 / 悬停卡 / 确认卡 / 交接单面板 / 历史面板 / toast 共用）。
+     * 主题色由 10-runtime 的 detectTheme() 给出（BUG-001：优先 DSH 主题 token）。
+     * @param {object} theme detectTheme() 的返回值
+     * @returns {{background:string, backdropFilter:string, WebkitBackdropFilter:string, border:string, boxShadow:string}}
+     */
+    function panelChrome(theme) {
+      return {
+        background: theme.panelBg,
+        backdropFilter: theme.panelBackdrop,
+        WebkitBackdropFilter: theme.panelBackdrop,
+        border: `1px solid ${theme.panelBorder}`,
+        boxShadow: theme.panelShadow,
+      };
+    }
+
+    /**
+     * 轻量 Markdown 解析（0.3.4 BUG-005）—— 纯函数，零依赖。
+     *
+     * 为什么自己写：交接单详情面板以前把 markdown 原样塞进 `<pre>`，用户在面板里看到的是
+     * `## 目标`/`- xxx`/`**粗体**` 源码。引第三方 markdown 渲染器会增加运行时依赖
+     * （插件只有 peerDependencies、零运行时依赖是硬约束），而 `dangerouslySetInnerHTML`
+     * 又引入 XSS 面。所以这里只解析交接单实际用到的子集，产出**结构化数据**，由客户端
+     * 用 React 文本节点渲染 —— 从不生成 HTML，任何 `<script>` 都只会显示成文字。
+     *
+     * 支持（够用即可，不做完整 CommonMark）：
+     *   - 标题 `#`–`######`（段落里的行首）
+     *   - 段落（连续非空行；保留原始换行）
+     *   - 无序列表 `-` / `*` / `+`
+     *   - 有序列表 `1.` / `1)`（保留起始编号）
+     *   - 围栏代码块 ```（保留语言标记；块内不做行内解析）
+     *   - 分隔线 `---` / `***` / `___`
+     *   - 行内：`**粗体**`、`` `行内代码` ``、反斜杠转义
+     *
+     * 返回值约定（客户端渲染器按此映射 React 节点）：
+     *   blocks: Array<
+     *     | {type:'heading', level:number, segments:Segment[]}
+     *     | {type:'paragraph', segments:Segment[]}
+     *     | {type:'list', ordered:boolean, start:number, items:Segment[][]}
+     *     | {type:'code', lang:string, text:string}
+     *     | {type:'hr'}
+     *   >
+     *   Segment = {type:'text'|'strong'|'code', text:string}
+     */
+
+    const FENCE_RE = /^\s*```\s*([^\s`]*)\s*$/;
+    const HEADING_RE = /^(#{1,6})\s+(.*)$/;
+    const HR_RE = /^\s*(?:-{3,}|\*{3,}|_{3,})\s*$/;
+    const UL_RE = /^\s*[-*+]\s+(.*)$/;
+    const OL_RE = /^\s*(\d+)[.)]\s+(.*)$/;
+
+    /**
+     * 解析行内标记：`**粗体**`、`` `代码` ``、反斜杠转义。
+     * 未闭合的标记按普通文本处理（不吞字符）。
+     * @param {string} text
+     * @returns {{type:'text'|'strong'|'code', text:string}[]}
+     */
+    function parseInlineLite(text) {
+      const source = typeof text === 'string' ? text : String(text ?? '');
+      const segments = [];
+      let buffer = '';
+      const flush = () => {
+        if (buffer.length > 0) {
+          segments.push({ type: 'text', text: buffer });
+          buffer = '';
+        }
+      };
+      let index = 0;
+      while (index < source.length) {
+        const char = source[index];
+        // 反斜杠转义：下一个字符按字面量处理（\* 不开启粗体）。
+        if (char === '\\' && index + 1 < source.length) {
+          buffer += source[index + 1];
+          index += 2;
+          continue;
+        }
+        if (char === '`') {
+          const end = source.indexOf('`', index + 1);
+          if (end === -1) {
+            buffer += char;
+            index += 1;
+            continue;
+          }
+          flush();
+          segments.push({ type: 'code', text: source.slice(index + 1, end) });
+          index = end + 1;
+          continue;
+        }
+        if (char === '*' && source[index + 1] === '*') {
+          const end = source.indexOf('**', index + 2);
+          if (end === -1) {
+            buffer += '**';
+            index += 2;
+            continue;
+          }
+          flush();
+          segments.push({ type: 'strong', text: source.slice(index + 2, end) });
+          index = end + 2;
+          continue;
+        }
+        buffer += char;
+        index += 1;
+      }
+      flush();
+      return segments;
+    }
+
+    /**
+     * 把 markdown 文本解析成块数组；空文本返回 []。
+     * @param {string} text
+     * @returns {object[]}
+     */
+    function parseMarkdownLite(text) {
+      const source = typeof text === 'string' ? text : String(text ?? '');
+      const lines = source.replace(/\r\n?/g, '\n').split('\n');
+      const blocks = [];
+      let index = 0;
+
+      // 连续非空行攒成段落；遇到块级语法先 flush。
+      let paragraph = [];
+      const flushParagraph = () => {
+        if (paragraph.length === 0) return;
+        blocks.push({ type: 'paragraph', segments: parseInlineLite(paragraph.join('\n')) });
+        paragraph = [];
+      };
+
+      while (index < lines.length) {
+        const line = lines[index];
+
+        // 围栏代码块
+        const fence = FENCE_RE.exec(line);
+        if (fence !== null) {
+          flushParagraph();
+          const codeLines = [];
+          index += 1;
+          while (index < lines.length && FENCE_RE.exec(lines[index]) === null) {
+            codeLines.push(lines[index]);
+            index += 1;
+          }
+          // 吃掉收尾围栏（未闭合时到文件尾）
+          if (index < lines.length) index += 1;
+          blocks.push({ type: 'code', lang: fence[1] ?? '', text: codeLines.join('\n') });
+          continue;
+        }
+
+        // 空行：结束段落
+        if (line.trim().length === 0) {
+          flushParagraph();
+          index += 1;
+          continue;
+        }
+
+        // 标题
+        const heading = HEADING_RE.exec(line);
+        if (heading !== null) {
+          flushParagraph();
+          blocks.push({ type: 'heading', level: heading[1].length, segments: parseInlineLite(heading[2]) });
+          index += 1;
+          continue;
+        }
+
+        // 分隔线（注意：`---` 也匹配无序列表语法，必须先判 hr）
+        if (HR_RE.test(line)) {
+          flushParagraph();
+          blocks.push({ type: 'hr' });
+          index += 1;
+          continue;
+        }
+
+        const unordered = UL_RE.exec(line);
+        const ordered = unordered === null ? OL_RE.exec(line) : null;
+        if (unordered !== null || ordered !== null) {
+          flushParagraph();
+          const isOrdered = ordered !== null;
+          const start = isOrdered ? Number(ordered[1]) : 1;
+          const items = [];
+          const itemRe = isOrdered ? OL_RE : UL_RE;
+          while (index < lines.length) {
+            const matched = itemRe.exec(lines[index]);
+            if (matched === null) break;
+            items.push(parseInlineLite(isOrdered ? matched[2] : matched[1]));
+            index += 1;
+          }
+          blocks.push({ type: 'list', ordered: isOrdered, start, items });
+          continue;
+        }
+
+        // 普通段落行（保留换行）
+        paragraph.push(line);
+        index += 1;
+      }
+      flushParagraph();
+      return blocks;
+    }
+
+    /**
+     * 交接单详情面板的轻量 Markdown 渲染（0.3.4 BUG-005）。
+     *
+     * 解析在 core/markdown-lite.js（构建时内联，同一份源码有 node 单测），这里只把
+     * 结构化块映射成 React 节点。全部是 React 文本节点，**从不生成 HTML**，
+     * 因此交接单内容里的 `<script>` 只会显示成文字，没有 XSS 面。
+     */
+    const MARKDOWN_MONO_STYLE = {
+      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+    };
+    const MARKDOWN_INLINE_CODE_STYLE = {
+      ...MARKDOWN_MONO_STYLE,
+      fontSize: 10.5,
+      background: 'rgba(127,127,127,0.16)',
+      borderRadius: 4,
+      padding: '0 3px',
+    };
+    const MARKDOWN_CODE_BLOCK_STYLE = {
+      ...MARKDOWN_MONO_STYLE,
+      margin: '6px 0',
+      padding: '6px 8px',
+      borderRadius: 6,
+      background: 'rgba(127,127,127,0.16)',
+      overflowX: 'auto',
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+      fontSize: 10.5,
+      lineHeight: '15px',
+    };
+
+    /** 行内片段 → React 子节点（文本/粗体/行内代码）。 */
+    function renderInlineLite(segments, keyPrefix) {
+      return segments.map((segment, index) => {
+        const key = `${keyPrefix}-${index}`;
+        if (segment.type === 'strong') return h('strong', { key }, segment.text);
+        if (segment.type === 'code') return h('code', { key, style: MARKDOWN_INLINE_CODE_STYLE }, segment.text);
+        return segment.text;
+      });
+    }
+
+    /**
+     * 把 markdown 文本渲染成 React 节点数组（标题/段落/列表/代码块/分隔线）。
+     * @param {string} text
+     * @returns {object[]}
+     */
+    function renderMarkdownLite(text) {
+      const blocks = parseMarkdownLite(typeof text === 'string' ? text : '');
+      return blocks
+        .map((block, index) => {
+          const key = `md-${index}`;
+          if (block.type === 'heading') {
+            return h(
+              'div',
+              {
+                key,
+                style: {
+                  fontWeight: 600,
+                  fontSize: block.level <= 2 ? 13 : 12,
+                  lineHeight: '17px',
+                  marginTop: index === 0 ? 0 : 10,
+                  marginBottom: 4,
+                },
+              },
+              renderInlineLite(block.segments, `${key}-h`),
+            );
+          }
+          if (block.type === 'paragraph') {
+            return h(
+              'div',
+              { key, style: { margin: '4px 0', whiteSpace: 'pre-wrap', wordBreak: 'break-word' } },
+              renderInlineLite(block.segments, `${key}-p`),
+            );
+          }
+          if (block.type === 'list') {
+            return h(
+              'div',
+              { key, style: { margin: '2px 0 6px' } },
+              block.items.map((item, itemIndex) =>
+                h(
+                  'div',
+                  { key: `${key}-i${itemIndex}`, style: { display: 'flex', gap: 6, alignItems: 'flex-start' } },
+                  h(
+                    'span',
+                    { style: { flex: 'none', minWidth: block.ordered ? 18 : 8, opacity: 0.7 } },
+                    block.ordered ? `${block.start + itemIndex}.` : '•',
+                  ),
+                  h(
+                    'span',
+                    { style: { flex: 1, minWidth: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word' } },
+                    renderInlineLite(item, `${key}-i${itemIndex}-s`),
+                  ),
+                ),
+              ),
+            );
+          }
+          if (block.type === 'code') {
+            return h('pre', { key, style: MARKDOWN_CODE_BLOCK_STYLE }, block.text);
+          }
+          if (block.type === 'hr') {
+            return h('div', { key, style: { borderTop: '1px solid rgba(127,127,127,0.35)', margin: '8px 0' } });
+          }
+          return null;
+        })
+        .filter((node) => node !== null);
+    }
+
     const fmt = (n) => {
       if (n == null) return '—';
       if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M';
@@ -841,16 +1190,7 @@ window.__ModuleLoader__.load({
       const nativeCrossed = nativeValid && ratio > nativeAuto;
       // 断点缺口：0.9 SVG 单位（≈6.4°），折算成比例；段太短时缺口会吃掉整段，就跳过该段。
       const ringGapRatio = 0.9 / CIRC;
-      const ringPoint = (value) => {
-        const angle = value * Math.PI * 2 - Math.PI / 2;
-        return [10 + RADIUS * Math.cos(angle), 10 + RADIUS * Math.sin(angle)];
-      };
-      const ringArcPath = (from, to) => {
-        const [x1, y1] = ringPoint(from);
-        const [x2, y2] = ringPoint(to);
-        const largeArc = to - from > 0.5 ? 1 : 0;
-        return `M ${x1.toFixed(3)} ${y1.toFixed(3)} A ${RADIUS} ${RADIUS} 0 ${largeArc} 1 ${x2.toFixed(3)} ${y2.toFixed(3)}`;
-      };
+      // 点坐标/弧线 path 是共享几何（15-shared.js 的 ringPoint / ringArcPath）。
       const ringNodes = ring.segments
         .map((segment, index) => {
           const trimmed = trimSegment(segment, ringGapRatio, ring.ratio);
@@ -871,14 +1211,11 @@ window.__ModuleLoader__.load({
       // 刻度用一条「穿过环带」的短线（内 5.6 → 外 9.6）+ 一圈主题底色描边，避免和红色分段糊在一起。
       const nativeNodes = [];
       if (nativeValid) {
-        const nativeAngle = nativeAuto * Math.PI * 2 - Math.PI / 2;
-        const nativeCos = Math.cos(nativeAngle);
-        const nativeSin = Math.sin(nativeAngle);
-        const tick = { x1: 10 + 5.6 * nativeCos, y1: 10 + 5.6 * nativeSin, x2: 10 + 9.6 * nativeCos, y2: 10 + 9.6 * nativeSin };
+        const tick = nativeTickAt(nativeAuto);
         // 越过原生压缩线：整环红色闪烁（1s 呼吸）；prefers-reduced-motion 下改为常亮红色（不闪）。
         if (nativeCrossed) {
           nativeNodes.push(
-            h('style', { key: 'native-alert-style' }, '@keyframes cr-native-alert { 0%,100% { opacity: 1 } 50% { opacity: 0.15 } } @media (prefers-reduced-motion: reduce) { [data-cr-native-alert] { animation: none !important; opacity: 0.85 !important; } }'),
+            h('style', { key: 'native-alert-style' }, NATIVE_ALERT_CSS),
             h('circle', {
               key: 'native-alert',
               cx: 10,
@@ -1125,7 +1462,9 @@ window.__ModuleLoader__.load({
 
       // M6：交接单列表（菜单入口）——只读接口，点开可看全文/复制路径。
       // P2-C3/C4：请求带序号 + AbortController；只接受「仍然是当前选中文件」的响应。
-      const loadDocs = useCallback(async () => {
+      // 0.3.4（BUG-006）：列表先取最近 20 份，「加载更多」再把 limit 提到 50；
+      // 端点返回 total，界面据此显示「共 N 份（显示最近 M）」并在无更多时隐藏按钮。
+      const loadDocs = useCallback(async (limit = 20) => {
         setOpen(false);
         setPreview(null);
         closeDiff();
@@ -1141,7 +1480,7 @@ window.__ModuleLoader__.load({
         const reqId = ++docsRequestRef.current;
         setDocs({ loading: true });
         try {
-          const res = await fetch('/api/compact-relay-handoffs?limit=20', {
+          const res = await fetch(`/api/compact-relay-handoffs?limit=${limit}`, {
             cache: 'no-store',
             ...(controller === null ? {} : { signal: controller.signal }),
           });
@@ -1151,7 +1490,9 @@ window.__ModuleLoader__.load({
             setDocs({ error: data && data.message ? String(data.message) : '读取交接单失败' });
             return;
           }
-          setDocs({ items: Array.isArray(data.items) ? data.items : [], selected: null });
+          const items = Array.isArray(data.items) ? data.items : [];
+          const total = typeof data.total === 'number' && Number.isFinite(data.total) ? data.total : items.length;
+          setDocs({ items, total, limit, selected: null });
         } catch (error) {
           if (reqId !== docsRequestRef.current || (error && error.name === 'AbortError')) return;
           setDocs({ error: '读取交接单失败：' + (error && error.message ? error.message : '未知错误') });
@@ -1399,11 +1740,7 @@ window.__ModuleLoader__.load({
                   wordBreak: 'break-word',
                   padding: '6px 9px',
                   borderRadius: 8,
-                  background: theme.panelBg,
-                  backdropFilter: theme.panelBackdrop,
-                  WebkitBackdropFilter: theme.panelBackdrop,
-                  border: `1px solid ${theme.panelBorder}`,
-                  boxShadow: theme.panelShadow,
+                  ...panelChrome(theme),
                   color: theme.panelFg,
                   fontSize: 11,
                   lineHeight: '16px',
@@ -1591,11 +1928,7 @@ window.__ModuleLoader__.load({
                 overflowY: 'auto',
                 padding: 6,
                 borderRadius: 12,
-                background: theme.panelBg,
-                backdropFilter: theme.panelBackdrop,
-                WebkitBackdropFilter: theme.panelBackdrop,
-                border: `1px solid ${theme.panelBorder}`,
-                boxShadow: theme.panelShadow,
+                ...panelChrome(theme),
                 zIndex: 40,
               },
             },
@@ -1702,11 +2035,7 @@ window.__ModuleLoader__.load({
                   maxWidth: 'calc(100vw - 16px)',
                   padding: '10px 12px',
                   borderRadius: 12,
-                  background: theme.panelBg,
-                  backdropFilter: theme.panelBackdrop,
-                  WebkitBackdropFilter: theme.panelBackdrop,
-                  border: `1px solid ${theme.panelBorder}`,
-                  boxShadow: theme.panelShadow,
+                  ...panelChrome(theme),
                   color: theme.panelFg,
                   zIndex: 42,
                 },
@@ -1821,12 +2150,8 @@ window.__ModuleLoader__.load({
                   gap: 8,
                   padding: '10px 12px',
                   borderRadius: 12,
-                  background: theme.panelBg,
-                  backdropFilter: theme.panelBackdrop,
-                  WebkitBackdropFilter: theme.panelBackdrop,
+                  ...panelChrome(theme),
                   color: theme.panelFg,
-                  border: `1px solid ${theme.panelBorder}`,
-                  boxShadow: theme.panelShadow,
                   zIndex: 44,
                 },
               },
@@ -1917,6 +2242,12 @@ window.__ModuleLoader__.load({
                   ),
             );
 
+      // 0.3.4（BUG-006）：total 与当前窗口（20/50），用于列表底部与「加载更多」。
+      const docsItems = docs !== null && Array.isArray(docs.items) ? docs.items : [];
+      const docsTotal =
+        docs !== null && typeof docs.total === 'number' && Number.isFinite(docs.total)
+          ? docs.total
+          : docsItems.length;
       const docsPanel =
         docs === null
           ? null
@@ -1937,12 +2268,8 @@ window.__ModuleLoader__.load({
                   flexDirection: 'column',
                   overflow: 'hidden',
                   borderRadius: 12,
-                  background: theme.panelBg,
-                  backdropFilter: theme.panelBackdrop,
-                  WebkitBackdropFilter: theme.panelBackdrop,
+                  ...panelChrome(theme),
                   color: theme.panelFg,
-                  border: `1px solid ${theme.panelBorder}`,
-                  boxShadow: theme.panelShadow,
                   zIndex: 43,
                 },
               },
@@ -1964,7 +2291,7 @@ window.__ModuleLoader__.load({
                   { style: { flex: 1, minWidth: 0 } },
                   docs.selected !== undefined && docs.selected !== null
                     ? '交接单详情'
-                    : `历史交接单（${Array.isArray(docs.items) ? docs.items.length : 0}）`,
+                    : `历史交接单（${docsTotal}）`,
                 ),
                 h('button', { type: 'button', 'data-cr-docs-close': '1', onClick: closeDocs, style: smallBtnStyle }, '关闭'),
               ),
@@ -1981,7 +2308,7 @@ window.__ModuleLoader__.load({
                           'button',
                           {
                             type: 'button',
-                            onClick: () => setDocs({ items: docs.items, selected: null }),
+                            onClick: () => setDocs((prev) => (prev === null ? null : { ...prev, selected: null })),
                             style: smallBtnStyle,
                           },
                           '← 列表',
@@ -2004,21 +2331,28 @@ window.__ModuleLoader__.load({
                         ),
                       ),
                       h(
-                        'pre',
+                        'div',
                         {
+                          // 0.3.4（BUG-005）：交接单详情从 <pre> 纯文本改成轻量 markdown 渲染。
+                          // 解析器是 core/markdown-lite.js（构建时内联），渲染只产生 React
+                          // 文本节点，不生成 HTML、不引第三方依赖。
                           'data-cr-doc-content': '1',
                           style: {
                             margin: 0,
                             padding: '8px 12px',
                             overflowY: 'auto',
-                            whiteSpace: 'pre-wrap',
+                            overflowX: 'hidden',
                             wordBreak: 'break-word',
                             fontSize: 11,
                             lineHeight: '16px',
                             maxHeight: 'min(50vh, 320px)',
                           },
                         },
-                        docs.contentLoading === true ? '读取中…' : (docs.contentError ?? docs.content ?? ''),
+                        docs.contentLoading === true
+                          ? '读取中…'
+                          : docs.contentError !== undefined && docs.contentError !== null
+                            ? h('div', { style: { color: COLORS.error } }, String(docs.contentError))
+                            : renderMarkdownLite(docs.content ?? ''),
                       ),
                     )
                   : h(
@@ -2026,8 +2360,8 @@ window.__ModuleLoader__.load({
                       { style: { overflowY: 'auto', padding: 4 } },
                       docs.error !== undefined && docs.error !== null
                         ? h('div', { style: { padding: '8px 10px', fontSize: 11, color: COLORS.error } }, String(docs.error))
-                        : Array.isArray(docs.items) && docs.items.length > 0
-                          ? docs.items.map((entry) =>
+                        : docsItems.length > 0
+                          ? [...docsItems.map((entry) =>
                               h(
                                 'button',
                                 {
@@ -2070,7 +2404,38 @@ window.__ModuleLoader__.load({
                                   `${fmtTime(entry.mtime)} · ${Math.max(1, Math.round((Number(entry.size) || 0) / 1024))}KB · ${entry.name}`,
                                 ),
                               ),
-                            )
+                            ),
+                            h(
+                              'div',
+                              {
+                                key: 'docs-footer',
+                                style: {
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  gap: 8,
+                                  padding: '6px 10px',
+                                  borderTop: `1px solid ${theme.panelBorder}`,
+                                  fontSize: 10,
+                                  color: theme.subText,
+                                },
+                              },
+                              h('span', { style: { flex: 1, minWidth: 0 } }, `共 ${docsTotal} 份（显示最近 ${docsItems.length}）`),
+                              docsItems.length < docsTotal && docsItems.length < 50
+                                ? h(
+                                    'button',
+                                    {
+                                      type: 'button',
+                                      'data-cr-docs-more': '1',
+                                      onClick: () => {
+                                        void loadDocs(50);
+                                      },
+                                      style: smallBtnStyle,
+                                    },
+                                    '加载更多',
+                                  )
+                                : null,
+                            ),
+                          ]
                           : h(
                               'div',
                               { style: { padding: '10px 12px', fontSize: 11, color: theme.subText } },
@@ -2106,12 +2471,8 @@ window.__ModuleLoader__.load({
                   flexDirection: 'column',
                   overflow: 'hidden',
                   borderRadius: 12,
-                  background: theme.panelBg,
-                  backdropFilter: theme.panelBackdrop,
-                  WebkitBackdropFilter: theme.panelBackdrop,
+                  ...panelChrome(theme),
                   color: theme.panelFg,
-                  border: `1px solid ${theme.panelBorder}`,
-                  boxShadow: theme.panelShadow,
                   zIndex: 43,
                 },
               },
@@ -2208,16 +2569,12 @@ window.__ModuleLoader__.load({
                   textAlign: 'left',
                   padding: '8px 12px',
                   borderRadius: 10,
-                  background: theme.panelBg,
-                  backdropFilter: theme.panelBackdrop,
-                  WebkitBackdropFilter: theme.panelBackdrop,
+                  ...panelChrome(theme),
                   color: theme.panelFg,
-                  border: `1px solid ${theme.panelBorder}`,
                   borderLeft: `3px solid ${/失败|错误|无法|没有可|不满足|拒绝|未知/.test(toastText) ? COLORS.ringAdviseHandoff : '#2fb344'}`,
                   fontSize: 12,
                   lineHeight: '18px',
                   zIndex: 41,
-                  boxShadow: theme.panelShadow,
                   display: 'flex',
                   alignItems: 'center',
                   gap: 8,
@@ -2232,16 +2589,7 @@ window.__ModuleLoader__.load({
                       type: 'button',
                       'data-cr-toast-cancel': '1',
                       onClick: cancelRun,
-                      style: {
-                        flex: 'none',
-                        border: `1px solid ${theme.panelBorder}`,
-                        borderRadius: 6,
-                        padding: '2px 8px',
-                        fontSize: 11,
-                        cursor: 'pointer',
-                        background: 'transparent',
-                        color: theme.panelFg,
-                      },
+                      style: { ...smallBtnStyle, flex: 'none' },
                     },
                     '取消',
                   )
@@ -2958,16 +3306,7 @@ window.__ModuleLoader__.load({
             // BUG-009（2026-10-20）：每个示例环单独构造参数——比例按各自语义取、hint 用 null；
             // 不再共用 minRatio + 0.12 的假断点（那会让 5 个环的断点全挤在同一处、颜色也对不上）。
             const demoRatio = (ratio, hintRatio) => ringSegments(ratio, form.thresholds.compactRatio, form.thresholds.handoffRatio, hintRatio ?? null);
-            const point = (value) => {
-              const angle = value * Math.PI * 2 - Math.PI / 2;
-              return [10 + 8 * Math.cos(angle), 10 + 8 * Math.sin(angle)];
-            };
-            const arcPath = (from, to) => {
-              const [x1, y1] = point(from);
-              const [x2, y2] = point(to);
-              const large = to - from > 0.5 ? 1 : 0;
-              return `M ${x1.toFixed(3)} ${y1.toFixed(3)} A 8 8 0 ${large} 1 ${x2.toFixed(3)} ${y2.toFixed(3)}`;
-            };
+            // 点坐标/弧线 path 是共享几何（15-shared.js 的 ringPoint / ringArcPath）。
             const colorOf = (key) =>
               key === 'stage' ? previewLight.stage : key === 'compact' ? previewLight.compact : key === 'handoff' ? previewLight.handoff : previewLight.idle;
             const demoRing = (ring, options = {}) => {
@@ -2977,18 +3316,7 @@ window.__ModuleLoader__.load({
               // 原生自动压缩线：和指示灯一样用「径向紫色刻度 + 底色描边」；越过线后整环红色闪烁。
               const nativeAt =
                 typeof options.nativeAt === 'number' && options.nativeAt > 0.02 && options.nativeAt < 1 ? options.nativeAt : null;
-              const pointAt = (value, radius) => {
-                const angle = value * Math.PI * 2 - Math.PI / 2;
-                return [10 + radius * Math.cos(angle), 10 + radius * Math.sin(angle)];
-              };
-              const nativeTick =
-                nativeAt === null
-                  ? null
-                  : (() => {
-                      const [x1, y1] = pointAt(nativeAt, 5.6);
-                      const [x2, y2] = pointAt(nativeAt, 9.6);
-                      return { x1, y1, x2, y2 };
-                    })();
+              const nativeTick = nativeAt === null ? null : nativeTickAt(nativeAt);
               const nativeCrossed = nativeAt !== null && ring.ratio > nativeAt + 1e-9;
               return h(
                 'svg',
@@ -3001,17 +3329,17 @@ window.__ModuleLoader__.load({
                     const from = segment.from <= 1e-9 ? segment.from : segment.from + gap;
                     const to = Math.abs(segment.to - ring.ratio) < 1e-9 ? segment.to : segment.to - gap;
                     if (to - from <= 0.001) return null;
-                    return h('path', { key: index, d: arcPath(from, to), fill: 'none', stroke: colorOf(segment.color), strokeWidth: 2, strokeLinecap: 'round', 'data-cr-demo': segment.color });
+                    return h('path', { key: index, d: ringArcPath(from, to), fill: 'none', stroke: colorOf(segment.color), strokeWidth: 2, strokeLinecap: 'round', 'data-cr-demo': segment.color });
                   })
                   .filter((node) => node !== null),
                 // 断点缺口用「背景色小段」强调一下（教学图里看得清）
                 ...gaps.map((at, index) =>
-                  h('path', { key: `b${index}`, d: arcPath(at - 0.01, at + 0.01), fill: 'none', stroke: 'var(--dsw-alias-bg-base, #fff)', strokeWidth: 3, 'data-cr-demo-gap': String(at) }),
+                  h('path', { key: `b${index}`, d: ringArcPath(at - 0.01, at + 0.01), fill: 'none', stroke: 'var(--dsw-alias-bg-base, #fff)', strokeWidth: 3, 'data-cr-demo-gap': String(at) }),
                 ),
                 // 越过原生压缩线：整环红色闪烁（教学图里也演示出来）。
                 ...(nativeCrossed
                   ? [
-                      h('style', { key: 'native-alert-style' }, '@keyframes cr-native-alert { 0%,100% { opacity: 1 } 50% { opacity: 0.15 } } @media (prefers-reduced-motion: reduce) { [data-cr-native-alert] { animation: none !important; opacity: 0.85 !important; } }'),
+                      h('style', { key: 'native-alert-style' }, NATIVE_ALERT_CSS),
                       h('circle', {
                         key: 'native-alert',
                         cx: 10,