分享一篇后台管理系统的通用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. 项目概况

• 项目路径: XXXzsy-crmzsy-crm-admin
• 核心技术栈: Vue 3 + TypeScript + Element Plus + SCSS
• 主要功能: CRM 后台管理系统

3. 项目结构映射

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 下对应模块文件中定义接口函数。

   // 示例: 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 承载新增/编辑表单。

3. 代码风格:

   • 注释: 必须使用中文编写详细注释，解释关键逻辑。
   • 命名: 变量和函数名使用语义化的英文（驼峰命名）。

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

<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" align="center" prop="id" />
      <!-- ... -->
      <el-table-column label="操作" align="center" 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>