改进首页布局，增加视频预览；简化demo清单逻辑。

.gitattributes

@@ -10,6 +10,7 @@
 *.lfs.* filter=lfs diff=lfs merge=lfs -text
 *.mlmodel filter=lfs diff=lfs merge=lfs -text
 *.model filter=lfs diff=lfs merge=lfs -text
+*.mov filter=lfs diff=lfs merge=lfs -text
 *.msgpack filter=lfs diff=lfs merge=lfs -text
 *.npy filter=lfs diff=lfs merge=lfs -text
 *.npz filter=lfs diff=lfs merge=lfs -text

backend/access_log.py

@@ -1,6 +1,7 @@
 """服务访问日志"""
 from datetime import datetime
 from typing import Optional
+from urllib.parse import unquote
 
 from flask import request
 import threading
@@ -45,15 +46,12 @@ def _log_request(event_type: str, details: str = "", client_ip: str = None):
 
 
 def log_page_load(path: str):
-    """记录页面访问（含 ?ref= 参数）"""
-    details = f"path='{path}'"
     try:
-        ref = request.args.get("ref")
-        if ref:
-            details += f", ref='{ref}'"
+        qs = request.query_string.decode("utf-8", errors="replace")
+        combined = f"{path}?{unquote(qs)}" if qs else path
     except RuntimeError:
-        pass
-    _log_request("📄 页面访问", details)
+        combined = path
+    _log_request("📄 页面访问", f"path={combined!r}")
 
 
 def log_demo_file(path: str):

backend/api/static.py

@@ -41,6 +41,8 @@ def register_static_routes(app):
         """serves all files from ./client/dist/ to ``/client/<path:path>``"""
         if path.endswith('.html'):
             log_page_load(path)
+        if path.endswith('.json'):
+            log_demo_file(path)
         return _read_static_file('client/dist', path)
 
     @app.route('/demo/<path:path>')

client/src/analysis.html

@@ -18,7 +18,7 @@
                 <header class="app-page-toolbar app-page-toolbar--bleed">
                     <h1 class="page-toolbar-title"><span class="title-main-line"><span data-page-title data-i18n></span><span class="title-tagline" data-page-subtitle data-i18n></span></span></h1>
                     <div class="app-page-toolbar-actions">
-                        <a href="index.html" class="home-link" title="InfoLens Home" data-i18n="text,title">InfoLens Home</a>
+                        <a href="index.html" class="home-link" title="Info Lens" data-i18n="text,title">Info Lens</a>
                         <a href="compare.html?showTextRender=1&demos=/quick-start-1.json,/quick-start-2.json" target="_blank" class="compare-link" style="display: none;" title="Compare analysis results" data-i18n="text,title">Compare results</a>
                         <div class="settings-menu-wrapper">
                             <button id="settings_btn" class="settings-btn" title="Settings" data-i18n="title">

client/src/attribution.html

@@ -16,7 +16,7 @@
                 <header class="app-page-toolbar app-page-toolbar--bleed">
                     <h1 class="page-toolbar-title"><span class="title-main-line"><span data-page-title data-i18n></span><span class="title-tagline" data-page-subtitle data-i18n></span></span></h1>
                     <div class="app-page-toolbar-actions">
-                        <a href="index.html" class="home-link" title="InfoLens Home" data-i18n="text,title">InfoLens Home</a>
+                        <a href="index.html" class="home-link" title="Info Lens" data-i18n="text,title">Info Lens</a>
                         <div class="settings-menu-wrapper">
                             <button id="settings_btn" class="settings-btn" title="Settings" data-i18n="title">
                                 <span class="settings-icon">⚙️</span>

client/src/chat.html

@@ -16,7 +16,7 @@
                 <header class="app-page-toolbar app-page-toolbar--bleed">
                     <h1 class="page-toolbar-title"><span class="title-main-line"><span data-page-title data-i18n></span><span class="title-tagline" data-page-subtitle data-i18n></span></span></h1>
                     <div class="app-page-toolbar-actions">
-                        <a href="index.html" class="home-link" title="InfoLens Home" data-i18n="text,title">InfoLens Home</a>
+                        <a href="index.html" class="home-link" title="Info Lens" data-i18n="text,title">Info Lens</a>
                         <div class="settings-menu-wrapper">
                             <button id="settings_btn" class="settings-btn" title="Settings" data-i18n="title">
                                 <span class="settings-icon">⚙️</span>

client/src/content/images/dag-dark.mov

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ed07cfaa00a91cfc7ed3ddc0edfa19747e864127053af2bf9bce24dcdfa39c65
+size 132450

client/src/content/images/dag.mov

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:67b81278d3c4a0e311bd4c7d2ebea552e91b1a0b4fbcc3f85568490a0098d768
+size 164323

client/src/css/home.scss

@@ -1,6 +1,23 @@
 $breakpoint-mobile: 767px;
 
-// 导航页主/副标题字阶与顶栏子页解耦；仅本页使用下列变量
+// ----- 导航首页卡片尺寸（只改此块）-----
+$nav-grid-gap: 0.75rem;
+$nav-card-gap: 0.65rem;
+$nav-card-pad-block: 0.75rem;
+$nav-card-pad-inline: 0.85rem;
+$nav-card-radius: 8px;
+$nav-card-shot-radius: 6px;
+$nav-title-size: 0.95rem;
+$nav-subtitle-size: 0.82rem;
+
+$nav-featured-width-narrow: 100%; // 单列竖排时大卡铺满轨宽
+$nav-featured-width-wide: 60%; // 宽屏首行内宽度，对齐旧版双列中单列占比
+
+// 小卡一键标度；只占格宽时用 track，只缩内边距/字时用 inner
+$nav-compact-track-fraction: 0.9;
+$nav-compact-inner-scale: 0.9;
+// -----
+
 body.nav-landing-page {
   --nav-landing-title-size: 22px;
   --nav-landing-title-weight: 600;
@@ -11,8 +28,6 @@ body.nav-landing-page {
   --nav-landing-card-bg: #eeeeee;
   --nav-landing-card-bg-hover: #e0e0e0;
 
-  // 覆盖子页/响应式里对 body{height:100vh} 的设定：固定视口高 + flex 纵向居中时，
-  // 内容总高超过一屏会向上溢出，顶栏（设置按钮）会落在首屏外。
   position: relative;
   min-height: 100vh;
   height: auto;
@@ -25,7 +40,6 @@ body.nav-landing-page {
   background: var(--app-bg, #f5f5f5);
 }
 
-// 相对 body 右上角定位，随页面滚动；不参与 flex 流，不单独占一行
 .nav-landing-settings {
   position: absolute;
   top: max(12px, env(safe-area-inset-top));
@@ -43,13 +57,11 @@ html[data-theme='dark'] body.nav-landing-page {
 
 .nav-landing-main {
   width: 100%;
-  // 与双列断点一致：窄/中屏仍由 width:100% 撑满视口（受 padding 限制）
   max-width: 44rem;
   box-sizing: border-box;
   padding: 2rem 1.25rem;
 }
 
-// 宽屏：放大主区域，卡片与预览块随之变宽变高
 @media (min-width: $breakpoint-mobile + 1) {
   .nav-landing-main {
     max-width: 64rem;
@@ -86,30 +98,92 @@ html[data-theme='dark'] body.nav-landing-page {
   letter-spacing: 0.02em;
 }
 
+// 首行一张 featured，末行三张 compact；单列时竖排同序
 .nav-landing-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.75rem;
+  gap: $nav-grid-gap;
+  justify-items: center;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    'hero'
+    'c1'
+    'c2'
+    'c3';
 }
 
-@media (max-width: $breakpoint-mobile) {
+// 宽屏：首行大卡跨三列，末行三列各放一张小卡
+@media (min-width: $breakpoint-mobile + 1) {
   .nav-landing-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-areas:
+      'hero hero hero'
+      'c1 c2 c3';
+  }
+}
+
+// index.html 顺序：nth-child(1) featured，(2)(3)(4) 为三张 compact
+.nav-landing-card--featured {
+  grid-area: hero;
+  width: $nav-featured-width-narrow;
+  justify-self: stretch;
+}
+
+@media (min-width: $breakpoint-mobile + 1) {
+  .nav-landing-card--featured {
+    width: $nav-featured-width-wide;
+    justify-self: center; // 在跨三列的首行里水平居中
+  }
+}
+
+// 三张 compact 对应第二行 c1–c3（与 grid-template-areas 一致）
+.nav-landing-card.nav-landing-card--compact:nth-child(2) {
+  grid-area: c1;
+  width: #{$nav-compact-track-fraction * 100%};
+}
+
+.nav-landing-card.nav-landing-card--compact:nth-child(3) {
+  grid-area: c2;
+  width: #{$nav-compact-track-fraction * 100%};
+}
+
+.nav-landing-card.nav-landing-card--compact:nth-child(4) {
+  grid-area: c3;
+  width: #{$nav-compact-track-fraction * 100%};
+}
+
+// 双类链：特异性高于单独 .nav-landing-card，避免基类盖掉小卡的 padding/gap
+.nav-landing-card.nav-landing-card--compact {
+  padding: #{$nav-card-pad-block * $nav-compact-inner-scale} #{$nav-card-pad-inline * $nav-compact-inner-scale};
+  gap: #{$nav-card-gap * $nav-compact-inner-scale};
+  border-radius: #{$nav-card-radius * $nav-compact-inner-scale};
+
+  .nav-landing-card-title {
+    font-size: #{$nav-title-size * $nav-compact-inner-scale};
+  }
+
+  .nav-landing-card-subtitle {
+    font-size: #{$nav-subtitle-size * $nav-compact-inner-scale};
+  }
+
+  .nav-landing-card-shot {
+    border-radius: #{$nav-card-shot-radius * $nav-compact-inner-scale};
   }
 }
 
+// 大卡与小卡共用基类；小卡另加 .nav-landing-card--compact 覆写尺寸
 .nav-landing-card {
   display: flex;
   flex-direction: column;
-  gap: 0.65rem;
-  padding: 0.75rem 0.85rem;
-  border-radius: 8px;
+  gap: $nav-card-gap;
+  padding: $nav-card-pad-block $nav-card-pad-inline;
+  border-radius: $nav-card-radius;
   text-decoration: none;
   color: inherit;
   text-align: left;
   background: var(--nav-landing-card-bg, #e6e6e6);
   border: 1px solid var(--border-color, #ddd);
   transition: background 0.15s ease, border-color 0.15s ease;
+  box-sizing: border-box;
 
   &:hover {
     background: var(--nav-landing-card-bg-hover, #dcdcdc);
@@ -120,14 +194,13 @@ html[data-theme='dark'] .nav-landing-card {
   border-color: var(--border-color, #333);
 }
 
-// 与卡片同色，不单独铺底
 .nav-landing-card-text {
   padding: 0;
 }
 
 .nav-landing-card-title {
   display: block;
-  font-size: 0.95rem;
+  font-size: $nav-title-size;
   font-weight: 600;
   line-height: var(--nav-landing-line-height);
 }
@@ -135,7 +208,7 @@ html[data-theme='dark'] .nav-landing-card {
 .nav-landing-card-subtitle {
   display: block;
   text-align: right;
-  font-size: 0.82rem;
+  font-size: $nav-subtitle-size;
   font-weight: 400;
   line-height: var(--nav-landing-line-height);
   color: var(--text-muted, #666);
@@ -145,16 +218,14 @@ html[data-theme='dark'] .nav-landing-card {
   flex-shrink: 0;
   width: 100%;
   aspect-ratio: 4 / 3;
-  border-radius: 6px;
+  border-radius: $nav-card-shot-radius;
   box-sizing: border-box;
   background: var(--bg-hover, #f0f0f0);
   background-size: cover;
-  // 裁切时保留左上内容（右侧、下侧被裁）
   background-position: left top;
   background-repeat: no-repeat;
 }
 
-// content/images：日/夜各一套；LLM Causal Flow 另按 html lang 分中/英，经 webpack 产出 URL
 .nav-landing-card[data-nav-page='analysis'] .nav-landing-card-shot {
   background-image: url('../content/images/highlight.png');
   background-color: var(--bg-hover, #f0f0f0);
@@ -170,15 +241,15 @@ html[data-theme='dark'] .nav-landing-card {
   background-color: var(--bg-hover, #f0f0f0);
 }
 
-// LLM Causal Flow：日/夜 × 中/英（见 content/images/dag-*.png）
-.nav-landing-card[data-nav-page='genAttribute'] .nav-landing-card-shot {
-  background-image: url('../content/images/dag-en.png');
+.nav-landing-card[data-nav-page='genAttribute'] video.nav-landing-card-shot {
+  object-fit: cover;
+  object-position: left top;
+  display: block;
   background-color: var(--bg-hover, #f0f0f0);
 }
 
-html[lang='zh-CN'] .nav-landing-card[data-nav-page='genAttribute'] .nav-landing-card-shot {
-  background-image: url('../content/images/dag-cn.png');
-  background-color: var(--bg-hover, #f0f0f0);
+html[data-theme='dark'] .nav-landing-card[data-nav-page='genAttribute'] video.nav-landing-card-shot {
+  background-color: var(--bg-hover, #2a2a2a);
 }
 
 html[data-theme='dark'] .nav-landing-card[data-nav-page='analysis'] .nav-landing-card-shot {
@@ -195,13 +266,3 @@ html[data-theme='dark'] .nav-landing-card[data-nav-page='attribution'] .nav-land
   background-image: url('../content/images/attribute-dark.png');
   background-color: var(--bg-hover, #2a2a2a);
 }
-
-html[data-theme='dark'] .nav-landing-card[data-nav-page='genAttribute'] .nav-landing-card-shot {
-  background-image: url('../content/images/dag-dark-en.png');
-  background-color: var(--bg-hover, #2a2a2a);
-}
-
-html[data-theme='dark'][lang='zh-CN'] .nav-landing-card[data-nav-page='genAttribute'] .nav-landing-card-shot {
-  background-image: url('../content/images/dag-dark-cn.png');
-  background-color: var(--bg-hover, #2a2a2a);
-}

client/src/gen_attribute.html

@@ -16,7 +16,7 @@
                 <header class="app-page-toolbar app-page-toolbar--bleed">
                     <h1 class="page-toolbar-title"><span class="title-main-line"><span data-page-title data-i18n></span><span class="title-tagline" data-page-subtitle data-i18n></span></span></h1>
                     <div class="app-page-toolbar-actions">
-                        <a href="index.html" class="home-link" title="InfoLens Home" data-i18n="text,title">InfoLens Home</a>
+                        <a href="index.html" class="home-link" title="Info Lens" data-i18n="text,title">Info Lens</a>
                         <div class="settings-menu-wrapper">
                             <button id="settings_btn" class="settings-btn" title="Settings" data-i18n="title">
                                 <span class="settings-icon">⚙️</span>

client/src/index.html

@@ -28,10 +28,10 @@
             <p class="nav-landing-subtitle" data-page-subtitle data-i18n></p>
         </header>
         <nav class="nav-landing-grid" aria-label="App pages">
-            <a class="nav-landing-card" href="gen_attribute.html" target="_blank" rel="noopener" data-nav-page="genAttribute" data-i18n="title"></a>
-            <a class="nav-landing-card" href="analysis.html" target="_blank" rel="noopener" data-nav-page="analysis" data-i18n="title"></a>
-            <a class="nav-landing-card" href="attribution.html" target="_blank" rel="noopener" data-nav-page="attribution" data-i18n="title"></a>
-            <a class="nav-landing-card" href="chat.html" target="_blank" rel="noopener" data-nav-page="chat" data-i18n="title"></a>
+            <a class="nav-landing-card nav-landing-card--featured" href="gen_attribute.html" target="_blank" rel="noopener" data-nav-page="genAttribute" data-i18n="title"></a>
+            <a class="nav-landing-card nav-landing-card--compact" href="analysis.html" target="_blank" rel="noopener" data-nav-page="analysis" data-i18n="title"></a>
+            <a class="nav-landing-card nav-landing-card--compact" href="attribution.html" target="_blank" rel="noopener" data-nav-page="attribution" data-i18n="title"></a>
+            <a class="nav-landing-card nav-landing-card--compact" href="chat.html" target="_blank" rel="noopener" data-nav-page="chat" data-i18n="title"></a>
         </nav>
         <p class="nav-landing-hint" data-page-formula data-i18n></p>
     </main>

client/src/scripts/genAttributeDemoManifestPlugin.js

@@ -1,38 +1,52 @@
 /**
- * 构建时扫描 `demos/gen_attribute/*.json`（源目录），在产物中生成 `demos/gen_attribute/manifest.json`（仅列 slug），供运行时用 fetch 拉列表。
- * 不随 JS bundle 内联大 JSON。
+ * 构建前扫描 `demos/gen_attribute/*.json`，写入 `ts/demos/genAttributeBundledDemoManifest.generated.ts`，供 bundle 内联 slug 列表。
+ * 并为该目录注册 contextDependencies，便于 watch 下增减 demo JSON 时触发重编。
  */
 const path = require('path');
 const fs = require('fs');
-const webpack = require('webpack');
 
 const REL_DIR = 'demos/gen_attribute';
+const GENERATED_BASENAME = 'genAttributeBundledDemoManifest.generated.ts';
+
+function collectSlugs(srcDir) {
+    if (!fs.existsSync(srcDir)) return [];
+    const files = fs.readdirSync(srcDir).filter((f) => f.endsWith('.json'));
+    const slugs = files
+        .map((f) => f.replace(/\.json$/i, ''))
+        .filter((s) => s.length > 0);
+    // UTF-16 码元序，与 locale 无关，避免不同构建机生成顺序不一致
+    slugs.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
+    return slugs;
+}
+
+function writeGeneratedModule(srcDir, outPath) {
+    const slugs = collectSlugs(srcDir);
+    const content =
+        '/**\n' +
+        ' * Generated by GenAttributeDemoManifestPlugin — do not edit.\n' +
+        ' */\n' +
+        `export const GEN_ATTRIBUTE_BUNDLED_DEMO_SLUGS: readonly string[] = ${JSON.stringify(slugs)};\n`;
+    if (fs.existsSync(outPath) && fs.readFileSync(outPath, 'utf8') === content) return;
+    fs.mkdirSync(path.dirname(outPath), { recursive: true });
+    fs.writeFileSync(outPath, content, 'utf8');
+}
 
 class GenAttributeDemoManifestPlugin {
     apply(compiler) {
         const srcDir = path.join(__dirname, '..', REL_DIR);
+        const outPath = path.join(__dirname, '..', 'ts', 'demos', GENERATED_BASENAME);
+
+        compiler.hooks.beforeCompile.tapAsync('GenAttributeDemoManifestPlugin', (_params, callback) => {
+            try {
+                writeGeneratedModule(srcDir, outPath);
+                callback();
+            } catch (e) {
+                callback(e);
+            }
+        });
+
         compiler.hooks.thisCompilation.tap('GenAttributeDemoManifestPlugin', (compilation) => {
-            compilation.hooks.processAssets.tap(
-                {
-                    name: 'GenAttributeDemoManifestPlugin',
-                    stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
-                },
-                () => {
-                    let slugs = [];
-                    if (fs.existsSync(srcDir)) {
-                        const files = fs.readdirSync(srcDir).filter((f) => f.endsWith('.json'));
-                        slugs = files
-                            .map((f) => f.replace(/\.json$/i, ''))
-                            .filter((s) => s.length > 0);
-                        slugs.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
-                    }
-                    const json = JSON.stringify({ slugs });
-                    compilation.emitAsset(
-                        path.posix.join(REL_DIR, 'manifest.json'),
-                        new webpack.sources.RawSource(json)
-                    );
-                }
-            );
+            compilation.contextDependencies.add(srcDir);
         });
     }
 }

client/src/scripts/injectPageMetaIntoHtml.js

@@ -103,12 +103,16 @@ function injectPageMeta(html, pageKey, doc) {
             } else {
                 openTag = openTag.replace(/>$/, ` title="${escapeHtmlText(navTitle)}">`);
             }
+            const shot =
+                navKey === 'genAttribute'
+                    ? `<video class="nav-landing-card-shot" muted loop playsinline autoplay preload="metadata" aria-hidden="true"></video>`
+                    : `<div class="nav-landing-card-shot" aria-hidden="true"></div>`;
             const inner =
                 `<div class="nav-landing-card-text">` +
                 `<span class="nav-landing-card-title" data-i18n>${escapeHtmlText(navMeta.title)}</span>` +
                 `<span class="nav-landing-card-subtitle" data-i18n>${escapeHtmlText(navMeta.subtitle)}</span>` +
                 `</div>` +
-                `<div class="nav-landing-card-shot" aria-hidden="true"></div>`;
+                shot;
             html = html.replace(re, `${openTag}${inner}${m[3]}`);
         }
     }

client/src/ts/demos/genAttributeBundledDemoManifest.generated.ts

@@ -0,0 +1,4 @@
+/**
+ * Generated by GenAttributeDemoManifestPlugin — do not edit.
+ */
+export const GEN_ATTRIBUTE_BUNDLED_DEMO_SLUGS: readonly string[] = ["Write a sonnet about love","写一首绝句，主题是春天","总结","翻译"];

client/src/ts/demos/genAttributeBundledDemos.ts

@@ -1,10 +1,10 @@
 /**
- * Gen Attribute 打包 demo：JSON 放在 `dist/demos/gen_attribute/`，运行时 fetch，不打入 bundle。
- * 列表来自同目录 `manifest.json`（构建时由 webpack 插件生成）。
+ * Gen Attribute 打包 demo：大 JSON 在 `dist/demos/gen_attribute/`，运行时 fetch；slug 列表构建期内联自 generated 模块。
  */
 
 import type { GenAttrCachedRun } from '../storage/genAttributeRunCache';
 import { isKnownPersistedCompletionReason } from '../utils/generationEndReasonLabel';
+import { GEN_ATTRIBUTE_BUNDLED_DEMO_SLUGS } from './genAttributeBundledDemoManifest.generated';
 
 const BASE = 'demos/gen_attribute/';
 
@@ -43,39 +43,11 @@ function isValidGenAttrCachedRunPayload(v: unknown): v is GenAttrCachedRun {
 const payloadCache = new Map<string, GenAttrCachedRun>();
 const payloadInflight = new Map<string, Promise<GenAttrCachedRun | undefined>>();
 
-type BundledDemoListEntry = { id: string; label: string };
+export type BundledDemoListEntry = { id: string; label: string };
 
-let manifestListCache: readonly BundledDemoListEntry[] | undefined;
-let manifestListInflight: Promise<readonly BundledDemoListEntry[]> | undefined;
-
-/**
- * manifest 构建期固定；本会话内只网络请求一次，并发首次调用会去重。
- */
-export async function fetchBundledGenAttributeDemoList(): Promise<readonly BundledDemoListEntry[]> {
-    if (manifestListCache) return manifestListCache;
-    if (!manifestListInflight) {
-        manifestListInflight = fetch(new URL('manifest.json', baseUrl()))
-            .then((r) => {
-                if (!r.ok) throw new Error(`manifest: ${r.status}`);
-                return r.json() as Promise<unknown>;
-            })
-            .then((j) => {
-                const slugs =
-                    j != null &&
-                    typeof j === 'object' &&
-                    'slugs' in j &&
-                    Array.isArray((j as { slugs: unknown }).slugs)
-                        ? (j as { slugs: unknown[] }).slugs.filter((x): x is string => typeof x === 'string')
-                        : [];
-                const list = slugs.map((slug) => ({ id: slug, label: slug }));
-                manifestListCache = list;
-                return list;
-            })
-            .finally(() => {
-                manifestListInflight = undefined;
-            });
-    }
-    return manifestListInflight;
+/** 构建期固定的 bundled demo 列表（与当前 JS 同版本）。 */
+export function getBundledGenAttributeDemoList(): readonly BundledDemoListEntry[] {
+    return GEN_ATTRIBUTE_BUNDLED_DEMO_SLUGS.map((slug) => ({ id: slug, label: slug }));
 }
 
 /**

client/src/ts/gen_attribute.ts

@@ -46,7 +46,7 @@ import {
 } from './utils/contentUrl';
 import {
     fetchBundledGenAttributeDemoBySlug,
-    fetchBundledGenAttributeDemoList,
+    getBundledGenAttributeDemoList,
     isGenAttrRunPayloadValidForUi,
 } from './demos/genAttributeBundledDemos';
 import { extractErrorMessage } from './utils/errorUtils';
@@ -865,8 +865,8 @@ async function restoreGenAttrFromDemoSlug(slug: string): Promise<void> {
 const genAttrCachedHistoryBtn = document.getElementById('gen_attr_cached_history_btn');
 let genAttrBundledDemoEntries: Array<{ id: string; label: string }> = [];
 
-async function refreshGenAttrBundledDemoEntriesList(): Promise<void> {
-    genAttrBundledDemoEntries = [...(await fetchBundledGenAttributeDemoList())];
+function refreshGenAttrBundledDemoEntriesList(): void {
+    genAttrBundledDemoEntries = [...getBundledGenAttributeDemoList()];
 }
 
 const genCachedHistory = initCachedHistoryQueryDropdown({
@@ -898,9 +898,7 @@ initQueryHistoryDropdown({
     applyHistoryOnHover: true,
 });
 
-void refreshGenAttrBundledDemoEntriesList().catch((e) => {
-    console.warn('[gen_attribute] bundled demo manifest prefetch failed', e);
-});
+refreshGenAttrBundledDemoEntriesList();
 
 // --- 进度与指标 ---
 function showProgress(current: number, total: number): void {

client/src/ts/home.ts

@@ -2,10 +2,12 @@
  * 极简导航首页：主题与语言与 analysis 等页通过 localStorage 一致。
  */
 import './utils/d3-polyfill';
+import dagPreviewLight from '../content/images/dag.mov';
+import dagPreviewDark from '../content/images/dag-dark.mov';
 import '../css/start.scss';
 import '../css/home.scss';
 
-import { initThemeManager } from './ui/theme';
+import { initThemeManager, type Theme } from './ui/theme';
 import { initLanguageManager } from './ui/language';
 import { getCurrentLanguage, initI18n, tr } from './lang/i18n-lite';
 import { AdminManager } from './utils/adminManager';
@@ -28,6 +30,19 @@ function applyGenAttributeNavCardHref(): void {
     a.setAttribute('href', `gen_attribute.html?demo=${encodeURIComponent(slug)}`);
 }
 
+const DAG_PREVIEW_BY_THEME: Record<Theme, string> = {
+    light: dagPreviewLight,
+    dark: dagPreviewDark,
+};
+
+function syncGenAttributeCardPreviewVideo(theme: Theme): void {
+    const v = document.querySelector<HTMLVideoElement>(
+        'a.nav-landing-card[data-nav-page="genAttribute"] video.nav-landing-card-shot'
+    );
+    if (!v) return;
+    v.src = DAG_PREVIEW_BY_THEME[theme];
+}
+
 applyGenAttributeNavCardHref();
 
 const apiPrefix = URLHandler.parameters['api'] || '';
@@ -35,7 +50,7 @@ const { api } = initializeCommonApp(apiPrefix);
 const adminManager = AdminManager.getInstance();
 api.setAdminToken(adminManager.isInAdminMode() ? adminManager.getAdminToken() : null);
 
-const themeManager = initThemeManager({}, '#theme_dropdown');
+const themeManager = initThemeManager({ onThemeChange: syncGenAttributeCardPreviewVideo }, '#theme_dropdown');
 const languageManager = initLanguageManager({}, '#language_dropdown');
 
 void new SettingsMenuManager(

client/src/ts/lang/translations.ts

@@ -215,7 +215,6 @@ export const translations: Translations = {
         'This action cannot be undone.': '此操作不可撤销。',
 
         // ========== Demo 对比页面 ==========
-        'InfoLens Home': '返回首页',
         'Import Result': '导入结果',
         'Diff Mode': '差分模式',
         'Move left': '左移',

client/src/ts/types/html.d.ts

@@ -6,3 +6,8 @@ declare module '*.html' {
     const content: string;
     export default content;
 }
+
+declare module '*.mov' {
+    const url: string;
+    export default url;
+}

client/src/webpack.config.js

@@ -73,6 +73,10 @@ module.exports = {
                     }
                 }
             },
+            {
+                test: /\.mov$/,
+                type: 'asset/resource'
+            },
             {
                 test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                 type: 'asset',