AI+Mcp·快速生成静态界面指南 · MDC规则约束·示范

冰镇生鲜
149 阅读4分钟

本文给出了一个示范例子，用于指导cursor、trae按照规范生成静态界面

文章内涉及的组件和函数：

  • 关于 《SafeCapsaulContainer》 在往期文章有给出： 小程序安全胶囊距离组件

  • 关于 《useNavigate》 是二次封装的uniapp跳转页面工具函数，可以不用，改为原生

如何使用：

  • 1、在该文件 摁 ctrl+i 键，呼出 cursor，告诉cursor：“先阅读一遍内容”。(可以省略，毕竟mdc可以配置各种规则引入方式，比如Auto attached、 Manual...)
  • 2、然后告诉cursor：“基于fasterPageGuide为我实现这个页面： 《填入你的UI设计稿地址》”。
  • 3、你也可以补充更多关键词，例如要求：文件存放路径，文件名，使得生成的代码更加规范。

具体的mdc文件内容 如下：

········分割线········

快速静态界面开发指南

技术栈和规范

核心技术

  • Vue 3
  • uni-app
  • Vite 构建工具
  • Pinia 状态管理
  • wot-design-uni UI组件库
  • 纯 JavaScript。不使用 TypeScript,不允许在
  • 使用 Vue3的组合式API 编写代码, 即在
  • 页面的css, 统一默认单位为px
  • 若涉及图标文件,请在src/static/test文件夹下面创建图标
  • 若涉及图片文件,请使用src/static/test/Doro!_1.jpg替代
  • 若样式使用到padding,请在下一行补充 box-sizing: border-box;

代码规范

  • 文件命名：使用驼峰命名法
  • 组件命名：使用 PascalCase 命名规范
  • 样式编写：必须使用 SCSS + scoped
  • 注释要求：必须为每个主要功能块添加注释
  • 响应式：遵循移动端响应式设计原则

项目结构规范

基础目录结构

src/
├── components/          # 全局通用组件
├── hooks/              # 全局 hooks
├── pages/              # 页面文件
│   ├── 页面目录/
│   │   ├── index.vue   # 页面主文件
│   │   ├── general.md  # 页面生成过程记录
│   │   └── component/  # 页面私有组件
│   │   └── 子页面目录/  # 子页面目录（非tabbar页面）
│   │       ├── index.vue   # 子页面主文件
│   │       ├── general.md  # 子页面生成过程记录，子页面的实现思路
│   │       └── components/  # 子页面私有组件
│   │           ├── Xxx.vue   # 子页面私有组件主文件 使用 PascalCase方式命名，如 `TimePicker.vue`
│   │           └── Xxx.md    # 对应子页面私有组件的使用文档，以标准的组件文档方式编写
│   └── fasterStaticPage/  # 静态页面测试入口
├── pages.json          # 路由配置文件
└── static          # 静态资源文件
    └── test  # 代码生成时，由cursor产生的静态文件，例如 icon、png存放于此
  • 涉及代码生成过程中产生的页面图标、图片...等静态资源文件,都放在src/static/test中,方便我后期自由选择

页面分类规范

  1. 主页面（Tabbar页面）

    • 位置：src/pages/《页面目录》/index.vue
    • 配置：需在 pages.json 中配置为 tabBar

  2. 子页面（非Tabbar页面）

    • 位置：src/pages/《父tabbar》/《子页面》/index.vue
    • 文档：src/pages/《父tabbar》/《子页面》/general.md
    • 组件：src/pages/《父tabbar》/《子页面》/component/

组件规范

  1. 全局组件

    • 位置：src/components
    • 用途：多个页面共用的组件

  2. 页面组件

    • 位置：src/pages/《页面目录》/component/
    • 命名：使用 PascalCase，如 CategoryDropdown.vue

页面开发规范

必要组件

<template>
  <!-- 页面内容容器（必需） -->
  <view class="container">
    <!-- 安全顶部容器（必需，且仅仅闭合包裹导航栏） -->
    <SafeCapsaulContainer :fixed="true"> 
      <!-- 导航栏（可选） -->
      <wd-navbar
        title="页面标题"
        left-text="返回"
        left-arrow
        @click-left="handleClickLeft"
      />
    </SafeCapsaulContainer>
  
    <!-- 页面内容 -->
    <view class="content">
      <!--在这里编写页面主体内容-->
    </view>
  </view>
</template>

必要引入

<script setup> 
// 安全顶部容器组件（必需）
import { SafeCapsaulContainer } from "@/components/SafeCapsaulContainer"
// 页面导航（必需）
import { useNavigate, useSwitchTab } from "@/hooks/useNavigate"

// 简单的返回上一级页面，使用uni.navigateBack
const handleClickLeft = () => {
    uni.navigateBack()
}
    
// 复杂的路由跳转,普通子页面使用封装好的： useNavigate
const jumpXxxPage = () => {
  useNavigate("/pages/Xxx/index",{...params})    
}
// 复杂的路由跳转,tabbar页面使用封装好的： useSwitchTab
const jumpXxxTabbar = () => {
  useSwitchTab("/pages/Xxx/index",{...params})    
}


</script>

样式规范

<style lang="scss" scoped>
// 页面容器（必需）
.container {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box; // 若页面涉及padding，统一在padding后续上：box-sizing: border-box;
  
  // 建议的flex布局（可选）
  display: flex;
  flex-direction: column;
  align-items: center;
}
// 页面内容
.content {
  width: 100%;
  padding: 12px; // (可选，建议用padding去挤占子内容)
  box-sizing: border-box;
}
</style>

页面跳转规范

// Tabbar页面跳转
const switchToTabbar = () => {
  useSwitchTab('/pages/home/index')
}

// 普通页面跳转
const navigate = () => {
  useNavigate('/pages/detail/index')
}

// 常用返回按钮功能
const handleClickLeft = () => {
  uni.navigateBack()
}

新页面创建流程

创建文件结构

  1. 创建页面目录：src/pages/《页面目录》/
  2. 创建主文件：index.vue
  3. 创建文档：general.md
  4. 创建组件目录：component/

配置路由

在 src/pages.json 中添加：

{
  "pages": [
    {
      "path": "pages/fasterStaticPage/index",
      "name": "快速静态界面dev"
    },
    {
      "path": "pages/你的页面目录/index",
      "name": "页面标题"
    }
  ]
}

添加测试入口

在 src/pages/fasterStaticPage/index.vue 中添加：

<button @click="handleClick('/pages/你的页面目录/index')">
  页面名称
</button>

组件库使用规范

优先使用顺序

  1. wot-design-uni 组件库
  2. 项目全局组件
  3. 自定义组件

常用组件示例

<!-- 1. 分割线 -->
<wd-divider color="blue">分割线文本</wd-divider>

<!-- 2. 按钮 -->
<wd-button type="primary">主要按钮</wd-button>

<!-- 3. 单元格 -->
<wd-cell title="标题" value="内容" />

调试和测试

开发调试（由开发作者自己运行）

  1. 启动项目
  2. 访问：/pages/fasterStaticPage/index
  3. 点击对应按钮进行测试

检查清单

  • 页面路由是否正确配置
  • SafeCapsaulContainer 是否正确使用
  • 样式是否添加 scoped
  • 是否使用 SCSS
  • 组件是否正确引入
  • 页面跳转是否使用规范方法
avatar
文章
阅读
粉丝