Inicio Explorar Axuda
Rexistro Iniciar sesión
18307996893
/
openclaw-voc-skill
1
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Rama: master
Ramas Etiquetas
openclaw-voc-sk...
/
workflows
/
templates
/
report_template.html

report_template.html 52 KB
Permalink Histórico Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6. 

  6. <title>{{industryName}}行业竞品与B端线索分析报告</title>
    7. 

  7. <!-- ===== Chart.js CDN ===== -->
    8. 

  8. <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    9. 

  9. <style>
    10. 

  10. /* ============================================================
    11. 

  11.    全局变量 & 色彩体系 — 轻奢深棕 + 暖金莫兰迪
    12. 

  12.    ============================================================ */
    13. 

  13. :root{
    14. 

  14.   --bg-deep:#1A110B;
    15. 

  15.   --bg-dark:#2D1810;
    16. 

  16.   --bg-mid:#3E2518;
    17. 

  17.   --brown:#5C3D2E;
    18. 

  18.   --brown-light:#8B6F47;
    19. 

  19.   --gold:#C5A55A;
    20. 

  20.   --gold-light:#D4B978;
    21. 

  21.   --cream:#FFF8F0;
    22. 

  22.   --cream-dim:#F5E6D3;
    23. 

  23.   --accent-rose:#C4868B;
    24. 

  24.   --accent-sage:#8FA68A;
    25. 

  25.   --accent-blue:#7E9BB5;
    26. 

  26.   --glass:rgba(255,248,240,0.06);
    27. 

  27.   --glass-border:rgba(197,165,90,0.18);
    28. 

  28.   --glass-hover:rgba(255,248,240,0.12);
    29. 

  29.   --shadow:0 8px 32px rgba(0,0,0,0.35);
    30. 

  30.   --radius:16px;
    31. 

  31.   --transition:all .4s cubic-bezier(.4,0,.2,1);
    32. 

  32.   --font:'Segoe UI','PingFang SC','Microsoft YaHei','Helvetica Neue',system-ui,sans-serif;
    33. 

  33. }
    34. 

  34. /* ============================================================
    35. 

  35.    Reset & 基础排版
    36. 

  36.    ============================================================ */
    37. 

  37. *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    38. 

  38. html{font-size:16px;scroll-behavior:smooth;overflow:hidden}
    39. 

  39. body{font-family:var(--font);background:var(--bg-deep);color:var(--cream);line-height:1.7;overflow:hidden;-webkit-font-smoothing:antialiased}
    40. 

  40. h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
    41. 

  41. h2{font-size:clamp(1.5rem,3.5vw,2.4rem);font-weight:700;letter-spacing:-.01em}
    42. 

  42. h3{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600}
    43. 

  43. a{color:var(--gold);text-decoration:none}
    44. 

  44. /* ============================================================
    45. 

  45.    幻灯片容器
    46. 

  46.    ============================================================ */
    47. 

  47. #slides-wrapper{position:relative;width:100vw;height:100vh;overflow:hidden}
    48. 

  48. .slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(24px,4vw,60px);opacity:0;visibility:hidden;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease,visibility 0s .7s;z-index:0;overflow-y:auto}
    49. 

  49. .slide.active{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .7s ease,transform .7s ease,visibility 0s 0s;z-index:1}
    50. 

  50. .slide-inner{width:100%;max-width:1200px;position:relative}
    51. 

  51. /* ============================================================
    52. 

  52.    页眉 & 页脚
    53. 

  53.    ============================================================ */
    54. 

  54. .slide-header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(24px,4vw,60px);font-size:.8rem;color:var(--brown-light);letter-spacing:.05em;z-index:10;pointer-events:none}
    55. 

  55. .slide-footer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(24px,4vw,60px);font-size:.75rem;color:rgba(139,111,71,.6);z-index:10;pointer-events:none}
    56. 

  56. .page-num{font-weight:600;color:var(--gold)}
    57. 

  57. /* ============================================================
    58. 

  58.    毛玻璃卡片（Glassmorphism）
    59. 

  59.    ============================================================ */
    60. 

  60. .glass-card{background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius);padding:clamp(18px,2.5vw,32px);transition:var(--transition);position:relative;overflow:hidden}
    61. 

  61. .glass-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(197,165,90,.08) 0%,transparent 60%);pointer-events:none;border-radius:inherit}
    62. 

  62. .glass-card:hover{background:var(--glass-hover);border-color:rgba(197,165,90,.35);transform:translateY(-2px);box-shadow:var(--shadow)}
    63. 

  63. /* ============================================================
    64. 

  64.    数据指标卡片
    65. 

  65.    ============================================================ */
    66. 

  66. .metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(12px,2vw,24px);width:100%}
    67. 

  67. .metric-card{text-align:center;padding:clamp(16px,2vw,28px)}
    68. 

  68. .metric-value{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;color:var(--gold);margin-bottom:4px}
    69. 

  69. .metric-label{font-size:.85rem;color:var(--cream-dim);font-weight:400}
    70. 

  70. .metric-sub{font-size:.75rem;color:var(--brown-light);margin-top:2px}
    71. 

  71. /* ============================================================
    72. 

  72.    数据表格
    73. 

  73.    ============================================================ */
    74. 

  74. .data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:clamp(.75rem,1.4vw,.9rem)}
    75. 

  75. .data-table thead th{background:rgba(197,165,90,.15);color:var(--gold-light);font-weight:600;padding:12px 14px;text-align:left;border-bottom:2px solid var(--gold);white-space:nowrap}
    76. 

  76. .data-table thead th:first-child{border-radius:var(--radius) 0 0 0}
    77. 

  77. .data-table thead th:last-child{border-radius:0 var(--radius) 0 0}
    78. 

  78. .data-table tbody td{padding:10px 14px;border-bottom:1px solid rgba(139,111,71,.15);transition:background .3s}
    79. 

  79. .data-table tbody tr:hover td{background:rgba(197,165,90,.06)}
    80. 

  80. .data-table tbody tr:last-child td:first-child{border-radius:0 0 0 var(--radius)}
    81. 

  81. .data-table tbody tr:last-child td:last-child{border-radius:0 0 var(--radius) 0}
    82. 

  82. /* ============================================================
    83. 

  83.    标签 / 徽章
    84. 

  84.    ============================================================ */
    85. 

  85. .badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;letter-spacing:.03em}
    86. 

  86. .badge-gold{background:rgba(197,165,90,.2);color:var(--gold-light);border:1px solid rgba(197,165,90,.3)}
    87. 

  87. .badge-rose{background:rgba(196,134,139,.15);color:var(--accent-rose);border:1px solid rgba(196,134,139,.25)}
    88. 

  88. .badge-sage{background:rgba(143,166,138,.15);color:var(--accent-sage);border:1px solid rgba(143,166,138,.25)}
    89. 

  89. .badge-blue{background:rgba(126,155,181,.15);color:var(--accent-blue);border:1px solid rgba(126,155,181,.25)}
    90. 

  90. /* ============================================================
    91. 

  91.    进度条 / 比例条
    92. 

  92.    ============================================================ */
    93. 

  93. .bar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
    94. 

  94. .bar-label{min-width:140px;font-size:.82rem;text-align:right;color:var(--cream-dim)}
    95. 

  95. .bar-track{flex:1;height:22px;background:rgba(255,248,240,.06);border-radius:11px;overflow:hidden;position:relative}
    96. 

  96. .bar-fill{height:100%;border-radius:11px;transition:width 1.5s cubic-bezier(.4,0,.2,1);position:relative}
    97. 

  97. .bar-fill::after{content:attr(data-value);position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:.7rem;font-weight:700;color:var(--bg-dark)}
    98. 

  98. /* ============================================================
    99. 

  99.    侧边导航
    100. 

  100.    ============================================================ */
    101. 

  101. #side-nav{position:fixed;right:clamp(10px,2vw,24px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:1000}
    102. 

  102. .nav-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--brown-light);background:transparent;cursor:pointer;transition:var(--transition);position:relative}
    103. 

  103. .nav-dot.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(197,165,90,.5)}
    104. 

  104. .nav-dot::after{content:attr(data-tip);position:absolute;right:22px;top:50%;transform:translateY(-50%);background:var(--bg-mid);color:var(--cream);padding:4px 12px;border-radius:8px;font-size:.72rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s}
    105. 

  105. .nav-dot:hover::after{opacity:1}
    106. 

  106. /* ============================================================
    107. 

  107.    全屏按钮
    108. 

  108.    ============================================================ */
    109. 

  109. #fs-btn{position:fixed;top:18px;right:clamp(10px,2vw,24px);z-index:1001;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-border);color:var(--gold);padding:6px 14px;border-radius:8px;cursor:pointer;font-size:.78rem;transition:var(--transition)}
    110. 

  110. #fs-btn:hover{background:var(--glass-hover);border-color:var(--gold)}
    111. 

  111. /* ============================================================
    112. 

  112.    封面粒子画布
    113. 

  113.    ============================================================ */
    114. 

  114. #particles-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
    115. 

  115. /* ============================================================
    116. 

  116.    图表容器
    117. 

  117.    ============================================================ */
    118. 

  118. .chart-wrap{position:relative;width:100%;max-height:320px;margin:12px 0}
    119. 

  119. .chart-wrap canvas{max-height:320px}
    120. 

  120. /* ============================================================
    121. 

  121.    两栏/三栏布局
    122. 

  122.    ============================================================ */
    123. 

  123. .cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
    124. 

  124. .cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(14px,2vw,24px)}
    125. 

  125. /* ============================================================
    126. 

  126.    分隔线 & 间距工具
    127. 

  127.    ============================================================ */
    128. 

  128. .divider{width:60px;height:3px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px;margin:16px 0}
    129. 

  129. .mt-sm{margin-top:12px}.mt-md{margin-top:24px}.mt-lg{margin-top:36px}
    130. 

  130. .mb-sm{margin-bottom:12px}.mb-md{margin-bottom:24px}
    131. 

  131. .text-gold{color:var(--gold)}.text-rose{color:var(--accent-rose)}.text-sage{color:var(--accent-sage)}.text-blue{color:var(--accent-blue)}
    132. 

  132. .text-dim{color:var(--brown-light)}.text-sm{font-size:.82rem}.text-xs{font-size:.72rem}
    133. 

  133. .fw-700{font-weight:700}.fw-600{font-weight:600}
    134. 

  134. /* ============================================================
    135. 

  135.    封面页特殊样式
    136. 

  136.    ============================================================ */
    137. 

  137. .cover-content{position:relative;z-index:1;text-align:center}
    138. 

  138. .cover-brand{font-size:clamp(.9rem,1.8vw,1.2rem);color:var(--gold);letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
    139. 

  139. .cover-title{background:linear-gradient(135deg,var(--cream) 0%,var(--gold-light) 50%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px}
    140. 

  140. .cover-sub{font-size:clamp(.9rem,1.6vw,1.15rem);color:var(--cream-dim);max-width:640px;margin:0 auto 32px}
    141. 

  141. .cover-date{font-size:.85rem;color:var(--brown-light);letter-spacing:.1em}
    142. 

  142. .cover-line{width:80px;height:1px;background:var(--gold);margin:24px auto}
    143. 

  143. /* ============================================================
    144. 

  144.    目录页
    145. 

  145.    ============================================================ */
    146. 

  146. .toc-list{list-style:none;counter-reset:toc}
    147. 

  147. .toc-item{counter-increment:toc;padding:14px 20px;border-bottom:1px solid rgba(139,111,71,.12);cursor:pointer;display:flex;align-items:center;gap:16px;transition:var(--transition);border-radius:8px}
    148. 

  148. .toc-item:hover{background:var(--glass-hover);padding-left:28px}
    149. 

  149. .toc-item::before{content:counter(toc,decimal-leading-zero);font-size:1.6rem;font-weight:800;color:var(--gold);min-width:40px}
    150. 

  150. .toc-item .toc-title{font-size:1.05rem;font-weight:600;color:var(--cream)}
    151. 

  151. .toc-item .toc-desc{font-size:.78rem;color:var(--brown-light);margin-top:2px}
    152. 

  152. /* ============================================================
    153. 

  153.    竞品卡片
    154. 

  154.    ============================================================ */
    155. 

  155. .competitor-card{padding:clamp(18px,2vw,28px)}
    156. 

  156. .competitor-card h3{color:var(--gold-light);margin-bottom:8px}
    157. 

  157. .comp-stat{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(139,111,71,.1);font-size:.85rem}
    158. 

  158. /* ============================================================
    159. 

  159.    时间轴
    160. 

  160.    ============================================================ */
    161. 

  161. .timeline{position:relative;padding-left:28px}
    162. 

  162. .timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--gold),var(--brown-light),transparent)}
    163. 

  163. .timeline-item{position:relative;margin-bottom:24px;padding-left:20px}
    164. 

  164. .timeline-item::before{content:'';position:absolute;left:-24px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid var(--bg-dark);box-shadow:0 0 8px rgba(197,165,90,.4)}
    165. 

  165. .timeline-item h4{color:var(--gold-light);font-size:.95rem;margin-bottom:4px}
    166. 

  166. .timeline-item p{font-size:.82rem;color:var(--cream-dim)}
    167. 

  167. /* ============================================================
    168. 

  168.    VOC 痛点条
    169. 

  169.    ============================================================ */
    170. 

  170. .pain-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
    171. 

  171. .pain-icon{font-size:1.1rem;min-width:24px;text-align:center}
    172. 

  172. .pain-info{flex:1}
    173. 

  173. .pain-name{font-size:.85rem;font-weight:600;color:var(--cream);margin-bottom:3px}
    174. 

  174. .pain-pct{font-size:.75rem;color:var(--brown-light)}
    175. 

  175. .pain-track{width:100%;height:8px;background:rgba(255,248,240,.06);border-radius:4px;overflow:hidden}
    176. 

  176. .pain-fill{height:100%;border-radius:4px;transition:width 1.5s ease}
    177. 

  177. /* ============================================================
    178. 

  178.    动画关键帧
    179. 

  179.    ============================================================ */
    180. 

  180. @keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
    181. 

  181. @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    182. 

  182. @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
    183. 

  183. @keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
    184. 

  184. .anim-up{animation:fadeInUp .8s ease both}
    185. 

  185. .anim-delay-1{animation-delay:.15s}.anim-delay-2{animation-delay:.3s}.anim-delay-3{animation-delay:.45s}.anim-delay-4{animation-delay:.6s}
    186. 

  186. /* 入场动画 */
    187. 

  187. .anim-enter{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
    188. 

  188. .slide.active .anim-enter{opacity:1;transform:translateY(0)}
    189. 

  189. .slide.active .anim-enter.d1{transition-delay:.1s}
    190. 

  190. .slide.active .anim-enter.d2{transition-delay:.2s}
    191. 

  191. .slide.active .anim-enter.d3{transition-delay:.3s}
    192. 

  192. .slide.active .anim-enter.d4{transition-delay:.4s}
    193. 

  193. .slide.active .anim-enter.d5{transition-delay:.5s}
    194. 

  194. .slide.active .anim-enter.d6{transition-delay:.6s}
    195. 

  195. /* ============================================================
    196. 

  196.    Modal弹窗
    197. 

  197.    ============================================================ */
    198. 

  198. .modal-overlay{position:fixed;inset:0;background:rgba(10,6,3,.85);backdrop-filter:blur(12px);z-index:2000;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .4s ease}
    199. 

  199. .modal-overlay.show{display:flex;opacity:1}
    200. 

  200. .modal-box{background:linear-gradient(135deg,#1a110b,#0d0a08);border:1px solid rgba(197,165,90,.25);border-radius:16px;width:92vw;max-width:960px;max-height:88vh;overflow-y:auto;box-shadow:0 8px 48px rgba(0,0,0,.7);position:relative;animation:modalIn .4s ease}
    201. 

  201. @keyframes modalIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
    202. 

  202. .modal-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--cream-dim);font-size:1.4rem;cursor:pointer;z-index:10;transition:color .3s}
    203. 

  203. .modal-close:hover{color:var(--gold)}
    204. 

  204. .modal-header{padding:24px 28px 16px;border-bottom:1px solid rgba(197,165,90,.15)}
    205. 

  205. .modal-header h2{font-size:1.15rem;color:var(--gold);margin:0 0 6px}
    206. 

  206. .modal-header p{font-size:.8rem;color:var(--cream-dim);margin:0}
    207. 

  207. .modal-body{padding:20px 28px 28px}
    208. 

  208. /* ============================================================
    209. 

  209.    响应式
    210. 

  210.    ============================================================ */
    211. 

  211. @media(max-width:900px){
    212. 

  212.   .cols-2,.cols-3{grid-template-columns:1fr}
    213. 

  213.   .metric-grid{grid-template-columns:repeat(2,1fr)}
    214. 

  214.   #side-nav{right:6px;gap:8px}
    215. 

  215.   .nav-dot{width:9px;height:9px}
    216. 

  216.   .bar-label{min-width:100px;font-size:.75rem}
    217. 

  217. }
    218. 

  218. @media(max-width:600px){
    219. 

  219.   .metric-grid{grid-template-columns:1fr}
    220. 

  220.   .slide{padding:16px}
    221. 

  221. }
    222. 

  222. </style>
    223. 

  223. </head>
    224. 

  224. <body>
    225. 

  225. 

  226. <!-- ===== 全屏按钮 ===== -->
    227. 

  227. <button id="fs-btn" title="全屏切换">⛶ 全屏</button>
    228. 

  228. 

  229. <!-- ===== 侧边导航（由 JS 自动生成） ===== -->
    230. 

  230. <nav id="side-nav"></nav>
    231. 

  231. 

  232. <!-- ===== 幻灯片容器 ===== -->
    233. 

  233. <div id="slides-wrapper">
    234. 

  234. 

  235. <!-- ════════════════════════════════════════════
    236. 

  236.      SLIDE 0 — 封面
    237. 

  237.      ════════════════════════════════════════════ -->
    238. 

  238. <section class="slide active" id="slide-0">
    239. 

  239.   <canvas id="particles-canvas"></canvas>
    240. 

  240.   <div class="cover-content">
    241. 

  241.     <p class="cover-brand">{{coverBrandEnglish}}</p>
    242. 

  242.     <h1 class="cover-title">{{industryName}}行业竞品与<br>B端线索分析报告</h1>
    243. 

  243.     <div class="cover-line"></div>
    244. 

  244.     <p class="cover-sub">基于Amazon电商数据 · TikTok/Instagram社媒数据 · {{totalReviews}}条用户评论VOC分析<br>覆盖{{categoryCount}}大核心品类 · {{competitorCount}}大竞品品牌深度对标</p>
    245. 

  245.     <p class="cover-date">{{reportDate}} · AI Data Intelligence</p>
    246. 

  246.   </div>
    247. 

  247.   <div class="slide-footer"><span></span><span class="text-xs" style="opacity:.4">按 → 或滚轮翻页</span></div>
    248. 

  248. </section>
    249. 

  249. 

  250. <!-- ════════════════════════════════════════════
    251. 

  251.      SLIDE 1 — 目录
    252. 

  252.      ════════════════════════════════════════════ -->
    253. 

  253. <section class="slide" id="slide-1">
    254. 

  254.   <div class="slide-header"><span>{{industryName}}行业竞品分析报告</span><span>目录</span></div>
    255. 

  255.   <div class="slide-inner" style="max-width:720px">
    256. 

  256.     <h2 class="text-gold mb-md" style="text-align:center">报告目录</h2>
    257. 

  257.     <div class="divider" style="margin:0 auto 28px"></div>
    258. 

  258.     <ul class="toc-list">
    259. 

  259.       <li class="toc-item" onclick="goSlide(2)"><div><div class="toc-title">核心执行摘要</div><div class="toc-desc">关键数据 · 核心结论 · 核心价值</div></div></li>
    260. 

  260.       <li class="toc-item" onclick="goSlide(3)"><div><div class="toc-title">{{industryName}}品类市场全景分析</div><div class="toc-desc">{{categoryCount}}大品类规模 · 增长趋势 · 价格带 · 品牌分布</div></div></li>
    261. 

  261.       <li class="toc-item" onclick="goSlide(4)"><div><div class="toc-title">核心竞品深度对标分析</div><div class="toc-desc">{{competitorNames}} 品牌拆解</div></div></li>
    262. 

  262.       <li class="toc-item" onclick="goSlide(5)"><div><div class="toc-title">全渠道用户VOC与需求洞察</div><div class="toc-desc">{{totalReviews}}条评论 · 痛点 · 喜爱点 · 使用场景</div></div></li>
    263. 

  263.       <li class="toc-item" onclick="goSlide(6)"><div><div class="toc-title">B端高价值线索与品类矩阵</div><div class="toc-desc">品类机会评估 · 社媒热度 · 优先级排序</div></div></li>
    264. 

  264.       <li class="toc-item" onclick="goSlide(7)"><div><div class="toc-title">市场拓展与落地执行建议</div><div class="toc-desc">短期·中期·长期分阶段策略</div></div></li>
    265. 

  265.       <li class="toc-item" onclick="goSlide(8)"><div><div class="toc-title">总结与展望</div><div class="toc-desc">核心机会点 · 行动优先级</div></div></li>
    266. 

  266.     </ul>
    267. 

  267.   </div>
    268. 

  268.   <div class="slide-footer"><span>{{industryName}}行业竞品分析报告</span><span class="page-num">01</span></div>
    269. 

  269. </section>
    270. 

  270. 

  271. <!-- ════════════════════════════════════════════
    272. 

  272.      SLIDE 2 — 执行摘要
    273. 

  273.      ════════════════════════════════════════════ -->
    274. 

  274. <section class="slide" id="slide-2">
    275. 

  275.   <div class="slide-header"><span>{{industryName}}行业竞品分析报告</span><span>执行摘要</span></div>
    276. 

  276.   <div class="slide-inner">
    277. 

  277.     <h2 class="text-gold mb-sm">核心执行摘要</h2>
    278. 

  278.     <div class="divider"></div>
    279. 

  279.     <!-- 核心数据指标卡片 — 由 REPORT_DATA.metrics 注入 -->
    280. 

  280.     <div class="metric-grid mt-md mb-md" id="exec-metrics"></div>
    281. 

  281.     <!-- 核心结论 — 由 REPORT_DATA.coreFindings / coreValues 注入 -->
    282. 

  282.     <div class="cols-2">
    283. 

  283.       <div class="glass-card">
    284. 

  284.         <h3 class="text-gold mb-sm">📊 核心发现</h3>
    285. 

  285.         <ul id="core-findings" style="list-style:none;font-size:.85rem;color:var(--cream-dim)"></ul>
    286. 

  286.       </div>
    287. 

  287.       <div class="glass-card">
    288. 

  288.         <h3 class="text-gold mb-sm">💡 核心价值</h3>
    289. 

  289.         <ul id="core-values" style="list-style:none;font-size:.85rem;color:var(--cream-dim)"></ul>
    290. 

  290.       </div>
    291. 

  291.     </div>
    292. 

  292.   </div>
    293. 

  293.   <div class="slide-footer"><span>{{industryName}}行业竞品分析报告</span><span class="page-num">02</span></div>
    294. 

  294. </section>
    295. 

  295. 

  296. <!-- ════════════════════════════════════════════
    297. 

  297.      SLIDE 3 — 市场全景
    298. 

  298.      ════════════════════════════════════════════ -->
    299. 

  299. <section class="slide" id="slide-3">
    300. 

  300.   <div class="slide-header"><span>{{industryName}}行业竞品分析报告</span><span>市场全景</span></div>
    301. 

  301.   <div class="slide-inner">
    302. 

  302.     <h2 class="text-gold mb-sm">{{industryName}}品类市场全景分析</h2>
    303. 

  303.     <div class="divider mb-md"></div>
    304. 

  304.     <div class="cols-2">
    305. 

  305.       <div class="glass-card">
    306. 

  306.         <h3 class="text-sm fw-600 mb-sm">Top100 周均销售额（美元）</h3>
    307. 

  307.         <div class="chart-wrap"><canvas id="chart-revenue"></canvas></div>
    308. 

  308.       </div>
    309. 

  309.       <div class="glass-card">
    310. 

  310.         <h3 class="text-sm fw-600 mb-sm">品类增长率（同比）</h3>
    311. 

  311.         <div class="chart-wrap"><canvas id="chart-growth"></canvas></div>
    312. 

  312.       </div>
    313. 

  313.     </div>
    314. 

  314.     <!-- 数据表格 — 由 REPORT_DATA.categoryTable 注入 -->
    315. 

  315.     <div class="glass-card mt-md" style="overflow-x:auto">
    316. 

  316.       <table class="data-table">
    317. 

  317.         <thead><tr>
    318. 

  318.           <th>品类</th><th>周均销量</th><th>周均销售额</th><th>均价</th><th>品牌数</th><th>增长率</th><th>中国卖家</th>
    319. 

  319.         </tr></thead>
    320. 

  320.         <tbody id="market-table-body"></tbody>
    321. 

  321.       </table>
    322. 

  322.     </div>
    323. 

  323.   </div>
    324. 

  324.   <div class="slide-footer"><span>{{industryName}}行业竞品分析报告</span><span class="page-num">03</span></div>
    325. 

  325. </section>
    326. 

  326. 

  327. <!-- ════════════════════════════════════════════
    328. 

  328.      SLIDE 4 — 竞品对标
    329. 

  329.      ════════════════════════════════════════════ -->
    330. 

  330. <section class="slide" id="slide-4">
    331. 

  331.   <div class="slide-header"><span>{{industryName}}行业竞品分析报告</span><span>竞品对标</span></div>
    332. 

  332.   <div class="slide-inner">
    333. 

  333.     <h2 class="text-gold mb-sm">核心竞品深度对标分析</h2>
    334. 

  334.     <div class="divider mb-md"></div>
    335. 

  335.     <!-- 竞品卡片 — 由 REPORT_DATA.competitors 注入 -->
    336. 

  336.     <div class="cols-3" id="competitor-cards"></div>
    337. 

  337.     <!-- 雷达图 -->
    338. 

  338.     <div class="glass-card mt-md" style="max-width:480px;margin-left:auto;margin-right:auto">
    339. 

  339.       <h3 class="text-sm fw-600 mb-sm" style="text-align:center">竞品综合能力雷达图</h3>
    340. 

  340.       <div class="chart-wrap" style="max-height:260px"><canvas id="chart-radar"></canvas></div>
    341. 

  341.     </div>
    342. 

  342.   </div>
    343. 

  343.   <div class="slide-footer"><span>{{industryName}}行业竞品分析报告</span><span class="page-num">04</span></div>
    344. 

  344. </section>
    345. 

  345. 

  346. <!-- ════════════════════════════════════════════
    347. 

  347.      SLIDE 5 — VOC 用户洞察
    348. 

  348.      ════════════════════════════════════════════ -->
    349. 

  349. <section class="slide" id="slide-5">
    350. 

  350.   <div class="slide-header"><span>{{industryName}}行业竞品分析报告</span><span>用户VOC</span></div>
    351. 

  351.   <div class="slide-inner">
    352. 

  352.     <h2 class="text-gold mb-sm">全渠道用户VOC与需求洞察</h2>
    353. 

  353.     <p class="text-dim text-sm mb-md">基于品类 Top 畅销产品 <strong class="text-gold" id="voc-review-count">0</strong> 条真实用户评论深度分析</p>
    354. 

  354.     <div class="cols-2">
    355. 

  355.       <!-- 左：痛点分析 -->
    356. 

  356.       <div class="glass-card">
    357. 

  357.         <h3 class="text-rose text-sm fw-600 mb-sm">🔴 用户核心痛点（差评Top5）</h3>
    358. 

  358.         <div id="pain-points-container"></div>
    359. 

  359.       </div>
    360. 

  360.       <!-- 右：喜爱点 + 场景 -->
    361. 

  361.       <div>
    362. 

  362.         <div class="glass-card mb-sm">
    363. 

  363.           <h3 class="text-sage text-sm fw-600 mb-sm">🟢 用户最爱亮点（好评Top5）</h3>
    364. 

  364.           <div id="highlights-container"></div>
    365. 

  365.         </div>
    366. 

  366.         <div class="glass-card">
    367. 

  367.           <h3 class="text-sm fw-600 mb-sm">📍 使用场景分布</h3>
    368. 

  368.           <div class="chart-wrap" style="max-height:180px"><canvas id="chart-scenes"></canvas></div>
    369. 

  369.         </div>
    370. 

  370.       </div>
    371. 

  371.     </div>
    372. 

  372.   </div>
    373. 

  373.   <div class="slide-footer"><span>{{industryName}}行业竞品分析报告</span><span class="page-num">05</span></div>
    374. 

  374. </section>
    375. 

  375. 

  376. <!-- ════════════════════════════════════════════
    377. 

  377.      SLIDE 6 — B端线索 & 品类矩阵
    378. 

  378.      ════════════════════════════════════════════ -->
    379. 

  379. <section class="slide" id="slide-6">
    380. 

  380.   <div class="slide-header"><span>{{industryName}}行业竞品分析报告</span><span>线索清单</span></div>
    381. 

  381.   <div class="slide-inner">
    382. 

  382.     <h2 class="text-gold mb-sm">B端高价值线索与品类机会矩阵</h2>
    383. 

  383.     <div class="divider mb-md"></div>
    384. 

  384.     <!-- 品类机会矩阵 — 由 REPORT_DATA.categoryMatrix 注入 -->
    385. 

  385.     <div class="glass-card mb-md" style="overflow-x:auto">
    386. 

  386.       <h3 class="text-sm fw-600 mb-sm">品类综合机会评估</h3>
    387. 

  387.       <table class="data-table">
    388. 

  388.         <thead><tr><th>品类</th><th>市场规模</th><th>增长性</th><th>社媒热度</th><th>竞争强度</th><th>中国卖家</th><th>综合推荐</th></tr></thead>
    389. 

  389.         <tbody id="matrix-table-body"></tbody>
    390. 

  390.       </table>
    391. 

  391.     </div>
    392. 

  392.     <div class="cols-2">
    393. 

  393.       <div class="glass-card">
    394. 

  394.         <h3 class="text-sm fw-600 mb-sm">TikTok 社媒热度排名</h3>
    395. 

  395.         <div class="chart-wrap"><canvas id="chart-tiktok"></canvas></div>
    396. 

  396.       </div>
    397. 

  397.       <div class="glass-card">
    398. 

  398.         <h3 class="text-sm fw-600 mb-sm">季节性与要点</h3>
    399. 

  399.         <div id="seasonality-notes" style="font-size:.85rem;color:var(--cream-dim)"></div>
    400. 

  400.       </div>
    401. 

  401.     </div>
    402. 

  402.   </div>
    403. 

  403.   <div class="slide-footer"><span>{{industryName}}行业竞品分析报告</span><span class="page-num">06</span></div>
    404. 

  404. </section>
    405. 

  405. 

  406. <!-- ════════════════════════════════════════════
    407. 

  407.      SLIDE 7 — 执行策略
    408. 

  408.      ════════════════════════════════════════════ -->
    409. 

  409. <section class="slide" id="slide-7">
    410. 

  410.   <div class="slide-header"><span>{{industryName}}行业竞品分析报告</span><span>执行策略</span></div>
    411. 

  411.   <div class="slide-inner">
    412. 

  412.     <h2 class="text-gold mb-sm">市场拓展与落地执行建议</h2>
    413. 

  413.     <div class="divider mb-md"></div>
    414. 

  414.     <!-- 短中长期策略 — 由 REPORT_DATA.strategy 注入 -->
    415. 

  415.     <div class="cols-3" id="strategy-columns"></div>
    416. 

  416.     <!-- VOC驱动的产品策略 -->
    417. 

  417.     <div class="glass-card mt-md">
    418. 

  418.       <h3 class="text-sm fw-600 mb-sm">🔬 VOC驱动的产品开发优先级</h3>
    419. 

  419.       <div id="voc-priorities" style="display:flex;flex-wrap:wrap;gap:12px;font-size:.82rem"></div>
    420. 

  420.     </div>
    421. 

  421.   </div>
    422. 

  422.   <div class="slide-footer"><span>{{industryName}}行业竞品分析报告</span><span class="page-num">07</span></div>
    423. 

  423. </section>
    424. 

  424. 

  425. <!-- ════════════════════════════════════════════
    426. 

  426.      SLIDE 8 — 总结与展望
    427. 

  427.      ════════════════════════════════════════════ -->
    428. 

  428. <section class="slide" id="slide-8">
    429. 

  429.   <div class="slide-header"><span>{{industryName}}行业竞品分析报告</span><span>总结展望</span></div>
    430. 

  430.   <div class="slide-inner" style="max-width:900px">
    431. 

  431.     <h2 class="text-gold mb-sm" style="text-align:center">总结与展望</h2>
    432. 

  432.     <div class="divider" style="margin:0 auto 32px"></div>
    433. 

  433.     <!-- 由 REPORT_DATA.conclusion 注入 -->
    434. 

  434.     <div class="cols-2 mb-md" id="conclusion-top-cards"></div>
    435. 

  435.     <div class="glass-card mb-md" id="conclusion-differentiator" style="text-align:center;padding:28px"></div>
    436. 

  436.     <div class="glass-card" id="conclusion-actions" style="background:linear-gradient(135deg,rgba(197,165,90,.1),rgba(143,166,138,.08));border-color:rgba(197,165,90,.25)"></div>
    437. 

  437.   </div>
    438. 

  438.   <div class="slide-footer"><span>{{industryName}}行业竞品分析报告</span><span class="page-num">08</span></div>
    439. 

  439. </section>
    440. 

  440. 

  441. <!-- ════════════════════════════════════════════
    442. 

  442.      SLIDE 9 — 致谢
    443. 

  443.      ════════════════════════════════════════════ -->
    444. 

  444. <section class="slide" id="slide-9">
    445. 

  445.   <div class="cover-content">
    446. 

  446.     <div class="cover-line" style="margin-bottom:32px"></div>
    447. 

  447.     <h2 style="font-size:clamp(1.6rem,3.5vw,2.6rem);background:linear-gradient(135deg,var(--cream),var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px">感谢您的关注</h2>
    448. 

  448.     <p class="text-dim" style="font-size:1rem;max-width:520px;margin:0 auto 28px">期待与您携手，用AI-VOC系统共同开拓{{industryName}}市场新蓝海</p>
    449. 

  449.     <div class="cover-line"></div>
    450. 

  450.     <div style="margin-top:32px;font-size:.85rem;color:var(--brown-light)">
    451. 

  451.       <p>报告编制：AI-VOC 智能数据分析系统</p>
    452. 

  452.       <p>数据来源：Amazon Sorftime API · TikHub (TikTok & Instagram) · AI-VOC Engine</p>
    453. 

  453.       <p>数据时效：截至 {{reportDate}}</p>
    454. 

  454.       <p style="margin-top:16px;font-size:.82rem;color:var(--gold)">📧 联系我们，获取专属VOC系统试用</p>
    455. 

  455.       <p style="margin-top:12px;font-size:.75rem;opacity:.6">本报告数据来自第三方API，仅供商业决策参考</p>
    456. 

  456.     </div>
    457. 

  457.   </div>
    458. 

  458.   <div class="slide-footer"><span>{{industryName}}行业竞品分析报告</span><span class="page-num">09</span></div>
    459. 

  459. </section>
    460. 

  460. 

  461. </div><!-- /slides-wrapper -->
    462. 

  462. 

  463. <!-- ===== Modal弹窗容器 ===== -->
    464. 

  464. <div class="modal-overlay" id="modal-overlay">
    465. 

  465.   <div class="modal-box">
    466. 

  466.     <button class="modal-close" id="modal-close">&times;</button>
    467. 

  467.     <div class="modal-header" id="modal-header"></div>
    468. 

  468.     <div class="modal-body" id="modal-body"></div>
    469. 

  469.   </div>
    470. 

  470. </div>
    471. 

  471. 

  472. <!-- ============================================================
    473. 

  473.      REPORT DATA — 由编排引擎注入
    474. 

  474.      ============================================================ -->
    475. 

  475. <script>
    476. 

  476. /**
    477. 

  477.  * REPORT_DATA: 所有报告数据由 workflow Stage 7 组装后注入到此对象。
    478. 

  478.  * 模板中所有 DOM 操作均基于此数据驱动渲染。
    479. 

  479.  *
    480. 

  480.  * 结构说明：
    481. 

  481.  * - meta: 报告元信息
    482. 

  482.  * - metrics: 执行摘要指标卡片 [{value, prefix, suffix, label, sub}]
    483. 

  483.  * - coreFindings: 核心发现列表 [{text, highlight, highlightClass}]
    484. 

  484.  * - coreValues: 核心价值列表 [string]
    485. 

  485.  * - categories: 品类市场数据 [{name, weeklySales, weeklyRevenue, avgPrice, brands, growth, chinaRatio, highlight, revenueNum, growthNum}]
    486. 

  486.  * - competitors: 竞品数据 [{name, positioning, positionBadge, priceRange, igFollowers, tiktokFollowers, skuNote, strategyNote, pros, cons, radarData:[5]}]
    487. 

  487.  * - vocAnalysis: VOC分析 {totalReviews, painPoints:[{icon, name, pct, gradient, quote}], highlights:[{name, pct, color}], scenes:[{name, pct}]}
    488. 

  488.  * - categoryMatrix: 品类机会矩阵 [{name, marketSize, growth, socialHeat, competition, chinaRatio, recommendation, badgeClass}]
    489. 

  489.  * - tiktokHeat: TikTok热度 [{name, plays}]
    490. 

  490.  * - seasonalNotes: 季节性要点 [{icon, title, desc}]
    491. 

  491.  * - strategy: 执行策略 {shortTerm:[{title, desc}], midTerm:[{title, desc}], longTerm:[{title, desc}]}
    492. 

  492.  * - vocPriorities: VOC驱动优先级 [{text, badgeClass}]
    493. 

  493.  * - conclusion: 总结 {topCategory:{emoji, title, name, desc}, socialDividend:{emoji, title, name, desc}, differentiator:{title, subtitle, desc}, keyActions:[{emoji, title, desc}]}
    494. 

  494.  * - trendData: 趋势数据 {weeks:[], datasets:[{label, data, borderColor}]}
    495. 

  495.  */
    496. 

  496. const REPORT_DATA = /*{{REPORT_DATA_JSON}}*/ {};
    497. 

  497. </script>
    498. 

  498. 

  499. <!-- ============================================================
    500. 

  500.      JavaScript — 导航 · 动画 · 数据驱动渲染 · 图表
    501. 

  501.      ============================================================ -->
    502. 

  502. <script>
    503. 

  503. /* ===== 全局状态 ===== */
    504. 

  504. let currentSlide = 0;
    505. 

  505. const totalSlides = document.querySelectorAll('.slide').length;
    506. 

  506. let isTransitioning = false;
    507. 

  507. 

  508. /* ===== 自动生成侧边导航 ===== */
    509. 

  509. (function buildNav(){
    510. 

  510.   const tips = ['封面','目录','执行摘要','市场全景','竞品对标','用户VOC','线索清单','执行策略','总结展望','致谢'];
    511. 

  511.   const nav = document.getElementById('side-nav');
    512. 

  512.   tips.forEach((tip,i) => {
    513. 

  513.     const d = document.createElement('div');
    514. 

  514.     d.className = 'nav-dot' + (i===0?' active':'');
    515. 

  515.     d.dataset.tip = tip;
    516. 

  516.     d.dataset.slide = i;
    517. 

  517.     d.addEventListener('click', () => goSlide(i));
    518. 

  518.     nav.appendChild(d);
    519. 

  519.   });
    520. 

  520. })();
    521. 

  521. const dots = document.querySelectorAll('.nav-dot');
    522. 

  522. 

  523. /* ===== 幻灯片切换 ===== */
    524. 

  524. function goSlide(n) {
    525. 

  525.   if (isTransitioning || n === currentSlide || n < 0 || n >= totalSlides) return;
    526. 

  526.   isTransitioning = true;
    527. 

  527.   const slides = document.querySelectorAll('.slide');
    528. 

  528.   slides[currentSlide].classList.remove('active');
    529. 

  529.   slides[n].classList.add('active');
    530. 

  530.   dots.forEach((d, i) => d.classList.toggle('active', i === n));
    531. 

  531.   currentSlide = n;
    532. 

  532.   triggerSlideAnimations(n);
    533. 

  533.   setTimeout(() => { isTransitioning = false; }, 750);
    534. 

  534. }
    535. 

  535. function nextSlide() { goSlide(currentSlide + 1); }
    536. 

  536. function prevSlide() { goSlide(currentSlide - 1); }
    537. 

  537. 

  538. /* ===== 弹窗检测 ===== */
    539. 

  539. function isModalOpen() { return document.getElementById('modal-overlay').classList.contains('show'); }
    540. 

  540. 

  541. /* ===== 键盘事件 ===== */
    542. 

  542. document.addEventListener('keydown', e => {
    543. 

  543.   if (isModalOpen()) return;
    544. 

  544.   if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); nextSlide(); }
    545. 

  545.   else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); prevSlide(); }
    546. 

  546.   else if (e.key === 'Home') { e.preventDefault(); goSlide(0); }
    547. 

  547.   else if (e.key === 'End') { e.preventDefault(); goSlide(totalSlides - 1); }
    548. 

  548. });
    549. 

  549. 

  550. /* ===== 鼠标滚轮 ===== */
    551. 

  551. let wheelTimeout = 0;
    552. 

  552. document.addEventListener('wheel', e => {
    553. 

  553.   if (isModalOpen()) return;
    554. 

  554.   e.preventDefault();
    555. 

  555.   const now = Date.now();
    556. 

  556.   if (now - wheelTimeout < 800) return;
    557. 

  557.   wheelTimeout = now;
    558. 

  558.   e.deltaY > 0 ? nextSlide() : prevSlide();
    559. 

  559. }, { passive: false });
    560. 

  560. 

  561. /* ===== 触屏滑动 ===== */
    562. 

  562. let touchStartY = 0, touchStartX = 0;
    563. 

  563. document.addEventListener('touchstart', e => { touchStartY = e.touches[0].clientY; touchStartX = e.touches[0].clientX; });
    564. 

  564. document.addEventListener('touchend', e => {
    565. 

  565.   if (isModalOpen()) return;
    566. 

  566.   const dy = e.changedTouches[0].clientY - touchStartY;
    567. 

  567.   const dx = e.changedTouches[0].clientX - touchStartX;
    568. 

  568.   if (Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 50) { dy < 0 ? nextSlide() : prevSlide(); }
    569. 

  569.   else if (Math.abs(dx) > 50) { dx < 0 ? nextSlide() : prevSlide(); }
    570. 

  570. });
    571. 

  571. 

  572. /* ===== 全屏 ===== */
    573. 

  573. document.getElementById('fs-btn').addEventListener('click', () => {
    574. 

  574.   if (!document.fullscreenElement) document.documentElement.requestFullscreen().catch(() => {});
    575. 

  575.   else document.exitFullscreen();
    576. 

  576. });
    577. 

  577. 

  578. /* ===== 数字递增动画 ===== */
    579. 

  579. function animateCounters(slideEl) {
    580. 

  580.   slideEl.querySelectorAll('.metric-value[data-count]').forEach(el => {
    581. 

  581.     const target = +el.dataset.count;
    582. 

  582.     const prefix = el.dataset.prefix || '';
    583. 

  583.     const suffix = el.dataset.suffix || '';
    584. 

  584.     const duration = 1800;
    585. 

  585.     const start = performance.now();
    586. 

  586.     const format = n => {
    587. 

  587.       if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
    588. 

  588.       if (n >= 1e3) return (n / 1e3).toFixed(n >= 1e4 ? 0 : 1) + 'K';
    589. 

  589.       return n.toLocaleString();
    590. 

  590.     };
    591. 

  591.     function step(now) {
    592. 

  592.       const p = Math.min((now - start) / duration, 1);
    593. 

  593.       const ease = 1 - Math.pow(1 - p, 3);
    594. 

  594.       el.textContent = prefix + format(Math.round(target * ease)) + suffix;
    595. 

  595.       if (p < 1) requestAnimationFrame(step);
    596. 

  596.     }
    597. 

  597.     requestAnimationFrame(step);
    598. 

  598.   });
    599. 

  599. }
    600. 

  600. 

  601. /* ===== 进度条动画 ===== */
    602. 

  602. function animateBars(slideEl) {
    603. 

  603.   slideEl.querySelectorAll('.bar-fill[data-target]').forEach(el => {
    604. 

  604.     setTimeout(() => { el.style.width = el.dataset.target + '%'; }, 200);
    605. 

  605.   });
    606. 

  606.   slideEl.querySelectorAll('.pain-fill[data-target]').forEach(el => {
    607. 

  607.     setTimeout(() => {
    608. 

  608.       el.style.width = (el.dataset.target / 35 * 100) + '%';
    609. 

  609.       if (el.dataset.bg) el.style.background = el.dataset.bg;
    610. 

  610.     }, 200);
    611. 

  611.   });
    612. 

  612. }
    613. 

  613. 

  614. /* ===== 页面动画触发器 ===== */
    615. 

  615. const animatedSlides = new Set();
    616. 

  616. function triggerSlideAnimations(n) {
    617. 

  617.   const slideEl = document.getElementById('slide-' + n);
    618. 

  618.   if (!slideEl) return;
    619. 

  619.   if (!animatedSlides.has(n)) {
    620. 

  620.     animatedSlides.add(n);
    621. 

  621.     animateCounters(slideEl);
    622. 

  622.     animateBars(slideEl);
    623. 

  623.     initChartsForSlide(n);
    624. 

  624.   }
    625. 

  625. }
    626. 

  626. 

  627. /* ============================================================
    628. 

  628.    Chart.js 全局配置
    629. 

  629.    ============================================================ */
    630. 

  630. const chartInstances = {};
    631. 

  631. const chartFontColor = '#F5E6D3';
    632. 

  632. const chartGridColor = 'rgba(139,111,71,0.15)';
    633. 

  633. const PALETTE = ['rgba(197,165,90,0.7)','rgba(143,166,138,0.65)','rgba(196,134,139,0.6)','rgba(126,155,181,0.55)','rgba(212,185,120,0.5)','rgba(139,111,71,0.4)'];
    634. 

  634. const PALETTE_BORDER = ['#C5A55A','#8FA68A','#C4868B','#7E9BB5','#D4B978','#8B6F47'];
    635. 

  635. 

  636. Chart.defaults.color = chartFontColor;
    637. 

  637. Chart.defaults.font.family = "'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif";
    638. 

  638. Chart.defaults.font.size = 12;
    639. 

  639. 

  640. function initChartsForSlide(n) {
    641. 

  641.   if (n === 3) initMarketCharts();
    642. 

  642.   if (n === 4) initRadarChart();
    643. 

  643.   if (n === 5) initScenesChart();
    644. 

  644.   if (n === 6) initTiktokChart();
    645. 

  645. }
    646. 

  646. 

  647. /* --- 市场全景图表 --- */
    648. 

  648. function initMarketCharts() {
    649. 

  649.   if (chartInstances.revenue || !REPORT_DATA.categories) return;
    650. 

  650.   const cats = REPORT_DATA.categories;
    651. 

  651.   const labels = cats.map(c => c.name);
    652. 

  652.   const revenueData = cats.map(c => c.revenueNum);
    653. 

  653.   chartInstances.revenue = new Chart(document.getElementById('chart-revenue'), {
    654. 

  654.     type: 'bar',
    655. 

  655.     data: { labels, datasets: [{ data: revenueData, backgroundColor: PALETTE.slice(0, cats.length), borderColor: PALETTE_BORDER.slice(0, cats.length), borderWidth: 1, borderRadius: 6, maxBarThickness: 52 }] },
    656. 

  656.     options: {
    657. 

  657.       responsive: true, maintainAspectRatio: false,
    658. 

  658.       plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => '$' + (ctx.raw / 1e6).toFixed(1) + 'M / 周' } } },
    659. 

  659.       scales: { y: { ticks: { callback: v => '$' + (v/1e6).toFixed(0) + 'M' }, grid: { color: chartGridColor } }, x: { grid: { display: false } } },
    660. 

  660.       animation: { duration: 1200, easing: 'easeOutQuart' }
    661. 

  661.     }
    662. 

  662.   });
    663. 

  663. 

  664.   const growthSorted = [...cats].sort((a,b) => b.growthNum - a.growthNum);
    665. 

  665.   chartInstances.growth = new Chart(document.getElementById('chart-growth'), {
    666. 

  666.     type: 'bar',
    667. 

  667.     data: {
    668. 

  668.       labels: growthSorted.map(c => c.name),
    669. 

  669.       datasets: [{ data: growthSorted.map(c => c.growthNum),
    670. 

  670.         backgroundColor: growthSorted.map(c => c.growthNum > 50 ? 'rgba(143,166,138,0.7)' : c.growthNum > 0 ? 'rgba(197,165,90,0.6)' : 'rgba(196,134,139,0.5)'),
    671. 

  671.         borderColor: growthSorted.map(c => c.growthNum > 50 ? '#8FA68A' : c.growthNum > 0 ? '#C5A55A' : '#C4868B'),
    672. 

  672.         borderWidth: 1, borderRadius: 6, maxBarThickness: 52 }]
    673. 

  673.     },
    674. 

  674.     options: {
    675. 

  675.       indexAxis: 'y', responsive: true, maintainAspectRatio: false,
    676. 

  676.       plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => (ctx.raw > 0 ? '+' : '') + ctx.raw + '%' } } },
    677. 

  677.       scales: { x: { ticks: { callback: v => (v > 0 ? '+' : '') + v + '%' }, grid: { color: chartGridColor } }, y: { grid: { display: false } } },
    678. 

  678.       animation: { duration: 1200, easing: 'easeOutQuart' }
    679. 

  679.     }
    680. 

  680.   });
    681. 

  681. }
    682. 

  682. 

  683. /* --- 竞品雷达图 --- */
    684. 

  684. function initRadarChart() {
    685. 

  685.   if (chartInstances.radar || !REPORT_DATA.competitors) return;
    686. 

  686.   const comps = REPORT_DATA.competitors;
    687. 

  687.   const radarLabels = ['品牌知名度','社媒粉丝','内容质量','产品线宽度','价格竞争力'];
    688. 

  688.   const colors = ['#C5A55A','#8FA68A','#C4868B','#7E9BB5','#D4B978'];
    689. 

  689.   const bgColors = ['rgba(197,165,90,0.15)','rgba(143,166,138,0.12)','rgba(196,134,139,0.1)','rgba(126,155,181,0.1)','rgba(212,185,120,0.1)'];
    690. 

  690.   chartInstances.radar = new Chart(document.getElementById('chart-radar'), {
    691. 

  691.     type: 'radar',
    692. 

  692.     data: {
    693. 

  693.       labels: radarLabels,
    694. 

  694.       datasets: comps.map((c,i) => ({
    695. 

  695.         label: c.name, data: c.radarData || [50,50,50,50,50],
    696. 

  696.         borderColor: colors[i%colors.length], backgroundColor: bgColors[i%bgColors.length],
    697. 

  697.         pointBackgroundColor: colors[i%colors.length], borderWidth: 2
    698. 

  698.       }))
    699. 

  699.     },
    700. 

  700.     options: {
    701. 

  701.       responsive: true, maintainAspectRatio: false,
    702. 

  702.       scales: { r: { min: 0, max: 100, ticks: { stepSize: 25, display: false }, grid: { color: chartGridColor }, pointLabels: { font: { size: 11 } }, angleLines: { color: chartGridColor } } },
    703. 

  703.       plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, padding: 14, font: { size: 11 } } } },
    704. 

  704.       animation: { duration: 1200 }
    705. 

  705.     }
    706. 

  706.   });
    707. 

  707. }
    708. 

  708. 

  709. /* --- 使用场景饼图 --- */
    710. 

  710. function initScenesChart() {
    711. 

  711.   if (chartInstances.scenes || !REPORT_DATA.vocAnalysis) return;
    712. 

  712.   const scenes = REPORT_DATA.vocAnalysis.scenes;
    713. 

  713.   chartInstances.scenes = new Chart(document.getElementById('chart-scenes'), {
    714. 

  714.     type: 'doughnut',
    715. 

  715.     data: {
    716. 

  716.       labels: scenes.map(s => s.name + ' ' + s.pct + '%'),
    717. 

  717.       datasets: [{ data: scenes.map(s => s.pct), backgroundColor: PALETTE.slice(0, scenes.length), borderColor: 'rgba(26,17,11,0.6)', borderWidth: 2 }]
    718. 

  718.     },
    719. 

  719.     options: {
    720. 

  720.       responsive: true, maintainAspectRatio: false, cutout: '55%',
    721. 

  721.       plugins: { legend: { position: 'right', labels: { boxWidth: 10, padding: 8, font: { size: 10 } } } },
    722. 

  722.       animation: { duration: 1200 }
    723. 

  723.     }
    724. 

  724.   });
    725. 

  725. }
    726. 

  726. 

  727. /* --- TikTok热度图表 --- */
    728. 

  728. function initTiktokChart() {
    729. 

  729.   if (chartInstances.tiktok || !REPORT_DATA.tiktokHeat) return;
    730. 

  730.   const tt = REPORT_DATA.tiktokHeat;
    731. 

  731.   chartInstances.tiktok = new Chart(document.getElementById('chart-tiktok'), {
    732. 

  732.     type: 'bar',
    733. 

  733.     data: {
    734. 

  734.       labels: tt.map(t => t.name),
    735. 

  735.       datasets: [{ label: '播放量', data: tt.map(t => t.plays),
    736. 

  736.         backgroundColor: PALETTE.slice(0, tt.length), borderColor: PALETTE_BORDER.slice(0, tt.length),
    737. 

  737.         borderWidth: 1, borderRadius: 6, maxBarThickness: 48 }]
    738. 

  738.     },
    739. 

  739.     options: {
    740. 

  740.       responsive: true, maintainAspectRatio: false,
    741. 

  741.       plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => (ctx.raw / 1e6).toFixed(1) + 'M 播放' } } },
    742. 

  742.       scales: { y: { ticks: { callback: v => (v/1e6).toFixed(0) + 'M' }, grid: { color: chartGridColor } }, x: { grid: { display: false } } },
    743. 

  743.       animation: { duration: 1200, easing: 'easeOutQuart' }
    744. 

  744.     }
    745. 

  745.   });
    746. 

  746. }
    747. 

  747. 

  748. /* ============================================================
    749. 

  749.    数据驱动 DOM 渲染
    750. 

  750.    ============================================================ */
    751. 

  751. function renderReport() {
    752. 

  752.   const D = REPORT_DATA;
    753. 

  753.   if (!D || !D.categories) { console.warn('REPORT_DATA 未注入'); return; }
    754. 

  754. 

  755.   // --- Slide 2: 执行摘要 ---
    756. 

  756.   if (D.metrics) {
    757. 

  757.     document.getElementById('exec-metrics').innerHTML = D.metrics.map(m =>
    758. 

  758.       `<div class="glass-card metric-card"><div class="metric-value" data-count="${m.value}" data-prefix="${m.prefix||''}" data-suffix="${m.suffix||''}">${m.prefix||''}0${m.suffix||''}</div><div class="metric-label">${m.label}</div><div class="metric-sub">${m.sub}</div></div>`
    759. 

  759.     ).join('');
    760. 

  760.   }
    761. 

  761.   if (D.coreFindings) {
    762. 

  762.     document.getElementById('core-findings').innerHTML = D.coreFindings.map(f =>
    763. 

  763.       `<li style="margin-bottom:8px">• <strong class="${f.highlightClass||'text-gold'}">${f.highlight||''}</strong> ${f.text}</li>`
    764. 

  764.     ).join('');
    765. 

  765.   }
    766. 

  766.   if (D.coreValues) {
    767. 

  767.     document.getElementById('core-values').innerHTML = D.coreValues.map(v =>
    768. 

  768.       `<li style="margin-bottom:8px">• ${v}</li>`
    769. 

  769.     ).join('');
    770. 

  770.   }
    771. 

  771. 

  772.   // --- Slide 3: 市场全景表格 ---
    773. 

  773.   if (D.categories) {
    774. 

  774.     document.getElementById('market-table-body').innerHTML = D.categories.map(c => {
    775. 

  775.       const growthClass = c.growthNum > 30 ? 'text-sage fw-700' : c.growthNum > 0 ? 'text-sage' : 'text-rose';
    776. 

  776.       const chinaClass = c.chinaRatioNum > 70 ? 'text-rose fw-600' : '';
    777. 

  777.       return `<tr><td class="fw-600 ${c.highlight?'text-gold':''}">${c.name}${c.highlight?' ⭐':''}</td><td>${c.weeklySales}</td><td>${c.weeklyRevenue}</td><td>${c.avgPrice}</td><td>${c.brands}</td><td class="${growthClass}">${c.growth}</td><td class="${chinaClass}">${c.chinaRatio}</td></tr>`;
    778. 

  778.     }).join('');
    779. 

  779.   }
    780. 

  780. 

  781.   // --- Slide 4: 竞品卡片 ---
    782. 

  782.   if (D.competitors) {
    783. 

  783.     document.getElementById('competitor-cards').innerHTML = D.competitors.map(c => `
    784. 

  784.       <div class="glass-card competitor-card">
    785. 

  785.         <span class="badge ${c.positionBadge||'badge-gold'} mb-sm" style="display:inline-block">${c.positioning}</span>
    786. 

  786.         <h3>${c.name}</h3>
    787. 

  787.         <p class="text-xs text-dim mb-sm">${c.priceRange||''}</p>
    788. 

  788.         <div class="comp-stat"><span>Instagram</span><span class="fw-700 text-gold">${c.igFollowers||'—'}</span></div>
    789. 

  789.         <div class="comp-stat"><span>TikTok</span><span class="fw-600">${c.tiktokFollowers||'—'}</span></div>
    790. 

  790.         <div class="comp-stat"><span>Amazon SKU</span><span>${c.skuNote||'—'}</span></div>
    791. 

  791.         <div class="comp-stat"><span>策略</span><span class="text-xs">${c.strategyNote||'—'}</span></div>
    792. 

  792.         <p class="text-xs mt-sm text-dim">${c.pros||''}<br>${c.cons||''}</p>
    793. 

  793.       </div>
    794. 

  794.     `).join('');
    795. 

  795.   }
    796. 

  796. 

  797.   // --- Slide 5: VOC ---
    798. 

  798.   if (D.vocAnalysis) {
    799. 

  799.     const voc = D.vocAnalysis;
    800. 

  800.     document.getElementById('voc-review-count').textContent = voc.totalReviews + '条';
    801. 

  801.     document.getElementById('pain-points-container').innerHTML = voc.painPoints.map(p =>
    802. 

  802.       `<div class="pain-bar"><div class="pain-icon">${p.icon}</div><div class="pain-info"><div class="pain-name">${p.name} <span class="badge badge-rose">${p.pct}%</span></div><div class="pain-track"><div class="pain-fill" style="width:0%" data-target="${p.pct}" data-bg="${p.gradient}"></div></div>${p.quote?`<div class="pain-pct">"${p.quote}"</div>`:''}</div></div>`
    803. 

  803.     ).join('');
    804. 

  804.     document.getElementById('highlights-container').innerHTML = voc.highlights.map(h =>
    805. 

  805.       `<div class="bar-row"><span class="bar-label">${h.name}</span><div class="bar-track"><div class="bar-fill" style="width:0%;background:${h.color}" data-target="${h.pct}" data-value="${h.pct}%"></div></div></div>`
    806. 

  806.     ).join('');
    807. 

  807.   }
    808. 

  808. 

  809.   // --- Slide 6: 品类矩阵 ---
    810. 

  810.   if (D.categoryMatrix) {
    811. 

  811.     document.getElementById('matrix-table-body').innerHTML = D.categoryMatrix.map(c =>
    812. 

  812.       `<tr><td class="fw-600 ${c.highlight?'text-gold':''}">${c.name}</td><td>${c.marketSize}</td><td>${c.growth}</td><td>${c.socialHeat}</td><td>${c.competition}</td><td>${c.chinaRatio}</td><td><span class="badge ${c.badgeClass||'badge-gold'}">${c.recommendation}</span></td></tr>`
    813. 

  813.     ).join('');
    814. 

  814.   }
    815. 

  815.   if (D.seasonalNotes) {
    816. 

  816.     document.getElementById('seasonality-notes').innerHTML = D.seasonalNotes.map(s =>
    817. 

  817.       `<div style="display:flex;align-items:center;gap:8px;margin-bottom:10px"><span style="font-size:1.4rem">${s.icon}</span><div><strong class="text-gold">${s.title}</strong><br>${s.desc}</div></div>`
    818. 

  818.     ).join('');
    819. 

  819.   }
    820. 

  820. 

  821.   // --- Slide 7: 执行策略 ---
    822. 

  822.   if (D.strategy) {
    823. 

  823.     const phases = [
    824. 

  824.       { key: 'shortTerm', label: '短期 1-3个月', badge: 'badge-sage' },
    825. 

  825.       { key: 'midTerm', label: '中期 3-6个月', badge: 'badge-gold' },
    826. 

  826.       { key: 'longTerm', label: '长期 6-12个月', badge: 'badge-blue' }
    827. 

  827.     ];
    828. 

  828.     document.getElementById('strategy-columns').innerHTML = phases.map(p => `
    829. 

  829.       <div class="glass-card">
    830. 

  830.         <span class="badge ${p.badge} mb-sm" style="display:inline-block">${p.label}</span>
    831. 

  831.         <div class="timeline mt-sm">
    832. 

  832.           ${(D.strategy[p.key]||[]).map(item => `<div class="timeline-item"><h4>${item.title}</h4><p>${item.desc}</p></div>`).join('')}
    833. 

  833.         </div>
    834. 

  834.       </div>
    835. 

  835.     `).join('');
    836. 

  836.   }
    837. 

  837.   if (D.vocPriorities) {
    838. 

  838.     document.getElementById('voc-priorities').innerHTML = D.vocPriorities.map(p =>
    839. 

  839.       `<span class="badge ${p.badgeClass||'badge-rose'}">${p.text}</span>`
    840. 

  840.     ).join('');
    841. 

  841.   }
    842. 

  842. 

  843.   // --- Slide 8: 总结 ---
    844. 

  844.   if (D.conclusion) {
    845. 

  845.     const con = D.conclusion;
    846. 

  846.     document.getElementById('conclusion-top-cards').innerHTML = `
    847. 

  847.       <div class="glass-card" style="text-align:center;padding:32px 24px"><div style="font-size:2.4rem;margin-bottom:8px">${con.topCategory.emoji}</div><h3 class="text-gold mb-sm">${con.topCategory.title}</h3><p class="text-sm"><strong>${con.topCategory.name}</strong></p><p class="text-xs text-dim mt-sm">${con.topCategory.desc}</p></div>
    848. 

  848.       <div class="glass-card" style="text-align:center;padding:32px 24px"><div style="font-size:2.4rem;margin-bottom:8px">${con.socialDividend.emoji}</div><h3 class="text-gold mb-sm">${con.socialDividend.title}</h3><p class="text-sm"><strong>${con.socialDividend.name}</strong></p><p class="text-xs text-dim mt-sm">${con.socialDividend.desc}</p></div>`;
    849. 

  849.     document.getElementById('conclusion-differentiator').innerHTML =
    850. 

  850.       `<h3 class="text-gold mb-sm">${con.differentiator.title}</h3><p style="font-size:1.15rem;font-weight:600;color:var(--cream)">${con.differentiator.subtitle}</p><p class="text-sm text-dim mt-sm">${con.differentiator.desc}</p>`;
    851. 

  851.     document.getElementById('conclusion-actions').innerHTML =
    852. 

  852.       `<h3 class="text-sm fw-600 mb-sm" style="text-align:center">✅ 三大关键行动</h3><div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center;font-size:.85rem">${con.keyActions.map(a => `<div><div style="font-size:1.6rem;margin-bottom:4px">${a.emoji}</div><strong>${a.title}</strong><br><span class="text-xs text-dim">${a.desc}</span></div>`).join('')}</div>`;
    853. 

  853.   }
    854. 

  854. }
    855. 

  855. 

  856. /* ============================================================
    857. 

  857.    封面粒子效果
    858. 

  858.    ============================================================ */
    859. 

  859. function initParticles() {
    860. 

  860.   const canvas = document.getElementById('particles-canvas');
    861. 

  861.   if (!canvas) return;
    862. 

  862.   const ctx = canvas.getContext('2d');
    863. 

  863.   let w, h, particles = [];
    864. 

  864.   function resize() { w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; }
    865. 

  865.   resize();
    866. 

  866.   window.addEventListener('resize', resize);
    867. 

  867.   for (let i = 0; i < 60; i++) {
    868. 

  868.     particles.push({
    869. 

  869.       x: Math.random() * w, y: Math.random() * h,
    870. 

  870.       r: Math.random() * 2 + 0.5,
    871. 

  871.       dx: (Math.random() - 0.5) * 0.3, dy: (Math.random() - 0.5) * 0.2,
    872. 

  872.       alpha: Math.random() * 0.4 + 0.1,
    873. 

  873.       color: Math.random() > 0.5 ? '197,165,90' : '212,185,120'
    874. 

  874.     });
    875. 

  875.   }
    876. 

  876.   function draw() {
    877. 

  877.     ctx.clearRect(0, 0, w, h);
    878. 

  878.     const grd = ctx.createRadialGradient(w*.5, h*.4, 0, w*.5, h*.4, w*.6);
    879. 

  879.     grd.addColorStop(0, 'rgba(92,61,46,0.12)');
    880. 

  880.     grd.addColorStop(0.5, 'rgba(45,24,16,0.06)');
    881. 

  881.     grd.addColorStop(1, 'transparent');
    882. 

  882.     ctx.fillStyle = grd; ctx.fillRect(0, 0, w, h);
    883. 

  883.     particles.forEach(p => {
    884. 

  884.       ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
    885. 

  885.       ctx.fillStyle = `rgba(${p.color},${p.alpha})`; ctx.fill();
    886. 

  886.       p.x += p.dx; p.y += p.dy;
    887. 

  887.       if (p.x<0||p.x>w) p.dx *= -1;
    888. 

  888.       if (p.y<0||p.y>h) p.dy *= -1;
    889. 

  889.       p.alpha += (Math.random()-.5)*.01;
    890. 

  890.       p.alpha = Math.max(.05, Math.min(.5, p.alpha));
    891. 

  891.     });
    892. 

  892.     for (let i=0; i<particles.length; i++) {
    893. 

  893.       for (let j=i+1; j<particles.length; j++) {
    894. 

  894.         const dx=particles[i].x-particles[j].x, dy=particles[i].y-particles[j].y;
    895. 

  895.         const dist = Math.sqrt(dx*dx+dy*dy);
    896. 

  896.         if (dist<150) { ctx.beginPath(); ctx.moveTo(particles[i].x,particles[i].y); ctx.lineTo(particles[j].x,particles[j].y); ctx.strokeStyle=`rgba(197,165,90,${.06*(1-dist/150)})`; ctx.lineWidth=.5; ctx.stroke(); }
    897. 

  897.       }
    898. 

  898.     }
    899. 

  899.     requestAnimationFrame(draw);
    900. 

  900.   }
    901. 

  901.   draw();
    902. 

  902. }
    903. 

  903. 

  904. /* ============================================================
    905. 

  905.    Modal 弹窗系统
    906. 

  906.    ============================================================ */
    907. 

  907. const modalOverlay = document.getElementById('modal-overlay');
    908. 

  908. const modalHeader  = document.getElementById('modal-header');
    909. 

  909. const modalBody    = document.getElementById('modal-body');
    910. 

  910. function openModal(headerHTML, bodyHTML) {
    911. 

  911.   modalHeader.innerHTML = headerHTML;
    912. 

  912.   modalBody.innerHTML = bodyHTML;
    913. 

  913.   modalOverlay.style.display = 'flex';
    914. 

  914.   requestAnimationFrame(() => modalOverlay.classList.add('show'));
    915. 

  915. }
    916. 

  916. function closeModal() {
    917. 

  917.   modalOverlay.classList.remove('show');
    918. 

  918.   setTimeout(() => { modalOverlay.style.display = 'none'; }, 350);
    919. 

  919. }
    920. 

  920. document.getElementById('modal-close').addEventListener('click', closeModal);
    921. 

  921. modalOverlay.addEventListener('click', e => { if(e.target===modalOverlay) closeModal(); });
    922. 

  922. document.addEventListener('keydown', e => { if(e.key==='Escape' && modalOverlay.classList.contains('show')) closeModal(); });
    923. 

  923. 

  924. /* ===== 初始化 ===== */
    925. 

  925. renderReport();
    926. 

  926. initParticles();
    927. 

  927. triggerSlideAnimations(0);
    928. 

  928. </script>
    929. 

  929. </body>
    930. 

  930. </html>
    931.