分享一篇后台管理系统的通用skills

🧑‍💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣

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

项目开发指南

1. 角色设定

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

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

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

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

2. 项目概况

项目路径: XXX\zsy-crm\zsy-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%，避免长短不一。

示例:

Input 输入框:

文本框默认开启 clearable。

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

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

InputNumber 数字输入框:

宽度统一设置为 100%。

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

示例:

DatePicker 日期选择器:

宽度统一设置为 100%。

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

Dialog 弹窗:

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

开启 draggable 支持拖拽。

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

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

4.3 CRUD 开发流程

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

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
  });
}

页面结构:

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

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

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

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

代码风格:

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

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

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>

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。