快速静态界面 MDC规则约束 示范

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

关于 SafeCapsaulContainer 在往期文章有给出

关于 useNavigate 是二次封装的uni的跳转页面函数，可以不用

如何使用：

• 1、在该文件 摁 ctrl+i 键，呼出cursor，告诉cursor："先阅读一遍内容"。
• 2、然后告诉cursor："基于fasterPageGuide.mdc，为我实现这个页面： https://你的静态界面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  # 子页面生成过程记录
│   │       └── component/  # 子页面私有组件
│   └── fasterStaticPage/  # 静态页面测试入口
└── pages.json          # 路由配置文件

涉及页面图标、图片的文件,都放在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
// 复杂的路由跳转 使用封装好的 useNavigate，useSwitchTab
const handleClickLeft = () => {
    uni.navigateBack()
}


</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. 点击对应按钮进行测试

检查清单

• 页面路由是否正确配置
• SafeTopContainer 是否正确使用
• 样式是否添加 scoped
• 是否使用 SCSS
• 组件是否正确引入
• 页面跳转是否使用规范方法