# microdata_frontend

**Repository Path**: jmdvirus/microdata_frontend

## Basic Information

- **Project Name**: microdata_frontend
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-02
- **Last Updated**: 2026-10-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MacroData Frontend

宏观数据展示与管理前端 —— 基于 Vite + Vue3 + Element Plus + ECharts。

> 配套文档：[CHANGES.md](./CHANGES.md) 修改记录 ｜ [LESSONS.md](./LESSONS.md) 踩坑与结论（vue-echarts 弃用原因/ECharts 图例 API/Element Plus 日期面板，改代码前先看）

## 环境与启动

- Node.js ≥ 18（当前开发机 v25.5 / npm 11.8）
- npm 源已配置为国内镜像 `https://registry.npmmirror.com`

**方式一（推荐）**：双击 `start.bat`（首次运行会自动安装依赖）；或运行上层目录 `start_all.bat` 一键同时启动前后端

**方式二**：命令行手动启动

```bash
cd frontend
npm install          # 已安装过可跳过
npm run dev          # 开发服务器 http://localhost:5173
npm run build        # 产物输出 dist/
```

开发模式下 `/api` 代理到后端 `http://127.0.0.1:8000`（见 `vite.config.js`），需先启动后端。

## 工程结构

```
frontend/
├── vite.config.js          # @ 别名 + /api 代理
├── index.html
└── src/
    ├── main.js             # 入口：路由 + Element Plus(中文) + 全量图标注册
    ├── App.vue             # 顶部导航（图表展示/数据管理）+ 健康状态标签
    ├── api.js              # axios 封装，全部后端接口
    ├── styles/global.scss  # 全局样式
    └── views/
        ├── Dashboard.vue   # 图表展示页（按分类分组）
        └── Manage.vue      # 数据管理页（查询/新增/改值/删除/补齐区间）
```

## 页面说明

### 图表展示（Dashboard）

- 顶部工具栏：频率切换（日/月/季/年）、起止区间、按名称/code 过滤、刷新
- 图表按 `category` 自动分组，**每行 2 列**（每张半宽），高度固定 300px
- 每张分类卡片右上角三个按钮：
  - **全选 / 清除**：控制该图全部图例系列的显隐（通过 setOption legend.selected 实现）
  - **放大 / 还原**：单独把该图变为整行宽（24/24），高度不变，再点还原
- 图例支持滚动与单项点击切换；dataZoom 支持缩放
- 刷新时会重新拉取 meta（分类/名称变更无需 F5）

### 数据管理（Manage）

- 按指标 code + 起止日期查询明细，分页展示
- 行内"改值"编辑、单条删除、勾选批量删除
- 新增/覆盖一条（弹窗表单，date 支持日/月/季三种形态）
- 补齐区间：按日/月/季频率在区间内生成空骨架（已存在跳过）

## 技术要点

- ECharts 不经过 vue-echarts wrapper，**直接 `echarts.init(div)` 管理实例**（`chartMap`），
  规避 wrapper 的 ref/expose 时序问题；ResizeObserver + window resize 双保险自适应
- 图例全选/清除用 `setOption({legend:[{selected}]})`（ECharts 无 `legendAllUnSelect` action）
- 模板 ref 回调用 Map 缓存保持函数身份稳定，避免重渲染时 dispose/重建图表