sj_tdtybz

松江区农民土地退养补助金发放管理平台

Vue 3.5 + Vite + TypeScript + Element Plus + Less 前端项目。

技术栈

• Vue 3.5
• Vite
• TypeScript
• Element Plus
• Less
• Vue Router（支持嵌套路由）
• Axios（接口请求，含防抖 / 节流封装）

开始使用

npm install
npm run dev

开发默认端口：3001。

联调后端（sj_nmtybt_server）

1. 启动后端：http://localhost:8088/sjnmtybt
2. public/config/config.js 设置 useMock: false（默认已关 mock）
3. Vite 将 /api 代理到 http://localhost:8088/sjnmtybt

详细页面流程与接口对照见：docs/api-integration.md

切回纯前端演示：把 useMock 改回 true。

脚本

• npm run dev — 启动开发服务
• npm run build — 类型检查并构建
• npm run preview — 预览构建产物

目录结构

public/
  assets/bg/background.png # 壳层氛围底图
  config/config.js         # 全局变量配置（含 useMock / apiBase，可部署后直接改）
  data/                    # 静态数据
  js/                      # 静态脚本
docs/
  api-integration.md       # 与 sj_nmtybt_server 联调说明
src/
  api/                     # 业务接口（biz.ts + sjnmtybt 适配层）
  components/common/       # 列表工具条、分页、KPI、左树右表等公共组件
  utils/                   # request / 防抖 / 节流 / appConfig
  layouts/                 # 布局（蓝湖壳：透底侧栏 + 页签贴白卡）
  router/                  # 路由
  styles/                  # Less 全局样式与变量（主色 #2f54eb）
  views/                   # 业务页面

更新记录

2026-10-23 · 蓝湖「基层减负统一风格」视觉改造（P0–P5）

按蓝湖统一风格完成壳层与业务页视觉收口（不改业务逻辑）：

• 壳层（P0）：浅蓝氛围底（public/assets/bg/background.png）、透底侧栏（禁止整列蓝墙，仅选中项主蓝块）、顶栏 Logo+系统名、页签贴白内容卡；浏览器刷新回首页
• 列表页风格 A（P1–P2）：页名大号近黑；ListPageToolbar（关键词 / 查询 / 多条件 / 刷新 + 操作最多 3 个进「…」）；状态分类 Tab；宽表状态与操作列右侧固定；分页右下对齐蓝湖
• 数据展板风格 B（P3）：与列表同白壳；多色渐变 KPI；顶筛发放周期；轻量告警条；图表/待办白卡网格
• 组件与弹层（P4）：弹窗/抽屉白头；图表主色对齐 #2f54eb；办理要点降噪；左树右表容器 SplitPaneCard；白卡左右约 30px 内边距
• 走查收口（P5）：区/镇/村等角色菜单与壳层抽检；页签与白卡贴合；窄屏侧栏收为图标栏；抽屉 append-to-body + 全站 z-index 分层，避免页签盖住侧栏抽屉
• 资源整理：删除未使用的 public/assets/shell/ 调试图，底图迁至 public/assets/bg/