概述

EBAOZU V4 的管理后台（总后台 view/admin/ 与门店后台 view/store/）基于 Vue 2.6 + Element UI + Vue Router 构建。在进行二次开发时，如果需要新增管理页面，请遵循以下规范。

---

完整开发步骤（以总后台 view/admin 为例）

新建 Vue 视图组件

在 view/admin/src/pages/（或 views/）对应的业务子目录下创建新页面的 .vue 文件。 例如新建租赁合同列表页面：

view/admin/src/pages/order/contractList/index.vue

编写基础组件代码：

<template>
  <div class="contract-list-container">
    <el-card shadow="never">
      <div class="header-title">合同管理列表</div>
      <!-- 业务表格与筛选组件 -->
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ContractList',
  data() {
    return {
      list: [],
      loading: false,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      // 调用 API 请求数据
    }
  }
};
</script>

<style scoped>
.contract-list-container {
  padding: 16px;
}
</style>

---

注册前端路由

打开 view/admin/src/router/modules/ 下对应的业务路由模块文件（例如 order.js），添加路由定义：

{
  path: 'contract_list',
  name: 'ContractList',
  meta: {
    title: '合同管理',
    keepAlive: true,
    auth: ['admin-order-contract-index'], // 关联后台权限标识
  },
  component: () => import('@/pages/order/contractList/index.vue')
}

---

在平台后台添加菜单与权限规则

1. 登录平台总后台 -> 进入【设置】 -> 【系统维护】 -> 【权限规则】（菜单管理）。
2. 在目标父级菜单下点击【添加规则】：
   • 名称：填写菜单显示名称（如“合同管理”）。
   • 路由地址 / 权限标识：填写对应的路由路径与前端 auth 标识（如 order/contract_list）。
   • 类型：选择“菜单”。
3. 保存后，在【身份管理 / 角色管理】中为管理员角色勾选新菜单权限。

---

前端构建与热更新调试

• 本地开发调试：在 view/admin/ 目录下执行 npm run dev，浏览器访问开发环境地址即可实时预览。
• 生产打包发布：执行 npm run build，编译产物将输出至 public/admin/ 目录。