From ed2d08de9fbaca71c939fc66270fcfee98f0c511 Mon Sep 17 00:00:00 2001
From: Jeffery <jiantw83@yahoo.com>
Date: Thu, 17 Sep 2026 06:22:27 +0000
Subject: [PATCH] =?UTF-8?q?feat(=E7=B8=BD=E8=A6=BD=E6=A8=A1=E6=9D=BF):=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9C=96=E8=A7=A3=E7=89=88=E7=B8=BD=E8=A6=BD?=
 =?UTF-8?q?=E7=9A=84=20HTML=20=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

給非技術的利害關係人在會議上直接投影用：一句話總覽、目標、流程圖，分析階段再多
一張工作包全景。

樣式全部集中在單一 style 區塊，內文只放佔位——改版面不必動內容，換內容不必碰樣式。
深色模式跟隨系統，手機寬度另有斷點，投影與傳連結兩種場合都看得清楚。

工作包全景是整段佔位、獨佔一行，規劃階段填空字串時整段會乾淨消失；若把它包在寫死
的 section 裡，規劃版就會留下一個空標題。

mermaid 由 CDN 載入並實際渲染，而不是把原始碼丟給讀者看；代價是離線開啟時圖不會出來。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 templates/overview-artifact.html | 112 +++++++++++++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 templates/overview-artifact.html

diff --git a/templates/overview-artifact.html b/templates/overview-artifact.html
new file mode 100644
index 0000000..0b1f4ec
--- /dev/null
+++ b/templates/overview-artifact.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{標題}}</title>
+<style>
+  /* 樣式全部集中在這裡，內文只放佔位——改版面不必動內容，換內容不必碰樣式 */
+  :root {
+    --bg: #ffffff;
+    --fg: #1f2328;
+    --muted: #59636e;
+    --line: #d1d9e0;
+    --accent: #0969da;
+    --surface: #f6f8fa;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --bg: #0d1117;
+      --fg: #e6edf3;
+      --muted: #9198a1;
+      --line: #3d444d;
+      --accent: #4493f8;
+      --surface: #151b23;
+    }
+  }
+  :root[data-theme="dark"] {
+    --bg: #0d1117;
+    --fg: #e6edf3;
+    --muted: #9198a1;
+    --line: #3d444d;
+    --accent: #4493f8;
+    --surface: #151b23;
+  }
+
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    padding: 48px 16px 96px;
+    background: var(--bg);
+    color: var(--fg);
+    font: 16px/1.7 -apple-system, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
+  }
+  main { max-width: 900px; margin: 0 auto; }
+
+  header { border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 40px; }
+  h1 { font-size: 30px; line-height: 1.3; margin: 0 0 12px; }
+  .meta { color: var(--muted); font-size: 14px; }
+  .meta a { color: var(--accent); text-decoration: none; }
+  .meta a:hover { text-decoration: underline; }
+
+  .lede {
+    font-size: 21px;
+    line-height: 1.6;
+    margin: 0 0 40px;
+    padding: 20px 24px;
+    background: var(--surface);
+    border-left: 3px solid var(--accent);
+    border-radius: 0 8px 8px 0;
+  }
+
+  section { margin-bottom: 40px; }
+  h2 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
+       color: var(--muted); margin: 0 0 16px; font-weight: 600; }
+  ul { margin: 0; padding-left: 22px; }
+  li { margin-bottom: 8px; }
+
+  figure { margin: 0; padding: 24px; background: var(--surface);
+           border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
+  figure .mermaid { display: flex; justify-content: center; }
+
+  footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line);
+           color: var(--muted); font-size: 13px; }
+
+  @media (max-width: 600px) {
+    body { padding: 32px 16px 64px; }
+    h1 { font-size: 24px; }
+    .lede { font-size: 18px; padding: 16px 18px; }
+  }
+</style>
+</head>
+<body>
+<main>
+  <header>
+    <h1>{{標題}}</h1>
+    <p class="meta">{{來源議題}}</p>
+  </header>
+
+  <p class="lede">{{總覽}}</p>
+
+  <section>
+    <h2>目標</h2>
+    <ul>{{目標}}</ul>
+  </section>
+
+  <section>
+    <h2>流程</h2>
+    <figure><div class="mermaid">{{流程圖}}</div></figure>
+  </section>
+
+  {{工作包全景}}
+
+  <footer>{{頁尾}}</footer>
+</main>
+
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+  const dark = matchMedia('(prefers-color-scheme: dark)').matches;
+  mermaid.initialize({ startOnLoad: true, theme: dark ? 'dark' : 'default' });
+</script>
+</body>
+</html>