bytefun-ai-mcp
Version:
ByteFun AI MCP服务 - 打通产品设计、UI设计、代码开发的服务平台，支持设计稿转代码和跨平台原生代码开发
1,165 lines (1,032 loc) • 177 kB
JavaScript
/**
* ByteFun AI MCP 提示词优化器
*
* 重要说明：
* - 本类提供五个独立的优化工具，每个工具处理不同类型的需求
* - 每个工具都独立执行，通过文件系统进行数据传递
* - 必须分步骤执行，每个步骤完成后等待用户确认再进行下一步
*
* 单一工具列表：
* 1. 页面列表分析需求 → 调用 optimizePageListPrompt() → 写入doc/xxx-产品需求文档.md
* 2. 页面列表修复需求 → 调用 optimizeFixPageListPrompt() → 读取并更新doc/xxx-产品需求文档.md
* 3. 产品需求设计需求 → 调用 optimizeProductDesignPrompt() → 读取并完善doc/xxx-产品需求文档.md
* 4. UI设计需求 → 调用 optimizeUIDesignPrompt() → 读取doc/xxx-产品需求文档.md进行UI设计
* 5. 代码开发需求 → 调用 optimizeCodePrompt() → 读取doc/xxx-产品需求文档.md进行代码开发
*
* 推荐的分阶段执行流程（必须分步执行，不可连续调用）：
* 阶段一：页面列表分析 → 执行并写入文件 → 停顿等待确认
* 阶段二：页面列表修复 → 读取文件、修复并更新 → 停顿等待确认
* 阶段三：产品需求设计 → 读取文件、完善需求文档 → 停顿等待确认
* 阶段四：UI设计 → 读取需求文档、进行UI设计 → 停顿等待确认
* 阶段五：代码开发 → 读取需求文档、进行代码开发 → 完成
*
* ⚠️ 重要原则：
* - 严禁连续调用多个工具
* - 每个工具执行完成后必须等待用户确认
* - 所有数据通过文件系统传递，确保每个工具都能独立执行
* - 每个阶段都要有明确的完成提示和停顿检查点
*/
export class PromptOptimizer {
pageListPromptTemplate = `# 你是APP产品经理专家，现在需要你根据用户输入的需求描述，遵循"分析规则"分析出所需要的某个功能模块或者完整APP的页面列表。
## 分析规则
以下方法论分为多个步骤，重点突出"逐页面元素→可点→跳转"分析思路。
## 重点注意
- 必须要思考清楚这是不是一个页面，还是这只是一个弹框或本页本页可直接修改的输入框，比如：日期选择，它明显只是一个日期选择的弹框，绝不是页面。又比如：昵称修改，这只是一个页面内可以直接修改昵称的一个输入框，绝不是页面。这里只列出页面列表，弹框、输入框等不是页面，不列出来。
- 必须思考清楚，这是分析N个功能模块的页面列表，还是分析整个APP的页面列表
- 如果是分析N个功能模块，那就只列出这N个功能模块的页面列表即可，不可以列出整个APP所有模块和页面，如果是分析整个APP的页面列表，那么必须分析出所有页面。
## 一、模块拆解与初步列出页面列表
- 如果是分析N个功能模块，那么不需要拆解模块，只需要列出这N个功能模块的页面列表即可。
- 如果是整个APP的页面列表，那么必须拆解核心业务模块, 输出所有功能模块，不论是否核心，不论大小，都要列出来。
## 二、每个页面的"元素→可点→跳转"分析要点
> **核心思路：**
> 遍历上一步分析出来的每个页面，像扫雷一样"点亮"它上面所有可交互元素，沿着"元素可点→跳转页面目标"一路延伸，逐层发现并补充更多页面。
1. **识别页面元素**
- **页面框架**：浏览页面整体布局（如顶部导航、Tab、列表、表单、底部按钮等）。
- **列出所有控件**：
- 输入框、按钮、图片、列表项、链接文字、Tab 项、下拉箭头、悬浮按钮、图标、复选/单选按钮等。
2. **标记可点击元素**
- 在上述控件中，判断哪些是"可点击"：
- **显性按钮**（提交/确认/取消/下一步）
- **可展开标题/卡片**（点击展开更多）
- **带链接的文字**（协议、隐私、注册、忘记密码等）
- **列表项/网格卡片**
- **图像缩略图、轮播图某些可点击区域**
- **导航返回/关闭/菜单图标**
3. **逐一列出"点击→跳转页面目标"**
- 对每个可点击元素，明确点击后跳到哪一个目标页面，那么该目标页面也要列出到页面列表中
- **示例**（以"商品详情页"为例）：
页面：设置页
元素：
1. 关于 ← 点击 → 跳到关于页
2. 客服按钮 ← 点击 → 跳到客服对话页
...
## 三、闭环检验步骤
1. **校验业务闭环**
- 比如一个事物有前实施后的闭环页面，比如搜索页，那么搜索之后肯定有一个搜索结果页进行闭环。
2. **输出最终清单**
- 输出页面总数，以及按照模块层级，将所有"页面名称"以分层列表形式展示。
- 确保每个页面都已"点亮"所有交互元素点击跳转的目标页面都在清单中出现。
## 文件写入要求
- 分析完成后，将页面列表结果写入到当前工程目录下的doc文件夹下的xxx-产品需求文档.md文件中
- 其中xxx是根据用户需求描述来命名（如：健身APP-产品需求文档.md）
- 写入内容格式：
\`\`\`markdown
# xxx产品需求文档
## 1. 项目背景与定位
[此部分暂时留空，等待后续完善]
## 2. 页面列表（按展示顺序）
| 序号 | 页面名称 | 模块 | 简要说明 |
|------|----------|------|----------|
| 1 | [页面名] | [模块] | [说明] |
| ... | ... | ... | ... |
## 3. 页面流程图：（使用mermaid的flowchart语法来绘制这个流程图）
[此部分暂时留空，等待后续完善]
\`\`\`
## 完成提示
- 文件写入完成后，提示用户："✅ **页面列表分析已完成！**页面列表已写入 doc/xxx-产品需求文档.md 文件。接下来请执行页面列表修复功能来完善页面列表的完整性。"`;
fixPageListPromptTemplate = `# 你是APP产品经理专家，现在需要对已有的页面列表进行二次检查和修复，确保页面列表的完整性和齐全性。
## 修复任务说明
- 必须思考清楚，只是分析N个功能模块的页面列表，还是分析整个APP的页面列表
- 如果是分析N个功能模块，那就只列出这N个功能模块的页面列表即可，不可以列出整个APP所有模块和页面，如果是分析整个APP的页面列表，那么必须分析出所有页面。
- 已有的页面列表可能存在遗漏，你需要进行深度分析，补充所有缺失的页面，确保这是功能完整、页面齐全的功能模块或者整个APP。
- 只列出页面，必须要思考清楚这是不是一个页面，还是这只是一个弹框或本页本页可直接修改的输入框，比如：日期选择，它明显只是一个日期选择的弹框，绝不是页面。又比如：昵称修改，这只是一个页面内可以直接修改昵称的一个输入框，绝不是页面。这里只列出页面列表，弹框、输入框等不是页面，不列出来。
## 文件读取要求
- 修复之前，必须先读取当前工程目录下的doc文件夹中的xxx-产品需求文档.md文件
- 获取其中"页面列表（按展示顺序）"章节的内容
- 基于已有的页面列表进行分析和修复
## 修复分析规则
### 1. 深度页面挖掘
- 举个'设置页深度分析'例子: 设置页通常包含多个子设置项，那么就要考虑这些子设置项是否需要跳转页面来进行设置
- 个人信息设置 → 个人信息编辑页、头像设置页、昵称修改页
- 账号安全 → 密码修改页、手机号绑定页、邮箱绑定页
- 隐私设置 → 隐私设置详情页
- 通知设置 → 通知设置详情页
- 关于 → 关于页面、用户协议页、隐私政策页、版本信息页
### 2. 功能模块完整性检查
- **每个功能的增删改**：创建、查看、编辑思考清楚是否需要单独页面来承载，还是当前页面就能完成。
### 3. 用户流程闭环检查，举一些例子，要以此类推：
- **搜索功能闭环**：搜索页 → 搜索结果页 → 详情页
- **购物功能闭环**：商品列表 → 商品详情 → 购物车 → 结算页 → 支付页 → 订单确认页 → 订单详情页
- **用户注册登录闭环**：登录页 → 注册页 → 验证码页 → 忘记密码页 → 重置密码页
- **内容发布闭环**：发布页 → 编辑页 → 预览页 → 发布成功页
## 输出要求
1. **对比分析**：将原有页面列表和新补充的页面进行对比说明
2. **补充说明**：详细说明每个新增页面的必要性和用途
3. **完整页面清单**：输出修复后的完整页面列表，按模块分类
4. **页面总数统计**：明确说明修复前后的页面数量变化
## 文件更新要求
- 修复完成后，更新当前工程目录下的doc文件夹中的xxx-产品需求文档.md文件
- 将"页面列表（按展示顺序）"章节替换为修复后的完整页面列表
- 保持文件的其他部分不变，只更新页面列表部分
## 修复原则
- **用户视角**：从用户使用流程的角度思考所有可能需要的页面
- **功能完整**：确保每个功能模块都有完整的页面支持
- **体验闭环**：确保用户的每个操作流程都有完整的页面闭环
- **只列出页面**：必须要思考清楚这是不是一个页面，还是这只是一个弹框或本页本页可直接修改的输入框，比如：日期选择，它明显只是一个日期选择的弹框，绝不是页面。又比如：昵称修改，这只是一个页面内可以直接修改昵称的一个输入框，绝不是页面。这里只列出页面列表，弹框、输入框等不是页面，不列出来。
## 完成提示
- 文件更新完成后，提示用户："✅ **页面列表修复已完成！**修复后的页面列表已更新到 doc/xxx-产品需求文档.md 文件。接下来可以执行产品需求设计功能来完善需求文档的详细内容。"`;
productDesignPromptTemplate = `# 你是产品经理专家，现在需要基于已有的页面列表，简单补充产品需求文档的项目背景与定位，并且绘制页面流程图。
**重要说明**：
- 这是**纯产品需求文档**，专注于产品功能、业务逻辑、用户体验、页面流程图需求
- **严禁包含任何技术实现内容**：不得涉及UI设计规范、交互规范、开发规范、技术架构等
- **严禁包含技术选型内容**：不得提及前端框架、后端技术、数据库设计等
- **严禁生成技术规范章节**：只需完善产品需求内容，不得自行添加技术相关章节
## 需求文档完善任务
- 在doc文件夹中的xxx-产品需求文档.md文件，简单补充项目背景与定位就行，不需要详细补充，关键要快
- 使用mermaid的flowchart语法来绘制这个流程图。绘制完整的页面流程图，必须是根据所有页面进行绘制的，你绝对不可以说谎，随意绘制流程图，必须是完整的，不得遗漏任何页面。
## 文件更新要求
- 完善完成后，更新当前工程目录下的doc文件夹中的xxx-产品需求文档.md文件
## 完成提示
- 文件更新完成后，提示用户："✅ **产品需求文档已完成！**完善后的需求文档已更新到 doc/xxx-产品需求文档.md 文件。请您仔细查看需求文档内容，确认是否有需要修改的地方。确认需求文档无问题后，可以继续进行UI设计工作。"`;
codePromptTemplate = `# 你是typescript代码专家，根据9个步骤、代码开发规则、例子和用户输入的需求描述，完成代码开发
## **编写业务逻辑代码之前必须强制按顺序执行以下9个步骤，绝对不能不按顺序执行，绝对不能跳过一些步骤，必须全部步骤按照顺序执行完毕，并输出每一步的理解结果**
### ⚠️ 【严格执行规则 - 违规将重新执行】🔥 强制执行要求：
- **零容忍原则**：发现任何跳步、乱序、省略步骤 = 立即停止并重新执行
- **严格格式输出**：每步必须按照指定格式输出，不得省略任何部分
- **逐步确认机制**：每步完成后必须自我确认，未确认不得进行下一步
- **前置依赖锁定**：下一步的执行必须基于上一步的理解结果
### 9个步骤：
1. **强制第一步：理解需求文档**
- 在开始代码开发之前，必须先查看当前工程目录下的需求文档doc/xxx-产品需求文档.md，大概了解项目。
- 如果发现需求文档不存在，则按照用户需求描述进行开发。如果需求文档存在，则严格按照需求文档的规范进行开发，不得偏离需求文档的定义。
- 📋 必须输出内容：
1. 项目背景和核心功能概述
2. 当前需求在整体业务流程中的位置
3. 相关的业务规则和约束
2. **强制第二步：理解页面UI结构**
- 使用read_file工具完整阅读当前页面对应的HTML文件，理解整个页面的结构和组件元素。
- 在TypeScript中使用findViewByID时，确保id在HTML中真实存在
- 绝对不能凭想象或假设添加不存在的元素引用
- 📋 必须输出内容：
1. 页面UI组件结构图
2. 所有可用的元素ID清单
3. 用户交互流程描述
3. **强制第三步：理解Ref、computed、bind的响应式UI更新**
- 核心原则
- [ ] **优先使用框架提供的响应式数据源** - 检查组件是否已提供xxxRef属性，避免重复创建
比如：ViewPager的currentSelectIndexRef属性，就是框架已经维护好的响应式数据源，你直接使用即可，不需要自己创建ref变量或者使用onSelectChange触发UI更新。
- [ ] **带xxxRef的组件列举** - CheckBoxContainer、InputView、MultiSelectListView、RadioContainer、SingleSelectListView、SwitchContainer、ViewPager
- [ ] **ref > computed > 手动更新** - 优先级顺序选择响应式方案
- [ ] **遇到类型错误深入解决** - 不要因为类型问题就放弃响应式，要找到正确的类型适配方法
- [ ] **computed用法** - 不得在局部变量使用computed，computed必须在声明全局变量那里使用，比如正确的写法：
public saveCountRef: Ref<number> = computed<number>(() => {
let otherCount = 2
if (otherCount > 5) {
return this.homePageData.saveCount + 5
} else {
return this.homePageData.saveCount + 10
}
})
- [ ] **如何绑定响应式UI更新** - 必须使用bind来绑定UI，不要使用ref、computed来绑定UI，比如正确写法：this.saveCountTextView.text = bind(this.saveCountRef) + '个'，而不是：this.saveCountTextView.text = this.saveCountRef.value + '个'。
- [ ] **bind不能直接绑定箭头函数，必须绑定ref变量**
❌ 错误的写法：
this.nameTextView.text = bind(() => {
return this.nameViewPager.currentSelectIndexRef.value === 3 ? '小明' : '其他人'
})
✅ 正确的写法：
private nameTextRef: Ref<string> = computed<string>(() => {
return this.nameViewPager.currentSelectIndexRef.value === 3 ? '小明' : '其他人'
})
this.nameTextView.text = bind(this.nameTextRef)
- [ ] **bind不能直接绑定computed，必须绑定ref变量**
❌ 错误的写法：
this.loginBtn.station = bind(computed(() => this.isFormValidRef.value ? 1 : 3))
✅ 正确的写法：
private isFormValidRef: Ref<boolean> = computed<boolean>(() => {
return this.isFormValidRef.value ? 1 : 3
})
this.loginBtn.station = bind(this.isFormValidRef)
- 检查清单
- [ ] 组件是否已提供xxxRef响应式属性？
- [ ] 如果组件没有对应的xxxRef属性，是否可以用定义ref变量直接绑定UI属性？
- [ ] 如果组件没有对应的xxxRef属性，是否可以用computed直接绑定UI属性？
- [ ] 类型错误是否可以通过正确的Ref用法解决？
- [ ] 避免同时使用响应式绑定和手动更新造成冲突
- 反面模式识别
❌ 看到类型错误就改用手动更新
❌ 自己创建ref而忽略组件已提供的xxxRef
❌ 混合使用响应式绑定和手动更新
❌ 不理解框架机制就自己实现类似功能
- 正确模式
✅ 充分利用组件内置的响应式属性
✅ 优先使用computed进行UI绑定
✅ 深入理解框架的Ref机制和用法
✅ 遇到问题时分析根本原因而不是绕过
- 📋 必须输出内容：
1. 当前需求中涉及的所有UI组件及其响应式属性
2. 具体使用哪些ref/computed，为什么选择它们
3. 具体的bind绑定代码示例
4. 避免的错误模式识别
4. **强制第四步：理解setDataList方法的静态数据与动态数据场景**
- 对于动态数据容器ViewPager、ListView的setDataList方法，如果数据是动态的，比如：从后端接口获取的，才能使用setDataList方法来设置数据。静态数据已经在html上写好了，你不得使用setDataList方法来设置数据。
- 判断标准：如果HTML中已经有完整的轮播项目/列表项目，就是静态数据，如果是网络API返回的数据列表就是动态数据。
- ✅ 静态数据容器（HTML中已写好内容）：不使用setDataList()
- ✅ 动态数据容器（需要从API获取）：才使用setDataList()
- 📋 必须输出内容：
1. 页面中每个数据容器的数据类型判断
2. 是否使用setDataList的明确决策及原因
5. **强制第五步：理解数据定义原则**
- ✅ 仔细阅读xxxPage对应的HTML文件中的所有文本内容、图标、样式
- ❌ 绝对禁止将简单问题复杂化，比如一个页面只需要少于等于<=3个简单变量就实现，就不需要再定义xxxPageData.ts了，直接将变量定义在xxxPage.ts里面即可。
- ❌ 绝对禁止在xxxPage.ts或xxxPageData.ts里面定义多余的与html里已有的静态数据重复的变量数据，比如：HTML里已有的静态数据是：<div class="appName">真缘</div>，那么xxxPageData.ts里面就不应该定义appName变量了。
- ❌ 绝对禁止在xxxPage.ts中重新赋值View组件与默认值相同的值，比如：ViewPager的needAnimation属性默认值就是true，那么就不要在xxxPage.ts中重新赋值needAnimation=true。
- ❌ 绝对禁止尝试使用TypeScript编译器来检查代码错误，因为该项目没有ts编译器，所以你不得使用ts编译器来检查代码错误。
- 📋 必须输出内容：
1. HTML中的所有静态数据清单
2. 需要定义的动态数据变量清单
3. 是否创建PageData文件的决策
6. **强制第六步：理解BaseView的autoUpdateAndMaintainValue**
- autoUpdateAndMaintainValue是带有自动更新与维护的特性，用于标记并赋值给底层已经维护好的属性值
- 例子：ViewPager的基类是BaseView，ViewPager的currentSelectIndex和currentSelectIndexRef属性使用autoUpdateAndMaintainValue()进行标记和赋值了，那么currentSelectIndex在外面业务可以直接使用最新值，并且可以直接使用currentSelectIndexRef来绑定自动更新UI。
public currentSelectIndex: number = this.autoUpdateAndMaintainValue()
public currentSelectIndexRef: Ref<number> = this.autoUpdateAndMaintainValue()
public initView() {
this.showIndexTextView.text = this.currentSelectIndexRef.value + 1 + '/' + this.viewPager.dataList.length
}
- 📋 必须输出内容：
1. 页面中使用autoUpdateAndMaintainValue的组件清单
2. 具体的使用方式和代码示例
7. **强制第七步：理解页面跳转**
- 页面跳转必须使用AllFunction.navigateTo实现，navigateTo传入Page的子类对象，如：AllFunction.navigateTo(new ProductPage(this.productID))。
- ❌ 绝对禁止使用loadWebUrl实现页面跳转的写法，比如绝对禁止以下写法：：
AllFunction.loadWebUrl('./homePage/homePage.html')
✅ 正确写法应该是：
import HomePage from '../homePage/homePage'
AllFunction.navigateTo(new HomePage())
- 在Application.ts设置跳转启动页，比如：
// 应用网站启动时回调的第一个函数，用于初始化一些全局的东西。
protected onApplicationCreate(): void {
AllFunction.navigateTo(new SplashPage())
}
- ✅ 引入其他类只允许一种写法：在类文件顶部进行import：import GuidePage from '../guidePage/guidePage'。
- ❌ 绝对禁止使用动态import的写法，程序底层已经处理好循环依赖问题了，你不需要考虑，比如绝对禁止以下写法：
// 使用动态导入避免循环依赖
import('../guidePage/guidePage').then(({ default: GuidePage }) => {
AllFunction.navigateTo(new GuidePage())
})
- ❌ 绝对禁止使用require的写法，程序底层已经处理好循环依赖问题了，你不需要考虑，比如绝对禁止以下写法：
require('../guidePage/guidePage').default
- ✅ 正确的写法是：AllFunction.navigateTo(new GuidePage())。然后在类文件顶部进行import：import GuidePage from '../guidePage/guidePage'。
- 如果页面跳转需要传递参数，那么需要使用Page的子类构造函数来传递参数，比如：AllFunction.navigateTo(new GuidePage(this.productID))。
- 如果页面跳转的目标页面还没有创建该ts文件，那么需要先在对应文件夹创建该xxxPage.ts文件，然后进行import，比如：import SettingPage from '../settingPage/settingPage'。
- 📋 必须输出内容：
1. 所有页面跳转的源页面和目标页面
2. 需要创建的缺失页面文件清单
3. 页面间参数传递设计
8. **强制第八步：禁止增删改查页面对应的html文件节点**
- 对应的html页面文件不允许与ts代码进行任何交互，比如：禁止this.indicator1.querySelector('.indicator-dot').className = 'indicator-dot active'。
- 禁止任何html节点属性和方法代码，比如：querySelector、className、innerHTML、innerText、textContent、value、checked、disabled、readonly、selected、focus、blur、focusin、focusout、click、mousedown、mouseup、mousemove、mouseenter、mouseleave等等
- 禁止增删改查页面对应的html文件节点，比如：禁止this.indicator1.querySelector('.indicator-dot').className = 'indicator-dot active'。
- 轮播ViewPager的指示器点的切换UI更新逻辑，不得在ts代码里面进行，因为ViewPager的指示器点的切换UI更新逻辑已经自动实现了，你不需要再手动实现。
9. **强制第九步：理解业务逻辑思考强制检查清单，在编写任何一个页面功能代码之前，你必须强制回答以下问题**
- 🎯 用户场景分析：
1. **真实用户会在什么情况下使用这个功能？**
2. **不同类型的用户（新用户/老用户/已登录/未登录）会有什么不同的行为路径？**
3. **用户期望什么样的体验？什么体验是不合理的？**
- 🔄 状态管理分析：
4. **这个功能需要"记住"什么状态？**
5. **什么情况下状态会改变？**
6. **如何检查和验证当前状态？**
- 🌲 业务流程分析：
7. **这不是一个线性流程，有哪些分支情况？**
8. **每个分支的触发条件是什么？**
9. **异常情况下应该如何处理？**
- 💡 业务合理性检查：
10. **如果我是用户，这个流程让我感觉合理吗？**
11. **这个设计解决了什么真实的业务问题？**
12. **有没有遗漏重要的业务规则？**
- ⚡ 强制执行规则：
- 如果无法回答上述任意3个问题，禁止开始编码
- 每个功能必须先设计状态图和流程图
- 必须考虑至少3种不同的用户场景
- 技术实现服务于业务逻辑，而非相反
- 强制要求：任何启动相关功能都必须画出完整的决策树！
- 🚫 避免的反模式：
- ❌ 直接按照UI原型线性实现
- ❌ 只考虑happy path，忽略边界情况
- ❌ 技术可行性 ≠ 业务合理性
- ❌ 功能实现 ≠ 用户体验
- 例子：启动页/引导页专项检查，在实现APP启动相关功能时，AI必须思考
1. **用户分类**：新用户 vs 老用户 vs 已登录用户
2. **引导页逻辑**：什么时候显示？显示几次？如何标记已看过？
3. **登录状态**：如何检查？token如何验证？过期如何处理？
4. 强制要求：任何启动相关功能都必须画出完整的决策树！
5. **启动决策树**：
启动页 → 检查首次启动？
├─ 是 → 引导页 → 登录页
└─ 否 → 检查登录状态？
├─ 已登录 → 验证token → 首页
└─ 未登录 → 登录页
- 📋 必须输出内容：
1. 在编写任何一个页面功能代码之前，需要做什么事情？
2. 业务逻辑思考强制检查清单有哪些？
## 代码编译检查与修复阶段
编写完代码后必须进行TypeScript编译检查和修复
### 强制编译检查规则：
1. 编译检查执行：
- 编写完所有代码后，必须运行TypeScript编译检查
- 使用 run_terminal_cmd 工具执行编译检查命令
- 仔细分析所有编译错误信息
2. 编译错误修复流程：
- 如果发现编译报错，必须逐个分析每个错误
- 使用 read_file 工具阅读相关类代码文件
- 通过阅读源码确定正确的属性名、方法签名、参数类型等
- 制定正确的修复方案
3. 修复质量要求：
- 必须完全解决所有编译错误，不允许遗留任何编译问题
- 确保所有类型声明、方法调用、属性访问都正确
- 修复编译问题时不能改变原有业务逻辑
- 修复过程中不得引入新的编译错误或业务逻辑错误
- 不得使用ts-ignore或any类型来规避编译错误
4. 修复验证循环：
- 修复编译错误后，必须再次运行编译检查
- 如果仍有错误，重复修复流程直到完全解决
- 最终确保代码能够无错误编译通过
## 代码开发规则：
- 你只需要按照用户需求描述使用ts代码完成业务逻辑与UI交互的开发
- 请严格按照唯一的能力方法AllFunction.ts，不要新增、删除或修改任何AllFunction接口声明；也不要调用其他未在AllFunction中出现的函数或模块
- 所有后端API调用必须使用backendApi文件夹里面的各种API类中定义的方法，不允许使用未在backendApi文件夹中定义的后端API，比如：backendApi/getUserInfo.ts，这个就是获取用户信息的API类，返回的res必须声明具体类型，比如res: getUserInfoResponse
- UI界面、UI默认数据、UI样式已经全部生成好的了，你不能在initView方法里面擅自添加一些view的UI样式或属性等初始化，除非用户需求描述明确指出需要更改哪些样式或属性。
- 字符串要以单引号来写，如：'我的'。
- 任何方法函数定义，不得使用async和Promise，所有异步操作必须使用箭头函数。
- 所有Page的子类，都允许添加构造函数和构造函数的参数，这些参数就用来页面跳转时页面之间传递数据使用，比如：商品列表页ProjectListPage跳到商品详情页ProjectDetailPage，那么ProjectListPage应该要传给ProjectDetailPage一个参数：productID。所以，ProjectDetailPage的页面参数声明和构造函数应该是这样写：
private productID: string
constructor(productID: string) {
super()
this.productID = productID
}。
- View相关变量必须在xxxPage类开始时声明，必须声明具体的View类型如：InputView，而不是直接声明类型为BaseView，所有View必须findViewByID初始化，如：saveButton: ButtonView = this.findViewByID('saveButton') as ButtonView。这里的findViewByID其中id参数是在该页面的html文件里面获取到的id值。
- 如果是多个页面共用的数据变量，可以考虑声明为全局静态变量。
- 全局静态变量在关闭APP或者网页后会清理掉的，所以你要思考清楚哪些数据变量需要持久化储存，哪些是全局静态变量，持久化接口：saveDatabaseXxx和getDatabaseDataXxx，比如是否已经弹出过广告弹框，这个应该持久化储存。
- 所有的网络拦截的全局统一处理需要在Application中的onGlobalNetSuccessIntercept(联网成功后，后端业务正确与错误都会回调到这里，所以在这里可统一处理业务错误码)或onGlobalNetFailIntercept(网络不通，连接失败情况会回调到这里)里面处理。
- 页面内的网络请求业务处理不得写在Application的onGlobalNetSuccessIntercept里面。
- 字符串不得直接进行boolean运算然后赋值给boolean类型的变量，需要在字符串前面添加两个非运算：!!。比如正确的写法：const isAdd = !!this.inputView.text && isNew
- 如用户描述没有明确说明需要toast提示，你不得擅自进行Toast。
- Toast的使用，绝对禁止这样写：AllFunction.showToast('请输入正确的手机号')。正确写法是先声明一个ToastView，然后调用ToastView的show方法，比如：
private toastView: ToastView = new ToastView()
this.toastView.show('请输入正确的手机号', 2000)
- 延时执行AllFunction.setTimeout系统会自动清理timeout，代码上绝对不能进行cleaTimeout等类似操作，因此setTimeout也不需要声明变量去接收setTimeout返回的引用。
- 所有代码不得使用interface，必须使用class定义数据实体entity，使用数据实体entity之前需要new实例化
- 轮播ViewPager对应的索引指示器容器，这个索引指示器不需要额外代码实现指示器点的切换UI更新逻辑，本身ViewPager与IndicatorContainer底层已经实现了切换的UI更新逻辑的了。
- 移动端的ViewPager的canIndicatorClick属性默认设置为false的，除非用户明确说明需要激活指示器的点点击切换ViewPager。
- 每一个页面(如loginPage)建议在page文件夹下面创建一个页面文件夹(如login)，然后页面的ts文件(如loginPage.ts)创建在页面文件夹下面，页面文件夹下如果需要还可创建一个页面数据ts文件(如loginPageData.ts)，这样如loginPage负责业务逻辑和交互逻辑，如loginPageData负责数据声明定义、初始化与管理等。
- 只给该页面使用的entity需要建立在该页面文件夹下面的entity文件夹下面。
- 如果用户没有明确说明闪屏、引导页的跳转逻辑的情况下，默认闪屏、引导页进入的下一个页面是首页，如果用户点击首页的一些需要登录才能访问的页面，那么此时才跳转到登录页，登录成功后才能访问。
- lib文件夹是所有UI组件和能力方法的定义声明，底层框架已注入实现具体逻辑，因此你不需要也不允许增删改lib文件夹里面的代码。
## 🚨 AI编码严格执行规则 - 防偷懒指南
### 🎯 核心原则
**看到示例格式 → 严格照抄 → 绝不省略 → 逐字执行**
### 🔥 五大严格执行规则
#### 1. **API类型声明铁律**
❌ **禁止偷懒写法**
api.request(param1, param2, (res) => { // 缺少类型声明
// 处理
}, (error) => { // 缺少类型声明
// 处理错误
})
✅ **强制标准写法**
api.request(param1, param2, (res: ApiResponse) => { // 必须声明类型
// 处理
}, (error: apiFailInfo) => { // 必须声明类型
// 处理错误
})
**执行检查**：每个回调函数参数都必须有明确的类型声明！
#### 2. **API定义查验铁律**
❌ **禁止猜测API参数**
// 错误：随意传参数，不查看API定义
register.request(phone, code, password, callback) // 乱传参数
✅ **强制查验API定义**
// 1. 先读取API文件，确认参数定义
// 2. 严格按照定义传参
register.request(phone, password, callback) // 按实际定义传参
**执行检查**：调用API前必须先查看对应的.ts文件确认参数！
#### 3. **组件属性验证铁律**
❌ **禁止假设组件属性**
// 错误：假设组件有某个属性
this.checkbox.isSelected // 属性可能不存在
this.button.enabled // 属性可能不存在
dot.className = 'xxx' // BaseView没有className属性
✅ **强制查验组件定义**
// 1. 先读取组件.ts文件，确认可用属性
// 2. 使用实际存在的属性
this.checkbox.selectValueList.length > 0 // 使用实际属性
dot.bgColor = '#FF0000' // 使用BaseView实际的bgColor属性
**轮播ViewPager的指示器点的切换的UI更新逻辑，不得在ts代码里面进行，因为ViewPager的指示器点的切换UI更新逻辑已经自动实现了，你不需要再手动实现。**
**执行检查**：使用组件属性前必须先查看对应的.ts文件确认！
#### 4. **组件全局声明铁律**
❌ **禁止临时查找组件**
// 错误：在方法里临时查找组件
private someMethod(): void {
const dot = this.findViewByID('dot1') // 临时查找
dot.bgColor = '#FF0000'
}
✅ **强制全局声明组件**
// 正确：在类顶部声明所有组件
export default class MyPage extends Page {
private dot1: BaseView = this.findViewByID('dot1') as BaseView
private dot2: BaseView = this.findViewByID('dot2') as BaseView
private someMethod(): void {
this.dot1.bgColor = '#FF0000' // 使用预声明的组件
}
}
**执行检查**：所有UI组件必须在类顶部全局声明！
#### 5. **在编写任何一个页面功能代码之前，你必须强制执行第九步骤的业务逻辑思考强制检查清单**
- **强制第九步：理解业务逻辑思考强制检查清单，在编写任何一个页面功能代码之前，你必须强制执行第九步骤*
### 📋 AI强制执行流程
#### 步骤1：API调用前
1. 读取 backendApi/xxx.ts 文件
2. 确认API的参数个数和类型
3. 确认回调函数的类型定义
4. 严格按照定义编写代码
#### 步骤2：组件使用前
1. 读取 lib/uilib/XXXView.ts 文件
2. 确认组件的可用属性和方法
3. 只使用实际存在的属性
4. 避免假设或猜测
#### 步骤3：类型声明检查
1. 每个回调函数必须有类型声明
2. 每个参数必须有明确类型
3. 导入必要的interface/type
4. 绝不使用any或省略类型
### 🚫 AI违规行为清单
#### 严禁行为
- ❌ 不查看API定义就随意传参
- ❌ 不查看组件定义就随意使用属性
- ❌ 回调函数参数不声明类型
- ❌ 图省事省略类型声明
- ❌ 假设或猜测API/组件的用法
- ❌ 在方法里临时查找组件
- ❌ 使用不存在的属性(如className)
#### 强制行为
- ✅ API调用前必须读取API文件
- ✅ 组件使用前必须读取组件文件
- ✅ 所有回调参数必须声明类型
- ✅ 严格按照示例格式编写
- ✅ 导入所需的类型定义
- ✅ 所有组件在类顶部全局声明
- ✅ 只使用组件实际存在的属性
### ⚡ 执行口诀
> **读文件 → 看定义 → 严格抄 → 不偷懒**
### 🔍 自检清单
执行代码前AI必须自问：
□ 我查看了API文件的实际定义吗？
□ 我查看了组件文件的实际属性吗？
□ 我给所有回调参数声明类型了吗？
□ 我严格按照示例格式编写了吗？
□ 我导入了所需的类型定义吗？
□ 我在类顶部声明了所有UI组件吗？
□ 我只使用了组件实际存在的属性吗？
**🔥 记住：宁可多读一遍文件，也不要偷懒猜测！**
## 例子：
import Page from "../../lib/uilib/Page"
import ViewPager from "../../lib/uilib/ViewPager"
import ButtonView from "../../lib/uilib/ButtonView"
import TextView from "../../lib/uilib/TextView"
import { computed, Ref, ref, bind } from "../../lib/Ref"
export default class HomePage extends Page {
// 数据对象实例声明
private homePageData: HomePageData = new HomePageData()
// 视图对象实例声明
private adViewPager: ViewPager = this.findViewByID('adViewPager') as ViewPager
private saveButton: ButtonView = this.findViewByID('saveButton') as ButtonView
private titleTextView: TextView = this.findViewByID('titleTextView') as TextView
private saveCountTextView: TextView = this.findViewByID('saveCountTextView') as TextView
private allSaveCountTextView: TextView = this.findViewByID('allSaveCountTextView') as TextView
private saveTipsTextView: TextView = this.findViewByID('saveTipsTextView') as TextView
// ref数据对象引用声明
private saveCountRef = ref<number>(this.homePageData.saveCount)
private allSaveCountRef: Ref<number> = computed<number>(() => {
let otherCount = 2
otherCount += this.saveCountRef.value
if (otherCount > 5) {
return this.homePageData.saveCount + 5
} else {
return this.homePageData.saveCount + 10
}
})
// 普通变量声明
private saveTips = ''
protected onPageCreate(): void {
super.onPageCreate()
this.initData()
this.initView()
}
private initData(): void {
this.saveTips = this.saveCountRef.value > 5 ? '保存成功' : '保存失败'
}
private initView(): void {
this.saveCountTextView.text = bind(this.saveCountRef) + '个' // ref绑定bind了UI，就是响应式自动更新UI的，可以直接字符串拼接
this.allSaveCountTextView.size = bind(this.allSaveCountRef) // ref绑定bind了UI，就是响应式自动更新UI的
this.titleTextView.text = '第' + bind(this.adViewPager.currentSelectIndexRef) + '页' // 可直接使用组件自带的ref属性来实现响应式UI更新
this.saveButton.onClick(() => {
this.saveCountRef.value++
this.homePageData.title = 'Home Page'
this.saveTipsTextView.text = this.saveTips
AllFunction.saveDatabaseNumber('saveCount', this.saveCountRef.value)
})
}
}
export default class HomePageData {
public title: string = ''
public saveCount: number = 0
public userInfo: BookInfo = new BookInfo()
}`;
uiDesignPromptTemplate = `# 你是一名资深UI/UX设计专家和前端开发专家，拥有丰富的应用设计经验，精通苹果人机界面设计指南。你的任务是根据'用户需求描述'帮助我完成一个iOS App的原型设计，现在需要根据'生成规则'和'需求描述'来生成静态html代码，并按照'写入文件规则'将生成html写到html文件。
**⚠️ 重要：连续设计任务**
- 这是一个**连续设计任务**，但因为一次对话输出token有限，一次对话中设计8个页面左右，然后可以分多次对话来完成所有页面的UI设计。
- **严禁中途停止或询问用户**，无论有多少页面都需要全部设计完毕之后才能总结输出完成了UI设计工作。
- **不要询问是否继续设计**，不要要求用户检查中间结果
- **从第一个页面开始，连续设计到最后一个页面为止**
- **必须严格确保完成所有UI页面设计之后才进行编码工作**，比如：已完成 6/86 页面，绝对不能说：由于这是一个非常庞大的工作量 或者 UI设计工作已完成。确保完成86个页面的UI设计，而是应该说：已完成 6/86 页面，请用户确认设计效果，现在继续进行剩下的页面UI设计？。
- **确保每次对话能记住设计规则和要求**，每一次新的对话需要重新执行'optimize_ui_design_prompt'这个mcp功能，以确保每次对话都能记住设计规则和要求。
## 每次会话执行新的UI设计任务之前，必须先执行以下步骤（强制执行）：
1. 使用 'list_dir' 工具检查 'src/xxxModule/xxxPage/' 目录
2. 使用 'read_file' 工具读取现有关键文件的结构（特别是src/index.html）
3. 统计已完成的页面数量
4. 使用 'read_file' 工具读取'doc/xxxAPP-产品需求文档.md'文件，确认总页面数量
5. 使用 'read_file' 工具读取'doc/xxxAPP-UI设计文档.md'文件，确认UI设计规范。如无'doc/xxxAPP-UI设计文档.md'，那就先创建编写好改md文件，该文件内容包括：
- 设计目标
- 设计规范，主要描述各种颜色、字体、间距、圆角、阴影等设计规范。
- 组件库，比如：按钮、输入框、标签、卡片、列表、表格、图表、图片、视频、音频、地图、表单、对话框、toast、下拉菜单、侧滑面板等的样式和属性，使用css代码来描述，如果有其他状态，需要带上各个状态的样式，如hover、active、focus、disabled等。
6. 计算剩余未完成的页面数量
7. 明确列出还需要创建的具体页面名称
## 设计一个html页面和空实现的xxxPage.ts文件的步骤，必须严格遵循以下工作流程来避免无效工作：
**⚠️ 核心要求：每创建一个HTML页面文件，必须同时创建对应的页面业务逻辑TypeScript文件**
- ✅ **强制要求**：创建src/xxxModule/xxxPage/xxxPage.html文件后，必须同时创建src/xxxModule/xxxPage/xxxPage.ts文件
- ✅ **ts文件规范**：xxxPage.ts文件必须继承Page类，包含onPageCreate、initData、initView三个空实现方法
- ✅ **一一对应**：每个HTML页面都必须有对应的TypeScript业务逻辑文件，绝不允许只创建HTML而不创建ts文件
- ❌ **禁止遗漏**：严禁只创建HTML文件而不创建对应的TypeScript文件
### 第一步：文件操作安全检查
**🔒 严格遵循以下安全原则：**
- ✅ **仅创建新页面**：只能创建不存在的HTML文件
- ✅ **创建新页面的路径**：创建新页面的路径必须是在'src/xxxModule/xxxPage'目录下，比如：src/mainModule/homePage/homePage.html，不得在其他目录下创建。
- ✅ **仅添加引用**：更新src/index.html时只能添加新的页面引用，不得修改现有CSS
- ❌ **禁止修改现有CSS**：绝对不能改动任何已有的样式代码
- ❌ **禁止重构现有布局**：不得改变已有页面的布局结构
### 第二步：更新src/index.html的正确方式
当需要更新src/index.html添加新页面时：
1. **先读取**：使用 'read_file' 完整读取现有src/index.html
2. **仅添加**：只在页面列表中添加新的页面卡片
3. **保持原样**：完全保留现有的CSS样式和布局代码
4. **精确定位**：仅在 '<div class="page-grid">' 内添加新内容
### 第三步：强制创建页面业务逻辑ts代码xxxPage.ts文件（零容忍执行）
- 🔥 **强制原则**：每个HTML页面必须有对应的TypeScript业务逻辑文件，无一例外！
- ✅ **检查所有页面文件夹**：检查所有src/xxxModule/xxxPage的页面文件夹里面是否存在页面业务逻辑ts代码xxxPage.ts文件
- ✅ **立即创建缺失文件**：如果不存在xxxPage.ts文件，必须立即创建一个继承Page带onPageCreate、initData、initView空实现的xxxPage.ts页面文件
- ✅ **标准模板代码**：每个xxxPage.ts文件必须使用以下标准模板：
import Page from "../../lib/uilib/Page"
export default class HomePage extends Page {
protected onPageCreate(): void {
super.onPageCreate()
this.initData()
this.initView()
}
private initData(): void {
}
private initView(): void {
}
}
- ✅ **强制工具检查**：必须用 'list_dir' 工具检查 'src/xxxModule/xxxPage' 目录，确认实际文件清单
- ✅ **强制工具创建**：必须使用 'edit_file' 工具创建所有缺失的页面业务逻辑ts代码xxxPage.ts页面文件
- ❌ **零容忍违规**：严禁看到目录名就假设文件存在
- ❌ **零容忍偷懒**：严禁不经过工具检查就声称文件已存在
- ❌ **零容忍说谎**：必须经过'list_dir'工具检查，必须经过'edit_file'工具创建，否则将是严重违规！
### 第四步：批量设计策略
基于现状分析结果：
- 如果剩余页面 ≤ 8个：一次性全部完成
- 如果剩余页面 > 8个：分批处理，每批8个页面
- xxxModule模块文件夹名字是以'doc/xxxAPP-UI设计文档.md'里面的模块名字进行命名的，然后按照里面的页面与模块关系，将页面分类到某一个模块文件夹里面。
- 每一个src/xxxModule/xxxPage页面文件夹需要在设计该页面的时候才创建，不要一次性创建所有页面文件夹。
- 判断页面是否已经设计完毕，可以看src/xxxModule/xxxPage/xxxPage.html文件是否存在，如果存在，那就说明该页面已经设计完毕。
- 不重复设计已经设计完毕的页面，也不漏掉任何页面。
### 第五步：并行创建执行
- 使用 'edit_file' 工具并行创建多个新页面
- 每个新页面使用独立的CSS样式
- 确保所有新页面符合设计规范
### 第六步：安全更新进度
创建完成后：
- **谨慎更新** 'src/index.html' 的页面引用（仅添加，不修改现有内容）
- 更新 ''doc/xxxAPP-UI设计文档.md' 的组件库部分
- 明确告知用户完成状态：X/总数
### 🛡️ 关键安全检查清单
更新src/index.html前必须确认：
□ 已完整读取现有src/index.html文件
□ 已识别现有CSS样式结构
□ 计划的修改仅为添加新页面引用
□ 不会修改任何现有CSS代码
□ 不会改变现有布局结构
## 请按照以下要求输出一套完整的高质量APP原型图：
1. 设计目标
- 创建符合苹果人机界面指南(Human Interface Guidelines)的iOS原生风格设计
- 确保原型图能直观展示APP的功能流程和用户体验
2. 设计规范
- 使用最新的iOS设计元素和交互模式
- 遵循iPhone 16 Pro尺寸规格(宽度393px高度852px)
- 采用明亮、活力的配色方案
- 注意整个应用的主色调只有一种，特别是页面背景色，不能各个页面背景色都不一样
- 重视无障碍设计，确保文字对比度和交互区域大小合适
- 使用简洁清晰的图标和插图风格
- 文字的大小必须要注意，不能大，文字的大小要偏小的风格来进行设计。
- 如果是页面卡片组件，要特别注意要水平居中
- 如果节点是可以点击的，css需添加上合适的hover的样式
- 闪屏页不要添加动画元素和loading元素
- 注册方式如果用户没有描述说明，那就默认使用手机验证码注册，下面可以切换注册方式：微信注册、QQ注册、账号密码注册。
- 登录方式如果用户没有描述说明，那就默认使用手机验证码登录，下面可以切换登录方式：微信登录、QQ登录、账号密码登录。
- 如果登录或注册页有了填写手机验证码的输入框了，那么就不需要验证码页面了，直接在登录或注册页设计即可。
- 如果需要验证码填写页面，那么单个验证码数字输入框的宽度和高度必须是35px。
- 页面的导航栏、操作栏、搜索栏、筛选栏等bar组件，要注意上下padding的值应该是一样的，绝对不能设置不一样的值
- 页面的顶部和底部要进行沉浸式设计
- 设计页面之前要思考清楚该页面内容是否应该一个屏幕显示完毕，不需滚动。
- 如果是引导页，使用viewPager来实现左右滑动切换
- 如果有对话框、toast、下拉菜单、侧滑面板等节点组件，必须设计并使用html实现出来，对话框和toast一般是水平居中的，然后需要强制显示出来。
- hover与点击反馈：请使用浅色的背景色background来反馈就行，严禁使用transform效果，如不得使用：
.hot-sales-item:hover {
transform: translateX(...px);
}
正确写法应该是：
.hot-sales-item:hover {
background: ...;
}
- 输入框如果需要展示文字label，尽量使用icon代替文字label，并且icon放在输入框里面的左侧，输入框有placeholder提示，这样整个页面的空间利用率高。
3. html实现
- 使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。
- 每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等，注意文件名需要用驼峰方式的英文命名，如：searchResult.html，不得使用中文命名。
- 开始时先创建src/index.html文件，然后再开始设计具体的页面html。
- src/index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接，而且每一个页面的iframe之间必须有20px的左右上下间距。
- 为每个屏幕添加设备边框、手机顶部状态栏(设定为22px，显示手机时间、信号、wifi等)、手机底部横条栏(设定为22px，显示横条)，不要遮住屏幕内的内容，手机顶部状态栏和手机底部横条栏需要实现沉浸式，因此看情况设置背景色。
- 像素必须使用px，不使用rem和em等其他。
- 所有颜色值不得使用内置的颜色关键字，比如不得使用red、blue、green、yellow、purple等颜色关键字，必须使用#000000、#ffffff等16进制颜色值。
- 任何地方都不需要设置overflow: hidden，必须记住
- 每一个html代码文件，只显示页面名字和页面iframe就行，不需要显示任何其他非设计稿内容的提示、总结文字。
- html的内容除非有要求使用非中文，默认都使用中文
- 菜单项文字、按钮文字、U内容是标签或价格或状态等节点必须设置 "white-space: nowrap"，否则会出现不美观的换行显示。
- 当使用CSS Flex布局时，请务必注意：如果父容器设置了 "flex: 1" 和 "overflow-y: auto"，其子元素即使设置了固定高度（如 height: 300px），也可能因为默认的 "flex-shrink: 1" 被压缩至0高度。解决方案是为需要保持固定高度的flex子元素显式添加 "flex-shrink: 0"，防止被flex布局压缩。
- 在编写水平滚动的标签栏或类似的UI组件时，务必注意：1) 父容器必须设置 "display: flex" + "align-items: center" 确保所有标签垂直居中对齐；2) 标签元素本身也要添加 "display: flex" + "align-items: center" 确保内部文字垂直居中且不被遮挡。缺少这些设置会导致标签高度不一致、文字显示异常。
- src/index.html的样式和里面的页面iframe的代码大概如下：
<style>
body {
margin: 0;
padding: 20px;
background-color: #f5f5f5;
font-family: 'Arial', sans-serif;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(393px, 1fr));
gap: 40px;
justify-content: center;
max-width: 1600px;
margin: 0 auto;
}
.phone-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.page-title {
text-align: center;
font-size: 14px;
color: #333;
font-weight: 600;
margin-bottom: 10px;
}
.phone-frame {
width: 393px;
height: 852px;
background: #000;
border-radius: 40px;
padding: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.screen {
width: 100%;
height: 100%;
border-radius: 30px;
overflow: hidden;
position: relative;
}
iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 30px;
}
</style>
<body>
<div class="container">
<div class="phone-container">
<div class="page-title">xxx页</div>
<div class="phone-frame">
<div class="screen">
<iframe src="xxx.html"></iframe>
</div>
</div>
</div>
...
</div>
- 每一个html页面的结构从上到下：手机顶部状态栏、手机底部主页指示横条，xxx页面容器。html代码大概如下：
<style>
body {
font-family: 'Poppins', sans-serif;
width: 393px;
height: 852px;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
...
}
.status-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 22px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
font-size: 12px;
font-weight: 600;
z-index: 1000;
...
}
.page-container {
flex: 1;
display: flex;
flex-direction: column;
padding: 22px 0;
overflow-y: auto;
}
.home-indicator {
position: absolute;
bottom: 0;
height: 22px;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
...
}
</style>
<body name="首页">
<div name="手机系统的顶部状态栏" class="status-bar" vtype="phoneTopNavigateBar">
</div>
<div name="手机系统的底部首页指示器横条栏" class="home-indicator" vtype="phoneBottomHomeIndicatorBar">
</div>
<div name="首页页面容器" class="page-container">
</div>
</body>
- 每一个节点必须添加一个组件类型属性：vtype。比如文字vtype="text"、按钮vtype="button"、输入框vtype="input"、图标vtype="icon"、图片vtype="image"、矩形vtype="rect"、圆形vtype="circle"、线条vtype="line"、基础容器vtype="container"、手机系统的顶部状态栏vtype="phoneTopNavigateBar"、手机系统的底部首页指示器横条栏vtype="phoneBottomHomeIndicatorBar"、卡片容器vtype="card"、grid容器vtype="grid"、开关vtype="switch"、一个单选vtype="radio"、一个多选vtype="checkBox"、单选组(多个单选)vtype="radioGroup"、多选组(多个多选)vtype="checkBoxGroup"、竖向列表vtype="verticalListView"、横向列表vtype="horizontalListView"、列表item卡片vtype="listItemCard", 轮播vtype="viewPager"、轮播区域vtype="viewPagerArea"、轮播指示器容器vtype="viewPagerIndicatorContainer"、轮播指示器Item项容器vtype="viewPagerIndicatorItemContainer"、Tab选项卡容器vtype="tabContainer"、Tab选项卡菜单栏vtype="tabMenuBar"、底部TAB导航栏vtype="bottomTabNavigateBar"、顶部导航栏vtype="topNavigateBar"、顶部标题栏vtype="topTitleBar"、底部操作栏vtype="bottomOperateBar"、对话框vtype="dialog"、Toast提示vtype="toast"、下拉菜单vtype="dropDownMenu"、侧滑面板vtype="sideSlidePanel"等以此类推。
- 必须思考该容器是否列表容器，类似android一样，列表容器的特点是：如果item的个数是不固定的，依据dataList多少来决定，item的是可复用的，类似android的recyclerView一样。此时，vtype必须使用verticalListView或horizontalListView，绝对不能使用container.
- 除了vtype为'text'的所有节点必须添加一个英文id属性和中文名字name属性。你需要根据功能逻辑和组件类型来命名id属性和name属性，描述该元素在产品中的作用，命名使用简洁的风格。
- Icon图标必须使用<i>标签，<i>标签节点也必须需要添加一个id和name的属性，并且<i>标签里面绝对不能使用before、after、marker等等任何伪元素。
- Icon图标<i>标签的class常态、hover状态、active状态、disabled状态等css只能设置color、font-size、cursor属性，不得设置background、border、padding、margin等任何css样式，如果需要其他样式，请在<i>图标标签外面包一层div来设置样式到div上，比如正确写法：
<div name="微信Icon" id="wxIconDiv" class="icon-bg-div">
<i name="微信Icon" id="wxIcon" class="fab fa-weixin"></i>
</div>
- 如果需要显示image图片（非icon图标类型），尽量使用img标签和src属性，不要使用div标签和background-image属性来实现。
- 单选radio就是一个i标签和图标Icon，不得使用圆角矩形来实现，必须使用i标签和图标Icon实现，图标使用Font Awesome CDN，不需要动效效果，不需要任何JS逻辑，html代码参考如下：
<i name="浅色主题单选按钮" id="lightThemeRadio" class="fas fa-circle-dot radio-button selected"vtype="radio" state="selected"></i>
- 多选checkBox就是一个i标签和图标Icon，不得使用圆角矩形来实现，必须使用i标签和图标Icon实现，图标使用Font Awesome CDN，不需要动效效果，不需要任何JS逻辑，html代码参考如下：
<i name="系统通知多选框" id="systemNotificationCheckbox" class="fas fa-check-square checkbox"vtype="checkBox" state="normal"></i>
- 开关switch就是一个i标签和图标Icon，不得使用圆角矩形来实现，必须使用i标签和图标Icon实现，图标使用Font Awesome CDN，不需要滑动效果，不需要任何JS逻辑，html代码参考如下：
<i name="推送通知开关" id="notificationSwitch" class="fas fa-toggle-on switch active" vtype="switch"state="active" state="selected"></i>。
- html和css样式里绝对不得使用before、after、marker等等任何伪元素
- hover与点击反馈：请使用浅色的背景色background来反馈就行，严禁使用transform效果，如不得使用：
.hot-sales-item:hover {
transform: translateX(...px);
}
正确写法应该是：
.hot-sales-item:hover {
background: ...;
}
- 如果节点是active、selected、disabled状态，需要添加属性：state="active"或state="selected"或state="disabled"
- 开关、单选、多选等有状态的节点，必须添加state属性，并且state属性必须有值，值为normal(常态没选中)、active、selected、disabled。
- 使用viewPager注意最外面必须是vtype='viewPager'，代码大概如下：
/* 轮播区域 */
.carousel-container {
padding: xxpx xxpx;
background: #xxx;
}
.carousel {
display: flex;
transition: transform 0.3s ease;
border-radius: xxpx;
}
.carousel-item {
position: relative;
border-radius: xxpx;
overflow: hidden;
width: 100%;
height: xxpx;
}
.carousel-image {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.carousel-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: #xxx;
background: #xxx; // 半透明灰黑底色衬托出文字内容
padding: xxpx;
backdrop-filter: blur(xxpx);
}
<div name="轮播容器" id="carouselContainer" class="carousel-container" vtype="container">
<div name="轮播组件" id="mainCarousel" class="carousel" vtype="viewPager">
<div name="轮播区域1" class="carousel-item" vtype="viewPagerArea">
// 如果需要图片节点，那就参考这个img标签的写法
<img name="轮播图片" class="carousel-image"
src="https://picsum.photos/200?random=okl&imgSize=200x200" alt="轮播图片"
vtype="image">
<div name="轮播内容" class="carousel-content" vtype="container">
// 轮播内容里面可以有文字、按钮等UI元素，使用vtype="text"、vtype="button"等组件类型来实现。
</div>
</div>
... // 轮播区域可以有多个，使用vtype="viewPagerArea"来实现。
</div>
<div name="轮播指示器容器" id="carouselIndicator" class="carousel-indicators" vtype="viewPagerIndicatorContainer">
...
</div>
</div>
- 如果是轮播ViewPager组件节点,必须要有一个轮播指示器viewPagerIndicatorContainer来对应
- 轮播指示器容器viewPagerIndicatorContainer第一层孩子必须是轮播指示器Item项容器vtype="viewPagerIndicatorItemContainer"的，轮播指示器Item项容器里面的孩子才是指示器的UI元素，大概代码如下：
<div name="轮播指示器容器" id="carouselIndicator" class="//宽度是看所有孩子的内容宽度" vtype="viewPagerIndicatorContainer">
<div name="轮播指示器Item1" class="//平分宽度-不设置背景色-不设置圆角-只是个空容器" vtype="viewPagerIndicatorItemContainer" id="indicator1">
...
// 轮播指示器Item的UI节点的class="设置背景色-设置圆角-设置wh等等"，再设置属性state="active"或state="normal"
</div>
...
</div>
- 通过CDN引入Google Fonts字体
- 图标使用Font Awesome CDN
## ⚠️ 【强制性约束】vtype="verticalListView"或vtype="horizontalListView"的列表组件模板化规则
### 什么时候需要使用vtype="verticalListView"或vtype="horizontalListView"的列表组件
- 你必须要以android的RecyclerView的思维来思考这个排版数据是否使用列表组件来实现，还是使用普通的container(可以设置是否滚动的)容器来实现就行，比如筛选栏、操作栏、标签栏、设置页等等，这些在android技术来分析，是不应该使用列表组件实现的，应该使用普通的container容器来实现。
- 当需要显示动态数据源列表时，必须使用vtype="verticalListView"或vtype="horizontalListView"的列表组件。
### 核心判断标准
**关键区分点：数据来源是固定还是动态**
#### 1. 固定数据场景（直接创建具体实例）
- **适用情况**：明确指定数据个数（如"固定4个"、"显示3个"、"展示5个"等）
- **处理方式**：直接创建对应数量的具体card实例，每个都有具体内容
- **示例场景**：
- "固定4个数据长度的热销推荐" → 创建4个热销车辆卡片
- "显示3个分类选项" → 创建3个分类卡片
- "展示5个推荐商品" → 创建5个商品卡片
- 节点必须加上isStaticData="true"属性，表示数据是固定的，比如固定4个热销推荐，那么isStaticData="true"
- 孩子节点容器必须使用vtype="listItemCard"，不得使用vtype="card"
**正确代码示例**：
<!-- 固定3个商品item -->
<div vtype="horizontalListView" isStaticData="true">
<div class="hot-car-card" vtype="listItemCard">宝马3系 ¥15.8万</div>
<div class="hot-car-card" vtype="listItemCard">奔驰C级 ¥28.5万</div>
<div class="hot-car-card" vtype="listItemCard">奥迪A4L ¥22.3万</div>
</div>
#### 2. 动态数据场景（使用模板化）
- **适用情况**：数据长度不确定，比如由网络/数据库动态返回
- **处理方式**：只创建1个card模板，模拟RecyclerView机制
- **关键词识别**：
- "推荐列表"（无具体数量）
- "搜索结果"
- "商品列表"
- "用户列表"
- 任何没有明确数量限制的列表
- 节点必须加上isStaticData="false"属性，表示数据是动态的，比如推荐列表，那么isStaticData="false"
- 孩子节点容器必须使用vtype="listItemCard"，不得使用vtype="card"
**正确代码示例**：
<!-- 动态推荐列表 -->
<div vtype="verticalListView" isStaticData="false">
<div class="recommendation-card" vtype="listItemCard">模板内容</div>
</div>
### 判断流程
1. **首先判断**：用户是否明确指定了数据数量？
- 是 → 固定数据场景，创建具体实例
- 否 → 动态数据场景，使用模板化
2. **关键词识别**：
- "固定X个"、"显示X个"、"展示X个" → 固定数据
- "列表"、"推荐"、"搜索结果" → 动态数据
3. **最终检查**：
- 固定数据场景：确保创建了正确数量的card实例
- 动态数据场景：确保只有1个card模板
## 重点规则
- **连续设计所有页面**：必须一次性连续设计完所有页面，绝对不能中途停止、暂停、或询问用户是否继续。无论有多少页面都要在一次对话中全部完成。
- **禁止中途询问**：在设计过程中，绝对不能询问用户"是否继续设计"、"是否需要检查"等问题，必须自动连续完成所有页面设计。
- **状态管理优化**：完成每个页面后简单记录进度，但不要因为状态管理而中断设计流程。
- viewPager轮播组件节点绝对不允许设置'overflow: hidden'。
- 如果有提供页面列表参考，则直接使用该页面列表进行设计，无需重新分析。如果没有提供页面列表参考，则需要先充分理解'用户输入描述'的内容，然后分析得出一个正确而且全面的页面列表，不能漏掉一些页面，必须按要求把所有页面都进行高保真设计。
- 必须是高保真的设计稿，不得使用原型设计那一套进行，必须要高保真的UI设计稿规则来设计，我希望这些界面是需要能直接拿去进行开发的。
- 设计的页面较多时，绝对不能以由于时间关系的原因而快速简单设计或只设计重要的页面，这是绝对不允许的，必须要以高质量高保真的原则来设计每一个页面，也不能中途停止。
- 必须按'xxxAPP-产品需求文档.md'文件里面的页面顺序一一设计所有页面，不能跳过任何页面，不能只设计重要的页面，比如总共有56个页面需要设计，那么必须从第1个页面开始，按照顺序设计56个页面出来才算完成UI设计的工作任务。
- 节点的css样式绝对不得使用任何伪元素before、after、marker等等
- 如果发现需求文档不存在，则按照用户需求描述进行设计。如果需求文档存在，则严格按照需求文档的页面列表和详细需求进行设计，不得偏离需求文档的定义。
- 每一次新的对话需要重新执行'optimize_ui_design_prompt'这个mcp功能，以确保每次对话都能记住设计规则和要求。
## icon图标与img图片
- 当需要icon图标时必须使用FontAwesome图标，比如：<i name="微信Icon" vtype="icon" id="wxIcon" class="fab fa-weixin"></i>
- 当需要img图片时，src使用图片地址：https://picsum.photos/200?random=lm&imgSize=200x200)，其中参数random=gg是随机字符串，不同随机字符串会显示不同的图片，比如：<img src="https://picsum.photos/200?random=lm&imgSize=200x200" alt="xxx" class="xxx" vtype="image">
- 绝对不能使用emoji表情符号，不得使用任何emoji表情符号，请使用icon或img图片节点来代替。
## UI设计完成确认
- 使用read_file工具阅读doc/xxx-产品需求文档.md 里面的页面列表和页面流程图，然后更新doc文件夹中的xxx-产品需求文档.md文件里面的页面流程图，确保页面流程图的正确性。
- 当所有页面的UI设计都完成后，必须告知用户："✅ **UI设计工作已完成！**所有页面的设计稿已保存在 src/xxxModule/xxxPage 目录下，您可以通过打开 src/index.html 文件来预览所有页面的设计效果。请您仔细查看设计稿，确认是否有需要修改的地方。如果有修改意见，请告诉我具体的修改要求。确认UI设计无问题或修改完毕后，如果还需要进行代码开发工作，请告诉我可以开始代码编写。"
- **⚠️ 重要：这是工作流暂停点！在用户明确表示确认UI设计无问题并要求继续进行代码开发之前，绝对不能自动进行下一步工作。**
- **⚠️ 如果系统自动继续执行了代码开发，说明工作流配置有问题，需要停止自动执行。**
- 在用户确认UI设计无问题或完成修改后，才能继续进行后续的代码开发工作。
## 写入文件规则
- 所有html文件写入工程根目录下面的'src/xxxModule/xxxPage'文件夹里面的，每个html文件里只将html+css的代码写入，其他任何注释、解释、澄清、总结等文字不得写入该文件。
- 所有xxxPage.ts文件写入工程根目录下面的'src/xxxModule/xxxPage'文件夹里面的，每个xxxPage.ts文件里只将空实现的xxxPage.ts文件代码写入，其他任何注释、解释、澄清、总结等文字不得写入该文件。
`;
/**
* 优化列出所需页面列表提示词
* 注意：此方法专门处理页面列表分析需求，输出结果供产品设计和UI设计使用
*/
async optimizePageListPrompt(userInput) {
return `${this.pageListPromptTemplate}
# 用户需求描述
${userInput}`;
}
/**
* 修复页面列表提示词
* 注意：此方法用于对已有页面列表进行二次检查和修复，确保页面完整性
* 📁 数据来源：从doc/xxx-产品需求文档.md文件中读取已有页面列表
*/
async optimizeFixPageListPrompt(userInput) {
return `${this.fixPageListPromptTemplate}
# 用户需求描述
${userInput}
# 修复任务
请先读取doc文件夹中的xxx-产品需求文档.md文件，获取其中的页面列表，然后对页面列表进行深度分析和修复，补充所有遗漏的页面，确保APP功能完整、页面齐全。`;
}
/**
* 优化产品需求设计提示词
* 注意：此方法专门处理产品需求文档生成，基于已有页面列表进行完善
* 📁 数据来源：从doc/xxx-产品需求文档.md文件中读取已有页面列表和项目背景
*/
async optimizeProductDesignPrompt(userInput) {
return `${this.productDesignPromptTemplate}
# 用户需求描述
${userInput}
# 完善任务
请先读取doc文件夹中的xxx-产品需求文档.md文件，获取其中已有的项目背景和页面列表，然后基于这些内容完善产品需求文档的详细内容。`;
}
/**
* 优化代码开发提示词
* 注意：此方法专门处理代码开发相关需求，会参考产品需求文档
*/
async optimizeCodePrompt(userInput) {
return `${this.codePromptTemplate}
# 用户需求描述
${userInput}`;
}
/**
* 优化UI设计提示词
* 注意：此方法专门处理UI设计相关需求，会参考产品需求文档和页面列表
* 📁 数据来源：从doc/xxx-产品需求文档.md文件中读取页面列表和需求详情
*/
async optimizeUIDesignPrompt(userInput) {
return `${this.uiDesignPromptTemplate}
# 用户需求描述
${userInput}
# 设计任务
请先读取doc文件夹中的xxx-产品需求文档.md文件，获取其中的页面列表和详细需求，然后基于这些内容进行UI设计。严格按照产品需求文档中的页面定义、UI组件清单、交互逻辑进行设计。`;
}
/**
* 基于页面列表结果生成产品需求设计提示词
* 此方法用于在获得页面列表结果后，生成包含页面列表信息的产品设计提示词
*/
async generateProductDesignPromptWithPageList(userInput, pageListResult) {
return await this.optimizeProductDesignPrompt(userInput);
}
/**
* 基于页面列表结果生成UI设计提示词
* 此方法用于在获得页面列表结果后，生成包含页面列表信息的UI设计提示词
*/
async generateUIDesignPromptWithPageList(userInput, pageListResult) {
return await this.optimizeUIDesignPrompt(userInput);
}
/**
* 基于修复后的页面列表结果生成产品需求设计提示词
* 此方法用于在获得修复后的页面列表结果后，生成包含完整页面列表信息的产品设计提示词
*/
async generateProductDesignPromptWithFixedPageList(userInput, fixedPageListResult) {
return await this.optimizeProductDesignPrompt(userInput);
}
/**
* 基于修复后的页面列表结果生成UI设计提示词
* 此方法用于在获得修复后的页面列表结果后，生成包含完整页面列表信息的UI设计提示词
*/
async generateUIDesignPromptWithFixedPageList(userInput, fixedPageListResult) {
return await this.optimizeUIDesignPrompt(userInput);
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvbXB0LW9wdGltaXplci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9wcm9tcHQtb3B0aW1pemVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0EyQkc7QUFDSCxNQUFNLE9BQU8sZUFBZTtJQUNULHNCQUFzQixHQUFHOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3lGQTRFNkMsQ0FBQztJQUV2RSx5QkFBeUIsR0FBRzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Z0dBa0RpRCxDQUFDO0lBRTlFLDJCQUEyQixHQUFHOzs7Ozs7Ozs7Ozs7Ozs7OztzSEFpQnFFLENBQUM7SUFFcEcsa0JBQWtCLEdBQUc7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQWtjdEMsQ0FBQztJQUVnQixzQkFBc0IsR0FBRzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Q0E4YjNDLENBQUM7SUFFQTs7O09BR0c7SUFDSCxLQUFLLENBQUMsc0JBQXNCLENBQUMsU0FBaUI7UUFDNUMsT0FBTyxHQUFHLElBQUksQ0FBQyxzQkFBc0I7OztFQUd2QyxTQUFTLEVBQUUsQ0FBQztJQUNaLENBQUM7SUFFRDs7OztPQUlHO0lBQ0gsS0FBSyxDQUFDLHlCQUF5QixDQUFDLFNBQWlCO1FBQy9DLE9BQU8sR0FBRyxJQUFJLENBQUMseUJBQXlCOzs7RUFHMUMsU0FBUzs7O2lGQUdzRSxDQUFDO0lBQ2hGLENBQUM7SUFFRDs7OztPQUlHO0lBQ0gsS0FBSyxDQUFDLDJCQUEyQixDQUFDLFNBQWlCO1FBQ2pELE9BQU8sR0FBRyxJQUFJLENBQUMsMkJBQTJCOzs7RUFHNUMsU0FBUzs7O29FQUd5RCxDQUFDO0lBQ25FLENBQUM7SUFFRDs7O09BR0c7SUFDSCxLQUFLLENBQUMsa0JBQWtCLENBQUMsU0FBaUI7UUFDeEMsT0FBTyxHQUFHLElBQUksQ0FBQyxrQkFBa0I7OztFQUduQyxTQUFTLEVBQUUsQ0FBQztJQUNaLENBQUM7SUFFRDs7OztPQUlHO0lBQ0gsS0FBSyxDQUFDLHNCQUFzQixDQUFDLFNBQWlCO1FBQzVDLE9BQU8sR0FBRyxJQUFJLENBQUMsc0JBQXNCOzs7RUFHdkMsU0FBUzs7OzRGQUdpRixDQUFDO0lBQzNGLENBQUM7SUFFRDs7O09BR0c7SUFDSCxLQUFLLENBQUMsdUNBQXVDLENBQUMsU0FBaUIsRUFBRSxjQUFzQjtRQUNyRixPQUFPLE1BQU0sSUFBSSxDQUFDLDJCQUEyQixDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzNELENBQUM7SUFFRDs7O09BR0c7SUFDSCxLQUFLLENBQUMsa0NBQWtDLENBQUMsU0FBaUIsRUFBRSxjQUFzQjtRQUNoRixPQUFPLE1BQU0sSUFBSSxDQUFDLHNCQUFzQixDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3RELENBQUM7SUFFRDs7O09BR0c7SUFDSCxLQUFLLENBQUMsNENBQTRDLENBQUMsU0FBaUIsRUFBRSxtQkFBMkI7UUFDL0YsT0FBTyxNQUFNLElBQUksQ0FBQywyQkFBMkIsQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUMzRCxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsS0FBSyxDQUFDLHVDQUF1QyxDQUFDLFNBQWlCLEVBQUUsbUJBQTJCO1FBQzFGLE9BQU8sTUFBTSxJQUFJLENBQUMsc0JBQXNCLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDdEQsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBCeXRlRnVuIEFJIE1DUCDmj5DnpLror43kvJjljJblmahcbiAqIFxuICog6YeN6KaB6K+05piO77yaXG4gKiAtIOacrOexu+aPkOS+m+S6lOS4queLrOeri+eahOS8mOWMluW3peWFt++8jOavj+S4quW3peWFt+WkhOeQhuS4jeWQjOexu+Wei+eahOmcgOaxglxuICogLSDmr4/kuKrlt6Xlhbfpg73ni6znq4vmiafooYzvvIzpgJrov4fmlofku7bns7vnu5/ov5vooYzmlbDmja7kvKDpgJJcbiAqIC0g5b+F6aG75YiG5q2l6aqk5omn6KGM77yM5q+P5Liq5q2l6aqk5a6M5oiQ5ZCO562J5b6F55So5oi356Gu6K6k5YaN6L+b6KGM5LiL5LiA5q2lXG4gKiBcbiAqIOWNleS4gOW3peWFt+WIl+ihqO+8mlxuICogMS4g6aG16Z2i5YiX6KGo5YiG5p6Q6ZyA5rGCIOKGkiDosIPnlKggb3B0aW1pemVQYWdlTGlzdFByb21wdCgpIOKGkiDlhpnlhaVkb2MveHh4LeS6p+WTgemcgOaxguaWh+ahoy5tZFxuICogMi4g6aG16Z2i5YiX6KGo5L+u5aSN6ZyA5rGCIOKGkiDosIPnlKggb3B0aW1pemVGaXhQYWdlTGlzdFByb21wdCgpIOKGkiDor7vlj5blubbmm7TmlrBkb2MveHh4LeS6p+WTgemcgOaxguaWh+ahoy5tZFxuICogMy4g5Lqn5ZOB6ZyA5rGC6K6+6K6h6ZyA5rGCIOKGkiDosIPnlKggb3B0aW1pemVQcm9kdWN0RGVzaWduUHJvbXB0KCkg4oaSIOivu+WPluW5tuWujOWWhGRvYy94eHgt5Lqn5ZOB6ZyA5rGC5paH5qGjLm1kXG4gKiA0LiBVSeiuvuiuoemcgOaxgiDihpIg6LCD55SoIG9wdGltaXplVUlEZXNpZ25Qcm9tcHQoKSDihpIg6K+75Y+WZG9jL3h4eC3kuqflk4HpnIDmsYLmlofmoaMubWTov5vooYxVSeiuvuiuoVxuICogNS4g5Luj56CB5byA5Y+R6ZyA5rGCIOKGkiDosIPnlKggb3B0aW1pemVDb2RlUHJvbXB0KCkg4oaSIOivu+WPlmRvYy94eHgt5Lqn5ZOB6ZyA5rGC5paH5qGjLm1k6L+b6KGM5Luj56CB5byA5Y+RXG4gKiBcbiAqIOaOqOiNkOeahOWIhumYtuauteaJp+ihjOa1geeoi++8iOW/hemhu+WIhuatpeaJp+ihjO+8jOS4jeWPr+i/nue7reiwg+eUqO+8ie+8mlxuICog6Zi25q615LiA77ya6aG16Z2i5YiX6KGo5YiG5p6QIOKGkiDmiafooYzlubblhpnlhaXmlofku7Yg4oaSIOWBnOmhv+etieW+heehruiupFxuICog6Zi25q615LqM77ya6aG16Z2i5YiX6KGo5L+u5aSNIOKGkiDor7vlj5bmlofku7bjgIHkv67lpI3lubbmm7TmlrAg4oaSIOWBnOmhv+etieW+heehruiupCAgXG4gKiDpmLbmrrXkuInvvJrkuqflk4HpnIDmsYLorr7orqEg4oaSIOivu+WPluaWh+S7tuOAgeWujOWWhOmcgOaxguaWh+ahoyDihpIg5YGc6aG/562J5b6F56Gu6K6kXG4gKiDpmLbmrrXlm5vvvJpVSeiuvuiuoSDihpIg6K+75Y+W6ZyA5rGC5paH5qGj44CB6L+b6KGMVUnorr7orqEg4oaSIOWBnOmhv+etieW+heehruiupFxuICog6Zi25q615LqU77ya5Luj56CB5byA5Y+RIOKGkiDor7vlj5bpnIDmsYLmlofmoaPjgIHov5vooYzku6PnoIHlvIDlj5Eg4oaSIOWujOaIkFxuICogXG4gKiDimqDvuI8g6YeN6KaB5Y6f5YiZ77yaXG4gKiAtIOS4peemgei/nue7reiwg+eUqOWkmuS4quW3peWFt1xuICogLSDmr4/kuKrlt6XlhbfmiafooYzlrozmiJDlkI7lv4XpobvnrYnlvoXnlKjmiLfnoa7orqRcbiAqIC0g5omA5pyJ5pWw5o2u6YCa6L+H5paH5Lu257O757uf5Lyg6YCS77yM56Gu5L+d5q+P5Liq5bel5YW36YO96IO954us56uL5omn6KGMXG4gKiAtIOavj+S4qumYtuautemDveimgeacieaYjuehrueahOWujOaIkOaPkOekuuWSjOWBnOmhv+ajgOafpeeCuVxuICovXG5leHBvcnQgY2xhc3MgUHJvbXB0T3B0aW1pemVyIHtcbiAgcHJpdmF0ZSByZWFkb25seSBwYWdlTGlzdFByb21wdFRlbXBsYXRlID0gYCMg5L2g5pivQVBQ5Lqn5ZOB57uP55CG5LiT5a6277yM546w5Zyo6ZyA6KaB5L2g5qC55o2u55So5oi36L6T5YWl55qE6ZyA5rGC5o+P6L+w77yM6YG15b6qXCLliIbmnpDop4TliJlcIuWIhuaekOWHuuaJgOmcgOimgeeahOafkOS4quWKn+iDveaooeWdl+aIluiAheWujOaVtEFQUOeahOmhtemdouWIl+ihqOOAglxuXG4jIyDliIbmnpDop4TliJlcbuS7peS4i+aWueazleiuuuWIhuS4uuWkmuS4quatpemqpO+8jOmHjeeCueeqgeWHulwi6YCQ6aG16Z2i5YWD57Sg4oaS5Y+v54K54oaS6Lez6L2sXCLliIbmnpDmgJ3ot6/jgIJcblxuIyMg6YeN54K55rOo5oSPXG4tIOW/hemhu+imgeaAneiAg+a4healmui/meaYr+S4jeaYr+S4gOS4qumhtemdou+8jOi/mOaYr+i/meWPquaYr+S4gOS4quW8ueahhuaIluacrOmhteacrOmhteWPr+ebtOaOpeS/ruaUueeahOi+k+WFpeahhu+8jOavlOWmgu+8muaXpeacn+mAieaLqe+8jOWug+aYjuaYvuWPquaYr+S4gOS4quaXpeacn+mAieaLqeeahOW8ueahhu+8jOe7neS4jeaYr+mhtemdouOAguWPiOavlOWmgu+8muaYteensOS/ruaUue+8jOi/meWPquaYr+S4gOS4qumhtemdouWGheWPr+S7peebtOaOpeS/ruaUueaYteensOeahOS4gOS4qui+k+WFpeahhu+8jOe7neS4jeaYr+mhtemdouOAgui/memHjOWPquWIl+WHuumhtemdouWIl+ihqO+8jOW8ueahhuOAgei+k+WFpeahhuetieS4jeaYr+mhtemdou+8jOS4jeWIl+WHuuadpeOAglxuLSDlv4XpobvmgJ3ogIPmuIXmpZrvvIzov5nmmK/liIbmnpBO5Liq5Yqf6IO95qih5Z2X55qE6aG16Z2i5YiX6KGo77yM6L+Y5piv5YiG5p6Q5pW05LiqQVBQ55qE6aG16Z2i5YiX6KGoXG4tIOWmguaenOaYr+WIhuaekE7kuKrlip/og73mqKHlnZfvvIzpgqPlsLHlj6rliJflh7rov5lO5Liq5Yqf6IO95qih5Z2X55qE6aG16Z2i5YiX6KGo5Y2z5Y+v77yM5LiN5Y+v5Lul5YiX5Ye65pW05LiqQVBQ5omA5pyJ5qih5Z2X5ZKM6aG16Z2i77yM5aaC5p6c5piv5YiG5p6Q5pW05LiqQVBQ55qE6aG16Z2i5YiX6KGo77yM6YKj5LmI5b+F6aG75YiG5p6Q5Ye65omA5pyJ6aG16Z2i44CCXG5cbiMjIOS4gOOAgeaooeWdl+aLhuino+S4juWIneatpeWIl+WHuumhtemdouWIl+ihqFxuLSDlpoLmnpzmmK/liIbmnpBO5Liq5Yqf6IO95qih5Z2X77yM6YKj5LmI5LiN6ZyA6KaB5ouG6Kej5qih5Z2X77yM5Y+q6ZyA6KaB5YiX5Ye66L+ZTuS4quWKn+iDveaooeWdl+eahOmhtemdouWIl+ihqOWNs+WPr+OAglxuLSDlpoLmnpzmmK/mlbTkuKpBUFDnmoTpobXpnaLliJfooajvvIzpgqPkuYjlv4Xpobvmi4bop6PmoLjlv4PkuJrliqHmqKHlnZcsIOi+k+WHuuaJgOacieWKn+iDveaooeWdl++8jOS4jeiuuuaYr+WQpuaguOW/g++8jOS4jeiuuuWkp+Wwj++8jOmDveimgeWIl+WHuuadpeOAglxuXG4jIyDkuozjgIHmr4/kuKrpobXpnaLnmoRcIuWFg+e0oOKGkuWPr+eCueKGkui3s+i9rFwi5YiG5p6Q6KaB54K5XG5cbj4gKirmoLjlv4PmgJ3ot6/vvJoqKiAgXG4+IOmBjeWOhuS4iuS4gOatpeWIhuaekOWHuuadpeeahOavj+S4qumhtemdou+8jOWDj+aJq+mbt+S4gOagt1wi54K55LquXCLlroPkuIrpnaLmiYDmnInlj6/kuqTkupLlhYPntKDvvIzmsr/nnYBcIuWFg+e0oOWPr+eCueKGkui3s+i9rOmhtemdouebruagh1wi5LiA6Lev5bu25Ly477yM6YCQ5bGC5Y+R546w5bm26KGl5YWF5pu05aSa6aG16Z2i44CCXG5cbjEuICoq6K+G5Yir6aG16Z2i5YWD57SgKiogIFxuICAgLSAqKumhtemdouahhuaetioq77ya5rWP6KeI6aG16Z2i5pW05L2T5biD5bGA77yI5aaC6aG26YOo5a+86Iiq44CBVGFi44CB5YiX6KGo44CB6KGo5Y2V44CB5bqV6YOo5oyJ6ZKu562J77yJ44CCICBcbiAgIC0gKirliJflh7rmiYDmnInmjqfku7YqKu+8miAgXG4gICAgIC0g6L6T5YWl5qGG44CB5oyJ6ZKu44CB5Zu+54mH44CB5YiX6KGo6aG544CB6ZO+5o6l5paH5a2X44CBVGFiIOmhueOAgeS4i+aLieeureWktOOAgeaCrOa1ruaMiemSruOAgeWbvuagh+OAgeWkjemAiS/ljZXpgInmjInpkq7nrYnjgIJcblxuMi4gKirmoIforrDlj6/ngrnlh7vlhYPntKAqKiAgXG4gICAtIOWcqOS4iui/sOaOp+S7tuS4re+8jOWIpOaWreWTquS6m+aYr1wi5Y+v54K55Ye7XCLvvJogIFxuICAgICAtICoq5pi+5oCn5oyJ6ZKuKirvvIjmj5DkuqQv56Gu6K6kL+WPlua2iC/kuIvkuIDmraXvvIkgIFxuICAgICAtICoq5Y+v5bGV5byA5qCH6aKYL+WNoeeJhyoq77yI54K55Ye75bGV5byA5pu05aSa77yJICBcbiAgICAgLSAqKuW4pumTvuaOpeeahOaWh+Wtlyoq77yI5Y2P6K6u44CB6ZqQ56eB44CB5rOo5YaM44CB5b+Y6K6w5a+G56CB562J77yJIC