aico-cli 2.0.38 → 2.0.40
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.
- package/dist/chunks/simple-config.mjs +6 -6
- package/package.json +1 -1
- package/templates/skills/tech-whitepaper/LICENSE.txt +21 -0
- package/templates/skills/tech-whitepaper/SKILL.md +86 -0
- package/templates/skills/tech-whitepaper/assets/whitepaper-template.html +830 -0
- package/templates/skills/tech-whitepaper/references/design-system.md +165 -0
- package/templates/skills/tech-whitepaper/references/mermaid-patterns.md +195 -0
|
@@ -14,7 +14,7 @@ import { join, dirname, basename } from 'pathe';
|
|
|
14
14
|
import { fileURLToPath } from 'node:url';
|
|
15
15
|
import { EventEmitter } from 'node:events';
|
|
16
16
|
|
|
17
|
-
const version = "2.0.
|
|
17
|
+
const version = "2.0.40";
|
|
18
18
|
|
|
19
19
|
function displayBanner(subtitle) {
|
|
20
20
|
const defaultSubtitle = "\u4E00\u952E\u914D\u7F6E\u4F60\u7684\u5F00\u53D1\u73AF\u5883";
|
|
@@ -5139,7 +5139,7 @@ class ConfigInstaller extends AbstractInstaller {
|
|
|
5139
5139
|
async applyCompanyConfig(silent = false) {
|
|
5140
5140
|
try {
|
|
5141
5141
|
const apiConfig = {
|
|
5142
|
-
url: "http://11.0.166.
|
|
5142
|
+
url: "http://11.0.166.23:13456",
|
|
5143
5143
|
key: "sk-4730d06849b5fea00f551bd60a0902e1"
|
|
5144
5144
|
};
|
|
5145
5145
|
const configuredApi = configureApi(apiConfig, this.getTarget());
|
|
@@ -5356,7 +5356,7 @@ class ConfigCheckerInstaller extends AbstractInstaller {
|
|
|
5356
5356
|
if (!baseUrl) {
|
|
5357
5357
|
return "none";
|
|
5358
5358
|
}
|
|
5359
|
-
if (baseUrl.includes("11.0.166.
|
|
5359
|
+
if (baseUrl.includes("11.0.166.23")) {
|
|
5360
5360
|
return "company";
|
|
5361
5361
|
}
|
|
5362
5362
|
return "personal";
|
|
@@ -6012,7 +6012,7 @@ class InstallationComposer {
|
|
|
6012
6012
|
configData: {
|
|
6013
6013
|
...options.configData,
|
|
6014
6014
|
apiConfig: {
|
|
6015
|
-
url: "http://11.0.166.
|
|
6015
|
+
url: "http://11.0.166.23:13456",
|
|
6016
6016
|
key: "sk-4730d06849b5fea00f551bd60a0902e1"
|
|
6017
6017
|
}
|
|
6018
6018
|
}
|
|
@@ -6026,11 +6026,11 @@ class InstallationComposer {
|
|
|
6026
6026
|
const configInstaller = new ConfigInstaller(this.context);
|
|
6027
6027
|
await configInstaller.applyCompanyConfig();
|
|
6028
6028
|
updateClaudeConfigEnv({
|
|
6029
|
-
ANTHROPIC_BASE_URL: "http://11.0.166.
|
|
6029
|
+
ANTHROPIC_BASE_URL: "http://11.0.166.23:13456",
|
|
6030
6030
|
ANTHROPIC_AUTH_TOKEN: "sk-4730d06849b5fea00f551bd60a0902e1"
|
|
6031
6031
|
}, "claude");
|
|
6032
6032
|
await this.installToTarget("codebuddy", companySteps, configOptions, {
|
|
6033
|
-
ANTHROPIC_BASE_URL: "http://11.0.166.
|
|
6033
|
+
ANTHROPIC_BASE_URL: "http://11.0.166.23:13456",
|
|
6034
6034
|
ANTHROPIC_AUTH_TOKEN: "sk-4730d06849b5fea00f551bd60a0902e1"
|
|
6035
6035
|
});
|
|
6036
6036
|
this.installCodebuddyCodeSilently();
|
package/package.json
CHANGED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 五域科技
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: tech-whitepaper
|
|
3
|
+
description: 生成专业级技术白皮书的能力技能。适用于需要为软件产品、AI平台、技术解决方案创建高质量技术白皮书的场景。输出纯HTML格式，包含：现代简约设计系统、Mermaid架构图、图片灯箱交互、响应式布局。当用户需要生成技术白皮书、产品文档、技术方案说明书时使用此技能。
|
|
4
|
+
license: Complete terms in LICENSE.txt
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# 技术白皮书生成技能
|
|
8
|
+
|
|
9
|
+
为软件产品生成专业级纯HTML技术白皮书，具备现代简约设计风格、可视化架构图和交互式图片查看功能。
|
|
10
|
+
|
|
11
|
+
## 核心能力
|
|
12
|
+
|
|
13
|
+
1. **设计系统**：统一视觉语言，CSS变量驱动，单栏大留白布局
|
|
14
|
+
2. **架构图**：集成Mermaid流程图，自动渲染技术架构
|
|
15
|
+
3. **图片交互**：悬停放大、点击灯箱查看大图
|
|
16
|
+
4. **响应式**：适配桌面和移动端阅读
|
|
17
|
+
|
|
18
|
+
## 使用流程
|
|
19
|
+
|
|
20
|
+
### Step 1: 项目分析
|
|
21
|
+
|
|
22
|
+
在生成白皮书前，必须深入分析项目：
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
1. 读取项目根目录的 README.md、package.json 等元信息
|
|
26
|
+
2. 扫描源代码结构，识别核心模块和架构模式
|
|
27
|
+
3. 查找已有的图片资源（如 docs/image/、assets/）
|
|
28
|
+
4. 理解技术栈：前端框架、后端服务、数据库、AI能力等
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Step 2: 内容规划
|
|
32
|
+
|
|
33
|
+
技术白皮书标准章节结构：
|
|
34
|
+
|
|
35
|
+
1. **产品概述** - 产品定位、核心价值主张
|
|
36
|
+
2. **核心价值/亮点** - 差异化竞争优势（3-6个要点）
|
|
37
|
+
3. **产品组成** - 模块架构、组件说明
|
|
38
|
+
4. **产品生态展望** - 未来规划、扩展能力
|
|
39
|
+
5. **技术架构** - 系统架构图、技术栈详解
|
|
40
|
+
6. **智能体架构**（AI产品）- Agent系统设计
|
|
41
|
+
7. **智能体编排架构**（AI产品）- 工作流引擎
|
|
42
|
+
8. **知识库架构**（AI产品）- RAG/向量/图谱
|
|
43
|
+
9. **智能路由架构**（AI产品）- 模型路由策略
|
|
44
|
+
10. **主要功能** - 功能特性矩阵
|
|
45
|
+
11. **部署场景** - 部署架构、环境要求
|
|
46
|
+
12. **技术支持** - 服务体系、联系方式
|
|
47
|
+
|
|
48
|
+
### Step 3: 生成白皮书
|
|
49
|
+
|
|
50
|
+
使用 [HTML模板](assets/whitepaper-template.html) 作为基础，按以下原则定制：
|
|
51
|
+
|
|
52
|
+
**设计原则**：
|
|
53
|
+
- 以读者为中心，每个元素服务于信息传达
|
|
54
|
+
- 单栏布局 + 大留白 + 无衬线字体
|
|
55
|
+
- 鲜明品牌色 + 简约扁平化图表
|
|
56
|
+
- 杜绝无意义装饰，全文统一视觉语言
|
|
57
|
+
|
|
58
|
+
**Mermaid图表**：
|
|
59
|
+
- 使用 `<pre class="mermaid">` 标签（非div）
|
|
60
|
+
- 代码从第一列开始，无缩进
|
|
61
|
+
- 简化节点标签，避免特殊字符
|
|
62
|
+
|
|
63
|
+
**图片处理**：
|
|
64
|
+
- 嵌入项目中所有相关截图
|
|
65
|
+
- 使用 `<figure>` + `<figcaption>` 结构
|
|
66
|
+
- 图片网格用 `.image-grid` 类
|
|
67
|
+
|
|
68
|
+
**品牌定制**：
|
|
69
|
+
- 替换公司名称、产品名称
|
|
70
|
+
- 更新品牌色（修改CSS变量 `--brand-primary` 等）
|
|
71
|
+
- 添加演示地址、联系方式
|
|
72
|
+
|
|
73
|
+
### Step 4: 输出验证
|
|
74
|
+
|
|
75
|
+
生成后检查：
|
|
76
|
+
- [ ] Mermaid图表正确渲染（非代码文本）
|
|
77
|
+
- [ ] 图片悬停有放大效果
|
|
78
|
+
- [ ] 图片点击打开灯箱
|
|
79
|
+
- [ ] 响应式布局在移动端正常
|
|
80
|
+
- [ ] 所有链接可点击
|
|
81
|
+
|
|
82
|
+
## 资源文件
|
|
83
|
+
|
|
84
|
+
- **assets/whitepaper-template.html** - 完整HTML模板，包含设计系统和交互脚本
|
|
85
|
+
- **references/design-system.md** - 设计系统详解与定制指南
|
|
86
|
+
- **references/mermaid-patterns.md** - 常用Mermaid架构图模式
|
|
@@ -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()">×</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>
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
# 设计系统详解
|
|
2
|
+
|
|
3
|
+
技术白皮书的视觉设计系统，基于现代简约风格构建。
|
|
4
|
+
|
|
5
|
+
## 设计原则
|
|
6
|
+
|
|
7
|
+
### 以读者为中心
|
|
8
|
+
- 每个视觉元素服务于信息传达
|
|
9
|
+
- 杜绝无意义的装饰
|
|
10
|
+
- 清晰的视觉层级引导阅读
|
|
11
|
+
|
|
12
|
+
### 统一视觉语言
|
|
13
|
+
- 全文档保持一致的样式
|
|
14
|
+
- CSS变量驱动，易于定制
|
|
15
|
+
- 响应式适配多端阅读
|
|
16
|
+
|
|
17
|
+
## CSS变量定制
|
|
18
|
+
|
|
19
|
+
### 品牌色
|
|
20
|
+
```css
|
|
21
|
+
:root {
|
|
22
|
+
--brand-primary: #2563eb; /* 主品牌色 - 链接、按钮、强调 */
|
|
23
|
+
--brand-secondary: #1e40af; /* 次品牌色 - hover状态 */
|
|
24
|
+
--brand-accent: #3b82f6; /* 点缀色 - 高亮元素 */
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
**定制示例**：
|
|
29
|
+
- 科技蓝: `#2563eb` (默认)
|
|
30
|
+
- 商务绿: `#059669`
|
|
31
|
+
- 活力橙: `#ea580c`
|
|
32
|
+
- 专业紫: `#7c3aed`
|
|
33
|
+
|
|
34
|
+
### 文字色
|
|
35
|
+
```css
|
|
36
|
+
:root {
|
|
37
|
+
--text-primary: #111827; /* 标题、重要文字 */
|
|
38
|
+
--text-secondary: #4b5563; /* 正文、段落 */
|
|
39
|
+
--text-muted: #9ca3af; /* 辅助文字、图注 */
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### 间距系统
|
|
44
|
+
```css
|
|
45
|
+
:root {
|
|
46
|
+
--space-xs: 8px; /* 紧凑间距 */
|
|
47
|
+
--space-sm: 16px; /* 小间距 */
|
|
48
|
+
--space-md: 24px; /* 中等间距 */
|
|
49
|
+
--space-lg: 48px; /* 大间距 */
|
|
50
|
+
--space-xl: 80px; /* 章节间距 */
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## 布局结构
|
|
55
|
+
|
|
56
|
+
### 单栏居中布局
|
|
57
|
+
```css
|
|
58
|
+
.container {
|
|
59
|
+
max-width: 900px; /* 最佳阅读宽度 */
|
|
60
|
+
margin: 0 auto;
|
|
61
|
+
padding: 0 24px;
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### 章节结构
|
|
66
|
+
```html
|
|
67
|
+
<section id="section-id">
|
|
68
|
+
<span class="section-label">Section 01</span>
|
|
69
|
+
<h2>章节标题</h2>
|
|
70
|
+
<p class="lead">导语段落，字体稍大</p>
|
|
71
|
+
<p>正文内容...</p>
|
|
72
|
+
</section>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## 组件使用
|
|
76
|
+
|
|
77
|
+
### 特性卡片网格
|
|
78
|
+
用于展示3-6个核心特性：
|
|
79
|
+
```html
|
|
80
|
+
<div class="feature-grid">
|
|
81
|
+
<div class="feature-card">
|
|
82
|
+
<h4>🔗 特性标题</h4>
|
|
83
|
+
<p>特性描述文字</p>
|
|
84
|
+
</div>
|
|
85
|
+
<!-- 更多卡片 -->
|
|
86
|
+
</div>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### 图片与图注
|
|
90
|
+
单图：
|
|
91
|
+
```html
|
|
92
|
+
<figure>
|
|
93
|
+
<img src="path/to/image.png" alt="描述">
|
|
94
|
+
<figcaption>图 X-X: 图片说明</figcaption>
|
|
95
|
+
</figure>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
双图并排：
|
|
99
|
+
```html
|
|
100
|
+
<div class="image-grid">
|
|
101
|
+
<figure>
|
|
102
|
+
<img src="image1.png" alt="">
|
|
103
|
+
<figcaption>图 X-1: 说明1</figcaption>
|
|
104
|
+
</figure>
|
|
105
|
+
<figure>
|
|
106
|
+
<img src="image2.png" alt="">
|
|
107
|
+
<figcaption>图 X-2: 说明2</figcaption>
|
|
108
|
+
</figure>
|
|
109
|
+
</div>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### 提示框
|
|
113
|
+
```html
|
|
114
|
+
<div class="callout">
|
|
115
|
+
<p><strong>提示：</strong>重要信息内容</p>
|
|
116
|
+
</div>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### 表格
|
|
120
|
+
```html
|
|
121
|
+
<div class="table-wrapper">
|
|
122
|
+
<table>
|
|
123
|
+
<thead>
|
|
124
|
+
<tr><th>列1</th><th>列2</th></tr>
|
|
125
|
+
</thead>
|
|
126
|
+
<tbody>
|
|
127
|
+
<tr><td>数据1</td><td>数据2</td></tr>
|
|
128
|
+
</tbody>
|
|
129
|
+
</table>
|
|
130
|
+
</div>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## 交互功能
|
|
134
|
+
|
|
135
|
+
### 图片灯箱
|
|
136
|
+
- 悬停放大：`scale(1.02)` + 阴影增强
|
|
137
|
+
- 点击查看：全屏遮罩 + 居中大图
|
|
138
|
+
- 关闭方式：点击遮罩 / 按ESC键
|
|
139
|
+
|
|
140
|
+
### 目录导航
|
|
141
|
+
- 锚点跳转到各章节
|
|
142
|
+
- 编号 + 标题组合
|
|
143
|
+
- 响应式网格布局
|
|
144
|
+
|
|
145
|
+
## 响应式断点
|
|
146
|
+
|
|
147
|
+
```css
|
|
148
|
+
@media (max-width: 768px) {
|
|
149
|
+
/* 移动端适配 */
|
|
150
|
+
.image-grid {
|
|
151
|
+
grid-template-columns: 1fr; /* 单列显示 */
|
|
152
|
+
}
|
|
153
|
+
.hero h1 {
|
|
154
|
+
font-size: 2rem; /* 缩小标题 */
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
## 最佳实践
|
|
160
|
+
|
|
161
|
+
1. **标题层级**：h1仅用于产品名，h2用于章节，h3用于子标题
|
|
162
|
+
2. **图片命名**：使用中文描述性名称，如"智能体市场.png"
|
|
163
|
+
3. **Emoji使用**：特性卡片标题前加emoji增加视觉区分
|
|
164
|
+
4. **段落长度**：每段3-5句，避免大段文字
|
|
165
|
+
5. **留白控制**：章节间使用`--space-xl`，内容间使用`--space-md`
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
# Mermaid 架构图模式
|
|
2
|
+
|
|
3
|
+
技术白皮书中常用的 Mermaid 图表模式，确保正确渲染。
|
|
4
|
+
|
|
5
|
+
## 关键配置
|
|
6
|
+
|
|
7
|
+
### HTML 容器
|
|
8
|
+
**必须使用 `<pre>` 标签**，不要使用 `<div>`：
|
|
9
|
+
```html
|
|
10
|
+
<pre class="mermaid">
|
|
11
|
+
flowchart TB
|
|
12
|
+
A --> B
|
|
13
|
+
</pre>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
### 代码格式
|
|
17
|
+
- **无缩进**：Mermaid代码从第一列开始
|
|
18
|
+
- **简化标签**：避免特殊字符和过长文字
|
|
19
|
+
- **使用引号**：节点标签用双引号包裹
|
|
20
|
+
|
|
21
|
+
### Mermaid 初始化
|
|
22
|
+
```javascript
|
|
23
|
+
mermaid.initialize({
|
|
24
|
+
startOnLoad: true,
|
|
25
|
+
securityLevel: 'loose', // 必须设置
|
|
26
|
+
theme: 'neutral',
|
|
27
|
+
flowchart: {
|
|
28
|
+
useMaxWidth: true,
|
|
29
|
+
htmlLabels: true, // 必须开启
|
|
30
|
+
curve: 'basis',
|
|
31
|
+
padding: 20
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## 常用图表模式
|
|
37
|
+
|
|
38
|
+
### 1. 系统架构图（分层）
|
|
39
|
+
```
|
|
40
|
+
flowchart TB
|
|
41
|
+
subgraph Client["客户端层"]
|
|
42
|
+
Web["Web Console"]
|
|
43
|
+
Mobile["Mobile App"]
|
|
44
|
+
API["API Client"]
|
|
45
|
+
end
|
|
46
|
+
subgraph Gateway["网关层"]
|
|
47
|
+
Nginx["Nginx"]
|
|
48
|
+
end
|
|
49
|
+
subgraph Backend["后端服务层"]
|
|
50
|
+
Core["核心服务"]
|
|
51
|
+
Service1["服务1"]
|
|
52
|
+
Service2["服务2"]
|
|
53
|
+
end
|
|
54
|
+
subgraph Data["数据层"]
|
|
55
|
+
DB["数据库"]
|
|
56
|
+
Cache["缓存"]
|
|
57
|
+
end
|
|
58
|
+
Client --> Gateway
|
|
59
|
+
Gateway --> Backend
|
|
60
|
+
Backend --> Data
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### 2. 流程图（决策分支）
|
|
64
|
+
```
|
|
65
|
+
flowchart TB
|
|
66
|
+
Start((开始)) --> Input["输入数据"]
|
|
67
|
+
Input --> Check{条件判断?}
|
|
68
|
+
Check -->|是| ProcessA["处理A"]
|
|
69
|
+
Check -->|否| ProcessB["处理B"]
|
|
70
|
+
ProcessA --> Result["输出结果"]
|
|
71
|
+
ProcessB --> Result
|
|
72
|
+
Result --> End((结束))
|
|
73
|
+
style Start fill:#22c55e
|
|
74
|
+
style End fill:#ef4444
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### 3. 数据流图（左到右）
|
|
78
|
+
```
|
|
79
|
+
flowchart LR
|
|
80
|
+
Input["用户输入"] --> Process1["预处理"]
|
|
81
|
+
Process1 --> Process2["核心处理"]
|
|
82
|
+
Process2 --> Output["输出结果"]
|
|
83
|
+
style Input fill:#3b82f6,color:#fff
|
|
84
|
+
style Output fill:#22c55e,color:#fff
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### 4. 智能体架构图
|
|
88
|
+
```
|
|
89
|
+
flowchart LR
|
|
90
|
+
subgraph Manager["管理器"]
|
|
91
|
+
Register["注册"]
|
|
92
|
+
Lifecycle["生命周期"]
|
|
93
|
+
Monitor["监控"]
|
|
94
|
+
end
|
|
95
|
+
subgraph Agents["智能体"]
|
|
96
|
+
Agent1["Agent 1"]
|
|
97
|
+
Agent2["Agent 2"]
|
|
98
|
+
Agent3["Agent 3"]
|
|
99
|
+
end
|
|
100
|
+
subgraph Tools["工具系统"]
|
|
101
|
+
Tool1["工具1"]
|
|
102
|
+
Tool2["工具2"]
|
|
103
|
+
end
|
|
104
|
+
Manager --> Agents
|
|
105
|
+
Agents --> Tools
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### 5. RAG 检索流程
|
|
109
|
+
```
|
|
110
|
+
flowchart TB
|
|
111
|
+
Query["用户查询"] --> Keywords["关键词生成"]
|
|
112
|
+
subgraph Retrieval["双路召回"]
|
|
113
|
+
Keywords --> Vector["向量搜索"]
|
|
114
|
+
Keywords --> Graph["图谱搜索"]
|
|
115
|
+
end
|
|
116
|
+
Vector --> Merge["结果合并"]
|
|
117
|
+
Graph --> Merge
|
|
118
|
+
Merge --> Rerank["重排序"]
|
|
119
|
+
Rerank --> Response["生成响应"]
|
|
120
|
+
style Query fill:#3b82f6,color:#fff
|
|
121
|
+
style Response fill:#22c55e,color:#fff
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### 6. 部署架构图
|
|
125
|
+
```
|
|
126
|
+
flowchart LR
|
|
127
|
+
subgraph Dev["开发环境"]
|
|
128
|
+
D1["docker-compose"]
|
|
129
|
+
D2["热更新"]
|
|
130
|
+
end
|
|
131
|
+
subgraph Staging["测试环境"]
|
|
132
|
+
S1["K8s Staging"]
|
|
133
|
+
end
|
|
134
|
+
subgraph Prod["生产环境"]
|
|
135
|
+
P1["K8s Cluster"]
|
|
136
|
+
P2["CDN"]
|
|
137
|
+
end
|
|
138
|
+
Dev --> Staging
|
|
139
|
+
Staging --> Prod
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
### 7. 路由决策流程
|
|
143
|
+
```
|
|
144
|
+
flowchart TB
|
|
145
|
+
Request["请求"] --> Cache{缓存命中?}
|
|
146
|
+
Cache -->|是| Return["返回缓存"]
|
|
147
|
+
Cache -->|否| Analyze["分析请求"]
|
|
148
|
+
Analyze --> Route{路由决策}
|
|
149
|
+
Route -->|类型A| ModelA["模型A"]
|
|
150
|
+
Route -->|类型B| ModelB["模型B"]
|
|
151
|
+
Route -->|默认| Default["默认模型"]
|
|
152
|
+
ModelA --> Execute["执行"]
|
|
153
|
+
ModelB --> Execute
|
|
154
|
+
Default --> Execute
|
|
155
|
+
Execute --> Return
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## 样式定制
|
|
159
|
+
|
|
160
|
+
### 节点颜色
|
|
161
|
+
```
|
|
162
|
+
style NodeId fill:#颜色,color:#文字色
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
常用配色：
|
|
166
|
+
- 起点：`fill:#22c55e` (绿色)
|
|
167
|
+
- 终点：`fill:#ef4444` (红色)
|
|
168
|
+
- 强调：`fill:#3b82f6,color:#fff` (蓝色)
|
|
169
|
+
- 成功：`fill:#22c55e,color:#fff` (绿色)
|
|
170
|
+
|
|
171
|
+
### subgraph 分组
|
|
172
|
+
```
|
|
173
|
+
subgraph GroupName["显示标题"]
|
|
174
|
+
Node1["节点1"]
|
|
175
|
+
Node2["节点2"]
|
|
176
|
+
end
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
## 常见问题
|
|
180
|
+
|
|
181
|
+
### 图表显示为代码文本
|
|
182
|
+
1. 检查是否使用 `<pre class="mermaid">` 而非 `<div>`
|
|
183
|
+
2. 确认 `securityLevel: 'loose'` 已设置
|
|
184
|
+
3. 确认 `htmlLabels: true` 已开启
|
|
185
|
+
4. 检查代码是否有缩进（必须从第一列开始）
|
|
186
|
+
|
|
187
|
+
### 节点标签显示异常
|
|
188
|
+
- 避免使用特殊字符：`< > { } | &`
|
|
189
|
+
- 使用双引号包裹标签：`Node["标签文字"]`
|
|
190
|
+
- 简化标签文字，避免过长
|
|
191
|
+
|
|
192
|
+
### 连接线显示问题
|
|
193
|
+
- 使用 `-->` 实线箭头
|
|
194
|
+
- 使用 `-.->` 虚线箭头
|
|
195
|
+
- 使用 `---` 无箭头连线
|