intention-coding 0.3.7 → 0.4.0

package/dist/services/requirement-analyzer/prompt/pc-page-template.js

@@ -0,0 +1,582 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pcPageTemplatePrompt = void 0;
+exports.pcPageTemplatePrompt = `你是一位专业的前端技术文档编写专家。请基于用户提供的输入内容，生成一份完整、详细的前端PC页面技术需求文档。
+
+## 任务要求
+- 必须输出完整的Markdown格式技术需求文档
+- 不要只给出总结，要输出完整的文档内容
+- 每个章节都要有详细的内容，不能省略
+- 文档长度应该在3000字以上
+- 重点描述页面布局、样式、交互逻辑等前端相关内容
+
+## 输入信息
+- **功能名称**: {featureName}
+- **业务领域**: {businessDomain}
+- **生成时序图**: {generateSequenceDiagram}
+
+## 原始需求内容
+\`\`\`
+{inputContent}
+\`\`\`
+
+## 文档结构要求
+请严格按照以下结构输出完整的需求文档，每个章节都要有详实的内容：
+
+# {featureName} - PC页面技术需求文档
+
+> **生成时间**: {currentTime}
+> **业务领域**: {businessDomain}
+> **页面类型**: PC端Web页面
+
+---
+
+## 1. 需求背景
+
+**背景**: [详细描述页面功能背景、业务需求和目标]
+
+**关键功能**: [列出页面的主要功能点]
+
+**涉及角色**: [列出所有相关用户角色]
+
+## 2. {featureName}功能设计说明
+
+| | | | | |
+|---|---|---|---|---|
+|**流程编号**|F001|**流程名称**|{featureName}|
+|**业务功能编号**|BF001|**业务功能名称**|{featureName}|
+|**功能设计编号**|FD001|**系统功能名称**|{featureName}|
+|**前置条件**|[详细描述页面访问的前置条件]|
+|**角色（岗位）**|[详细描述用户角色及其权限]|
+|**入口渠道**|[描述页面访问入口，如菜单、链接等]|
+|**功能描述**|[详细的功能描述]|
+|**调用能力域/中心**|[如适用的后端API接口]|
+
+## 3. 页面布局设计
+
+### 3.1 整体布局结构
+[详细描述页面的整体布局结构，包括头部、主体、侧边栏、底部等区域的划分和功能]
+
+### 3.2 页面区域划分
+[详细描述页面各个功能区域的布局，使用文字或ASCII图示描述区域位置关系]
+
+### 3.3 响应式设计要求
+[描述页面在不同屏幕尺寸下的布局适配要求]
+
+### 3.4 布局组件规范
+[详细描述页面中使用的布局组件，如栅格系统、容器、面板等的使用规范]
+
+### 3.5 页面流线设计
+[详细描述用户在页面中的视觉流线和操作路径设计]
+
+## 4. 样式规范说明
+
+### 4.1 色彩规范
+[详细描述页面使用的主色调、辅助色、状态色等配色方案]
+
+### 4.2 字体规范
+[详细描述页面使用的字体、字号、字重等规范]
+
+### 4.3 组件样式
+[详细描述页面中各种UI组件的样式规范，如按钮、输入框、表格等]
+
+### 4.4 间距规范
+[详细描述页面元素间的间距规范，包括内边距、外边距等]
+
+### 4.5 品牌视觉规范
+[详细描述品牌视觉元素在页面中的应用规范，如Logo、图标等]
+
+### 4.6 动效规范
+[详细描述页面中动效的使用规范，包括过渡效果、加载动画等]
+
+## 5. 交互逻辑说明
+
+### 5.1 用户操作流程
+[详细描述用户在页面中的操作流程，使用步骤化描述]
+
+### 5.2 页面状态管理
+[详细描述页面的各种状态及其切换逻辑，如加载状态、空状态、错误状态等]
+
+### 5.3 动效设计
+[详细描述页面中的动画效果和过渡效果]
+
+### 5.4 表单验证规则
+[详细描述页面中表单元素的验证规则和错误提示]
+
+### 5.5 事件处理机制
+[详细描述页面中各种用户事件的处理机制，如点击、悬停、键盘操作等]
+
+### 5.6 数据更新机制
+[详细描述页面中数据更新的触发条件和处理逻辑]
+
+### 5.7 错误处理与恢复
+[详细描述页面中错误情况的处理和用户引导恢复机制]
+
+## 6. 界面字段说明
+
+### 6.1 主要数据实体
+[描述页面涉及的主要数据实体]
+
+实体一
+| | | | | |
+|---|---|---|---|---|
+|**字段名称**|**数据类型**|**长度**|**必填**|**说明**|
+|[字段1]|[类型]|[长度]|[是/否]|[详细说明]|
+|[字段2]|[类型]|[长度]|[是/否]|[详细说明]|
+|[添加更多相关字段...]|||
+
+### 6.2 表单字段说明
+[详细描述页面表单中各字段的含义、格式要求、验证规则等]
+
+### 6.3 展示字段说明
+[详细描述页面中用于展示的数据字段及其格式化要求]
+
+## 7. 界面操作说明
+
+| | | |
+|---|---|---|
+|**序号**|**业务操作**|**说明**|
+|1|[操作1]|[详细说明操作触发条件、执行过程和结果]|
+|2|[操作2]|[详细说明操作触发条件、执行过程和结果]|
+|[添加更多操作...]|
+
+## 8. 组件结构设计
+
+### 8.1 页面组件树
+[使用树状结构描述页面的组件层次关系]
+
+### 8.2 核心组件说明
+[详细描述页面中的核心组件功能、属性和使用方式]
+
+### 8.3 组件通信机制
+[详细描述组件间的通信方式和数据流]
+
+### 8.4 组件状态管理
+[详细描述组件内部状态和全局状态的管理方式]
+
+## 9. 业务对象时序图
+
+### 9.1 主要成功流程（正向流程）
+
+\`\`\`mermaid
+sequenceDiagram
+    participant 用户
+    participant 前端页面
+    participant 路由管理器
+    participant 状态管理器
+    participant API客户端
+    participant 后端服务
+    participant 数据库
+    participant 缓存服务
+    participant 日志服务
+    
+    %% 页面加载流程
+    用户->>前端页面: 访问页面URL
+    前端页面->>路由管理器: 解析路由
+    路由管理器-->>前端页面: 返回路由信息
+    前端页面->>状态管理器: 初始化页面状态
+    状态管理器-->>前端页面: 返回初始状态
+    前端页面->>API客户端: 发起数据请求
+    API客户端->>后端服务: 发送HTTP请求
+    后端服务->>缓存服务: 查询缓存
+    alt 缓存命中
+        缓存服务-->>后端服务: 返回缓存数据
+    else 缓存未命中
+        后端服务->>数据库: 查询数据
+        数据库-->>后端服务: 返回查询结果
+        后端服务->>缓存服务: 存储到缓存
+    end
+    后端服务-->>API客户端: 返回响应数据
+    API客户端-->>前端页面: 返回处理后数据
+    前端页面->>状态管理器: 更新页面状态
+    状态管理器-->>前端页面: 通知状态更新
+    前端页面->>用户: 渲染页面内容
+\`\`\`
+
+### 9.2 方案二：替代流程（不同有效路径）
+
+#### 9.2.1 组件设计规范流程
+\`\`\`mermaid
+sequenceDiagram
+    participant 前端页面
+    participant 组件库
+    participant 设计系统
+    participant 样式管理器
+    
+    前端页面->>组件库: 请求组件规范
+    组件库->>设计系统: 获取设计规范
+    设计系统-->>组件库: 返回设计规范
+    组件库->>样式管理器: 应用样式规则
+    样式管理器-->>组件库: 返回样式配置
+    组件库-->>前端页面: 返回组件实现
+\`\`\`
+
+#### 9.2.2 响应式布局适配流程
+\`\`\`mermaid
+sequenceDiagram
+    participant 用户
+    participant 前端页面
+    participant 媒体查询器
+    participant 布局引擎
+    
+    用户->>前端页面: 调整浏览器窗口大小
+    前端页面->>媒体查询器: 检测屏幕尺寸
+    媒体查询器-->>前端页面: 返回断点信息
+    前端页面->>布局引擎: 应用响应式规则
+    布局引擎-->>前端页面: 返回适配后布局
+    前端页面->>用户: 重新渲染适配页面
+\`\`\`
+
+#### 9.2.3 复杂表单处理流程
+\`\`\`mermaid
+sequenceDiagram
+    participant 用户
+    participant 前端页面
+    participant 表单验证器
+    participant 状态管理器
+    participant API客户端
+    participant 后端服务
+    participant 日志服务
+    participant 监控服务
+    
+    用户->>前端页面: 提交复杂表单
+    前端页面->>表单验证器: 验证表单数据
+    表单验证器-->>前端页面: 返回验证结果
+    alt 验证通过
+        前端页面->>状态管理器: 更新提交状态
+        前端页面->>API客户端: 发送表单数据
+        API客户端->>后端服务: 转发请求
+        后端服务-->>API客户端: 返回处理结果
+        API客户端-->>前端页面: 返回响应
+        前端页面->>状态管理器: 更新成功状态
+        前端页面->>用户: 显示成功消息
+        前端页面->>监控服务: 记录提交成功
+    else 验证失败
+        前端页面->>状态管理器: 更新错误状态
+        前端页面->>用户: 显示验证错误
+        前端页面->>日志服务: 记录验证失败
+    end
+\`\`\`
+
+### 9.3 异常流程（错误处理）
+
+#### 9.3.1 无效UI组件请求
+\`\`\`mermaid
+sequenceDiagram
+    participant 前端页面
+    participant 组件库
+    participant 日志服务
+    
+    前端页面->>组件库: 请求未知组件
+    组件库-->>前端页面: 返回组件不存在错误
+    前端页面->>日志服务: 记录组件错误日志
+    前端页面->>前端页面: 使用默认组件替代
+\`\`\`
+
+#### 9.3.2 样式规范冲突
+\`\`\`mermaid
+sequenceDiagram
+    participant 前端页面
+    participant 样式管理器
+    participant 设计系统
+    participant 日志服务
+    
+    前端页面->>样式管理器: 请求样式规范
+    样式管理器->>设计系统: 获取样式规则
+    设计系统-->>样式管理器: 返回冲突样式
+    样式管理器->>日志服务: 记录样式冲突
+    样式管理器->>样式管理器: 解析冲突规则
+    样式管理器-->>前端页面: 返回解析后样式
+\`\`\`
+
+#### 9.3.3 响应式断点冲突
+\`\`\`mermaid
+sequenceDiagram
+    participant 前端页面
+    participant 媒体查询器
+    participant 设计系统
+    participant 日志服务
+    participant 监控服务
+    
+    前端页面->>媒体查询器: 检测响应式断点
+    媒体查询器->>设计系统: 获取断点规范
+    设计系统-->>媒体查询器: 返回冲突断点
+    媒体查询器->>日志服务: 记录断点冲突
+    媒体查询器->>媒体查询器: 应用默认断点
+    媒体查询器-->>前端页面: 返回默认断点信息
+    前端页面->>监控服务: 记录断点异常
+\`\`\`
+
+### 9.4 边缘情况流程（并发、超时等）
+
+#### 9.4.1 复杂布局处理
+\`\`\`mermaid
+sequenceDiagram
+    participant 前端页面
+    participant 布局引擎
+    participant 性能监控器
+    
+    前端页面->>布局引擎: 请求复杂布局计算
+    布局引擎->>布局引擎: 执行多区域布局算法
+    布局引擎-->>前端页面: 返回优化布局
+    前端页面->>性能监控器: 记录布局性能
+    性能监控器-->>前端页面: 返回性能建议
+\`\`\`
+
+#### 9.4.2 性能优化要求
+\`\`\`mermaid
+sequenceDiagram
+    participant 前端页面
+    participant 性能优化器
+    participant 缓存管理器
+    
+    前端页面->>性能优化器: 请求渲染优化
+    性能优化器->>性能优化器: 分析渲染性能
+    性能优化器-->>前端页面: 返回优化策略
+    前端页面->>缓存管理器: 配置懒加载策略
+    缓存管理器-->>前端页面: 返回缓存配置
+\`\`\`
+
+#### 9.4.3 布局计算超时处理
+\`\`\`mermaid
+sequenceDiagram
+    participant 前端页面
+    participant 布局引擎
+    participant 性能优化器
+    participant 日志服务
+    participant 监控服务
+    
+    前端页面->>布局引擎: 请求复杂布局计算
+    布局引擎->>布局引擎: 执行布局算法
+    alt 布局计算超时
+        布局引擎->>性能优化器: 请求降级策略
+        性能优化器-->>布局引擎: 返回简化布局方案
+        布局引擎->>布局引擎: 应用简化方案
+        布局引擎-->>前端页面: 返回降级布局
+        前端页面->>日志服务: 记录超时事件
+        前端页面->>监控服务: 记录性能指标
+    else 计算完成
+        布局引擎-->>前端页面: 返回完整布局
+    end
+    前端页面->>用户: 渲染页面布局
+\`\`\`
+
+## 10. 业务状态描述
+
+| | | |
+|---|---|---|
+|**状态编号**|**状态名称**|**描述**|
+|01|待加载|页面初始化状态|
+|02|加载中|数据加载状态|
+|03|正常显示|页面正常显示状态|
+|04|数据为空|无数据状态|
+|05|加载失败|数据加载失败状态|
+|06|表单验证中|表单正在验证状态|
+|07|表单验证失败|表单验证未通过状态|
+|08|提交中|表单提交处理中状态|
+|09|提交成功|表单提交成功状态|
+|10|提交失败|表单提交失败状态|
+|[添加更多状态...]||
+
+## 11. 前端处理逻辑详细说明
+
+### 11.1 页面初始化逻辑
+[详细描述页面加载时的初始化处理逻辑]
+
+### 11.2 数据获取逻辑
+[详细描述页面数据获取的处理逻辑，包括API调用、数据处理等]
+
+### 11.3 用户交互处理逻辑
+[详细描述用户各种交互操作的处理逻辑]
+
+### 11.4 数据展示逻辑
+[详细描述数据在页面中的展示处理逻辑]
+
+### 11.5 错误处理逻辑
+[详细描述页面中各种错误情况的处理逻辑]
+
+### 11.6 性能优化逻辑
+[详细描述页面性能优化的处理逻辑，如懒加载、缓存等]
+
+## 12. 伪代码示例
+
+\`\`\`gherkin
+Scenario Outline: 用户在PC页面中进行表单提交
+  Given 用户已打开<page_name>页面并填写了表单
+  When 用户点击"提交"按钮
+  Then 系统应验证表单数据并<result>
+
+  Examples:
+    | page_name | result                  |
+    | 用户信息页 | 显示"提交成功"提示并跳转 |
+    | 订单页面   | 显示错误信息"必填项未填写" |
+
+Scenario Outline: PC页面路由导航处理
+  Given 用户在<current_page>页面
+  When 用户点击<navigation_action>时
+  Then 系统应:
+    1. 验证用户是否有访问目标页面的权限
+    2. 保存当前页面状态
+    3. 加载目标页面
+    4. 恢复目标页面之前的状态（如果存在）
+
+  Examples:
+    | current_page | navigation_action | 处理逻辑                              |
+    | 首页         | 点击用户管理链接   | 检查权限后跳转到用户管理页面          |
+    | 用户列表页   | 点击返回按钮      | 返回上一页面并恢复之前滚动位置        |
+    | 订单页面     | 直接输入URL       | 验证登录状态和权限后加载页面          |
+
+Scenario Outline: PC页面组件交互流程
+  Given 用户在<page_name>页面中
+  When 用户执行<user_action>操作时
+  Then 系统应按照以下逻辑处理:
+    1. 验证用户操作的合法性
+    2. 更新相关组件的状态
+    3. 触发相应的事件处理函数
+    4. 根据处理结果更新UI显示
+
+  Examples:
+    | page_name | user_action   | 预期处理逻辑                            |
+    | 用户列表页 | 点击编辑按钮   | 显示编辑模态框，填充用户数据             |
+    | 商品详情页 | 点击收藏按钮   | 发送收藏请求，更新按钮状态和收藏数       |
+    | 订单页面   | 选择支付方式   | 显示对应支付表单，更新订单金额计算       |
+
+Scenario Outline: PC页面数据加载异常处理
+  Given 系统正在加载<page_name>页面数据
+  When 发生<data_error>错误时
+  Then 系统应:
+    1. 显示相应的错误提示信息
+    2. 提供重试或返回选项
+    3. 记录错误日志用于问题追踪
+    4. 根据错误类型采取恢复措施
+
+  Examples:
+    | page_name | data_error      | 恢复措施                          |
+    | 用户列表页 | 网络连接失败     | 显示重试按钮，提供离线数据查看     |
+    | 商品详情页 | 数据格式错误     | 显示默认数据，记录格式错误详情     |
+    | 订单页面   | 服务器响应超时   | 自动重试请求，超过次数后提示用户   |
+    | 仪表板页   | 权限验证失败     | 跳转到登录页面，保存当前页面状态   |
+
+Scenario Outline: PC页面响应式布局适配
+  Given 用户在不同设备上访问<page_name>页面
+  When 屏幕尺寸为<screen_size>时
+  Then 页面应自动适配并:
+    1. 调整布局结构以适应屏幕
+    2. 优化交互元素的显示效果
+    3. 保持核心功能的可用性
+
+  Examples:
+    | page_name | screen_size | 适配策略                                  |
+    | 用户管理页 | 大屏幕(>1200px) | 显示三栏布局，提供完整的功能面板          |
+    | 用户管理页 | 中等屏幕(768px-1200px) | 显示两栏布局，隐藏部分次要功能            |
+    | 用户管理页 | 小屏幕(<768px) | 显示单栏布局，主要功能通过折叠菜单访问    |
+
+Scenario Outline: PC页面复杂数据加载处理
+  Given 系统正在加载<page_name>页面的<data_type>数据
+  When 数据量为<data_volume>时
+  Then 系统应:
+    1. 显示加载指示器
+    2. 分批加载数据以提高响应性
+    3. 实现虚拟滚动或分页机制
+    4. 提供数据加载进度反馈
+
+  Examples:
+    | page_name | data_type | data_volume | 处理策略                          |
+    | 用户列表页 | 用户信息   | 少量(<100条) | 直接加载并渲染所有数据             |
+    | 用户列表页 | 用户信息   | 中等(100-1000条) | 分页加载，每页50条数据            |
+    | 用户列表页 | 用户信息   | 大量(>1000条) | 虚拟滚动，仅渲染可视区域数据       |
+    | 仪表板页   | 图表数据   | 实时数据流   | 流式加载，定期更新图表显示         |
+
+Scenario Outline: PC页面状态管理流程
+  Given 页面处于<current_state>状态
+  When 发生<state_change_trigger>时
+  Then 系统应:
+    1. 更新页面状态
+    2. 触发相应的状态处理逻辑
+    3. 更新UI显示
+    4. 记录状态变更日志
+
+  Examples:
+    | current_state | state_change_trigger | 处理逻辑                              |
+    | 待加载        | 页面初始化完成       | 切换到加载中状态，显示加载指示器      |
+    | 加载中        | 数据加载成功         | 切换到正常显示状态，渲染数据          |
+    | 加载中        | 数据加载失败         | 切换到加载失败状态，显示错误信息      |
+    | 正常显示      | 用户修改数据         | 切换到脏数据状态，显示保存按钮        |
+    | 表单验证中    | 验证完成             | 根据验证结果切换到成功或失败状态      |
+
+Scenario Outline: PC页面响应式布局适应性优化
+  Given 用户在<device_type>设备上使用<page_name>页面
+  When 发生<layout_change_event>时
+  Then 系统应:
+    1. 检测当前视口尺寸和设备特性
+    2. 应用相应的响应式断点规则
+    3. 调整布局组件的显示方式
+    4. 优化交互元素的触控友好性
+
+  Examples:
+    | device_type | page_name | layout_change_event | 优化策略                                       |
+    | 桌面端      | 数据表格页 | 窗口尺寸缩小         | 隐藏非关键列，提供水平滚动条                    |
+    | 平板端      | 数据表格页 | 屏幕旋转为横向       | 调整列宽比例，优化数据展示密度                  |
+    | 移动端      | 数据表格页 | 首次加载页面         | 采用卡片式布局，支持滑动查看更多信息             |
+    | 桌面端      | 表单页面   | 窗口尺寸放大         | 增加表单元素间距，提供更宽的输入框              |
+    | 移动端      | 表单页面   | 软键盘弹出           | 自动调整表单布局，确保输入框在可视区域内         |
+
+Scenario Outline: PC页面性能优化处理
+  Given 页面包含<content_type>内容
+  When 页面加载时
+  Then 系统应:
+    1. 应用相应的性能优化策略
+    2. 监控页面性能指标
+    3. 根据性能数据调整优化策略
+
+  Examples:
+    | content_type | 优化策略                                  |
+    | 大量图片     | 使用懒加载，优先加载首屏图片              |
+    | 复杂表格     | 使用虚拟滚动，分页加载数据                |
+    | 大量数据     | 使用数据分片，增量渲染                    |
+    | 动画效果     | 使用CSS3硬件加速，减少重绘重排            |
+
+Scenario Outline: PC页面缓存处理流程
+  Given 系统检测到<cache_condition>
+  When 用户访问页面时
+  Then 系统应:
+    1. 检查缓存有效性
+    2. 根据缓存状态决定数据来源
+    3. 更新缓存（如需要）
+    4. 显示数据给用户
+
+  Examples:
+    | cache_condition | 处理逻辑                                  |
+    | 有有效缓存     | 直接使用缓存数据，后台更新缓存            |
+    | 缓存已过期     | 使用缓存数据快速显示，同时请求最新数据    |
+    | 无缓存         | 请求最新数据，成功后存入缓存              |
+    | 缓存数据异常   | 请求最新数据，修复缓存                    |
+
+Scenario Outline: PC页面并发请求处理
+  Given 页面同时发起<concurrent_requests>个请求
+  When 系统处理这些请求时
+  Then 系统应:
+    1. 管理请求队列
+    2. 控制并发数量
+    3. 处理请求结果
+    4. 更新UI状态
+
+  Examples:
+    | concurrent_requests | 处理策略                                  |
+    | 1-3个请求         | 并行处理所有请求                          |
+    | 4-10个请求        | 限制并发数为5，队列处理剩余请求           |
+    | 10个以上请求      | 限制并发数为3，显示请求处理进度           |
+    | 包含依赖关系      | 按依赖顺序处理，先处理依赖请求            |
+\`\`\`
+
+---
+
+**重要提醒**: 
+1. 请输出完整的Markdown文档，不要省略任何章节
+2. 每个章节都要有实质性的内容，不能只是模板
+3. 根据输入的原始内容进行具体分析，不要使用通用模板
+4. 文档总长度应该在3000字以上
+5. 表格中的内容要填写具体信息，不要保留占位符
+6. 重点关注前端页面的布局、样式、交互逻辑等技术细节
+
+现在请开始生成完整的PC页面技术需求文档：`;