aico-cli 2.0.38 → 2.0.75

package/templates/skills/tech-whitepaper/references/design-system.md

@@ -0,0 +1,165 @@
+# 设计系统详解
+
+技术白皮书的视觉设计系统，基于现代简约风格构建。
+
+## 设计原则
+
+### 以读者为中心
+- 每个视觉元素服务于信息传达
+- 杜绝无意义的装饰
+- 清晰的视觉层级引导阅读
+
+### 统一视觉语言
+- 全文档保持一致的样式
+- CSS变量驱动，易于定制
+- 响应式适配多端阅读
+
+## CSS变量定制
+
+### 品牌色
+```css
+:root {
+    --brand-primary: #2563eb;    /* 主品牌色 - 链接、按钮、强调 */
+    --brand-secondary: #1e40af;  /* 次品牌色 - hover状态 */
+    --brand-accent: #3b82f6;     /* 点缀色 - 高亮元素 */
+}
+```
+
+**定制示例**：
+- 科技蓝: `#2563eb` (默认)
+- 商务绿: `#059669`
+- 活力橙: `#ea580c`
+- 专业紫: `#7c3aed`
+
+### 文字色
+```css
+:root {
+    --text-primary: #111827;    /* 标题、重要文字 */
+    --text-secondary: #4b5563;  /* 正文、段落 */
+    --text-muted: #9ca3af;      /* 辅助文字、图注 */
+}
+```
+
+### 间距系统
+```css
+:root {
+    --space-xs: 8px;   /* 紧凑间距 */
+    --space-sm: 16px;  /* 小间距 */
+    --space-md: 24px;  /* 中等间距 */
+    --space-lg: 48px;  /* 大间距 */
+    --space-xl: 80px;  /* 章节间距 */
+}
+```
+
+## 布局结构
+
+### 单栏居中布局
+```css
+.container {
+    max-width: 900px;  /* 最佳阅读宽度 */
+    margin: 0 auto;
+    padding: 0 24px;
+}
+```
+
+### 章节结构
+```html
+<section id="section-id">
+    <span class="section-label">Section 01</span>
+    <h2>章节标题</h2>
+    <p class="lead">导语段落，字体稍大</p>
+    <p>正文内容...</p>
+</section>
+```
+
+## 组件使用
+
+### 特性卡片网格
+用于展示3-6个核心特性：
+```html
+<div class="feature-grid">
+    <div class="feature-card">
+        <h4>🔗 特性标题</h4>
+        <p>特性描述文字</p>
+    </div>
+    <!-- 更多卡片 -->
+</div>
+```
+
+### 图片与图注
+单图：
+```html
+<figure>
+    <img src="path/to/image.png" alt="描述">
+    <figcaption>图 X-X: 图片说明</figcaption>
+</figure>
+```
+
+双图并排：
+```html
+<div class="image-grid">
+    <figure>
+        <img src="image1.png" alt="">
+        <figcaption>图 X-1: 说明1</figcaption>
+    </figure>
+    <figure>
+        <img src="image2.png" alt="">
+        <figcaption>图 X-2: 说明2</figcaption>
+    </figure>
+</div>
+```
+
+### 提示框
+```html
+<div class="callout">
+    <p><strong>提示：</strong>重要信息内容</p>
+</div>
+```
+
+### 表格
+```html
+<div class="table-wrapper">
+    <table>
+        <thead>
+            <tr><th>列1</th><th>列2</th></tr>
+        </thead>
+        <tbody>
+            <tr><td>数据1</td><td>数据2</td></tr>
+        </tbody>
+    </table>
+</div>
+```
+
+## 交互功能
+
+### 图片灯箱
+- 悬停放大：`scale(1.02)` + 阴影增强
+- 点击查看：全屏遮罩 + 居中大图
+- 关闭方式：点击遮罩 / 按ESC键
+
+### 目录导航
+- 锚点跳转到各章节
+- 编号 + 标题组合
+- 响应式网格布局
+
+## 响应式断点
+
+```css
+@media (max-width: 768px) {
+    /* 移动端适配 */
+    .image-grid {
+        grid-template-columns: 1fr;  /* 单列显示 */
+    }
+    .hero h1 {
+        font-size: 2rem;  /* 缩小标题 */
+    }
+}
+```
+
+## 最佳实践
+
+1. **标题层级**：h1仅用于产品名，h2用于章节，h3用于子标题
+2. **图片命名**：使用中文描述性名称，如"智能体市场.png"
+3. **Emoji使用**：特性卡片标题前加emoji增加视觉区分
+4. **段落长度**：每段3-5句，避免大段文字
+5. **留白控制**：章节间使用`--space-xl`，内容间使用`--space-md`

package/templates/skills/tech-whitepaper/references/mermaid-patterns.md

@@ -0,0 +1,195 @@
+# Mermaid 架构图模式
+
+技术白皮书中常用的 Mermaid 图表模式，确保正确渲染。
+
+## 关键配置
+
+### HTML 容器
+**必须使用 `<pre>` 标签**，不要使用 `<div>`：
+```html
+<pre class="mermaid">
+flowchart TB
+    A --> B
+</pre>
+```
+
+### 代码格式
+- **无缩进**：Mermaid代码从第一列开始
+- **简化标签**：避免特殊字符和过长文字
+- **使用引号**：节点标签用双引号包裹
+
+### Mermaid 初始化
+```javascript
+mermaid.initialize({
+    startOnLoad: true,
+    securityLevel: 'loose',  // 必须设置
+    theme: 'neutral',
+    flowchart: {
+        useMaxWidth: true,
+        htmlLabels: true,     // 必须开启
+        curve: 'basis',
+        padding: 20
+    }
+});
+```
+
+## 常用图表模式
+
+### 1. 系统架构图（分层）
+```
+flowchart TB
+    subgraph Client["客户端层"]
+        Web["Web Console"]
+        Mobile["Mobile App"]
+        API["API Client"]
+    end
+    subgraph Gateway["网关层"]
+        Nginx["Nginx"]
+    end
+    subgraph Backend["后端服务层"]
+        Core["核心服务"]
+        Service1["服务1"]
+        Service2["服务2"]
+    end
+    subgraph Data["数据层"]
+        DB["数据库"]
+        Cache["缓存"]
+    end
+    Client --> Gateway
+    Gateway --> Backend
+    Backend --> Data
+```
+
+### 2. 流程图（决策分支）
+```
+flowchart TB
+    Start((开始)) --> Input["输入数据"]
+    Input --> Check{条件判断?}
+    Check -->|是| ProcessA["处理A"]
+    Check -->|否| ProcessB["处理B"]
+    ProcessA --> Result["输出结果"]
+    ProcessB --> Result
+    Result --> End((结束))
+    style Start fill:#22c55e
+    style End fill:#ef4444
+```
+
+### 3. 数据流图（左到右）
+```
+flowchart LR
+    Input["用户输入"] --> Process1["预处理"]
+    Process1 --> Process2["核心处理"]
+    Process2 --> Output["输出结果"]
+    style Input fill:#3b82f6,color:#fff
+    style Output fill:#22c55e,color:#fff
+```
+
+### 4. 智能体架构图
+```
+flowchart LR
+    subgraph Manager["管理器"]
+        Register["注册"]
+        Lifecycle["生命周期"]
+        Monitor["监控"]
+    end
+    subgraph Agents["智能体"]
+        Agent1["Agent 1"]
+        Agent2["Agent 2"]
+        Agent3["Agent 3"]
+    end
+    subgraph Tools["工具系统"]
+        Tool1["工具1"]
+        Tool2["工具2"]
+    end
+    Manager --> Agents
+    Agents --> Tools
+```
+
+### 5. RAG 检索流程
+```
+flowchart TB
+    Query["用户查询"] --> Keywords["关键词生成"]
+    subgraph Retrieval["双路召回"]
+        Keywords --> Vector["向量搜索"]
+        Keywords --> Graph["图谱搜索"]
+    end
+    Vector --> Merge["结果合并"]
+    Graph --> Merge
+    Merge --> Rerank["重排序"]
+    Rerank --> Response["生成响应"]
+    style Query fill:#3b82f6,color:#fff
+    style Response fill:#22c55e,color:#fff
+```
+
+### 6. 部署架构图
+```
+flowchart LR
+    subgraph Dev["开发环境"]
+        D1["docker-compose"]
+        D2["热更新"]
+    end
+    subgraph Staging["测试环境"]
+        S1["K8s Staging"]
+    end
+    subgraph Prod["生产环境"]
+        P1["K8s Cluster"]
+        P2["CDN"]
+    end
+    Dev --> Staging
+    Staging --> Prod
+```
+
+### 7. 路由决策流程
+```
+flowchart TB
+    Request["请求"] --> Cache{缓存命中?}
+    Cache -->|是| Return["返回缓存"]
+    Cache -->|否| Analyze["分析请求"]
+    Analyze --> Route{路由决策}
+    Route -->|类型A| ModelA["模型A"]
+    Route -->|类型B| ModelB["模型B"]
+    Route -->|默认| Default["默认模型"]
+    ModelA --> Execute["执行"]
+    ModelB --> Execute
+    Default --> Execute
+    Execute --> Return
+```
+
+## 样式定制
+
+### 节点颜色
+```
+style NodeId fill:#颜色,color:#文字色
+```
+
+常用配色：
+- 起点：`fill:#22c55e` (绿色)
+- 终点：`fill:#ef4444` (红色)
+- 强调：`fill:#3b82f6,color:#fff` (蓝色)
+- 成功：`fill:#22c55e,color:#fff` (绿色)
+
+### subgraph 分组
+```
+subgraph GroupName["显示标题"]
+    Node1["节点1"]
+    Node2["节点2"]
+end
+```
+
+## 常见问题
+
+### 图表显示为代码文本
+1. 检查是否使用 `<pre class="mermaid">` 而非 `<div>`
+2. 确认 `securityLevel: 'loose'` 已设置
+3. 确认 `htmlLabels: true` 已开启
+4. 检查代码是否有缩进（必须从第一列开始）
+
+### 节点标签显示异常
+- 避免使用特殊字符：`< > { } | &`
+- 使用双引号包裹标签：`Node["标签文字"]`
+- 简化标签文字，避免过长
+
+### 连接线显示问题
+- 使用 `-->` 实线箭头
+- 使用 `-.->` 虚线箭头
+- 使用 `---` 无箭头连线