feat: 创建示例页面步骤提示词

master
LCJ-MinYa 2 weeks ago
parent dc9ac8ca01
commit 3ed93709bb

@ -0,0 +1,33 @@
创建示例页面:标准执行协议 (Optimized)
第一阶段:信息交互 (Step 1-3)
1. 类型确认:询问用户是创建 “单文件 (.vue)” 还是 “文件夹 (含 index.vue)”。
2. 模块定位:确认目标模块(位于 src/views/ 下,如 demo, tool, python 等,严格执行二级目录结构,不允许深层嵌套)。
3. 命名决策:
* 根据功能点,提供 3 个 CamelCase驼峰命名 建议。
* 唯一性检查:检查 src/views/{module}/ 目录下是否已有同名文件或文件夹,确保不冲突。
第二阶段:文件构建 (Step 4)
* 场景 A文件夹类型 (Folder)
* 路径src/views/{module}/{pageName}/
* 必备index.vue
* 可选 MD询问用户是否需要引入 MD 文档。
* 是:创建 {pageName}.md。index.vue 模板参考 src/views/demo/backToHttp/backToHttp.vue。
* 否index.vue 模板参考 src/views/demo/formItemWithRangeFields.vue。
* 场景 B单文件类型 (File)
* 路径src/views/{module}/{pageName}.vue
* 模板参考src/views/demo/formItemWithRangeFields.vue。
第三阶段:自动化路由配置 (Step 5)
* 操作目标:修改 src/router/modules/{module}.ts。
* 执行逻辑:找到文件中的 titleArr 数组变量,并在末尾追加新页面的配置对象:
```javascript
{
key: '{pageName}',
title: '{用户定义的中文名称}',
}
```
第四阶段:验证与总结
* 编译检查:确保新创建的页面没有语法错误。
* 会话总结:按照项目规范,将变更记录更新至根目录 README.md。

@ -1,17 +0,0 @@
## 创建示例页面步骤
1. **确认类型**:向用户确认创建的示例页面是属于**文件夹**、**文件**具体哪种类型。
2. **确认模块**:向用户确认创建的示例页面是属于**views**下面的哪个模块比如demo,tool等平级模块。
3. **确认页面名称**:向用户询问该页面主要展示示例功能是什么,根据示例功能提供三个**驼峰命名**的文件名称让用户选择,或者用户自行输入一个名称,切记**名称不可与现有的views下的任一页面名称重复**,例如/views/demo/asyncDynComp,新添加的名称不能与**asyncDynComp**相同。
4. **根据确认类型创建文件夹或者文件**
- 假定用户确认的**页面名称**为**showCreateRequest**
- 如果是**文件夹**类型创建showCreateRequest文件夹文件夹内创建index.vue,由**用户确认**如果需要引入md文档
- 如果需要引入md文档则文件夹内创建showCreateRequest.mdindex.vue中参考**src/views/demo/backToHttp/backToHttp.vue**写入代码。
- 如果不需要引入md文档index.vue中内容模版参考**src/views/demo/formItemWithRangeFields.vue**,内容则根据用户想要实现的示例修改为具体的vue代码。
- 如果是**文件**类型,则直接创建**showCreateRequest.vue**,内容模版参考**src/views/demo/formItemWithRangeFields.vue**,内容则根据用户想要实现的示例修改为具体的vue代码。
4. 最后需要根据创建的示例页面修改路由中显示的名称举例如果showCreateRequest.vue最终创建在demo下则需要修改**src/router/modules/demo.ts**文件中titleArr变量在titleArr变量最后添加一个对象格式如下(其中title根据具体场景创建对应的title)
```javascript
{
key: 'showCreateRequest',
title: '如何创建一个请求',
},
```

@ -1,12 +1,12 @@
{ {
"totalNotes": 87, "totalNotes": 88,
"categories": 5, "categories": 5,
"lastUpdated": "2026-01-16T06:01:19.500Z", "lastUpdated": "2026-01-29T03:29:36.051Z",
"weeklyAdded": 2, "weeklyAdded": 2,
"categoryChartData": [ "categoryChartData": [
{ {
"name": "demo", "name": "demo",
"value": 76 "value": 77
}, },
{ {
"name": "python", "name": "python",
@ -30,7 +30,13 @@
"path": "demo/formItemWithRangeFields.vue", "path": "demo/formItemWithRangeFields.vue",
"title": "表单一个formItem中校验多个字段", "title": "表单一个formItem中校验多个字段",
"category": "demo", "category": "demo",
"date": "2026-01-16" "date": "2026-01-29"
},
{
"path": "demo/eventListenner/index.vue",
"title": "事件监听器的一些总结",
"category": "demo",
"date": "2026-01-29"
}, },
{ {
"path": "demo/elementPlusMessageBoxUse.vue", "path": "demo/elementPlusMessageBoxUse.vue",
@ -49,12 +55,6 @@
"title": "明明程序报错,但是控制台不打印错误的几种情况(别怀疑,一定是代码问题,而不是程序运行太久)", "title": "明明程序报错,但是控制台不打印错误的几种情况(别怀疑,一定是代码问题,而不是程序运行太久)",
"category": "demo", "category": "demo",
"date": "2025-12-18" "date": "2025-12-18"
},
{
"path": "demo/dsAssign/index.vue",
"title": "解构赋值中设置初始值不成功原值为null的问题",
"category": "demo",
"date": "2025-12-18"
} }
] ]
} }
Loading…
Cancel
Save