Files

T

jiang f4318a9b9c feat: refine workbench visuals and map controls

Unify the Agent history extension with the header acrylic surface, preserve the full conversation body, and consolidate shared control and status styling.

Restore map flow and SCADA controller behavior, remove obsolete rendering paths, and extend regression coverage. Button press coverage now releases outside the target so state assertions cannot accidentally toggle the control.

2026-07-28 16:39:36 +08:00

3.8 KiB

Raw Permalink Blame History

Next TJWater

Next TJWater 是供水管网 WebGIS Agent 工作台的前端项目。界面以地图为主视图，集成供水管网图层、调度状态、事件处置、Agent 对话和受控前端动作。

项目使用 Vite、React 19、TypeScript 和 Tailwind CSS 4。地图与流向效果基于 MapLibre GL，Agent 消息支持代码高亮、数学公式和 Mermaid 图表。

主要功能

供水管网地图、业务图层和设备状态展示
地图缩放、测量、绘制、图层控制和视图导出
异常工况列表、详情分析和调度任务跟踪
Agent 流式对话、推荐问题、会话管理和权限批准
经过 Schema 校验的 UI Envelope 和前端动作执行
运行时配置注入、MSW 本地模拟和开发面板

开发环境

需要安装 Node.js、Corepack 和 pnpm。项目声明的包管理器版本为 pnpm 11.8.0。

corepack enable
pnpm install
cp .env.example .env.local
pnpm dev

开发服务器默认地址为 http://127.0.0.1:5173。

Agent 服务默认地址为 http://127.0.0.1:8787。需要完整对话能力时，请同时启动对应的 Agent 后端。

运行时配置

浏览器配置通过 /runtime-config.js 注入，不使用 VITE_ 或 NEXT_PUBLIC_ 前缀。可在 .env.local 中设置以下变量：

变量	默认值	说明
`TJWATER_MAPBOX_ACCESS_TOKEN`	空	Mapbox 底图访问令牌
`TJWATER_MAP_URL`	`https://geoserver.waternetwork.cn/geoserver`	GeoServer 服务地址
`TJWATER_GEOSERVER_WORKSPACE`	`tjwater`	GeoServer 工作区
`TJWATER_AGENT_API_BASE_URL`	`http://127.0.0.1:8787`	浏览器访问的 Agent API 地址
`TJWATER_ENABLE_DEV_PANEL`	`false`	是否显示开发面板
`TJWATER_ENABLE_MSW`	`false`	是否启用浏览器端 Mock Service Worker

.env.local 已被 Git 忽略，请勿提交令牌或生产环境配置。

Agent 请求由浏览器直接访问 TJWATER_AGENT_API_BASE_URL，部署环境需要为前端来源配置 CORS。语音播放始终请求同源 /api/tts/edge；开发和预览由 Vite 中间件处理，生产镜像会启动仅监听容器回环地址的 Edge TTS 适配器。无需配置 TTS 服务 URL，可选的服务端变量 EDGE_TTS_VOICE 用于覆盖默认中文语音。

常用命令

pnpm dev          # 启动开发服务器
pnpm build        # 类型检查并生成生产构建
pnpm preview      # 预览生产构建
pnpm typecheck    # 运行 TypeScript 检查
pnpm lint         # 运行 ESLint
pnpm format       # 使用 Prettier 格式化文件
pnpm test         # 运行 Vitest 单元测试
pnpm test:watch   # 监听模式运行单元测试
pnpm test:browser # 运行 Playwright 浏览器测试

Docker

生产镜像使用 Node.js 构建静态文件，并通过 Caddy 提供服务。容器启动时会根据环境变量生成 /runtime-config.js，同时启动 Edge TTS 适配器。

docker build -t next-tjwater .
docker run --rm -p 8080:80 --env-file .env.local next-tjwater

启动后访问 http://localhost:8080。

项目结构

src/
├── app/                 应用入口、Provider 和浏览器回归测试
├── features/
│   ├── agent/           Agent 协议、会话、动作执行和界面组件
│   ├── map/             地图核心控件
│   └── workbench/       调度工作台、业务面板和地图编排
├── mocks/               MSW handlers 和测试数据
├── shared/              通用 UI、AI 元素、配置和工具
├── test/                Vitest 测试环境
└── styles.css           Tailwind CSS 入口和全局样式

构建说明

生产构建可能提示 Shiki、Mermaid 语言包超过 Rollup 默认的 500 kB 阈值。当前构建和浏览器测试可以正常完成，这些提示不影响产物生成。

3.8 KiB Raw Permalink Blame History