README.md 1.6 KB

资源登记平台 - 前端

基于 Vue 3 + Vite + Element Plus 的管理后台。

启动步骤

npm install
npm run dev

默认会跑在 http://localhost:5173,并把 /api 开头的请求转发到后端 http://localhost:8080 (见 vite.config.js 的 proxy 配置,如果后端端口不是8080记得改这里)。

目录说明

src/
  api/         所有后端接口封装,按模块拆文件
  layout/      整体布局(侧边栏+顶部栏)
  router/      路由配置,包含登录态校验
  store/       Pinia状态管理(目前只有用户登录态)
  styles/      设计token(配色、字体等CSS变量),在 main.js 里全局引入
  views/
    Login.vue            登录页
    Dashboard.vue         工作台首页
    resource/             资源管理:列表 + 新增/编辑表单
    project/              项目管理:列表 + 详情(含关联资源)
    dict/                 字典管理(资源类型/服务商)
    system/                用户管理、操作日志
    CostStat.vue           费用统计

还需要你确认/补充的点

  • 目前列表页的"关联项目"下拉是一次性拉取所有进行中项目(/project/active-list), 如果项目量级很大(几百上千),建议改成带搜索的远程加载,目前先按常见团队规模(几十到上百个项目)处理。
  • 项目详情页"关联资源"弹窗同理,目前是一次拉1000条资源在前端做过滤,资源量很大时建议改成后端搜索接口。
  • 没有引入图表库(如 ECharts),工作台的类型分布用了简单的CSS横向条形图;如果后续要做更丰富的可视化可以再加。