西藏巴青项目

前端设计.md 4.9KB

一、基础信息

1. 项目结构

  • 项目根目录:“huimv-baqing”
  • 前端目录:根目录下的「ruoyi-ui」「ruoyi-ui-screen」「ruoyi-ui-app」文件夹
  • 后端目录:根目录下的除去前端目录的文件夹(我不负责,仅后期联调时需要参考接口)
  • 前端技术栈:「ruoyi-ui」「ruoyi-ui-screen」Vue.js , 「ruoyi-ui-app」uni-app

2. 我的开发身份

  • 我是-初级前端,了解JavaScript、Vue、CSS、HTML,uni-app的专业用法。
  • 核心需求:完成前端页面开发,后期能和后端接口联调(接口联调细节后期补充)。
  • 我需要Cursor像“老师”一样,一步步教我,不要跳步骤、不要用复杂术语。

二、Cursor配合要求

1. 回复风格(重点)

  1. 所有解释用「大白话」,不用专业术语;如果必须用(比如“组件”“接口”“渲染”),一定要用1-2句话简单解释,比如“组件就是页面里的一个模块,像按钮、表格都是组件”。
  2. 给代码时,必须加「详细中文注释」,每一行关键代码都要说明“这行是做什么的”,不要只扔代码让我自己看。
  3. 步骤要清晰,比如“第一步:新建文件,路径是xxx;第二步:复制这段代码;第三步:修改xxx地方”,让我能一步步跟着操作,不遗漏任何环节。
  4. 我问的问题无论多简单(比如“这行代码是什么意思”“文件放哪里”),都要耐心解答,不要敷衍。

2. 开发规范

  1. 所有代码、注释、解释,全部用「中文」,不要出现英文注释(除了代码里的固定语法)。
  2. 新建文件、修改文件时,必须明确告诉我「文件路径」。
  3. 写代码时,尽量简化,不要写复杂逻辑,满足基础功能即可,后期再优化(比如页面先实现“展示内容”,再实现“点击事件”)。
  4. 不需要帮我写或修改后端相关的任何代码,只关注「ruoyi-ui」「ruoyi-ui-screen」「ruoyi-ui-app」文件夹前端内容。
  5. 每个页面都需要有双语汉语和藏文

3 「ruoyi-ui」开发规范

1. 代码风格强制对齐

  • 严格遵循「ruoyi-ui」的 缩进、空格、换行、引号、分号
  • 严格使用「ruoyi-ui」的 变量命名、方法命名、文件命名、文件夹结构
  • 严格复用「ruoyi-ui」已有的:工具函数、axios 封装、公共组件、枚举、常量
  • 禁止引入新项目风格、新语法糖、新封装方式,除非老项目本身在用

2. 文件结构必须对齐

  • .vue 文件结构必须与老项目一致:
    1. template 位置与写法
    2. script 导出结构
    3. style 样式写法、scoped、预处理器
  • 新增页面/组件必须放在「ruoyi-ui」相同路径,不自创目录
  • API 接口文件、hooks、utils 必须沿用「ruoyi-ui」结构

3. 业务逻辑与写法必须对齐

  • 数据请求方式、入参处理、响应处理必须与「ruoyi-ui」一致
  • 表单、表格、弹窗、分页、搜索、权限、路由守卫等完全沿用「ruoyi-ui」写法
  • 禁止使用新的设计模式、新的封装思路
  • 禁止优化、重构、美化老代码,保持兼容与统一

4. 日期范围(统一规范)

凡业务上表示「开始日期~结束日期」的区间(查询条件、表单字段、筛选器等),一律使用 Element UI:

<el-date-picker
  v-model="xxxDateRange"
  type="daterange"
  value-format="yyyy-MM-dd"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  style="width: 100%"
/>

约定:

说明
绑定值 数组 [start, end],如 form.implDateRangevalue-format 固定 yyyy-MM-dd
标签文案 一个字段名即可,如「实施日期」「发放日期」,不要拆成两个表单项「开始日期」「结束日期」
提交接口 仍按后端小驼峰拆成两个字段,如 implStartDateimplEndDate(或 startDateendDate
回显 接口返回起止日时,组装为 [start, end] 再赋给 daterange
列表/详情展示 可格式化为 开始 至 结束(分隔符走 i18n,如 implRangeSeparator
校验 必选时校验数组长度为 2;开始不得晚于结束

参考实现ruoyi-ui/src/views/commonProsperity/project/index.vueimplDateRangeimplStartDate / implEndDate)。

禁止:同一区间用两个 type="date"el-date-picker 分别选开始、结束(旧页面若仍存在,新功能与改版时须改为 daterange)。

5.「ruoyi-ui」Cursor 输出规则

  1. 先看「ruoyi-ui」老代码 → 再生成代码
  2. 给我代码前,必须先说明:
    • 文件路径
    • 模仿了哪个老文件
  3. 代码必须可直接粘贴使用,无语法错误、无风格冲突
  4. 遇到不确定的风格,优先向老代码最近的文件看齐
  5. 接口联调严格使用老代码的 axios 实例与响应规范