@code2rich/jpage 1.5.0 → 1.5.2

package/public/css/style.css

@@ -236,7 +236,10 @@ html.light .theme-toggle .icon-sun { display: block; }
   color: #fff;
   border-color: var(--primary);
 }
-.btn-copy-link { color: var(--primary); border-color: var(--primary); }
+/* 图标按钮（btn-small 内仅放 SVG）：方形、与星标/更多按钮视觉一致 */
+.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; color: var(--text-secondary); }
+.btn-icon svg { width: 16px; height: 16px; }
+.btn-copy-link:hover { color: var(--primary); }
 .btn-copy-link:hover { background: var(--primary); color: #fff; }
 
 .auth-message {
@@ -1350,6 +1353,10 @@ html:not(.light) {
 .skeleton-w60 { width: 60%; }
 .skeleton-w40 { width: 40%; }
 
+.skeleton-card { display: block; padding: 0; }
+.skeleton-card-thumb { height: 160px; margin-bottom: 12px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, var(--border) 25%, rgba(0,0,0,.06) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
+.skeleton-card .skeleton-line { margin: 0 14px 8px; }
+
 @keyframes shimmer {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
@@ -2317,6 +2324,85 @@ html:not(.light) {
   font-weight: 600;
 }
 
+/* CLI tab：渲染后的 Markdown 文档（标题/段落/列表/代码块/表格） */
+.mcp-cli-doc {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text);
+}
+.mcp-cli-doc h1 {
+  font-size: 18px;
+  margin: 0 0 12px;
+}
+.mcp-cli-doc h2 {
+  font-size: 14px;
+  margin: 18px 0 8px;
+  color: var(--text);
+}
+.mcp-cli-doc p {
+  margin: 0 0 10px;
+}
+.mcp-cli-doc ul,
+.mcp-cli-doc ol {
+  margin: 0 0 10px;
+  padding-left: 20px;
+}
+.mcp-cli-doc li {
+  margin-bottom: 4px;
+}
+.mcp-cli-doc blockquote {
+  margin: 0 0 10px;
+  padding: 8px 12px;
+  border-left: 3px solid var(--primary);
+  background: var(--bg);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  color: var(--text-secondary);
+}
+.mcp-cli-doc blockquote p {
+  margin: 0;
+}
+.mcp-cli-doc code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  background: var(--bg);
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+/* 代码块（非行内）复用 .mcp-config-code 的样式，保持视觉一致 */
+.mcp-cli-doc pre {
+  background: var(--bg);
+  border-radius: var(--radius-sm);
+  padding: 12px 14px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0 0 10px;
+  overflow-x: auto;
+}
+.mcp-cli-doc pre code {
+  background: none;
+  padding: 0;
+}
+.mcp-cli-doc table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0 0 12px;
+  font-size: 12px;
+}
+.mcp-cli-doc th,
+.mcp-cli-doc td {
+  border: 1px solid var(--border);
+  padding: 6px 10px;
+  text-align: left;
+  vertical-align: top;
+}
+.mcp-cli-doc th {
+  background: var(--bg);
+  font-weight: 600;
+}
+
 html:not(.light) {
   .mcp-status-on {
     background: rgba(22, 163, 74, 0.15);
@@ -2716,6 +2802,43 @@ html:not(.light) {
   .ct-card-thumb { background: linear-gradient(135deg, #1e293b, #334155); }
 }
 
+/* --- 文件列表视图切换 / 卡片视图 --- */
+.view-toggle { display: flex; gap: 2px; margin-left: auto; background: var(--bg-secondary, #f1f5f9); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
+.view-toggle-btn { min-width: 30px; height: 28px; padding: 0 10px; border: none; border-radius: 999px; background: transparent; color: var(--text-secondary); font-size: 16px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; display: inline-flex; align-items: center; justify-content: center; }
+.view-toggle-btn:hover { color: var(--text); }
+.view-toggle-btn.active { background: var(--card); color: var(--primary); box-shadow: 0 1px 3px var(--shadow); }
+
+.file-list.view-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
+
+.file-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px; cursor: pointer; transition: box-shadow .2s, border-color .2s; display: flex; flex-direction: column; gap: 8px; }
+.file-card:hover { box-shadow: 0 2px 8px var(--shadow); border-color: var(--primary); }
+.file-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
+.file-card-thumb { height: 160px; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--bg-secondary, #f1f5f9), var(--border)); margin: -14px -14px 8px; border-radius: 6px 6px 0 0; }
+.file-card-thumb-wrap { width: 1024px; height: 640px; transform: scale(0.25); transform-origin: top left; pointer-events: none; opacity: 0; transition: opacity .25s; }
+.file-card-thumb-wrap.loaded { opacity: 1; }
+.file-card-thumb-iframe { width: 100%; height: 100%; border: none; background: #fff; }
+.file-card-thumb-loading { position: absolute; inset: 0; background: linear-gradient(135deg, var(--bg-secondary, #f1f5f9), var(--border)); animation: ct-thumb-pulse 1.5s ease-in-out infinite; }
+.file-card-icon-btn { position: absolute; top: 6px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--text-secondary); font-size: 14px; cursor: pointer; z-index: 2; transition: background .15s, color .15s; }
+.file-card-icon-btn svg { width: 15px; height: 15px; }
+.file-card-star { right: 6px; } /* 星标靠最右 */
+.file-card-copy { right: 40px; } /* 复制链接在星标左侧（28 宽 + 6 间距 + 6 边距）*/
+.file-card-star.starred { color: #f59e0b; }
+.file-card-icon-btn:hover { background: #fff; color: var(--text); }
+.file-card-star.starred:hover { color: #f59e0b; }
+.file-card-name { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; word-break: break-all; }
+.file-card-badges { display: flex; flex-wrap: wrap; gap: 4px; }
+.file-card-badges .file-badge { font-size: 10px; padding: 1px 6px; line-height: 1.5; }
+.file-card-footer { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-secondary); margin-top: auto; }
+html:not(.light) {
+  .file-card-thumb { background: linear-gradient(135deg, #1e293b, #334155); }
+  .file-card-icon-btn { background: rgba(30,41,59,.85); color: #94a3b8; }
+  .file-card-icon-btn:hover { background: #334155; color: #e2e8f0; }
+  .file-card-star.starred { color: #fbbf24; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .file-card-thumb-loading { animation: none; }
+}
+
 /* --- 落地页 --- */
 .landing-page { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
 .landing-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; transition: background .3s, border-color .3s, box-shadow .3s; border-bottom: 1px solid transparent; }
@@ -2823,17 +2946,21 @@ html:not(.light) {
 .ver:nth-child(3):hover .ver-dot { background: #06b6d4; box-shadow: 0 0 18px rgba(6,182,212,.5); }
 .ver:nth-child(4) .ver-dot { border-color: #f59e0b; }
 .ver:nth-child(4):hover .ver-dot { background: #f59e0b; box-shadow: 0 0 18px rgba(245,158,11,.5); }
+.ver:nth-child(5) .ver-dot { border-color: #10b981; }
+.ver:nth-child(5):hover .ver-dot { background: #10b981; box-shadow: 0 0 18px rgba(16,185,129,.5); }
 .ver-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px 28px 24px; backdrop-filter: blur(8px); transition: all .4s; }
 .ver:hover .ver-card { border-color: var(--primary); box-shadow: var(--glow); }
 .ver:nth-child(2):hover .ver-card { border-color: #8b5cf6; box-shadow: 0 0 24px rgba(139,92,246,.2); }
 .ver:nth-child(3):hover .ver-card { border-color: #06b6d4; box-shadow: 0 0 24px rgba(6,182,212,.2); }
 .ver:nth-child(4):hover .ver-card { border-color: #f59e0b; box-shadow: 0 0 24px rgba(245,158,11,.2); }
+.ver:nth-child(5):hover .ver-card { border-color: #10b981; box-shadow: 0 0 24px rgba(16,185,129,.2); }
 .ver-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
 .ver-num { font-family: ui-monospace, "SF Mono", monospace; font-size: 13px; font-weight: 700; letter-spacing: 1px; padding: 3px 10px; border-radius: 6px; }
 .ver:nth-child(1) .ver-num { color: var(--primary); background: rgba(99,102,241,.12); }
 .ver:nth-child(2) .ver-num { color: #8b5cf6; background: rgba(139,92,246,.10); }
 .ver:nth-child(3) .ver-num { color: #06b6d4; background: rgba(6,182,212,.10); }
 .ver:nth-child(4) .ver-num { color: #f59e0b; background: rgba(245,158,11,.10); }
+.ver:nth-child(5) .ver-num { color: #10b981; background: rgba(16,185,129,.10); }
 .ver-date { font-family: ui-monospace, "SF Mono", monospace; font-size: 12px; color: var(--text-secondary); }
 .ver-title { font-size: 20px; font-weight: 700; flex: 1; }
 .ver-theme { font-size: 13px; color: var(--text-secondary); font-style: italic; padding: 2px 10px; border-radius: 4px; background: rgba(255,255,255,.04); }

package/public/index.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="即页，拖入 HTML 或 Markdown 文件，即刻获得在线预览页面。">
 <title>即页 — 拖入文件，即刻成页</title>
-<link rel="stylesheet" href="/css/style.css?v=1.5.0">
+<link rel="stylesheet" href="/css/style.css?v=1.6.2">
 </head>
 <body>
 <div id="app"></div>
@@ -52,7 +52,7 @@
   <section class="landing-sec" id="versions">
     <div class="landing-sec-inner">
       <div class="landing-sec-tag">Version History</div>
-      <h2 class="landing-sec-title">四次进化，四个问题的答案</h2>
+      <h2 class="landing-sec-title">五次进化，五个问题的答案</h2>
       <div class="landing-versions">
         <div class="ver">
           <div class="ver-dot"></div>
@@ -135,6 +135,27 @@
             </div>
           </div>
         </div>
+        <div class="ver">
+          <div class="ver-dot"></div>
+          <div class="ver-card">
+            <div class="ver-head">
+              <span class="ver-num">V1.5</span>
+              <span class="ver-date">2026-06-19</span>
+              <span class="ver-title">双客户端 + AI 演示 + 卡片视图</span>
+              <span class="ver-theme">「快速、多样、直观地发布」</span>
+            </div>
+            <p class="ver-desc">jpage CLI 成为与 MCP 并列的第二客户端入口——大文件 multipart 流式上传，告别 base64。新增 jpage-presentation Skill，AI 一句话生成 reveal.js 幻灯片。文件列表卡片视图用 iframe 实时缩略图，所见即所得。</p>
+            <div class="ver-highlights">
+              <div class="hl"><span class="hl-icon">⌨️</span>jpage CLI（11 命令 · npm 包）</div>
+              <div class="hl"><span class="hl-icon">🎞️</span>jpage-presentation 幻灯片 Skill</div>
+              <div class="hl"><span class="hl-icon">🃏</span>卡片视图 iframe 实时缩略图</div>
+              <div class="hl"><span class="hl-icon">🎨</span>reveal.js 4 主题（商务/学术/创意/极简）</div>
+              <div class="hl"><span class="hl-icon">🔗</span>复制链接改为图标按钮</div>
+              <div class="hl"><span class="hl-icon">⚡</span>multipart 流式上传（CLI）</div>
+              <div class="hl"><span class="hl-icon">🛠️</span>双客户端入口拆分 + 缓存刷新修复</div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>
@@ -268,6 +289,10 @@ Skills 管理
 <button type="button" class="settings-menu-item" role="menuitem" id="menu-item-mcp">
 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
 MCP 配置
+</button>
+<button type="button" class="settings-menu-item" role="menuitem" id="menu-item-cli">
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
+CLI 工具
 </button>
 		<div class="settings-menu-divider" role="separator"></div>
 	<button type="button" class="settings-menu-item" role="menuitem" id="menu-item-tokens">
@@ -350,6 +375,10 @@ MCP 配置
 <div class="filter-dropdown-menu" id="category-filter-menu"></div>
 </div>
 </div>
+<div class="view-toggle" role="tablist" aria-label="展示形式">
+<button type="button" class="view-toggle-btn active" data-view="list" role="tab" title="列表视图" aria-label="列表视图">≡</button>
+<button type="button" class="view-toggle-btn" data-view="card" role="tab" title="卡片视图" aria-label="卡片视图">▦</button>
+</div>
 </div>
 <div class="file-list" id="file-list" aria-busy="false"></div>
 <div class="empty-state" id="empty-state" style="display:none">
@@ -518,6 +547,25 @@ MCP 配置
 </div>
 </div>
 
+<div class="modal-backdrop" id="cli-config-modal" hidden aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="cli-config-title">
+<div class="modal-panel">
+<div class="modal-header">
+<h2 id="cli-config-title">jpage CLI</h2>
+<button type="button" class="btn btn-small modal-close" id="cli-config-close" aria-label="关闭">×</button>
+</div>
+<div class="modal-body">
+<p class="mcp-config-hint"><code>jpage</code> 是即页的命令行工具，与 MCP 是并列的两个客户端入口（都架在同一套 REST API 上）。有 Bash 的场景（Claude Code、脚本、CI）用 CLI 上传更快更省。</p>
+<div class="mcp-config-block">
+<button type="button" class="btn btn-small mcp-copy-btn" id="cli-copy-guide">复制文档</button>
+<div class="mcp-cli-doc cli-detail" id="cli-detail">加载中…</div>
+</div>
+</div>
+<div class="modal-footer">
+<button type="button" class="btn btn-small" id="cli-config-dismiss">关闭</button>
+</div>
+</div>
+</div>
+
 <!-- Skills 列表弹窗 -->
 <div class="modal-backdrop" id="skills-list-modal" hidden aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="skills-list-title">
 <div class="modal-panel modal-panel-wide">
@@ -850,6 +898,6 @@ MCP 配置
 </div>
 </div>
 
-<script type="module" src="/js/app.js?v=1.4.1"></script>
+<script type="module" src="/js/app.js?v=1.5.3"></script>
 </body>
 </html>

package/public/js/app.js

@@ -5,7 +5,6 @@
 
 import { api } from './api.js';
 import { dialogModal } from './components/dialog.js';
-import { toast } from './components/toast.js';
 import { initTheme, setupThemeToggle } from './theme.js';
 
 const state = {
@@ -32,10 +31,13 @@ function navigate(path) {
 }
 
 // 动态加载各路由模块（esbuild 据此做代码分割，产出独立 chunk）
-async function loadHome() { const m = await import('./pages/home.js'); return m.renderHome; }
-async function loadLogin() { const m = await import('./pages/login.js'); return m.renderLogin; }
-async function loadLanding() { const m = await import('./pages/landing.js'); return m.renderLanding; }
-async function loadPreview() { const m = await import('./pages/preview.js'); return m.renderPreview; }
+// 动态 import 带字面量版本串：发版时连同 index.html 里 app.js 的 ?v= 一起改，
+// 让浏览器在开发模式（直接服务源文件、无内容哈希文件名）下也重新拉取各页面 chunk，
+// 绕过 immutable 长缓存。字面量（非模板）能被 esbuild 正确分割。
+async function loadHome() { const m = await import('./pages/home.js?v=1.5.2'); return m.renderHome; }
+async function loadLogin() { const m = await import('./pages/login.js?v=1.5.2'); return m.renderLogin; }
+async function loadLanding() { const m = await import('./pages/landing.js?v=1.5.2'); return m.renderLanding; }
+async function loadPreview() { const m = await import('./pages/preview.js?v=1.5.2'); return m.renderPreview; }
 
 function route() {
   const hash = location.hash.replace('#', '') || '/';
@@ -79,7 +81,7 @@ function route() {
   } else if (hash === '/register') {
     loadLogin().then((renderLogin) => { renderLogin(appEl, 'register'); setupThemeToggle(appEl); });
   } else {
-    loadLanding().then((renderLanding) => { renderLanding(appEl, null); setupThemeToggle(appEl); });
+    loadLanding().then((renderLanding) => { renderLanding(appEl); setupThemeToggle(appEl); });
   }
 }
 

package/public/js/pages/content-templates.js

@@ -1,6 +1,6 @@
 // 内容模板市场：浏览、上传、详情
 
-import { api, API_BASE } from '../api.js';
+import { api } from '../api.js';
 import { toast } from '../components/toast.js';
 import { dialogModal } from '../components/dialog.js';
 import { escapeHtml, relativeTime, openModal, closeModal } from '../utils.js';

package/public/js/pages/home.js

@@ -16,9 +16,63 @@ let allCategories = [];
 const selectedFileIds = new Set();
 let lastCheckedIndex = -1;
 let skillModalCurrent = null;
-const allTemplates = [];
 let searchResults = null;
 
+// ---------- 视图模式（列表 / 卡片） ----------
+const FILE_VIEW_KEY = 'jpage-file-view';
+let viewMode = (() => { try { return localStorage.getItem(FILE_VIEW_KEY) === 'card' ? 'card' : 'list'; } catch { return 'list'; } })();
+function setViewMode(mode) {
+  viewMode = mode;
+  try { localStorage.setItem(FILE_VIEW_KEY, mode); } catch {}
+}
+
+// 卡片缩略图懒加载管线（镜像 content-templates.js 的 thumbObserver：rootMargin 预加载 + 最多 3 并发）
+// 注意：不能用 file-id Set 去重——翻页/筛选时 list.innerHTML='' 会销毁并重建卡片 DOM，
+// 新卡片是全新元素，必须重新挂 iframe（会命中浏览器/渲染缓存，开销小）。
+// 去重改为按「该卡片是否已有 iframe」判断，避免切回已访问过的页时缩略图卡在灰色占位。
+let cardThumbObserver = null;
+let cardThumbActive = 0;
+const CARD_THUMB_MAX = 3;
+const cardThumbQueue = [];
+function ensureCardThumbObserver() {
+  if (cardThumbObserver) return cardThumbObserver;
+  cardThumbObserver = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (!entry.isIntersecting) return;
+      const card = entry.target;
+      cardThumbObserver.unobserve(card);
+      enqueueCardThumb(card);
+    });
+  }, { rootMargin: '200px' });
+  return cardThumbObserver;
+}
+function enqueueCardThumb(card) {
+  if (cardThumbActive < CARD_THUMB_MAX) {
+    cardThumbActive++;
+    loadCardThumb(card).finally(() => {
+      cardThumbActive--;
+      if (cardThumbQueue.length) enqueueCardThumb(cardThumbQueue.shift());
+    });
+  } else {
+    cardThumbQueue.push(card);
+  }
+}
+// iframe.src 直接指向已有的 /api/files/:id/render —— HTML / Markdown / ZIP bundle 入口页均可渲染；
+// 同源 iframe 默认携带 session cookie，用户自己的私有文件也能正常加载（loadFileWithPrivacy 放行 uploaded_by === userId）。
+function loadCardThumb(card) {
+  const thumb = card.querySelector('.file-card-thumb');
+  // 已有 iframe（正在加载或已加载）则跳过，防止同一卡片重复挂载
+  if (!thumb || thumb.querySelector('.file-card-thumb-iframe')) return Promise.resolve();
+  thumb.innerHTML = '<div class="file-card-thumb-wrap"><iframe class="file-card-thumb-iframe" loading="lazy" title="预览"></iframe></div>';
+  const wrap = thumb.querySelector('.file-card-thumb-wrap');
+  const iframe = thumb.querySelector('.file-card-thumb-iframe');
+  return new Promise(resolve => {
+    iframe.addEventListener('load', () => { wrap.classList.add('loaded'); resolve(); }, { once: true });
+    iframe.addEventListener('error', () => resolve(), { once: true });
+    iframe.src = API_BASE + '/api/files/' + card.dataset.fileId + '/render';
+  });
+}
+
 // ---------- Home Page ----------
 function renderHome(container) {
   const tmpl = document.getElementById('home-template');
@@ -76,6 +130,7 @@ function renderHome(container) {
 
   setupUpload(container);
   setupFileFilter(container);
+  setupViewToggle(container);
   loadTagsAndCategories(container);
   loadFiles(container);
   setupSkillModal();
@@ -154,6 +209,11 @@ function renderHome(container) {
       settingsBtn.setAttribute('aria-expanded', 'false');
       openMcpConfigModal();
     });
+    settingsDropdown.querySelector('#menu-item-cli').addEventListener('click', () => {
+      settingsDropdown.classList.remove('open');
+      settingsBtn.setAttribute('aria-expanded', 'false');
+      openCliConfigModal();
+    });
     settingsDropdown.querySelector('#menu-item-tokens')?.addEventListener('click', () => {
       settingsDropdown.classList.remove('open');
       settingsBtn.setAttribute('aria-expanded', 'false');
@@ -306,7 +366,7 @@ async function loadFiles(container, page) {
 
   list.setAttribute('aria-busy', 'true');
   list.classList.add('is-loading');
-  list.innerHTML = buildSkeletonCards(Math.min(pagination.limit, 5));
+  list.innerHTML = buildSkeletonCards(Math.min(pagination.limit, 5), viewMode);
   empty.style.display = 'none';
   countEl.textContent = '';
 
@@ -447,6 +507,11 @@ async function doBatchAction(container, action, data) {
 }
 
 function renderFileList(container, list, files) {
+  if (viewMode === 'card') {
+    renderCardList(container, list, files);
+    return;
+  }
+  list.classList.remove('view-card'); // 列表视图，恢复单列布局
   const selectAllCb = container.querySelector('#select-all-checkbox');
   if (selectAllCb) {
     selectAllCb.checked = false;
@@ -504,7 +569,7 @@ function renderFileList(container, list, files) {
       </div>
       <div class="file-actions">
         <button type="button" class="btn btn-small btn-star ${f.starred ? 'starred' : ''}" data-id="${f.id}">${f.starred ? '★' : '☆'}</button>
-        <button type="button" class="btn btn-small btn-copy-link" data-id="${f.id}">复制链接</button>
+        <button type="button" class="btn btn-small btn-copy-link" data-id="${f.id}" title="复制链接" aria-label="复制链接"><svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></button>
         <div class="file-more-dropdown">
           <button type="button" class="btn btn-small file-more-trigger" title="更多操作">⋯</button>
           <div class="file-more-menu">
@@ -627,6 +692,75 @@ function renderFileList(container, list, files) {
   });
 }
 
+// 卡片视图：每张卡片含一个实时 iframe 缩略图（懒加载）+ 文件名 + 标签 + 状态。
+function renderCardList(container, list, files) {
+  // 切换容器为网格布局
+  list.classList.add('view-card');
+  // 卡片视图不支持全选（空间小），隐藏表头的全选 checkbox
+  const selectAllCb = container.querySelector('#select-all-checkbox');
+  if (selectAllCb) selectAllCb.checked = false;
+  const observer = ensureCardThumbObserver();
+
+  files.forEach((f) => {
+    const el = document.createElement('div');
+    el.className = 'file-card';
+    el.dataset.fileId = f.id;
+    if (selectedFileIds.has(f.id)) el.classList.add('selected');
+    const safeName = escapeHtml(f.original_name);
+    const isPublic = !!f.is_public;
+    const iconText = f.is_bundle ? 'ZIP' : (f.file_type === 'markdown' ? 'MD' : 'HTML');
+    const privacyBadge = isPublic
+      ? '<span class="file-badge file-badge-public">公开</span>'
+      : '<span class="file-badge file-badge-private">私有</span>';
+    const versionBadge = f.version_count > 0
+      ? `<span class="file-badge file-badge-version">v${f.version_count + 1}</span>` : '';
+    const tagBadges = (f.tags || []).slice(0, 3).map(t =>
+      `<span class="file-badge file-badge-tag" data-tag-id="${t.id}">${escapeHtml(t.name)}</span>`).join('');
+    const size = formatSize(f.size);
+    const timeStr = relativeTime(f.updated_at || f.created_at);
+
+    el.innerHTML = `
+      <div class="file-card-thumb" aria-hidden="true">
+        <div class="file-card-thumb-loading"></div>
+      </div>
+      <button type="button" class="file-card-icon-btn file-card-star ${f.starred ? 'starred' : ''}" data-id="${f.id}" aria-label="收藏" title="收藏">${f.starred ? '★' : '☆'}</button>
+      <button type="button" class="file-card-icon-btn file-card-copy" data-id="${f.id}" aria-label="复制链接" title="复制链接"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></button>
+      <div class="file-card-name" title="${safeName}">${safeName}</div>
+      <div class="file-card-badges"><span class="file-badge file-badge-type">${iconText}</span>${privacyBadge}${versionBadge}${tagBadges}</div>
+      <div class="file-card-footer"><span>${size}</span><span>${timeStr}</span></div>
+    `;
+    el.setAttribute('role', 'button');
+    el.setAttribute('tabindex', '0');
+    el.setAttribute('aria-label', `打开 ${f.original_name}`);
+
+    // 整张卡片点击 → 预览（星标按钮单独拦截）
+    const openPreview = () => navigate('/view/' + f.id);
+    el.addEventListener('click', openPreview);
+    el.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openPreview(); } });
+    el.querySelector('.file-card-star').addEventListener('click', async e => {
+      e.stopPropagation();
+      await toggleStar(f.id, f.starred);
+      loadFiles(container);
+    });
+    el.querySelector('.file-card-copy').addEventListener('click', e => {
+      e.stopPropagation();
+      doCopyLink(f.share_key);
+    });
+    el.querySelectorAll('.file-badge-tag').forEach(badge => {
+      badge.addEventListener('click', e => {
+        e.stopPropagation();
+        filterState.tagId = parseInt(badge.dataset.tagId);
+        renderFilterDropdowns(container);
+        loadFiles(container, 1);
+      });
+    });
+
+    // 注册懒加载：卡片滚到可视区附近才挂 iframe
+    observer.observe(el);
+    list.appendChild(el);
+  });
+}
+
 function renderPagination(container) {
   let wrap = container.querySelector('#pagination');
   if (!wrap) {
@@ -694,6 +828,28 @@ function buildPageNumbers(current, total) {
   return pages;
 }
 
+function setupViewToggle(container) {
+  const buttons = container.querySelectorAll('.view-toggle-btn');
+  const selectAllWrap = container.querySelector('.select-all-wrap'); // 卡片视图无单卡 checkbox，隐藏全选
+  const syncAllSelect = () => { if (selectAllWrap) selectAllWrap.hidden = (viewMode === 'card'); };
+  // 根据 viewMode 同步按钮的 active 态（首次进入 / 刷新后恢复持久化选择）
+  buttons.forEach(b => b.classList.toggle('active', b.dataset.view === viewMode));
+  syncAllSelect();
+  buttons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      if (viewMode === btn.dataset.view) return;
+      // 切换前断开旧 observer，避免卡片 DOM 已销毁仍持有引用造成泄漏
+      if (cardThumbObserver) { cardThumbObserver.disconnect(); }
+      cardThumbQueue.length = 0;
+      cardThumbActive = 0;
+      setViewMode(btn.dataset.view);
+      buttons.forEach(b => b.classList.toggle('active', b === btn));
+      syncAllSelect();
+      applyFilters(container); // 复用现有重渲染流，重建列表/卡片
+    });
+  });
+}
+
 function setupFileFilter(container) {
   const searchInput = container.querySelector('#search-input');
   const searchClear = container.querySelector('#search-clear');
@@ -798,7 +954,7 @@ async function doRename(container, id, currentName) {
     value: currentName,
     validate: v => {
       if (!v.trim()) return '文件名不能为空';
-      if (/[\/\\]/.test(v)) return '文件名不能包含 / 或 \\';
+      if (/[/\\]/.test(v)) return '文件名不能包含 / 或 \\';
       return null;
     },
   });
@@ -1006,7 +1162,8 @@ function openMcpConfigModal() {
           <code class="mcp-value">${data.tokens.map(t => esc(t.token_prefix) + '…').join(', ')}</code>
         </div>` : ''}
       `;
-      // 多客户端 Tab：共用同一份标准 JSON，差异仅在目标文件路径/说明文字
+      // 多 MCP 客户端 Tab：共用同一份标准 JSON，差异仅在目标文件路径/说明文字。
+      // CLI 不在此弹窗内——它走独立的「CLI 工具」菜单 + /api/cli/guide。
       const configs = (data.configs && data.configs.length > 0)
         ? data.configs
         : [{ id: 'generic', label: '通用', path: '', config: data.config }];
@@ -1031,6 +1188,7 @@ function openMcpConfigModal() {
       const setConfig = (idx) => {
         const c = configs[idx];
         if (!c) return;
+        // MCP 客户端 tab：显示 JSON
         activeConfigJson = JSON.stringify(c.config, null, 2);
         codeEl.textContent = activeConfigJson;
         pathEl.textContent = c.path || '';
@@ -1044,12 +1202,16 @@ function openMcpConfigModal() {
       });
       const copyBtn = document.getElementById('mcp-copy-config');
       if (copyBtn) {
-        copyBtn.addEventListener('click', () => {
-          navigator.clipboard.writeText(activeConfigJson).then(() => {
+        copyBtn.addEventListener('click', async () => {
+          // PR #9：navigator.clipboard 优先，不支持/失败时回退 execCommand（copyToClipboard）
+          const ok = await copyToClipboard(activeConfigJson);
+          if (ok) {
             toast('已复制到剪贴板');
             copyBtn.textContent = '已复制';
             setTimeout(() => { copyBtn.textContent = '复制'; }, 2000);
-          }).catch(() => toast('复制失败', 'error'));
+          } else {
+            toast('复制失败', 'error');
+          }
         });
       }
     } else {
@@ -1079,6 +1241,54 @@ function closeMcpConfigModal() {
   modal.setAttribute('aria-hidden', 'true');
 }
 
+// ---------- CLI Config Modal ----------
+// CLI 与 MCP 是并列的两个客户端入口，各自独立弹窗。这里只渲染 CLI 用法文档。
+function openCliConfigModal() {
+  const modal = document.getElementById('cli-config-modal');
+  if (!modal) return;
+
+  if (!modal.dataset.bound) {
+    modal.dataset.bound = '1';
+    modal.querySelector('#cli-config-close').addEventListener('click', closeCliConfigModal);
+    modal.querySelector('#cli-config-dismiss').addEventListener('click', closeCliConfigModal);
+    modal.addEventListener('click', e => { if (e.target === modal) closeCliConfigModal(); });
+  }
+
+  const detailEl = document.getElementById('cli-detail');
+  detailEl.textContent = '加载中…';
+
+  api('/api/cli/guide').then(data => {
+    // 渲染富文本用法文档；缓存纯文本供「复制文档」按钮使用
+    detailEl.innerHTML = data.guideHtml || '<p>（无文档）</p>';
+    const copyBtn = document.getElementById('cli-copy-guide');
+    if (copyBtn) {
+      copyBtn.onclick = async () => {
+        const ok = await copyToClipboard(data.guideText || '');
+        if (ok) {
+          toast('已复制到剪贴板');
+          copyBtn.textContent = '已复制';
+          setTimeout(() => { copyBtn.textContent = '复制文档'; }, 2000);
+        } else {
+          toast('复制失败', 'error');
+        }
+      };
+    }
+    modal.hidden = false;
+    modal.setAttribute('aria-hidden', 'false');
+  }).catch(e => {
+    detailEl.innerHTML = `<p style="color:var(--danger)">加载失败: ${escapeHtml(e.message)}</p>`;
+    modal.hidden = false;
+    modal.setAttribute('aria-hidden', 'false');
+  });
+}
+
+function closeCliConfigModal() {
+  const modal = document.getElementById('cli-config-modal');
+  if (!modal) return;
+  modal.hidden = true;
+  modal.setAttribute('aria-hidden', 'true');
+}
+
 // ---------- Skills List Modal ----------
 function openSkillsListModal() {
   const modal = document.getElementById('skills-list-modal');
@@ -1218,7 +1428,6 @@ async function createUserDialog() {
 
 // 需要挂到 window 上因为 users table 用了 inline onclick
 async function editUserDialog(id, username, role, email) {
-  const ops = ['修改用户名/邮箱', '修改角色', '重置密码'];
   const choice = await dialogModal.confirm({
     title: '编辑用户: ' + username,
     message: '请选择操作',

package/public/js/pages/landing.js

@@ -3,7 +3,7 @@
 import { api } from '../api.js';
 import { state, navigate } from '../app.js';
 
-function renderLanding(container, openModal) {
+function renderLanding(container) {
   if (state.currentUser) { navigate('/'); return; }
   const tmpl = document.getElementById('landing-template');
   container.innerHTML = '';