skill-forge-hub 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +82 -150
  3. package/annual-report/SKILL.md +23 -3
  4. package/annual-report/resources/data-collection.md +20 -4
  5. package/annual-report/resources/disk-and-html.md +3 -3
  6. package/annual-report/resources/reference.html +31 -10
  7. package/annual-report/resources/usage-guide.md +8 -0
  8. package/annual-report/user-config.md +5 -5
  9. package/article-to-html/SKILL.md +26 -7
  10. package/article-to-html/design-system.md +9 -3
  11. package/article-to-html/resources/reference.html +631 -0
  12. package/article-to-html/resources/usage-guide.md +9 -1
  13. package/article-to-html/user-config.md +6 -3
  14. package/cli.js +2 -2
  15. package/daily-report/SKILL.md +23 -3
  16. package/daily-report/resources/content-rules.md +1 -1
  17. package/daily-report/resources/data-collection.md +24 -4
  18. package/daily-report/resources/disk-and-html.md +2 -2
  19. package/daily-report/resources/reference.html +24 -3
  20. package/daily-report/resources/usage-guide.md +8 -0
  21. package/daily-report/user-config.md +5 -5
  22. package/deck-stage/SKILL.md +15 -4
  23. package/deck-stage/resources/cover-template.html +3 -3
  24. package/deck-stage/resources/data-schema.md +11 -1
  25. package/deck-stage/resources/pptx-builder.js +1 -1
  26. package/deck-stage/resources/usage-guide.md +9 -2
  27. package/docs/architecture.md +89 -0
  28. package/docs/images/article-to-html.png +0 -0
  29. package/docs/images/daily-report.png +0 -0
  30. package/docs/images/deck-stage.png +0 -0
  31. package/docs/images/magic-deck.png +0 -0
  32. package/docs/images/meeting-minutes.png +0 -0
  33. package/docs/images/prompt-pouch.png +0 -0
  34. package/docs/install.md +71 -0
  35. package/magic-deck/SKILL.md +23 -8
  36. package/magic-deck/resources/content-guide.md +5 -4
  37. package/magic-deck/resources/deck-spec.md +18 -11
  38. package/magic-deck/resources/reference.html +110 -32
  39. package/magic-deck/resources/usage-guide.md +10 -2
  40. package/magic-deck/user-config.md +4 -4
  41. package/meeting-minutes/SKILL.md +51 -0
  42. package/meeting-minutes/resources/content-rules.md +57 -0
  43. package/meeting-minutes/resources/disk-and-html.md +26 -0
  44. package/meeting-minutes/resources/meeting-type-dictionary.md +24 -0
  45. package/meeting-minutes/resources/reference.html +436 -0
  46. package/meeting-minutes/resources/usage-guide.md +63 -0
  47. package/meeting-minutes/user-config.md +56 -0
  48. package/meta-forge/SKILL.md +6 -6
  49. package/meta-forge/resources/forge-rules.md +55 -10
  50. package/meta-forge/resources/usage-guide.md +7 -3
  51. package/meta-forge/user-config.md +1 -1
  52. package/monthly-report/SKILL.md +62 -0
  53. package/monthly-report/resources/content-rules.md +40 -0
  54. package/monthly-report/resources/data-collection.md +44 -0
  55. package/monthly-report/resources/date-parsing.md +18 -0
  56. package/monthly-report/resources/disk-and-html.md +29 -0
  57. package/monthly-report/resources/industry-dictionary.md +21 -0
  58. package/monthly-report/resources/reference.html +531 -0
  59. package/monthly-report/resources/usage-guide.md +75 -0
  60. package/monthly-report/user-config.md +53 -0
  61. package/package.json +9 -2
  62. package/prompt-pouch/SKILL.md +17 -2
  63. package/prompt-pouch/resources/data-format.md +1 -1
  64. package/prompt-pouch/resources/reference.html +56 -24
  65. package/prompt-pouch/resources/usage-guide.md +10 -3
  66. package/quarterly-report/SKILL.md +63 -0
  67. package/quarterly-report/resources/content-rules.md +42 -0
  68. package/quarterly-report/resources/data-collection.md +46 -0
  69. package/quarterly-report/resources/date-parsing.md +19 -0
  70. package/quarterly-report/resources/disk-and-html.md +22 -0
  71. package/quarterly-report/resources/industry-dictionary.md +21 -0
  72. package/quarterly-report/resources/reference.html +509 -0
  73. package/quarterly-report/resources/usage-guide.md +76 -0
  74. package/quarterly-report/user-config.md +53 -0
  75. package/spec-doc2spec/SKILL.md +21 -22
  76. package/spec-doc2spec/resources/checklist.md +7 -0
  77. package/spec-doc2spec/resources/images.md +14 -5
  78. package/spec-doc2spec/resources/structure.md +19 -10
  79. package/spec-doc2spec/resources/usage-guide.md +10 -8
  80. package/spec-doc2spec/user-config.md +2 -2
  81. package/spec-spec2doc/SKILL.md +4 -4
  82. package/spec-spec2doc/resources/checklist.md +6 -0
  83. package/spec-spec2doc/resources/pdf-path.md +1 -0
  84. package/spec-spec2doc/resources/usage-guide.md +2 -2
  85. package/template/SKILL.md +1 -1
  86. package/weekly-report/SKILL.md +23 -3
  87. package/weekly-report/resources/content-rules.md +1 -1
  88. package/weekly-report/resources/data-collection.md +24 -4
  89. package/weekly-report/resources/disk-and-html.md +2 -2
  90. package/weekly-report/resources/reference.html +24 -3
  91. package/weekly-report/resources/usage-guide.md +8 -0
  92. package/weekly-report/user-config.md +5 -5
package/article-to-html/resources/reference.html ADDED
@@ -0,0 +1,631 @@
1
+ <!DOCTYPE html>
2
+ <!--
3
+ ═══════════════════════════════════════════════════════════════
4
+ article-to-html · A 款（暗色封面长文风）设计真相源
5
+ ═══════════════════════════════════════════════════════════════
6
+ 用途：生成任何 A 款页面前必须先 Read 本文件（骨架 + 18 组件全集组装示范）。
7
+ 与 design-system.md 冲突时，以本文件为准；改 CSS 时两份必须同步更新。
8
+ B-F 五款版式 = 在 A 款骨架上按 design-system.md「0. 风格菜单」参数变体。
9
+ 字体白名单锁死：Roboto + Source Han Sans SC，零兜底。
10
+ ═══════════════════════════════════════════════════════════════
11
+ -->
12
+ <html lang="zh-CN" data-theme="tech">
13
+ <head>
14
+ <meta charset="UTF-8">
15
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
16
+ <meta name="sf-template" content="article-to-html@2">
17
+ <meta name="article-id" content="REF-ARTICLE-0000">
18
+ <title>设计系统组件示范 · article-to-html</title>
19
+ <style>
20
+ @font-face { font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/roboto-latin-400-normal.woff2') format('woff2'); }
21
+ @font-face { font-family:'Roboto'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/roboto-latin-500-normal.woff2') format('woff2'); }
22
+ @font-face { font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/roboto-latin-700-normal.woff2') format('woff2'); }
23
+ @font-face { font-family:'Roboto'; font-style:normal; font-weight:900; font-display:swap; src:url('../assets/fonts/roboto-latin-900-normal.woff2') format('woff2'); }
24
+
25
+ :root{
26
+ --blue:#2563eb; --blue-bg:#ebf0ff; --blue-line:#a1bdfa; /* 多彩组件固定蓝（layers/fnode/ask/mode 等），不随主题变 */
27
+ --red:#e24b4a; --red-bg:#fcebeb; --red-line:#f09595; --red-dark:#a32d2d;
28
+ --green:#16a34a; --green-bg:#ecfdf5; --green-line:#86efac; --green-dark:#15803d;
29
+ --purple:#7c3aed; --purple-bg:#f5f0ff; --purple-line:#c4b5fd; --purple-dark:#6d28d9;
30
+ --teal:#0d9488; --teal-bg:#f0fdfa; --teal-line:#5eead4;
31
+ --orange:#ea580c; --orange-bg:#fff7ed; --orange-line:#fdba74;
32
+ --ink:#1f2937; --ink-2:#4b5563; --ink-3:#6b7280; --ink-4:#9ca3af;
33
+ --bg:#f6f8fb; --card:#ffffff; --line:#e5e7eb;
34
+ /* ── 主题色令牌（tech 默认值；gold/forest/plum 见下方 [data-theme] 块；A 款强调色一律引用 --accent 家族，禁止硬编码）── */
35
+ --accent:#2563eb; --accent-bg:#ebf0ff; --accent-line:#a1bdfa; --accent-ink:#1e4ad6;
36
+ --hero-base:linear-gradient(160deg,#0b1220 0%,#0e1a33 45%,#131c3a 100%);
37
+ --hero-glow:radial-gradient(1200px 600px at 15% -10%,rgba(96,165,250,.35),transparent 55%),radial-gradient(1000px 500px at 110% 30%,rgba(167,139,250,.30),transparent 55%),radial-gradient(900px 700px at 50% 120%,rgba(45,212,191,.22),transparent 60%);
38
+ --title-grad:linear-gradient(90deg,#7dd3fc,#a5b4fc,#c4b5fd);
39
+ --kicker-color:#93c5fd; --kicker-bg:rgba(59,130,246,.14); --kicker-line:rgba(96,165,250,.35);
40
+ --shadow-sm:0 1px 3px rgba(17,24,39,.06),0 1px 2px rgba(17,24,39,.04);
41
+ --shadow-md:0 4px 12px rgba(17,24,39,.08),0 2px 4px rgba(17,24,39,.04);
42
+ --shadow-lg:0 12px 32px rgba(17,24,39,.12),0 4px 8px rgba(17,24,39,.06);
43
+ --sans:'Roboto','Source Han Sans SC';
44
+ --mono:'Source Han Sans SC';
45
+ }
46
+ /* ── 三款独立主题：html[data-theme] 运行时切换（A 款专用）── */
47
+ [data-theme="gold"]{
48
+ --accent:#b45309; --accent-bg:#fdf4e7; --accent-line:#f0d5b5; --accent-ink:#92400e;
49
+ --hero-base:linear-gradient(160deg,#171009 0%,#241708 45%,#2e1f0d 100%);
50
+ --hero-glow:radial-gradient(1200px 600px at 15% -10%,rgba(251,191,36,.30),transparent 55%),radial-gradient(1000px 500px at 110% 30%,rgba(251,146,60,.26),transparent 55%),radial-gradient(900px 700px at 50% 120%,rgba(45,212,191,.16),transparent 60%);
51
+ --title-grad:linear-gradient(90deg,#fcd34d,#fdba74,#fca5a5);
52
+ --kicker-color:#fde68a; --kicker-bg:rgba(251,191,36,.12); --kicker-line:rgba(251,191,36,.35);
53
+ }
54
+ [data-theme="forest"]{
55
+ --accent:#0f766e; --accent-bg:#e6f4f2; --accent-line:#a7e8dd; --accent-ink:#115e59;
56
+ --hero-base:linear-gradient(160deg,#071512 0%,#0a1f1a 45%,#0d2a22 100%);
57
+ --hero-glow:radial-gradient(1200px 600px at 15% -10%,rgba(52,211,153,.30),transparent 55%),radial-gradient(1000px 500px at 110% 30%,rgba(45,212,191,.28),transparent 55%),radial-gradient(900px 700px at 50% 120%,rgba(96,165,250,.16),transparent 60%);
58
+ --title-grad:linear-gradient(90deg,#6ee7b7,#5eead4,#93c5fd);
59
+ --kicker-color:#a7f3d0; --kicker-bg:rgba(52,211,153,.12); --kicker-line:rgba(52,211,153,.35);
60
+ }
61
+ [data-theme="plum"]{
62
+ --accent:#7c3aed; --accent-bg:#f5f0ff; --accent-line:#d5c7fd; --accent-ink:#6d28d9;
63
+ --hero-base:linear-gradient(160deg,#120b20 0%,#1a1133 45%,#221540 100%);
64
+ --hero-glow:radial-gradient(1200px 600px at 15% -10%,rgba(167,139,250,.34),transparent 55%),radial-gradient(1000px 500px at 110% 30%,rgba(196,181,253,.28),transparent 55%),radial-gradient(900px 700px at 50% 120%,rgba(45,212,191,.16),transparent 60%);
65
+ --title-grad:linear-gradient(90deg,#c4b5fd,#a5b4fc,#7dd3fc);
66
+ --kicker-color:#ddd6fe; --kicker-bg:rgba(167,139,250,.14); --kicker-line:rgba(167,139,250,.35);
67
+ }
68
+ /* ── 主题换肤坞（A 款页面专用）：右下角四色点随点随换，记忆上次选择；打印与 ?shot 截图模式隐藏 ── */
69
+ .theme-dock{position:fixed;right:18px;bottom:18px;z-index:1001;display:flex;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:0 4px 18px rgba(17,24,39,.15)}
70
+ .theme-dock .th-dot{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;padding:0;transition:transform .15s ease,border-color .15s ease}
71
+ .theme-dock .th-dot:hover{transform:scale(1.18)}
72
+ .theme-dock .th-dot.on{border-color:var(--ink)}
73
+ .theme-dock .th-dot[data-theme="tech"]{background:#2563eb}
74
+ .theme-dock .th-dot[data-theme="gold"]{background:#b45309}
75
+ .theme-dock .th-dot[data-theme="forest"]{background:#0f766e}
76
+ .theme-dock .th-dot[data-theme="plum"]{background:#7c3aed}
77
+ @media print{.theme-dock{display:none}}
78
+ *{margin:0;padding:0;box-sizing:border-box}
79
+ body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.75;font-size:16px}
80
+ .wrap{max-width:880px;margin:0 auto;padding:0 28px}
81
+ section{padding:56px 0 8px}
82
+ h1,h2,h3,h4{line-height:1.35;font-weight:700}
83
+ p{margin:0 0 1.1em}
84
+
85
+ /* ── 封面 hero（深色渐变 + 流程节点）── */
86
+ .hero{position:relative;overflow:hidden;color:#fff;padding:96px 0 88px;text-align:center;
87
+ background:var(--hero-glow),var(--hero-base)}
88
+ .hero::before{content:"";position:absolute;inset:0;background-image:
89
+ linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),
90
+ linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
91
+ background-size:44px 44px;pointer-events:none}
92
+ .hero .inner{position:relative;z-index:2}
93
+ .hero .kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.14em;color:var(--kicker-color);
94
+ background:var(--kicker-bg);border:1px solid var(--kicker-line);padding:7px 18px;border-radius:999px;margin-bottom:30px}
95
+ .hero h1{font-size:44px;font-weight:900;margin-bottom:18px}
96
+ .hero h1 .grad{background:var(--title-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
97
+ .hero .sub{font-size:19px;color:#cbd5e1;margin-bottom:12px}
98
+ .hero .flow{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:44px;flex-wrap:wrap}
99
+ .hero .flow .node{display:flex;align-items:center;gap:8px;background:rgba(30,41,59,.7);border:1px solid rgba(148,163,184,.3);
100
+ padding:9px 18px;border-radius:12px;font-size:14px;color:#e2e8f0}
101
+ .hero .flow .node .n{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
102
+ font-size:12px;font-weight:700;color:#fff;background:var(--title-grad)}
103
+ .hero .flow .arrow{color:#64748b;font-size:18px}
104
+ .hero .tagline{margin-top:34px;font-size:15px;color:#94a3b8;letter-spacing:.08em}
105
+
106
+ /* ── 章节标题 + 通用卡片 ── */
107
+ .sec-head{display:flex;align-items:baseline;gap:14px;margin:0 0 26px;padding-bottom:14px;border-bottom:1px solid var(--line)}
108
+ .sec-head .no{font-weight:900;font-size:30px;color:var(--accent);letter-spacing:-.02em;min-width:52px}
109
+ .sec-head h2{font-size:26px}
110
+ .sec-head .en{font-size:12px;letter-spacing:.12em;color:var(--ink-4);text-transform:uppercase;margin-left:auto}
111
+ .lead{font-size:17px;color:var(--ink-2);margin-bottom:28px}
112
+ .h3{font-size:19px;margin:34px 0 14px;display:flex;align-items:center;gap:10px}
113
+ .h3::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--accent)}
114
+ .card{background:var(--card);border-radius:16px;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
115
+ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
116
+ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
117
+ @media(max-width:720px){.grid-2,.grid-3{grid-template-columns:1fr}}
118
+
119
+ /* ── 对比双卡 .vs-panel ── */
120
+ .vs-panel{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--line);background:#fff}
121
+ .vs-panel .side{padding:28px 30px 24px}
122
+ .vs-panel .side.bad{background:linear-gradient(180deg,#fff 0%,#fff7f5 100%)}
123
+ .vs-panel .side.good{background:linear-gradient(180deg,#fff 0%,#f4fcf7 100%);border-left:1px solid var(--line)}
124
+ .vs-panel h4{font-size:17px;margin-bottom:18px;display:flex;align-items:center;gap:9px}
125
+ .vs-panel .side.bad h4{color:var(--red-dark)}
126
+ .vs-panel .side.good h4{color:var(--green-dark)}
127
+ .vs-panel h4 .ico{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
128
+ .vs-panel .bad h4 .ico{background:var(--red-bg);border:1px solid var(--red-line)}
129
+ .vs-panel .good h4 .ico{background:var(--green-bg);border:1px solid var(--green-line)}
130
+ .vs-panel ul{list-style:none}
131
+ .vs-panel li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.5px;color:var(--ink-2)}
132
+ .vs-panel li:last-child{border-bottom:none}
133
+ .vs-panel li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;margin-top:8px}
134
+ .vs-panel .bad li::before{background:var(--red)}
135
+ .vs-panel .good li::before{background:var(--green)}
136
+
137
+ /* ── 表格 .tbl-wrap ── */
138
+ .tbl-wrap{overflow-x:auto;border-radius:14px;box-shadow:var(--shadow-sm);border:1px solid var(--line);background:#fff}
139
+ table{border-collapse:collapse;width:100%;font-size:14px;min-width:640px}
140
+ th{background:#f0f4fb;color:#334e7e;font-weight:700;text-align:left;padding:12px 16px;border-bottom:2px solid #dbe4f5;white-space:nowrap;font-size:13.5px}
141
+ td{padding:11px 16px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
142
+ tr:last-child td{border-bottom:none}
143
+ tbody tr:hover{background:#f8fafc}
144
+ td.ok{color:var(--green);text-align:center;font-size:15px}
145
+ td.no{color:#d1d5db;text-align:center}
146
+ td.hl{font-weight:700;color:var(--ink)}
147
+ .tbl-cap{font-size:13px;color:var(--ink-3);margin:10px 0 0;text-align:center}
148
+
149
+ /* ── 分层架构 .layers ── */
150
+ .layers{position:relative;padding-right:56px}
151
+ .layer{border-radius:14px;margin-bottom:20px;overflow:hidden;border:1px solid}
152
+ .layer .h{color:#fff;padding:10px 20px;font-size:15px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:10px}
153
+ .layer .h .d{font-size:12px;font-weight:400;opacity:.85}
154
+ .layer .body{padding:16px;display:grid;gap:12px}
155
+ .layer.l1{border-color:var(--blue-line);background:var(--blue-bg)}
156
+ .layer.l1 .h{background:linear-gradient(90deg,#1d4ed8,#2563eb)}
157
+ .layer.l2{border-color:#6ee7b7;background:var(--green-bg)}
158
+ .layer.l2 .h{background:linear-gradient(90deg,#15803d,#16a34a)}
159
+ .layer.l3{border-color:var(--purple-line);background:var(--purple-bg)}
160
+ .layer.l3 .h{background:linear-gradient(90deg,#6d28d9,#7c3aed)}
161
+ .layer.l1 .body{grid-template-columns:repeat(4,1fr)}
162
+ .layer.l2 .body{grid-template-columns:repeat(3,1fr)}
163
+ .layer.l3 .body{grid-template-columns:repeat(3,1fr)}
164
+ .fdoc{background:#fff;border-radius:10px;padding:12px 10px;text-align:center;box-shadow:var(--shadow-sm)}
165
+ .fdoc .f{font-size:13px;font-weight:700;font-family:var(--mono)}
166
+ .fdoc .d{font-size:11.5px;margin-top:2px}
167
+ .layer.l1 .fdoc{border:1px solid var(--blue-line)}.layer.l1 .fdoc .f{color:#1e4ad6}
168
+ .layer.l2 .fdoc{border:1px solid var(--green-line)}.layer.l2 .fdoc .f{color:#15803d}
169
+ .layer.l3 .fdoc{border:1px solid var(--purple-line)}.layer.l3 .fdoc .f{color:#6d28d9}
170
+ .fdoc.sync{border-style:dashed;background:#ede9fe}
171
+ .layer-arrow{display:flex;justify-content:center;color:var(--ink-3);font-size:18px;margin:-6px 0 14px}
172
+ .sync-label{position:absolute;right:0;top:0;bottom:0;width:52px;display:flex;align-items:center;justify-content:center}
173
+ .sync-label .vline{border-left:2px dashed var(--purple-line);height:88%;display:flex;align-items:center}
174
+ .sync-label span{writing-mode:vertical-rl;font-size:12px;color:#8b5cf6;letter-spacing:.3em;background:var(--bg);padding:8px 0}
175
+
176
+ /* ── 升级图 .upgrade / 铁律 .rules / 警示 .callout ── */
177
+ .upgrade{display:grid;grid-template-columns:1fr 64px 1fr;gap:0;align-items:stretch}
178
+ .upgrade .col{border-radius:16px;padding:24px 24px 0;position:relative;padding-bottom:52px}
179
+ .upgrade .col.vibe{background:var(--red-bg);border:1.5px solid var(--red-line)}
180
+ .upgrade .col.spec{background:var(--green-bg);border:1.5px solid var(--green-line)}
181
+ .upgrade .col .ttl{font-size:19px;font-weight:900;margin-bottom:2px}
182
+ .upgrade .col.vibe .ttl{color:var(--red-dark)}
183
+ .upgrade .col.spec .ttl{color:var(--green-dark)}
184
+ .upgrade .col .st{font-size:13px;margin-bottom:16px}
185
+ .upgrade .col .chip{background:#fff;border-radius:10px;padding:11px 14px;font-size:14px;text-align:center;margin-bottom:16px;box-shadow:var(--shadow-sm)}
186
+ .upgrade .col ul{list-style:none;margin:0 0 18px}
187
+ .upgrade .col li{font-size:13.5px;padding:6.5px 0 6.5px 22px;position:relative;color:var(--ink-2)}
188
+ .upgrade .col.vibe li::before{content:"✕";position:absolute;left:0;top:7px;color:var(--red);font-weight:700;font-size:12px}
189
+ .upgrade .col.spec li::before{content:"✓";position:absolute;left:0;top:7px;color:var(--green);font-weight:900;font-size:12px}
190
+ .upgrade .col .band{position:absolute;left:0;right:0;bottom:0;border-radius:0 0 14px 14px;padding:12px;text-align:center;color:#fff;font-size:14.5px;font-weight:700}
191
+ .upgrade .col.vibe .band{background:linear-gradient(90deg,#dc2626,#e24b4a)}
192
+ .upgrade .col.spec .band{background:linear-gradient(90deg,#16a34a,#22c55e)}
193
+ .upgrade .mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
194
+ .upgrade .mid .arrow{width:40px;height:40px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:17px;box-shadow:var(--shadow-sm)}
195
+ .upgrade .mid span{font-size:12px;color:var(--ink-3);writing-mode:vertical-lr;letter-spacing:.2em}
196
+
197
+ .callout{display:flex;gap:16px;align-items:center;background:linear-gradient(90deg,#fef2f2,#fff);border:1px solid var(--red-line);border-left:5px solid var(--red);border-radius:14px;padding:20px 26px;margin:26px 0;box-shadow:var(--shadow-sm)}
198
+ .callout .big{font-size:34px;font-weight:900;color:var(--red);white-space:nowrap}
199
+ .callout p{margin:0;font-size:15px;color:var(--ink-2)}
200
+ .callout p b{color:var(--red-dark)}
201
+
202
+ .rules{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
203
+ .rule{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 22px;position:relative;box-shadow:var(--shadow-sm);transition:transform .2s}
204
+ .rule:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
205
+ .rule .num{position:absolute;top:16px;right:18px;font-size:34px;font-weight:900;color:var(--line)}
206
+ .rule .en{font-size:16px;font-weight:900;color:var(--accent);margin-bottom:8px}
207
+ .rule p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.7}
208
+
209
+ /* ── 暗色面板 .dark-panel / 流程图 / 模式分级 ── */
210
+ .dark-panel{background:linear-gradient(160deg,#0f172a,#111c36);border-radius:18px;padding:34px 30px;color:#e2e8f0;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
211
+ .dark-panel::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(96,165,250,.09) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
212
+ .dark-panel .dp-title{text-align:center;margin-bottom:6px;font-size:21px;font-weight:700;color:#f1f5f9}
213
+ .dark-panel .dp-sub{text-align:center;font-size:13.5px;color:#94a3b8;margin-bottom:28px}
214
+ .ask-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;z-index:1}
215
+ .ask-card{background:rgba(30,41,59,.72);border:1px solid;border-radius:14px;padding:16px 16px 14px}
216
+ .ask-card .ac-t{font-weight:700;font-size:15px;margin-bottom:9px;display:flex;align-items:center;gap:8px}
217
+ .ask-card .ac-t .dot{width:8px;height:8px;border-radius:50%}
218
+ .ask-card .q{font-size:12.5px;color:#94a3b8;margin-bottom:2px}
219
+ .ask-card .q code{color:#cbd5e1;background:rgba(148,163,184,.14);padding:1px 6px;border-radius:5px;font-family:var(--mono);font-size:11.5px}
220
+ .ask-card .feat{font-size:12px;color:#64748b;margin:8px 0 10px}
221
+ .ask-card .btn{display:inline-block;font-size:12px;font-weight:700;color:#fff;padding:4px 12px;border-radius:999px}
222
+ .ask-c1{border-color:rgba(45,212,191,.4)}.ask-c1 .ac-t{color:#5eead4}.ask-c1 .dot{background:#2dd4bf}.ask-c1 .btn{background:linear-gradient(90deg,#0d9488,#14b8a6)}
223
+ .ask-c2{border-color:rgba(251,146,60,.4)}.ask-c2 .ac-t{color:#fdba74}.ask-c2 .dot{background:#fb923c}.ask-c2 .btn{background:linear-gradient(90deg,#c2410c,#ea580c)}
224
+ .ask-c3{border-color:rgba(96,165,250,.4)}.ask-c3 .ac-t{color:#93c5fd}.ask-c3 .dot{background:#60a5fa}.ask-c3 .btn{background:linear-gradient(90deg,#1d4ed8,#3b82f6)}
225
+ .ask-c4{border-color:rgba(167,139,250,.4)}.ask-c4 .ac-t{color:#c4b5fd}.ask-c4 .dot{background:#a78bfa}.ask-c4 .btn{background:linear-gradient(90deg,#6d28d9,#8b5cf6)}
226
+
227
+ .flowchart{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow-sm)}
228
+ .flowchart .fc-title{text-align:center;font-weight:700;font-size:17px;margin-bottom:20px}
229
+ .frow{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
230
+ .fnode{padding:9px 15px;border-radius:10px;font-size:13px;font-weight:500;border:1.5px solid;white-space:nowrap}
231
+ .fnode.tag{font-weight:700}
232
+ .farr{color:var(--ink-3);font-size:15px}
233
+ .frow.rev .fnode{border-style:dashed}
234
+ .f-tag-f{color:#1d4ed8;border-color:#93c5fd;background:var(--blue-bg)}
235
+ .f-node-b{color:#0369a1;border-color:#7dd3fc;background:#f0f9ff}
236
+ .f-node-p{color:#6d28d9;border-color:var(--purple-line);background:var(--purple-bg)}
237
+ .f-node-g{color:#15803d;border-color:#86efac;background:var(--green-bg)}
238
+ .f-node-y{color:#b45309;border-color:#fcd34d;background:#fefce8}
239
+ .f-node-r{color:#b91c1c;border-color:#fca5a5;background:var(--red-bg)}
240
+ .flow-principle{margin-top:18px;background:linear-gradient(90deg,#eff6ff,#eef2ff);border:1px solid #bfdbfe;border-radius:10px;padding:11px 16px;text-align:center;font-size:13.5px;color:#1e3a8a;font-weight:500}
241
+
242
+ .modes{display:flex;flex-direction:column;gap:0;max-width:680px;margin:0 auto}
243
+ .mode{border-radius:14px;padding:16px 22px 16px 56px;position:relative;border:1px solid;box-shadow:var(--shadow-sm)}
244
+ .mode .badge{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
245
+ .mode .mt{font-weight:700;font-size:15.5px;display:flex;align-items:center;justify-content:space-between;gap:12px}
246
+ .mode .mt .lbl{font-size:12px;font-weight:700;color:#fff;padding:3px 14px;border-radius:999px;white-space:nowrap}
247
+ .mode .md{font-size:13px;margin-top:4px}
248
+ .mode.m1{background:var(--blue-bg);border-color:var(--blue-line)}.mode.m1 .badge{background:var(--blue)}.mode.m1 .mt{color:#1e4ad6}
249
+ .mode.m2{background:var(--green-bg);border-color:var(--green-line)}.mode.m2 .badge{background:var(--green)}.mode.m2 .mt{color:var(--green-dark)}
250
+ .mode.m3{background:var(--purple-bg);border-color:var(--purple-line)}.mode.m3 .badge{background:var(--purple)}.mode.m3 .mt{color:var(--purple-dark)}
251
+ .mode-arr{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink-4);font-size:11.5px;padding:9px 0}
252
+ .mode-arr::before,.mode-arr::after{content:"↓";font-size:14px}
253
+
254
+ /* ── 类型卡片 / 目录树 / 推荐 / 命令 / 对话 / 开源 / 结尾 / 作者 ── */
255
+ .ttypes{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
256
+ .tt{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 12px;box-shadow:var(--shadow-sm)}
257
+ .tt .ttn{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--accent);margin-bottom:5px}
258
+ .tt .tcount{font-size:10.5px;color:var(--ink-4);float:right;font-family:var(--sans)}
259
+ .tt p{font-size:12px;color:var(--ink-3);margin:0;line-height:1.6}
260
+
261
+ .dirtree{background:#0f172a;border-radius:14px;padding:22px 28px;font-family:var(--mono);font-size:13.5px;line-height:2.1;color:#cbd5e1;box-shadow:var(--shadow-md);overflow-x:auto}
262
+ .dt-row{display:grid;grid-template-columns:minmax(320px,1.35fr) 1fr;gap:20px}
263
+ .dt-row .dt-cmt{color:#64748b;font-family:var(--sans);font-size:12.5px}
264
+ .dt-row .dir{color:#7dd3fc;font-weight:700}
265
+ .dt-row .file{color:#e2e8f0}
266
+ .dt-row.root .dir{color:#f472b6}
267
+ .dt-ind1{padding-left:24px}
268
+ .dt-ind2{padding-left:48px}
269
+
270
+ .rec{display:grid;grid-template-columns:1fr 1fr;gap:18px}
271
+ .rec .rc{border-radius:16px;overflow:hidden;border:1px solid;box-shadow:var(--shadow-sm);background:#fff}
272
+ .rec .rc .rh{padding:13px 22px;color:#fff;font-weight:700;font-size:16px}
273
+ .rec .rc.good{border-color:var(--green-line)}.rec .rc.good .rh{background:linear-gradient(90deg,#15803d,#16a34a)}
274
+ .rec .rc.bad{border-color:var(--red-line)}.rec .rc.bad .rh{background:linear-gradient(90deg,#dc2626,#e24b4a)}
275
+ .rec .rc ul{list-style:none;padding:14px 22px 18px}
276
+ .rec .rc li{font-size:14px;color:var(--ink-2);padding:8px 0 8px 22px;position:relative;border-bottom:1px dashed var(--line)}
277
+ .rec .rc li:last-child{border-bottom:none}
278
+ .rec .good li::before{content:"✓";position:absolute;left:0;top:8px;color:var(--green);font-weight:900;font-size:13px}
279
+ .rec .bad li::before{content:"✕";position:absolute;left:0;top:8px;color:var(--red);font-weight:700;font-size:13px}
280
+
281
+ .cmd-block{background:#0f172a;border-radius:14px;padding:18px 24px;font-family:var(--mono);font-size:13.5px;line-height:2.1;color:#e2e8f0;box-shadow:var(--shadow-md);overflow-x:auto}
282
+ .cmd-block .p{color:#f472b6}
283
+ .cmd-block .c{color:#94a3b8}
284
+ .cmd-block .k{color:#7dd3fc}
285
+
286
+ .chat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:var(--shadow-sm)}
287
+ .chat .chat-title{font-weight:700;font-size:16px;margin-bottom:18px}
288
+ .msg{max-width:86%;border-radius:13px;padding:10px 15px;font-size:13.5px;margin-bottom:12px;line-height:1.65}
289
+ .msg .who{font-size:11.5px;font-weight:700;opacity:.65;margin-bottom:2px}
290
+ .msg.u{background:var(--accent-bg);border:1px solid var(--accent-line);margin-left:auto;border-bottom-right-radius:3px;color:var(--accent-ink)}
291
+ .msg.a{background:#f8fafc;border:1px solid var(--line);border-bottom-left-radius:3px;color:var(--ink-2)}
292
+
293
+ .oss{display:grid;grid-template-columns:1fr 1fr;gap:16px}
294
+ .oss .o{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-sm);text-decoration:none}
295
+ .oss .o .logo{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:17px;color:#fff;flex:none}
296
+ .oss .o .nm{font-weight:700;color:var(--ink);font-size:15px}
297
+ .oss .o .url{font-size:12.5px;color:var(--ink-3);font-family:var(--mono)}
298
+
299
+ .ending{background:linear-gradient(160deg,#0f172a,#111c36);border-radius:20px;color:#e2e8f0;padding:46px 40px;text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
300
+ .ending .e-t{position:relative;font-size:26px;font-weight:900;margin-bottom:14px}
301
+ .ending .e-t .grad{background:var(--title-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
302
+ .ending p{position:relative;color:#94a3b8;font-size:14.5px;max-width:620px;margin:0 auto 22px}
303
+ .ending .nospec{position:relative;display:inline-block;font-size:21px;font-weight:900;letter-spacing:.08em;color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-ink));padding:12px 34px;border-radius:12px;box-shadow:0 8px 26px rgba(37,99,235,.5)}
304
+
305
+ .author{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 28px;box-shadow:var(--shadow-sm);margin-bottom:60px}
306
+ .author .avatar{width:56px;height:56px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;color:#fff;background:var(--title-grad)}
307
+ .author .nm{font-weight:700;font-size:16.5px;margin-bottom:6px}
308
+ .author .nm .role{display:inline-block;font-size:11.5px;font-weight:500;color:var(--accent-ink);background:var(--accent-bg);border:1px solid var(--accent-line);padding:2px 10px;border-radius:999px;margin-left:10px;vertical-align:2px}
309
+ .author p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.7}
310
+
311
+ .foot{text-align:center;padding:34px 0 44px;color:var(--ink-4);font-size:12.5px}
312
+ </style>
313
+ </head>
314
+ <body>
315
+ <div class="hero">
316
+ <div class="inner">
317
+ <span class="kicker">ARTICLE TO HTML · 组件全集</span>
318
+ <h1>设计系统组件<span class="grad">示范页</span></h1>
319
+ <p class="sub">article-to-html 的 A 款（暗色封面长文风）真相源：全部组件按真实文章顺序组装</p>
320
+ <div class="flow">
321
+ <div class="node"><span class="n">1</span>解析</div>
322
+ <span class="arrow">→</span>
323
+ <div class="node"><span class="n">2</span>排版</div>
324
+ <span class="arrow">→</span>
325
+ <div class="node"><span class="n">3</span>构建</div>
326
+ <span class="arrow">→</span>
327
+ <div class="node"><span class="n">4</span>定格</div>
328
+ </div>
329
+ <p class="tagline">SOURCE HAN SANS SC · ROBOTO · FREE FOR COMMERCIAL USE</p>
330
+ </div>
331
+ </div>
332
+ <div class="wrap">
333
+ <section>
334
+ <p class="lead">生成任何 A 款页面前必须先 Read 本文件：骨架结构（.hero + .wrap 内 section 平铺）、组件用法、主题令牌全部以此为准。与 design-system.md 冲突时，以本文件为准。下方每一章示范一类组件，按需裁剪。</p>
335
+ </section>
336
+
337
+ <section>
338
+ <div class="sec-head"><span class="no">01</span><h2>对比双卡</h2><span class="en">VS Panel</span></div>
339
+ <div class="vs-panel">
340
+ <div class="side bad">
341
+ <h4><span class="ico">✕</span>传统做法</h4>
342
+ <ul>
343
+ <li>位图截图直接嵌入，Retina 下模糊发虚</li>
344
+ <li>样式全靠系统默认，观感平淡</li>
345
+ <li>换肤需整体重构，无从谈起</li>
346
+ </ul>
347
+ </div>
348
+ <div class="side good">
349
+ <h4><span class="ico">✓</span>本方案</h4>
350
+ <ul>
351
+ <li>图表全部 HTML/CSS 矢量重绘，任意倍率锐利</li>
352
+ <li>组件化设计系统，版式统一精致</li>
353
+ <li>主题令牌驱动，四色随点随换</li>
354
+ </ul>
355
+ </div>
356
+ </div>
357
+ </section>
358
+
359
+ <section>
360
+ <div class="sec-head"><span class="no">02</span><h2>数据表格</h2><span class="en">Table</span></div>
361
+ <div class="tbl-wrap">
362
+ <table>
363
+ <thead><tr><th>能力项</th><th>说明</th><th>状态</th><th>备注</th></tr></thead>
364
+ <tbody>
365
+ <tr><td class="hl">字体合规</td><td>Roboto + 思源黑体，零兜底</td><td class="ok">✓</td><td>OFL 免费可商用</td></tr>
366
+ <tr><td>矢量重绘</td><td>图表用 HTML/CSS 重画</td><td class="ok">✓</td><td>截图锐利</td></tr>
367
+ <tr><td>统一截图</td><td>1460px 章节长图</td><td class="ok">✓</td><td>DPR=2</td></tr>
368
+ <tr><td>单文件版</td><td>字体 base64 内嵌</td><td class="no">—</td><td>定稿后重铸</td></tr>
369
+ </tbody>
370
+ </table>
371
+ <p class="tbl-cap">表格组件示范：td.hl 强调、td.ok / td.no 状态列、tbl-cap 表注</p>
372
+ </div>
373
+ </section>
374
+
375
+ <section>
376
+ <div class="sec-head"><span class="no">03</span><h2>分层架构</h2><span class="en">Layers</span></div>
377
+ <div class="layers">
378
+ <div class="layer l1">
379
+ <div class="h">接入层 <span class="d">INPUT</span></div>
380
+ <div class="body">
381
+ <div class="fdoc"><div class="f">docx</div><div class="d">Word 文档</div></div>
382
+ <div class="fdoc"><div class="f">md</div><div class="d">Markdown</div></div>
383
+ <div class="fdoc"><div class="f">txt</div><div class="d">纯文本</div></div>
384
+ <div class="fdoc"><div class="f">html</div><div class="d">已有页面</div></div>
385
+ </div>
386
+ </div>
387
+ <div class="layer-arrow">↓</div>
388
+ <div class="layer l2">
389
+ <div class="h">转换层 <span class="d">TRANSFORM</span></div>
390
+ <div class="body">
391
+ <div class="fdoc"><div class="f">解析</div><div class="d">提取正文/表格/图片</div></div>
392
+ <div class="fdoc"><div class="f">排版</div><div class="d">选版式 + 重绘图表</div></div>
393
+ <div class="fdoc sync"><div class="f">构建</div><div class="d">HTML 组装</div></div>
394
+ </div>
395
+ </div>
396
+ <div class="layer-arrow">↓</div>
397
+ <div class="layer l3">
398
+ <div class="h">产出层 <span class="d">OUTPUT</span></div>
399
+ <div class="body">
400
+ <div class="fdoc"><div class="f">页面</div><div class="d">标准版 / 单文件版</div></div>
401
+ <div class="fdoc"><div class="f">截图</div><div class="d">章节长图 1460px</div></div>
402
+ <div class="fdoc"><div class="f">字体</div><div class="d">assets/fonts</div></div>
403
+ </div>
404
+ </div>
405
+ <div class="sync-label"><div class="vline"><span>同步校验</span></div></div>
406
+ </div>
407
+ </section>
408
+
409
+ <section>
410
+ <div class="sec-head"><span class="no">04</span><h2>升级图 · 铁律 · 警示</h2><span class="en">Upgrade · Rules · Callout</span></div>
411
+ <div class="upgrade">
412
+ <div class="col vibe">
413
+ <div class="ttl">位图路线</div>
414
+ <div class="st">把文档截图贴进页面</div>
415
+ <div class="chip">docx → 截图 → &lt;img&gt;</div>
416
+ <ul>
417
+ <li>放大即糊，高分屏不可用</li>
418
+ <li>无法换肤、无法交互</li>
419
+ </ul>
420
+ <div class="band">放弃</div>
421
+ </div>
422
+ <div class="mid"><div class="arrow">→</div><span>升级</span></div>
423
+ <div class="col spec">
424
+ <div class="ttl">矢量路线</div>
425
+ <div class="st">图表全部 HTML/CSS 重绘</div>
426
+ <div class="chip">docx → 解析 → 组件重绘</div>
427
+ <ul>
428
+ <li>任意倍率锐利，Retina 友好</li>
429
+ <li>主题令牌驱动，四色切换</li>
430
+ </ul>
431
+ <div class="band">采用</div>
432
+ </div>
433
+ </div>
434
+ <div class="callout">
435
+ <div class="big">2</div>
436
+ <p><b>字体白名单只有两家</b>：Roboto 与思源黑体（均免费可商用）。全页出现任何第三个字体家族名，视为不合格，必须清零。</p>
437
+ </div>
438
+ <div class="rules">
439
+ <div class="rule"><div class="num">01</div><div class="en">零兜底</div><p>--sans/--mono 只许 Roboto + 思源黑体，宁可缺字不可静默回退。</p></div>
440
+ <div class="rule"><div class="num">02</div><div class="en">矢量重绘</div><p>源文档每张图表必须有对应 HTML/CSS 组件，绝不嵌入原图。</p></div>
441
+ <div class="rule"><div class="num">03</div><div class="en">令牌驱动</div><p>A 款配色一律走 --accent 家族，禁止硬编码色值。</p></div>
442
+ </div>
443
+ </section>
444
+
445
+ <section>
446
+ <div class="sec-head"><span class="no">05</span><h2>暗色面板 · 流程图</h2><span class="en">Dark Panel · Flowchart</span></div>
447
+ <div class="dark-panel">
448
+ <div class="dp-title">能力总览</div>
449
+ <div class="dp-sub">四大核心能力，暗色点阵背景</div>
450
+ <div class="ask-grid">
451
+ <div class="ask-card ask-c1"><div class="ac-t"><span class="dot"></span>文档变网页</div><div class="q">输入 <code>docx</code> / <code>md</code> / <code>txt</code></div><div class="feat">解析 → 排版 → 构建 → 交付</div><span class="btn">全流程</span></div>
452
+ <div class="ask-card ask-c2"><div class="ac-t"><span class="dot"></span>页面美化</div><div class="q">输入 <code>html</code></div><div class="feat">只动 CSS，不动正文</div><span class="btn">只美化</span></div>
453
+ <div class="ask-card ask-c3"><div class="ac-t"><span class="dot"></span>章节截图</div><div class="q">统一 <code>1460px</code> 宽</div><div class="feat">封面 + 每章一张，按序拼长图</div><span class="btn">只截图</span></div>
454
+ <div class="ask-card ask-c4"><div class="ac-t"><span class="dot"></span>四色换肤</div><div class="q">右下角 <code>theme-dock</code></div><div class="feat">tech / gold / forest / plum</div><span class="btn">随点随换</span></div>
455
+ </div>
456
+ </div>
457
+ <div class="flowchart">
458
+ <div class="fc-title">全流程管线</div>
459
+ <div class="frow">
460
+ <span class="fnode f-tag-f tag">开始</span><span class="farr">→</span>
461
+ <span class="fnode f-node-b">解析源文档</span><span class="farr">→</span>
462
+ <span class="fnode f-node-p">选版式</span><span class="farr">→</span>
463
+ <span class="fnode f-node-g">构建页面</span>
464
+ </div>
465
+ <div class="frow">
466
+ <span class="fnode f-node-y">用户确认</span><span class="farr">→</span>
467
+ <span class="fnode f-node-g">逐章截图</span><span class="farr">→</span>
468
+ <span class="fnode f-tag-f tag">交付</span>
469
+ </div>
470
+ <div class="frow rev">
471
+ <span class="fnode f-node-r">效果不满意</span><span class="farr">↩</span>
472
+ <span class="fnode f-node-b">调整后重建</span>
473
+ </div>
474
+ <div class="flow-principle">原则：截图前必先经用户确认，至多 3 轮调整</div>
475
+ </div>
476
+ </section>
477
+
478
+ <section>
479
+ <div class="sec-head"><span class="no">06</span><h2>模式分级</h2><span class="en">Modes</span></div>
480
+ <div class="modes">
481
+ <div class="mode m1">
482
+ <div class="badge">1</div>
483
+ <div class="mt">基础模式 <span class="lbl" style="background:#2563eb">起步</span></div>
484
+ <div class="md">文档转 HTML，交付标准版页面与截图。</div>
485
+ </div>
486
+ <div class="mode-arr">进阶</div>
487
+ <div class="mode m2">
488
+ <div class="badge">2</div>
489
+ <div class="mt">专业模式 <span class="lbl" style="background:#16a34a">进阶</span></div>
490
+ <div class="md">图表矢量重绘 + 版式气质匹配 + 主题换肤。</div>
491
+ </div>
492
+ <div class="mode-arr">完备</div>
493
+ <div class="mode m3">
494
+ <div class="badge">3</div>
495
+ <div class="mt">完备模式 <span class="lbl" style="background:#7c3aed">全量</span></div>
496
+ <div class="md">单文件自包含版 + 章节长图 + 字体合规审计。</div>
497
+ </div>
498
+ </div>
499
+ </section>
500
+
501
+ <section>
502
+ <div class="sec-head"><span class="no">07</span><h2>类型卡片 · 目录树</h2><span class="en">Types · Dirtree</span></div>
503
+ <div class="ttypes">
504
+ <div class="tt"><div class="tcount">输入</div><div class="ttn">docx</div><p>Word 文档，含表格与图片</p></div>
505
+ <div class="tt"><div class="tcount">输入</div><div class="ttn">md</div><p>Markdown 正文</p></div>
506
+ <div class="tt"><div class="tcount">输入</div><div class="ttn">txt</div><p>纯文本</p></div>
507
+ <div class="tt"><div class="tcount">处理</div><div class="ttn">html</div><p>美化 / 截图已有页面</p></div>
508
+ <div class="tt"><div class="tcount">产出</div><div class="ttn">png</div><p>章节截图 1460px</p></div>
509
+ </div>
510
+ <div class="dirtree">
511
+ <div class="dt-row root"><div class="dir">目标目录/</div><div class="dt-cmt">交付根目录（DIR 配置或口头指定）</div></div>
512
+ <div class="dt-row dt-ind1"><div class="file">标题.html</div><div class="dt-cmt">标准版（依赖 assets/fonts）</div></div>
513
+ <div class="dt-row dt-ind1"><div class="file">标题-单文件版.html</div><div class="dt-cmt">字体全内嵌，双击即开</div></div>
514
+ <div class="dt-row dt-ind1"><div class="dir">assets/fonts/</div><div class="dt-cmt">Roboto woff2 四字重</div></div>
515
+ <div class="dt-row dt-ind1"><div class="dir">文章截图/标题slug/</div><div class="dt-cmt">C00-封面.png … C0N-xx.png</div></div>
516
+ </div>
517
+ </section>
518
+
519
+ <section>
520
+ <div class="sec-head"><span class="no">08</span><h2>推荐 · 命令</h2><span class="en">Recommend · Command</span></div>
521
+ <div class="rec">
522
+ <div class="rc good">
523
+ <div class="rh">推荐</div>
524
+ <ul>
525
+ <li>图表全部 HTML/CSS 矢量重绘</li>
526
+ <li>字体白名单 Roboto + 思源黑体</li>
527
+ <li>截图前先经用户确认</li>
528
+ </ul>
529
+ </div>
530
+ <div class="rc bad">
531
+ <div class="rh">不推荐</div>
532
+ <ul>
533
+ <li>位图截图直接嵌入页面</li>
534
+ <li>引入第三方商业字体</li>
535
+ <li>未经确认批量截图</li>
536
+ </ul>
537
+ </div>
538
+ </div>
539
+ <div class="cmd-block">
540
+ <div class="c"># 起本地服务供截图</div>
541
+ <div><span class="p">python3 -m http.server 8931</span></div>
542
+ <div class="c"># 字体内嵌为单文件版</div>
543
+ <div><span class="p">python3 inline_fonts.py</span> <span class="k">src.html out.html fonts_dir</span></div>
544
+ </div>
545
+ </section>
546
+
547
+ <section>
548
+ <div class="sec-head"><span class="no">09</span><h2>对话记录</h2><span class="en">Chat</span></div>
549
+ <div class="chat">
550
+ <div class="chat-title">需求沟通示范</div>
551
+ <div class="msg u"><div class="who">用户</div>把这篇文章装裱成网页，顺便截好图。</div>
552
+ <div class="msg a"><div class="who">装裱师</div>好的。先解析内容选版式，页面完成后请您确认效果，再逐章截图。</div>
553
+ <div class="msg u"><div class="who">用户</div>主题色想用墨绿。</div>
554
+ <div class="msg a"><div class="who">装裱师</div>已切 forest 墨绿主题（右下角色点随时可换），确认后开始截图。</div>
555
+ </div>
556
+ </section>
557
+
558
+ <section>
559
+ <div class="sec-head"><span class="no">10</span><h2>开源卡片</h2><span class="en">Open Source</span></div>
560
+ <div class="oss">
561
+ <a class="o" href="#"><div class="logo" style="background:#2563eb">R</div><div><div class="nm">Roboto</div><div class="url">Apache 2.0 · latin 四字重</div></div></a>
562
+ <a class="o" href="#"><div class="logo" style="background:#0f766e">S</div><div><div class="nm">Source Han Sans SC</div><div class="url">SIL OFL 1.1 · 思源黑体</div></div></a>
563
+ <a class="o" href="#"><div class="logo" style="background:#7c3aed">P</div><div><div class="nm">Pandoc</div><div class="url">文档转换引擎</div></div></a>
564
+ <a class="o" href="#"><div class="logo" style="background:#b45309">W</div><div><div class="nm">Playwright</div><div class="url">headless 截图兜底</div></div></a>
565
+ </div>
566
+ </section>
567
+
568
+ <div class="ending">
569
+ <div class="e-t">骨架在手<span class="grad"> 成品不愁</span></div>
570
+ <p>本页即 A 款设计真相源：骨架、组件、令牌全部就位。生成页面时以此为准逐处替换内容，报修时以此为准逐处比对修复。</p>
571
+ <span class="nospec">START BUILDING</span>
572
+ </div>
573
+
574
+ <div class="author">
575
+ <div class="avatar">装</div>
576
+ <div>
577
+ <div class="nm">文章装裱师<span class="role">article-to-html</span></div>
578
+ <p>把 Word / Markdown / 纯文本装裱成精美网页，图表矢量重绘，字体零侵权，按章节定格长图。</p>
579
+ </div>
580
+ </div>
581
+
582
+ <div class="foot">由 article-to-html 生成 · 字体 Roboto + Source Han Sans SC（免费可商用）</div>
583
+ </div>
584
+ <!-- 主题换肤坞（A 款页面专用；data-theme 初始值 = THEME 配置） -->
585
+ <div class="theme-dock" id="themeDock">
586
+ <button class="th-dot" type="button" data-theme="tech" title="科技蓝"></button>
587
+ <button class="th-dot" type="button" data-theme="gold" title="暖棕金"></button>
588
+ <button class="th-dot" type="button" data-theme="forest" title="墨绿"></button>
589
+ <button class="th-dot" type="button" data-theme="plum" title="梅紫"></button>
590
+ </div>
591
+ <script>
592
+ /* 主题换肤：html[data-theme] 切换 + 记忆上次选择（localStorage，失败静默）；?shot 截图模式隐藏坞 */
593
+
594
+ /* 稳定身份命名空间：localStorage 键按页内嵌唯一 ID（meta article-id）命名——Chrome/Safari 下 file:// 与 localhost 共享同源存储，固定键名会导致多份产物互相串台；ID 与文件路径解耦，改名/移动目录记忆不丢 */
595
+ var SF_ID = ((document.querySelector('meta[name="article-id"]') || {}).content || 'REF-ARTICLE-0000').trim();
596
+ /* ID 格式自愈（格式定死执行层）：meta 非法或缺失（占位残留/手写变体/误沿用旧值）时按路径键自愈为 crypto.randomUUID() 标准 v4，同路径跨打开稳定；合法 UUID 原样使用（复制文件副本=同一身份共享数据，是特性） */
597
+ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(SF_ID)) {
598
+ var __sfHealKey = 'sf-heal:' + location.pathname;
599
+ try { SF_ID = localStorage.getItem(__sfHealKey) || SF_ID; } catch (e) {}
600
+ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(SF_ID)) {
601
+ try { SF_ID = crypto.randomUUID(); } catch (e) {
602
+ SF_ID = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c){ var r = Math.random()*16|0, v = c === 'x' ? r : (r&0x3|0x8); return v.toString(16); });
603
+ }
604
+ try { localStorage.setItem(__sfHealKey, SF_ID); } catch (e) {}
605
+ }
606
+ var __sfMeta = document.querySelector('meta[name="article-id"]');
607
+ if (__sfMeta) __sfMeta.setAttribute('content', SF_ID);
608
+ console.warn('[article-to-html] meta article-id 非法或缺失，已自愈为标准 v4 ID（' + SF_ID + '），建议重新生成页面固化');
609
+ }
610
+
611
+ var SF_NS = 'article:' + SF_ID;
612
+ (function(){
613
+ var THEMES=['tech','gold','forest','plum'];
614
+ var dock=document.getElementById('themeDock');
615
+ if(!dock) return;
616
+ if(location.search.indexOf('shot=')!==-1){ dock.style.display='none'; }
617
+ function apply(t){
618
+ document.documentElement.setAttribute('data-theme',t);
619
+ dock.querySelectorAll('.th-dot').forEach(function(d){ d.classList.toggle('on',d.getAttribute('data-theme')===t); });
620
+ try{ localStorage.setItem(SF_NS + '-theme',t); }catch(e){}
621
+ }
622
+ var cur=document.documentElement.getAttribute('data-theme');
623
+ var saved=null;
624
+ try{ saved=localStorage.getItem(SF_NS + '-theme') || localStorage.getItem('sf:' + location.pathname + '-theme'); }catch(e){}
625
+ if(saved && THEMES.indexOf(saved)!==-1 && saved!==cur){ apply(saved); }
626
+ else{ dock.querySelectorAll('.th-dot').forEach(function(d){ d.classList.toggle('on',d.getAttribute('data-theme')===(cur||'tech')); }); }
627
+ dock.querySelectorAll('.th-dot').forEach(function(d){ d.addEventListener('click',function(){ apply(d.getAttribute('data-theme')); }); });
628
+ })();
629
+ </script>
630
+ </body>
631
+ </html>