aico-cli 2.0.38 → 2.0.75

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 (12) hide show
  1. package/bin/cli/cli.js +1687 -1585
  2. package/bin/cli/package.json +1 -1
  3. package/bin/cli/sdk-tools.d.ts +0 -8
  4. package/dist/chunks/simple-config.mjs +6 -6
  5. package/package.json +2 -2
  6. package/templates/cursor.md +9 -4
  7. package/templates/personality.md +8 -3
  8. package/templates/skills/tech-whitepaper/LICENSE.txt +21 -0
  9. package/templates/skills/tech-whitepaper/SKILL.md +86 -0
  10. package/templates/skills/tech-whitepaper/assets/whitepaper-template.html +830 -0
  11. package/templates/skills/tech-whitepaper/references/design-system.md +165 -0
  12. package/templates/skills/tech-whitepaper/references/mermaid-patterns.md +195 -0
package/templates/skills/tech-whitepaper/assets/whitepaper-template.html ADDED
@@ -0,0 +1,830 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>{{PRODUCT_NAME}} 技术白皮书</title>
7
+ <!-- Mermaid CDN -->
8
+ <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
9
+ <style>
10
+ /* ========================================
11
+ Design System: Modern Minimalist
12
+ 可定制的CSS变量
13
+ ======================================== */
14
+ :root {
15
+ /* 品牌色 - 可根据企业VI定制 */
16
+ --brand-primary: #2563eb;
17
+ --brand-secondary: #1e40af;
18
+ --brand-accent: #3b82f6;
19
+
20
+ /* 文字色 */
21
+ --text-primary: #111827;
22
+ --text-secondary: #4b5563;
23
+ --text-muted: #9ca3af;
24
+
25
+ /* 背景色 */
26
+ --bg-white: #ffffff;
27
+ --bg-light: #f9fafb;
28
+ --bg-subtle: #f3f4f6;
29
+ --border-light: #e5e7eb;
30
+
31
+ /* 阴影 */
32
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
33
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
34
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
35
+
36
+ /* 圆角 */
37
+ --radius-sm: 6px;
38
+ --radius-md: 12px;
39
+ --radius-lg: 16px;
40
+
41
+ /* 间距 */
42
+ --space-xs: 8px;
43
+ --space-sm: 16px;
44
+ --space-md: 24px;
45
+ --space-lg: 48px;
46
+ --space-xl: 80px;
47
+ }
48
+
49
+ * {
50
+ margin: 0;
51
+ padding: 0;
52
+ box-sizing: border-box;
53
+ }
54
+
55
+ body {
56
+ font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
57
+ font-size: 16px;
58
+ line-height: 1.75;
59
+ color: var(--text-primary);
60
+ background-color: var(--bg-white);
61
+ -webkit-font-smoothing: antialiased;
62
+ -moz-osx-font-smoothing: grayscale;
63
+ }
64
+
65
+ /* ========================================
66
+ Layout: Single Column, Wide Margins
67
+ ======================================== */
68
+ .container {
69
+ max-width: 900px;
70
+ margin: 0 auto;
71
+ padding: 0 var(--space-md);
72
+ }
73
+
74
+ /* ========================================
75
+ Hero Section - 首屏英雄区
76
+ ======================================== */
77
+ .hero {
78
+ padding: var(--space-xl) 0;
79
+ text-align: center;
80
+ background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-white) 100%);
81
+ }
82
+
83
+ .hero-badge {
84
+ display: inline-block;
85
+ padding: 6px 16px;
86
+ background: var(--brand-primary);
87
+ color: white;
88
+ font-size: 12px;
89
+ font-weight: 600;
90
+ letter-spacing: 0.5px;
91
+ text-transform: uppercase;
92
+ border-radius: 20px;
93
+ margin-bottom: var(--space-md);
94
+ }
95
+
96
+ .hero h1 {
97
+ font-size: 3rem;
98
+ font-weight: 700;
99
+ color: var(--text-primary);
100
+ margin-bottom: var(--space-sm);
101
+ letter-spacing: -0.02em;
102
+ }
103
+
104
+ .hero-subtitle {
105
+ font-size: 1.25rem;
106
+ color: var(--text-secondary);
107
+ margin-bottom: var(--space-md);
108
+ }
109
+
110
+ .hero-meta {
111
+ font-size: 14px;
112
+ color: var(--text-muted);
113
+ }
114
+
115
+ .hero-demo {
116
+ margin-top: var(--space-md);
117
+ }
118
+
119
+ .demo-link {
120
+ display: inline-block;
121
+ padding: 12px 24px;
122
+ background: var(--brand-primary);
123
+ color: white;
124
+ text-decoration: none;
125
+ border-radius: 8px;
126
+ font-weight: 600;
127
+ font-size: 15px;
128
+ transition: background 0.2s, transform 0.2s;
129
+ }
130
+
131
+ .demo-link:hover {
132
+ background: var(--brand-secondary);
133
+ transform: translateY(-2px);
134
+ }
135
+
136
+ .hero-banner {
137
+ margin-top: var(--space-lg);
138
+ border-radius: var(--radius-lg);
139
+ overflow: hidden;
140
+ box-shadow: var(--shadow-lg);
141
+ }
142
+
143
+ .hero-banner img {
144
+ width: 100%;
145
+ display: block;
146
+ }
147
+
148
+ /* ========================================
149
+ Navigation (TOC) - 目录导航
150
+ ======================================== */
151
+ .toc {
152
+ background: var(--bg-light);
153
+ padding: var(--space-lg) 0;
154
+ border-bottom: 1px solid var(--border-light);
155
+ }
156
+
157
+ .toc h2 {
158
+ font-size: 14px;
159
+ font-weight: 600;
160
+ color: var(--text-muted);
161
+ text-transform: uppercase;
162
+ letter-spacing: 1px;
163
+ margin-bottom: var(--space-md);
164
+ }
165
+
166
+ .toc-grid {
167
+ display: grid;
168
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
169
+ gap: var(--space-sm);
170
+ }
171
+
172
+ .toc-link {
173
+ display: block;
174
+ padding: var(--space-xs) 0;
175
+ color: var(--text-secondary);
176
+ text-decoration: none;
177
+ font-size: 15px;
178
+ transition: color 0.2s;
179
+ }
180
+
181
+ .toc-link:hover {
182
+ color: var(--brand-primary);
183
+ }
184
+
185
+ .toc-link span {
186
+ color: var(--brand-primary);
187
+ font-weight: 600;
188
+ margin-right: 8px;
189
+ }
190
+
191
+ /* ========================================
192
+ Sections - 章节样式
193
+ ======================================== */
194
+ section {
195
+ padding: var(--space-xl) 0;
196
+ border-bottom: 1px solid var(--border-light);
197
+ }
198
+
199
+ section:last-of-type {
200
+ border-bottom: none;
201
+ }
202
+
203
+ .section-label {
204
+ display: inline-block;
205
+ font-size: 12px;
206
+ font-weight: 600;
207
+ color: var(--brand-primary);
208
+ text-transform: uppercase;
209
+ letter-spacing: 1px;
210
+ margin-bottom: var(--space-xs);
211
+ }
212
+
213
+ h2 {
214
+ font-size: 2rem;
215
+ font-weight: 700;
216
+ color: var(--text-primary);
217
+ margin-bottom: var(--space-md);
218
+ letter-spacing: -0.01em;
219
+ }
220
+
221
+ h3 {
222
+ font-size: 1.25rem;
223
+ font-weight: 600;
224
+ color: var(--text-primary);
225
+ margin-top: var(--space-lg);
226
+ margin-bottom: var(--space-sm);
227
+ }
228
+
229
+ p {
230
+ color: var(--text-secondary);
231
+ margin-bottom: var(--space-sm);
232
+ }
233
+
234
+ p.lead {
235
+ font-size: 1.125rem;
236
+ color: var(--text-primary);
237
+ margin-bottom: var(--space-md);
238
+ }
239
+
240
+ /* ========================================
241
+ Lists - 列表
242
+ ======================================== */
243
+ ul, ol {
244
+ padding-left: var(--space-md);
245
+ margin-bottom: var(--space-md);
246
+ }
247
+
248
+ li {
249
+ color: var(--text-secondary);
250
+ margin-bottom: var(--space-xs);
251
+ }
252
+
253
+ li strong {
254
+ color: var(--text-primary);
255
+ }
256
+
257
+ /* ========================================
258
+ Feature Cards - 特性卡片
259
+ ======================================== */
260
+ .feature-grid {
261
+ display: grid;
262
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
263
+ gap: var(--space-md);
264
+ margin: var(--space-md) 0;
265
+ }
266
+
267
+ .feature-card {
268
+ background: var(--bg-light);
269
+ border: 1px solid var(--border-light);
270
+ border-radius: var(--radius-md);
271
+ padding: var(--space-md);
272
+ }
273
+
274
+ .feature-card h4 {
275
+ font-size: 1rem;
276
+ font-weight: 600;
277
+ color: var(--text-primary);
278
+ margin-bottom: var(--space-xs);
279
+ }
280
+
281
+ .feature-card p {
282
+ font-size: 14px;
283
+ color: var(--text-secondary);
284
+ margin: 0;
285
+ }
286
+
287
+ /* ========================================
288
+ Tables - 表格
289
+ ======================================== */
290
+ .table-wrapper {
291
+ overflow-x: auto;
292
+ margin: var(--space-md) 0;
293
+ }
294
+
295
+ table {
296
+ width: 100%;
297
+ border-collapse: collapse;
298
+ font-size: 15px;
299
+ }
300
+
301
+ th {
302
+ text-align: left;
303
+ padding: var(--space-sm);
304
+ background: var(--bg-light);
305
+ border-bottom: 2px solid var(--border-light);
306
+ font-weight: 600;
307
+ color: var(--text-primary);
308
+ }
309
+
310
+ td {
311
+ padding: var(--space-sm);
312
+ border-bottom: 1px solid var(--border-light);
313
+ color: var(--text-secondary);
314
+ }
315
+
316
+ /* ========================================
317
+ Images & Figures - 图片与图注
318
+ ======================================== */
319
+ figure {
320
+ margin: var(--space-lg) 0;
321
+ }
322
+
323
+ figure img {
324
+ width: 100%;
325
+ border-radius: var(--radius-md);
326
+ box-shadow: var(--shadow-md);
327
+ cursor: pointer;
328
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
329
+ }
330
+
331
+ figure img:hover {
332
+ transform: scale(1.02);
333
+ box-shadow: var(--shadow-lg);
334
+ }
335
+
336
+ figcaption {
337
+ text-align: center;
338
+ font-size: 14px;
339
+ color: var(--text-muted);
340
+ margin-top: var(--space-sm);
341
+ }
342
+
343
+ .image-grid {
344
+ display: grid;
345
+ grid-template-columns: repeat(2, 1fr);
346
+ gap: var(--space-md);
347
+ margin: var(--space-md) 0;
348
+ }
349
+
350
+ .image-grid figure {
351
+ margin: 0;
352
+ }
353
+
354
+ @media (max-width: 768px) {
355
+ .image-grid {
356
+ grid-template-columns: 1fr;
357
+ }
358
+ }
359
+
360
+ /* ========================================
361
+ Image Lightbox Modal - 图片灯箱
362
+ ======================================== */
363
+ .lightbox {
364
+ display: none;
365
+ position: fixed;
366
+ z-index: 9999;
367
+ left: 0;
368
+ top: 0;
369
+ width: 100%;
370
+ height: 100%;
371
+ background-color: rgba(0, 0, 0, 0.9);
372
+ cursor: zoom-out;
373
+ animation: fadeIn 0.2s ease;
374
+ }
375
+
376
+ @keyframes fadeIn {
377
+ from { opacity: 0; }
378
+ to { opacity: 1; }
379
+ }
380
+
381
+ .lightbox.active {
382
+ display: flex;
383
+ align-items: center;
384
+ justify-content: center;
385
+ }
386
+
387
+ .lightbox img {
388
+ max-width: 90%;
389
+ max-height: 90%;
390
+ border-radius: var(--radius-md);
391
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
392
+ animation: zoomIn 0.3s ease;
393
+ }
394
+
395
+ @keyframes zoomIn {
396
+ from { transform: scale(0.8); opacity: 0; }
397
+ to { transform: scale(1); opacity: 1; }
398
+ }
399
+
400
+ .lightbox-close {
401
+ position: absolute;
402
+ top: 20px;
403
+ right: 30px;
404
+ color: white;
405
+ font-size: 40px;
406
+ font-weight: 300;
407
+ cursor: pointer;
408
+ transition: color 0.2s;
409
+ }
410
+
411
+ .lightbox-close:hover {
412
+ color: var(--brand-accent);
413
+ }
414
+
415
+ .lightbox-caption {
416
+ position: absolute;
417
+ bottom: 30px;
418
+ left: 50%;
419
+ transform: translateX(-50%);
420
+ color: white;
421
+ font-size: 14px;
422
+ text-align: center;
423
+ max-width: 80%;
424
+ }
425
+
426
+ /* ========================================
427
+ Mermaid Diagrams - 架构图
428
+ ======================================== */
429
+ .diagram-container {
430
+ background: var(--bg-light);
431
+ border: 1px solid var(--border-light);
432
+ border-radius: var(--radius-md);
433
+ padding: var(--space-md);
434
+ margin: var(--space-md) 0;
435
+ overflow-x: auto;
436
+ }
437
+
438
+ .diagram-container .mermaid,
439
+ .diagram-container pre.mermaid {
440
+ display: flex;
441
+ justify-content: center;
442
+ background: transparent;
443
+ margin: 0;
444
+ padding: 0;
445
+ border: none;
446
+ font-family: inherit;
447
+ }
448
+
449
+ pre.mermaid {
450
+ background: transparent !important;
451
+ border: none !important;
452
+ margin: 0 !important;
453
+ padding: 0 !important;
454
+ }
455
+
456
+ .diagram-title {
457
+ font-size: 14px;
458
+ font-weight: 600;
459
+ color: var(--text-muted);
460
+ text-transform: uppercase;
461
+ letter-spacing: 0.5px;
462
+ margin-bottom: var(--space-sm);
463
+ text-align: center;
464
+ }
465
+
466
+ /* ========================================
467
+ Callout Boxes - 提示框
468
+ ======================================== */
469
+ .callout {
470
+ background: var(--bg-light);
471
+ border-left: 4px solid var(--brand-primary);
472
+ border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
473
+ padding: var(--space-md);
474
+ margin: var(--space-md) 0;
475
+ }
476
+
477
+ .callout p {
478
+ margin: 0;
479
+ color: var(--text-primary);
480
+ }
481
+
482
+ /* ========================================
483
+ Code - 代码样式
484
+ ======================================== */
485
+ code {
486
+ font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
487
+ font-size: 14px;
488
+ background: var(--bg-subtle);
489
+ padding: 2px 6px;
490
+ border-radius: 4px;
491
+ color: var(--brand-secondary);
492
+ }
493
+
494
+ /* ========================================
495
+ Footer - 页脚
496
+ ======================================== */
497
+ footer {
498
+ background: var(--text-primary);
499
+ color: var(--bg-white);
500
+ padding: var(--space-lg) 0;
501
+ text-align: center;
502
+ }
503
+
504
+ footer p {
505
+ color: var(--text-muted);
506
+ font-size: 14px;
507
+ margin: 0;
508
+ }
509
+
510
+ /* ========================================
511
+ Utilities - 工具类
512
+ ======================================== */
513
+ .text-center { text-align: center; }
514
+ .mt-lg { margin-top: var(--space-lg); }
515
+ .mb-lg { margin-bottom: var(--space-lg); }
516
+ </style>
517
+ </head>
518
+ <body>
519
+
520
+ <!-- Hero Section -->
521
+ <header class="hero">
522
+ <div class="container">
523
+ <span class="hero-badge">{{COMPANY_NAME}} · {{DOCUMENT_TYPE}}</span>
524
+ <h1>{{PRODUCT_NAME}}</h1>
525
+ <p class="hero-subtitle">{{PRODUCT_SUBTITLE}}</p>
526
+ <p class="hero-meta">{{DATE}} · 版本 {{VERSION}}</p>
527
+ <!-- 可选：演示链接 -->
528
+ <!--
529
+ <div class="hero-demo">
530
+ <a href="{{DEMO_URL}}" target="_blank" class="demo-link">🚀 在线演示</a>
531
+ </div>
532
+ -->
533
+ <!-- 可选：Banner图 -->
534
+ <!--
535
+ <div class="hero-banner">
536
+ <img src="{{BANNER_IMAGE}}" alt="{{PRODUCT_NAME}} Banner">
537
+ </div>
538
+ -->
539
+ </div>
540
+ </header>
541
+
542
+ <!-- Table of Contents -->
543
+ <nav class="toc">
544
+ <div class="container">
545
+ <h2>目录导航</h2>
546
+ <div class="toc-grid">
547
+ <!-- 根据实际章节调整 -->
548
+ <a href="#overview" class="toc-link"><span>01</span>产品概述</a>
549
+ <a href="#value" class="toc-link"><span>02</span>核心价值</a>
550
+ <a href="#composition" class="toc-link"><span>03</span>产品组成</a>
551
+ <a href="#architecture" class="toc-link"><span>04</span>技术架构</a>
552
+ <a href="#features" class="toc-link"><span>05</span>主要功能</a>
553
+ <a href="#deployment" class="toc-link"><span>06</span>部署场景</a>
554
+ <a href="#support" class="toc-link"><span>07</span>技术支持</a>
555
+ </div>
556
+ </div>
557
+ </nav>
558
+
559
+ <main>
560
+ <div class="container">
561
+
562
+ <!-- Section: 产品概述 -->
563
+ <section id="overview">
564
+ <span class="section-label">Section 01</span>
565
+ <h2>产品概述</h2>
566
+ <p class="lead"><strong>{{PRODUCT_NAME}}</strong> 是 {{PRODUCT_DESCRIPTION}}</p>
567
+ <p>{{PRODUCT_DETAIL}}</p>
568
+ </section>
569
+
570
+ <!-- Section: 核心价值 -->
571
+ <section id="value">
572
+ <span class="section-label">Section 02</span>
573
+ <h2>核心价值</h2>
574
+ <p class="lead">{{VALUE_INTRO}}</p>
575
+
576
+ <div class="feature-grid">
577
+ <div class="feature-card">
578
+ <h4>🔗 {{FEATURE_1_TITLE}}</h4>
579
+ <p>{{FEATURE_1_DESC}}</p>
580
+ </div>
581
+ <div class="feature-card">
582
+ <h4>🧠 {{FEATURE_2_TITLE}}</h4>
583
+ <p>{{FEATURE_2_DESC}}</p>
584
+ </div>
585
+ <div class="feature-card">
586
+ <h4>🔍 {{FEATURE_3_TITLE}}</h4>
587
+ <p>{{FEATURE_3_DESC}}</p>
588
+ </div>
589
+ <!-- 可添加更多特性卡片 -->
590
+ </div>
591
+ </section>
592
+
593
+ <!-- Section: 产品组成 -->
594
+ <section id="composition">
595
+ <span class="section-label">Section 03</span>
596
+ <h2>产品组成</h2>
597
+ <p>{{COMPOSITION_INTRO}}</p>
598
+
599
+ <div class="table-wrapper">
600
+ <table>
601
+ <thead>
602
+ <tr>
603
+ <th>组件名称</th>
604
+ <th>核心功能</th>
605
+ <th>技术载体</th>
606
+ </tr>
607
+ </thead>
608
+ <tbody>
609
+ <tr>
610
+ <td><strong>{{COMPONENT_1_NAME}}</strong></td>
611
+ <td>{{COMPONENT_1_FUNCTION}}</td>
612
+ <td>{{COMPONENT_1_TECH}}</td>
613
+ </tr>
614
+ <!-- 可添加更多组件行 -->
615
+ </tbody>
616
+ </table>
617
+ </div>
618
+ </section>
619
+
620
+ <!-- Section: 技术架构 -->
621
+ <section id="architecture">
622
+ <span class="section-label">Section 04</span>
623
+ <h2>技术架构</h2>
624
+ <p class="lead">{{ARCHITECTURE_INTRO}}</p>
625
+
626
+ <div class="diagram-container">
627
+ <div class="diagram-title">系统架构总览</div>
628
+ <pre class="mermaid">
629
+ flowchart TB
630
+ subgraph Client["客户端层"]
631
+ Web["Web"]
632
+ Mobile["Mobile"]
633
+ API["API"]
634
+ end
635
+ subgraph Backend["后端服务层"]
636
+ Core["核心服务"]
637
+ BizLogic["业务逻辑"]
638
+ end
639
+ subgraph Data["数据层"]
640
+ DB["数据库"]
641
+ Cache["缓存"]
642
+ end
643
+ Client --> Backend
644
+ Backend --> Data
645
+ </pre>
646
+ </div>
647
+
648
+ <h3>技术栈详解</h3>
649
+ <ul>
650
+ <li><strong>前端层</strong>：{{FRONTEND_TECH}}</li>
651
+ <li><strong>后端层</strong>：{{BACKEND_TECH}}</li>
652
+ <li><strong>数据层</strong>：{{DATA_TECH}}</li>
653
+ </ul>
654
+ </section>
655
+
656
+ <!-- Section: 主要功能 -->
657
+ <section id="features">
658
+ <span class="section-label">Section 05</span>
659
+ <h2>产品主要功能</h2>
660
+
661
+ <div class="feature-grid">
662
+ <div class="feature-card">
663
+ <h4>💬 {{FUNC_1_TITLE}}</h4>
664
+ <p>{{FUNC_1_DESC}}</p>
665
+ </div>
666
+ <div class="feature-card">
667
+ <h4>📚 {{FUNC_2_TITLE}}</h4>
668
+ <p>{{FUNC_2_DESC}}</p>
669
+ </div>
670
+ <!-- 可添加更多功能卡片 -->
671
+ </div>
672
+
673
+ <!-- 可选：功能截图 -->
674
+ <!--
675
+ <figure>
676
+ <img src="{{SCREENSHOT_PATH}}" alt="{{SCREENSHOT_ALT}}">
677
+ <figcaption>图 X-X: {{SCREENSHOT_CAPTION}}</figcaption>
678
+ </figure>
679
+ -->
680
+ </section>
681
+
682
+ <!-- Section: 部署场景 -->
683
+ <section id="deployment">
684
+ <span class="section-label">Section 06</span>
685
+ <h2>集成部署场景</h2>
686
+
687
+ <div class="diagram-container">
688
+ <div class="diagram-title">部署架构选项</div>
689
+ <pre class="mermaid">
690
+ flowchart LR
691
+ subgraph Dev["开发环境"]
692
+ D1["docker-compose"]
693
+ end
694
+ subgraph Prod["生产环境"]
695
+ P1["Kubernetes"]
696
+ end
697
+ Dev --> Prod
698
+ </pre>
699
+ </div>
700
+
701
+ <h3>开发环境</h3>
702
+ <p>{{DEV_ENV_DESC}}</p>
703
+
704
+ <h3>生产环境</h3>
705
+ <p>{{PROD_ENV_DESC}}</p>
706
+ </section>
707
+
708
+ <!-- Section: 技术支持 -->
709
+ <section id="support">
710
+ <span class="section-label">Section 07</span>
711
+ <h2>技术服务支持</h2>
712
+ <p class="lead">{{SUPPORT_INTRO}}</p>
713
+
714
+ <!-- 可选：演示地址提示框 -->
715
+ <!--
716
+ <div class="callout" style="background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%); border-left-color: #2563eb;">
717
+ <p style="font-size: 1.1rem; margin-bottom: 8px;"><strong>🚀 在线演示地址</strong></p>
718
+ <p><a href="{{DEMO_URL}}" target="_blank" style="color: #2563eb; text-decoration: none; font-weight: 500;">{{DEMO_URL}}</a></p>
719
+ </div>
720
+ -->
721
+
722
+ <div class="feature-grid">
723
+ <div class="feature-card">
724
+ <h4>📖 文档中心</h4>
725
+ <p>提供详尽的API文档、架构设计文档与最佳实践指南。</p>
726
+ </div>
727
+ <div class="feature-card">
728
+ <h4>🏢 企业定制</h4>
729
+ <p>提供企业级私有化部署、功能定制开发、专属技术支持服务。</p>
730
+ </div>
731
+ <div class="feature-card">
732
+ <h4>📞 技术咨询</h4>
733
+ <p>提供架构咨询、性能优化建议、技术选型指导等专业服务。</p>
734
+ </div>
735
+ </div>
736
+ </section>
737
+
738
+ </div>
739
+ </main>
740
+
741
+ <!-- Lightbox Modal -->
742
+ <div id="lightbox" class="lightbox" onclick="closeLightbox()">
743
+ <span class="lightbox-close" onclick="closeLightbox()">&times;</span>
744
+ <img id="lightbox-img" src="" alt="">
745
+ <div id="lightbox-caption" class="lightbox-caption"></div>
746
+ </div>
747
+
748
+ <!-- Footer -->
749
+ <footer>
750
+ <div class="container">
751
+ <p style="font-size: 16px; color: #fff; margin-bottom: 8px;">{{COMPANY_NAME}}</p>
752
+ <p>© {{YEAR}} {{PRODUCT_NAME}}. All Rights Reserved.</p>
753
+ <!-- 可选：演示链接 -->
754
+ <!--
755
+ <p style="margin-top: 12px;">
756
+ <a href="{{DEMO_URL}}" target="_blank" style="color: #60a5fa; text-decoration: none;">🚀 在线演示: {{DEMO_DOMAIN}}</a>
757
+ </p>
758
+ -->
759
+ </div>
760
+ </footer>
761
+
762
+ <script>
763
+ // Initialize Mermaid
764
+ mermaid.initialize({
765
+ startOnLoad: true,
766
+ securityLevel: 'loose',
767
+ theme: 'neutral',
768
+ flowchart: {
769
+ useMaxWidth: true,
770
+ htmlLabels: true,
771
+ curve: 'basis',
772
+ padding: 20
773
+ },
774
+ themeVariables: {
775
+ primaryColor: '#2563eb',
776
+ primaryTextColor: '#fff',
777
+ primaryBorderColor: '#1e40af',
778
+ lineColor: '#9ca3af',
779
+ secondaryColor: '#f3f4f6',
780
+ tertiaryColor: '#f9fafb'
781
+ }
782
+ });
783
+
784
+ // Lightbox functionality
785
+ function openLightbox(img) {
786
+ const lightbox = document.getElementById('lightbox');
787
+ const lightboxImg = document.getElementById('lightbox-img');
788
+ const lightboxCaption = document.getElementById('lightbox-caption');
789
+
790
+ lightboxImg.src = img.src;
791
+ lightboxImg.alt = img.alt;
792
+
793
+ const figure = img.closest('figure');
794
+ if (figure) {
795
+ const caption = figure.querySelector('figcaption');
796
+ if (caption) {
797
+ lightboxCaption.textContent = caption.textContent;
798
+ }
799
+ }
800
+
801
+ lightbox.classList.add('active');
802
+ document.body.style.overflow = 'hidden';
803
+ }
804
+
805
+ function closeLightbox() {
806
+ const lightbox = document.getElementById('lightbox');
807
+ lightbox.classList.remove('active');
808
+ document.body.style.overflow = '';
809
+ }
810
+
811
+ // Close on Escape key
812
+ document.addEventListener('keydown', function(e) {
813
+ if (e.key === 'Escape') {
814
+ closeLightbox();
815
+ }
816
+ });
817
+
818
+ // Add click handlers to all images
819
+ document.addEventListener('DOMContentLoaded', function() {
820
+ const images = document.querySelectorAll('figure img');
821
+ images.forEach(img => {
822
+ img.addEventListener('click', function() {
823
+ openLightbox(this);
824
+ });
825
+ });
826
+ });
827
+ </script>
828
+
829
+ </body>
830
+ </html>