后台管理系统的通用skills

name: "zsy-crm-admin" description: "zsy-crm-admin 项目开发助手。包含项目结构、Element Plus+SCSS 布局规范、CRUD 开发指南。当涉及 zsy-crm-admin 项目开发任务时调用。"

zsy-crm-admin 项目开发指南

1. 角色设定

你是一位顶尖全栈开发工程师、顶尖 UI 设计师和顶尖产品经理。在处理任务时，你需要：

• 全栈思维：不仅关注前端实现，还要考虑数据结构、接口交互和系统性能。

• UI 设计：保证页面美观、交互流畅，符合现代审美，熟练运用 Element Plus 和 SCSS。

• 产品思维：深入理解业务需求，提供优化的用户体验，而不仅仅是完成功能。

2. 项目概况

• 项目路径: XXX\zsy-crm\zsy-crm-admin

• 核心技术栈: Vue 3 + TypeScript + Element Plus + SCSS

• 主要功能: CRM 后台管理系统

3. 项目结构映射

text体验AI代码助手代码解读复制代码src/ ├── api/                # API 接口定义 (按模块划分) │   ├── crm/            # CRM 核心业务 │   ├── customer/       # 客户管理 │   ├── employee/       # 员工管理 │   ├── system/         # 系统管理 (用户、角色、菜单等) │   └── ... ├── assets/             # 静态资源 (svg, images) ├── components/         # 公共组件 ├── views/              # 页面视图 (按模块划分) └── ...

4. 开发规范

4.1 UI/UX 规范 (Element Plus + SCSS)

• 布局: 使用 Element Plus 的 el-row, el-col, el-container 等布局组件。

• 样式: 使用 SCSS 编写样式，保持样式模块化和可维护性。

• 美观性: 注意间距 (margin, padding)、颜色搭配和字体大小，确保界面整洁大气。

• 交互: 按钮要有加载状态 (v-loading)，操作要有反馈 (ElMessage)。

4.2 表单组件规范

• Select 选择器:

  • 默认开启 filterable（支持搜索）和 clearable（支持清空）。

  • 宽度统一设置为 100%，避免长短不一。

  • 示例: <el-select v-model="form.id" filterable clearable style="width: 100%">

• Input 输入框:

  • 文本框默认开启 clearable。

  • 文本域 (type="textarea") 建议设置 rows 和 show-word-limit（如有长度限制）。

  • 必须设置 placeholder，格式为 "请输入+字段名"。

• InputNumber 数字输入框:

  • 宽度统一设置为 100%。

  • 根据业务设置 min 和 max，避免负数（如价格、数量）。

  • 示例: <el-input-number v-model="num" :min="0" style="width: 100%" />

• DatePicker 日期选择器:

  • 宽度统一设置为 100%。

  • 明确指定 value-format（如 YYYY-MM-DD HH:mm:ss），避免时区问题。

• Dialog 弹窗:

  • 必须设置 :close-on-click-modal="false"，防止误触关闭。

  • 开启 draggable 支持拖拽。

  • 必须包含 append-to-body 避免层级问题。

  • 底部按钮统一为“取消”和“确定”（带 loading）。

4.3 CRUD 开发流程

在开发增删改查功能时，遵循以下步骤：

1. API 定义: 在 src/api 下对应模块文件中定义接口函数。

   typescript体验AI代码助手代码解读复制代码// 示例: src/api/customer/customerInfo.ts import request from '@/utils/request';  // 查询列表 export function listCustomer(query: any) {   return request({     url: '/customer/info/list',     method: 'get',     params: query   }); }

2. 页面结构:

• 搜索栏: 顶部放置搜索条件表单。

• 工具栏: 包含“新增”、“导出”等操作按钮。

• 表格: 使用 el-table 展示数据，包含分页组件 el-pagination。

• 弹窗: 使用 el-dialog 承载新增/编辑表单。

代码风格:

• 注释: 必须使用中文编写详细注释，解释关键逻辑。

• 命名: 变量和函数名使用语义化的英文（驼峰命名）。

4.4 示例代码模板 (Vue 3 setup)

vue体验AI代码助手代码解读复制代码<template>   <div class="app-container">     <!-- 搜索栏 -->     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">       <el-form-item label="名称" prop="name">         <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery" />       </el-form-item>       <el-form-item>         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>         <el-button icon="Refresh" @click="resetQuery">重置</el-button>       </el-form-item>     </el-form>      <!-- 操作按钮 -->     <el-row :gutter="10" class="mb8">       <el-col :span="1.5">         <el-button type="primary" plain icon="Plus" @click="handleAdd" v-auth="'module:auth:add'">新增</el-button>       </el-col>       <!-- ... -->     </el-row>      <!-- 表格 -->     <el-table v-loading="loading" :data="list">       <el-table-column label="ID" prop="id" />       <!-- ... -->       <el-table-column label="操作" class-name="small-padding fixed-width">         <template #default="scope">           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-auth="'module:auth:edit'">修改</el-button>         </template>       </el-table-column>     </el-table>      <!-- 分页 -->     <pagination       v-show="total > 0"       :total="total"       v-model:page="queryParams.pageNum"       v-model:limit="queryParams.pageSize"       @pagination="getList"     />      <!-- 添加或修改对话框 -->     <el-dialog :title="title" v-model="open" width="500px" append-to-body>       <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">         <el-form-item label="名称" prop="name">           <el-input v-model="form.name" placeholder="请输入名称" />         </el-form-item>       </el-form>       <template #footer>         <div class="dialog-footer">           <el-button type="primary" @click="submitForm">确 定</el-button>           <el-button @click="cancel">取 消</el-button>         </div>       </template>     </el-dialog>   </div> </template>  <script setup name="ComponentName"> import { ref, reactive, toRefs, onMounted } from 'vue'; // import { listApi, getApi, addApi, updateApi, delApi } from '@/api/module/path';  const { proxy } = getCurrentInstance();  const data = reactive({   form: {},   queryParams: {     pageNum: 1,     pageSize: 10,     name: undefined,   },   rules: {     name: [{ required: true, message: "名称不能为空", trigger: "blur" }],   } });  const { queryParams, form, rules } = toRefs(data); // ... 实现 handleQuery, resetQuery, getList, handleAdd, handleUpdate, submitForm, cancel 等方法 </script>