feat: add product archive management page

frontend/src/App.tsx

@@ -4,12 +4,13 @@ import CanvasStudio from './pages/CanvasStudio';
 import FindPage from './pages/FindPage';
 import HelpPage from './pages/HelpPage';
 import OrdersPage from './pages/OrdersPage';
+import ProductArchivePage from './pages/ProductArchivePage';
 import TemplateHome from './pages/TemplateHome';
 import TestWorkbench from './pages/TestWorkbench';
 import { CanvasDocument, WordcloudReplaceSession, WordcloudStickerPayload } from './types';
 import { createDefaultDocument } from './lib/canvasDocument';
 
-type AppPage = 'home' | 'canvas' | 'wordcloud' | 'orders' | 'find' | 'help';
+type AppPage = 'home' | 'canvas' | 'wordcloud' | 'orders' | 'products' | 'find' | 'help';
 
 const getStoredTheme = (): ThemeMode => {
   const stored = window.localStorage.getItem('wordcloud-theme');
@@ -129,6 +130,18 @@ export default function App() {
     );
   }
 
+  if (page === 'products') {
+    return (
+      <ProductArchivePage
+        themeMode={themeMode}
+        systemTheme={systemTheme}
+        onThemeModeChange={setThemeMode}
+        onOpenHome={() => setPage('home')}
+        onOpenHelp={openHelp}
+      />
+    );
+  }
+
   return (
     <TemplateHome
       themeMode={themeMode}
@@ -143,6 +156,7 @@ export default function App() {
         setPage('canvas');
       }}
       onOpenOrders={() => setPage('orders')}
+      onOpenProducts={() => setPage('products')}
       onOpenFind={() => setPage('find')}
       onOpenHelp={openHelp}
     />

frontend/src/pages/ProductArchivePage.tsx

@@ -0,0 +1,404 @@
+import { useEffect, useState } from 'react';
+import type { FormEvent } from 'react';
+import AppSettingsWindow, { type ThemeMode } from '../components/AppSettingsWindow';
+import { ensureOk } from '../lib/api';
+import { IconArchive, IconGrid, IconHelp, IconLock, IconRefresh, IconTrash } from '../components/Icons';
+import {
+  deleteProduct,
+  getProduct,
+  listProducts,
+  restoreProduct,
+} from '../lib/productArchive';
+import type { ProductDetail, ProductStatus, ProductSummary } from '../types';
+
+interface ProductArchivePageProps {
+  themeMode: ThemeMode;
+  systemTheme: 'light' | 'dark';
+  onThemeModeChange: (mode: ThemeMode) => void;
+  onOpenHome: () => void;
+  onOpenHelp?: () => void;
+}
+
+const TOKEN_KEY = 'wordcloud-orders-token';
+
+function statusClass(status: ProductStatus): string {
+  if (status === 'active') return 'product-status-archived';
+  if (status === 'pending_cleanup' || status === 'failed_cleanup') return 'product-status-pending-cleanup';
+  return 'product-status-empty';
+}
+
+function statusLabel(product: ProductSummary): string {
+  if (product.status === 'active') return '已归档词云数据';
+  if (product.status === 'pending_cleanup') return '待清理';
+  if (product.status === 'failed_cleanup') return '清理失败';
+  return '已清理';
+}
+
+function formatDate(value: string | null): string {
+  if (!value) return '-';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '-';
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  });
+}
+
+function formatDateTime(value: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '-';
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export default function ProductArchivePage({
+  themeMode,
+  systemTheme,
+  onThemeModeChange,
+  onOpenHome,
+  onOpenHelp,
+}: ProductArchivePageProps) {
+  const [token, setToken] = useState(() => localStorage.getItem(TOKEN_KEY) || '');
+  const [password, setPassword] = useState('');
+  const [loginError, setLoginError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [products, setProducts] = useState<ProductSummary[]>([]);
+  const [query, setQuery] = useState('');
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [detail, setDetail] = useState<ProductDetail | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [actionBusy, setActionBusy] = useState(false);
+
+  const selected = products.find(product => product.product_id === selectedId) || null;
+
+  const loadProducts = async (authToken: string, search = query) => {
+    if (!authToken) return;
+    setLoading(true);
+    setError('');
+    try {
+      const items = await listProducts(authToken, search);
+      setProducts(items);
+      setSelectedId(current => items.some(item => item.product_id === current) ? current : null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '产品档案读取失败');
+      if (err instanceof Error && (err.message.includes('401') || err.message.includes('403'))) {
+        localStorage.removeItem(TOKEN_KEY);
+        setToken('');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void loadProducts(token);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!token || !selectedId) {
+      setDetail(null);
+      return;
+    }
+    setDetailLoading(true);
+    setError('');
+    getProduct(token, selectedId)
+      .then(next => {
+        if (!cancelled) setDetail(next);
+      })
+      .catch(err => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : '产品详情读取失败');
+        setDetail(null);
+      })
+      .finally(() => {
+        if (!cancelled) setDetailLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedId, token]);
+
+  const handleLogin = async (event: FormEvent) => {
+    event.preventDefault();
+    setLoginError('');
+    try {
+      const res = await ensureOk(await fetch('/api/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password }),
+      }), '登录失败');
+      const data = await res.json() as { token: string };
+      localStorage.setItem(TOKEN_KEY, data.token);
+      setPassword('');
+      setToken(data.token);
+    } catch (err) {
+      setLoginError(err instanceof Error ? err.message : '登录失败');
+    }
+  };
+
+  const runAction = async (action: () => Promise<ProductSummary>) => {
+    if (!token || !selectedId || actionBusy) return;
+    setActionBusy(true);
+    setError('');
+    try {
+      await action();
+      await loadProducts(token);
+      const nextDetail = await getProduct(token, selectedId);
+      setDetail(nextDetail);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '操作失败');
+    } finally {
+      setActionBusy(false);
+    }
+  };
+
+  const copyProductId = async () => {
+    if (!detail) return;
+    try {
+      await navigator.clipboard.writeText(detail.product_id);
+    } catch {
+      setError('复制产品 ID 失败');
+    }
+  };
+
+  if (!token) {
+    return (
+      <div className="orders-page product-archive-page">
+        <nav className="navbar">
+          <div className="navbar-brand">
+            <div className="navbar-brand-icon"><IconLock /></div>
+            <span className="navbar-brand-name">产品档案 · 登录</span>
+          </div>
+          <div className="navbar-actions" />
+          <div className="navbar-end">
+            <button className="nav-btn" onClick={onOpenHome}>
+              <span className="nav-btn-icon"><IconGrid /></span>
+              <span className="nav-btn-label">模板</span>
+            </button>
+            <AppSettingsWindow themeMode={themeMode} systemTheme={systemTheme} onThemeModeChange={onThemeModeChange} />
+          </div>
+        </nav>
+        <main className="orders-main">
+          <form className="login-card" onSubmit={handleLogin}>
+            <h2 className="login-title">产品档案后台</h2>
+            <p className="orders-hint">产品档案包含名单位置数据，请输入生产订单管理口令。</p>
+            <input
+              type="password"
+              className="orders-input"
+              placeholder="管理口令"
+              value={password}
+              onChange={event => setPassword(event.target.value)}
+            />
+            {loginError && <div className="orders-error">{loginError}</div>}
+            <button type="submit" className="btn btn-primary btn-block">登录并查看</button>
+          </form>
+        </main>
+      </div>
+    );
+  }
+
+  const detailImages = detail?.images || [];
+  const previewImage = detail
+    ? detailImages.find(image => image.image_id === detail.cover_image_id) || detailImages[0]
+    : null;
+  const previewUrl = previewImage?.image_url || '';
+  const latestVersion = detail?.versions[detail.versions.length - 1] || null;
+
+  return (
+    <div className="orders-page product-archive-page">
+      <nav className="navbar">
+        <div className="navbar-brand">
+          <div className="navbar-brand-icon"><IconArchive /></div>
+          <span className="navbar-brand-name">产品档案</span>
+        </div>
+        <div className="navbar-actions" />
+        <div className="navbar-end">
+          <button className="nav-btn" onClick={onOpenHome}>
+            <span className="nav-btn-icon"><IconGrid /></span>
+            <span className="nav-btn-label">模板</span>
+          </button>
+          <button className="nav-btn" onClick={() => loadProducts(token)}>
+            <span className="nav-btn-icon"><IconRefresh /></span>
+            <span className="nav-btn-label">刷新</span>
+          </button>
+          {onOpenHelp && (
+            <button className="nav-btn" onClick={onOpenHelp}>
+              <span className="nav-btn-icon"><IconHelp /></span>
+              <span className="nav-btn-label">帮助</span>
+            </button>
+          )}
+          <button
+            className="nav-btn"
+            onClick={() => {
+              localStorage.removeItem(TOKEN_KEY);
+              setToken('');
+              setProducts([]);
+              setDetail(null);
+              setSelectedId(null);
+            }}
+          >
+            <span className="nav-btn-icon"><IconTrash /></span>
+            <span className="nav-btn-label">退出</span>
+          </button>
+          <AppSettingsWindow themeMode={themeMode} systemTheme={systemTheme} onThemeModeChange={onThemeModeChange} />
+        </div>
+      </nav>
+
+      <main className="orders-main orders-layout">
+        <aside className="orders-queue">
+          <div className="orders-queue-head">
+            <span>产品列表</span>
+            <span className="orders-count">{products.length} 个</span>
+          </div>
+          <div className="product-archive-search-block">
+            <input
+              className="orders-input"
+              placeholder="产品名称"
+              value={query}
+              onChange={event => setQuery(event.target.value)}
+              onKeyDown={event => {
+                if (event.key === 'Enter') void loadProducts(token);
+              }}
+            />
+            <button className="btn btn-secondary btn-sm" onClick={() => loadProducts(token)}>搜索</button>
+          </div>
+          <div className="orders-queue-list">
+            {loading && <div className="table-empty">加载中…</div>}
+            {!loading && products.length === 0 && <div className="table-empty">暂无产品档案</div>}
+            {products.map(product => {
+              const coverId = product.cover_image_id;
+              const rowDetail = detail?.product_id === product.product_id ? detail : null;
+              const rowCover = rowDetail?.images.find(image => image.image_id === coverId);
+              return (
+                <button
+                  key={product.product_id}
+                  className={`product-archive-row${selectedId === product.product_id ? ' active' : ''}`}
+                  onClick={() => setSelectedId(product.product_id)}
+                >
+                  <span className="product-archive-thumb">
+                    {rowCover?.image_url
+                      ? <img src={rowCover.image_url} alt={product.name} />
+                      : <span className="product-archive-thumb-empty">暂无预览图</span>}
+                  </span>
+                  <span className="product-archive-row-body">
+                    <span className="product-archive-row-name">{product.name}</span>
+                    <span className="product-archive-row-meta">
+                      {[product.sku, product.specification].filter(Boolean).join(' · ') || '未填写规格'}
+                    </span>
+                  </span>
+                  <span className={`product-status ${statusClass(product.status)}`}>{statusLabel(product)}</span>
+                </button>
+              );
+            })}
+          </div>
+        </aside>
+
+        <section className="orders-detail">
+          {!selected ? (
+            <div className="table-empty">在左侧选择产品查看详情</div>
+          ) : (
+            <>
+              <div className="orders-detail-head">
+                <div>
+                  <h2 className="orders-detail-title">{selected.name}</h2>
+                  <span className={`orders-status ${statusClass(selected.status)}`}>{statusLabel(selected)}</span>
+                  <span className="orders-detail-meta">
+                    {[selected.sku, selected.specification].filter(Boolean).join(' · ') || '未填写规格'}
+                  </span>
+                </div>
+                <div className="orders-detail-actions">
+                  {(selected.status === 'pending_cleanup' || selected.status === 'failed_cleanup') && (
+                    <button
+                      className="btn btn-secondary btn-sm"
+                      disabled={actionBusy}
+                      onClick={() => runAction(() => restoreProduct(token, selected.product_id))}
+                    >
+                      恢复产品
+                    </button>
+                  )}
+                  {selected.status === 'active' && (
+                    <button
+                      className="btn btn-danger btn-sm"
+                      disabled={actionBusy}
+                      onClick={() => runAction(() => deleteProduct(token, selected.product_id))}
+                    >
+                      软删除
+                    </button>
+                  )}
+                </div>
+              </div>
+
+              {selected.status === 'pending_cleanup' && (
+                <div className="orders-error product-archive-warning">
+                  待清理 · 将于 {formatDate(selected.purge_after)} 删除。恢复产品可结束本次清理窗口。
+                </div>
+              )}
+              {selected.status === 'failed_cleanup' && (
+                <div className="orders-error product-archive-warning">清理失败，请人工检查档案目录后再恢复。</div>
+              )}
+              {error && <div className="orders-error">{error}</div>}
+
+              {detailLoading && <div className="table-empty">正在读取产品详情…</div>}
+              {detail && (
+                <div className="product-archive-detail">
+                  <div className="product-archive-cover">
+                    {previewUrl
+                      ? <img src={previewUrl} alt={`${selected.name} 预览图`} />
+                      : <div className="product-archive-cover-empty">暂无预览图</div>}
+                  </div>
+                  <div className="product-archive-detail-body">
+                    <div className="product-archive-metrics">
+                      <div>
+                        <span className="product-archive-metric-label">归档词云</span>
+                        <strong>{latestVersion?.wordcloud_count ?? 0} 份</strong>
+                      </div>
+                      <div>
+                        <span className="product-archive-metric-label">设计版本</span>
+                        <strong>{detail.versions.length} 版</strong>
+                      </div>
+                      <div>
+                        <span className="product-archive-metric-label">图片</span>
+                        <strong>{detail.images.length} 张</strong>
+                      </div>
+                    </div>
+
+                    <div className="product-archive-timeline">
+                      <h3>版本时间线</h3>
+                      {detail.versions.length === 0 && <p>暂无设计版本。</p>}
+                      {detail.versions.map(version => (
+                        <div className="product-archive-version" key={version.version_id}>
+                          <div>
+                            <span>{formatDateTime(version.created_at)}</span>
+                            <span>{version.wordcloud_count} 份词云位置数据</span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+
+                    <details className="product-archive-system">
+                      <summary>系统信息</summary>
+                      <div className="product-archive-system-row">
+                        <span>产品 ID</span>
+                        <code>{detail.product_id}</code>
+                      </div>
+                      <button className="btn btn-secondary btn-sm" onClick={copyProductId}>复制产品 ID</button>
+                    </details>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+}

frontend/src/pages/TemplateHome.tsx

@@ -17,6 +17,7 @@ import {
 import { serializeDocument } from '../lib/svgExport';
 import { loadStickerLibrary } from '../lib/stickerLibrary';
 import {
+  IconArchive,
   IconGrid,
   IconCloud,
   IconFind,
@@ -32,6 +33,7 @@ interface TemplateHomeProps {
   onCreateBlank: () => void;
   onUseTemplate: (template: CanvasTemplate) => void;
   onOpenOrders: () => void;
+  onOpenProducts: () => void;
   onOpenFind: () => void;
   onOpenHelp: () => void;
 }
@@ -43,6 +45,7 @@ export default function TemplateHome({
   onCreateBlank,
   onUseTemplate,
   onOpenOrders,
+  onOpenProducts,
   onOpenFind,
   onOpenHelp,
 }: TemplateHomeProps) {
@@ -143,6 +146,10 @@ export default function TemplateHome({
             <span className="nav-btn-icon"><IconCloud /></span>
             <span className="nav-btn-label">生产订单</span>
           </button>
+          <button className="nav-btn" onClick={onOpenProducts}>
+            <span className="nav-btn-icon"><IconArchive /></span>
+            <span className="nav-btn-label">产品档案</span>
+          </button>
           <button className="nav-btn" onClick={onOpenFind}>
             <span className="nav-btn-icon"><IconFind /></span>
             <span className="nav-btn-label">查找</span>

frontend/src/styles.css

@@ -3404,3 +3404,197 @@ body.resizing .studio-panel {
     grid-template-columns: minmax(0, 1fr);
   }
 }
+
+/* ===== 产品档案管理页 ===== */
+.product-archive-search-block {
+  display: flex;
+  gap: 6px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.product-archive-search-block .orders-input {
+  margin-bottom: 0;
+}
+.product-archive-row {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  padding: 9px 10px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-primary);
+  text-align: left;
+  cursor: pointer;
+}
+.product-archive-row:hover,
+.product-archive-row.active {
+  background: var(--accent-light);
+  border-color: var(--accent);
+}
+.product-archive-thumb {
+  width: 64px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-panel-alt);
+}
+.product-archive-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.product-archive-thumb-empty,
+.product-archive-cover-empty {
+  padding: 4px;
+  color: var(--text-muted);
+  font-size: 11px;
+  text-align: center;
+}
+.product-archive-row-body {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+}
+.product-archive-row-name,
+.product-archive-row-meta {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.product-archive-row-name {
+  font-family: var(--font-main);
+  font-size: 13px;
+  font-weight: 600;
+}
+.product-archive-row-meta {
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+.product-archive-warning {
+  margin-bottom: 12px;
+}
+.product-archive-detail {
+  display: grid;
+  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1fr);
+  gap: 16px;
+}
+.product-archive-cover {
+  min-height: 220px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel-alt);
+}
+.product-archive-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.product-archive-cover-empty {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.product-archive-detail-body {
+  min-width: 0;
+  display: grid;
+  gap: 14px;
+}
+.product-archive-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+.product-archive-metrics > div {
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-panel-alt);
+}
+.product-archive-metric-label {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+.product-archive-metrics strong {
+  color: var(--text-primary);
+  font-size: 15px;
+}
+.product-archive-timeline {
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-panel-alt);
+}
+.product-archive-timeline h3 {
+  margin: 0 0 10px;
+  color: var(--text-primary);
+  font-size: 13px;
+}
+.product-archive-timeline p {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+.product-archive-version {
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+}
+.product-archive-version:last-child {
+  border-bottom: 0;
+}
+.product-archive-version > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+.product-archive-system {
+  padding: 10px;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-sm);
+}
+.product-archive-system summary {
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 12px;
+}
+.product-archive-system-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 10px 0;
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+.product-archive-system-row code {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+}
+@media (max-width: 900px) {
+  .product-archive-detail {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .product-archive-row {
+    grid-template-columns: 48px minmax(0, 1fr);
+  }
+  .product-archive-row .product-status {
+    grid-column: 2;
+    justify-self: start;
+  }
+}

frontend/tests/product-archive-ui.test.mjs

@@ -54,3 +54,20 @@ test('new product creation archives with the created product id instead of a dra
   assert.match(dialog, /await createManualProduct\(token, \{ name, sku, specification \}\)/);
   assert.match(dialog, /archiveProductVersion\(token, product\.product_id, document, previewBlob\)/);
 });
+
+test('app routes to product archives and list keeps IDs out of primary cells', async () => {
+  const app = await readFile('frontend/src/App.tsx', 'utf8');
+  const page = await readFile('frontend/src/pages/ProductArchivePage.tsx', 'utf8');
+  assert.match(app, /'products'/);
+  assert.match(page, /产品档案/);
+  assert.match(page, /产品名称/);
+  assert.doesNotMatch(page, /<td>\{product\.product_id\}<\/td>/);
+});
+
+test('product archive page exposes restore and soft delete actions', async () => {
+  const page = await readFile('frontend/src/pages/ProductArchivePage.tsx', 'utf8');
+  assert.match(page, /恢复产品/);
+  assert.match(page, /软删除/);
+  assert.match(page, /系统信息/);
+  assert.match(page, /待清理 · 将于/);
+});