基于依云项目模板 Mock实践

依云项目模板 Mock 说明

目录

• 概述
• 一、登录/权限 Mock（由 VITE_MOCK_LOGIN 控制）
  • 涉及的改动文件
  • Mock 覆盖的接口
  • 开启 Mock
  • 关闭 Mock
  • 登录后的菜单
  • 实现原理
  • 注意事项
• 二、碳监测页面 Mock（始终生效）
  • 覆盖的页面和文件
  • Mock 能力
  • 实现原理
  • 简短例子
  • 注意事项
• 附件
  • env.local

概述

项目中有两种 Mock 机制：

1. 登录/权限 Mock — 由环境变量 VITE_MOCK_LOGIN 控制，避免依赖后端即可完成登录流程调试
2. 碳监测页面 Mock — 前端内存数据模拟，不受环境变量控制，始终生效

一、登录/权限 Mock（由 VITE_MOCK_LOGIN 控制）

涉及的改动文件

文件	改动说明
.env.local	新增 VITE_MOCK_LOGIN = true 开关
src/api/login/index.ts	login、getInfo、loginOut、getTenantIdByName、getTenantByWebsite 增加 mock 分支
src/api/system/dict/dict.data.ts	getSimpleDictDataList、getDictDataList、createDictData、updateDictData、deleteDictData 增加 mock 分支
src/api/system/dict/dict.type.ts	getDictTypeList、getDictTypeDetail、createDictType、updateDictType、deleteDictType 增加 mock 分支
src/api/system/dict/dict.mock.ts	新增 mock 数据存储 mockDictStore、分页工具 mockPageSlice、过滤工具 mockFilterIncludes

Mock 覆盖的接口

功能	接口	Mock 行为
登录	POST /system/auth/login	任意用户名密码直接返回 token（mock 超级管理员）
获取用户权限	GET /system/auth/get-permission-info	返回 super_admin 角色，*:*:* 全部权限，含完整菜单树
登出	POST /system/auth/logout	直接成功
获取租户 ID	GET /system/tenant/get-id-by-name	返回 1
获取租户信息	GET /system/tenant/get-by-website	返回 { id: 1, name: '默认租户' }
字典类型列表	GET /system/dict-type/page	返回 mock 内存数据（3 条预置类型）
字典数据列表	GET /system/dict-data/page	返回 mock 内存数据（7 条预置数据）
字典数据列表（简化）	GET /system/dict-data/simple-list	返回 mock 内存数据（按 dictType 过滤）
字典类型/数据 CRUD	POST/PUT/DELETE 对应接口	操作 mock 内存数据，刷新页面后恢复初始值

开启 Mock

.env.local 中配置：

VITE_MOCK_LOGIN = true

重启开发服务器：

pnpm dev

打开 http://localhost:8080，任意输入用户名和密码即可登录。

关闭 Mock

将 VITE_MOCK_LOGIN = true 改为 false 或直接删除该行，重启 pnpm dev 即可恢复请求真实后端。

登录后的菜单

Mock 模式下 getInfo 返回完整菜单树：

• 首页 — /index
• 系统管理 — 用户管理（/system/user）、角色管理（/system/role）、字典管理（/system/dict）
• 碳监测 — 管理视图（/carbon/monitor-manage）、计量器具台账（/carbon/meter-ledger）、焦炭台账（/carbon/coke-ledger）、煤炭台账（/carbon/coal-ledger）

使用超管权限 *:*:*，不会触发权限拦截。

实现原理

在每个接口函数内部通过 import.meta.env.VITE_MOCK_LOGIN === 'true' 判断是否走 mock 分支：

const mockLogin = import.meta.env.VITE_MOCK_LOGIN === 'true'

export const login = (data: UserLoginVO) => {
  if (mockLogin) {
    return Promise.resolve({ /* 模拟数据 */ })
  }
  return request.post({ url: '/system/auth/login', data })
}

注意事项

1. Mock 仅在接口调用层做了数据返回，不涉及任何新增依赖
2. 登录后的 token 是固定 mock 值，不会过期
3. 当前 .env.local 中 VITE_MOCK_LOGIN 被注释，.env.dev / .env.test 中设为 false，登录/字典 mock 默认不生效
4. 除 mock 覆盖的接口外，其他接口仍会请求真实后端

二、碳监测页面 Mock（始终生效）

碳监测四个页面的数据操作层直接使用前端内存数据模拟，不受 VITE_MOCK_LOGIN 控制，无论环境变量如何始终生效。

覆盖的页面和文件

页面	Mock 文件	数据
管理视图	src/api/carbon/monitorManage/index.ts	~25 条排放源记录，含关联计量器具
计量器具台账	src/api/carbon/meterLedger/index.ts	~25 条器具记录
煤炭台账	src/api/carbon/coalLedger/index.ts	5 条原始台账 + 3 条汇总 + 3 条修正记录
焦炭台账	src/api/carbon/cokeLedger/index.ts	6 条原始台账 + 3 条汇总记录

Mock 能力

• 查询/筛选/分页 — 基于内存数据做前端过滤和分页
• 新增/编辑/删除 — 操作仅影响当前会话内存数据
• 批量操作 — 批量删除、批量编辑
• CSV 导出 — 基于当前筛选结果生成 CSV 字符串
• 修正确认（煤炭台账） — 修正表行内编辑后确认保存
• 上传日期选择（计量器具台账） — 弹窗选择日期时间后 mock 提示成功
• 重置 — 刷新页面后所有数据恢复初始值

实现原理

每个页面对应的 src/api/carbon/*/index.ts 中使用模块级变量保存数据副本，初始化时 structuredClone 默认数据：

const defaultRecords = [ /* ... */ ]
let records = [...defaultRecords]

const resetData = () => { records = [...defaultRecords] }

所有 API 函数返回 Promise.resolve(...)，不经过 Axios 请求网络。

简短例子

以煤炭台账 src/api/carbon/coalLedger/index.ts 为例，默认 5 条原始台账记录、3 条汇总、3 条修正，查询函数按日期和物料名称过滤后分页返回：

const defaultRawRecords: CoalRawRecord[] = [
  { id: 1, workDate: '2026-06-25', materialName: '无烟煤', openingStock: 2500, dailyInput: 500, /* ... */ },
  { id: 2, workDate: '2026-06-25', materialName: '烟煤', openingStock: 3800, dailyInput: 700, /* ... */ },
]
let rawRecords = [...defaultRawRecords]

export const getCoalRawRecords = async (query: CoalLedgerQuery & PageParam) => {
  const filtered = rawRecords.filter(r => r.materialName.includes(query.materialName ?? ''))
  const pageNo = query.pageNo ?? 1
  const pageSize = query.pageSize ?? 10
  const start = (pageNo - 1) * pageSize
  return { list: filtered.slice(start, start + pageSize), total: filtered.length }
}

页面调用时传参 { materialName: '无烟煤', pageNo: 1, pageSize: 10 }，返回 { list: [...] , total: 1 }，无网络请求。

注意事项

1. 数据仅存在于页面会话期间的内存中，刷新页面后恢复初始值
2. 每个页面独立维护数据，不跨页面联动
3. 管理视图的"关联计量器具"候选项来自计量器具台账的初始化数据快照，运行时新增/编辑不联动
4. 计量器具台账的"上传"仅 mock 提示成功，证书"查看"仅 mock 预览提示，不涉及真实文件操作
5. 导入功能仅做文件选择和格式校验，mock 提示成功，不解析内容

附件

env.local

# 项目启动
VITE_PORT = 80
VITE_BASE_URL=
VITE_API_URL=
VITE_APP_TITLE = xxx系统平台

# 登录
VITE_APP_CAPTCHA_ENABLE = false
## admin
VITE_APP_DEFAULT_LOGIN_USERNAME = admin
VITE_APP_DEFAULT_LOGIN_PASSWORD = admin123
## 普通user
# VITE_APP_DEFAULT_LOGIN_USERNAME = nomalUser
# VITE_APP_DEFAULT_LOGIN_PASSWORD = 1234


# 多租户
VITE_APP_TENANT_ENABLE = true
VITE_APP_DEFAULT_LOGIN_TENANT = 默认租户