OrgTJWater/TJWaterFrontend_Refine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: OrgTJWater/TJWaterFrontend_Refine:v2026.08.17.4
Branches Tags
OrgTJWater/TJWaterFrontend_Refine:master OrgTJWater/TJWaterFrontend_Refine:refactor/tjwater-next-integration
OrgTJWater/TJWaterFrontend_Refine:v2026.09.14.2 OrgTJWater/TJWaterFrontend_Refine:v2026.09.14.1 OrgTJWater/TJWaterFrontend_Refine:v2026.09.11.1 OrgTJWater/TJWaterFrontend_Refine:v2026.09.09.2 OrgTJWater/TJWaterFrontend_Refine:v2026.09.09.1 OrgTJWater/TJWaterFrontend_Refine:v2026.08.26.1 OrgTJWater/TJWaterFrontend_Refine:v2026.08.17.4 OrgTJWater/TJWaterFrontend_Refine:v2026.08.11.5 OrgTJWater/TJWaterFrontend_Refine:v2026.08.11.4 OrgTJWater/TJWaterFrontend_Refine:v2026.08.11.3 OrgTJWater/TJWaterFrontend_Refine:v2026.08.11.2 OrgTJWater/TJWaterFrontend_Refine:v2026.08.11.1 OrgTJWater/TJWaterFrontend_Refine:latest
..
compare: OrgTJWater/TJWaterFrontend_Refine:v2026.08.11.3
Branches Tags
OrgTJWater/TJWaterFrontend_Refine:refactor/tjwater-next-integration OrgTJWater/TJWaterFrontend_Refine:master
OrgTJWater/TJWaterFrontend_Refine:v2026.09.14.2 OrgTJWater/TJWaterFrontend_Refine:v2026.09.14.1 OrgTJWater/TJWaterFrontend_Refine:v2026.09.11.1 OrgTJWater/TJWaterFrontend_Refine:v2026.09.09.2 OrgTJWater/TJWaterFrontend_Refine:v2026.09.09.1 OrgTJWater/TJWaterFrontend_Refine:v2026.08.26.1 OrgTJWater/TJWaterFrontend_Refine:v2026.08.17.4 OrgTJWater/TJWaterFrontend_Refine:v2026.08.11.5 OrgTJWater/TJWaterFrontend_Refine:v2026.08.11.4 OrgTJWater/TJWaterFrontend_Refine:v2026.08.11.3 OrgTJWater/TJWaterFrontend_Refine:v2026.08.11.2 OrgTJWater/TJWaterFrontend_Refine:v2026.08.11.1 OrgTJWater/TJWaterFrontend_Refine:latest
1 Commits
v2026.08.17.4 .. v2026.08.11.3
Author SHA1 Message Date
TJWater CI ab45c8da8e ci: add frontend v2 deployment workflow
Generic Container CI/CD / test-build-publish (push) Failing after 1m13s
Details
Frontend CI/CD v2 / build-test-publish-and-deploy (push) Failing after 1m14s
Details
2026-08-11 09:51:13 +08:00
295 changed files with 13136 additions and 150588 deletions
Expand all files Collapse all files
.dockerignore
+5 -10
View File
@@ -1,12 +1,7 @@
node_modules
.next
out
build
**/node_modules/
**/dist
.git
npm-debug.log
.coverage
.coverage.*
.env
.env.*
.env*.local
README.md
docker-compose.yml
Dockerfile
.dockerignore
.env.example
-14
View File
@@ -1,14 +0,0 @@
KEYCLOAK_CLIENT_ID="tjwater"
KEYCLOAK_CLIENT_SECRET="replace-with-keycloak-client-secret"
KEYCLOAK_ISSUER="https://keycloak.example.com/realms/tjwater"
NEXTAUTH_SECRET="replace-with-nextauth-secret"
NEXTAUTH_URL="https://frontend.example.com/"
BACKEND_URL="https://server.example.com"
AGENT_URL="https://agent.example.com"
MAP_URL="https://geoserver.example.com/geoserver"
MAP_WORKSPACE="tjwater"
MAP_EXTENT="13490131,3630016,13525879,3666968.25"
NETWORK_NAME="tjwater"
MAPBOX_TOKEN="replace-with-public-mapbox-token"
TIANDITU_TOKEN="replace-with-public-tianditu-token"
.eslintrc.json
+3
View File
@@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}
.gitignore
+2 -7
View File
@@ -19,7 +19,6 @@
# misc
.DS_Store
*.pem
/public/runtime-config.js
# debug
npm-debug.log*
@@ -27,15 +26,11 @@ yarn-debug.log*
yarn-error.log*
# local env files
.env
.env.*
!.env.example
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
memery.md
docs/
AGENTS.md
-41
View File
@@ -1,41 +0,0 @@
# Repository Guidelines
## Project Structure & Module Organization
This repository is the TJWater web frontend built with Refine, Next.js, React, and MUI. Application source lives under the existing Next.js project folders. Reuse established page, component, provider, map, and chat patterns instead of adding parallel structures. Static assets and public files should remain in the existing asset/public locations. Build output (`.next/`), dependency folders, and local caches are generated and must not be edited by hand.
Deployment files are `Dockerfile`, `docker-compose.yml`, and `.gitea/workflows/package.yml`.
## Build, Test, and Development Commands
Use npm and Node 20 or newer:
```bash
npm install
npm run dev
npm run lint
npm test
npm run test:coverage
npm run build
npm run start
```
`npm run dev` starts the Refine/Next development server. `npm run lint` runs ESLint. `npm test` runs Jest. `npm run build` creates the production build.
## Coding Style & Naming Conventions
Use TypeScript and React function components. Follow ESLint and Next.js conventions. Use `PascalCase` for React component files and component names. Use `camelCase` for ordinary TypeScript modules, hooks, stores, providers, utilities, variables, and functions. Next.js route directories under `src/app` use `kebab-case`; route groups and dynamic segments keep the Next.js syntax such as `(main)` and `[...nextauth]`. Keep backend/Agent boundary fields and query parameters in the shape required by the API, typically `snake_case`, and do not translate third-party SDK fields. Prefer MUI components and existing design tokens/patterns for UI. Keep operational screens dense, clear, and task-focused.
## Testing Guidelines
Tests use Jest with React Testing Library. Name tests `*.test.ts` or `*.test.tsx` near the related code when possible. Add tests for user-visible behavior, state transitions, route guards, data transforms, and map/chat interactions. Run `npm test` or `npm run test:coverage` before larger PRs.
## Commit & Pull Request Guidelines
History uses Conventional Commit messages such as `feat(map): add coordinate zoom action` and `fix(chat): hide raw permission metadata`, with occasional Chinese summaries. Prefer `feat(scope):`, `fix(scope):`, or `refactor(scope):`.
PRs should include a UI/behavior summary, verification commands, screenshots for visual changes, and notes for changed environment variables or backend API expectations.
## Security & Configuration Tips
Do not commit `.env`, `.next/`, `node_modules/`, local caches, or private map/API tokens. Public build-time variables should be documented; sensitive values belong in Gitea secrets.
Dockerfile
+12 -18
View File
@@ -1,17 +1,14 @@
FROM node:22.23.1-bookworm-slim AS base
WORKDIR /app/refine
ARG NPM_CONFIG_REGISTRY
ENV NPM_CONFIG_REGISTRY=${NPM_CONFIG_REGISTRY}
FROM refinedev/node:18 AS base
FROM base AS deps
RUN apk add --no-cache libc6-compat
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
RUN \
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
elif [ -f package-lock.json ]; then npm ci || (echo "===== npm debug logs =====" && find /root/.npm/_logs -maxdepth 1 -type f -name "*-debug-0.log" -print -exec cat {} \; && exit 1); \
elif [ -f package-lock.json ]; then npm ci; \
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
else echo "Lockfile not found." && exit 1; \
fi
@@ -26,24 +23,21 @@ RUN npm run build
FROM base AS runner
ENV NODE_ENV=production
ENV NODE_ENV production
COPY --from=builder --chown=node:node /app/refine/public ./public
COPY --chown=node:node docker/entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
COPY --from=builder /app/refine/public ./public
RUN mkdir .next
RUN chown node:node .next
RUN chown refine:nodejs .next
COPY --from=builder --chown=node:node /app/refine/.next/standalone ./
COPY --from=builder --chown=node:node /app/refine/.next/static ./.next/static
COPY --from=builder --chown=refine:nodejs /app/refine/.next/standalone ./
COPY --from=builder --chown=refine:nodejs /app/refine/.next/static ./.next/static
USER node
USER refine
EXPOSE 3000
ENV PORT=3000
ENV HOSTNAME="0.0.0.0"
ENV PORT 3000
ENV HOSTNAME "0.0.0.0"
ENTRYPOINT ["/entrypoint.sh"]
CMD ["node", "server.js"]
FRONTEND_NAMING_AUDIT.md
-56
View File
@@ -1,56 +0,0 @@
# Frontend Naming Audit
DOC-004 audit for the internal `TJWaterFrontend_Refine` application.
## Local frontend naming
- Next.js route directories under `src/app` are already `kebab-case`: `audit-logs`, `health-risk-analysis`, `hydraulic-simulation`, `monitoring-place-optimization`, `network-simulation`, `scada-data-cleaning`, and `system-admin`.
- Route groups and dynamic segments keep Next.js syntax: `(main)` and `[...nextauth]`.
- Local ordinary module filenames now use `camelCase`, including `src/utils/breaksClassification.ts`, `src/components/chat/globalChatboxUtils.ts`, and `src/components/chat/globalChatboxVoice.ts`.
- React component files remain `PascalCase.tsx`, including `src/app/RefineContext.tsx`, `src/components/chat/GlobalChatboxParts.tsx`, and domain directories under `src/components/olmap`.
## API boundary naming
Frontend request and response boundary fields intentionally keep backend/Agent wire names. Examples include `project_id`, `user_id`, `scheme_name`, `scheme_type`, `start_time`, `end_time`, `session_id`, `request_id`, and `keep_message_count`.
Current direct API calls mostly use new `kebab-case` URL paths, including:
- `/api/v1/admin/projects`
- `/api/v1/audit/logs`
- `/api/v1/projects/open`
- `/api/v1/project-info`
- `/api/v1/schemes`
- `/api/v1/sensor-placement-schemes`
- `/api/v1/burst-analysis`
- `/api/v1/valve-isolation-analysis`
- `/api/v1/flushing-analysis`
- `/api/v1/contaminant-simulation`
- `/api/v1/simulations/run-by-date`
- `/api/v1/burst-detection/detect`
- `/api/v1/burst-location/locate`
- `/api/v1/scada/by-ids-field-time-range`
- `/api/v1/composite/clean-scada`
- `/api/v1/agent/chat/render-ref/{render_ref}`
## Legacy URL inventory
The frontend no longer calls these active legacy URLs directly. The backend still exposes them as deprecated compatibility aliases:
| Current frontend URL | Files | Suggested target |
| --- | --- | --- |
| `/api/v1/openproject/` | `src/contexts/ProjectContext.tsx` | `/api/v1/projects/open` or `/api/v1/project/open` |
| `/api/v1/project_info/` | `src/contexts/ProjectContext.tsx` | `/api/v1/project-info` |
| `/api/v1/getallschemes/` | burst, burst simulation, contaminant, flushing scheme query components | `/api/v1/schemes` |
| `/api/v1/getallsensorplacements/` | `src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx` | `/api/v1/sensor-placement-schemes` |
| `/api/v1/sensorplacementscheme/create` | `src/components/olmap/MonitoringPlaceOptimization/OptimizationParameters.tsx` | `/api/v1/sensor-placement-schemes` |
| `/api/v1/burst_analysis/` | `src/components/olmap/BurstSimulation/AnalysisParameters.tsx` | `/api/v1/burst-analysis` |
| `/api/v1/valve_isolation_analysis/` | `src/components/olmap/BurstSimulation/ValveIsolation.tsx` | `/api/v1/valve-isolation-analysis` |
| `/api/v1/flushing_analysis/` | `src/components/olmap/FlushingAnalysis/AnalysisParameters.tsx` | `/api/v1/flushing-analysis` |
| `/api/v1/contaminant_simulation/` | `src/components/olmap/ContaminantSimulation/AnalysisParameters.tsx` | `/api/v1/contaminant-simulation` |
| `/api/v1/runsimulationmanuallybydate/` | `src/components/olmap/core/Controls/Timeline.tsx` | `/api/v1/simulations/run-by-date` |
Already migrated frontend code leaves comments showing older pre-`/api/v1` URLs in `src/components/olmap/core/Controls/Toolbar.tsx`; those comments are historical only and are not active calls.
## Follow-up
Continue tracking broad passive legacy backend routes under the shared legacy API compatibility strategy.
README.MD
+25 -68
View File
@@ -1,91 +1,48 @@
# TJWaterFrontend_Refine 内部前端
# my-refine-app
`TJWaterFrontend_Refine` 是 TJWater 内部 Web 前端，基于 Refine、Next.js、React 和 MUI 构建。它承载管网地图、业务管理、用户认证、智能体聊天、SCADA/历史数据查看和结果可视化等内部功能。
<div align="center" style="margin: 30px;">
<a href="https://refine.dev">
<img alt="refine logo" src="https://refine.ams3.cdn.digitaloceanspaces.com/readme/refine-readme-banner.png">
</a>
</div>
<br/>
## 技术栈
This [Refine](https://github.com/refinedev/refine) project was generated with [create refine-app](https://github.com/refinedev/refine/tree/master/packages/create-refine-app).
- Next.js 16
- React 19
- Refine 5
- MUI 6 / MUI X
- OpenLayers、deck.gl、Turf
- Zustand、NextAuth、Jest
## Getting Started
## 目录结构
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility ✨
```text
src/app/ Next.js App Router 页面
src/components/ 复用 UI 组件
src/providers/ Refine、认证、数据和主题 provider
src/hooks/ 业务 hooks
src/utils/ 通用工具
public/ 静态资源
scripts/ 运行时配置和辅助脚本
Dockerfile 镜像构建文件
docker-compose.yml 本地编排参考
```
Refine's hooks and components simplifies the development process and eliminates the repetitive tasks by providing industry-standard solutions for crucial aspects of a project, including authentication, access control, routing, networking, state management, and i18n.
新增功能应复用现有页面、组件、provider、地图和聊天结构，避免创建平行体系。
## Available Scripts
## 本地开发
要求 Node.js 20 或更高版本：
### Running the development server.
```bash
npm install
npm run dev
npm run dev
```
`npm run dev` 会先执行运行时配置生成，再启动 Next.js 开发服务。
## 常用命令
### Building for production.
```bash
npm run lint
npm test
npm run test:coverage
npm run build
npm run start
docker build -t tjwater-frontend:local .
npm run build
```
- `npm run lint`：运行 ESLint。
- `npm test`：运行 Jest。
- `npm run test:coverage`：生成测试覆盖率。
- `npm run build`：生成生产构建。
- `npm run start`：启动生产模式服务。
## 配置说明
运行时配置由 `scripts/generate-runtime-config.mjs` 生成。API 地址、Agent 地址、Keycloak/认证参数、地图服务地址和其他环境差异配置应通过环境变量或部署配置注入。
只有允许暴露给浏览器的配置才应进入 public/runtime 配置；密钥和私有 token 不能进入前端构建产物。
## 开发规范
- React 组件文件使用 `PascalCase.tsx`。
- 普通 TypeScript 模块、hooks、store、provider 和工具使用 `camelCase.ts`。
- `src/app` 路由目录使用 `kebab-case`，保留 Next.js 路由组和动态段语法。
- UI 优先沿用 MUI、Refine 和既有地图/聊天界面模式。
- 与后端或 Agent 通信的字段保持接口原始格式，通常为 `snake_case`。
## 测试与发布
提交前建议运行：
### Running the production server.
```bash
npm run lint
npm test
npm run start
```
发布镜像前运行：
## Learn More
```bash
npm run build
```
To learn more about **Refine**, please check out the [Documentation](https://refine.dev/docs)
Gitea 包工作流位于 `.gitea/workflows/package.yml`，通常由 tag 触发构建和推送镜像。
- **REST Data Provider** [Docs](https://refine.dev/docs/core/providers/data-provider/#overview)
- **Material UI** [Docs](https://refine.dev/docs/ui-frameworks/mui/tutorial/)
- **Custom Auth Provider** [Docs](https://refine.dev/docs/core/providers/auth-provider/)
## 安全规则
## License
不要提交 `.env`、`.next/`、`node_modules/`、本地缓存、私有地图/API token、客户数据或部署密钥。CI/CD 凭据应放在 Gitea secrets 中。
MIT
contracts/agent-v1.openapi.json
-2150
View File
File diff suppressed because it is too large Load Diff
contracts/manifest.json
-9
View File
@@ -1,9 +0,0 @@
{
"contract_version": "1.0.0",
"contracts": {
"agent": {
"file": "agent-v1.openapi.json",
"sha256": "94bd8914597c56b6429160e8c556993ac0617ad079de2980a4b6cb9fdf89c039"
}
}
}
contracts/server-v1.openapi.json
-51521
View File
File diff suppressed because it is too large Load Diff
docker-compose.yml
-29
View File
@@ -1,29 +0,0 @@
version: "3.9"
services:
frontend:
image: ${IMAGE_NAME:-refinedev/tjwater-frontend:latest}
build:
context: .
dockerfile: Dockerfile
environment:
BACKEND_URL: ${BACKEND_URL}
AGENT_URL: ${AGENT_URL}
MAP_URL: ${MAP_URL}
MAP_WORKSPACE: ${MAP_WORKSPACE}
MAP_EXTENT: ${MAP_EXTENT}
NETWORK_NAME: ${NETWORK_NAME}
MAPBOX_TOKEN: ${MAPBOX_TOKEN}
TIANDITU_TOKEN: ${TIANDITU_TOKEN}
KEYCLOAK_CLIENT_ID: ${KEYCLOAK_CLIENT_ID}
KEYCLOAK_CLIENT_SECRET: ${KEYCLOAK_CLIENT_SECRET}
KEYCLOAK_ISSUER: ${KEYCLOAK_ISSUER}
NEXTAUTH_SECRET: ${NEXTAUTH_SECRET}
NEXTAUTH_URL: ${NEXTAUTH_URL}
NODE_ENV: production
HOSTNAME: 0.0.0.0
PORT: 3000
ports:
- "3000:3000"
restart: unless-stopped
pull_policy: always
docker/entrypoint.sh
-35
View File
@@ -1,35 +0,0 @@
#!/bin/sh
set -eu
node <<'NODE'
const fs = require("fs");
const parseExtent = (value) => {
if (!value) {
return [13508849, 3608036, 13555781, 3633813];
}
const extent = value.split(",").map(Number);
return extent.length === 4 && extent.every(Number.isFinite)
? extent
: [13508849, 3608036, 13555781, 3633813];
};
const config = {
BACKEND_URL: process.env.BACKEND_URL || "http://127.0.0.1:8000",
AGENT_URL: process.env.AGENT_URL || "http://127.0.0.1:8788",
MAP_URL: process.env.MAP_URL || "http://127.0.0.1:8080/geoserver",
MAP_WORKSPACE: process.env.MAP_WORKSPACE || "tjwater",
MAP_EXTENT: parseExtent(process.env.MAP_EXTENT),
NETWORK_NAME: process.env.NETWORK_NAME || "tjwater",
MAPBOX_TOKEN: process.env.MAPBOX_TOKEN || "",
TIANDITU_TOKEN: process.env.TIANDITU_TOKEN || "",
};
fs.writeFileSync(
"/app/refine/public/runtime-config.js",
`window.__TJWATER_RUNTIME_CONFIG__ = ${JSON.stringify(config)};\n`,
);
NODE
exec "$@"
docs/chat-streaming-animation-notes.md
-167
View File
@@ -1,167 +0,0 @@
# Chat 流式生成动画改造经验
本文记录 `src/components/chat` 里本次文字生成、图表生成、滚动稳定性的改造经验。重点不是复盘代码行数，而是总结后续继续调整时应遵守的工程边界和交互原则。
## 目标
- 文本生成要有连续感，避免 token 直接到达导致忽快忽慢。
- 已生成内容必须稳定，不能反复淡入、重排或闪烁。
- 图表和工具调用插入时不能让“分析结果”边框剧烈抖动。
- 底部自动滚动要跟随，但不能每个 token 都强制贴底。
- 动画应辅助理解，不能比内容本身更抢眼。
## 文本流式生成
### 经验结论
不要把后端 token 到达节奏直接暴露给 UI。后端 token 通常不均匀，前端如果每个 token 都立即渲染，会出现文字跳动、滚动频繁、动画看不出来等问题。
更稳的做法是类似 Vercel AI SDK `smoothStream` 的思路：
- token 先进入缓冲区。
- 前端按固定节奏释放 chunk。
- chunk 尽量按词、短语、标点边界切分。
- 当缓冲积压较大时，自适应加快 drain，避免显示落后真实输出太多。
当前实现采用：
- `TOKEN_PLAYBACK_INTERVAL_MS = 16`
- 小缓冲按较短 chunk 输出。
- 大缓冲最多每帧释放 `160` 字符。
- 中文优先使用 `Intl.Segmenter("zh", { granularity: "word" })`。
- 非 token 事件前强制 flush，保证工具调用、done、error 的顺序正确。
### 踩坑
- 只做 `setTimeout(120ms)` 批量 flush 不够。它只是减少更新次数，并不能形成稳定播放节奏。
- interval 太小，例如 `8ms`，浏览器调度不一定更稳定，反而可能增加 React 更新压力。
- 中文按 `Intl.Segmenter` 的单个词输出会显得慢，必须结合缓冲长度动态放大 chunk。
- `done`、`error`、`tool_call` 前如果不 flush，会造成文本和结构事件顺序错乱。
## Markdown 动画
### 经验结论
Markdown 是流式文本动画里最容易出问题的部分。原因是 `ReactMarkdown` 每次都会重新解析完整内容，原始 Markdown 字符索引和最终 DOM 文本节点索引不一致。
典型例子：
- `**加粗**` 的原始长度包含 `**`，但可见文本不包含。
- 列表符号、链接语法、代码块围栏都可能影响原始索引。
- 新增文本可能落在 `p`、`li`、`strong`、`code` 等不同节点里。
因此不要简单用原始 `text.length` 或 `fadeFrom` 去对应 Markdown 渲染后的 DOM 文本。
当前策略：
- Markdown 仍完整解析，保证格式正确。
- 在 rehype 阶段处理 AST。
- 从 AST 尾部反向找最后的可见 text node。
- 只给最后一段尾部文本加动画。
- 每次最多动画最后 `48` 个字符，避免大 chunk 整段闪烁。
### 踩坑
- 用 `text.length` 作为 React key 会导致整段 Markdown remount，所有文本都会重新淡入。
- CSS animation 和 Web Animations 同时作用在同一个 span 上，会出现闪烁或动画重启。
- 在 render 阶段读写 ref 会触发 React hooks lint 规则，也容易产生不可控渲染。
- 反向遍历 AST 时拆分 text node 要注意顺序。使用 `unshift` 时应先插入动画尾巴，再插入稳定文本，最终 DOM 才是“稳定文本在前，动画尾巴在后”。
## 当前文字动画建议
推荐保留轻量动画：
- 使用 Web Animations，在 `useLayoutEffect` 中启动，避免先完整显示一帧再裁切。
- 使用 `clip-path` 做左到右 reveal。
- 叠加轻微 opacity：当前约 `0.46 -> 1`。
- 时长控制在 `120ms - 260ms`。
不要做：
- 外层整段 `motion.div` 淡入。
- 每次流式更新都改变 key。
- 对整个 Markdown AST 的新增范围大面积包 span。
- 在生成中对已有文本重复动画。
## 滚动和边框稳定
### 经验结论
滚动条在最底部时，内容增长会不断改变 `scrollTop`。如果每个 token 都执行 `scrollTop = scrollHeight` 或 `scrollIntoView`，最后一个 assistant turn 的边框会产生明显抖动。
当前策略：
- 生成中不再每个 token 精确贴底。
- 底部保留生成缓冲区，当前约 `180px`。
- 只有缓冲被消耗到阈值后才恢复滚动。
- 用户离开底部附近后，不再强制自动跟随。
- 使用 `scrollbar-gutter: stable` 减少滚动条出现/消失造成的宽度变化。
### 踩坑
- “锁最大高度”不是正确方向。问题不是高度无限增长，而是底部锚定过于频繁。
- 每 token 自动滚动会把视口不断向下推，视觉上就是边框抖动。
- 滚动判断阈值要和底部缓冲一致，否则缓冲刚出现就被判断为“离开底部”。
## 图表生成
### 经验结论
图表不能等数据到达后突然插入。图表生成应先占位，再 crossfade，再让图表内部动画接管。
当前策略：
- 工具调用 pending 时使用固定尺寸 `ChartGenerationSkeleton`。
- 图表真实数据到达后，继续短暂保留 skeleton overlay。
- ECharts 在 skeleton 下方淡入。
- 容器尺寸保持一致，避免边框高度突变。
- ECharts 内部使用 enter/update 动画，而不是外层布局动画。
图表类型动画建议：
- 折线图：平滑 enter，面积渐显。
- 柱状图：柱子从基线增长，并对数据点轻微 stagger。
- 饼图：使用 expansion/sweep 类进入动画。
- update 动画要短于 enter 动画。
### 踩坑
- 只给外层图表卡片 fade in 不够，插入瞬间仍可能造成内容跳变。
- skeleton 和最终图表尺寸不一致，会导致边框先长再缩。
- 图表更新时不要重建组件，尽量让 ECharts diff 数据并执行内部 transition。
## 状态提示
“正在生成”状态是有价值的，应该保留。它承担了部分动感和系统状态反馈，不需要让文本动画本身过于夸张。
推荐：
- 状态放在“分析结果”标题行右侧。
- 使用小尺寸、低干扰的 pulsing dots。
- 不使用末尾光标，避免和业务文本混在一起。
## 验证建议
每次调整流式动画后至少跑：
```bash
npx eslint src/components/chat/AgentMarkdownBlock.tsx src/components/chat/AgentTurn.tsx src/components/chat/ChatInlineChart.tsx src/components/chat/AgentWorkspace.tsx src/components/chat/GlobalChatbox.tsx src/components/chat/hooks/useAgentChatSession.ts
npx tsc --noEmit
npm test -- src/components/chat/hooks/useAgentChatSession.lifecycle.test.tsx src/components/chat/hooks/useAgentChatSession.actions.test.tsx src/components/chat/AgentWorkspace.test.tsx src/components/chat/ChatInlineChart.test.ts --runInBand
```
人工验证重点：
- 长中文回答是否明显落后后端真实速度。
- Markdown 加粗、列表、代码块是否乱序。
- 底部自动滚动时“分析结果”边框是否抖动。
- 工具调用 pending 到图表出现时是否有高度跳变。
- 用户手动上滚后是否停止强制跟随。
## 后续调整原则
1. 先调节 token playback，再调动画。
2. 动画只作用于新增内容，已有内容不能重播。
3. Markdown 动画优先保守，宁可弱一点，也不能破坏文本顺序。
4. 图表和工具调用先稳定布局，再考虑视觉效果。
5. 滚动跟随要有缓冲，不能逐 token 贴底。
eslint.config.mjs
-5
View File
@@ -1,5 +0,0 @@
import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
const config = [...nextCoreWebVitals];
export default config;
memery.md
-22
View File
@@ -1,22 +0,0 @@
# CI build notes
## 2026-04-24
- **Observed failure while reproducing workflow checkout locally:** the `Checkout code` step ran `git remote add origin ...` unconditionally. In a workspace that already had an `origin` remote, the job failed with `error: remote origin already exists.` and exited before `docker build`.
- **Why this matters for act_runner:** self-hosted Gitea runners can reuse working directories or start from repositories that already contain Git metadata, so checkout logic must be idempotent.
- **Applied fix:** changed `.gitea/workflows/package.yml` to initialize Git only when needed, use `git remote set-url origin ...` when `origin` already exists, and force-clean the workspace after checking out `FETCH_HEAD`.
- **Safety improvement for remote validation:** tags ending with `-test` now run the build verification path only. They skip registry login, image push, `latest` updates, and the deploy webhook so act_runner can be tested without deployment side effects.
- **Root cause found on the real act_runner:** although the runner was registered with `ubuntu:docker://gitea/runner-images:ubuntu-22.04`, the workflow used `runs-on: ubuntu`, and the job log showed `Start image=ubuntu:latest`. That default image does not include the expected toolset, which explains the remote `git: not found` failure.
- **Applied fix for label selection:** changed both jobs to `runs-on: "ubuntu:docker://gitea/runner-images:ubuntu-22.04"` so Gitea resolves the exact runner image instead of falling back to `ubuntu:latest`.
- **Follow-up from server validation:** Gitea then reported `No matching online runner with label: ubuntu:docker://gitea/runner-images:ubuntu-22.04`. The runner advertises the short label `ubuntu-22.04`, so the workflow was updated again to use `runs-on: ubuntu-22.04`, which should map to `docker://gitea/runner-images:ubuntu-22.04` on the runner side.
- **Next remote failure on act_runner:** Docker rejected the tag `gitea.waternetwork.cn/OrgTJWater/TJWaterFrontend_Refine:v2026.04.24-test3` with `repository name must be lowercase`. The workflow had normalized the registry host but not the repository path from `github.repository`.
- **Applied fix for image naming:** lowercased `REPOSITORY_PATH` during image metadata normalization so image tags remain valid even when the Gitea owner or repository name contains uppercase letters.
- **Latest remote failure on act_runner:** a `*-test` run still reached `Notify Deploy Server` and failed with `curl: (3) URL using bad/illegal format or missing URL`. That showed the shell-level `IS_TEST_TAG` guard was not reliable enough for cross-step skip control on this runner.
- **Applied fix for test-tag skipping:** moved registry login and deploy webhook skipping to workflow-level `if:` conditions based on `endsWith(github.ref_name, '-test')`, and made the image-push branch check the tag name directly instead of relying on `IS_TEST_TAG` from a previous step.
- **Follow-up from server validation:** the runner still executed `Notify Deploy Server` for `v2026.04.24-test5`, so Gitea step-level `if:` with `endsWith(...)` was not sufficient in this environment.
- **Applied hardening:** replaced those step-level conditions with direct shell `case "${{ github.ref_name }}" in *-test)` guards inside the login, push, and deploy steps. This avoids relying on Gitea expression behavior for test-tag skipping.
- **Workflow mode changed for full CD verification:** per latest request, all `*-test` bypass logic was removed again so the workflow always runs registry login, image push, and deploy webhook. Full deployment validation now depends on using a normal `v*` tag and observing the real CD result instead of synthetic skip branches.
- **Next full-CD failure on act_runner:** image build completed, but pushing to the Gitea registry failed on blob upload commit with `failed to do request: Put ... EOF`. This is past the workflow logic stage and points to a transient or infrastructure-side registry upload failure.
- **Applied push hardening:** wrapped both `docker push "${IMAGE_NAME}:${IMAGE_TAG}"` and `docker push "${IMAGE_NAME}:latest"` in a 3-attempt retry helper with a short backoff to absorb transient registry EOF failures.
- **Current local result:** `npm run lint`, `npm run test -- --runInBand`, `npm run build`, `docker build ...`, and `npm run build` inside `gitea/runner-images:ubuntu-22.04` all completed successfully after the workflow adjustment.
- **Non-blocking note:** local Jest run reported a haste-map naming collision between `package.json` and `.next/standalone/package.json`; tests still passed, and this does not affect the current image-build workflow.
next.config.mjs
-17
View File
@@ -1,23 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
distDir: process.env.NEXT_DIST_DIR || ".next",
output: "standalone",
images: {
remotePatterns: [
{
protocol: "https",
hostname: "refine.ams3.cdn.digitaloceanspaces.com",
},
],
},
turbopack: {
rules: {
"*.svg": {
loaders: ["@svgr/webpack"],
as: "*.js",
},
},
},
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
package-lock.json
Generated
+3903 -3137
View File
File diff suppressed because it is too large Load Diff
package.json
+19 -30
View File
@@ -6,17 +6,14 @@
"node": ">=20"
},
"scripts": {
"dev": "npm run runtime:config && cross-env NODE_OPTIONS=--max_old_space_size=4096 next dev",
"runtime:config": "node scripts/generate-runtime-config.mjs",
"build": "next build",
"start": "next start",
"lint": "eslint .",
"dev": "cross-env NODE_OPTIONS=--max_old_space_size=4096 refine dev",
"build": "refine build",
"start": "refine start",
"lint": "next lint",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
"api:generate": "openapi-typescript contracts/server-v1.openapi.json -o src/generated/serverApi.ts && openapi-typescript contracts/agent-v1.openapi.json -o src/generated/agentApi.ts",
"api:check": "node scripts/check-api-contracts.mjs",
"pipeline:trigger": "bash scripts/trigger-gitea-pipeline.sh"
"refine": "refine"
},
"dependencies": {
"@emotion/react": "^11.8.2",
@@ -27,10 +24,12 @@
"@mui/x-charts": "^7.29.1",
"@mui/x-data-grid": "^7.22.2",
"@mui/x-date-pickers": "^8.12.0",
"@refinedev/core": "^5.0.12",
"@refinedev/cli": "^2.16.50",
"@refinedev/core": "^5.0.8",
"@refinedev/devtools": "^2.0.3",
"@refinedev/kbar": "^2.0.1",
"@refinedev/mui": "^8.0.2",
"@refinedev/nextjs-router": "^7.0.5",
"@refinedev/mui": "^8.0.0",
"@refinedev/nextjs-router": "^7.0.4",
"@refinedev/react-hook-form": "^5.0.4",
"@refinedev/simple-rest": "^6.0.1",
"@tailwindcss/postcss": "^4.1.13",
@@ -40,28 +39,17 @@
"deck.gl": "^9.1.14",
"echarts": "^6.0.0",
"echarts-for-react": "^3.0.5",
"edge-tts-ts": "^1.0.0",
"framer-motion": "^12.38.0",
"js-cookie": "^3.0.5",
"next": "^16.1.6",
"next": "^15.5.11",
"next-auth": "^4.24.5",
"ol": "^10.7.0",
"openapi-fetch": "^0.17.0",
"postcss": "8.5.25",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"postcss": "^8.5.6",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-draggable": "^4.5.0",
"react-icons": "^5.5.0",
"react-markdown": "^10.1.0",
"react-window": "^1.8.10",
"remark-gfm": "^4.0.1",
"tailwindcss": "^4.1.13",
"zustand": "^5.0.11"
},
"overrides": {
"fast-xml-parser": "5.5.9",
"postcss": "8.5.25",
"sharp": "0.35.3"
"tailwindcss": "^4.1.13"
},
"devDependencies": {
"@svgr/webpack": "^8.1.0",
@@ -74,14 +62,15 @@
"@types/react": "^19.1.0",
"@types/react-dom": "^19.1.0",
"@types/react-window": "^1.8.8",
"baseline-browser-mapping": "^2.9.19",
"cross-env": "^7.0.3",
"eslint": "^9.39.2",
"eslint-config-next": "^16.1.6",
"eslint-config-next": "^15.0.3",
"jest": "^30.2.0",
"jest-environment-jsdom": "^30.2.0",
"openapi-typescript": "^7.13.0",
"ts-jest": "^29.4.6",
"typescript": "^5.8.3"
},
"refine": {
"projectId": "4LwOCL-BBaV29-qUYMAJ"
}
}
package_back.json
+58
View File
@@ -0,0 +1,58 @@
{
"name": "tjwater-app",
"version": "0.1.0",
"private": true,
"engines": {
"node": ">=20"
},
"scripts": {
"dev": "cross-env NODE_OPTIONS=--max_old_space_size=4096 refine dev",
"build": "refine build",
"start": "refine start",
"lint": "next lint",
"refine": "refine"
},
"dependencies": {
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^6.1.6",
"@mui/lab": "^6.0.0-beta.14",
"@mui/material": "^6.1.7",
"@mui/x-data-grid": "^7.22.2",
"@refinedev/cli": "^2.16.48",
"@refinedev/core": "^5.0.0",
"@refinedev/devtools": "^2.0.1",
"@refinedev/kbar": "^2.0.0",
"@refinedev/mui": "^7.0.0",
"@refinedev/nextjs-router": "^7.0.0",
"@refinedev/react-hook-form": "^5.0.0",
"@refinedev/simple-rest": "^6.0.0",
"@tailwindcss/postcss": "^4.1.13",
"@turf/turf": "^7.2.0",
"clsx": "^2.1.1",
"deck.gl": "^9.1.14",
"js-cookie": "^3.0.5",
"next": "^15.2.4",
"next-auth": "^4.24.5",
"ol": "^10.6.1",
"postcss": "^8.5.6",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",
"tailwindcss": "^4.1.13"
},
"devDependencies": {
"@svgr/webpack": "^8.1.0",
"@types/js-cookie": "^3.0.6",
"@types/node": "^20",
"@types/react": "^19.1.0",
"@types/react-dom": "^19.1.0",
"cross-env": "^7.0.3",
"eslint": "^8",
"eslint-config-next": "^15.0.3",
"typescript": "^5.8.3"
},
"refine": {
"projectId": "4LwOCL-BBaV29-qUYMAJ"
}
}
public/ai-agent.svg
-1
View File
@@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1777523623582" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11701" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M384.1536 952.1664a38.4 38.4 0 0 1-49.3568 22.528 498.3808 498.3808 0 0 1-284.928-273.92 38.4 38.4 0 0 1 70.8608-29.6448 421.5808 421.5808 0 0 0 240.896 231.6288 38.4 38.4 0 0 1 22.528 49.408zM952.1152 384.9728a38.4 38.4 0 0 1-49.4592-22.528 421.5296 421.5296 0 0 0-234.1376-241.5104 38.4 38.4 0 0 1 29.184-71.0656 498.3296 498.3296 0 0 1 276.8896 285.696 38.4 38.4 0 0 1-22.528 49.408z" fill="#CE75FF" p-id="11702"></path><path d="M511.9488 276.736l-27.8528 114.7392A126.0544 126.0544 0 0 1 391.3216 484.352l-114.7904 27.8528 114.7904 27.8016a126.0544 126.0544 0 0 1 92.7744 92.8256L512 747.52l27.8016-114.7392a126.0544 126.0544 0 0 1 92.8256-92.8256l114.7392-27.8016-114.7392-27.8528a126.0544 126.0544 0 0 1-92.8256-92.8256L512 276.736z m55.6544-62.1568c-14.1312-58.368-97.1776-58.368-111.36 0L417.28 375.296a57.344 57.344 0 0 1-42.1888 42.1888l-160.6656 38.912c-58.4192 14.1824-58.4192 97.28 0 111.4112l160.6656 38.9632c20.8384 5.12 37.12 21.3504 42.1888 42.1888l38.9632 160.7168c14.1824 58.368 97.2288 58.368 111.36 0l38.9632-160.7168a57.344 57.344 0 0 1 42.1888-42.1888l160.7168-38.912c58.368-14.1824 58.368-97.28 0-111.4112l-160.7168-38.9632a57.344 57.344 0 0 1-42.1888-42.1888l-38.912-160.7168z" fill="#F3E2FF" p-id="11703"></path><path d="M981.248 768.0512a42.6496 42.6496 0 1 1-85.2992 0 42.6496 42.6496 0 0 1 85.2992 0zM127.9488 256.0512a42.6496 42.6496 0 1 1-85.3504 0 42.6496 42.6496 0 0 1 85.3504 0z" fill="#F62E76" p-id="11704"></path><path d="M810.496 938.8544a42.6496 42.6496 0 1 1-85.2992 0 42.6496 42.6496 0 0 1 85.3504 0zM298.496 85.504a42.6496 42.6496 0 1 1-85.2992 0 42.6496 42.6496 0 0 1 85.3504 0z" fill="#CD88FF" p-id="11705"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

public/deepseek-logo.svg
-1
View File
@@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1777457471585" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5556" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M550.4 486.4c0-8.533333 4.266667-12.8 12.8-12.8h4.266667c4.266667 0 4.266667 4.266667 4.266666 4.266667s4.266667 4.266667 4.266667 8.533333v4.266667s0 4.266667-4.266667 4.266666c0 0-4.266667 0-4.266666 4.266667h-4.266667-4.266667s-4.266667 0-4.266666-4.266667c0 0 0-4.266667-4.266667-4.266666v-4.266667z" fill="#4D6BFE" p-id="5557"></path><path d="M994.133333 196.266667c-8.533333-4.266667-12.8 4.266667-21.333333 8.533333l-4.266667 4.266667c-12.8 17.066667-34.133333 25.6-55.466666 25.6-34.133333 0-59.733333 8.533333-85.333334 34.133333-4.266667-29.866667-21.333333-51.2-51.2-64-12.8-4.266667-29.866667-12.8-38.4-25.6-8.533333-8.533333-8.533333-21.333333-12.8-29.866667 0-4.266667 0-12.8-8.533333-12.8s-12.8 4.266667-12.8 12.8c-12.8 21.333333-21.333333 46.933333-17.066667 72.533334 0 59.733333 25.6 106.666667 72.533334 136.533333 4.266667 4.266667 8.533333 8.533333 4.266666 12.8-4.266667 12.8-8.533333 21.333333-8.533333 34.133333-4.266667 8.533333-4.266667 8.533333-12.8 4.266667-25.6-12.8-51.2-29.866667-68.266667-46.933333-34.133333-34.133333-64-72.533333-102.4-102.4-8.533333-8.533333-17.066667-12.8-25.6-21.333334-46.933333-34.133333 0-64 8.533334-68.266666 12.8-4.266667 4.266667-17.066667-29.866667-17.066667-34.133333 0-68.266667 12.8-106.666667 29.866667-8.533333 0-12.8 0-21.333333 4.266666-38.4-8.533333-76.8-8.533333-115.2-4.266666-76.8 8.533333-136.533333 42.666667-179.2 106.666666-51.2 76.8-64 157.866667-51.2 247.466667 17.066667 93.866667 64 170.666667 132.266667 230.4 72.533333 64 157.866667 93.866667 256 85.333333 59.733333-4.266667 123.733333-12.8 200.533333-76.8 17.066667 8.533333 38.4 12.8 72.533333 17.066667 25.6 4.266667 51.2 0 68.266667-4.266667 29.866667-4.266667 25.6-34.133333 17.066667-38.4-85.333333-42.666667-68.266667-25.6-85.333334-38.4 42.666667-51.2 110.933333-106.666667 136.533334-285.866666v-34.133334c0-8.533333 4.266667-8.533333 12.8-8.533333 21.333333-4.266667 42.666667-8.533333 59.733333-21.333333 55.466667-29.866667 76.8-81.066667 85.333333-145.066667 0-8.533333 0-17.066667-12.8-21.333333zM507.733333 746.666667c-85.333333-68.266667-123.733333-89.6-140.8-89.6-17.066667 0-12.8 21.333333-8.533333 29.866666 4.266667 12.8 8.533333 21.333333 12.8 29.866667 4.266667 8.533333 8.533333 17.066667-4.266667 25.6-25.6 17.066667-72.533333-4.266667-76.8-8.533333-55.466667-34.133333-98.133333-76.8-132.266666-136.533334-29.866667-51.2-46.933333-110.933333-46.933334-174.933333 0-17.066667 4.266667-21.333333 17.066667-25.6 21.333333-4.266667 42.666667-4.266667 59.733333 0 85.333333 12.8 157.866667 51.2 217.6 115.2 34.133333 34.133333 59.733333 76.8 89.6 119.466667 29.866667 42.666667 59.733333 85.333333 98.133334 119.466666 12.8 12.8 25.6 21.333333 34.133333 25.6-29.866667 0-81.066667 0-119.466667-29.866666z m166.4-196.266667c-8.533333 4.266667-17.066667 4.266667-25.6 4.266667-12.8 0-25.6-4.266667-29.866666-8.533334-12.8-8.533333-17.066667-12.8-21.333334-29.866666v-25.6c4.266667-12.8 0-21.333333-8.533333-29.866667-8.533333-4.266667-17.066667-8.533333-25.6-8.533333-4.266667 0-8.533333 0-8.533333-4.266667 0 0-4.266667 0-4.266667-4.266667v-4.266666-4.266667-4.266667c0-4.266667 8.533333-8.533333 8.533333-8.533333 12.8-8.533333 29.866667-4.266667 46.933334 0 12.8 4.266667 25.6 17.066667 38.4 29.866667 17.066667 17.066667 17.066667 25.6 25.6 38.4 8.533333 12.8 12.8 21.333333 17.066666 34.133333 0 12.8-4.266667 21.333333-12.8 25.6z" fill="#4D6BFE" p-id="5558"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.7 KiB

public/login-logo-mark.svg
-8
View File
@@ -1,8 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" role="img" aria-labelledby="title">
<title id="title">TJWater</title>
<rect width="72" height="72" rx="18" fill="#1478d4"/>
<path d="M36 13c-7.8 11.1-16.1 19.4-16.1 29.3A16.1 16.1 0 0 0 36 58.4a16.1 16.1 0 0 0 16.1-16.1C52.1 32.4 43.8 24.1 36 13Z" fill="#f5fbfc"/>
<path d="M26.5 43.5h19M31 36.5l5 7 5-7" fill="none" stroke="#0b8f82" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<circle cx="26.5" cy="43.5" r="2.7" fill="#0b8f82"/>
<circle cx="45.5" cy="43.5" r="2.7" fill="#0b8f82"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 585 B

public/login-network-blueprint.svg
-31
View File
@@ -1,31 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
<rect width="1440" height="900" fill="#edf5f5"/>
<path d="M0 0h790L650 900H0Z" fill="#dceced"/>
<path d="M0 182c187-78 303-73 451-16 153 59 288 47 409-25M0 552c193-45 327-19 461 74 128 90 266 100 410 47" fill="none" stroke="#c8dddd" stroke-width="2"/>
<g fill="none" stroke="#a9ccce" stroke-linecap="round" stroke-linejoin="round">
<path d="M-32 725 178 608l142 51 155-190 184 67 176-205" stroke-width="5"/>
<path d="m178 608 25-222 151-92 121 175" stroke-width="3"/>
<path d="m203 386-92-95 55-161M354 294l92-141 152 58 98-106" stroke-width="3"/>
<path d="m320 659-4 132 171 81M659 536l88 116 124-42" stroke-width="3"/>
</g>
<g fill="#edf5f5" stroke="#1478d4" stroke-width="4">
<circle cx="178" cy="608" r="10"/><circle cx="203" cy="386" r="9"/>
<circle cx="354" cy="294" r="9"/><circle cx="475" cy="469" r="11"/>
<circle cx="659" cy="536" r="10"/><circle cx="747" cy="652" r="9"/>
<circle cx="320" cy="659" r="8"/>
</g>
<g fill="#0b8f82">
<circle cx="111" cy="291" r="6"/><circle cx="166" cy="130" r="6"/>
<circle cx="446" cy="153" r="7"/><circle cx="598" cy="211" r="6"/>
<circle cx="696" cy="105" r="6"/><circle cx="316" cy="791" r="6"/>
<circle cx="487" cy="872" r="6"/><circle cx="835" cy="331" r="7"/>
</g>
<g fill="none" stroke="#86b8bb" stroke-width="2" opacity=".72">
<circle cx="615" cy="448" r="222"/><circle cx="615" cy="448" r="276"/>
<circle cx="615" cy="448" r="334"/>
</g>
<g fill="#1478d4" opacity=".08">
<rect x="40" y="40" width="118" height="10" rx="5"/>
<rect x="40" y="62" width="72" height="6" rx="3"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

scripts/check-api-contracts.mjs
-57
View File
@@ -1,57 +0,0 @@
import { execFile } from "node:child_process";
import { createHash } from "node:crypto";
import { mkdtemp, readFile, rm } from "node:fs/promises";
import { tmpdir } from "node:os";
import { basename, join } from "node:path";
import { fileURLToPath } from "node:url";
import { promisify } from "node:util";
const manifest = JSON.parse(
await readFile(new URL("../contracts/manifest.json", import.meta.url), "utf8"),
);
const run = promisify(execFile);
const projectRoot = fileURLToPath(new URL("../", import.meta.url));
const generator = join(
projectRoot,
"node_modules",
"openapi-typescript",
"bin",
"cli.js",
);
const temporaryDirectory = await mkdtemp(
join(tmpdir(), "tjwater-api-contracts-"),
);
try {
for (const [name, contract] of Object.entries(manifest.contracts)) {
const contractPath = fileURLToPath(
new URL(`../contracts/${contract.file}`, import.meta.url),
);
const payload = await readFile(contractPath);
const actual = createHash("sha256").update(payload).digest("hex");
if (actual !== contract.sha256) {
throw new Error(
`${name} contract hash mismatch: expected ${contract.sha256}, got ${actual}`,
);
}
const generatedName = `${name}Api.ts`;
const temporaryOutput = join(temporaryDirectory, generatedName);
await run(process.execPath, [generator, contractPath, "-o", temporaryOutput]);
const expectedOutput = await readFile(
new URL(`../src/generated/${generatedName}`, import.meta.url),
);
const generatedOutput = await readFile(temporaryOutput);
if (!expectedOutput.equals(generatedOutput)) {
throw new Error(
`${basename(contract.file)} generated type is stale: run \`npm run api:generate\``,
);
}
}
} finally {
await rm(temporaryDirectory, { recursive: true, force: true });
}
console.log(
`validated API contract mirrors and generated types for ${manifest.contract_version}`,
);
scripts/generate-runtime-config.mjs
-39
View File
@@ -1,39 +0,0 @@
import nextEnv from "@next/env";
import fs from "node:fs";
import path from "node:path";
const projectDir = process.cwd();
const { loadEnvConfig } = nextEnv;
loadEnvConfig(projectDir, process.env.NODE_ENV !== "production");
const parseExtent = (value) => {
if (!value) {
return [13508849, 3608036, 13555781, 3633813];
}
const extent = value.split(",").map(Number);
return extent.length === 4 && extent.every(Number.isFinite)
? extent
: [13508849, 3608036, 13555781, 3633813];
};
const config = {
BACKEND_URL: process.env.BACKEND_URL || "http://127.0.0.1:8000",
AGENT_URL: process.env.AGENT_URL || "http://127.0.0.1:8788",
MAP_URL: process.env.MAP_URL || "http://127.0.0.1:8080/geoserver",
MAP_WORKSPACE: process.env.MAP_WORKSPACE || "tjwater",
MAP_EXTENT: parseExtent(process.env.MAP_EXTENT),
NETWORK_NAME: process.env.NETWORK_NAME || "tjwater",
MAPBOX_TOKEN: process.env.MAPBOX_TOKEN || "",
TIANDITU_TOKEN: process.env.TIANDITU_TOKEN || "",
};
const outputPath = path.join(projectDir, "public", "runtime-config.js");
fs.writeFileSync(
outputPath,
`window.__TJWATER_RUNTIME_CONFIG__ = ${JSON.stringify(config)};\n`,
);
console.log(`Generated ${path.relative(projectDir, outputPath)}`);
scripts/trigger-gitea-pipeline.sh
-43
View File
@@ -1,43 +0,0 @@
#!/usr/bin/env bash
set -euo pipefail
if [[ "${1:-}" == "-h" || "${1:-}" == "--help" ]]; then
echo "Usage: bash scripts/trigger-gitea-pipeline.sh [remote] [tag]"
echo ""
echo "Examples:"
echo " bash scripts/trigger-gitea-pipeline.sh"
echo " bash scripts/trigger-gitea-pipeline.sh gitea latest"
echo " bash scripts/trigger-gitea-pipeline.sh gitea v2026.05.15.1"
exit 0
fi
REMOTE="${1:-gitea}"
TAG="${2:-latest}"
if ! git rev-parse --git-dir >/dev/null 2>&1; then
echo "[ERROR] Current directory is not a git repository."
exit 1
fi
if ! git remote get-url "$REMOTE" >/dev/null 2>&1; then
echo "[ERROR] Remote '$REMOTE' does not exist."
echo "Available remotes:"
git remote -v
exit 1
fi
HEAD_SHA="$(git rev-parse --short HEAD)"
MESSAGE="manual trigger: ${TAG} $(date '+%F %T')"
echo "[INFO] HEAD: ${HEAD_SHA}"
echo "[INFO] Recreate annotated tag '${TAG}'"
git tag -fa "$TAG" -m "$MESSAGE"
echo "[INFO] Push '${TAG}' to remote '${REMOTE}' (force update)"
git push "$REMOTE" "refs/tags/${TAG}" --force
echo "[INFO] Verify remote tag reference"
git ls-remote --tags "$REMOTE" "refs/tags/${TAG}"
echo "[DONE] Pipeline trigger request sent by updating tag '${TAG}'."
src/app/(main)/(map)/health-risk-analysis/page.tsx
-58
View File
@@ -1,58 +0,0 @@
"use client";
import dynamic from "next/dynamic";
import { MapPanelSkeleton, MapTimelineSkeleton } from "@components/loading/MapComponentSkeletons";
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
import { HealthRiskProvider } from "@components/olmap/HealthRiskAnalysis/HealthRiskContext";
import StyleLegend from "@components/olmap/core/Controls/StyleLegend";
import {
RAINBOW_COLORS,
RISK_BREAKS,
} from "@components/olmap/HealthRiskAnalysis/types";
import { Box } from "@mui/material";
const Timeline = dynamic(
() => import("@components/olmap/HealthRiskAnalysis/Timeline"),
{
loading: () => <MapTimelineSkeleton />,
},
);
const HealthRiskStatistics = dynamic(
() =>
import("@components/olmap/HealthRiskAnalysis/HealthRiskStatistics"),
{
loading: () => <MapPanelSkeleton variant="health-risk-analysis" />,
},
);
const PredictDataPanel = dynamic(
() => import("@components/olmap/HealthRiskAnalysis/PredictDataPanel"),
{
loading: () => null,
},
);
export default function Home() {
return (
<HealthRiskProvider>
<MapToolbar
queryType="realtime"
hiddenButtons={["style"]}
HistoryPanel={PredictDataPanel}
/>
<Timeline />
<HealthRiskStatistics />
<Box className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
<StyleLegend
layerName="管道"
layerId="health-risk"
property="健康风险"
colors={RAINBOW_COLORS}
type="line"
dimensions={Array(RAINBOW_COLORS.length).fill(2)}
breaks={[0, ...RISK_BREAKS]}
/>
</Box>
</HealthRiskProvider>
);
}
src/app/(main)/(map)/hydraulic-simulation/burst-detection/page.tsx
-26
View File
@@ -1,26 +0,0 @@
"use client";
import dynamic from "next/dynamic";
import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
const BurstDetectionPanel = dynamic(
() => import("@/components/olmap/BurstDetection/BurstDetectionPanel"),
{
loading: () => <MapPanelSkeleton variant="burst-detection" />,
},
);
export default function Home() {
return (
<>
<MapToolbar
queryType="scheme"
schemeType="burst_detection"
hiddenButtons={["style"]}
/>
<BurstDetectionPanel />
</>
);
}
src/app/(main)/(map)/hydraulic-simulation/burst-location/page.tsx
-26
View File
@@ -1,26 +0,0 @@
"use client";
import dynamic from "next/dynamic";
import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
const BurstLocationPanel = dynamic(
() => import("@/components/olmap/BurstLocation/BurstLocationPanel"),
{
loading: () => <MapPanelSkeleton variant="burst-location" />,
},
);
export default function Home() {
return (
<>
<MapToolbar
queryType="scheme"
schemeType="burst_location"
hiddenButtons={["style"]}
/>
<BurstLocationPanel />
</>
);
}
src/app/(main)/(map)/hydraulic-simulation/burst-simulation/page.tsx
-26
View File
@@ -1,26 +0,0 @@
"use client";
import dynamic from "next/dynamic";
import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
const BurstPipeAnalysisPanel = dynamic(
() => import("@/components/olmap/BurstSimulation/BurstPipeAnalysisPanel"),
{
loading: () => <MapPanelSkeleton variant="burst-simulation" />,
},
);
export default function Home() {
return (
<>
<MapToolbar
queryType="scheme"
schemeType="burst_analysis"
enableCompare
/>
<BurstPipeAnalysisPanel />
</>
);
}
src/app/(main)/(map)/hydraulic-simulation/contaminant-simulation/page.tsx
-26
View File
@@ -1,26 +0,0 @@
"use client";
import dynamic from "next/dynamic";
import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
const WaterQualityPanel = dynamic(
() => import("@/components/olmap/ContaminantSimulation/WaterQualityPanel"),
{
loading: () => <MapPanelSkeleton variant="contaminant-simulation" />,
},
);
export default function Home() {
return (
<>
<MapToolbar
queryType="scheme"
schemeType="contaminant_analysis"
enableCompare
/>
<WaterQualityPanel />
</>
);
}
src/app/(main)/(map)/hydraulic-simulation/dma-leak-detection/page.tsx
-26
View File
@@ -1,26 +0,0 @@
"use client";
import dynamic from "next/dynamic";
import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
const DMALeakDetectionPanel = dynamic(
() => import("@/components/olmap/DMALeakDetection/DMALeakDetectionPanel"),
{
loading: () => <MapPanelSkeleton variant="dma-leak-detection" />,
},
);
export default function Home() {
return (
<>
<MapToolbar
queryType="scheme"
schemeType="dma_leak_identification"
hiddenButtons={["style"]}
/>
<DMALeakDetectionPanel />
</>
);
}
src/app/(main)/(map)/hydraulic-simulation/flushing-analysis/page.tsx
-22
View File
@@ -1,22 +0,0 @@
"use client";
import dynamic from "next/dynamic";
import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
const FlushingAnalysisPanel = dynamic(
() => import("@/components/olmap/FlushingAnalysis/FlushingAnalysisPanel"),
{
loading: () => <MapPanelSkeleton variant="flushing-analysis" />,
},
);
export default function Home() {
return (
<>
<MapToolbar queryType="scheme" schemeType="flushing_analysis" />
<FlushingAnalysisPanel />
</>
);
}
src/app/(main)/(map)/layout.tsx
-9
View File
@@ -1,9 +0,0 @@
"use client";
import type { ReactNode } from "react";
import MapComponent from "@components/olmap/core/MapComponent";
export default function MapLayout({ children }: { children: ReactNode }) {
return <MapComponent>{children}</MapComponent>;
}
src/app/(main)/(map)/monitoring-place-optimization/page.tsx
-27
View File
@@ -1,27 +0,0 @@
"use client";
import dynamic from "next/dynamic";
import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
const MonitoringPlaceOptimizationPanel = dynamic(
() =>
import(
"@components/olmap/MonitoringPlaceOptimization/MonitoringPlaceOptimizationPanel"
),
{
loading: () => (
<MapPanelSkeleton variant="monitoring-place-optimization" />
),
},
);
export default function Home() {
return (
<>
<MapToolbar hiddenButtons={["style"]} />
<MonitoringPlaceOptimizationPanel />
</>
);
}
src/app/(main)/(map)/network-simulation/page.tsx
-56
View File
@@ -1,56 +0,0 @@
"use client";
import dynamic from "next/dynamic";
import { useCallback, useState } from "react";
import {
MapPanelSkeleton,
MapTimelineSkeleton,
} from "@components/loading/MapComponentSkeletons";
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
const Timeline = dynamic(
() => import("@components/olmap/core/Controls/Timeline"),
{
loading: () => <MapTimelineSkeleton />,
},
);
const SCADADeviceList = dynamic(
() => import("@components/olmap/SCADA/SCADADeviceList"),
{
loading: () => <MapPanelSkeleton variant="network-simulation" />,
},
);
const SCADADataPanel = dynamic(
() => import("@components/olmap/SCADA/SCADADataPanel"),
{
loading: () => null,
},
);
export default function Home() {
const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([]);
const [panelVisible, setPanelVisible] = useState<boolean>(false);
const handleSelectionChange = useCallback((ids: string[]) => {
setSelectedDeviceIds(ids);
setPanelVisible(ids.length > 0);
}, []);
const handleDeviceClick = useCallback(() => {
setPanelVisible(true);
}, []);
return (
<>
<MapToolbar queryType="realtime" />
<Timeline />
<SCADADeviceList
onDeviceClick={handleDeviceClick}
onSelectionChange={handleSelectionChange}
selectedDeviceIds={selectedDeviceIds}
/>
<SCADADataPanel deviceIds={selectedDeviceIds} visible={panelVisible} />
</>
);
}
src/app/(main)/(map)/scada-data-cleaning/page.tsx
-51
View File
@@ -1,51 +0,0 @@
"use client";
import dynamic from "next/dynamic";
import { useCallback, useState } from "react";
import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
const SCADADeviceList = dynamic(
() => import("@components/olmap/SCADA/SCADADeviceList"),
{
loading: () => <MapPanelSkeleton variant="scada-data-cleaning" />,
},
);
const SCADADataPanel = dynamic(
() => import("@components/olmap/SCADA/SCADADataPanel"),
{
loading: () => null,
},
);
export default function Home() {
const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([]);
const [panelVisible, setPanelVisible] = useState<boolean>(false);
const handleSelectionChange = useCallback((ids: string[]) => {
setSelectedDeviceIds(ids);
setPanelVisible(ids.length > 0);
}, []);
const handleDeviceClick = useCallback(() => {
setPanelVisible(true);
}, []);
return (
<>
<MapToolbar hiddenButtons={["style"]} />
<SCADADeviceList
onDeviceClick={handleDeviceClick}
onSelectionChange={handleSelectionChange}
selectedDeviceIds={selectedDeviceIds}
showCleaning={true}
/>
<SCADADataPanel
deviceIds={selectedDeviceIds}
visible={panelVisible}
showCleaning={true}
/>
</>
);
}
src/app/(main)/audit-logs/page.tsx
-5
View File
@@ -1,5 +0,0 @@
import { AuditLogPanel } from "@/components/audit/AuditLogPanel";
export default function AuditLogsPage() {
return <AuditLogPanel />;
}
src/app/(main)/health-risk-analysis/loading.tsx
+5
View File
@@ -0,0 +1,5 @@
import { MapSkeleton } from "@components/loading/MapSkeleton";
export default function Loading() {
return <MapSkeleton />;
}
src/app/(main)/health-risk-analysis/page.tsx
+43
View File
@@ -0,0 +1,43 @@
"use client";
import MapComponent from "@app/OlMap/MapComponent";
import Timeline from "@components/olmap/HealthRiskAnalysis/Timeline";
import MapToolbar from "@app/OlMap/Controls/Toolbar";
import { HealthRiskProvider } from "@components/olmap/HealthRiskAnalysis/HealthRiskContext";
import HealthRiskStatistics from "@components/olmap/HealthRiskAnalysis/HealthRiskStatistics";
import PredictDataPanel from "@components/olmap/HealthRiskAnalysis/PredictDataPanel";
import StyleLegend from "@app/OlMap/Controls/StyleLegend";
import {
RAINBOW_COLORS,
RISK_BREAKS,
} from "@components/olmap/HealthRiskAnalysis/types";
import { Box } from "@mui/material";
export default function Home() {
return (
<div className="relative w-full h-full overflow-hidden">
<HealthRiskProvider>
<MapComponent>
<MapToolbar
queryType="realtime"
hiddenButtons={["style"]}
HistoryPanel={PredictDataPanel}
/>
<Timeline />
<HealthRiskStatistics />
<Box className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
<StyleLegend
layerName="管道"
layerId="health-risk"
property="健康风险"
colors={RAINBOW_COLORS}
type="line"
dimensions={Array(RAINBOW_COLORS.length).fill(2)}
breaks={[0, ...RISK_BREAKS]}
/>
</Box>
</MapComponent>
</HealthRiskProvider>
</div>
);
}
src/app/(main)/layout.tsx
+10 -11
View File
@@ -1,11 +1,12 @@
import type { Metadata } from "next";
import { cookies } from "next/headers";
import type { ReactNode } from "react";
import React, { Suspense } from "react";
import { RefineContext } from "../_refine_context";
import authOptions from "@app/api/auth/[...nextauth]/options";
import { Header } from "@components/header";
import { Title } from "@components/title";
import { AppSider } from "@components/sider/AppSider";
import { MapSkeleton } from "@components/loading/MapSkeleton";
import { ThemedLayout } from "@refinedev/mui";
import { getServerSession } from "next-auth/next";
import { redirect } from "next/navigation";
@@ -19,7 +20,7 @@ export const metadata: Metadata = META_DATA;
export default async function MainLayout({
children,
}: Readonly<{
children: ReactNode;
children: React.ReactNode;
}>) {
const cookieStore = await cookies();
const theme = cookieStore.get("theme");
@@ -32,24 +33,22 @@ export default async function MainLayout({
}
return (
<RefineContext defaultMode={defaultMode}>
<ThemedLayout
Header={Header}
Title={Title}
Sider={AppSider}
childrenBoxProps={{
sx: {
flex: 1,
minHeight: 0,
overflow: "auto",
p: 0,
},
sx: { height: "100vh", p: 0 },
}}
containerBoxProps={{
sx: { height: "100vh", overflow: "hidden" },
sx: { height: "100%" },
}}
>
<Suspense fallback={<MapSkeleton />}>
{children}
</Suspense>
</ThemedLayout>
</RefineContext>
);
}
src/app/(main)/monitoring-place-optimization/loading.tsx
+5
View File
@@ -0,0 +1,5 @@
import { MapSkeleton } from "@components/loading/MapSkeleton";
export default function Loading() {
return <MapSkeleton />;
}
src/app/(main)/monitoring-place-optimization/page.tsx
+15
View File
@@ -0,0 +1,15 @@
"use client";
import MapComponent from "@app/OlMap/MapComponent";
import MapToolbar from "@app/OlMap/Controls/Toolbar";
import MonitoringPlaceOptimizationPanel from "@components/olmap/MonitoringPlaceOptimization/MonitoringPlaceOptimizationPanel";
export default function Home() {
return (
<div className="relative w-full h-full overflow-hidden">
<MapComponent>
<MapToolbar hiddenButtons={["style"]} />
<MonitoringPlaceOptimizationPanel />
</MapComponent>
</div>
);
}
src/app/(main)/network-partition-optimization/loading.tsx
+5
View File
@@ -0,0 +1,5 @@
import { MapSkeleton } from "@components/loading/MapSkeleton";
export default function Loading() {
return <MapSkeleton />;
}
src/app/(main)/network-partition-optimization/page.tsx
+14
View File
@@ -0,0 +1,14 @@
"use client";
import MapComponent from "@app/OlMap/MapComponent";
import MapToolbar from "@app/OlMap/Controls/Toolbar";
import ZonePropsPanel from "@components/olmap/NetworkPartitionOptimization/ZonePropsPanel";
export default function Home() {
return (
<div className="relative w-full h-full overflow-hidden">
<MapComponent>
<ZonePropsPanel />
</MapComponent>
</div>
);
}
src/app/(main)/network-simulation/loading.tsx
+5
View File
@@ -0,0 +1,5 @@
import { MapSkeleton } from "@components/loading/MapSkeleton";
export default function Loading() {
return <MapSkeleton />;
}
src/app/(main)/network-simulation/page.tsx
+38
View File
@@ -0,0 +1,38 @@
"use client";
import { useCallback, useState } from "react";
import MapComponent from "@app/OlMap/MapComponent";
import Timeline from "@app/OlMap/Controls/Timeline";
import MapToolbar from "@app/OlMap/Controls/Toolbar";
import SCADADeviceList from "@components/olmap/SCADADeviceList";
import SCADADataPanel from "@components/olmap/SCADADataPanel";
export default function Home() {
const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([]);
const [panelVisible, setPanelVisible] = useState<boolean>(false);
const handleSelectionChange = useCallback((ids: string[]) => {
setSelectedDeviceIds(ids);
setPanelVisible(ids.length > 0);
}, []);
const handleDeviceClick = useCallback(() => {
setPanelVisible(true);
}, []);
return (
<div className="relative w-full h-full overflow-hidden">
<MapComponent>
<MapToolbar queryType="realtime" />
<Timeline />
<SCADADeviceList
onDeviceClick={handleDeviceClick}
onSelectionChange={handleSelectionChange}
selectedDeviceIds={selectedDeviceIds}
/>
<SCADADataPanel deviceIds={selectedDeviceIds} visible={panelVisible} />
</MapComponent>
</div>
);
}
src/app/(main)/risk-analysis-location/loading.tsx
+5
View File
@@ -0,0 +1,5 @@
import { MapSkeleton } from "@components/loading/MapSkeleton";
export default function Loading() {
return <MapSkeleton />;
}
src/app/(main)/risk-analysis-location/page.tsx
+16
View File
@@ -0,0 +1,16 @@
"use client";
import MapComponent from "@app/OlMap/MapComponent";
import MapToolbar from "@app/OlMap/Controls/Toolbar";
import BurstPipeAnalysisPanel from "@/components/olmap/BurstPipeAnalysis/BurstPipeAnalysisPanel";
export default function Home() {
return (
<div className="relative w-full h-full overflow-hidden">
<MapComponent>
<MapToolbar queryType="scheme" />
<BurstPipeAnalysisPanel />
</MapComponent>
</div>
);
}
src/app/(main)/scada-data-cleaning/loading.tsx
+5
View File
@@ -0,0 +1,5 @@
import { MapSkeleton } from "@components/loading/MapSkeleton";
export default function Loading() {
return <MapSkeleton />;
}
src/app/(main)/scada-data-cleaning/page.tsx
+41
View File
@@ -0,0 +1,41 @@
"use client";
import { useCallback, useState } from "react";
import MapComponent from "@app/OlMap/MapComponent";
import MapToolbar from "@app/OlMap/Controls/Toolbar";
import SCADADeviceList from "@components/olmap/SCADADeviceList";
import SCADADataPanel from "@components/olmap/SCADADataPanel";
export default function Home() {
const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([]);
const [panelVisible, setPanelVisible] = useState<boolean>(false);
const handleSelectionChange = useCallback((ids: string[]) => {
setSelectedDeviceIds(ids);
setPanelVisible(ids.length > 0);
}, []);
const handleDeviceClick = useCallback(() => {
setPanelVisible(true);
}, []);
return (
<div className="relative w-full h-full overflow-hidden">
<MapComponent>
<MapToolbar hiddenButtons={["style"]} />
<SCADADeviceList
onDeviceClick={handleDeviceClick}
onSelectionChange={handleSelectionChange}
selectedDeviceIds={selectedDeviceIds}
showCleaning={true}
/>
<SCADADataPanel
deviceIds={selectedDeviceIds}
visible={panelVisible}
showCleaning={true}
/>
</MapComponent>
</div>
);
}
src/app/(main)/system-admin/page.tsx
-5
View File
@@ -1,5 +0,0 @@
import { SystemAdminPanel } from "@/components/admin/SystemAdminPanel";
export default function SystemAdminPage() {
return <SystemAdminPanel />;
}
src/app/OlMap/Controls/BaseLayers.tsx
+251
View File
@@ -0,0 +1,251 @@
import React, { useState, useEffect } from "react";
import { useMap } from "../MapComponent";
import TileLayer from "ol/layer/Tile.js";
import XYZ from "ol/source/XYZ.js";
import mapboxOutdoors from "@assets/map/layers/mapbox-outdoors.png";
import mapboxLight from "@assets/map/layers/mapbox-light.png";
import mapboxSatellite from "@assets/map/layers/mapbox-satellite.png";
import mapboxSatelliteStreet from "@assets/map/layers/mapbox-satellite-streets.png";
import mapboxStreets from "@assets/map/layers/mapbox-streets.png";
import clsx from "clsx";
import Group from "ol/layer/Group";
import { MAPBOX_TOKEN } from "@config/config";
import { TIANDITU_TOKEN } from "@config/config";
const INITIAL_LAYER = "mapbox-light";
const streetsLayer = new TileLayer({
source: new XYZ({
url: `https://api.mapbox.com/styles/v1/mapbox/streets-v12/tiles/256/{z}/{x}/{y}@2x?access_token=${MAPBOX_TOKEN}`,
tileSize: 512,
maxZoom: 20,
projection: "EPSG:3857",
attributions:
'数据来源：<a href="https://www.mapbox.com/">Mapbox</a> & <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
}),
});
const lightMapLayer = new TileLayer({
source: new XYZ({
url: `https://api.mapbox.com/styles/v1/mapbox/light-v11/tiles/256/{z}/{x}/{y}@2x?access_token=${MAPBOX_TOKEN}`,
tileSize: 512,
maxZoom: 20,
projection: "EPSG:3857",
attributions:
'数据来源：<a href="https://www.mapbox.com/">Mapbox</a> & <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
}),
});
const satelliteLayer = new TileLayer({
source: new XYZ({
url: `https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}@2x?access_token=${MAPBOX_TOKEN}`,
tileSize: 512,
maxZoom: 20,
projection: "EPSG:3857",
attributions:
'数据来源：<a href="https://www.mapbox.com/">Mapbox</a> & <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
}),
});
const satelliteStreetsLayer = new TileLayer({
source: new XYZ({
url: `https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v12/tiles/256/{z}/{x}/{y}@2x?access_token=${MAPBOX_TOKEN}`,
tileSize: 512,
maxZoom: 20,
projection: "EPSG:3857",
attributions:
'数据来源：<a href="https://www.mapbox.com/">Mapbox</a> & <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
}),
});
const tiandituVectorLayer = new TileLayer({
source: new XYZ({
url: `https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_TOKEN}`,
projection: "EPSG:3857",
attributions: '数据来源：<a href="https://www.tianditu.gov.cn/">天地图</a>',
}),
});
const tiandituVectorAnnotationLayer = new TileLayer({
source: new XYZ({
url: `https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_TOKEN}`,
projection: "EPSG:3857",
attributions: '数据来源：<a href="https://www.tianditu.gov.cn/">天地图</a>',
}),
});
const tiandituImageLayer = new TileLayer({
source: new XYZ({
url: `https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_TOKEN}`,
projection: "EPSG:3857",
attributions: '数据来源：<a href="https://www.tianditu.gov.cn/">天地图</a>',
}),
});
const tiandituImageAnnotationLayer = new TileLayer({
source: new XYZ({
url: `https://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_TOKEN}`,
projection: "EPSG:3857",
attributions: '数据来源：<a href="https://www.tianditu.gov.cn/">天地图</a>',
}),
});
const tiandituVectorLayerGroup = new Group({
layers: [tiandituVectorLayer, tiandituVectorAnnotationLayer],
});
const tiandituImageLayerGroup = new Group({
layers: [tiandituImageLayer, tiandituImageAnnotationLayer],
});
const baseLayers = [
{
id: "mapbox-light",
name: "默认地图",
layer: lightMapLayer,
// layer: tiandituVectorLayerGroup,
img: mapboxLight.src,
},
{
id: "mapbox-satellite",
name: "卫星地图",
layer: satelliteLayer,
// layer: tiandituImageLayerGroup,
img: mapboxSatellite.src,
},
{
id: "mapbox-satellite-streets",
name: "卫星街道地图",
layer: satelliteStreetsLayer,
img: mapboxSatelliteStreet.src,
},
{
id: "mapbox-streets",
name: "街道地图",
layer: streetsLayer,
img: mapboxStreets.src,
},
];
const BaseLayers: React.FC = () => {
const map = useMap();
// 切换底图选项展开，控制显示和卸载
const [isShow, setShow] = useState(false);
const [isExpanded, setExpanded] = useState(false);
// 快速切换底图
const [activeId, setActiveId] = useState(INITIAL_LAYER);
// 初始化默认底图
useEffect(() => {
if (!map) return;
// 添加所有底图至地图并根据 activeId 控制可见性
baseLayers.forEach((layerInfo) => {
const layers = map.getLayers().getArray();
if (!layers.includes(layerInfo.layer)) {
map.getLayers().insertAt(0, layerInfo.layer);
}
layerInfo.layer.setVisible(layerInfo.id === activeId);
});
}, [map]);
const changeMapLayers = (id: string) => {
if (map) {
// 根据 id 设置每个图层的可见性
baseLayers.forEach(({ id: lid, layer }) => {
layer.setVisible(lid === id);
});
}
};
const handleQuickSwitch = () => {
const nextId =
activeId === baseLayers[0].id ? baseLayers[1].id : baseLayers[0].id;
setActiveId(nextId);
handleMapLayers(nextId);
};
const handleMapLayers = (id: string) => {
setActiveId(id);
changeMapLayers(id);
};
// 记录定时器，避免多次触发
const hideTimer = React.useRef<NodeJS.Timeout | null>(null);
const handleEnter = () => {
if (hideTimer.current) {
clearTimeout(hideTimer.current);
hideTimer.current = null;
}
setShow(true);
setExpanded(true);
};
const handleLeave = () => {
setShow(false);
hideTimer.current = setTimeout(() => {
setExpanded(false);
}, 300);
};
return (
<div className="absolute right-17 bottom-8 z-1300">
<div
className="w-20 h-20 bg-white rounded-xl drop-shadow-xl shadow-black"
onMouseEnter={handleEnter}
onMouseLeave={handleLeave}
>
<div className="w-20 h-20 p-1">
<button onClick={() => handleQuickSwitch()}>
<img
width={240}
height={100}
src={
activeId === baseLayers[0].id
? baseLayers[1].img
: baseLayers[0].img
}
alt={
activeId === baseLayers[0].id
? baseLayers[1].name
: baseLayers[0].name
}
className="object-cover object-left w-18 h-18 rounded-xl"
/>
<div className=" absolute left-1 bottom-1 flex w-18 h-auto items-center justify-center rounded-b-xl text-xs text-white bg-black opacity-80">
<span>
{activeId === baseLayers[0].id
? baseLayers[1].name
: baseLayers[0].name}
</span>
</div>
</button>
</div>
</div>
{isExpanded && (
<div
className={clsx(
"absolute flex right-24 bottom-0 w-90 h-25 bg-white rounded-xl drop-shadow-xl shadow-black transition-all duration-300",
isShow ? "opacity-100" : "opacity-0"
)}
onMouseEnter={handleEnter}
onMouseLeave={handleLeave}
>
{baseLayers.map((item) => (
<button
key={item.id}
className="flex flex-auto flex-col justify-center items-center text-gray-500 text-xs"
onClick={() => handleMapLayers(item.id)}
>
<img
width={240}
height={100}
src={item.img}
alt={item.name}
className={clsx(
"object-cover object-left w-16 h-16 rounded-md border-2 border-white hover:ring-2 ring-blue-300",
{
"ring-1 ring-blue-300": activeId === item.id,
}
)}
/>
<span className="pt-1">{item.name}</span>
</button>
))}
</div>
)}
</div>
);
};
export default BaseLayers;
src/components/olmap/core/Controls/DrawPanel.tsx → src/app/OlMap/Controls/DrawPanel.tsx
+31 -44
View File
@@ -31,15 +31,12 @@ import { useMap } from "../MapComponent";
const DrawPanel: React.FC = () => {
const map = useMap();
const [activeTool, setActiveTool] = useState<string>("pan");
const drawLayerRef = useRef<VectorLayer<VectorSource> | null>(null);
const [drawLayer, setDrawLayer] = useState<VectorLayer<VectorSource> | null>(
null
);
const [drawnFeatures, setDrawnFeatures] = useState<Feature<Geometry>[]>([]);
const [history, setHistory] = useState<{
stack: Feature<Geometry>[][];
index: number;
}>({
stack: [[]],
index: 0,
});
const [historyStack, setHistoryStack] = useState<Feature<Geometry>[][]>([]);
const [historyIndex, setHistoryIndex] = useState<number>(-1);
const drawInteractionRef = useRef<Draw | null>(null);
@@ -77,14 +74,13 @@ const DrawPanel: React.FC = () => {
});
map.addLayer(drawVectorLayer);
drawLayerRef.current = drawVectorLayer;
setDrawLayer(drawVectorLayer);
return () => {
if (drawInteractionRef.current && map) {
map.removeInteraction(drawInteractionRef.current);
drawInteractionRef.current = null;
}
drawLayerRef.current = null;
map.removeLayer(drawVectorLayer);
};
}, [map, drawInteractionRef]);
@@ -92,16 +88,14 @@ const DrawPanel: React.FC = () => {
// 保存到历史记录
const saveToHistory = useCallback(
(features: Feature<Geometry>[]) => {
setHistory((prev) => {
const newStack = prev.stack.slice(0, prev.index + 1);
newStack.push([...features]);
return {
stack: newStack,
index: newStack.length - 1,
};
setHistoryStack((prevStack) => {
const newHistory = prevStack.slice(0, historyIndex + 1);
newHistory.push([...features]);
setHistoryIndex(newHistory.length - 1);
return newHistory;
});
},
[]
[historyIndex]
);
// 添加绘图交互
@@ -109,7 +103,6 @@ const DrawPanel: React.FC = () => {
type: GeometryType,
geometryFunction?: GeometryFunction
) => {
const drawLayer = drawLayerRef.current;
if (!drawLayer) return;
if (!map) return;
@@ -160,13 +153,7 @@ const DrawPanel: React.FC = () => {
// 绘图完成事件
draw.on("drawend", (event: DrawEvent) => {
const feature = event.feature;
const currentFeatures = [...source.getFeatures()];
// Fallback in case feature has not been synced to source yet.
if (!currentFeatures.includes(feature)) {
currentFeatures.push(feature);
}
const currentFeatures = [...drawnFeatures, feature];
setDrawnFeatures(currentFeatures);
saveToHistory(currentFeatures);
});
@@ -257,35 +244,28 @@ const DrawPanel: React.FC = () => {
// 撤销功能
const handleUndo = () => {
if (history.index > 0) {
const newIndex = history.index - 1;
const previousFeatures = history.stack[newIndex];
if (historyIndex > 0) {
const newIndex = historyIndex - 1;
const previousFeatures = historyStack[newIndex];
updateDrawLayer(previousFeatures);
setDrawnFeatures(previousFeatures);
setHistory((prev) => ({
...prev,
index: newIndex,
}));
setHistoryIndex(newIndex);
}
};
// 重做功能
const handleRedo = () => {
if (history.index < history.stack.length - 1) {
const newIndex = history.index + 1;
const nextFeatures = history.stack[newIndex];
if (historyIndex < historyStack.length - 1) {
const newIndex = historyIndex + 1;
const nextFeatures = historyStack[newIndex];
updateDrawLayer(nextFeatures);
setDrawnFeatures(nextFeatures);
setHistory((prev) => ({
...prev,
index: newIndex,
}));
setHistoryIndex(newIndex);
}
};
// 删除所有绘制的要素
const handleDelete = () => {
const drawLayer = drawLayerRef.current;
if (!drawLayer) return;
const source = drawLayer.getSource();
@@ -302,7 +282,6 @@ const DrawPanel: React.FC = () => {
// 更新绘图图层
const updateDrawLayer = (features: Feature<Geometry>[]) => {
const drawLayer = drawLayerRef.current;
if (!drawLayer) return;
const source = drawLayer.getSource();
@@ -312,9 +291,17 @@ const DrawPanel: React.FC = () => {
}
};
// 初始化历史记录
useEffect(() => {
// 初始化空的历史记录
if (historyStack.length === 0) {
saveToHistory([]);
}
}, [historyStack.length, saveToHistory]);
// 判断按钮是否应该禁用
const isUndoDisabled = history.index <= 0;
const isRedoDisabled = history.index >= history.stack.length - 1;
const isUndoDisabled = historyIndex <= 0;
const isRedoDisabled = historyIndex >= historyStack.length - 1;
const isDeleteDisabled = drawnFeatures.length === 0;
const isSaveDisabled = drawnFeatures.length === 0;
src/components/olmap/core/Controls/HistoryDataPanel.tsx → src/app/OlMap/Controls/HistoryDataPanel.tsx
+88 -176
View File
@@ -15,14 +15,13 @@ import {
Chip,
CircularProgress,
Divider,
IconButton,
Stack,
Tab,
Tabs,
Tooltip,
Typography,
} from "@mui/material";
import { Close, Refresh, ShowChart, TableChart } from "@mui/icons-material";
import { Refresh, ShowChart, TableChart } from "@mui/icons-material";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { zhCN } from "@mui/x-data-grid/locales";
import ReactECharts from "echarts-for-react";
@@ -35,8 +34,6 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { zhCN as pickerZhCN } from "@mui/x-date-pickers/locales";
import config from "@/config/config";
import { apiFetch } from "@/lib/apiFetch";
import PanelEmptyState from "@components/olmap/common/PanelEmptyState";
dayjs.extend(utc);
dayjs.extend(timezone);
@@ -61,26 +58,12 @@ export interface SCADADataPanelProps {
defaultTab?: "chart" | "table";
/** Y 轴数值的小数位数 */
fractionDigits?: number;
/** 外部传入开始时间（ISO8601 字符串），用于初始化并触发查询 */
start_time?: string;
/** 外部传入结束时间（ISO8601 字符串），用于初始化并触发查询 */
end_time?: string;
/** 关闭面板 */
onClose: () => void;
}
type PanelTab = "chart" | "table";
type LoadingState = "idle" | "loading" | "success" | "error";
const panelHeaderActionSx = {
color: "primary.contrastText",
backgroundColor: "rgba(255,255,255,0.08)",
"&:hover": {
backgroundColor: "rgba(255,255,255,0.18)",
},
};
/**
* 从后端 API 获取 SCADA 数据
*/
@@ -108,22 +91,22 @@ const fetchFromBackend = async (
.join(",");
// 监测值数据接口（use_cleaned=false）
const rawDataUrl = `${config.BACKEND_URL}/api/v1/timeseries/views/element-scada-readings?element_id=${feature_ids}&start_time=${start_time}&end_time=${end_time}&use_cleaned=false`;
const rawDataUrl = `${config.BACKEND_URL}/api/v1/composite/element-scada?element_id=${feature_ids}&start_time=${start_time}&end_time=${end_time}&use_cleaned=false`;
// 清洗数据接口（use_cleaned=true）
const cleanedDataUrl = `${config.BACKEND_URL}/api/v1/timeseries/views/element-scada-readings?element_id=${feature_ids}&start_time=${start_time}&end_time=${end_time}&use_cleaned=true`;
const cleanedDataUrl = `${config.BACKEND_URL}/api/v1/composite/element-scada?element_id=${feature_ids}&start_time=${start_time}&end_time=${end_time}&use_cleaned=true`;
// 模拟数据接口
const simulationDataUrl = `${config.BACKEND_URL}/api/v1/timeseries/views/element-simulations?feature_infos=${feature_infos}&start_time=${start_time}&end_time=${end_time}`;
const simulationDataUrl = `${config.BACKEND_URL}/api/v1/composite/element-simulation?feature_infos=${feature_infos}&start_time=${start_time}&end_time=${end_time}`;
// 策略模拟数据接口
const schemeSimulationDataUrl = `${config.BACKEND_URL}/api/v1/timeseries/views/element-simulations?feature_infos=${feature_infos}&start_time=${start_time}&end_time=${end_time}&scheme_type=${scheme_type}&scheme_name=${scheme_name}`;
const schemeSimulationDataUrl = `${config.BACKEND_URL}/api/v1/composite/element-simulation?feature_infos=${feature_infos}&start_time=${start_time}&end_time=${end_time}&scheme_type=${scheme_type}&scheme_name=${scheme_name}`;
try {
if (type === "none") {
// 查询清洗值和监测值
const [cleanedRes, rawRes] = await Promise.all([
apiFetch(cleanedDataUrl)
fetch(cleanedDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
apiFetch(rawDataUrl)
fetch(rawDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
]);
@@ -141,18 +124,15 @@ const fetchFromBackend = async (
"raw"
);
} else if (type === "scheme") {
// 查询策略模拟值、实时模拟值、清洗值和监测值
const [cleanedRes, rawRes, simulationRes, schemeSimRes] = await Promise.all([
apiFetch(cleanedDataUrl)
// 查询策略模拟值、清洗值和监测值
const [cleanedRes, rawRes, schemeSimRes] = await Promise.all([
fetch(cleanedDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
apiFetch(rawDataUrl)
fetch(rawDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
apiFetch(simulationDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
apiFetch(schemeSimulationDataUrl)
fetch(schemeSimulationDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
]);
@@ -161,28 +141,50 @@ const fetchFromBackend = async (
// 如果清洗数据有值，则不显示原始监测值
const rawData =
cleanedData.length > 0 ? [] : transformBackendData(rawRes, featureIds);
const simulationData = transformBackendData(simulationRes, featureIds);
const schemeSimData = transformBackendData(schemeSimRes, featureIds);
return mergeMultipleTimeSeriesData(
[
{ data: cleanedData, suffix: "clean" },
{ data: rawData, suffix: "raw" },
{ data: simulationData, suffix: "sim" },
{ data: schemeSimData, suffix: "scheme_sim" },
],
featureIds
// 合并三组数据
const timeMap = new Map<string, Record<string, number | null>>();
[cleanedData, rawData, schemeSimData].forEach((data, index) => {
const suffix = ["clean", "raw", "scheme_sim"][index];
data.forEach((point) => {
if (!timeMap.has(point.timestamp)) {
timeMap.set(point.timestamp, {});
}
const values = timeMap.get(point.timestamp)!;
featureIds.forEach((deviceId) => {
const value = point.values[deviceId];
if (value !== undefined) {
values[`${deviceId}_${suffix}`] = value;
}
});
});
});
const result = Array.from(timeMap.entries()).map(
([timestamp, values]) => ({
timestamp,
values,
})
);
result.sort(
(a, b) =>
new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
);
return result;
} else {
// realtime: 查询模拟值、清洗值和监测值
const [cleanedRes, rawRes, simulationRes] = await Promise.all([
apiFetch(cleanedDataUrl)
fetch(cleanedDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
apiFetch(rawDataUrl)
fetch(rawDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
apiFetch(simulationDataUrl)
fetch(simulationDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
]);
@@ -329,42 +331,6 @@ const mergeTimeSeriesData = (
return result;
};
const mergeMultipleTimeSeriesData = (
datasets: Array<{
data: TimeSeriesPoint[];
suffix: string;
}>,
deviceIds: string[]
): TimeSeriesPoint[] => {
const timeMap = new Map<string, Record<string, number | null>>();
datasets.forEach(({ data, suffix }) => {
data.forEach((point) => {
if (!timeMap.has(point.timestamp)) {
timeMap.set(point.timestamp, {});
}
const values = timeMap.get(point.timestamp)!;
deviceIds.forEach((deviceId) => {
const value = point.values[deviceId];
if (value !== undefined) {
values[`${deviceId}_${suffix}`] = value;
}
});
});
});
const result = Array.from(timeMap.entries()).map(([timestamp, values]) => ({
timestamp,
values,
}));
result.sort(
(a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
);
return result;
};
const formatTimestamp = (timestamp: string) =>
dayjs(timestamp).tz("Asia/Shanghai").format("YYYY-MM-DD HH:mm");
@@ -414,24 +380,21 @@ const emptyStateMessages: Record<
> = {
chart: {
title: "暂无时序数据",
subtitle: "请调整时间范围，或确认所选设备在该时段已有数据。",
subtitle: "请切换时间段来获取曲线",
},
table: {
title: "暂无表格数据",
subtitle: "请调整时间范围，或确认所选设备在该时段已有数据。",
subtitle: "请切换时间段来获取记录",
},
};
const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
featureInfos,
type = "none",
scheme_type = "burst_analysis",
scheme_type = "burst_Analysis",
scheme_name,
defaultTab = "chart",
fractionDigits = 2,
start_time,
end_time,
onClose,
}) => {
// 从 featureInfos 中提取设备 ID 列表
const deviceIds = useMemo(
@@ -439,24 +402,8 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
[featureInfos]
);
const [from, setFrom] = useState<Dayjs>(() => {
if (start_time) {
const parsedStart = dayjs(start_time);
if (parsedStart.isValid()) {
return parsedStart;
}
}
return dayjs().subtract(1, "day");
});
const [to, setTo] = useState<Dayjs>(() => {
if (end_time) {
const parsedEnd = dayjs(end_time);
if (parsedEnd.isValid()) {
return parsedEnd;
}
}
return dayjs();
});
const [from, setFrom] = useState<Dayjs>(() => dayjs().subtract(1, "day"));
const [to, setTo] = useState<Dayjs>(() => dayjs());
const [activeTab, setActiveTab] = useState<PanelTab>(defaultTab);
const [timeSeries, setTimeSeries] = useState<TimeSeriesPoint[]>([]);
const [loadingState, setLoadingState] = useState<LoadingState>("idle");
@@ -470,30 +417,10 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
setActiveTab(defaultTab);
}, [defaultTab]);
useEffect(() => {
if (!start_time && !end_time) return;
if (start_time) {
const parsedStart = dayjs(start_time);
if (parsedStart.isValid()) {
setFrom((prev) => (parsedStart.isSame(prev) ? prev : parsedStart));
}
}
if (end_time) {
const parsedEnd = dayjs(end_time);
if (parsedEnd.isValid()) {
setTo((prev) => (parsedEnd.isSame(prev) ? prev : parsedEnd));
}
}
}, [start_time, end_time]);
const normalizedRange = useMemo(() => ensureValidRange(from, to), [from, to]);
const hasDevices = deviceIds.length > 0;
const hasData = timeSeries.length > 0;
const featureInfosKey = useMemo(
() => JSON.stringify(featureInfos),
[featureInfos]
);
const dataset = useMemo(
() => buildDataset(timeSeries, deviceIds, fractionDigits),
@@ -540,7 +467,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
} else {
setTimeSeries([]);
}
}, [featureInfosKey, handleFetch, hasDevices]);
}, [JSON.stringify(featureInfos)]);
// 当设备数量变化时，调整数据源选择
useEffect(() => {
@@ -567,7 +494,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
const suffixes = [
{ key: "clean", name: "清洗值" },
{ key: "raw", name: "监测值" },
{ key: "sim", name: "实时模拟值" },
{ key: "sim", name: "模拟值" },
{ key: "scheme_sim", name: "方案模拟值" },
];
@@ -614,23 +541,28 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
);
const renderEmpty = () => {
if (!hasDevices) {
return (
<PanelEmptyState
icon={<ShowChart />}
title="尚未选择地图要素"
description="请在地图上选择一个要素以查看历史数据。"
/>
);
}
const message = emptyStateMessages[activeTab];
return (
<PanelEmptyState
icon={activeTab === "chart" ? <ShowChart /> : <TableChart />}
title={message.title}
description={message.subtitle}
/>
<Box
sx={{
flex: 1,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
py: 8,
color: "text.secondary",
height: "100%",
}}
>
<ShowChart sx={{ fontSize: 64, mb: 2, opacity: 0.3 }} />
<Typography variant="h6" gutterBottom sx={{ fontWeight: 500 }}>
{message.title}
</Typography>
<Typography variant="body2" color="text.secondary">
{message.subtitle}
</Typography>
</Box>
);
};
@@ -668,34 +600,20 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
: suffix === "raw"
? "监测值"
: suffix === "sim"
? "实时模拟"
? "模拟"
: "方案模拟";
series.push({
name: `${id} (${displayName})`,
type: "line",
symbol:
suffix === "clean"
? "circle"
: suffix === "raw"
? "diamond"
: "none",
symbolSize: suffix === "clean" || suffix === "raw" ? 7 : 0,
showSymbol: suffix === "clean" || suffix === "raw",
symbol: "none",
sampling: "lttb",
connectNulls: suffix !== "clean" && suffix !== "raw",
connectNulls: true,
itemStyle: {
color: colors[(index * 4 + sIndex) % colors.length],
},
data: dataset.map((item) => item[key]),
lineStyle:
suffix === "clean" || suffix === "raw"
? { width: 0 }
: undefined,
areaStyle:
suffix === "clean" || suffix === "raw"
? undefined
: {
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
@@ -858,11 +776,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
return (
<>
{/* 主面板 */}
<Draggable
nodeRef={draggableRef}
handle=".drag-handle"
cancel=".panel-close-button"
>
<Draggable nodeRef={draggableRef} handle=".drag-handle">
<Box
ref={draggableRef}
sx={{
@@ -883,7 +797,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
border: "none",
display: "flex",
flexDirection: "column",
zIndex: 1290,
zIndex: 1300,
backgroundColor: "white",
overflow: "hidden",
"&:hover": {
@@ -927,17 +841,6 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
}}
/>
</Stack>
<Tooltip title="关闭">
<IconButton
className="panel-close-button"
size="small"
onClick={onClose}
aria-label="关闭历史数据面板"
sx={panelHeaderActionSx}
>
<Close fontSize="small" />
</IconButton>
</Tooltip>
</Stack>
</Box>
@@ -1044,6 +947,15 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
</Stack>
</LocalizationProvider>
{!hasDevices && (
<Typography
variant="caption"
color="warning.main"
sx={{ mt: 1, display: "block" }}
>
请选择一个要素以查看其历史数据。
</Typography>
)}
{error && (
<Typography
variant="caption"
src/app/OlMap/Controls/LayerControl.tsx
+180
View File
@@ -0,0 +1,180 @@
import React, { useState, useEffect, useCallback } from "react";
import { useData, useMap } from "../MapComponent";
import { Checkbox, FormControlLabel } from "@mui/material";
import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
import VectorLayer from "ol/layer/Vector";
import VectorTileLayer from "ol/layer/VectorTile";
import { DeckLayer } from "@utils/layers";
// 定义统一的图层项接口
interface LayerItem {
id: string;
name: string;
visible: boolean;
type: "ol" | "deck";
layerRef: any; // OpenLayers Layer 实例或 deck.gl layer 对象
}
const LayerControl: React.FC = () => {
const map = useMap();
const data = useData();
if (!data) return;
const {
deckLayer,
isContourLayerAvailable,
isWaterflowLayerAvailable,
setShowWaterflowLayer,
setShowContourLayer,
} = data;
const [layerItems, setLayerItems] = useState<LayerItem[]>([]);
const layerOrder = [
"junctions",
"reservoirs",
"tanks",
"pipes",
"pumps",
"valves",
"scada",
"waterflowLayer",
"junctionContourLayer",
];
// 更新图层列表
const updateLayers = useCallback(() => {
if (!map || !data) return;
const items: LayerItem[] = [];
// 1. 获取 OpenLayers 图层
const mapLayers = map.getLayers().getArray();
mapLayers.forEach((layer) => {
// 筛选特定类型的 OpenLayers 图层
if (
layer instanceof WebGLVectorTileLayer ||
layer instanceof VectorTileLayer ||
layer instanceof VectorLayer
) {
const value = layer.get("value");
const name = layer.get("name");
// 只有设置了 value (作为 ID) 的图层才会被纳入控制
if (value) {
items.push({
id: value,
name: name || value,
visible: layer.getVisible(),
type: "ol",
layerRef: layer,
});
}
}
});
// 2. 获取 DeckLayer 中的子图层
if (deckLayer && deckLayer instanceof DeckLayer) {
const deckLayers = deckLayer.getDeckLayers();
deckLayers.forEach((layer: any) => {
if (layer && layer.id) {
// 仅处理 junctionContourLayer 和 waterflowLayer
if (
layer.id !== "junctionContourLayer" &&
layer.id !== "waterflowLayer"
) {
return;
}
// 检查可用性
if (
(layer.id === "junctionContourLayer" && !isContourLayerAvailable) ||
(layer.id === "waterflowLayer" && !isWaterflowLayerAvailable)
) {
return; // 跳过不可用图层
}
const visible =
deckLayer.getDeckLayerVisible(layer.id) ??
layer.props?.visible ??
true;
items.push({
id: layer.props.id,
name: layer.props.name, // 使用 name 属性作为显示名称
visible: visible,
type: "deck",
layerRef: layer,
});
}
});
}
// 过滤并排序
const sortedItems = items
.filter((item) => layerOrder.includes(item.id))
.sort((a, b) => {
const indexA = layerOrder.indexOf(a.id);
const indexB = layerOrder.indexOf(b.id);
return indexA - indexB;
});
setLayerItems(sortedItems);
}, [map, deckLayer, isWaterflowLayerAvailable, isContourLayerAvailable]);
useEffect(() => {
updateLayers();
if (map) {
const layerCollection = map.getLayers();
layerCollection.on("change:length", updateLayers);
}
return () => {
if (map) {
map.getLayers().un("change:length", updateLayers);
}
};
}, [map, updateLayers]);
const handleVisibilityChange = (item: LayerItem, checked: boolean) => {
if (item.type === "ol") {
item.layerRef.setVisible(checked);
} else if (item.type === "deck" && deckLayer) {
if (item.id === "junctionContourLayer") {
setShowContourLayer && setShowContourLayer(checked);
}
if (item.id === "waterflowLayer") {
setShowWaterflowLayer && setShowWaterflowLayer(checked);
}
}
setLayerItems((prev) =>
prev.map((i) => (i.id === item.id ? { ...i, visible: checked } : i)),
);
};
if (!data) {
return <div>Loading...</div>;
}
return (
<div className="absolute left-4 bottom-4 bg-white rounded-md drop-shadow-lg z-1300 opacity-85 hover:opacity-100 transition-opacity max-w-xs">
<div className="ml-3 grid grid-cols-3">
{layerItems.map((item) => (
<FormControlLabel
key={item.id}
control={
<Checkbox
checked={item.visible}
onChange={(e) => handleVisibilityChange(item, e.target.checked)}
size="small"
/>
}
label={item.name}
sx={{
fontSize: "0.7rem",
"& .MuiFormControlLabel-label": { fontSize: "0.7rem" },
}}
/>
))}
</div>
</div>
);
};
export default LayerControl;
src/app/OlMap/Controls/PropertyPanel.tsx
+234
View File
@@ -0,0 +1,234 @@
import React from "react";
interface BaseProperty {
label: string;
value: string | number;
unit?: string;
formatter?: (value: string | number) => string;
}
// 新增：表格型属性（用于二级数据）
interface TableProperty {
type: "table";
label: string;
columns: string[]; // 表头
rows: (string | number)[][]; // 每行的数据
}
type PropertyItem = BaseProperty | TableProperty;
interface PropertyPanelProps {
id?: string;
type?: string;
properties?: PropertyItem[];
}
const PropertyPanel: React.FC<PropertyPanelProps> = ({
id,
type = "未知类型",
properties = [],
}) => {
const formatValue = (property: BaseProperty) => {
if (property.formatter) {
return property.formatter(property.value);
}
if (property.unit) {
return `${property.value} ${property.unit}`;
}
return property.value;
};
const isImportantKeys = ["ID", "类型", "Name", "面积", "长度"];
// 统计属性数量（表格型按行数计入）
const totalProps = id
? 2 +
properties.reduce((sum, p) => {
if ("type" in p && p.type === "table") return sum + p.rows.length;
return sum + 1;
}, 0)
: 0;
return (
<div className="absolute top-4 right-4 bg-white shadow-2xl rounded-xl overflow-hidden w-96 max-h-[850px] flex flex-col backdrop-blur-sm z-1300 opacity-95 hover:opacity-100 transition-all duration-300 ">
{/* 头部 */}
<div className="flex justify-between items-center px-5 py-4 bg-[#257DD4] text-white">
<div className="flex items-center gap-2">
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
<h3 className="text-lg font-semibold">属性面板</h3>
</div>
</div>
{/* 内容区域 */}
<div className="flex-1 overflow-y-auto px-4 py-3">
{!id ? (
<div className="flex flex-col items-center justify-center py-12 text-gray-400">
<svg
className="w-16 h-16 mb-3"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
/>
</svg>
<p className="text-sm">暂无属性信息</p>
<p className="text-xs mt-1">请选择一个要素以查看其属性</p>
</div>
) : (
<div className="space-y-2">
{/* ID 属性 */}
<div className="group rounded-lg p-3 transition-all duration-200 bg-blue-50 hover:bg-blue-100 border-l-4 border-blue-500">
<div className="flex justify-between items-start gap-3">
<span className="font-medium text-xs uppercase tracking-wide text-blue-700">
ID
</span>
<span className="text-sm font-semibold text-right flex-1 text-blue-900">
{id}
</span>
</div>
</div>
{/* 类型属性 */}
<div className="group rounded-lg p-3 transition-all duration-200 bg-blue-50 hover:bg-blue-100 border-l-4 border-blue-500">
<div className="flex justify-between items-start gap-3">
<span className="font-medium text-xs uppercase tracking-wide text-blue-700">
类型
</span>
<span className="text-sm font-semibold text-right flex-1 text-blue-900">
{type}
</span>
</div>
</div>
{/* 其他属性（包含二级表格） */}
{properties.map((property, index) => {
// 二级表格
if ("type" in property && property.type === "table") {
return (
<div
key={`table-${index}`}
className="group rounded-lg p-3 transition-all duration-200 bg-gray-50 hover:bg-gray-100"
>
<div className="flex justify-between items-start gap-3">
<span className="font-medium text-xs uppercase tracking-wide text-gray-600">
{property.label}
</span>
</div>
<div className="ml-4 mt-2 border border-gray-300 rounded-md overflow-hidden shadow-sm">
<table className="w-full text-xs">
<thead className="bg-gray-200 text-gray-700">
<tr>
{property.columns.map((col, ci) => (
<th
key={ci}
className="px-3 py-2 text-left font-semibold"
>
{col}
</th>
))}
</tr>
</thead>
<tbody className="divide-y divide-gray-300">
{property.rows.map((row, ri) => (
<tr key={ri} className="bg-white hover:bg-gray-50">
{row.map((cell, cci) => (
<td
key={cci}
className="px-3 py-2 text-gray-800"
>
{cell}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}
// 普通属性
const base = property as BaseProperty;
const isImportant = isImportantKeys.includes(base.label);
return (
<div
key={`prop-${index}`}
className={`group rounded-lg p-3 transition-all duration-200 ${
isImportant
? "bg-blue-50 hover:bg-blue-100 border-l-4 border-blue-500"
: "bg-gray-50 hover:bg-gray-100"
}`}
>
<div className="flex justify-between items-start gap-3">
<span
className={`font-medium text-xs uppercase tracking-wide ${
isImportant ? "text-blue-700" : "text-gray-600"
}`}
>
{base.label}
</span>
<span
className={`text-sm font-semibold text-right flex-1 ${
isImportant ? "text-blue-900" : "text-gray-800"
}`}
>
{formatValue(base)}
</span>
</div>
</div>
);
})}
</div>
)}
</div>
{/* 底部统计区域 */}
<div className="px-5 py-3 bg-gray-50 border-t border-gray-200">
<div className="flex items-center justify-between text-xs">
<span className="text-gray-600 flex items-center gap-1">
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
/>
</svg>
共 {totalProps} 个属性
</span>
{id && (
<span className="text-green-600 flex items-center gap-1 font-medium">
<span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
已选中
</span>
)}
</div>
</div>
</div>
);
};
export default PropertyPanel;
src/app/OlMap/Controls/ScaleLine.tsx
+47
View File
@@ -0,0 +1,47 @@
import React, { useEffect, useState } from "react";
import { useMap } from "../MapComponent";
const Scale: React.FC = () => {
const map = useMap();
const [zoomLevel, setZoomLevel] = useState(0);
const [coordinates, setCoordinates] = useState<[number, number]>([0, 0]);
useEffect(() => {
if (!map) return;
const updateZoomLevel = () => {
const zoom = map.getView().getZoom();
setZoomLevel(zoom ?? 0); // 如果 zoom 是 undefined，则使用默认值 0
};
const updateCoordinates = (event: any) => {
const coords = event.coordinate;
const transformedCoords = coords.map((c: number) =>
parseFloat(c.toFixed(4))
);
setCoordinates(transformedCoords);
};
map.on("moveend", updateZoomLevel);
map.on("pointermove", updateCoordinates);
// Initialize values
updateZoomLevel();
return () => {
map.un("moveend", updateZoomLevel);
map.un("pointermove", updateCoordinates);
};
}, [map]);
return (
<div className="absolute bottom-0 right-0 flex col-auto px-2 bg-white bg-opacity-70 text-black rounded-tl shadow-md text-sm z-1300">
<div className="px-1">缩放: {zoomLevel.toFixed(1)}</div>
<div className="px-1">
坐标: {coordinates[0]}, {coordinates[1]}
</div>
</div>
);
};
export default Scale;
src/app/OlMap/Controls/StyleEditorPanel.tsx
+1884
View File
File diff suppressed because it is too large Load Diff
src/app/OlMap/Controls/StyleLegend.tsx
+105
View File
@@ -0,0 +1,105 @@
import React from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
interface LegendStyleConfig {
layerName: string;
layerId: string;
property: string;
colors: string[];
type: string; // 图例类型
dimensions: number[]; // 尺寸大小
breaks: number[]; // 分段值
}
// 图例组件
// 该组件用于显示图层样式的图例，包含属性名称、颜色、尺寸和分段值等信息
// 通过传入的配置对象动态生成图例内容，适用于不同的样式配置
// 使用时需要确保传入的 colors、dimensions 和 breaks 数组长度一致
const StyleLegend: React.FC<LegendStyleConfig> = ({
layerName,
layerId,
property,
colors,
type, // 图例类型
dimensions,
breaks,
}) => {
return (
<Box
key={layerId}
className="bg-white p-3 rounded-xl max-w-xs opacity-95 transition-opacity duration-300 hover:opacity-100"
>
<Typography variant="subtitle2" gutterBottom>
{layerName} - {property}
</Typography>
{[...Array(breaks.length)].map((_, index) => {
const color = colors[index]; // 默认颜色为黑色
const dimension = dimensions[index]; // 默认尺寸为16
// // 处理第一个区间（小于 breaks[0]）
// if (index === 0) {
// return (
// <Box key={index} className="flex items-center gap-2 mb-1">
// <Box
// sx={
// type === "point"
// ? {
// width: dimension,
// height: dimension,
// borderRadius: "50%",
// backgroundColor: color,
// }
// : {
// width: 16,
// height: dimension,
// backgroundColor: color,
// border: `1px solid ${color}`,
// }
// }
// />
// <Typography variant="caption" className="text-xs">
// {"<"} {breaks[0]?.toFixed(1)}
// </Typography>
// </Box>
// );
// }
// 处理中间区间（breaks[index] - breaks[index + 1]）
if (index + 1 < breaks.length) {
const prevValue = breaks[index];
const currentValue = breaks[index + 1];
return (
<Box key={index} className="flex items-center gap-2 mb-1">
<Box
sx={
type === "point"
? {
width: dimension,
height: dimension,
borderRadius: "50%",
backgroundColor: color,
}
: {
width: 16,
height: dimension,
backgroundColor: color,
border: `1px solid ${color}`,
}
}
/>
<Typography variant="caption" className="text-xs">
{prevValue?.toFixed(1)} - {currentValue?.toFixed(1)}
</Typography>
</Box>
);
}
return null;
})}
</Box>
);
};
export default StyleLegend;
export type { LegendStyleConfig };
src/app/OlMap/Controls/Timeline.tsx
+843
View File
@@ -0,0 +1,843 @@
"use client";
import React, { useState, useEffect, useRef, useCallback } from "react";
import { useNotification } from "@refinedev/core";
import Draggable from "react-draggable";
import {
Box,
Button,
Slider,
Typography,
Paper,
MenuItem,
Select,
FormControl,
InputLabel,
IconButton,
Stack,
Tooltip,
} from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import "dayjs/locale/zh-cn"; // 引入中文包
import dayjs from "dayjs";
import { PlayArrow, Pause, Stop, Refresh } from "@mui/icons-material";
import { TbRewindBackward15, TbRewindForward15 } from "react-icons/tb";
import { FiSkipBack, FiSkipForward } from "react-icons/fi";
import { useData } from "../MapComponent";
import { config, NETWORK_NAME } from "@/config/config";
import { useMap } from "../MapComponent";
interface TimelineProps {
schemeDate?: Date;
timeRange?: { start: Date; end: Date };
disableDateSelection?: boolean;
schemeName?: string;
schemeType?: string;
}
const Timeline: React.FC<TimelineProps> = ({
schemeDate,
timeRange,
disableDateSelection = false,
schemeName = "",
schemeType = "burst_Analysis",
}) => {
const data = useData();
if (!data) {
return <div>Loading...</div>; // 或其他占位符
}
const {
currentTime,
setCurrentTime,
selectedDate,
setSelectedDate,
setCurrentJunctionCalData,
setCurrentPipeCalData,
junctionText,
pipeText,
} = data;
if (
setCurrentTime === undefined ||
currentTime === undefined ||
selectedDate === undefined ||
setSelectedDate === undefined
) {
return <div>Loading...</div>; // 或其他占位符
}
const { open } = useNotification();
const [isPlaying, setIsPlaying] = useState<boolean>(false);
const [playInterval, setPlayInterval] = useState<number>(15000); // 毫秒
const [calculatedInterval, setCalculatedInterval] = useState<number>(15); // 分钟
const [isCalculating, setIsCalculating] = useState<boolean>(false);
// 计算时间轴范围
const minTime = timeRange
? timeRange.start.getHours() * 60 + timeRange.start.getMinutes()
: 0;
const maxTime = timeRange
? timeRange.end.getHours() * 60 + timeRange.end.getMinutes()
: 1440;
useEffect(() => {
if (schemeDate) {
setSelectedDate(schemeDate);
}
}, [schemeDate]);
// 新增：用于 Draggable 的 nodeRef
const draggableRef = useRef<HTMLDivElement>(null);
const intervalRef = useRef<NodeJS.Timeout | null>(null);
const timelineRef = useRef<HTMLDivElement>(null);
// 添加缓存引用
const nodeCacheRef = useRef<Map<string, any[]>>(new Map());
const linkCacheRef = useRef<Map<string, any[]>>(new Map());
// 添加防抖引用
const debounceRef = useRef<NodeJS.Timeout | null>(null);
const fetchFrameData = async (
queryTime: Date,
junctionProperties: string,
pipeProperties: string,
schemeName: string,
schemeType: string,
) => {
const query_time = queryTime.toISOString();
let nodeRecords: any = { results: [] };
let linkRecords: any = { results: [] };
const requests: Promise<Response>[] = [];
let nodePromise: Promise<any> | null = null;
let linkPromise: Promise<any> | null = null;
// 检查node缓存
if (junctionProperties !== "" && junctionProperties !== "elevation") {
const nodeCacheKey = `${query_time}_${junctionProperties}_${schemeName}_${schemeType}`;
if (nodeCacheRef.current.has(nodeCacheKey)) {
nodeRecords = nodeCacheRef.current.get(nodeCacheKey)!;
} else {
disableDateSelection && schemeName
? (nodePromise = fetch(
// `${config.BACKEND_URL}/queryallschemerecordsbytimeproperty/?querytime=${query_time}&type=node&property=${junctionProperties}&schemename=${schemeName}`
`${config.BACKEND_URL}/api/v1/scheme/query/by-scheme-time-property?scheme_type=${schemeType}&scheme_name=${schemeName}&query_time=${query_time}&type=node&property=${junctionProperties}`,
))
: (nodePromise = fetch(
// `${config.BACKEND_URL}/queryallrecordsbytimeproperty/?querytime=${query_time}&type=node&property=${junctionProperties}`
`${config.BACKEND_URL}/api/v1/realtime/query/by-time-property?query_time=${query_time}&type=node&property=${junctionProperties}`,
));
requests.push(nodePromise);
}
}
// 处理特殊属性名称
if (pipeProperties === "unit_headloss") pipeProperties = "headloss";
// 检查link缓存
if (pipeProperties !== "" && pipeProperties !== "diameter") {
const linkCacheKey = `${query_time}_${pipeProperties}_${schemeName}_${schemeType}`;
if (linkCacheRef.current.has(linkCacheKey)) {
linkRecords = linkCacheRef.current.get(linkCacheKey)!;
} else {
disableDateSelection && schemeName
? (linkPromise = fetch(
// `${config.BACKEND_URL}/queryallschemerecordsbytimeproperty/?querytime=${query_time}&type=link&property=${pipeProperties}&schemename=${schemeName}`
`${config.BACKEND_URL}/api/v1/scheme/query/by-scheme-time-property?scheme_type=${schemeType}&scheme_name=${schemeName}&query_time=${query_time}&type=link&property=${pipeProperties}`,
))
: (linkPromise = fetch(
// `${config.BACKEND_URL}/queryallrecordsbytimeproperty/?querytime=${query_time}&type=link&property=${pipeProperties}`
`${config.BACKEND_URL}/api/v1/realtime/query/by-time-property?query_time=${query_time}&type=link&property=${pipeProperties}`,
));
requests.push(linkPromise);
}
}
// 等待所有有效请求
const responses = await Promise.all(requests);
if (nodePromise) {
const nodeResponse = responses.shift()!;
if (!nodeResponse.ok)
throw new Error(`Node fetch failed: ${nodeResponse.status}`);
nodeRecords = await nodeResponse.json();
// 缓存数据（修复键以包含 schemeName）
nodeCacheRef.current.set(
`${query_time}_${junctionProperties}_${schemeName}_${schemeType}`,
nodeRecords || [],
);
}
if (linkPromise) {
const linkResponse = responses.shift()!;
if (!linkResponse.ok)
throw new Error(`Link fetch failed: ${linkResponse.status}`);
linkRecords = await linkResponse.json();
// 缓存数据（修复键以包含 schemeName）
linkCacheRef.current.set(
`${query_time}_${pipeProperties}_${schemeName}_${schemeType}`,
linkRecords || [],
);
}
// 更新状态
updateDataStates(nodeRecords.results || [], linkRecords.results || []);
};
// 提取更新状态的逻辑
const updateDataStates = (nodeResults: any[], linkResults: any[]) => {
if (setCurrentJunctionCalData) {
setCurrentJunctionCalData(nodeResults);
} else {
console.log("setCurrentJunctionCalData is undefined");
}
if (setCurrentPipeCalData) {
setCurrentPipeCalData(linkResults);
} else {
console.log("setCurrentPipeCalData is undefined");
}
};
// 时间刻度数组 (每5分钟一个刻度)
const timeMarks = Array.from({ length: 288 }, (_, i) => ({
value: i * 5,
label: i % 24 === 0 ? formatTime(i * 5) : "",
}));
// 格式化时间显示
function formatTime(minutes: number): string {
const hours = Math.floor(minutes / 60);
const mins = minutes % 60;
return `${hours.toString().padStart(2, "0")}:${mins
.toString()
.padStart(2, "0")}`;
}
function currentTimeToDate(selectedDate: Date, minutes: number): Date {
const date = new Date(selectedDate);
const hours = Math.floor(minutes / 60);
const mins = minutes % 60;
date.setHours(hours, mins, 0, 0);
return date;
}
// 播放时间间隔选项
const intervalOptions = [
{ value: 5000, label: "5秒" },
{ value: 10000, label: "10秒" },
{ value: 15000, label: "15秒" },
{ value: 20000, label: "20秒" },
];
// 强制计算时间段选项
const calculatedIntervalOptions = [
{ value: 1440, label: "1 天" },
{ value: 60, label: "1 小时" },
{ value: 30, label: "30 分钟" },
{ value: 15, label: "15 分钟" },
{ value: 5, label: "5 分钟" },
];
// 处理时间轴滑动
const handleSliderChange = useCallback(
(event: Event, newValue: number | number[]) => {
const value = Array.isArray(newValue) ? newValue[0] : newValue;
// 如果有时间范围限制，只允许在范围内拖动
if (timeRange && (value < minTime || value > maxTime)) {
return;
}
// 防抖设置currentTime，避免频繁触发数据获取
if (debounceRef.current) {
clearTimeout(debounceRef.current);
}
debounceRef.current = setTimeout(() => {
setCurrentTime(value);
}, 500); // 500ms 防抖延迟
},
[timeRange, minTime, maxTime],
);
// 播放控制
const handlePlay = useCallback(() => {
if (!isPlaying) {
// if (junctionText === "" && pipeText === "") {
// open?.({
// type: "error",
// message: "请至少设定并应用一个图层的样式。",
// });
// return;
// }
setIsPlaying(true);
intervalRef.current = setInterval(() => {
setCurrentTime((prev) => {
let next = prev + 15;
if (timeRange) {
if (next > maxTime) next = minTime;
} else {
if (next >= 1440) next = 0;
}
return next;
});
}, playInterval);
}
}, [isPlaying, playInterval]);
const handlePause = useCallback(() => {
setIsPlaying(false);
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
}, []);
const handleStop = useCallback(() => {
setIsPlaying(false);
// 设置为当前时间
const currentTime = new Date();
const minutes = currentTime.getHours() * 60 + currentTime.getMinutes();
setCurrentTime(minutes); // 组件卸载时重置时间
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
}, []);
// 步进控制
const handleDayStepBackward = useCallback(() => {
setSelectedDate((prev) => {
const newDate = new Date(prev);
newDate.setDate(newDate.getDate() - 1);
return newDate;
});
}, []);
const handleDayStepForward = useCallback(() => {
setSelectedDate((prev) => {
const newDate = new Date(prev);
newDate.setDate(newDate.getDate() + 1);
return newDate;
});
}, []);
const handleStepBackward = useCallback(() => {
setCurrentTime((prev) => {
let next = prev - 15;
if (timeRange) {
if (next < minTime) next = maxTime;
} else {
if (next < 0) next += 1440;
}
return next;
});
}, [timeRange, minTime, maxTime]);
const handleStepForward = useCallback(() => {
setCurrentTime((prev) => {
let next = prev + 15;
if (timeRange) {
if (next > maxTime) next = minTime;
} else {
if (next >= 1440) next = 0;
}
return next;
});
}, [timeRange, minTime, maxTime]);
// 日期选择处理
const handleDateChange = useCallback((newDate: Date | null) => {
if (newDate) {
setSelectedDate(newDate);
}
}, []);
// 播放间隔改变处理
const handleIntervalChange = useCallback(
(event: any) => {
const newInterval = event.target.value;
setPlayInterval(newInterval);
// 如果正在播放，重新启动定时器
if (isPlaying && intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = setInterval(() => {
setCurrentTime((prev) => {
let next = prev + 15;
if (timeRange) {
if (next > maxTime) next = minTime;
} else {
if (next >= 1440) next = 0;
}
return next;
});
}, newInterval);
}
},
[isPlaying],
);
// 计算时间段改变处理
const handleCalculatedIntervalChange = useCallback((event: any) => {
const newInterval = event.target.value;
setCalculatedInterval(newInterval);
}, []);
// 添加 useEffect 来监听 currentTime 和 selectedDate 的变化，并获取数据
useEffect(() => {
// 首次加载时，如果 selectedDate 或 currentTime 未定义，则跳过执行，避免报错
if (selectedDate && currentTime !== undefined && currentTime !== -1) {
// 检查至少一个属性有值
// const junctionProperties = junctionText;
// const pipeProperties = pipeText;
// if (junctionProperties === "" && pipeProperties === "") {
// open?.({
// type: "error",
// message: "请至少设定并应用一个图层的样式。",
// });
// return;
// }
fetchFrameData(
currentTimeToDate(selectedDate, currentTime),
junctionText,
pipeText,
schemeName,
schemeType,
);
}
}, [
junctionText,
pipeText,
currentTime,
selectedDate,
schemeName,
schemeType,
]);
// 组件卸载时清理定时器和防抖
useEffect(() => {
// 设置为当前时间
const currentTime = new Date();
const minutes = currentTime.getHours() * 60 + currentTime.getMinutes();
// 找到最近的前15分钟刻度
const roundedMinutes = Math.floor(minutes / 15) * 15;
setCurrentTime(roundedMinutes); // 组件卸载时重置时间
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
if (debounceRef.current) {
clearTimeout(debounceRef.current);
}
};
}, []);
// 当 timeRange 改变时，设置 currentTime 到 minTime
useEffect(() => {
if (timeRange) {
setCurrentTime(minTime);
}
}, [timeRange, minTime]);
// 获取地图实例
const map = useMap();
// 这里防止地图缩放时，瓦片重新加载引起的属性更新出错
useEffect(() => {
// 监听地图缩放事件，缩放时停止播放
if (map) {
const onZoom = () => {
handlePause();
};
map.getView().on("change:resolution", onZoom);
// 清理事件监听
return () => {
map.getView().un("change:resolution", onZoom);
};
}
}, [map, handlePause]);
// 清除当天当前时间点后的缓存并重新获取数据
const clearCacheAndRefetch = (date: Date, timeInMinutes: number) => {
const dateStr = date.toISOString().split("T")[0];
const clearCache = (
cacheRef: ReturnType<typeof useRef<Map<string, any[]>>>,
) => {
if (!cacheRef.current) return;
const cacheKeys = Array.from(cacheRef.current.keys());
cacheKeys.forEach((key) => {
const keyParts = key.split("_");
const cacheDate = keyParts[0].split("T")[0];
const cacheTimeStr = keyParts[0].split("T")[1];
if (cacheDate === dateStr && cacheTimeStr) {
const [hours, minutes] = cacheTimeStr.split(":");
const cacheTimeInMinutes =
(parseInt(hours) + 8) * 60 + parseInt(minutes);
if (cacheTimeInMinutes >= timeInMinutes && cacheRef.current) {
cacheRef.current.delete(key);
}
}
});
};
clearCache(nodeCacheRef);
clearCache(linkCacheRef);
// 重新获取当前时刻的新数据
fetchFrameData(
currentTimeToDate(selectedDate, currentTime),
junctionText,
pipeText,
schemeName,
schemeType,
);
};
const handleForceCalculate = async () => {
if (!NETWORK_NAME) {
open?.({
type: "error",
message: "管网名称缺失，无法进行强制计算。",
});
return;
}
// 提前提取日期和时间值，避免异步操作期间被时间轴拖动改变
const calculationDate = selectedDate;
const calculationTime = currentTime;
const calculationDateStr = calculationDate.toISOString().split("T")[0];
setIsCalculating(true);
// 显示处理中的通知
open?.({
type: "progress",
message: "正在强制计算，请稍候...",
undoableTimeout: 3,
});
try {
const body = {
name: NETWORK_NAME,
simulation_date: calculationDateStr, // YYYY-MM-DD
start_time: `${formatTime(calculationTime)}:00`, // HH:MM:00
duration: calculatedInterval,
};
const response = await fetch(
`${config.BACKEND_URL}/api/v1/runsimulationmanuallybydate/`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
},
);
if (response.ok) {
open?.({
type: "success",
message: "重新计算成功",
});
// 清空当天当前时刻及之后的缓存并重新获取数据
clearCacheAndRefetch(calculationDate, calculationTime);
} else {
open?.({
type: "error",
message: "重新计算失败",
});
}
} catch (error) {
console.error("Recalculation failed:", error);
open?.({
type: "error",
message: "重新计算时发生错误",
});
} finally {
setIsCalculating(false);
}
};
return (
<Draggable nodeRef={draggableRef} handle=".drag-handle">
<div
ref={draggableRef}
className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300"
>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
<Paper
elevation={3}
sx={{
position: "absolute",
bottom: 0,
left: 0,
right: 0,
zIndex: 1000,
p: 2,
pt: 1, // 减小顶部内边距，为拖拽柄留出空间
backgroundColor: "rgba(255, 255, 255, 0.95)",
backdropFilter: "blur(10px)",
}}
>
{/* 拖拽柄区域 */}
<Box
className="drag-handle"
sx={{
width: "100%",
height: "16px",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "move",
mb: 1,
borderRadius: "4px 4px 0 0",
"&:hover": {
backgroundColor: "rgba(0, 0, 0, 0.05)",
},
}}
>
<Box
sx={{
width: "40px",
height: "4px",
backgroundColor: "grey.400",
borderRadius: "2px",
}}
/>
</Box>
<Box sx={{ width: "100%" }}>
{/* 控制按钮栏 */}
<Stack
direction="row"
spacing={2}
alignItems="center"
sx={{ mb: 2, flexWrap: "wrap", gap: 1 }}
>
<Tooltip title="后退一天">
<IconButton
color="primary"
onClick={handleDayStepBackward}
size="small"
disabled={disableDateSelection}
>
<FiSkipBack />
</IconButton>
</Tooltip>
{/* 日期选择器 */}
<DatePicker
label="模拟数据日期选择"
value={dayjs(selectedDate)}
onChange={(value) =>
value && handleDateChange(value.toDate())
}
enableAccessibleFieldDOMStructure={false}
format="YYYY-MM-DD"
sx={{ width: 180 }}
slotProps={{
textField: {
size: "small",
},
}}
maxDate={dayjs(new Date())} // 禁止选取未来的日期
disabled={disableDateSelection}
/>
<Tooltip title="前进一天">
<IconButton
color="primary"
onClick={handleDayStepForward}
size="small"
disabled={
disableDateSelection ||
selectedDate.toDateString() === new Date().toDateString()
}
>
<FiSkipForward />
</IconButton>
</Tooltip>
{/* 播放控制按钮 */}
<Box sx={{ display: "flex", gap: 1 }} className="ml-4">
{/* 播放间隔选择 */}
<FormControl size="small" sx={{ minWidth: 100 }}>
<InputLabel>播放间隔</InputLabel>
<Select
value={playInterval}
label="播放间隔"
onChange={handleIntervalChange}
>
{intervalOptions.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
<Tooltip title="后退一步">
<IconButton
color="primary"
onClick={handleStepBackward}
size="small"
>
<TbRewindBackward15 />
</IconButton>
</Tooltip>
<Tooltip title={isPlaying ? "暂停" : "播放"}>
<IconButton
color="primary"
onClick={isPlaying ? handlePause : handlePlay}
size="small"
>
{isPlaying ? <Pause /> : <PlayArrow />}
</IconButton>
</Tooltip>
<Tooltip title="前进一步">
<IconButton
color="primary"
onClick={handleStepForward}
size="small"
>
<TbRewindForward15 />
</IconButton>
</Tooltip>
<Tooltip title="停止">
<IconButton
color="secondary"
onClick={handleStop}
size="small"
>
<Stop />
</IconButton>
</Tooltip>
</Box>
<Box sx={{ display: "flex", gap: 1 }} className="ml-4">
{/* 强制计算时间段 */}
<FormControl size="small" sx={{ minWidth: 100 }}>
<InputLabel>计算时间段</InputLabel>
<Select
value={calculatedInterval}
label="强制计算时间段"
onChange={handleCalculatedIntervalChange}
>
{calculatedIntervalOptions.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
{/* 功能按钮 */}
<Tooltip title="强制计算">
<Button
variant="outlined"
startIcon={<Refresh />}
onClick={handleForceCalculate}
disabled={isCalculating}
>
强制计算
</Button>
</Tooltip>
</Box>
{/* 当前时间显示 */}
<Typography
variant="h6"
sx={{
ml: "auto",
fontWeight: "bold",
color: "primary.main",
}}
>
{formatTime(currentTime)}
</Typography>
</Stack>
<Box ref={timelineRef} sx={{ px: 2, position: "relative" }}>
<Slider
value={currentTime}
min={0}
max={1440} // 24:00 = 1440分钟
step={15} // 每15分钟一个步进
marks={timeMarks.filter((_, index) => index % 12 === 0)} // 每小时显示一个标记
onChange={handleSliderChange}
valueLabelDisplay="auto"
valueLabelFormat={formatTime}
sx={{
zIndex: 10,
height: 8,
"& .MuiSlider-track": {
backgroundColor: "primary.main",
height: 6,
display: timeRange ? "none" : "block",
},
"& .MuiSlider-rail": {
backgroundColor: "grey.300",
height: 6,
},
"& .MuiSlider-thumb": {
height: 20,
width: 20,
backgroundColor: "primary.main",
border: "2px solid #fff",
boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
"&:hover": {
boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
},
},
"& .MuiSlider-mark": {
backgroundColor: "grey.400",
height: 4,
width: 2,
},
"& .MuiSlider-markActive": {
backgroundColor: "primary.main",
},
"& .MuiSlider-markLabel": {
fontSize: "0.75rem",
color: "grey.600",
},
}}
/>
{/* 禁用区域遮罩 */}
{timeRange && (
<>
{/* 左侧禁用区域 */}
{minTime > 0 && (
<Box
sx={{
position: "absolute",
left: "14px",
top: "30%",
transform: "translateY(-50%)",
width: `${(minTime / 1440) * 856 + 2}px`,
height: "20px",
backgroundColor: "rgba(189, 189, 189, 0.4)",
pointerEvents: "none",
backdropFilter: "blur(1px)",
borderRadius: "2.5px",
rounded: "true",
}}
/>
)}
{/* 右侧禁用区域 */}
{maxTime < 1440 && (
<Box
sx={{
position: "absolute",
left: `${16 + (maxTime / 1440) * 856}px`,
top: "30%",
transform: "translateY(-50%)",
width: `${((1440 - maxTime) / 1440) * 856}px`,
height: "20px",
backgroundColor: "rgba(189, 189, 189, 0.4)",
pointerEvents: "none",
backdropFilter: "blur(1px)",
borderRadius: "2.5px",
}}
/>
)}
</>
)}
</Box>
</Box>
</Paper>
</LocalizationProvider>
</div>
</Draggable>
);
};
export default Timeline;
src/app/OlMap/Controls/Toolbar.tsx
+849
View File
@@ -0,0 +1,849 @@
import React, { useState, useEffect, useCallback } from "react";
import { useData, useMap } from "../MapComponent";
import ToolbarButton from "@/components/olmap/common/ToolbarButton";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import PaletteOutlinedIcon from "@mui/icons-material/PaletteOutlined";
import QueryStatsOutlinedIcon from "@mui/icons-material/QueryStatsOutlined";
import PropertyPanel from "./PropertyPanel"; // 引入属性面板组件
import DrawPanel from "./DrawPanel"; // 引入绘图面板组件
import HistoryDataPanel from "./HistoryDataPanel"; // 引入绘图面板组件
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import { Style, Stroke, Fill, Circle } from "ol/style";
import Feature from "ol/Feature";
import StyleEditorPanel from "./StyleEditorPanel";
import { LayerStyleState } from "./StyleEditorPanel";
import StyleLegend from "./StyleLegend"; // 引入图例组件
import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
import { useNotification } from "@refinedev/core";
import { config } from "@/config/config";
// 添加接口定义隐藏按钮的props
interface ToolbarProps {
hiddenButtons?: string[]; // 可选的隐藏按钮列表，例如 ['info', 'draw', 'style']
queryType?: string; // 可选的查询类型参数
HistoryPanel?: React.FC<any>; // 可选的自定义历史数据面板
}
const Toolbar: React.FC<ToolbarProps> = ({
hiddenButtons,
queryType,
HistoryPanel,
}) => {
const map = useMap();
const data = useData();
const { open } = useNotification();
if (!data) return null;
const { currentTime, selectedDate, schemeName } = data;
const [activeTools, setActiveTools] = useState<string[]>([]);
const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
const [showPropertyPanel, setShowPropertyPanel] = useState<boolean>(false);
const [showDrawPanel, setShowDrawPanel] = useState<boolean>(false);
const [showStyleEditor, setShowStyleEditor] = useState<boolean>(false);
const [showHistoryPanel, setShowHistoryPanel] = useState<boolean>(false);
const [highlightLayer, setHighlightLayer] =
useState<VectorLayer<VectorSource> | null>(null);
// 样式状态管理 - 在 Toolbar 中管理，带有默认样式
const [layerStyleStates, setLayerStyleStates] = useState<LayerStyleState[]>([
{
isActive: false, // 默认不激活，不显示图例
layerId: "junctions",
layerName: "节点",
styleConfig: {
property: "pressure",
classificationMethod: "custom_breaks",
customBreaks: [16, 18, 20, 22, 24, 26],
customColors: [
"rgba(255, 0, 0, 1)",
"rgba(255, 127, 0, 1)",
"rgba(255, 215, 0, 1)",
"rgba(199, 224, 0, 1)",
"rgba(76, 175, 80, 1)",
"rgba(0, 158, 115, 1)",
],
segments: 6,
minSize: 4,
maxSize: 12,
minStrokeWidth: 2,
maxStrokeWidth: 8,
fixedStrokeWidth: 3,
colorType: "rainbow",
singlePaletteIndex: 0,
gradientPaletteIndex: 0,
rainbowPaletteIndex: 0,
showLabels: false,
showId: false,
opacity: 0.9,
adjustWidthByProperty: true,
},
legendConfig: {
layerId: "junctions",
layerName: "节点",
property: "压力", // 暂时为空，等计算后更新
colors: [],
type: "point",
dimensions: [],
breaks: [],
},
},
{
isActive: false, // 默认不激活，不显示图例
layerId: "pipes",
layerName: "管道",
styleConfig: {
property: "flow",
classificationMethod: "pretty_breaks",
segments: 6,
minSize: 4,
maxSize: 12,
minStrokeWidth: 2,
maxStrokeWidth: 8,
fixedStrokeWidth: 3,
colorType: "gradient",
singlePaletteIndex: 0,
gradientPaletteIndex: 0,
rainbowPaletteIndex: 0,
showLabels: false,
showId: false,
opacity: 0.9,
adjustWidthByProperty: true,
},
legendConfig: {
layerId: "pipes",
layerName: "管道",
property: "流量", // 暂时为空，等计算后更新
colors: [],
type: "linestring",
dimensions: [],
breaks: [],
},
},
]);
// 计算激活的图例配置
const activeLegendConfigs = layerStyleStates
.filter((state) => state.isActive && state.legendConfig.property)
.map((state) => ({
...state.legendConfig,
layerName: state.layerName,
layerId: state.layerId,
}));
// 创建高亮图层
useEffect(() => {
if (!map) return;
const highLightSource = new VectorSource();
const highLightLayer = new VectorLayer({
source: highLightSource,
style: new Style({
stroke: new Stroke({
color: `rgba(255, 0, 0, 1)`,
width: 5,
}),
fill: new Fill({
color: `rgba(255, 0, 0, 0.2)`,
}),
image: new Circle({
radius: 7,
stroke: new Stroke({
color: `rgba(255, 0, 0, 1)`,
width: 3,
}),
fill: new Fill({
color: `rgba(255, 0, 0, 0.2)`,
}),
}),
}),
properties: {
name: "属性查询高亮图层", // 设置图层名称
value: "info_highlight_layer",
type: "multigeometry",
properties: [],
},
});
map.addLayer(highLightLayer);
setHighlightLayer(highLightLayer);
return () => {
map.removeLayer(highLightLayer);
};
}, [map]);
// 高亮要素的函数
useEffect(() => {
if (!highlightLayer) {
return;
}
const source = highlightLayer.getSource();
if (!source) {
return;
}
// 清除之前的高亮
source.clear();
// 添加新的高亮要素
highlightFeatures.forEach((feature) => {
if (feature instanceof Feature) {
source.addFeature(feature);
}
});
}, [highlightFeatures, highlightLayer]);
// 地图点击选择要素事件处理函数
const handleMapClickSelectFeatures = useCallback(
async (event: { coordinate: number[] }) => {
if (!map) return;
const feature = await mapClickSelectFeatures(event, map); // 调用导入的函数
if (!feature || !(feature instanceof Feature)) {
// 如果没有点击到要素，且当前是 info 模式，则清除高亮
if (activeTools.includes("info")) {
setHighlightFeatures([]);
}
return;
}
if (activeTools.includes("history")) {
// 历史查询模式：支持同类型多选
const featureId = feature.getProperties().id;
const layerId = feature.getId()?.toString().split(".")[0] || "";
console.log("点击选择要素", feature, "图层：", layerId);
// 简单的类型检查函数
const getBaseType = (lid: string) => {
if (lid.includes("pipe")) return "pipe";
if (lid.includes("junction")) return "junction";
if (lid.includes("tank")) return "tank";
if (lid.includes("reservoir")) return "reservoir";
if (lid.includes("pump")) return "pump";
if (lid.includes("valve")) return "valve";
return lid;
};
// 检查是否与已选要素类型一致
if (highlightFeatures.length > 0) {
const firstLayerId =
highlightFeatures[0].getId()?.toString().split(".")[0] || "";
if (getBaseType(layerId) !== getBaseType(firstLayerId)) {
// 如果点击的是已选中的要素（为了取消选中），则不报错
const isAlreadySelected = highlightFeatures.some(
(f) => f.getProperties().id === featureId,
);
if (!isAlreadySelected) {
open?.({
type: "error",
message: "请选择相同类型的要素进行多选查询。",
});
return;
}
}
}
setHighlightFeatures((prev) => {
const existingIndex = prev.findIndex(
(f) => f.getProperties().id === featureId,
);
if (existingIndex !== -1) {
// 如果已存在，移除
return prev.filter((_, i) => i !== existingIndex);
} else {
// 如果不存在，添加
return [...prev, feature];
}
});
} else {
// 其他模式（如 info）：单选
setHighlightFeatures([feature]);
}
},
[map, activeTools, highlightFeatures, open],
);
// 添加矢量属性查询事件监听器
useEffect(() => {
if (!map) return;
// 监听 info 或 history 工具激活时添加
if (activeTools.includes("info") || activeTools.includes("history")) {
map.on("click", handleMapClickSelectFeatures);
return () => {
map.un("click", handleMapClickSelectFeatures);
};
}
}, [activeTools, map, handleMapClickSelectFeatures]);
// 处理工具栏按钮点击事件
const handleToolClick = (tool: string) => {
// 样式工具的特殊处理 - 只有再次点击时才会取消激活和关闭
if (tool === "style") {
if (activeTools.includes("style")) {
// 如果样式工具已激活，点击时关闭
setShowStyleEditor(false);
setActiveTools((prev) => prev.filter((t) => t !== "style"));
} else {
// 激活样式工具，打开样式面板
setActiveTools((prev) => [...prev, "style"]);
setShowStyleEditor(true);
}
return;
}
// 其他工具的处理逻辑
if (activeTools.includes(tool)) {
// 如果当前工具已激活，再次点击时取消激活并关闭面板
deactivateTool(tool);
setActiveTools((prev) => prev.filter((t) => t !== tool));
} else {
// 如果当前工具未激活，先关闭所有其他工具，然后激活当前工具
// 关闭所有面板（但保持样式编辑器状态）
closeAllPanelsExceptStyle();
// 取消激活所有非样式工具
setActiveTools((prev) => {
const styleActive = prev.includes("style");
return styleActive ? ["style", tool] : [tool];
});
// 激活当前工具并打开对应面板
activateTool(tool);
}
};
// 取消激活指定工具并关闭对应面板
const deactivateTool = (tool: string) => {
switch (tool) {
case "info":
setShowPropertyPanel(false);
setHighlightFeatures([]);
break;
case "draw":
setShowDrawPanel(false);
break;
case "history":
setShowHistoryPanel(false);
setHighlightFeatures([]);
break;
}
};
// 激活指定工具并打开对应面板
const activateTool = (tool: string) => {
switch (tool) {
case "info":
setShowPropertyPanel(true);
break;
case "draw":
setShowDrawPanel(true);
break;
case "history":
setShowHistoryPanel(true);
// 激活历史查询后：HistoryDataPanel 自行负责根据传入的 props 拉取数据。
break;
}
};
// 关闭所有面板（除了样式编辑器）
const closeAllPanelsExceptStyle = () => {
setShowPropertyPanel(false);
setHighlightFeatures([]);
setShowDrawPanel(false);
setShowHistoryPanel(false);
// 样式编辑器保持其当前状态，不自动关闭
};
const [computedProperties, setComputedProperties] = useState<
Record<string, any>
>({});
// 添加 useEffect 来查询计算属性
useEffect(() => {
if (highlightFeatures.length === 0 || !selectedDate || !showPropertyPanel) {
setComputedProperties({});
return;
}
const highlightFeature = highlightFeatures[0];
const id = highlightFeature.getProperties().id;
if (!id) {
setComputedProperties({});
return;
}
const queryComputedProperties = async () => {
try {
const properties = highlightFeature?.getProperties?.() || {};
const type =
properties.geometry?.getType?.() === "LineString" ? "link" : "node";
// selectedDate 格式化为 YYYY-MM-DD
let dateObj: Date;
if (selectedDate instanceof Date) {
dateObj = new Date(selectedDate);
} else {
dateObj = new Date(selectedDate);
}
const minutes = Number(currentTime) || 0;
dateObj.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0);
// 转为 UTC ISO 字符串
const querytime = dateObj.toISOString(); // 例如 "2025-09-16T16:30:00.000Z"
let response;
if (queryType === "scheme") {
response = await fetch(
// `${config.BACKEND_URL}/queryschemesimulationrecordsbyidtime/?scheme_name=${schemeName}&id=${id}&querytime=${querytime}&type=${type}`
`${config.BACKEND_URL}/api/v1/scheme/query/by-id-time?scheme_name=${schemeName}&id=${id}&type=${type}&query_time=${querytime}`,
);
} else {
response = await fetch(
// `${config.BACKEND_URL}/querysimulationrecordsbyidtime/?id=${id}&querytime=${querytime}&type=${type}`
`${config.BACKEND_URL}/api/v1/realtime/query/by-id-time?id=${id}&type=${type}&query_time=${querytime}`,
);
}
if (!response.ok) {
throw new Error("API request failed");
}
const data = await response.json();
setComputedProperties(data.results[0] || {});
} catch (error) {
console.error("Error querying computed properties:", error);
setComputedProperties({});
}
};
// 仅当 currentTime 有效时查询
if (currentTime !== -1 && queryType) queryComputedProperties();
}, [highlightFeatures, currentTime, selectedDate]);
// 从要素属性中提取属性面板需要的数据
const getFeatureProperties = useCallback(() => {
if (highlightFeatures.length === 0) return {};
const highlightFeature = highlightFeatures[0];
const layer = highlightFeature?.getId()?.toString().split(".")[0];
const properties = highlightFeature.getProperties();
// 计算属性字段，增加 key 字段
const pipeComputedFields = [
{ key: "flow", label: "流量", unit: "m³/h" },
{ key: "friction", label: "摩阻", unit: "" },
{ key: "headloss", label: "水头损失", unit: "m" },
{ key: "unit_headloss", label: "单位水头损失", unit: "m/km" },
{ key: "quality", label: "水质", unit: "mg/L" },
{ key: "reaction", label: "反应", unit: "1/d" },
{ key: "setting", label: "设置", unit: "" },
{ key: "status", label: "状态", unit: "" },
{ key: "velocity", label: "流速", unit: "m/s" },
];
const nodeComputedFields = [
{ key: "actual_demand", label: "实际需水量", unit: "m³/h" },
{ key: "total_head", label: "水头", unit: "m" },
{ key: "pressure", label: "压力", unit: "m" },
{ key: "quality", label: "水质", unit: "mg/L" },
];
if (layer === "geo_pipes_mat" || layer === "geo_pipes") {
let result = {
id: properties.id,
type: "管道",
properties: [
{ label: "起始节点ID", value: properties.node1 },
{ label: "终点节点ID", value: properties.node2 },
{ label: "长度", value: properties.length?.toFixed?.(1), unit: "m" },
{
label: "管径",
value: properties.diameter?.toFixed?.(1),
unit: "mm",
},
{ label: "粗糙度", value: properties.roughness },
{ label: "局部损失", value: properties.minor_loss },
{ label: "初始状态", value: "开" },
],
};
// 追加计算属性
if (computedProperties) {
pipeComputedFields.forEach(({ key, label, unit }) => {
let value = computedProperties[key];
// 如果是单位水头损失且后端未返回，则通过水头损失/长度计算 (单位 m/km)
if (
key === "unit_headloss" &&
value === undefined &&
computedProperties.headloss !== undefined &&
properties.length
) {
value = (computedProperties.headloss / properties.length) * 1000;
}
if (value !== undefined) {
result.properties.push({
label,
value: typeof value === "number" ? value.toFixed(3) : value,
unit,
});
}
});
}
return result;
}
if (layer === "geo_junctions_mat" || layer === "geo_junctions") {
let result = {
id: properties.id,
type: "节点",
properties: [
{
label: "高程",
value: properties.elevation?.toFixed?.(1),
unit: "m",
},
// 将 demand1~demand5 与 pattern1~pattern5 作为二级表格展示
{
type: "table",
label: "基本需水量",
columns: ["demand", "pattern"],
rows: Array.from({ length: 5 }, (_, i) => i + 1)
.map((idx) => {
const d = properties?.[`demand${idx}`]?.toFixed?.(3);
const p = properties?.[`pattern${idx}`];
// 仅当 demand 有效时展示该行
if (d !== undefined && d !== null && d !== "") {
return [typeof d === "number" ? d.toFixed(3) : d, p ?? "-"];
}
})
.filter(Boolean) as (string | number)[][],
} as any,
],
};
// 追加计算属性
if (computedProperties) {
nodeComputedFields.forEach(({ key, label, unit }) => {
if (computedProperties[key] !== undefined) {
result.properties.push({
label,
value:
computedProperties[key].toFixed?.(3) || computedProperties[key],
unit,
});
}
});
}
return result;
}
if (layer === "geo_tanks_mat" || layer === "geo_tanks") {
return {
id: properties.id,
type: "水池",
properties: [
{
label: "高程",
value: properties.elevation?.toFixed?.(1),
unit: "m",
},
{
label: "初始水位",
value: properties.init_level?.toFixed?.(1),
unit: "m",
},
{
label: "最低水位",
value: properties.min_level?.toFixed?.(1),
unit: "m",
},
{
label: "最高水位",
value: properties.max_level?.toFixed?.(1),
unit: "m",
},
{
label: "直径",
value: properties.diameter?.toFixed?.(1),
unit: "m",
},
{
label: "最小容积",
value: properties.min_vol?.toFixed?.(1),
unit: "m³",
},
// {
// label: "容积曲线",
// value: properties.vol_curve,
// },
{
label: "溢出",
value: properties.overflow ? "是" : "否",
},
],
};
}
if (layer === "geo_reservoirs_mat" || layer === "geo_reservoirs") {
return {
id: properties.id,
type: "水库",
properties: [
{
label: "水头",
value: properties.head?.toFixed?.(1),
unit: "m",
},
// {
// label: "模式",
// value: properties.pattern,
// },
],
};
}
if (layer === "geo_pumps_mat" || layer === "geo_pumps") {
return {
id: properties.id,
type: "水泵",
properties: [
{ label: "起始节点 ID", value: properties.node1 },
{ label: "终点节点 ID", value: properties.node2 },
{
label: "功率",
value: properties.power?.toFixed?.(1),
unit: "kW",
},
{
label: "扬程",
value: properties.head?.toFixed?.(1),
unit: "m",
},
{
label: "转速",
value: properties.speed?.toFixed?.(1),
unit: "rpm",
},
{
label: "模式",
value: properties.pattern,
},
],
};
}
if (layer === "geo_valves_mat" || layer === "geo_valves") {
return {
id: properties.id,
type: "阀门",
properties: [
{ label: "起始节点 ID", value: properties.node1 },
{ label: "终点节点 ID", value: properties.node2 },
{
label: "直径",
value: properties.diameter?.toFixed?.(1),
unit: "mm",
},
{
label: "阀门类型",
value: properties.v_type,
},
// {
// label: "设置",
// value: properties.setting?.toFixed?.(2),
// },
{
label: "局部损失",
value: properties.minor_loss?.toFixed?.(2),
},
],
};
}
// 传输频率文字对应
const getTransmissionFrequency = (transmission_frequency: string) => {
// 传输频率文本：00:01:00，00:05:00，00:10:00，00:30:00，01:00:00，转换为分钟数
const parts = transmission_frequency.split(":");
if (parts.length !== 3) return transmission_frequency;
const hours = parseInt(parts[0], 10);
const minutes = parseInt(parts[1], 10);
const seconds = parseInt(parts[2], 10);
const totalMinutes = hours * 60 + minutes + (seconds >= 30 ? 1 : 0);
return totalMinutes;
};
// 可靠度文字映射
const getReliability = (reliability: number) => {
switch (reliability) {
case 1:
return "高";
case 2:
return "中";
case 3:
return "低";
default:
return "未知";
}
};
if (layer === "geo_scada_mat" || layer === "geo_scada") {
let result = {
id: properties.id,
type: "SCADA设备",
properties: [
{
label: "类型",
value:
properties.type === "pipe_flow" ? "流量传感器" : "压力传感器",
},
{
label: "关联节点 ID",
value: properties.associated_element_id,
},
{
label: "传输模式",
value:
properties.transmission_mode === "non_realtime"
? "定时传输"
: "实时传输",
},
{
label: "传输频率",
value: getTransmissionFrequency(properties.transmission_frequency),
unit: "分钟",
},
{
label: "可靠性",
value: getReliability(properties.reliability),
},
],
};
return result;
}
return {};
}, [highlightFeatures, computedProperties]);
return (
<>
<div className="absolute top-4 left-4 bg-white p-1 rounded-xl shadow-lg flex opacity-85 hover:opacity-100 transition-opacity">
{!hiddenButtons?.includes("info") && (
<ToolbarButton
icon={<InfoOutlinedIcon />}
name="查看属性"
isActive={activeTools.includes("info")}
onClick={() => handleToolClick("info")}
/>
)}
{!hiddenButtons?.includes("history") && (
<ToolbarButton
icon={<QueryStatsOutlinedIcon />}
name="查询历史数据"
isActive={activeTools.includes("history")}
onClick={() => handleToolClick("history")}
/>
)}
{!hiddenButtons?.includes("draw") && (
<ToolbarButton
icon={<EditOutlinedIcon />}
name="标记绘制"
isActive={activeTools.includes("draw")}
onClick={() => handleToolClick("draw")}
/>
)}
{!hiddenButtons?.includes("style") && (
<ToolbarButton
icon={<PaletteOutlinedIcon />}
name="图层样式"
isActive={activeTools.includes("style")}
onClick={() => handleToolClick("style")}
/>
)}
</div>
{showPropertyPanel && <PropertyPanel {...getFeatureProperties()} />}
{showDrawPanel && map && <DrawPanel />}
<div style={{ display: showStyleEditor ? "block" : "none" }}>
<StyleEditorPanel
layerStyleStates={layerStyleStates}
setLayerStyleStates={setLayerStyleStates}
/>
</div>
{showHistoryPanel &&
(HistoryPanel ? (
<HistoryPanel
featureInfos={(() => {
if (highlightFeatures.length === 0 || !showHistoryPanel)
return [];
return highlightFeatures
.map((feature) => {
const properties = feature.getProperties();
const id = properties.id;
if (!id) return null;
// 从图层名称推断类型
const layerId =
feature.getId()?.toString().split(".")[0] || "";
let type = "unknown";
if (layerId.includes("pipe")) {
type = "pipe";
} else if (layerId.includes("junction")) {
type = "junction";
} else if (layerId.includes("tank")) {
type = "tank";
} else if (layerId.includes("reservoir")) {
type = "reservoir";
} else if (layerId.includes("pump")) {
type = "pump";
} else if (layerId.includes("valve")) {
type = "valve";
}
// 仅处理 type 为 pipe 或 junction 的情况
if (type !== "pipe" && type !== "junction") {
return null;
}
return [id, type];
})
.filter(Boolean) as [string, string][];
})()}
scheme_type="burst_Analysis"
scheme_name={schemeName}
type={queryType as "realtime" | "scheme" | "none"}
/>
) : (
<HistoryDataPanel
featureInfos={(() => {
if (highlightFeatures.length === 0 || !showHistoryPanel)
return [];
return highlightFeatures
.map((feature) => {
const properties = feature.getProperties();
const id = properties.id;
if (!id) return null;
// 从图层名称推断类型
const layerId =
feature.getId()?.toString().split(".")[0] || "";
let type = "unknown";
if (layerId.includes("pipe")) {
type = "pipe";
} else if (layerId.includes("junction")) {
type = "junction";
} else if (layerId.includes("tank")) {
type = "tank";
} else if (layerId.includes("reservoir")) {
type = "reservoir";
} else if (layerId.includes("pump")) {
type = "pump";
} else if (layerId.includes("valve")) {
type = "valve";
}
// 仅处理 type 为 pipe 或 junction 的情况
if (type !== "pipe" && type !== "junction") {
return null;
}
return [id, type];
})
.filter(Boolean) as [string, string][];
})()}
scheme_type="burst_Analysis"
scheme_name={schemeName}
type={queryType as "realtime" | "scheme" | "none"}
/>
))}
{/* 图例显示 */}
{activeLegendConfigs.length > 0 && (
<div className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
<div className="flex flex-row gap-3">
{activeLegendConfigs.map((config, index) => (
<StyleLegend key={`${config.layerId}-${index}`} {...config} />
))}
</div>
</div>
)}
</>
);
};
export default Toolbar;
src/components/olmap/core/Controls/Zoom.tsx → src/app/OlMap/Controls/Zoom.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ const Zoom: React.FC = () => {
};
return (
<div className="absolute right-4 bottom-11 z-20">
<div className="absolute right-4 bottom-8 z-1300">
<div className="w-8 h-26 flex flex-col gap-2 items-center">
<div className="w-8 h-8 bg-gray-50 flex items-center justify-center rounded-xl drop-shadow-xl shadow-black">
<button
src/app/OlMap/MapComponent.tsx
+1056
View File
File diff suppressed because it is too large Load Diff
src/components/olmap/core/MapTools.tsx → src/app/OlMap/MapTools.tsx
View File
src/app/RefineContext.tsx
-379
View File
@@ -1,379 +0,0 @@
"use client";
import {
Refine,
type AccessControlProvider,
type AuthProvider,
} from "@refinedev/core";
import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
import { RefineSnackbarProvider } from "@refinedev/mui";
import { SessionProvider, signIn, useSession } from "next-auth/react";
import { usePathname } from "next/navigation";
import React, { useEffect } from "react";
import routerProvider from "@refinedev/nextjs-router";
import { ColorModeContextProvider } from "@contexts/color-mode";
import { dataProvider } from "@providers/data-provider";
import { ProjectProvider } from "@/contexts/ProjectContext";
import { RoutePermissionGuard } from "@/components/auth/RoutePermissionGuard";
import { SessionExpiryDialog } from "@/components/auth/SessionExpiryDialog";
import { useAuthStore } from "@/store/authStore";
import { useAccessStore } from "@/store/accessStore";
import { useProjectStore } from "@/store/projectStore";
import { apiFetch } from "@/lib/apiFetch";
import { completeLogout, reportLogoutAudit } from "@/lib/logoutFlow";
import { clearSessionRecoveryDrafts } from "@/lib/sessionRecoveryDraft";
import { permissionCodes, resourcePermissions } from "@/lib/permissions";
import { config } from "@config/config";
import { useAppNotificationProvider } from "@/providers/notification-provider/useAppNotificationProvider";
import { LiaNetworkWiredSolid } from "react-icons/lia";
import { TbActivity, TbDatabaseEdit, TbLocationPin } from "react-icons/tb";
import { LuReplace } from "react-icons/lu";
import { AiOutlineSecurityScan } from "react-icons/ai";
import { MdCleaningServices, MdOutlineWaterDrop } from "react-icons/md";
import {
FactCheck as FactCheckIcon,
ManageAccounts as ManageAccountsIcon,
MyLocation as MyLocationIcon,
Search as SearchIcon,
} from "@mui/icons-material";
type RefineContextProps = {
defaultMode?: string;
};
export const RefineContext = (
props: React.PropsWithChildren<RefineContextProps>,
) => (
<SessionProvider>
<App {...props} />
</SessionProvider>
);
type AppProps = {
defaultMode?: string;
};
const App = (props: React.PropsWithChildren<AppProps>) => {
const { data, status } = useSession();
const to = usePathname();
const setAccessToken = useAuthStore((state) => state.setAccessToken);
const markSessionExpired = useAuthStore((state) => state.markSessionExpired);
const clearSessionExpired = useAuthStore((state) => state.clearSessionExpired);
const currentProjectId = useProjectStore((state) => state.currentProjectId);
const permissions = useAccessStore((state) => state.permissions);
const setAccessContext = useAccessStore((state) => state.setContext);
const setAccessLoading = useAccessStore((state) => state.setLoading);
const resetAccess = useAccessStore((state) => state.reset);
const can = (permission: string) => permissions.includes(permission);
useEffect(() => {
setAccessToken(
typeof data?.accessToken === "string" ? data.accessToken : null,
);
}, [data?.accessToken, setAccessToken]);
useEffect(() => {
if (data?.error === "SessionExpired") {
markSessionExpired("session_max_age");
return;
}
if (data?.error === "RefreshAccessTokenError") {
markSessionExpired("refresh_failed");
return;
}
if (status === "authenticated") {
clearSessionExpired();
}
}, [clearSessionExpired, data?.error, markSessionExpired, status]);
useEffect(() => {
if (status !== "authenticated") {
resetAccess();
return;
}
let cancelled = false;
setAccessLoading(true);
apiFetch(`${config.BACKEND_URL}/api/v1/access-context`, {
projectHeaderMode: currentProjectId ? "include" : "omit",
skipAuthRedirect: true,
})
.then(async (response) => {
if (cancelled) return;
if (!response.ok) {
resetAccess();
return;
}
setAccessContext(await response.json());
})
.catch(() => {
if (!cancelled) resetAccess();
});
return () => {
cancelled = true;
};
}, [
currentProjectId,
resetAccess,
setAccessContext,
setAccessLoading,
status,
]);
useEffect(() => {
if (status !== "authenticated" || !data?.user?.id) return;
const auditKey = `tjwater-login-audit:${data.user.id}`;
if (sessionStorage.getItem(auditKey)) return;
apiFetch(`${config.BACKEND_URL}/api/v1/audit-events`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ event: "login" }),
projectHeaderMode: "omit",
skipAuthRedirect: true,
})
.then((response) => {
if (response.ok) sessionStorage.setItem(auditKey, "1");
})
.catch(() => undefined);
}, [data?.user?.id, status]);
if (status === "loading") {
return <span>loading...</span>;
}
const authProvider: AuthProvider = {
login: async () => {
signIn("keycloak", {
callbackUrl: to ? to.toString() : "/",
redirect: true,
});
return { success: true };
},
logout: () =>
completeLogout({
reportAudit: () =>
reportLogoutAudit({
endpoint: `${config.BACKEND_URL}/api/v1/audit-events`,
accessToken:
typeof data?.accessToken === "string"
? data.accessToken
: useAuthStore.getState().accessToken,
}),
clearLocalState: () => {
if (data?.user?.id) {
sessionStorage.removeItem(`tjwater-login-audit:${data.user.id}`);
}
clearSessionRecoveryDrafts();
},
navigate: (path) => window.location.assign(path),
}),
onError: async (error) => {
return { error };
},
check: async () =>
status === "unauthenticated"
? { authenticated: false, redirectTo: "/login" }
: { authenticated: true },
getPermissions: async () => permissions,
getIdentity: async () => {
if (!data?.user) return null;
return {
id: data.user.id,
username: data.user.username,
name: data.user.name,
avatar: data.user.image,
};
},
};
const accessControlProvider: AccessControlProvider = {
can: async ({ resource }) => {
const requiredPermission = resource
? resourcePermissions[resource]
: undefined;
return {
can: !requiredPermission || permissions.includes(requiredPermission),
reason: requiredPermission
? `需要权限：${requiredPermission}`
: undefined,
};
},
};
const resources = [
...(can(permissionCodes.simulationView)
? [
{
name: "管网在线模拟",
list: "/network-simulation",
meta: {
icon: <LiaNetworkWiredSolid className="w-6 h-6" />,
label: "管网在线模拟",
},
},
]
: []),
...(can(permissionCodes.scadaClean)
? [
{
name: "SCADA 数据清洗",
list: "/scada-data-cleaning",
meta: {
icon: <TbDatabaseEdit className="w-6 h-6" />,
label: "SCADA 数据清洗",
},
},
]
: []),
...(can(permissionCodes.optimizationRun)
? [
{
name: "监测点优化布置",
list: "/monitoring-place-optimization",
meta: {
icon: <LuReplace className="w-6 h-6" />,
label: "监测点优化布置",
},
},
]
: []),
...(can(permissionCodes.riskRun)
? [
{
name: "健康风险分析",
list: "/health-risk-analysis",
meta: {
icon: <AiOutlineSecurityScan className="w-6 h-6" />,
label: "健康风险分析",
},
},
]
: []),
...(can(permissionCodes.simulationRun) || can(permissionCodes.burstRun)
? [
{
name: "Hydraulic Simulation",
meta: { label: "事件模拟" },
},
]
: []),
...(can(permissionCodes.burstRun)
? [
{
name: "爆管模拟",
list: "/hydraulic-simulation/burst-simulation",
meta: {
parent: "Hydraulic Simulation",
icon: <TbLocationPin className="w-6 h-6" />,
label: "爆管模拟",
},
},
{
name: "爆管侦测",
list: "/hydraulic-simulation/burst-detection",
meta: {
parent: "Hydraulic Simulation",
icon: <TbActivity className="w-6 h-6" />,
label: "爆管侦测",
},
},
{
name: "爆管定位",
list: "/hydraulic-simulation/burst-location",
meta: {
parent: "Hydraulic Simulation",
icon: <MyLocationIcon className="w-6 h-6" />,
label: "爆管定位",
},
},
{
name: "DMA 漏损识别",
list: "/hydraulic-simulation/dma-leak-detection",
meta: {
parent: "Hydraulic Simulation",
icon: <SearchIcon className="w-6 h-6" />,
label: "DMA 漏损识别",
},
},
]
: []),
...(can(permissionCodes.simulationRun)
? [
{
name: "水质模拟",
list: "/hydraulic-simulation/contaminant-simulation",
meta: {
parent: "Hydraulic Simulation",
icon: <MdOutlineWaterDrop className="w-6 h-6" />,
label: "水质模拟",
},
},
{
name: "管道冲洗",
list: "/hydraulic-simulation/flushing-analysis",
meta: {
parent: "Hydraulic Simulation",
icon: <MdCleaningServices className="w-6 h-6" />,
label: "管道冲洗",
},
},
]
: []),
...(can(permissionCodes.environmentManage)
? [
{
name: "系统管理",
list: "/system-admin",
meta: {
icon: <ManageAccountsIcon className="w-6 h-6" />,
label: "系统管理",
},
},
]
: []),
...(can(permissionCodes.auditView)
? [
{
name: "审计日志",
list: "/audit-logs",
meta: {
icon: <FactCheckIcon className="w-6 h-6" />,
label: "审计日志",
},
},
]
: []),
];
return (
<ProjectProvider>
<RefineKbarProvider>
<ColorModeContextProvider defaultMode={props.defaultMode}>
<RefineSnackbarProvider>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider}
notificationProvider={useAppNotificationProvider}
authProvider={authProvider}
accessControlProvider={accessControlProvider}
resources={resources}
options={{
syncWithLocation: true,
warnWhenUnsavedChanges: true,
}}
>
<SessionExpiryDialog expiresAt={data?.sessionExpiresAt} />
<RoutePermissionGuard>{props.children}</RoutePermissionGuard>
<RefineKbar />
</Refine>
</RefineSnackbarProvider>
</ColorModeContextProvider>
</RefineKbarProvider>
</ProjectProvider>
);
};
src/app/_refine_context.tsx
+186
View File
@@ -0,0 +1,186 @@
"use client";
import { Refine, type AuthProvider } from "@refinedev/core";
import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
import {
RefineSnackbarProvider,
useNotificationProvider,
} from "@refinedev/mui";
import { SessionProvider, signIn, signOut, useSession } from "next-auth/react";
import { usePathname } from "next/navigation";
import React from "react";
import routerProvider from "@refinedev/nextjs-router";
import { ColorModeContextProvider } from "@contexts/color-mode";
import { dataProvider } from "@providers/data-provider";
import { LiaNetworkWiredSolid } from "react-icons/lia";
import { TbDatabaseEdit } from "react-icons/tb";
import { LuReplace } from "react-icons/lu";
import { AiOutlineSecurityScan } from "react-icons/ai";
import { TbLocationPin } from "react-icons/tb";
import { AiOutlinePartition } from "react-icons/ai";
type RefineContextProps = {
defaultMode?: string;
};
export const RefineContext = (
props: React.PropsWithChildren<RefineContextProps>
) => {
return (
<SessionProvider>
<App {...props} />
</SessionProvider>
);
};
type AppProps = {
defaultMode?: string;
};
const App = (props: React.PropsWithChildren<AppProps>) => {
const { data, status } = useSession();
const to = usePathname();
if (status === "loading") {
return <span>loading...</span>;
}
const authProvider: AuthProvider = {
login: async () => {
signIn("keycloak", {
callbackUrl: to ? to.toString() : "/",
redirect: true,
});
return {
success: true,
};
},
logout: async () => {
signOut({
redirect: true,
callbackUrl: "/login",
});
return {
success: true,
};
},
onError: async (error) => {
if (error.response?.status === 401) {
return {
logout: true,
};
}
return {
error,
};
},
check: async () => {
if (status === "unauthenticated") {
return {
authenticated: false,
redirectTo: "/login",
};
}
return {
authenticated: true,
};
},
getPermissions: async () => {
return null;
},
getIdentity: async () => {
if (data?.user) {
const { user } = data;
return {
name: user.name,
avatar: user.image,
};
}
return null;
},
};
const defaultMode = props?.defaultMode;
return (
<>
<RefineKbarProvider>
<ColorModeContextProvider defaultMode={defaultMode}>
<RefineSnackbarProvider>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider}
notificationProvider={useNotificationProvider}
authProvider={authProvider}
resources={[
{
name: "管网在线模拟",
list: "/network-simulation",
meta: {
icon: <LiaNetworkWiredSolid className="w-6 h-6" />,
label: "管网在线模拟",
},
},
{
name: "SCADA 数据清洗",
list: "/scada-data-cleaning",
meta: {
icon: <TbDatabaseEdit className="w-6 h-6" />,
label: "SCADA 数据清洗",
},
},
{
name: "监测点优化布置",
list: "/monitoring-place-optimization",
meta: {
icon: <LuReplace className="w-6 h-6" />,
label: "监测点优化布置",
},
},
{
name: "健康风险分析",
list: "/health-risk-analysis",
meta: {
icon: <AiOutlineSecurityScan className="w-6 h-6" />,
label: "健康风险分析",
},
},
{
name: "风险分析定位",
list: "/risk-analysis-location",
meta: {
icon: <TbLocationPin className="w-6 h-6" />,
label: "风险分析定位",
},
},
{
name: "管网优化分区",
list: "/network-partition-optimization",
meta: {
icon: <AiOutlinePartition className="w-6 h-6" />,
label: "管网优化分区",
},
},
]}
options={{
syncWithLocation: true,
warnWhenUnsavedChanges: true,
}}
>
{props.children}
<RefineKbar />
</Refine>
</RefineSnackbarProvider>
</ColorModeContextProvider>
</RefineKbarProvider>
</>
);
};
src/app/api/auth/[...nextauth]/options.test.ts
-111
View File
@@ -1,111 +0,0 @@
import authOptions from "./options";
describe("NextAuth access token refresh", () => {
it("forces a Keycloak refresh for an agent credential request", async () => {
const previousEnv = {
issuer: process.env.KEYCLOAK_ISSUER,
clientId: process.env.KEYCLOAK_CLIENT_ID,
clientSecret: process.env.KEYCLOAK_CLIENT_SECRET,
};
process.env.KEYCLOAK_ISSUER = "https://keycloak.example/realms/tjwater";
process.env.KEYCLOAK_CLIENT_ID = "frontend";
process.env.KEYCLOAK_CLIENT_SECRET = "secret";
const originalFetch = globalThis.fetch;
const fetchMock = jest.fn().mockResolvedValue({
ok: true,
json: async () => ({
access_token: "fresh-access-token",
expires_in: 900,
refresh_token: "rotated-refresh-token",
}),
});
globalThis.fetch = fetchMock as typeof fetch;
try {
const jwt = authOptions.callbacks?.jwt as (input: unknown) => Promise<{
accessToken?: string;
refreshToken?: string;
}>;
const result = await jwt({
token: {
accessToken: "still-fresh-access-token",
accessTokenExpires: Date.now() + 600_000,
accessTokenIssuedAt: Date.now(),
refreshToken: "refresh-token",
},
trigger: "update",
session: { forceRefresh: true },
});
expect(result.accessToken).toBe("fresh-access-token");
expect(result.refreshToken).toBe("rotated-refresh-token");
expect(fetchMock).toHaveBeenCalledWith(
"https://keycloak.example/realms/tjwater/protocol/openid-connect/token",
expect.objectContaining({ method: "POST" }),
);
} finally {
if (originalFetch) globalThis.fetch = originalFetch;
else delete (globalThis as { fetch?: typeof fetch }).fetch;
restoreEnv("KEYCLOAK_ISSUER", previousEnv.issuer);
restoreEnv("KEYCLOAK_CLIENT_ID", previousEnv.clientId);
restoreEnv("KEYCLOAK_CLIENT_SECRET", previousEnv.clientSecret);
}
});
it.each([
["network failure", () => Promise.reject(new Error("connection refused"))],
[
"non-JSON response",
() =>
Promise.resolve({
ok: false,
json: async () => {
throw new SyntaxError("Unexpected token");
},
}),
],
[
"invalid token payload",
() =>
Promise.resolve({
ok: true,
json: async () => ({ access_token: " ", expires_in: 0 }),
}),
],
])("returns a session error for %s", async (_label, fetchResult) => {
const previousEnv = {
issuer: process.env.KEYCLOAK_ISSUER,
clientId: process.env.KEYCLOAK_CLIENT_ID,
clientSecret: process.env.KEYCLOAK_CLIENT_SECRET,
};
process.env.KEYCLOAK_ISSUER = "https://keycloak.example/realms/tjwater";
process.env.KEYCLOAK_CLIENT_ID = "frontend";
process.env.KEYCLOAK_CLIENT_SECRET = "secret";
const originalFetch = globalThis.fetch;
globalThis.fetch = jest.fn(fetchResult) as unknown as typeof fetch;
try {
const jwt = authOptions.callbacks?.jwt as (input: unknown) => Promise<{
error?: string;
}>;
await expect(
jwt({
token: { refreshToken: "refresh-token" },
trigger: "update",
session: { forceRefresh: true },
}),
).resolves.toMatchObject({ error: "RefreshAccessTokenError" });
} finally {
if (originalFetch) globalThis.fetch = originalFetch;
else delete (globalThis as { fetch?: typeof fetch }).fetch;
restoreEnv("KEYCLOAK_ISSUER", previousEnv.issuer);
restoreEnv("KEYCLOAK_CLIENT_ID", previousEnv.clientId);
restoreEnv("KEYCLOAK_CLIENT_SECRET", previousEnv.clientSecret);
}
});
});
const restoreEnv = (key: string, value: string | undefined) => {
if (value === undefined) delete process.env[key];
else process.env[key] = value;
};
src/app/api/auth/[...nextauth]/options.ts
+4 -164
View File
@@ -1,94 +1,16 @@
import { NextAuthOptions } from "next-auth";
import { JWT } from "next-auth/jwt";
import KeycloakProvider from "next-auth/providers/keycloak";
import Avatar from "@assets/avatar/avatar-small.jpeg";
const SESSION_MAX_AGE_SECONDS = 12 * 60 * 60;
const ACCESS_TOKEN_REFRESH_SKEW_MS = 30_000;
type KeycloakTokenResponse = {
access_token: string;
expires_in: number;
refresh_token?: string;
};
const getKeycloakTokenEndpoint = () => {
const issuer = process.env.KEYCLOAK_ISSUER;
return issuer
? `${issuer.replace(/\/$/, "")}/protocol/openid-connect/token`
: undefined;
};
const refreshAccessToken = async (token: JWT): Promise<JWT> => {
if (!token.refreshToken) {
return { ...token, error: "RefreshAccessTokenError" };
}
const keycloakClientId = process.env.KEYCLOAK_CLIENT_ID;
const keycloakClientSecret = process.env.KEYCLOAK_CLIENT_SECRET;
const keycloakTokenEndpoint = getKeycloakTokenEndpoint();
if (!keycloakClientId || !keycloakClientSecret || !keycloakTokenEndpoint) {
return { ...token, error: "RefreshAccessTokenError" };
}
const body = new URLSearchParams({
grant_type: "refresh_token",
client_id: keycloakClientId,
client_secret: keycloakClientSecret,
refresh_token: token.refreshToken,
});
try {
const response = await fetch(keycloakTokenEndpoint, {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body,
});
const refreshed = (await response.json()) as Partial<KeycloakTokenResponse> | null;
if (
!response.ok ||
!refreshed ||
typeof refreshed.access_token !== "string" ||
!refreshed.access_token.trim() ||
typeof refreshed.expires_in !== "number" ||
!Number.isFinite(refreshed.expires_in) ||
refreshed.expires_in <= 0
) {
return { ...token, error: "RefreshAccessTokenError" };
}
const rotatedRefreshToken =
typeof refreshed.refresh_token === "string" &&
refreshed.refresh_token.trim()
? refreshed.refresh_token.trim()
: token.refreshToken;
return {
...token,
accessToken: refreshed.access_token.trim(),
accessTokenIssuedAt: Date.now(),
accessTokenExpires: Date.now() + refreshed.expires_in * 1000,
refreshToken: rotatedRefreshToken,
error: undefined,
};
} catch {
return { ...token, error: "RefreshAccessTokenError" };
}
};
const authOptions: NextAuthOptions = {
const authOptions = {
// Configure one or more authentication providers
providers: [
KeycloakProvider({
clientId: process.env.KEYCLOAK_CLIENT_ID ?? "",
clientSecret: process.env.KEYCLOAK_CLIENT_SECRET ?? "",
issuer: process.env.KEYCLOAK_ISSUER ?? "",
clientId: process.env.KEYCLOAK_CLIENT_ID!,
clientSecret: process.env.KEYCLOAK_CLIENT_SECRET!,
issuer: process.env.KEYCLOAK_ISSUER!,
profile(profile) {
return {
id: profile.sub,
username: profile.preferred_username,
name: profile.name ?? profile.preferred_username,
email: profile.email,
image: Avatar.src,
@@ -97,88 +19,6 @@ const authOptions: NextAuthOptions = {
}),
],
secret: process.env.NEXTAUTH_SECRET,
callbacks: {
jwt: async ({ token, profile, account, trigger, session }) => {
if (profile?.sub) {
token.sub = profile.sub;
}
const preferredUsername = (
profile as { preferred_username?: unknown } | undefined
)?.preferred_username;
if (typeof preferredUsername === "string") {
token.username = preferredUsername;
}
if (account) {
token.sessionExpiresAt = Date.now() + SESSION_MAX_AGE_SECONDS * 1000;
if (account.access_token) {
token.accessToken = account.access_token;
token.accessTokenIssuedAt = Date.now();
}
if (account.refresh_token) {
token.refreshToken = account.refresh_token;
}
if (account.id_token) {
token.idToken = account.id_token;
}
if (typeof account.expires_at === "number") {
token.accessTokenExpires = account.expires_at * 1000;
}
token.error = undefined;
return token;
}
if (
typeof token.sessionExpiresAt === "number" &&
Date.now() >= token.sessionExpiresAt
) {
return { ...token, error: "SessionExpired" };
}
if (
trigger === "update" &&
(session as { forceRefresh?: unknown } | undefined)?.forceRefresh === true
) {
return refreshAccessToken(token);
}
const accessTokenIsFresh =
typeof token.accessTokenExpires === "number" &&
typeof token.accessTokenIssuedAt === "number" &&
Date.now() < token.accessTokenExpires - ACCESS_TOKEN_REFRESH_SKEW_MS;
if (accessTokenIsFresh) {
return token;
}
return refreshAccessToken(token);
},
session: async ({ session, token }) => {
if (session.user && token.sub) {
session.user.id = token.sub;
}
if (session.user && token.username) {
session.user.username = token.username;
}
if (token.accessToken) {
session.accessToken = token.accessToken;
}
if (token.error) {
session.error = token.error;
}
if (typeof token.sessionExpiresAt === "number") {
session.sessionExpiresAt = token.sessionExpiresAt;
}
return session;
},
},
session: {
strategy: "jwt",
maxAge: SESSION_MAX_AGE_SECONDS,
},
jwt: {
maxAge: SESSION_MAX_AGE_SECONDS,
},
};
export default authOptions;
src/app/api/auth/keycloak-logout/route.test.ts
-97
View File
@@ -1,97 +0,0 @@
/**
* @jest-environment node
*/
import { NextRequest } from "next/server";
import { getToken } from "next-auth/jwt";
import { GET } from "./route";
jest.mock("next-auth/jwt", () => ({
getToken: jest.fn(),
}));
const getTokenMock = getToken as jest.MockedFunction<typeof getToken>;
describe("GET /api/auth/keycloak-logout", () => {
const originalIssuer = process.env.KEYCLOAK_ISSUER;
const originalClientId = process.env.KEYCLOAK_CLIENT_ID;
const originalNextAuthUrl = process.env.NEXTAUTH_URL;
const originalPostLogoutRedirectUri =
process.env.KEYCLOAK_POST_LOGOUT_REDIRECT_URI;
beforeEach(() => {
process.env.KEYCLOAK_ISSUER = "https://keycloak.example.com/realms/tjwater";
process.env.KEYCLOAK_CLIENT_ID = "tjwater";
process.env.NEXTAUTH_URL = "https://frontend.example.com";
delete process.env.KEYCLOAK_POST_LOGOUT_REDIRECT_URI;
getTokenMock.mockReset();
});
afterAll(() => {
process.env.KEYCLOAK_ISSUER = originalIssuer;
process.env.KEYCLOAK_CLIENT_ID = originalClientId;
process.env.NEXTAUTH_URL = originalNextAuthUrl;
if (originalPostLogoutRedirectUri) {
process.env.KEYCLOAK_POST_LOGOUT_REDIRECT_URI = originalPostLogoutRedirectUri;
} else {
delete process.env.KEYCLOAK_POST_LOGOUT_REDIRECT_URI;
}
});
it("clears the local session and redirects the browser to Keycloak logout", async () => {
getTokenMock.mockResolvedValue({
idToken: "header.payload.signature",
});
const request = new NextRequest(
"https://frontend.example.com/api/auth/keycloak-logout",
{
headers: {
cookie:
"__Secure-next-auth.session-token.0=first; __Secure-next-auth.session-token.1=second; next-auth.session-token=local",
},
},
);
const response = await GET(request);
const logoutUrl = new URL(response.headers.get("location") ?? "");
expect(logoutUrl.origin).toBe("https://keycloak.example.com");
expect(logoutUrl.pathname).toBe(
"/realms/tjwater/protocol/openid-connect/logout",
);
expect(logoutUrl.searchParams.get("id_token_hint")).toBe(
"header.payload.signature",
);
expect(logoutUrl.searchParams.get("client_id")).toBe("tjwater");
expect(logoutUrl.searchParams.get("post_logout_redirect_uri")).toBeNull();
expect(
response.cookies.get("__Secure-next-auth.session-token.0"),
).toMatchObject({ value: "", path: "/", secure: true });
expect(
response.cookies.get("__Secure-next-auth.session-token.1"),
).toMatchObject({ value: "", path: "/", secure: true });
expect(response.cookies.get("next-auth.session-token")).toMatchObject({
value: "",
path: "/",
});
expect(
response.cookies.get("next-auth.session-token")?.secure,
).toBeFalsy();
});
it("ignores a legacy automatic post-logout redirect setting", async () => {
process.env.KEYCLOAK_POST_LOGOUT_REDIRECT_URI =
"https://frontend.example.com/login";
getTokenMock.mockResolvedValue({ idToken: "header.payload.signature" });
const response = await GET(
new NextRequest(
"https://frontend.example.com/api/auth/keycloak-logout",
),
);
const logoutUrl = new URL(response.headers.get("location") ?? "");
expect(logoutUrl.searchParams.get("post_logout_redirect_uri")).toBeNull();
});
});
src/app/api/auth/keycloak-logout/route.ts
-48
View File
@@ -1,48 +0,0 @@
import { NextRequest, NextResponse } from "next/server";
import { getToken } from "next-auth/jwt";
type KeycloakToken = {
idToken?: string;
};
const sessionCookiePrefixes = [
"next-auth.session-token",
"__Secure-next-auth.session-token",
];
const isSessionCookie = (name: string) =>
sessionCookiePrefixes.some((prefix) => name.startsWith(prefix));
export const GET = async (request: NextRequest) => {
const localLoginUrl = new URL(
"/login",
process.env.NEXTAUTH_URL ?? request.nextUrl.origin,
);
const issuer = process.env.KEYCLOAK_ISSUER?.replace(/\/$/, "");
const clientId = process.env.KEYCLOAK_CLIENT_ID;
const token = (await getToken({
req: request,
secret: process.env.NEXTAUTH_SECRET,
})) as KeycloakToken | null;
const logoutUrl = issuer
? new URL(`${issuer}/protocol/openid-connect/logout`)
: localLoginUrl;
if (issuer) {
if (clientId) logoutUrl.searchParams.set("client_id", clientId);
if (token?.idToken) logoutUrl.searchParams.set("id_token_hint", token.idToken);
}
const response = NextResponse.redirect(logoutUrl);
for (const { name } of request.cookies.getAll()) {
if (isSessionCookie(name)) {
response.cookies.delete({
name,
path: "/",
secure: name.startsWith("__Secure-"),
});
}
}
return response;
};
src/app/api/tts/edge/route.test.ts
-50
View File
@@ -1,50 +0,0 @@
/**
* @jest-environment node
*/
import { POST } from "./route";
const streamMock = jest.fn();
jest.mock("edge-tts-ts", () => ({
Communicate: jest.fn().mockImplementation(() => ({
stream: streamMock,
})),
}));
describe("POST /api/tts/edge", () => {
beforeEach(() => {
streamMock.mockReset();
});
it("returns synthesized mp3 audio", async () => {
streamMock.mockImplementation(async function* () {
yield { type: "audio", data: new Uint8Array([1, 2]) };
yield { type: "SentenceBoundary", offset: 0, duration: 1, text: "测试" };
yield { type: "audio", data: new Uint8Array([3]) };
});
const response = await POST(
new Request("http://localhost/api/tts/edge", {
method: "POST",
body: JSON.stringify({ text: "测试文本" }),
}),
);
expect(response.status).toBe(200);
expect(response.headers.get("Content-Type")).toBe("audio/mpeg");
expect(Array.from(new Uint8Array(await response.arrayBuffer()))).toEqual([1, 2, 3]);
});
it("rejects empty text", async () => {
const response = await POST(
new Request("http://localhost/api/tts/edge", {
method: "POST",
body: JSON.stringify({ text: " " }),
}),
);
expect(response.status).toBe(400);
expect(await response.json()).toEqual({ error: "text is required" });
});
});
src/app/api/tts/edge/route.ts
-76
View File
@@ -1,76 +0,0 @@
import { NextResponse } from "next/server";
import { Communicate } from "edge-tts-ts";
export const runtime = "nodejs";
export const dynamic = "force-dynamic";
const DEFAULT_VOICE = process.env.EDGE_TTS_VOICE || "zh-CN-XiaoxiaoNeural";
const MAX_TEXT_LENGTH = 12000;
type EdgeTtsRequest = {
text?: unknown;
voice?: unknown;
};
const jsonError = (message: string, status: number) =>
NextResponse.json({ error: message }, { status });
export async function POST(request: Request) {
let payload: EdgeTtsRequest;
try {
payload = (await request.json()) as EdgeTtsRequest;
} catch {
return jsonError("Invalid JSON body", 400);
}
const text = typeof payload.text === "string" ? payload.text.trim() : "";
if (!text) {
return jsonError("text is required", 400);
}
if (text.length > MAX_TEXT_LENGTH) {
return jsonError(`text must be ${MAX_TEXT_LENGTH} characters or fewer`, 413);
}
const voice =
typeof payload.voice === "string" && payload.voice.trim()
? payload.voice.trim()
: DEFAULT_VOICE;
try {
const communicate = new Communicate(text, { voice });
const chunks: Uint8Array[] = [];
let byteLength = 0;
for await (const chunk of communicate.stream()) {
if (chunk.type !== "audio") continue;
chunks.push(chunk.data);
byteLength += chunk.data.byteLength;
}
if (byteLength === 0) {
return jsonError("Edge TTS returned empty audio", 502);
}
const audio = new Uint8Array(byteLength);
let offset = 0;
for (const chunk of chunks) {
audio.set(chunk, offset);
offset += chunk.byteLength;
}
const audioBuffer = audio.buffer.slice(
audio.byteOffset,
audio.byteOffset + audio.byteLength,
);
return new Response(audioBuffer, {
headers: {
"Content-Type": "audio/mpeg",
"Cache-Control": "no-store",
},
});
} catch (error) {
console.error("[EdgeTTS] Failed to synthesize speech:", error);
return jsonError("Failed to synthesize speech", 502);
}
}
src/app/globals.css
-1
View File
@@ -6,5 +6,4 @@ body {
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
src/app/layout.tsx
+2 -4
View File
@@ -1,8 +1,7 @@
import type { Metadata } from "next";
import { cookies } from "next/headers";
import Script from "next/script";
import React, { Suspense } from "react";
import { RefineContext } from "./RefineContext";
import { RefineContext } from "./_refine_context";
import { META_DATA } from "@config/config";
export const metadata: Metadata = META_DATA;
@@ -17,9 +16,8 @@ export default async function RootLayout({
const defaultMode = theme?.value === "dark" ? "dark" : "light";
return (
<html lang="zh-CN">
<html lang="en">
<body>
<Script src="/runtime-config.js" strategy="beforeInteractive" />
<Suspense>
<RefineContext defaultMode={defaultMode}>{children}</RefineContext>
</Suspense>
src/app/login/page.test.tsx
-45
View File
@@ -1,45 +0,0 @@
import { act, fireEvent, render, screen } from "@testing-library/react";
import Login from "./page";
const mockLogin = jest.fn();
jest.mock("@refinedev/core", () => ({
useLogin: () => ({ mutate: mockLogin }),
}));
describe("Login", () => {
beforeEach(() => {
jest.useFakeTimers();
mockLogin.mockClear();
});
afterEach(() => {
jest.useRealTimers();
});
it("starts Keycloak login once when the page opens", () => {
const { rerender } = render(<Login />);
expect(mockLogin).toHaveBeenCalledTimes(1);
expect(mockLogin).toHaveBeenCalledWith({});
expect(screen.getByText("正在进入账号登录")).toBeInTheDocument();
rerender(<Login />);
expect(mockLogin).toHaveBeenCalledTimes(1);
});
it("shows a manual fallback when automatic redirect does not complete", () => {
render(<Login />);
expect(
screen.queryByRole("button", { name: "继续登录" }),
).not.toBeInTheDocument();
act(() => {
jest.advanceTimersByTime(4000);
});
fireEvent.click(screen.getByRole("button", { name: "继续登录" }));
expect(mockLogin).toHaveBeenCalledTimes(2);
});
});
src/app/login/page.tsx
+28 -232
View File
@@ -2,258 +2,54 @@
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import CircularProgress from "@mui/material/CircularProgress";
import Stack from "@mui/material/Stack";
import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";
import { useLogin } from "@refinedev/core";
import { PROJECT_TITLE } from "@config/config";
import { useEffect, useRef, useState } from "react";
const FALLBACK_DELAY_MS = 4000;
import { ThemedTitle } from "@refinedev/mui";
export default function Login() {
const { mutate: login } = useLogin();
const loginStartedRef = useRef(false);
const [showFallback, setShowFallback] = useState(false);
useEffect(() => {
if (!loginStartedRef.current) {
loginStartedRef.current = true;
login({});
}
const fallbackTimer = window.setTimeout(
() => setShowFallback(true),
FALLBACK_DELAY_MS,
);
return () => window.clearTimeout(fallbackTimer);
}, [login]);
return (
<Box
component="main"
sx={{
minHeight: "100vh",
"@supports (height: 100svh)": {
minHeight: "100svh",
},
color: "oklch(0.3 0.055 215)",
bgcolor: "oklch(0.965 0.014 205)",
backgroundImage: `
linear-gradient(
90deg,
transparent 0%,
transparent 50%,
oklch(0.975 0.01 205 / 62%) 68%,
oklch(0.975 0.01 205 / 82%) 100%
),
url("/login-network-blueprint.svg")
`,
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
"@keyframes tjwaterEnter": {
from: { opacity: 0, transform: "translateY(12px)" },
to: { opacity: 1, transform: "translateY(0)" },
},
}}
>
<Box
sx={{
width: "100%",
maxWidth: 1720,
minHeight: "100vh",
"@supports (height: 100svh)": {
minHeight: "100svh",
},
mx: "auto",
px: {
xs: 1.75,
sm: 3,
md: "clamp(40px, 5vw, 88px)",
},
py: {
xs: "max(28px, env(safe-area-inset-top))",
md: "clamp(32px, 4.5vw, 76px)",
},
display: "grid",
gridTemplateColumns: {
xs: "minmax(0, 1fr)",
md: "minmax(360px, 1fr) minmax(400px, 460px)",
},
gridTemplateAreas: {
xs: '"brand" "status"',
md: '"brand status"',
},
alignContent: { xs: "center", md: "stretch" },
<Container
style={{
height: "100vh",
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: { xs: 2.25, md: "clamp(64px, 8vw, 152px)" },
}}
>
<Stack
spacing={{ xs: 0, md: 3 }}
direction={{ xs: "row", md: "column" }}
alignItems={{ xs: "center", md: "flex-start" }}
sx={{
position: "relative",
isolation: "isolate",
gridArea: "brand",
width: "fit-content",
maxWidth: "100%",
animation:
"tjwaterEnter 480ms cubic-bezier(0.16, 1, 0.3, 1) both",
"&::before": {
position: "absolute",
zIndex: -1,
inset: { xs: "-24px -20px", md: "-54px -72px" },
background: {
xs: `radial-gradient(
ellipse at center,
oklch(0.965 0.014 205 / 98%) 0%,
oklch(0.965 0.014 205 / 88%) 58%,
transparent 84%
)`,
md: `radial-gradient(
ellipse at center,
oklch(0.925 0.018 205 / 98%) 0%,
oklch(0.925 0.018 205 / 94%) 48%,
oklch(0.925 0.018 205 / 62%) 65%,
transparent 82%
)`,
},
pointerEvents: "none",
content: '""',
},
}}
>
<Box
component="img"
src="/login-logo-mark.svg"
alt=""
width={56}
height={56}
sx={{
width: { xs: 42, md: 56 },
height: { xs: 42, md: 56 },
flex: { xs: "0 0 42px", md: "0 0 auto" },
mr: { xs: 1.5, md: 0 },
display="flex"
gap="36px"
justifyContent="center"
flexDirection="column"
>
<ThemedTitle
collapsed={false}
wrapperStyles={{
fontSize: "22px",
justifyContent: "center",
}}
/>
<Typography
component="h1"
sx={{
maxWidth: 680,
m: 0,
fontSize: { xs: 21, sm: 28, md: "clamp(34px, 3vw, 46px)" },
fontWeight: 720,
lineHeight: { xs: 1.4, md: 1.28 },
textWrap: "balance",
}}
>
{PROJECT_TITLE}
</Typography>
<Box
aria-hidden="true"
sx={{
display: { xs: "none", md: "block" },
width: 64,
height: 3,
borderRadius: 999,
bgcolor: "oklch(0.58 0.12 180)",
}}
/>
</Stack>
<Box
aria-live="polite"
sx={{
gridArea: "status",
width: "100%",
maxWidth: 460,
justifySelf: "stretch",
p: { xs: 2.75, sm: 4.5 },
overflow: "hidden",
borderRadius: { xs: 4, sm: 4.5 },
bgcolor: "oklch(0.995 0.004 205 / 97%)",
boxShadow:
"0 32px 80px rgb(22 65 75 / 16%), 0 5px 18px rgb(22 65 75 / 9%)",
animation:
"tjwaterEnter 520ms 70ms cubic-bezier(0.16, 1, 0.3, 1) both",
}}
>
<Stack spacing={3}>
<Stack direction="row" spacing={2} alignItems="center">
<CircularProgress
size={30}
thickness={4.5}
aria-label="正在连接统一身份认证"
sx={{
flex: "0 0 auto",
color: "oklch(0.57 0.16 242)",
"@media (prefers-reduced-motion: reduce)": {
animation: "none",
"& .MuiCircularProgress-circle": {
animation: "none",
},
},
}}
/>
<Stack spacing={0.5}>
<Typography
component="h2"
sx={{ fontSize: { xs: 22, sm: 26 }, fontWeight: 720 }}
>
正在进入账号登录
</Typography>
<Typography
sx={{
color: "oklch(0.52 0.035 215)",
fontSize: { xs: 14, sm: 15 },
lineHeight: 1.7,
}}
>
正在连接统一身份认证服务，请稍候。
</Typography>
</Stack>
</Stack>
{showFallback ? (
<Button
fullWidth
style={{ width: "240px" }}
size="large"
variant="contained"
onClick={() => login({})}
sx={{
minHeight: 48,
borderRadius: 3,
fontSize: 16,
fontWeight: 700,
textTransform: "none",
boxShadow:
"0 8px 18px oklch(0.48 0.15 242 / 20%)",
transitionProperty:
"transform, background-color, box-shadow",
"&:active": { transform: "scale(0.96)" },
}}
>
继续登录
Sign in
</Button>
) : null}
<Typography
sx={{
color: "oklch(0.52 0.035 215)",
fontSize: { xs: 12, sm: 13 },
lineHeight: 1.7,
textAlign: "center",
}}
>
账号与访问权限由统一身份认证服务管理
<Typography align="center" color={"text.secondary"} fontSize="12px">
Powered by
<img
style={{ padding: "0 5px" }}
alt="Keycloak"
src="https://refine.ams3.cdn.digitaloceanspaces.com/superplate-auth-icons%2Fkeycloak.svg"
/>
Keycloak
</Typography>
</Stack>
</Box>
</Box>
</Box>
</Container>
);
}
src/components/admin/SystemAdminPanel.tsx
-1837
View File
File diff suppressed because it is too large Load Diff
src/components/audit/AuditLogPanel.tsx
-1032
View File
File diff suppressed because it is too large Load Diff
src/components/auth/RoutePermissionGuard.tsx
-45
View File
@@ -1,45 +0,0 @@
"use client";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import { Alert, Box, CircularProgress, Stack, Typography } from "@mui/material";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";
import { permissionForPath } from "@/lib/permissions";
import { useAccessStore } from "@/store/accessStore";
export const RoutePermissionGuard = ({
children,
}: {
children: ReactNode;
}) => {
const pathname = usePathname();
const permissions = useAccessStore((state) => state.permissions);
const loading = useAccessStore((state) => state.loading);
const requiredPermission = permissionForPath(pathname);
if (requiredPermission && loading) {
return (
<Box sx={{ minHeight: 320, display: "grid", placeItems: "center" }}>
<CircularProgress size={28} />
</Box>
);
}
if (requiredPermission && !permissions.includes(requiredPermission)) {
return (
<Box sx={{ p: { xs: 2, md: 4 } }}>
<Alert severity="error" icon={<LockOutlinedIcon />}>
<Stack spacing={0.5}>
<Typography fontWeight={700}>无权访问此功能</Typography>
<Typography variant="body2">
当前项目角色缺少权限：{requiredPermission}
</Typography>
</Stack>
</Alert>
</Box>
);
}
return children;
};
src/components/auth/SessionExpiryDialog.test.tsx
-39
View File
@@ -1,39 +0,0 @@
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { act, render, screen } from "@testing-library/react";
import { useAuthStore } from "@/store/authStore";
import { SessionExpiryDialog } from "./SessionExpiryDialog";
jest.mock("next-auth/react", () => ({
signIn: jest.fn(),
}));
describe("SessionExpiryDialog", () => {
beforeEach(() => {
useAuthStore.setState({
accessToken: null,
sessionExpired: true,
sessionExpiryReason: "unauthorized",
});
});
afterEach(() => {
act(() => useAuthStore.getState().clearSessionExpired());
});
it("renders above every regular application overlay", () => {
const theme = createTheme();
render(
<ThemeProvider theme={theme}>
<SessionExpiryDialog />
</ThemeProvider>,
);
const dialogRoot = screen.getByRole("dialog").closest(".MuiModal-root");
expect(dialogRoot).not.toBeNull();
expect(dialogRoot).toHaveStyle({
zIndex: theme.zIndex.tooltip + 1,
});
});
});
src/components/auth/SessionExpiryDialog.tsx
-92
View File
@@ -1,92 +0,0 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import { signIn } from "next-auth/react";
import AccessTimeOutlinedIcon from "@mui/icons-material/AccessTimeOutlined";
import {
Alert,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Stack,
Typography,
} from "@mui/material";
import { useTheme } from "@mui/material/styles";
import { useAuthStore } from "@/store/authStore";
const WARNING_WINDOW_MS = 15 * 60 * 1000;
type SessionExpiryDialogProps = {
expiresAt?: number;
};
export const SessionExpiryDialog = ({
expiresAt,
}: SessionExpiryDialogProps) => {
const theme = useTheme();
const sessionExpired = useAuthStore((state) => state.sessionExpired);
const reason = useAuthStore((state) => state.sessionExpiryReason);
const [now, setNow] = useState(() => Date.now());
const [warningDismissed, setWarningDismissed] = useState(false);
useEffect(() => {
const timer = window.setInterval(() => setNow(Date.now()), 30_000);
return () => window.clearInterval(timer);
}, []);
const isExpiringSoon = useMemo(
() =>
!sessionExpired &&
!warningDismissed &&
typeof expiresAt === "number" &&
expiresAt > now &&
expiresAt - now <= WARNING_WINDOW_MS,
[expiresAt, now, sessionExpired, warningDismissed],
);
const handleReauthenticate = () => {
const callbackUrl = `${window.location.pathname}${window.location.search}`;
void signIn("keycloak", { callbackUrl, redirect: true });
};
const isOpen = sessionExpired || isExpiringSoon;
const title = sessionExpired ? "登录已过期" : "登录即将到期";
const detail = sessionExpired
? reason === "session_max_age"
? "已达到 12 小时的最长连续登录时间。请重新认证后继续。"
: "无法续期当前登录。请重新认证后继续。"
: "当前登录将在 15 分钟内到期。请先保存正在编辑的内容。";
return (
<Dialog
open={isOpen}
style={{ zIndex: theme.zIndex.tooltip + 1 }}
disableEscapeKeyDown={sessionExpired}
onClose={sessionExpired ? undefined : () => setWarningDismissed(true)}
aria-labelledby="session-expiry-dialog-title"
>
<DialogTitle id="session-expiry-dialog-title">{title}</DialogTitle>
<DialogContent>
<Stack spacing={2} sx={{ pt: 0.5 }}>
<Alert icon={<AccessTimeOutlinedIcon />} severity={sessionExpired ? "warning" : "info"}>
{detail}
</Alert>
<Typography variant="body2" color="text.secondary">
重新认证不会自动重放已失败的写入请求；请在返回后确认内容并再次提交。
</Typography>
</Stack>
</DialogContent>
<DialogActions>
{!sessionExpired && (
<Button onClick={() => setWarningDismissed(true)}>稍后处理</Button>
)}
<Button variant="contained" onClick={handleReauthenticate}>
重新认证
</Button>
</DialogActions>
</Dialog>
);
};
src/components/chat/AgentArtifactPanel.tsx
-132
View File
@@ -1,132 +0,0 @@
"use client";
import React from "react";
import {
Box,
Chip,
Paper,
Stack,
Typography,
alpha,
useTheme,
} from "@mui/material";
import type { Theme } from "@mui/material/styles";
import BarChartRounded from "@mui/icons-material/BarChartRounded";
import LocationOnRounded from "@mui/icons-material/LocationOnRounded";
import SensorsRounded from "@mui/icons-material/SensorsRounded";
import BuildCircleRounded from "@mui/icons-material/BuildCircleRounded";
import { ChatInlineChart } from "./ChatInlineChart";
import type { AgentArtifact } from "./GlobalChatbox.types";
const artifactIcon = (kind: AgentArtifact["kind"]) => {
if (kind === "chart") return <BarChartRounded sx={{ fontSize: 18 }} />;
if (kind === "map") return <LocationOnRounded sx={{ fontSize: 18 }} />;
if (kind === "panel") return <SensorsRounded sx={{ fontSize: 18 }} />;
return <BuildCircleRounded sx={{ fontSize: 18 }} />;
};
const artifactColor = (kind: AgentArtifact["kind"], theme: Theme) => {
if (kind === "chart") return theme.palette.info.main;
if (kind === "map") return theme.palette.success.main;
if (kind === "panel") return theme.palette.warning.main;
return theme.palette.primary.main;
};
export const AgentArtifactPanel = ({ artifacts }: { artifacts: AgentArtifact[] }) => {
const theme = useTheme();
if (!artifacts.length) return null;
return (
<Stack spacing={1.25}>
<Stack direction="row" spacing={1} alignItems="center">
<Typography variant="caption" fontWeight={800} color="text.primary">
结果与动作
</Typography>
<Chip
size="small"
label={`${artifacts.length} 项`}
sx={{ height: 20, fontSize: "0.68rem" }}
/>
</Stack>
{artifacts.map((artifact) => {
const color = artifactColor(artifact.kind, theme);
if (artifact.kind === "chart") {
return (
<ChatInlineChart
key={artifact.id}
title={(artifact.params.title as string) ?? artifact.title}
chart_type={
(artifact.params.chart_type as "line" | "bar" | "pie") ?? "line"
}
x_data={
artifact.params.x_data ??
artifact.params.xData ??
artifact.params.labels ??
artifact.params.categories
}
series={artifact.params.series}
x_axis_name={(artifact.params.x_axis_name as string) ?? undefined}
y_axis_name={(artifact.params.y_axis_name as string) ?? undefined}
/>
);
}
return (
<Paper
key={artifact.id}
elevation={0}
sx={{
p: 1.35,
borderRadius: 3,
border: `1px solid ${alpha(color, 0.22)}`,
bgcolor: alpha(color, 0.055),
}}
>
<Stack direction="row" spacing={1.25} alignItems="center">
<Box
sx={{
width: 32,
height: 32,
borderRadius: 2,
bgcolor: alpha(color, 0.12),
color,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{artifactIcon(artifact.kind)}
</Box>
<Box sx={{ minWidth: 0, flex: 1 }}>
<Typography variant="caption" fontWeight={800} color="text.primary">
{artifact.title}
</Typography>
{artifact.description ? (
<Typography
variant="caption"
color="text.secondary"
sx={{ display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
>
{artifact.description}
</Typography>
) : null}
</Box>
<Chip
size="small"
label="已执行"
sx={{
height: 22,
fontSize: "0.68rem",
bgcolor: alpha(color, 0.12),
color,
}}
/>
</Stack>
</Paper>
);
})}
</Stack>
);
};
src/components/chat/AgentComposer.test.tsx
-111
View File
@@ -1,111 +0,0 @@
/* eslint-disable @next/next/no-img-element */
import React from "react";
import { render, screen } from "@testing-library/react";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { AgentComposer } from "./AgentComposer";
jest.mock("next/image", () => ({
__esModule: true,
default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => (
<img {...props} alt={props.alt ?? ""} />
),
}));
jest.mock("framer-motion", () => ({
AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
motion: {
div: ({
children,
animate: _animate,
exit: _exit,
initial: _initial,
transition: _transition,
...props
}: React.HTMLAttributes<HTMLDivElement> & Record<string, unknown>) => (
<div {...props}>{children}</div>
),
},
}));
describe("AgentComposer", () => {
it("places voice input immediately before send without an attachment action", () => {
render(
<ThemeProvider theme={createTheme()}>
<AgentComposer
isStreaming={false}
isListening={false}
isSttSupported
presets={[]}
onSend={jest.fn()}
onAbort={jest.fn()}
onStartListening={jest.fn()}
onStopListening={jest.fn()}
modelOptions={[{ id: "test-model", label: "测试模型" }]}
selectedModel="test-model"
onModelChange={jest.fn()}
approvalMode="auto"
onApprovalModeChange={jest.fn()}
/>
</ThemeProvider>,
);
const voiceButton = screen.getByRole("button", { name: "语音输入" });
const sendButton = screen.getByRole("button", { name: "发送" });
expect(screen.queryByRole("button", { name: "上传附件" })).not.toBeInTheDocument();
expect(screen.getByTitle("快捷指令图标")).toBeInTheDocument();
expect(screen.queryByAltText("TJWater Agent")).not.toBeInTheDocument();
expect(screen.getByText("自动批准")).toBeInTheDocument();
expect(voiceButton.nextElementSibling?.contains(sendButton)).toBe(true);
});
it("disables input while the Agent runtime is unavailable", () => {
render(
<ThemeProvider theme={createTheme()}>
<AgentComposer
isStreaming={false}
runtimeState="unavailable"
isListening={false}
isSttSupported={false}
presets={[]}
onSend={jest.fn()}
onAbort={jest.fn()}
onStartListening={jest.fn()}
onStopListening={jest.fn()}
modelOptions={[]}
onModelChange={jest.fn()}
approvalMode="auto"
onApprovalModeChange={jest.fn()}
/>
</ThemeProvider>,
);
expect(screen.getByPlaceholderText("Agent 服务未就绪，暂时无法发送消息")).toBeDisabled();
expect(screen.getByRole("button", { name: "发送" })).toBeDisabled();
});
it("renders the always-allow mode as an explicit warning state", () => {
render(
<ThemeProvider theme={createTheme()}>
<AgentComposer
isStreaming={false}
isListening={false}
isSttSupported={false}
presets={[]}
onSend={jest.fn()}
onAbort={jest.fn()}
onStartListening={jest.fn()}
onStopListening={jest.fn()}
modelOptions={[]}
onModelChange={jest.fn()}
approvalMode="always"
onApprovalModeChange={jest.fn()}
/>
</ThemeProvider>,
);
expect(screen.getByText("始终允许")).toBeInTheDocument();
expect(screen.getByTestId("WarningAmberRoundedIcon")).toBeInTheDocument();
});
});
src/components/chat/AgentComposer.tsx
-603
View File
@@ -1,603 +0,0 @@
"use client";
import Image from "next/image";
import React from "react";
import { AnimatePresence, motion } from "framer-motion";
import {
Box,
Chip,
Collapse,
FormControl,
IconButton,
MenuItem,
Paper,
Select,
Stack,
TextField,
Typography,
alpha,
useTheme,
} from "@mui/material";
import SendRounded from "@mui/icons-material/SendRounded";
import StopRounded from "@mui/icons-material/StopRounded";
import MicRounded from "@mui/icons-material/MicRounded";
import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
import KeyboardArrowUpRounded from "@mui/icons-material/KeyboardArrowUpRounded";
import BoltRounded from "@mui/icons-material/BoltRounded";
import AutoAwesomeRounded from "@mui/icons-material/AutoAwesomeRounded";
import VerifiedUserRounded from "@mui/icons-material/VerifiedUserRounded";
import AdminPanelSettingsRounded from "@mui/icons-material/AdminPanelSettingsRounded";
import WarningAmberRounded from "@mui/icons-material/WarningAmberRounded";
import type { AgentRuntimeState } from "@/lib/agentRuntime";
import type { AgentModelOption } from "@/lib/chatModels";
import type { AgentApprovalMode, AgentModel } from "@/lib/chatStream";
export type AgentComposerHandle = {
focus: () => void;
clear: () => void;
append: (text: string) => void;
setValue: (value: string) => void;
getValue: () => string;
};
type AgentComposerProps = {
isHydrating?: boolean;
runtimeState?: AgentRuntimeState;
isStreaming: boolean;
isListening: boolean;
isSttSupported: boolean;
presets: string[];
onSend: (prompt: string) => void;
onAbort: () => void;
onStartListening: () => void;
onStopListening: () => void;
modelOptions: AgentModelOption[];
selectedModel?: AgentModel;
onModelChange: (model: AgentModel) => void;
approvalMode: AgentApprovalMode;
onApprovalModeChange: (mode: AgentApprovalMode) => void;
};
const approvalModeOptions: ReadonlyArray<{
value: AgentApprovalMode;
label: string;
description: string;
icon: React.ElementType;
}> = [
{
value: "request",
label: "请求批准",
description: "白名单外的工具权限逐次确认",
icon: VerifiedUserRounded,
},
{
value: "auto",
label: "自动批准",
description: "低风险自动批准，其余仍需确认",
icon: AdminPanelSettingsRounded,
},
{
value: "always",
label: "始终允许",
description: "除明确禁止项外自动放行",
icon: WarningAmberRounded,
},
];
const getApprovalModeOption = (value: AgentApprovalMode) =>
approvalModeOptions.find((option) => option.value === value) ?? approvalModeOptions[0];
const renderModelIcon = (
icon: AgentModelOption["icon"] | undefined,
props?: React.ComponentProps<typeof BoltRounded>,
) =>
icon === "bolt" ? (
<BoltRounded {...props} />
) : (
<AutoAwesomeRounded {...props} />
);
export const AgentComposer = React.forwardRef<AgentComposerHandle, AgentComposerProps>(function AgentComposer({
isHydrating = false,
runtimeState = "ready",
isStreaming,
isListening,
isSttSupported,
presets,
onSend,
onAbort,
onStartListening,
onStopListening,
modelOptions,
selectedModel,
onModelChange,
approvalMode,
onApprovalModeChange,
}, ref) {
const theme = useTheme();
const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
const [input, setInput] = React.useState("");
const [isPresetOpen, setIsPresetOpen] = React.useState(false);
const isRuntimeReady = runtimeState === "ready";
const canSend = input.trim().length > 0 && !isStreaming && !isHydrating && isRuntimeReady;
const placeholder = isHydrating
? "正在加载对话记录..."
: runtimeState === "checking"
? "正在连接 Agent 服务..."
: runtimeState === "models_unavailable"
? "模型尚未加载，暂时无法发送消息"
: runtimeState === "unavailable"
? "Agent 服务未就绪，暂时无法发送消息"
: "描述你的分析目标，或点击上方指令库...";
const selectedModelOption = modelOptions.find((model) => model.id === selectedModel);
const selectedApprovalModeOption = getApprovalModeOption(approvalMode);
React.useImperativeHandle(
ref,
() => ({
focus: () => inputRef.current?.focus(),
clear: () => setInput(""),
append: (text: string) => setInput((prev) => prev + text),
setValue: (value: string) => setInput(value),
getValue: () => input,
}),
[input],
);
const handleSend = React.useCallback(() => {
const prompt = input.trim();
if (!prompt || isStreaming || isHydrating || !isRuntimeReady) return;
setInput("");
onSend(prompt);
}, [input, isHydrating, isRuntimeReady, isStreaming, onSend]);
return (
<Box sx={{ px: 2, pb: 2, pt: 1, zIndex: 10 }}>
<Paper
elevation={isPresetOpen ? 4 : 0}
sx={{
mb: 1.5,
px: 1.5,
py: 1,
borderRadius: 4,
bgcolor: alpha("#fff", 0.6),
border: `1px solid ${alpha("#fff", 0.5)}`,
backdropFilter: "blur(24px)",
boxShadow: isPresetOpen ? `0 -8px 24px ${alpha("#00acc1", 0.1)}` : "none",
transition: "all 0.3s ease",
}}
>
<Stack direction="row" spacing={1} alignItems="center">
<AutoAwesomeRounded
titleAccess="快捷指令图标"
sx={{ fontSize: 18, color: "#00acc1", flexShrink: 0 }}
/>
<Typography variant="caption" color="text.secondary" fontWeight={800} sx={{ letterSpacing: 0.5 }}>
管网分析快捷指令
</Typography>
<Box sx={{ flex: 1 }} />
<IconButton
size="small"
onClick={() => setIsPresetOpen((value) => !value)}
aria-label={isPresetOpen ? "收起常用管网任务" : "展开常用管网任务"}
sx={{ width: 28, height: 28, color: "text.secondary", bgcolor: alpha("#fff", 0.5) }}
>
{isPresetOpen ? (
<KeyboardArrowDownRounded fontSize="small" />
) : (
<KeyboardArrowUpRounded fontSize="small" />
)}
</IconButton>
</Stack>
<Collapse in={isPresetOpen} timeout="auto" unmountOnExit>
<Box sx={{ mt: 1.5, mb: 0.5, pb: 1 }}>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
{presets.map((prompt) => (
<Chip
key={prompt}
label={prompt.replace(/[。.]$/, "")}
size="medium"
clickable
disabled={!isRuntimeReady || isHydrating || isStreaming}
onClick={() => {
setInput(prompt);
setIsPresetOpen(false);
window.setTimeout(() => {
inputRef.current?.focus();
}, 0);
}}
sx={{
height: 32,
borderRadius: "16px",
bgcolor: alpha("#fff", 0.7),
border: `1px solid ${alpha("#00acc1", 0.15)}`,
color: "text.primary",
fontWeight: 600,
fontSize: '0.85rem',
boxShadow: `0 2px 6px ${alpha("#000", 0.03)}`,
backdropFilter: "blur(10px)",
"&:hover": {
bgcolor: alpha("#fff", 0.95),
boxShadow: `0 4px 10px ${alpha("#00acc1", 0.2)}`,
borderColor: alpha("#00acc1", 0.4),
color: "#00acc1"
}
}}
/>
))}
</Box>
</Box>
</Collapse>
</Paper>
<motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }}>
<Paper
elevation={12}
sx={{
display: "flex",
flexDirection: "column",
p: 1.5,
borderRadius: 5,
bgcolor: alpha("#ffffff", 0.75),
backdropFilter: "blur(40px)",
border: `1px solid ${alpha("#ffffff", 0.9)}`,
boxShadow: `0 16px 40px ${alpha("#000", 0.1)}, 0 0 0 1px ${alpha("#00acc1", 0.05)} inset`,
}}
>
<TextField
inputRef={inputRef}
value={input}
onChange={(event) => setInput(event.target.value)}
onKeyDown={(event) => {
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault();
handleSend();
}
}}
placeholder={placeholder}
fullWidth
multiline
maxRows={5}
variant="standard"
disabled={isHydrating || !isRuntimeReady}
InputProps={{
disableUnderline: true,
sx: { px: 1, py: 0.5, fontSize: "1rem", lineHeight: 1.6, fontWeight: 500, color: "text.primary" },
}}
/>
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mt: 2 }}>
<Stack direction="row" spacing={0.5} alignItems="center">
<FormControl size="small" sx={{ minWidth: 128 }}>
<Select
value={approvalMode}
onChange={(event) =>
onApprovalModeChange(event.target.value as AgentApprovalMode)
}
disabled={isHydrating || isStreaming || !isRuntimeReady}
aria-label="权限批准模式"
renderValue={() => {
const SelectedApprovalIcon = selectedApprovalModeOption.icon;
return (
<Box sx={{ display: "flex", alignItems: "center", gap: 0.45 }}>
<SelectedApprovalIcon
sx={{
fontSize: 18,
color:
selectedApprovalModeOption.value === "always"
? "warning.main"
: "inherit",
}}
/>
<Typography sx={{ fontSize: "0.75rem", fontWeight: 600, color: "inherit" }}>
{selectedApprovalModeOption.label}
</Typography>
</Box>
);
}}
MenuProps={{
anchorOrigin: { vertical: "top", horizontal: "left" },
transformOrigin: { vertical: "bottom", horizontal: "left" },
sx: { zIndex: (theme) => theme.zIndex.modal + 110 },
PaperProps: {
sx: {
mb: 1.5,
width: 248,
borderRadius: 4,
bgcolor: alpha("#fff", 0.9),
backdropFilter: "blur(24px)",
border: `1px solid ${alpha("#fff", 0.9)}`,
boxShadow: `0 -12px 40px ${alpha("#000", 0.08)}`,
"& .MuiList-root": { p: 1 },
"& .MuiMenuItem-root": {
px: 1.5,
py: 1.2,
mb: 0.5,
borderRadius: 3,
alignItems: "flex-start",
"&:last-child": { mb: 0 },
"&.Mui-selected": {
bgcolor: alpha("#00acc1", 0.08),
"&:hover": { bgcolor: alpha("#00acc1", 0.12) },
"& .title": { color: "#00838f" },
"& .icon": { color: "#00acc1" },
"& .always-icon": { color: "warning.main" },
},
},
},
},
}}
sx={{
height: 36,
borderRadius: "18px",
bgcolor: alpha("#fff", 0.6),
color: "text.secondary",
".MuiOutlinedInput-notchedOutline": { border: "none" },
".MuiSelect-select": {
py: 0,
pl: 1,
pr: "28px !important",
minHeight: 36,
display: "flex",
alignItems: "center",
},
"&:hover, &:has(.MuiSelect-select[aria-expanded=\"true\"])": {
bgcolor: alpha("#000", 0.06),
color: "text.primary",
},
".MuiSelect-icon": {
color: "text.secondary",
right: 4,
},
}}
>
{approvalModeOptions.map((option) => {
const ApprovalIcon = option.icon;
const isAlways = option.value === "always";
return (
<MenuItem key={option.value} value={option.value}>
<ApprovalIcon
className={isAlways ? "icon always-icon" : "icon"}
sx={{
mr: 1.5,
mt: 0.15,
fontSize: 18,
color: isAlways ? "warning.main" : "text.secondary",
}}
/>
<Box>
<Typography
className="title"
sx={{
mb: 0.2,
color: "text.primary",
fontSize: "0.85rem",
fontWeight: 700,
}}
>
{option.label}
</Typography>
<Typography
sx={{
color: "text.secondary",
fontSize: "0.7rem",
fontWeight: 500,
lineHeight: 1.3,
whiteSpace: "nowrap",
}}
>
{option.description}
</Typography>
</Box>
</MenuItem>
);
})}
</Select>
</FormControl>
</Stack>
<Stack direction="row" spacing={1} alignItems="center">
<FormControl size="small" sx={{ minWidth: 80 }}>
<Select
value={selectedModel ?? ""}
onChange={(event) => onModelChange(event.target.value as AgentModel)}
disabled={isHydrating || isStreaming || modelOptions.length === 0}
aria-label="模型选择"
renderValue={() => (
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
{renderModelIcon(selectedModelOption?.icon, {
sx: {
fontSize: selectedModelOption?.icon === "bolt" ? 18 : 16,
color: "inherit",
transition: "color 0.2s",
},
})}
<Typography sx={{ fontSize: "0.8rem", fontWeight: 600, color: "inherit", transition: "color 0.2s" }}>
{selectedModelOption?.label ?? "模型"}
</Typography>
</Box>
)}
MenuProps={{
anchorOrigin: { vertical: "top", horizontal: "center" },
transformOrigin: { vertical: "bottom", horizontal: "center" },
sx: { zIndex: (theme) => theme.zIndex.modal + 110 },
PaperProps: {
sx: {
mb: 1.5,
width: 230,
borderRadius: 4,
bgcolor: alpha("#fff", 0.85),
backdropFilter: "blur(24px)",
border: `1px solid ${alpha("#fff", 0.9)}`,
boxShadow: `0 -12px 40px ${alpha("#000", 0.08)}, 0 0 0 1px ${alpha("#00acc1", 0.05)} inset`,
"& .MuiList-root": {
p: 1,
},
"& .MuiMenuItem-root": {
px: 1.5,
py: 1.2,
mb: 0.5,
"&:last-child": { mb: 0 },
borderRadius: 3,
alignItems: "flex-start",
transition: "all 0.2s ease",
"&:hover": {
bgcolor: alpha("#000", 0.03),
},
"&.Mui-selected": {
bgcolor: alpha("#00acc1", 0.08),
"&:hover": {
bgcolor: alpha("#00acc1", 0.12),
},
"& .title": { color: "#00838f" },
"& .icon": { color: "#00acc1" },
}
}
}
}
}}
sx={{
height: 36,
borderRadius: "18px",
bgcolor: "transparent",
color: "text.secondary",
transition: "all 0.2s ease",
".MuiOutlinedInput-notchedOutline": {
border: "none",
},
".MuiSelect-select": {
py: 0,
pl: 1,
pr: "28px !important",
display: "flex",
alignItems: "center",
},
"&:hover, &:has(.MuiSelect-select[aria-expanded=\"true\"])": {
bgcolor: alpha("#000", 0.06),
color: "text.primary",
".MuiSelect-icon": {
color: "text.primary",
}
},
".MuiSelect-icon": {
color: "text.secondary",
right: 4,
transition: "color 0.2s ease",
}
}}
>
<Box sx={{ px: 2, py: 1.5, pb: 1, display: "flex", alignItems: "center", gap: 1, pointerEvents: "none" }}>
<AutoAwesomeRounded sx={{ width: 16, height: 16, color: "text.secondary", flexShrink: 0 }} />
<Typography sx={{ fontSize: "0.75rem", fontWeight: 700, color: "text.secondary", letterSpacing: 0.5 }}>
模型选择
</Typography>
</Box>
{modelOptions.map((model) => (
<MenuItem key={model.id} value={model.id}>
{renderModelIcon(model.icon, {
className: "icon",
sx: { mr: 1.5, mt: 0.2, fontSize: model.icon === "bolt" ? 20 : 18, color: "text.secondary", transition: "color 0.2s" },
})}
<Box>
<Typography className="title" sx={{ fontSize: "0.85rem", fontWeight: 700, color: "text.primary", mb: 0.2, transition: "color 0.2s" }}>{model.label}</Typography>
{model.description ? (
<Typography sx={{ fontSize: "0.7rem", fontWeight: 500, color: "text.secondary", lineHeight: 1.3 }}>{model.description}</Typography>
) : null}
</Box>
</MenuItem>
))}
</Select>
</FormControl>
{isSttSupported ? (
isListening ? (
<motion.div
animate={{ scale: [1, 1.14, 1] }}
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
>
<IconButton
onClick={onStopListening}
aria-label="停止语音输入"
size="small"
sx={{
color: "error.main",
bgcolor: alpha(theme.palette.error.main, 0.15),
width: 36,
height: 36,
}}
>
<MicRounded fontSize="small" />
</IconButton>
</motion.div>
) : (
<IconButton
onClick={onStartListening}
disabled={isStreaming || isHydrating || !isRuntimeReady}
aria-label="语音输入"
size="small"
sx={{ color: "text.secondary", width: 36, height: 36, bgcolor: alpha("#fff", 0.6) }}
>
<MicRounded fontSize="small" />
</IconButton>
)
) : null}
<AnimatePresence mode="wait">
{isStreaming ? (
<motion.div key="stop" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
<IconButton
onClick={onAbort}
aria-label="停止生成"
size="small"
sx={{
bgcolor: "error.main",
color: "#fff",
width: 40,
height: 40,
boxShadow: `0 4px 12px ${alpha(theme.palette.error.main, 0.4)}`,
"&:hover": { bgcolor: "error.dark" },
}}
>
<StopRounded />
</IconButton>
</motion.div>
) : (
<motion.div key="send" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
<IconButton
disabled={!canSend}
onClick={handleSend}
aria-label="发送"
size="small"
sx={{
bgcolor: canSend ? "#00acc1" : alpha("#fff", 0.5),
color: canSend ? "#fff" : "action.disabled",
width: 40,
height: 40,
boxShadow: canSend ? `0 6px 16px ${alpha("#00acc1", 0.4)}` : "none",
"&:hover": { bgcolor: canSend ? "#00838f" : alpha("#fff", 0.5) },
}}
>
<SendRounded sx={{ ml: 0.35 }} />
</IconButton>
</motion.div>
)}
</AnimatePresence>
</Stack>
</Stack>
</Paper>
</motion.div>
<Box sx={{ mt: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.5, opacity: 0.6 }}>
<Image
src="/deepseek-logo.svg"
alt="DeepSeek"
width={14}
height={14}
style={{ width: 14, height: 14 }}
/>
<Typography variant="caption" sx={{ fontSize: "0.65rem", color: "text.secondary", fontWeight: 500, letterSpacing: 0.5 }}>
Powered by DeepSeek V4 · TJWater Agent Intelligence
</Typography>
</Box>
</Box>
);
});
src/components/chat/AgentHeader.tsx
-354
View File
@@ -1,354 +0,0 @@
"use client";
import Image from "next/image";
import React from "react";
import { motion } from "framer-motion";
import {
Avatar,
Box,
IconButton,
Stack,
TextField,
Tooltip,
Typography,
alpha,
useTheme,
} from "@mui/material";
import CheckRounded from "@mui/icons-material/CheckRounded";
import CloseRounded from "@mui/icons-material/CloseRounded";
import EditRounded from "@mui/icons-material/EditRounded";
import EditNoteRounded from "@mui/icons-material/EditNoteRounded";
import HistoryRounded from "@mui/icons-material/HistoryRounded";
import type { AgentRuntimeState } from "@/lib/agentRuntime";
type AgentHeaderProps = {
sessionTitle?: string;
canRenameSessionTitle?: boolean;
isHydrating?: boolean;
isStreaming: boolean;
runtimeState?: AgentRuntimeState;
isHistoryOpen: boolean;
onHistoryToggle: () => void;
onRenameSessionTitle?: (title: string) => void;
onNewConversation: () => void;
onClose: () => void;
};
export const AgentHeader = ({
sessionTitle,
canRenameSessionTitle = false,
isHydrating = false,
isStreaming,
runtimeState = "ready",
isHistoryOpen,
onHistoryToggle,
onRenameSessionTitle,
onNewConversation,
onClose,
}: AgentHeaderProps) => {
const theme = useTheme();
const displayTitle = sessionTitle?.trim() || "新对话";
const [isEditingTitle, setIsEditingTitle] = React.useState(false);
const [draftTitle, setDraftTitle] = React.useState(sessionTitle?.trim() || "");
const runtimeStatus =
runtimeState === "unavailable" || runtimeState === "models_unavailable"
? { color: "#e53935", label: "Agent 服务未就绪" }
: runtimeState === "checking"
? { color: "#ffb300", label: "正在连接 Agent 服务" }
: isStreaming
? { color: "#ff9800", label: "Agent 正在生成" }
: { color: "#00e676", label: "Agent 已就绪" };
React.useEffect(() => {
if (!isEditingTitle) {
setDraftTitle(sessionTitle?.trim() || "");
}
}, [isEditingTitle, sessionTitle]);
const handleStartEditing = () => {
if (!canRenameSessionTitle || isHydrating || isStreaming) return;
setDraftTitle(sessionTitle?.trim() || "");
setIsEditingTitle(true);
};
const handleCancelEditing = () => {
setDraftTitle(sessionTitle?.trim() || "");
setIsEditingTitle(false);
};
const handleConfirmEditing = () => {
const normalizedTitle = draftTitle.trim();
if (!normalizedTitle) return;
onRenameSessionTitle?.(normalizedTitle);
setIsEditingTitle(false);
};
return (
<Box
sx={{
px: 3,
py: 2.5,
zIndex: 10,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
backdropFilter: "blur(20px)",
borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
background: `linear-gradient(to bottom, ${alpha("#fff", 0.4)}, ${alpha("#fff", 0.1)})`,
boxShadow: `0 1px 0 ${alpha("#fff", 0.6)} inset`,
}}
>
<Stack direction="row" alignItems="center" spacing={2} sx={{ minWidth: 0, flex: 1, mr: 2 }}>
<motion.div whileHover={{ rotate: 10, scale: 1.05 }} whileTap={{ scale: 0.95 }} style={{ display: "flex", flexShrink: 0 }}>
<Box sx={{ position: "relative" }}>
<Avatar
sx={{
background: alpha("#ffffff", 0.9),
boxShadow: `0 8px 24px ${alpha("#00acc1", 0.4)}`,
width: 44,
height: 44,
border: `2px solid ${alpha("#fff", 0.8)}`,
p: 0.75,
}}
>
<Image
src="/ai-agent.svg"
alt="TJWater Agent"
width={30}
height={30}
style={{ width: "100%", height: "100%", objectFit: "contain" }}
/>
</Avatar>
<Box
role="status"
aria-label={runtimeStatus.label}
sx={{
position: "absolute",
bottom: -2,
right: -2,
width: 14,
height: 14,
bgcolor: runtimeStatus.color,
borderRadius: "50%",
border: "2.5px solid #fff",
boxShadow: `0 0 10px ${runtimeStatus.color}`,
animation: isStreaming && runtimeState === "ready" ? "pulse 1.5s infinite" : "none",
"@keyframes pulse": {
"0%": { boxShadow: `0 0 0 0 ${alpha("#ff9800", 0.7)}` },
"70%": { boxShadow: `0 0 0 6px ${alpha("#ff9800", 0)}` },
"100%": { boxShadow: `0 0 0 0 ${alpha("#ff9800", 0)}` },
},
}}
/>
</Box>
</motion.div>
<Box sx={{ minWidth: 0, flex: 1 }}>
{isEditingTitle ? (
<Stack direction="row" spacing={0.75} alignItems="center" sx={{ width: "100%" }}>
<TextField
value={draftTitle}
onChange={(event) => setDraftTitle(event.target.value)}
size="small"
autoFocus
placeholder="请输入对话标题"
onKeyDown={(event) => {
if (event.key === "Enter") {
event.preventDefault();
handleConfirmEditing();
} else if (event.key === "Escape") {
event.preventDefault();
handleCancelEditing();
}
}}
sx={{
flex: 1,
minWidth: 0,
"& .MuiOutlinedInput-root": {
padding: "6px 8px",
bgcolor: "transparent",
borderRadius: 1.5,
transition: "all 0.2s ease-in-out",
"&.Mui-focused": {
bgcolor: alpha("#fff", 0.6),
boxShadow: `0 2px 10px ${alpha("#000", 0.05)}`,
},
"& fieldset": {
borderColor: "transparent",
},
"&:hover fieldset": {
borderColor: alpha(theme.palette.primary.main, 0.2),
},
"&.Mui-focused fieldset": {
borderColor: alpha(theme.palette.primary.main, 0.5),
borderWidth: "1px",
},
},
"& .MuiInputBase-input": {
padding: 0,
height: "auto",
fontSize: "1.25rem",
fontWeight: 800,
letterSpacing: -0.3,
lineHeight: "1.2",
background: `linear-gradient(90deg, #01579b, #00838f)`,
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
}
}}
/>
<IconButton
size="small"
aria-label="确认"
onClick={handleConfirmEditing}
disabled={!draftTitle.trim()}
sx={{
width: 30,
height: 30,
color: "success.main",
bgcolor: alpha(theme.palette.success.main, 0.1),
"&:hover": { bgcolor: alpha(theme.palette.success.main, 0.2) },
}}
>
<CheckRounded sx={{ fontSize: 18 }} />
</IconButton>
<IconButton
size="small"
aria-label="取消"
onClick={handleCancelEditing}
sx={{
width: 30,
height: 30,
color: "text.secondary",
bgcolor: alpha("#000", 0.05),
"&:hover": { bgcolor: alpha("#000", 0.1) },
}}
>
<CloseRounded sx={{ fontSize: 18 }} />
</IconButton>
</Stack>
) : (
<Stack direction="row" spacing={0.75} alignItems="center" sx={{ minWidth: 0 }}>
<Typography
variant="h6"
fontWeight={800}
sx={{
background: `linear-gradient(90deg, #01579b, #00838f)`,
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
letterSpacing: -0.3,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
px: "8px",
lineHeight: 1.2,
}}
>
{displayTitle}
</Typography>
{canRenameSessionTitle ? (
<Tooltip title="修改对话标题">
<span>
<IconButton
size="small"
aria-label="修改对话标题"
onClick={handleStartEditing}
disabled={isHydrating || isStreaming}
sx={{
width: 30,
height: 30,
color: "text.secondary",
bgcolor: alpha("#fff", 0.45),
"&:hover": {
color: "primary.main",
bgcolor: alpha(theme.palette.primary.main, 0.08),
},
}}
>
<EditRounded sx={{ fontSize: 18 }} />
</IconButton>
</span>
</Tooltip>
) : null}
</Stack>
)}
</Box>
</Stack>
<Stack direction="row" spacing={1.25} alignItems="center" sx={{ flexShrink: 0 }}>
<Tooltip title="新建对话">
<motion.div whileHover={{ scale: 1.08 }} whileTap={{ scale: 0.92 }} style={{ display: "flex" }}>
<IconButton
onClick={onNewConversation}
aria-label="新建对话"
sx={{
width: 36,
height: 36,
color: "text.primary",
bgcolor: alpha("#fff", 0.54),
border: `1px solid ${alpha("#fff", 0.4)}`,
boxShadow: `0 2px 8px ${alpha("#000", 0.02)}`,
"&:hover": {
bgcolor: "#fff",
color: "#00acc1",
borderColor: alpha("#fff", 0.8),
boxShadow: `0 4px 12px ${alpha("#000", 0.05)}`,
},
}}
>
<EditNoteRounded sx={{ fontSize: 22 }} />
</IconButton>
</motion.div>
</Tooltip>
<Tooltip title={isHistoryOpen ? "收起历史会话" : "打开历史会话"}>
<motion.div whileHover={{ scale: 1.08 }} whileTap={{ scale: 0.92 }} style={{ display: "flex" }}>
<IconButton
onClick={onHistoryToggle}
aria-label={isHistoryOpen ? "收起历史会话" : "打开历史会话"}
sx={{
width: 36,
height: 36,
color: isHistoryOpen ? "#00acc1" : "text.primary",
bgcolor: isHistoryOpen ? alpha("#00acc1", 0.12) : alpha("#fff", 0.54),
border: `1px solid ${isHistoryOpen ? alpha("#00acc1", 0.2) : alpha("#fff", 0.4)}`,
boxShadow: `0 2px 8px ${isHistoryOpen ? alpha("#00acc1", 0.05) : alpha("#000", 0.02)}`,
"&:hover": {
bgcolor: isHistoryOpen ? alpha("#00acc1", 0.16) : "#fff",
borderColor: isHistoryOpen ? alpha("#00acc1", 0.3) : alpha("#fff", 0.8),
boxShadow: `0 4px 12px ${isHistoryOpen ? alpha("#00acc1", 0.1) : alpha("#000", 0.05)}`,
},
}}
>
<HistoryRounded sx={{ fontSize: 20 }} />
</IconButton>
</motion.div>
</Tooltip>
<Tooltip title="关闭 Agent">
<motion.div whileHover={{ scale: 1.08, rotate: 90 }} whileTap={{ scale: 0.92 }} style={{ display: "flex" }}>
<IconButton
onClick={onClose}
aria-label="关闭 Agent"
sx={{
width: 36,
height: 36,
color: "text.primary",
bgcolor: alpha("#fff", 0.54),
border: `1px solid ${alpha("#fff", 0.4)}`,
boxShadow: `0 2px 8px ${alpha("#000", 0.02)}`,
"&:hover": {
bgcolor: "#fff",
color: "#e53935",
borderColor: alpha("#fff", 0.8),
boxShadow: `0 4px 12px ${alpha("#000", 0.05)}`,
},
}}
>
<CloseRounded sx={{ fontSize: 20 }} />
</IconButton>
</motion.div>
</Tooltip>
</Stack>
</Box>
);
};
src/components/chat/AgentHistoryPanel.test.tsx
-119
View File
@@ -1,119 +0,0 @@
import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { AgentHistoryPanel } from "./AgentHistoryPanel";
const renderWithTheme = (ui: React.ReactElement) =>
render(<ThemeProvider theme={createTheme()}>{ui}</ThemeProvider>);
describe("AgentHistoryPanel", () => {
it("shows skeleton rows while history sessions are loading", () => {
renderWithTheme(
<AgentHistoryPanel
sessions={[]}
isLoadingSessions
onNewSession={jest.fn()}
onRenameSession={jest.fn()}
onSelectSession={jest.fn()}
onDeleteSession={jest.fn()}
/>,
);
expect(screen.getByLabelText("正在加载历史会话")).toBeInTheDocument();
expect(screen.queryByText("暂无历史会话")).not.toBeInTheDocument();
});
it("disables the loading history session item", () => {
const onSelectSession = jest.fn();
const onRenameSession = jest.fn();
const onDeleteSession = jest.fn();
renderWithTheme(
<AgentHistoryPanel
sessions={[
{
id: "session-loading",
title: "正在加载的会话",
createdAt: Date.now(),
updatedAt: Date.now(),
},
]}
loadingSessionId="session-loading"
onNewSession={jest.fn()}
onRenameSession={onRenameSession}
onSelectSession={onSelectSession}
onDeleteSession={onDeleteSession}
/>,
);
expect(screen.queryByText("正在加载的会话")).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "修改会话标题" })).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "删除会话" })).not.toBeInTheDocument();
fireEvent.click(screen.getByLabelText("正在加载会话 正在加载的会话"));
expect(onSelectSession).not.toHaveBeenCalled();
expect(onRenameSession).not.toHaveBeenCalled();
expect(onDeleteSession).not.toHaveBeenCalled();
});
it("renames a history session from the list", () => {
const onRenameSession = jest.fn();
renderWithTheme(
<AgentHistoryPanel
sessions={[
{
id: "session-1",
title: "旧会话标题",
createdAt: Date.now(),
updatedAt: Date.now(),
},
]}
activeSessionId="session-1"
onNewSession={jest.fn()}
onRenameSession={onRenameSession}
onSelectSession={jest.fn()}
onDeleteSession={jest.fn()}
/>,
);
fireEvent.click(screen.getByRole("button", { name: "修改会话标题" }));
fireEvent.change(screen.getByPlaceholderText("请输入会话标题"), {
target: { value: "新的会话标题" },
});
fireEvent.click(screen.getByLabelText("确认"));
expect(onRenameSession).toHaveBeenCalledWith("session-1", "新的会话标题");
});
it("orders history by the first message time instead of the latest update time", () => {
renderWithTheme(
<AgentHistoryPanel
sessions={[
{
id: "session-newer-update",
title: "较新的更新",
createdAt: new Date("2026-05-18T09:00:00+08:00").getTime(),
updatedAt: new Date("2026-05-19T12:00:00+08:00").getTime(),
},
{
id: "session-newer-first-message",
title: "较新的首条消息",
createdAt: new Date("2026-05-19T08:00:00+08:00").getTime(),
updatedAt: new Date("2026-05-19T08:30:00+08:00").getTime(),
},
]}
onNewSession={jest.fn()}
onRenameSession={jest.fn()}
onSelectSession={jest.fn()}
onDeleteSession={jest.fn()}
/>,
);
const sessionTitles = screen.getAllByText(/较新的/).map((element) => element.textContent);
expect(sessionTitles).toEqual(["较新的首条消息", "较新的更新"]);
});
});
src/components/chat/AgentHistoryPanel.tsx
-597
View File
@@ -1,597 +0,0 @@
"use client";
import React from "react";
import { motion } from "framer-motion";
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
IconButton,
Paper,
Skeleton,
Stack,
TextField,
Tooltip,
Typography,
alpha,
useTheme,
} from "@mui/material";
import CheckRounded from "@mui/icons-material/CheckRounded";
import CloseRounded from "@mui/icons-material/CloseRounded";
import EditRounded from "@mui/icons-material/EditRounded";
import EditNoteRounded from "@mui/icons-material/EditNoteRounded";
import DeleteOutlineRounded from "@mui/icons-material/DeleteOutlineRounded";
import ChatBubbleOutlineRounded from "@mui/icons-material/ChatBubbleOutlineRounded";
import SearchRounded from "@mui/icons-material/SearchRounded";
import WarningRounded from "@mui/icons-material/WarningRounded";
import type { ChatSessionSummary } from "./GlobalChatbox.types";
type AgentHistoryPanelProps = {
sessions: ChatSessionSummary[];
activeSessionId?: string;
isHydrating?: boolean;
isLoadingSessions?: boolean;
loadingSessionId?: string;
onNewSession: () => void;
onRenameSession: (sessionId: string, title: string) => void;
onSelectSession: (sessionId: string, title: string) => void;
onDeleteSession: (sessionId: string) => void;
};
const formatRelativeDate = (timestamp: number) => {
const date = new Date(timestamp);
const now = new Date();
const isSameDay = date.toDateString() === now.toDateString();
if (isSameDay) {
return date.toLocaleTimeString("zh-CN", {
hour: "2-digit",
minute: "2-digit",
});
}
return date.toLocaleDateString("zh-CN", {
month: "numeric",
day: "numeric",
});
};
const getDayStart = (date: Date) =>
new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
const getSessionGroupLabel = (timestamp: number) => {
const now = new Date();
const todayStart = getDayStart(now);
const yesterdayStart = todayStart - 24 * 60 * 60 * 1000;
const lastWeekStart = todayStart - 7 * 24 * 60 * 60 * 1000;
if (timestamp >= todayStart) return "今天";
if (timestamp >= yesterdayStart) return "昨天";
if (timestamp >= lastWeekStart) return "过去 7 天";
return "更早";
};
export const AgentHistoryPanel = ({
sessions,
activeSessionId,
isHydrating = false,
isLoadingSessions = false,
loadingSessionId,
onNewSession,
onRenameSession,
onSelectSession,
onDeleteSession,
}: AgentHistoryPanelProps) => {
const theme = useTheme();
const [keyword, setKeyword] = React.useState("");
const [editingSessionId, setEditingSessionId] = React.useState<string | null>(null);
const [draftTitle, setDraftTitle] = React.useState("");
const [pendingDeleteSessionId, setPendingDeleteSessionId] = React.useState<string | null>(null);
const filteredSessions = React.useMemo(() => {
const normalizedKeyword = keyword.trim().toLowerCase();
if (!normalizedKeyword) return sessions;
return sessions.filter((session) => session.title.toLowerCase().includes(normalizedKeyword));
}, [keyword, sessions]);
const sortedFilteredSessions = React.useMemo(
() =>
[...filteredSessions].sort((left, right) => {
const createdAtDiff = right.createdAt - left.createdAt;
if (createdAtDiff !== 0) return createdAtDiff;
const updatedAtDiff = right.updatedAt - left.updatedAt;
if (updatedAtDiff !== 0) return updatedAtDiff;
return right.id.localeCompare(left.id);
}),
[filteredSessions],
);
const groupedSessions = React.useMemo(() => {
const groups = new Map<string, ChatSessionSummary[]>();
sortedFilteredSessions.forEach((session) => {
const label = getSessionGroupLabel(session.createdAt);
const existing = groups.get(label);
if (existing) {
existing.push(session);
} else {
groups.set(label, [session]);
}
});
return Array.from(groups.entries());
}, [sortedFilteredSessions]);
const pendingDeleteSession = filteredSessions.find(
(session) => session.id === pendingDeleteSessionId,
);
const renderSessionListSkeleton = () => (
<Stack spacing={1} aria-label="正在加载历史会话">
{Array.from({ length: 6 }, (_, index) => (
<Paper
key={index}
elevation={0}
sx={{
px: 1.25,
py: 1,
borderRadius: 3,
bgcolor: alpha("#fff", 0.48),
border: `1px solid ${alpha("#fff", 0.68)}`,
boxShadow: `0 4px 12px ${alpha("#000", 0.025)}`,
}}
>
<Stack spacing={0.75} sx={{ minHeight: 46, justifyContent: "center" }}>
<Skeleton variant="text" width={`${72 - (index % 3) * 12}%`} height={18} />
<Skeleton variant="text" width="32%" height={14} />
</Stack>
</Paper>
))}
</Stack>
);
const handleStartRename = (sessionId: string, title: string) => {
setEditingSessionId(sessionId);
setDraftTitle(title);
};
const handleCancelRename = () => {
setEditingSessionId(null);
setDraftTitle("");
};
const handleConfirmRename = (sessionId: string) => {
const normalizedTitle = draftTitle.trim();
if (!normalizedTitle) return;
onRenameSession(sessionId, normalizedTitle);
handleCancelRename();
};
return (
<>
<Paper
elevation={0}
sx={{
width: 268,
minWidth: 268,
height: "100%",
display: "flex",
flexDirection: "column",
bgcolor: alpha("#ffffff", 0.54),
borderRight: `1px solid ${alpha("#fff", 0.75)}`,
backdropFilter: "blur(28px)",
boxShadow: `inset -1px 0 0 ${alpha("#fff", 0.35)}`,
}}
>
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ px: 2, py: 1.5 }}>
<Box>
<Typography variant="subtitle2" fontWeight={800} color="text.primary">
历史会话
</Typography>
</Box>
<Tooltip title="新建对话">
<motion.div whileHover={{ scale: 1.08 }} whileTap={{ scale: 0.92 }} style={{ display: "flex" }}>
<IconButton
disabled={isHydrating}
onClick={onNewSession}
aria-label="新建对话"
sx={{
width: 36,
height: 36,
color: "text.primary",
bgcolor: alpha("#fff", 0.65),
border: `1px solid ${alpha("#fff", 0.5)}`,
boxShadow: `0 2px 8px ${alpha("#000", 0.02)}`,
"&:hover": {
bgcolor: "#fff",
color: "#00acc1",
borderColor: alpha("#fff", 0.9),
boxShadow: `0 4px 12px ${alpha("#000", 0.05)}`,
},
}}
>
<EditNoteRounded sx={{ fontSize: 22 }} />
</IconButton>
</motion.div>
</Tooltip>
</Stack>
<Box sx={{ px: 1.5, pb: 1.5 }}>
<TextField
value={keyword}
onChange={(event) => setKeyword(event.target.value)}
placeholder="搜索历史会话"
size="small"
fullWidth
disabled={isHydrating}
InputProps={{
startAdornment: <SearchRounded sx={{ fontSize: 16, color: "text.secondary", mr: 0.75 }} />,
sx: {
borderRadius: 3,
bgcolor: alpha("#fff", 0.62),
fontSize: "0.85rem",
},
}}
/>
</Box>
<Divider sx={{ borderColor: alpha("#fff", 0.6) }} />
<Box sx={{ flex: 1, overflowY: "auto", px: 1.25, py: 1.25 }}>
{isLoadingSessions ? (
renderSessionListSkeleton()
) : sessions.length === 0 ? (
<Stack
alignItems="center"
justifyContent="center"
spacing={1}
sx={{
height: "100%",
textAlign: "center",
color: "text.secondary",
px: 2,
}}
>
<ChatBubbleOutlineRounded sx={{ fontSize: 24, opacity: 0.7 }} />
<Typography variant="body2" fontWeight={700}>
暂无历史会话
</Typography>
<Typography variant="caption">
新建对话后会自动出现在这里
</Typography>
</Stack>
) : filteredSessions.length === 0 ? (
<Stack
alignItems="center"
justifyContent="center"
spacing={1}
sx={{
height: "100%",
textAlign: "center",
color: "text.secondary",
px: 2,
}}
>
<SearchRounded sx={{ fontSize: 24, opacity: 0.7 }} />
<Typography variant="body2" fontWeight={700}>
未找到匹配会话
</Typography>
<Typography variant="caption">
试试其他关键词
</Typography>
</Stack>
) : (
<Stack spacing={1.5}>
{groupedSessions.map(([groupLabel, groupSessions]) => (
<Box key={groupLabel}>
<Typography
variant="caption"
color="text.secondary"
fontWeight={800}
sx={{ px: 0.5, mb: 0.75, display: "block", letterSpacing: 0.3 }}
>
{groupLabel}
</Typography>
<Stack spacing={1}>
{groupSessions.map((session) => {
const isActive = session.id === activeSessionId;
const isLoading = session.id === loadingSessionId;
return (
<Paper
key={session.id}
elevation={0}
aria-label={isLoading ? `正在加载会话 ${session.title}` : undefined}
onClick={() => {
if (editingSessionId === session.id || isLoading) return;
onSelectSession(session.id, session.title);
}}
sx={{
px: 1.25,
py: 1,
borderRadius: 3,
cursor: isHydrating || isLoading ? "default" : "pointer",
bgcolor:
isActive || isLoading
? alpha("#00acc1", 0.12)
: alpha("#fff", 0.56),
border: `1px solid ${
isActive || isLoading
? alpha("#00acc1", 0.25)
: alpha("#fff", 0.72)
}`,
boxShadow:
isActive || isLoading
? `0 8px 20px ${alpha("#00acc1", 0.12)}`
: `0 4px 12px ${alpha("#000", 0.03)}`,
transition: "all 0.2s ease",
pointerEvents: isHydrating || isLoading ? "none" : "auto",
"&:hover": {
bgcolor:
isActive || isLoading
? alpha("#00acc1", 0.14)
: alpha("#fff", 0.86),
borderColor: alpha("#00acc1", 0.2),
},
}}
>
<Stack direction="row" spacing={1} alignItems="center">
<Box sx={{ flex: 1, minWidth: 0 }}>
{editingSessionId === session.id ? (
<Stack direction="row" spacing={0.5} alignItems="center" sx={{ minHeight: 46 }}>
<TextField
value={draftTitle}
onChange={(event) => setDraftTitle(event.target.value)}
size="small"
autoFocus
placeholder="请输入会话标题"
onClick={(event) => event.stopPropagation()}
onKeyDown={(event) => {
if (event.key === "Enter") {
event.preventDefault();
event.stopPropagation();
handleConfirmRename(session.id);
} else if (event.key === "Escape") {
event.preventDefault();
event.stopPropagation();
handleCancelRename();
}
}}
sx={{
flex: 1,
minWidth: 0,
"& .MuiOutlinedInput-root": {
height: 32,
bgcolor: alpha("#fff", 0.75),
borderRadius: 1.5,
transition: "all 0.2s ease-in-out",
"& fieldset": {
borderColor: alpha("#000", 0.08),
},
"&:hover fieldset": {
borderColor: alpha(theme.palette.primary.main, 0.4),
},
"&.Mui-focused fieldset": {
borderColor: theme.palette.primary.main,
borderWidth: "1.5px",
boxShadow: `0 0 0 3px ${alpha(theme.palette.primary.main, 0.1)}`,
},
},
"& .MuiInputBase-input": {
padding: "4px 10px",
fontSize: "0.85rem",
fontWeight: 700,
color: theme.palette.text.primary,
}
}}
/>
<IconButton
size="small"
aria-label="确认"
onClick={(event) => {
event.stopPropagation();
handleConfirmRename(session.id);
}}
disabled={!draftTitle.trim()}
sx={{
width: 28,
height: 28,
color: "success.main",
bgcolor: alpha(theme.palette.success.main, 0.1),
"&:hover": { bgcolor: alpha(theme.palette.success.main, 0.2) },
}}
>
<CheckRounded sx={{ fontSize: 16 }} />
</IconButton>
<IconButton
size="small"
aria-label="取消"
onClick={(event) => {
event.stopPropagation();
handleCancelRename();
}}
sx={{
width: 28,
height: 28,
color: "text.secondary",
bgcolor: alpha("#000", 0.05),
"&:hover": { bgcolor: alpha("#000", 0.1) },
}}
>
<CloseRounded sx={{ fontSize: 16 }} />
</IconButton>
</Stack>
) : isLoading ? (
<Box sx={{ minHeight: 46, display: "flex", flexDirection: "column", justifyContent: "center" }}>
<Skeleton variant="text" width="74%" height={18} />
<Skeleton variant="text" width="34%" height={14} sx={{ mt: 0.5 }} />
</Box>
) : pendingDeleteSessionId === session.id ? (
<Stack direction="row" spacing={0.75} alignItems="center" sx={{ minHeight: 46 }}>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: 20,
height: 20,
borderRadius: "50%",
bgcolor: alpha("#ef5350", 0.15),
color: "#ef5350",
flexShrink: 0
}}
>
<WarningRounded sx={{ fontSize: 13 }} />
</Box>
<Typography
variant="body2"
fontWeight={800}
color="error.main"
sx={{
flex: 1,
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
确认删除此会话？
</Typography>
</Stack>
) : (
<Box sx={{ minHeight: 46, display: "flex", flexDirection: "column", justifyContent: "center" }}>
<Typography
variant="body2"
fontWeight={isActive ? 800 : 700}
color="text.primary"
sx={{
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitLineClamp: 2,
WebkitBoxOrient: "vertical",
}}
>
{session.title}
</Typography>
<Typography variant="caption" color="text.secondary" sx={{ mt: 0.5, display: "block" }}>
{formatRelativeDate(session.createdAt)}
</Typography>
</Box>
)}
</Box>
{!(editingSessionId === session.id || pendingDeleteSessionId === session.id || isLoading) && (
<Stack direction="row" spacing={0.25}>
<Tooltip title="修改会话标题">
<span>
<IconButton
size="small"
aria-label="修改会话标题"
onClick={(event) => {
event.stopPropagation();
handleStartRename(session.id, session.title);
}}
disabled={isHydrating || editingSessionId === session.id}
sx={{
width: 28,
height: 28,
color: "text.secondary",
"&:hover": {
color: "primary.main",
bgcolor: alpha("#00acc1", 0.08),
},
}}
>
<EditRounded sx={{ fontSize: 16 }} />
</IconButton>
</span>
</Tooltip>
<Tooltip title="删除会话">
<span>
<IconButton
size="small"
aria-label="删除会话"
onClick={(event) => {
event.stopPropagation();
setPendingDeleteSessionId(session.id);
}}
disabled={isHydrating}
sx={{
width: 28,
height: 28,
color: "text.secondary",
"&:hover": {
color: "error.main",
bgcolor: alpha("#ef5350", 0.08),
},
}}
>
<DeleteOutlineRounded sx={{ fontSize: 16 }} />
</IconButton>
</span>
</Tooltip>
</Stack>
)}
{pendingDeleteSessionId === session.id && (
<Stack direction="row" spacing={0.5} alignItems="center">
<IconButton
size="small"
aria-label="确认删除"
onClick={(event) => {
event.stopPropagation();
onDeleteSession(session.id);
setPendingDeleteSessionId(null);
}}
sx={{
width: 28,
height: 28,
color: "error.main",
bgcolor: alpha("#ef5350", 0.1),
"&:hover": { bgcolor: alpha("#ef5350", 0.2) },
}}
>
<CheckRounded sx={{ fontSize: 16 }} />
</IconButton>
<IconButton
size="small"
aria-label="取消删除"
onClick={(event) => {
event.stopPropagation();
setPendingDeleteSessionId(null);
}}
sx={{
width: 28,
height: 28,
color: "text.secondary",
bgcolor: alpha("#000", 0.05),
"&:hover": { bgcolor: alpha("#000", 0.1) },
}}
>
<CloseRounded sx={{ fontSize: 16 }} />
</IconButton>
</Stack>
)}
</Stack>
</Paper>
);
})}
</Stack>
</Box>
))}
</Stack>
)}
</Box>
</Paper>
</>
);
};
src/components/chat/AgentMarkdownBlock.tsx
-168
View File
@@ -1,168 +0,0 @@
"use client";
import React from "react";
import type { Element, Root, RootContent, Text } from "hast";
import ReactMarkdown, { type Components } from "react-markdown";
import remarkGfm from "remark-gfm";
import markdownStyles from "./GlobalChatboxMarkdown.module.css";
export const normalizeClipboardText = (value: string) => value.replace(/\s+$/u, "");
const isTextNode = (node: RootContent): node is Text => node.type === "text";
const isElementNode = (node: RootContent): node is Element => node.type === "element";
const createFadeSpan = (value: string, fadeKey: string): Element => ({
type: "element",
tagName: "span",
properties: {
className: [markdownStyles.streamFade],
dataStreamFadeKey: fadeKey,
dataStreamRevealLength: value.length,
},
children: [{ type: "text", value }],
});
const splitTextTail = (value: string, tailLength: number) => {
const codePoints = Array.from(value);
const stableText = codePoints.slice(0, -tailLength).join("");
const animatedText = codePoints.slice(-tailLength).join("");
return { stableText, animatedText };
};
const createStreamFadePlugin = (fadeLength: number, fadeKey: string) => {
return () => (tree: Root) => {
let remainingFadeLength = fadeLength;
const visitChildren = (parent: Element | Root) => {
const nextChildren: RootContent[] = [];
for (let index = parent.children.length - 1; index >= 0; index -= 1) {
const child = (parent.children as RootContent[])[index];
if (isTextNode(child)) {
if (!child.value.trim()) {
nextChildren.unshift(child);
continue;
}
if (remainingFadeLength <= 0) {
nextChildren.unshift(child);
continue;
}
const textLength = Array.from(child.value).length;
const tailLength = Math.min(textLength, remainingFadeLength);
const { stableText, animatedText } = splitTextTail(child.value, tailLength);
remainingFadeLength -= tailLength;
if (animatedText) {
nextChildren.unshift(createFadeSpan(animatedText, fadeKey));
}
if (stableText) {
nextChildren.unshift({ ...child, value: stableText });
}
continue;
}
if (isElementNode(child)) {
visitChildren(child);
}
nextChildren.unshift(child);
}
parent.children = nextChildren as typeof parent.children;
};
visitChildren(tree);
};
};
const StreamFadeSpan: Components["span"] = ({ node, children, ...props }) => {
const ref = React.useRef<HTMLSpanElement>(null);
const fadeKeyValue = node?.properties?.dataStreamFadeKey;
const fadeKey = typeof fadeKeyValue === "string" ? fadeKeyValue : undefined;
const revealLengthValue = node?.properties?.dataStreamRevealLength;
const revealLength =
typeof revealLengthValue === "number"
? revealLengthValue
: typeof revealLengthValue === "string"
? Number.parseInt(revealLengthValue, 10)
: 0;
React.useLayoutEffect(() => {
if (!fadeKey) return;
const element = ref.current;
if (!element) return;
if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
const duration = Math.min(260, Math.max(120, revealLength * 14));
const animation = element.animate(
[
{ clipPath: "inset(0 100% 0 0)", opacity: 0.46 },
{ clipPath: "inset(0 0% 0 0)", opacity: 1 },
],
{
duration,
easing: "cubic-bezier(0.16, 1, 0.3, 1)",
fill: "both",
},
);
return () => {
animation.cancel();
};
}, [fadeKey, revealLength]);
return (
<span {...props} ref={ref}>
{children}
</span>
);
};
const markdownComponents: Components = {
span: StreamFadeSpan,
};
export const MarkdownBlock = ({
children,
streamFadeKey,
streamFadeLength,
}: {
children: string;
streamFadeKey?: string;
streamFadeLength?: number | null;
}) => {
const handleCopy = React.useCallback((event: React.ClipboardEvent<HTMLDivElement>) => {
const selectedText = window.getSelection()?.toString();
if (!selectedText) return;
event.preventDefault();
event.clipboardData.setData("text/plain", normalizeClipboardText(selectedText));
}, []);
const rehypePlugins = React.useMemo(
() =>
typeof streamFadeLength === "number" && streamFadeLength > 0
? [createStreamFadePlugin(
streamFadeLength,
streamFadeKey ?? `stream-tail-${children.length}`,
)]
: [],
[children.length, streamFadeKey, streamFadeLength],
);
return (
<div className={markdownStyles.markdown} onCopy={handleCopy}>
<ReactMarkdown
components={markdownComponents}
remarkPlugins={[remarkGfm]}
rehypePlugins={rehypePlugins}
>
{children}
</ReactMarkdown>
</div>
);
};
src/components/chat/AgentPermissionRequests.tsx
-631
View File
@@ -1,631 +0,0 @@
"use client";
import React from "react";
import { AnimatePresence, motion } from "framer-motion";
import {
Box,
Button,
Chip,
CircularProgress,
Collapse,
IconButton,
Stack,
Typography,
alpha,
useTheme,
} from "@mui/material";
import type { Theme } from "@mui/material/styles";
import TerminalRounded from "@mui/icons-material/TerminalRounded";
import FolderOpenRounded from "@mui/icons-material/FolderOpenRounded";
import CheckCircleRounded from "@mui/icons-material/CheckCircleRounded";
import BlockRounded from "@mui/icons-material/BlockRounded";
import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
import KeyboardArrowUpRounded from "@mui/icons-material/KeyboardArrowUpRounded";
import VerifiedUserRounded from "@mui/icons-material/VerifiedUserRounded";
import GppGoodRounded from "@mui/icons-material/GppGoodRounded";
import type { PermissionDecision } from "@/lib/chatStream";
import type { Message } from "./GlobalChatbox.types";
const getPermissionTitle = (permission: NonNullable<Message["permissions"]>[number]) => {
if (permission.permission === "external_directory") return "访问工作区外目录";
if (permission.permission === "bash") return "执行终端命令";
if (permission.permission === "edit") return "修改文件内容";
return permission.permission || "工具权限请求";
};
const getPermissionPrimaryValue = (
permission: NonNullable<Message["permissions"]>[number],
) => {
if (typeof permission.target === "string" && permission.target.trim()) {
return permission.target.trim();
}
return permission.patterns[0] ?? permission.permission;
};
const PermissionIcon = ({
permission,
}: {
permission: NonNullable<Message["permissions"]>[number];
}) => {
if (permission.permission === "bash") {
return <TerminalRounded sx={{ fontSize: 22 }} />;
}
if (permission.permission === "external_directory") {
return <FolderOpenRounded sx={{ fontSize: 22 }} />;
}
return <VerifiedUserRounded sx={{ fontSize: 22 }} />;
};
const getPermissionStatusLabel = (status: NonNullable<Message["permissions"]>[number]["status"]) => {
if (status === "approved_always") return "已保存授权";
if (status === "approved_once") return "已允许一次";
if (status === "rejected") return "已拒绝";
if (status === "aborted") return "已中断";
if (status === "error") return "提交失败";
if (status === "submitting") return "提交中";
return "等待确认";
};
const pendingPermissionColor = "#f9a825";
const approvedOncePermissionColor = "#00838f";
const getPermissionStatusColor = (
status: NonNullable<Message["permissions"]>[number]["status"],
theme: Theme,
) => {
if (status === "approved_once") return approvedOncePermissionColor;
if (status === "approved_always") return theme.palette.success.main;
if (status === "rejected" || status === "error") return theme.palette.error.main;
if (status === "aborted") return theme.palette.text.secondary;
return pendingPermissionColor;
};
const getPermissionStatusTextColor = (
status: NonNullable<Message["permissions"]>[number]["status"],
theme: Theme,
) => {
if (status === "approved_once") return "#006c78";
if (status === "approved_always") return theme.palette.success.dark;
if (status === "rejected" || status === "error") return theme.palette.error.main;
if (status === "aborted") return theme.palette.text.secondary;
return "#8a5a00";
};
const PermissionRequestCard = ({
permission,
isRunning,
onReply,
}: {
permission: NonNullable<Message["permissions"]>[number];
isRunning: boolean;
onReply: (requestId: string, reply: PermissionDecision) => void;
}) => {
const theme = useTheme();
const isPending =
isRunning && (permission.status === "pending" || permission.status === "error");
const isSubmitting = isRunning && permission.status === "submitting";
const primaryValue = getPermissionPrimaryValue(permission);
const accentColor = getPermissionStatusColor(permission.status, theme);
const statusTextColor = getPermissionStatusTextColor(permission.status, theme);
const statusLabel = getPermissionStatusLabel(permission.status);
const persistentScope = permission.always.length > 0
? permission.always
: permission.patterns;
return (
<Box
sx={{
borderRadius: 3,
overflow: "hidden",
border: `1px solid ${alpha("#fff", 0.72)}`,
bgcolor: alpha("#fff", 0.5),
boxShadow: `0 8px 24px ${alpha("#000", 0.05)}`,
backdropFilter: "blur(20px)",
position: "relative",
"&::before": {
content: '""',
position: "absolute",
inset: "10px auto 10px 0",
width: 3,
borderRadius: "0 999px 999px 0",
bgcolor: accentColor,
},
}}
>
<Stack
direction="row"
spacing={1}
alignItems="center"
sx={{
px: 1.5,
py: 1.25,
pl: 1.75,
borderBottom: `1px solid ${alpha("#000", 0.05)}`,
}}
>
<Box
sx={{
width: 32,
height: 32,
borderRadius: "50%",
display: "grid",
placeItems: "center",
flex: "0 0 auto",
color: accentColor,
bgcolor: alpha(accentColor, 0.1),
border: `1px solid ${alpha(accentColor, 0.16)}`,
}}
>
<PermissionIcon permission={permission} />
</Box>
<Box sx={{ minWidth: 0, flex: 1 }}>
<Typography variant="subtitle2" fontWeight={800} noWrap sx={{ lineHeight: 1.25 }}>
{getPermissionTitle(permission)}
</Typography>
</Box>
<Chip
size="small"
label={statusLabel}
sx={{
height: 24,
fontSize: "0.7rem",
fontWeight: 800,
borderRadius: "12px",
bgcolor: alpha(accentColor, 0.12),
color: statusTextColor,
"& .MuiChip-label": { px: 1 },
}}
/>
</Stack>
<Stack spacing={1.15} sx={{ px: 1.5, pt: 1.25, pb: 1.35, pl: 1.75 }}>
<Box
sx={{
px: 1.25,
py: 1,
borderRadius: 2.5,
bgcolor: alpha("#000", 0.025),
border: `1px solid ${alpha("#000", 0.045)}`,
}}
>
<Typography variant="caption" color="text.secondary" fontWeight={800}>
请求目标
</Typography>
<Typography
variant="body2"
color="text.primary"
fontFamily={permission.permission === "bash" ? "monospace" : undefined}
sx={{
mt: 0.25,
lineHeight: 1.55,
wordBreak: "break-word",
whiteSpace: "pre-wrap",
}}
>
{primaryValue}
</Typography>
</Box>
{isPending || isSubmitting ? (
<Box
sx={{
px: 1.25,
py: 0.85,
borderRadius: 2.5,
bgcolor: alpha(theme.palette.success.main, 0.055),
border: `1px solid ${alpha(theme.palette.success.main, 0.11)}`,
}}
>
<Typography variant="caption" color="success.dark" fontWeight={800}>
保存授权范围
</Typography>
<Typography
variant="caption"
color="text.secondary"
fontFamily={permission.permission === "bash" ? "monospace" : undefined}
sx={{ display: "block", mt: 0.2, lineHeight: 1.45, wordBreak: "break-word", whiteSpace: "pre-wrap" }}
>
{persistentScope.join("\n")}
</Typography>
</Box>
) : null}
</Stack>
{permission.error ? (
<Box sx={{ px: 1.5, pb: isPending || isSubmitting ? 1 : 1.35, pl: 1.75 }}>
<Typography
variant="caption"
color="error.main"
sx={{
display: "block",
px: 1.25,
py: 0.75,
borderRadius: 2,
bgcolor: alpha(theme.palette.error.main, 0.06),
wordBreak: "break-word",
}}
>
{permission.error}
</Typography>
</Box>
) : null}
{isPending || isSubmitting ? (
<Stack
direction="row"
spacing={1}
flexWrap="wrap"
useFlexGap
sx={{ px: 1.5, pb: 1.35, pl: 1.75, pt: 0 }}
>
<Button
size="small"
variant="contained"
disableElevation
disabled={isSubmitting}
onClick={() => onReply(permission.requestId, "once")}
startIcon={
isSubmitting ? (
<CircularProgress size={14} color="inherit" />
) : (
<CheckCircleRounded fontSize="small" />
)
}
sx={{
minWidth: 94,
height: 34,
borderRadius: "17px",
bgcolor: "#00838f",
fontWeight: 800,
fontSize: "0.78rem",
textTransform: "none",
boxShadow: `0 4px 12px ${alpha("#00838f", 0.24)}`,
"&:hover": {
bgcolor: "#006c78",
boxShadow: `0 6px 16px ${alpha("#00838f", 0.28)}`,
},
}}
>
允许一次
</Button>
<Button
size="small"
color="success"
variant="outlined"
disabled={isSubmitting}
onClick={() => onReply(permission.requestId, "always")}
startIcon={<GppGoodRounded fontSize="small" />}
sx={{
height: 34,
borderRadius: "17px",
px: 1.5,
fontWeight: 800,
fontSize: "0.78rem",
textTransform: "none",
borderColor: alpha(theme.palette.success.main, 0.28),
bgcolor: alpha("#fff", 0.45),
"&:hover": {
borderColor: alpha(theme.palette.success.main, 0.42),
bgcolor: alpha(theme.palette.success.main, 0.08),
},
}}
>
保存授权
</Button>
<Button
size="small"
color="error"
variant="outlined"
disabled={isSubmitting}
onClick={() => onReply(permission.requestId, "reject")}
startIcon={<BlockRounded fontSize="small" />}
sx={{
height: 34,
borderRadius: "17px",
px: 1.5,
fontWeight: 800,
fontSize: "0.78rem",
textTransform: "none",
borderColor: alpha(theme.palette.error.main, 0.22),
bgcolor: alpha("#fff", 0.45),
"&:hover": {
borderColor: alpha(theme.palette.error.main, 0.34),
bgcolor: alpha(theme.palette.error.main, 0.07),
},
}}
>
拒绝
</Button>
</Stack>
) : null}
</Box>
);
};
export const PermissionRequestGroup = ({
permissions,
isRunning,
onReply,
}: {
permissions: NonNullable<Message["permissions"]>;
isRunning: boolean;
onReply: (requestId: string, reply: PermissionDecision) => void;
}) => {
const theme = useTheme();
const onceCount = permissions.filter((permission) => permission.status === "approved_once").length;
const alwaysCount = permissions.filter((permission) => permission.status === "approved_always").length;
const rejectedCount = permissions.filter((permission) => permission.status === "rejected").length;
const abortedCount = permissions.filter((permission) => permission.status === "aborted").length;
const pendingCount = permissions.filter(
(permission) =>
permission.status === "pending" ||
permission.status === "submitting" ||
permission.status === "error",
).length;
const hasPendingPermissions = pendingCount > 0;
const [expanded, setExpanded] = React.useState(false);
const latestPermissions = permissions.slice(-3);
const pendingPermissions = permissions.filter(
(permission) =>
permission.status === "pending" ||
permission.status === "submitting" ||
permission.status === "error",
);
const summaryItems = [
{ label: "共", value: permissions.length, color: theme.palette.text.secondary },
{ label: "允许一次", value: onceCount, color: getPermissionStatusColor("approved_once", theme), textColor: getPermissionStatusTextColor("approved_once", theme) },
{ label: "保存授权", value: alwaysCount, color: getPermissionStatusColor("approved_always", theme), textColor: getPermissionStatusTextColor("approved_always", theme) },
{ label: "拒绝", value: rejectedCount, color: getPermissionStatusColor("rejected", theme), textColor: getPermissionStatusTextColor("rejected", theme) },
{ label: "中断", value: abortedCount, color: getPermissionStatusColor("aborted", theme), textColor: getPermissionStatusTextColor("aborted", theme) },
];
const chipColor =
pendingCount > 0
? getPermissionStatusColor("pending", theme)
: abortedCount > 0
? getPermissionStatusColor("aborted", theme)
: rejectedCount > 0
? getPermissionStatusColor("rejected", theme)
: getPermissionStatusColor("approved_always", theme);
const chipTextColor =
pendingCount > 0
? getPermissionStatusTextColor("pending", theme)
: abortedCount > 0
? getPermissionStatusTextColor("aborted", theme)
: rejectedCount > 0
? getPermissionStatusTextColor("rejected", theme)
: getPermissionStatusTextColor("approved_always", theme);
return (
<Box
sx={{
borderRadius: 3,
overflow: "hidden",
border: `1px solid ${alpha("#fff", 0.72)}`,
bgcolor: alpha("#fff", 0.46),
boxShadow: `0 8px 24px ${alpha("#000", 0.045)}`,
backdropFilter: "blur(20px)",
}}
>
<Stack
direction="row"
alignItems="center"
spacing={1}
role="button"
tabIndex={0}
onClick={() => setExpanded((value) => !value)}
onKeyDown={(event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
setExpanded((value) => !value);
}
}}
sx={{
px: 1.5,
py: 1.15,
cursor: "pointer",
transition: "background-color 0.2s ease",
"&:hover": { bgcolor: alpha("#000", 0.025) },
}}
>
<Box
sx={{
width: 30,
height: 30,
borderRadius: "50%",
display: "grid",
placeItems: "center",
flex: "0 0 auto",
color: chipColor,
bgcolor: alpha(chipColor, 0.1),
border: `1px solid ${alpha(chipColor, 0.15)}`,
}}
>
<VerifiedUserRounded sx={{ fontSize: 18 }} />
</Box>
<Box sx={{ minWidth: 0, flex: 1 }}>
<Typography variant="subtitle2" fontWeight={800} noWrap sx={{ lineHeight: 1.25 }}>
权限请求
</Typography>
<Stack
direction="row"
flexWrap="wrap"
gap={0.6}
sx={{ mt: 0.55, maxHeight: 48, overflow: "hidden" }}
>
{summaryItems.map((item) => (
<Box
key={item.label}
component="span"
sx={{
display: "inline-flex",
alignItems: "center",
gap: 0.45,
height: 22,
px: 0.8,
borderRadius: "11px",
bgcolor: alpha(item.color, 0.08),
border: `1px solid ${alpha(item.color, 0.12)}`,
color: "textColor" in item ? item.textColor : item.color,
fontSize: "0.7rem",
fontWeight: 800,
lineHeight: 1,
whiteSpace: "nowrap",
}}
>
<Box
component="span"
sx={{
color: "textColor" in item ? item.textColor : item.color,
fontWeight: 700,
}}
>
{item.label}
</Box>
<Box component="span">{item.value} 项</Box>
</Box>
))}
</Stack>
</Box>
{isRunning && pendingCount > 0 ? (
<Chip
size="small"
label={`待确认 ${pendingCount} 项`}
sx={{
height: 24,
borderRadius: "12px",
fontSize: "0.7rem",
fontWeight: 800,
color: chipTextColor,
bgcolor: alpha(chipColor, 0.1),
"& .MuiChip-label": { px: 1 },
}}
/>
) : null}
<IconButton
size="small"
aria-label={expanded ? "收起权限请求" : "展开权限请求"}
sx={{
width: 28,
height: 28,
color: "text.secondary",
bgcolor: alpha("#000", 0.035),
"&:hover": { bgcolor: alpha("#000", 0.07) },
}}
>
{expanded ? (
<KeyboardArrowUpRounded sx={{ fontSize: 18 }} />
) : (
<KeyboardArrowDownRounded sx={{ fontSize: 18 }} />
)}
</IconButton>
</Stack>
{!expanded && isRunning && !hasPendingPermissions && latestPermissions.length > 0 ? (
<Stack spacing={0} sx={{ px: 1.5, pb: 1.25 }}>
{latestPermissions.map((permission, index) => {
const primaryValue = getPermissionPrimaryValue(permission);
const isLast = index === latestPermissions.length - 1;
const itemColor = getPermissionStatusColor(permission.status, theme);
const itemTextColor = getPermissionStatusTextColor(permission.status, theme);
return (
<Stack
key={permission.requestId}
direction="row"
spacing={1}
alignItems="center"
sx={{
py: 0.8,
borderTop: index === 0 ? `1px solid ${alpha(chipColor, 0.1)}` : "none",
borderBottom: isLast ? "none" : `1px solid ${alpha("#000", 0.045)}`,
}}
>
<Box
sx={{
width: 24,
height: 24,
borderRadius: "50%",
display: "grid",
placeItems: "center",
flex: "0 0 auto",
color: itemColor,
bgcolor: alpha(itemColor, 0.08),
}}
>
<PermissionIcon permission={permission} />
</Box>
<Box sx={{ minWidth: 0, flex: 1 }}>
<Typography variant="caption" color="text.primary" fontWeight={750} noWrap sx={{ display: "block" }}>
{getPermissionTitle(permission)}
</Typography>
<Typography
variant="caption"
color="text.secondary"
noWrap
title={primaryValue}
sx={{
display: "block",
fontFamily: permission.permission === "bash" ? "monospace" : undefined,
}}
>
{primaryValue}
</Typography>
</Box>
<Chip
size="small"
label={getPermissionStatusLabel(permission.status)}
sx={{
height: 22,
borderRadius: "11px",
fontSize: "0.68rem",
fontWeight: 800,
color: itemTextColor,
bgcolor: alpha(itemColor, 0.08),
"& .MuiChip-label": { px: 0.85 },
}}
/>
</Stack>
);
})}
</Stack>
) : null}
<AnimatePresence initial={false}>
{!expanded && isRunning && hasPendingPermissions ? (
<motion.div
key="pending-permissions"
initial={{ opacity: 0, y: -10, height: 0 }}
animate={{ opacity: 1, y: 0, height: "auto" }}
exit={{ opacity: 0, y: -8, height: 0 }}
transition={{ duration: 0.2, ease: "easeOut" }}
style={{ overflow: "hidden" }}
>
<Stack spacing={1} sx={{ px: 1.25, pb: 1.25 }}>
{pendingPermissions.map((permission) => (
<PermissionRequestCard
key={permission.requestId}
permission={permission}
isRunning={isRunning}
onReply={onReply}
/>
))}
</Stack>
</motion.div>
) : null}
</AnimatePresence>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<Stack spacing={1} sx={{ px: 1.25, pb: 1.25 }}>
{permissions.map((permission) => (
<PermissionRequestCard
key={permission.requestId}
permission={permission}
isRunning={isRunning}
onReply={onReply}
/>
))}
</Stack>
</Collapse>
</Box>
);
};
src/components/chat/AgentProgressTimeline.test.tsx
-110
View File
@@ -1,110 +0,0 @@
import "@testing-library/jest-dom";
import { fireEvent, render, screen } from "@testing-library/react";
import { AgentProgressTimeline } from "./AgentProgressTimeline";
import type { ChatProgress } from "./GlobalChatbox.types";
describe("AgentProgressTimeline", () => {
beforeEach(() => {
jest.useFakeTimers();
jest.setSystemTime(new Date("2026-01-01T00:00:00.000Z"));
});
afterEach(() => {
jest.useRealTimers();
});
it("shows the running step and keeps the timeline expanded while running", () => {
const now = Date.now();
const progress: ChatProgress[] = [
{
id: "start",
phase: "start",
status: "running",
title: "收到请求",
startedAt: now - 5000,
elapsedMs: 5000,
elapsedSnapshotAt: now,
},
{
id: "tool",
phase: "tool",
status: "running",
title: "正在调用 tjwater_cli",
detail: "analysis bottlenecks",
startedAt: now - 1200,
elapsedMs: 1200,
elapsedSnapshotAt: now,
},
];
render(<AgentProgressTimeline progress={progress} />);
expect(screen.getByText(/Agent 过程:/)).toBeInTheDocument();
expect(screen.getByText(/耗时 5.0s/)).toBeInTheDocument();
expect(screen.getByText("查询后端数据")).toBeInTheDocument();
expect(screen.getByText("analysis bottlenecks")).toBeInTheDocument();
expect(screen.getByText("1.2s")).toBeInTheDocument();
});
it("summarizes completed steps and lets users expand details", async () => {
const progress: ChatProgress[] = [
{
id: "request-received",
phase: "start",
status: "completed",
title: "收到请求",
startedAt: Date.now() - 8000,
endedAt: Date.now(),
durationMs: 8000,
},
{
id: "done",
phase: "complete",
status: "completed",
title: "分析完成",
startedAt: Date.now() - 1000,
endedAt: Date.now(),
durationMs: 1000,
},
];
render(<AgentProgressTimeline progress={progress} />);
expect(screen.getByText(/已完成 \(2 步\)/)).toBeInTheDocument();
expect(screen.getByText(/耗时 8.0s/)).toBeInTheDocument();
expect(screen.queryByText("分析完成")).not.toBeVisible();
fireEvent.click(screen.getByText(/Agent 过程:/));
expect(screen.getByText("分析完成")).toBeVisible();
});
it("treats stale running steps as finished after a complete event", () => {
const progress: ChatProgress[] = [
{
id: "tool",
phase: "tool",
status: "completed",
title: "正在调用 tjwater_cli",
startedAt: Date.now() - 4000,
endedAt: Date.now(),
},
{
id: "done",
phase: "complete",
status: "completed",
title: "分析完成",
startedAt: Date.now() - 500,
endedAt: Date.now(),
durationMs: 500,
},
];
render(<AgentProgressTimeline progress={progress} />);
expect(screen.getByText(/已完成 \(2 步\)/)).toBeInTheDocument();
expect(screen.getByText("4.0s")).toBeInTheDocument();
expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
});
});
src/components/chat/AgentProgressTimeline.tsx
-372
View File
@@ -1,372 +0,0 @@
"use client";
import React, { useEffect, useMemo, useState } from "react";
import {
Box,
Collapse,
LinearProgress,
Stack,
Typography,
alpha,
useTheme,
} from "@mui/material";
import AutoAwesome from "@mui/icons-material/AutoAwesome";
import CheckCircleRounded from "@mui/icons-material/CheckCircleRounded";
import ErrorOutlineRounded from "@mui/icons-material/ErrorOutlineRounded";
import ManageSearchRounded from "@mui/icons-material/ManageSearchRounded";
import BuildCircleRounded from "@mui/icons-material/BuildCircleRounded";
import TaskAltRounded from "@mui/icons-material/TaskAltRounded";
import PsychologyRounded from "@mui/icons-material/PsychologyRounded";
import SyncRounded from "@mui/icons-material/SyncRounded";
import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
import type { ChatProgress } from "./GlobalChatbox.types";
const formatDuration = (durationMs: number) => {
if (!Number.isFinite(durationMs) || durationMs < 0) {
return "0s";
}
if (durationMs < 10_000) {
return `${(durationMs / 1000).toFixed(1)}s`;
}
const totalSeconds = Math.round(durationMs / 1000);
if (totalSeconds < 60) {
return `${totalSeconds}s`;
}
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
if (minutes < 60) {
return `${minutes}m ${seconds.toString().padStart(2, "0")}s`;
}
const hours = Math.floor(minutes / 60);
const remainMinutes = minutes % 60;
return `${hours}h ${remainMinutes.toString().padStart(2, "0")}m`;
};
const getProgressElapsedMs = (item: ChatProgress, nowMs: number) => {
if (item.durationMs !== undefined) {
return item.durationMs;
}
if (item.status === "running") {
if (item.elapsedMs !== undefined && item.elapsedSnapshotAt !== undefined) {
return Math.max(0, item.elapsedMs + (nowMs - item.elapsedSnapshotAt));
}
if (item.startedAt !== undefined) {
return Math.max(0, nowMs - item.startedAt);
}
return item.elapsedMs;
}
if (item.startedAt !== undefined && item.endedAt !== undefined) {
return Math.max(0, item.endedAt - item.startedAt);
}
return item.elapsedMs;
};
const phaseIcon = (phase: string, status: ChatProgress["status"]) => {
const sx = { fontSize: 16 };
if (status === "completed") return <CheckCircleRounded sx={{ ...sx, color: "success.main" }} />;
if (status === "error") return <ErrorOutlineRounded sx={{ ...sx, color: "error.main" }} />;
if (phase === "planning") return <PsychologyRounded sx={{ ...sx, color: "#00acc1" }} />;
if (phase === "tool") return <BuildCircleRounded sx={{ ...sx, color: "warning.main" }} />;
if (phase === "complete") return <TaskAltRounded sx={{ ...sx, color: "success.main" }} />;
if (phase === "session") return <SyncRounded sx={{ ...sx, color: "info.main" }} />;
if (phase === "start") return <ManageSearchRounded sx={{ ...sx, color: "#00acc1" }} />;
return <AutoAwesome sx={{ ...sx, color: "#00acc1" }} />;
};
const formatToolTitle = (item: ChatProgress) => {
const text = `${item.title} ${item.detail ?? ""}`;
if (text.includes("tjwater_cli")) return "查询后端数据";
if (text.includes("show_chart")) return "生成图表";
if (text.includes("locate_features")) return "地图定位";
if (text.includes("view_history")) return "打开历史曲线";
if (text.includes("view_scada")) return "打开 SCADA 面板";
if (text.includes("render_junctions")) return "渲染节点";
return item.title;
};
type AgentProgressTimelineProps = {
progress: ChatProgress[];
isAborted?: boolean;
};
const AgentProgressTimelineInner = ({ progress, isAborted }: AgentProgressTimelineProps) => {
const theme = useTheme();
const [nowMs, setNowMs] = useState(() => Date.now());
// 判断是否最终完成（哪怕中间有报错，只要有完整的标记就算成功）
const isOverallComplete = progress.some(
(item) => item.phase === "complete" && item.status === "completed",
);
// 修正状态判断：如果外部标记为中断，或者没有完成标记
const hasRunning = !isAborted && !isOverallComplete && progress.some((item) => item.status === "running");
const hasError = isAborted || progress.some((item) => item.status === "error");
useEffect(() => {
if (!hasRunning) {
return;
}
const timer = window.setInterval(() => {
setNowMs(Date.now());
}, 500);
return () => window.clearInterval(timer);
}, [hasRunning]);
// 展开状态逻辑：默认折叠，保持界面整洁
const [expanded, setExpanded] = useState(false);
const summary = useMemo(() => {
if (isAborted) return `已中断 (进行到第 ${progress.length} 步)`;
if (isOverallComplete) {
return hasError ? `已完成 (含 ${progress.length} 步探索)` : `已完成 (${progress.length} 步)`;
}
const runningItem = [...progress].reverse().find((item) => item.status === "running");
if (runningItem) return `${runningItem.title}...`;
if (hasError) return "过程异常，尝试恢复中...";
return `已执行 ${progress.length} 步`;
}, [isOverallComplete, hasError, progress, isAborted]);
const totalDurationLabel = useMemo(() => {
const requestProgress = progress.find((item) => item.id === "request-received");
const requestElapsed =
requestProgress ? getProgressElapsedMs(requestProgress, nowMs) : undefined;
if (requestElapsed !== undefined) {
return formatDuration(requestElapsed);
}
const startedAtValues = progress
.map((item) => item.startedAt)
.filter((value): value is number => value !== undefined);
if (startedAtValues.length === 0) {
return undefined;
}
const minStartedAt = Math.min(...startedAtValues);
const endedAtValues = progress
.map((item) => item.endedAt)
.filter((value): value is number => value !== undefined);
const endAnchor = isOverallComplete
? endedAtValues.length > 0
? Math.max(...endedAtValues)
: nowMs
: nowMs;
return formatDuration(Math.max(0, endAnchor - minStartedAt));
}, [isOverallComplete, nowMs, progress]);
// 根据整体状态决定顶部卡片的颜色主题
const statusColor = isOverallComplete
? "#4caf50" // Success Green
: isAborted || (hasError && !hasRunning)
? theme.palette.error.main // Error Red
: "#00acc1"; // Primary Cyan
// 默认折叠：只显示最新的三条
const visibleCount = 3;
const isCollapsible = progress.length > visibleCount;
return (
<Box
sx={{
borderRadius: 4,
bgcolor: alpha(statusColor, 0.04),
border: `1px solid ${alpha(statusColor, 0.15)}`,
backdropFilter: "blur(12px)",
overflow: "hidden",
transition: "all 0.3s ease",
"&:hover": {
bgcolor: alpha(statusColor, 0.06),
borderColor: alpha(statusColor, 0.25),
}
}}
>
<Stack
direction="row"
spacing={1.5}
alignItems="center"
onClick={() => setExpanded(!expanded)}
sx={{
px: 2,
py: 1.25,
cursor: "pointer",
userSelect: "none"
}}
>
{isOverallComplete ? (
<TaskAltRounded sx={{ fontSize: 18, color: statusColor }} />
) : hasRunning ? (
<AutoAwesome sx={{ fontSize: 18, color: statusColor, animation: "spin 2s linear infinite", "@keyframes spin": { "0%": { transform: "rotate(0deg)" }, "100%": { transform: "rotate(360deg)" } } }} />
) : hasError ? (
<ErrorOutlineRounded sx={{ fontSize: 18, color: statusColor }} />
) : (
<AutoAwesome sx={{ fontSize: 18, color: statusColor }} />
)}
<Typography variant="caption" fontWeight={700} color="text.primary" sx={{ flex: 1, letterSpacing: 0.3 }}>
Agent 过程: {summary}
{totalDurationLabel ? ` · 耗时 ${totalDurationLabel}` : ""}
</Typography>
<KeyboardArrowDownRounded
sx={{
fontSize: 20,
color: "text.secondary",
transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
}}
/>
</Stack>
{hasRunning && !expanded ? (
<LinearProgress
sx={{
height: 2,
bgcolor: "transparent",
"& .MuiLinearProgress-bar": { bgcolor: statusColor }
}}
/>
) : null}
<Collapse in={expanded || hasRunning} timeout="auto" unmountOnExit={false}>
<Box>
{hasRunning ? (
<LinearProgress
sx={{
height: 1,
bgcolor: alpha(statusColor, 0.1),
"& .MuiLinearProgress-bar": { bgcolor: statusColor }
}}
/>
) : (
<Box sx={{ height: 1, bgcolor: alpha(statusColor, 0.1) }} />
)}
<Stack spacing={0} sx={{ px: 2, py: 1.5 }}>
{progress.map((item, index) => {
const isLast = index === progress.length - 1;
const isHiddenWhenCollapsed = isCollapsible && index < progress.length - visibleCount;
const stepElapsedMs = getProgressElapsedMs(item, nowMs);
const itemColor = isAborted && isLast
? theme.palette.error.main
: item.status === "error"
? theme.palette.error.main
: item.status === "completed"
? "#4caf50"
: "#00acc1";
const content = (
<Stack key={item.id} direction="row" spacing={1.5} alignItems="stretch">
<Box
sx={{
position: "relative",
width: 20,
display: "flex",
justifyContent: "center",
flexShrink: 0,
pt: 0.3,
}}
>
{!isLast ? (
<Box
aria-hidden
sx={{
position: "absolute",
top: 22,
bottom: -6,
left: "50%",
width: 2,
transform: "translateX(-50%)",
borderRadius: 2,
bgcolor: alpha(itemColor, item.status === "completed" ? 0.2 : 0.4),
}}
/>
) : null}
<Box
sx={{
position: "relative",
zIndex: 1,
width: 20,
height: 20,
borderRadius: "50%",
bgcolor: alpha(theme.palette.background.paper, 0.9),
boxShadow: `0 0 0 2px ${alpha(itemColor, 0.1)}`,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{phaseIcon(
item.phase,
isAborted && isLast ? "error" :
isOverallComplete && item.status === "running"
? "completed"
: item.status,
)}
</Box>
</Box>
<Box sx={{ minWidth: 0, flex: 1, pb: isLast ? 0 : 2 }}>
<Stack direction="row" spacing={1} alignItems="center" justifyContent="space-between">
<Typography variant="caption" color="text.primary" fontWeight={600} sx={{ fontSize: "0.75rem" }}>
{item.phase === "tool" ? formatToolTitle(item) : item.title}
</Typography>
{stepElapsedMs !== undefined ? (
<Typography
variant="caption"
color="text.secondary"
sx={{ fontSize: "0.68rem", fontFamily: "var(--font-mono, monospace)" }}
>
{formatDuration(stepElapsedMs)}
</Typography>
) : null}
</Stack>
{item.detail && (
<Collapse in={expanded || isLast} timeout="auto">
<Typography
variant="caption"
component="div"
sx={{
mt: 0.5,
px: 1.25,
py: 0.75,
borderRadius: 2,
bgcolor: alpha(itemColor, 0.05),
border: `1px solid ${alpha(itemColor, 0.1)}`,
color: "text.secondary",
whiteSpace: "pre-wrap",
fontFamily: "var(--font-mono, monospace)",
fontSize: "0.7rem",
lineHeight: 1.5,
wordBreak: "break-all",
}}
>
{item.detail}
</Typography>
</Collapse>
)}
</Box>
</Stack>
);
if (isHiddenWhenCollapsed) {
return (
<Collapse key={item.id} in={expanded} timeout="auto" unmountOnExit={false}>
{content}
</Collapse>
);
}
return content;
})}
</Stack>
</Box>
</Collapse>
</Box>
);
};
export const AgentProgressTimeline = React.memo(
AgentProgressTimelineInner,
(prevProps, nextProps) =>
prevProps.progress === nextProps.progress &&
prevProps.isAborted === nextProps.isAborted,
);
AgentProgressTimeline.displayName = "AgentProgressTimeline";
src/components/chat/AgentQuestionRequests.tsx
-564
View File
@@ -1,564 +0,0 @@
"use client";
import React from "react";
import {
Box,
Button,
Checkbox,
Chip,
CircularProgress,
Collapse,
FormControlLabel,
Stack,
TextField,
Typography,
alpha,
useTheme,
} from "@mui/material";
import type { Theme } from "@mui/material/styles";
import CheckCircleRounded from "@mui/icons-material/CheckCircleRounded";
import EditNoteRounded from "@mui/icons-material/EditNoteRounded";
import HelpOutlineRounded from "@mui/icons-material/HelpOutlineRounded";
import RadioButtonUncheckedRounded from "@mui/icons-material/RadioButtonUncheckedRounded";
import type { Message } from "./GlobalChatbox.types";
const getQuestionStatusLabel = (
status: NonNullable<Message["questions"]>[number]["status"],
) => {
if (status === "answered") return "已回答";
if (status === "rejected") return "已跳过";
if (status === "error") return "提交失败";
if (status === "submitting") return "提交中";
return "等待回答";
};
const getQuestionStatusColor = (
status: NonNullable<Message["questions"]>[number]["status"],
theme: Theme,
) => {
if (status === "answered") return theme.palette.success.main;
if (status === "rejected") return theme.palette.text.secondary;
if (status === "error") return theme.palette.error.main;
return "#0288d1";
};
const QuestionRequestCard = ({
questionRequest,
onReply,
onReject,
}: {
questionRequest: NonNullable<Message["questions"]>[number];
onReply: (requestId: string, answers: string[][]) => void;
onReject: (requestId: string) => void;
}) => {
const theme = useTheme();
const isEditable =
questionRequest.status === "pending" || questionRequest.status === "error";
const isSubmitting = questionRequest.status === "submitting";
const statusColor = getQuestionStatusColor(questionRequest.status, theme);
const [selected, setSelected] = React.useState<Record<number, string[]>>({});
const [customSelected, setCustomSelected] = React.useState<Record<number, boolean>>({});
const [custom, setCustom] = React.useState<Record<number, string>>({});
const answers = React.useMemo(
() =>
questionRequest.questions.map((question, index) => {
const selectedAnswers = selected[index] ?? [];
const isCustomSelected =
customSelected[index] === true ||
(question.custom !== false && question.options.length === 0);
const customAnswer = custom[index]?.trim();
return isCustomSelected && customAnswer
? [...selectedAnswers, customAnswer]
: selectedAnswers;
}),
[custom, customSelected, questionRequest.questions, selected],
);
const canSubmit =
isEditable &&
questionRequest.questions.length > 0 &&
questionRequest.questions.every((_, index) => {
const answer = answers[index] ?? [];
return answer.some((item) => item.trim().length > 0);
});
const answerSummary = (questionRequest.answers ?? [])
.map((answer) => answer.join("、"))
.filter(Boolean)
.join("；");
return (
<Box
sx={{
borderRadius: 3,
overflow: "hidden",
border: `1px solid ${alpha("#fff", 0.72)}`,
bgcolor: alpha("#fff", 0.52),
boxShadow: `0 8px 24px ${alpha("#000", 0.05)}`,
backdropFilter: "blur(20px)",
position: "relative",
"&::before": {
content: '""',
position: "absolute",
inset: "10px auto 10px 0",
width: 3,
borderRadius: "0 999px 999px 0",
bgcolor: statusColor,
},
}}
>
<Stack
direction="row"
spacing={1}
alignItems="center"
sx={{
px: 1.5,
py: 1.25,
pl: 1.75,
borderBottom: `1px solid ${alpha("#000", 0.05)}`,
}}
>
<Box
sx={{
width: 32,
height: 32,
borderRadius: "50%",
display: "grid",
placeItems: "center",
flex: "0 0 auto",
color: statusColor,
bgcolor: alpha(statusColor, 0.1),
border: `1px solid ${alpha(statusColor, 0.16)}`,
}}
>
<HelpOutlineRounded sx={{ fontSize: 21 }} />
</Box>
<Box sx={{ minWidth: 0, flex: 1 }}>
<Typography variant="subtitle2" fontWeight={800} noWrap sx={{ lineHeight: 1.25 }}>
需要补充信息
</Typography>
</Box>
<Chip
size="small"
label={getQuestionStatusLabel(questionRequest.status)}
sx={{
height: 24,
fontSize: "0.7rem",
fontWeight: 800,
borderRadius: "12px",
bgcolor: alpha(statusColor, 0.12),
color: statusColor,
"& .MuiChip-label": { px: 1 },
}}
/>
</Stack>
<Stack spacing={1.3} sx={{ px: 1.5, py: 1.35, pl: 1.75 }}>
{questionRequest.questions.map((question, index) => {
const selectedAnswers = selected[index] ?? [];
const isCustomEnabled = question.custom !== false;
const isCustomSelected =
customSelected[index] === true ||
(isCustomEnabled && question.options.length === 0);
const setQuestionAnswers = (nextAnswers: string[]) => {
setSelected((current) => ({
...current,
[index]: nextAnswers,
}));
};
const setQuestionCustomSelected = (checked: boolean) => {
setCustomSelected((current) => ({
...current,
[index]: checked,
}));
};
return (
<Box
key={`${question.header}-${index}`}
sx={{
px: 1.25,
py: 1,
borderRadius: 2.5,
bgcolor: alpha("#000", 0.025),
border: `1px solid ${alpha("#000", 0.045)}`,
}}
>
<Typography variant="caption" color="text.secondary" fontWeight={800}>
{question.header || `问题 ${index + 1}`}
</Typography>
<Typography
variant="body2"
color="text.primary"
sx={{ mt: 0.35, lineHeight: 1.55, wordBreak: "break-word" }}
>
{question.question}
</Typography>
{question.options.length ? (
<Stack spacing={0.75} sx={{ mt: 1 }}>
{question.options.map((option) => {
const checked = selectedAnswers.includes(option.label);
if (question.multiple) {
return (
<FormControlLabel
key={option.label}
disabled={!isEditable || isSubmitting}
control={
<Checkbox
size="small"
checked={checked}
onChange={(event) => {
if (event.target.checked) {
setQuestionAnswers([...selectedAnswers, option.label]);
} else {
setQuestionAnswers(
selectedAnswers.filter((item) => item !== option.label),
);
}
}}
/>
}
label={
<Box>
<Typography variant="body2" fontWeight={750}>
{option.label}
</Typography>
{option.description ? (
<Typography variant="caption" color="text.secondary">
{option.description}
</Typography>
) : null}
</Box>
}
sx={{ alignItems: "flex-start", m: 0 }}
/>
);
}
return (
<Button
key={option.label}
size="small"
variant={checked ? "contained" : "outlined"}
disabled={!isEditable || isSubmitting}
onClick={() => {
setQuestionAnswers([option.label]);
setQuestionCustomSelected(false);
}}
startIcon={
checked ? (
<CheckCircleRounded fontSize="small" />
) : (
<RadioButtonUncheckedRounded fontSize="small" />
)
}
sx={{
justifyContent: "flex-start",
minHeight: 38,
borderRadius: 2,
textTransform: "none",
fontWeight: 800,
bgcolor: checked ? "#0288d1" : alpha("#fff", 0.45),
borderColor: checked ? "#0288d1" : alpha("#0288d1", 0.22),
"&:hover": {
bgcolor: checked ? "#0277bd" : alpha("#0288d1", 0.08),
},
}}
>
<Box sx={{ textAlign: "left", minWidth: 0 }}>
<Typography variant="body2" fontWeight={800}>
{option.label}
</Typography>
{option.description ? (
<Typography
variant="caption"
sx={{ display: "block", opacity: checked ? 0.86 : 0.72 }}
>
{option.description}
</Typography>
) : null}
</Box>
</Button>
);
})}
{isCustomEnabled ? (
question.multiple ? (
<FormControlLabel
disabled={!isEditable || isSubmitting}
control={
<Checkbox
size="small"
checked={isCustomSelected}
onChange={(event) =>
setQuestionCustomSelected(event.target.checked)
}
sx={{
p: 0.5,
color: alpha("#0288d1", 0.55),
"&.Mui-checked": { color: "#0288d1" },
}}
/>
}
label={
<Stack direction="row" spacing={0.75} alignItems="center">
<EditNoteRounded sx={{ fontSize: 18, color: "#0288d1" }} />
<Typography variant="body2" fontWeight={800}>
自定义回答
</Typography>
</Stack>
}
sx={{
alignItems: "center",
minHeight: 38,
m: 0,
px: 0.75,
py: 0.25,
borderRadius: 2,
border: `1px solid ${
isCustomSelected ? "#0288d1" : alpha("#0288d1", 0.18)
}`,
bgcolor: isCustomSelected
? alpha("#0288d1", 0.1)
: alpha("#fff", 0.45),
transition: "background-color 0.18s ease, border-color 0.18s ease",
"&:hover": {
bgcolor: isCustomSelected
? alpha("#0288d1", 0.13)
: alpha("#0288d1", 0.07),
},
"& .MuiFormControlLabel-label": {
color: isCustomSelected ? "#0277bd" : "text.primary",
},
}}
/>
) : (
<Button
size="small"
variant={isCustomSelected ? "contained" : "outlined"}
disabled={!isEditable || isSubmitting}
onClick={() => {
setQuestionAnswers([]);
setQuestionCustomSelected(true);
}}
startIcon={
isCustomSelected ? (
<CheckCircleRounded fontSize="small" />
) : (
<EditNoteRounded fontSize="small" />
)
}
sx={{
justifyContent: "flex-start",
minHeight: 38,
borderRadius: 2,
textTransform: "none",
fontWeight: 800,
bgcolor: isCustomSelected ? "#0288d1" : alpha("#fff", 0.45),
borderColor: isCustomSelected
? "#0288d1"
: alpha("#0288d1", 0.22),
"&:hover": {
bgcolor: isCustomSelected
? "#0277bd"
: alpha("#0288d1", 0.08),
},
}}
>
<Box sx={{ textAlign: "left", minWidth: 0 }}>
<Typography variant="body2" fontWeight={800}>
自定义回答
</Typography>
</Box>
</Button>
)
) : null}
</Stack>
) : null}
<Collapse in={isCustomEnabled && isCustomSelected} timeout="auto" unmountOnExit>
<Box
sx={{
mt: 0.85,
px: 1.15,
py: 0.85,
borderRadius: 2.5,
bgcolor: alpha("#fff", 0.62),
border: `1px solid ${alpha("#fff", 0.82)}`,
boxShadow: `0 8px 22px ${alpha("#000", 0.045)}, 0 0 0 1px ${alpha("#0288d1", 0.05)} inset`,
backdropFilter: "blur(18px)",
}}
>
<TextField
multiline
minRows={2}
maxRows={5}
fullWidth
variant="standard"
disabled={!isEditable || isSubmitting}
value={custom[index] ?? ""}
onChange={(event) =>
setCustom((current) => ({
...current,
[index]: event.target.value,
}))
}
placeholder="输入自定义回答"
InputProps={{
disableUnderline: true,
sx: {
alignItems: "flex-start",
fontSize: "0.88rem",
lineHeight: 1.55,
fontWeight: 500,
color: "text.primary",
"& textarea::placeholder": {
color: alpha(theme.palette.text.primary, 0.38),
opacity: 1,
},
},
}}
/>
</Box>
</Collapse>
</Box>
);
})}
{questionRequest.status === "answered" ? (
<Typography
variant="caption"
color="success.main"
sx={{
display: "block",
px: 1.25,
py: 0.75,
borderRadius: 2,
bgcolor: alpha(theme.palette.success.main, 0.07),
wordBreak: "break-word",
}}
>
已回答{answerSummary ? `：${answerSummary}` : ""}
</Typography>
) : null}
{questionRequest.status === "rejected" ? (
<Typography
variant="caption"
color="text.secondary"
sx={{
display: "block",
px: 1.25,
py: 0.75,
borderRadius: 2,
bgcolor: alpha("#000", 0.035),
}}
>
已跳过
</Typography>
) : null}
{questionRequest.error ? (
<Typography
variant="caption"
color="error.main"
sx={{
display: "block",
px: 1.25,
py: 0.75,
borderRadius: 2,
bgcolor: alpha(theme.palette.error.main, 0.06),
wordBreak: "break-word",
}}
>
{questionRequest.error}
</Typography>
) : null}
</Stack>
{isEditable || isSubmitting ? (
<Stack
direction="row"
spacing={1}
flexWrap="wrap"
useFlexGap
sx={{ px: 1.5, pb: 1.35, pl: 1.75 }}
>
<Button
size="small"
variant="outlined"
disabled={isSubmitting}
onClick={() => onReject(questionRequest.requestId)}
sx={{
height: 34,
borderRadius: "17px",
px: 1.5,
fontWeight: 800,
fontSize: "0.78rem",
textTransform: "none",
color: "text.secondary",
borderColor: alpha(theme.palette.text.secondary, 0.22),
bgcolor: alpha("#fff", 0.45),
}}
>
跳过
</Button>
<Button
size="small"
variant="contained"
disableElevation
disabled={!canSubmit || isSubmitting}
onClick={() => onReply(questionRequest.requestId, answers)}
startIcon={
isSubmitting ? (
<CircularProgress size={14} color="inherit" />
) : (
<CheckCircleRounded fontSize="small" />
)
}
sx={{
minWidth: 104,
height: 34,
borderRadius: "17px",
bgcolor: "#0288d1",
fontWeight: 800,
fontSize: "0.78rem",
textTransform: "none",
boxShadow: `0 4px 12px ${alpha("#0288d1", 0.24)}`,
"&:hover": {
bgcolor: "#0277bd",
boxShadow: `0 6px 16px ${alpha("#0288d1", 0.28)}`,
},
}}
>
提交回答
</Button>
</Stack>
) : null}
</Box>
);
};
export const QuestionRequestGroup = ({
questions,
onReply,
onReject,
}: {
questions: NonNullable<Message["questions"]>;
onReply: (requestId: string, answers: string[][]) => void;
onReject: (requestId: string) => void;
}) => (
<Stack spacing={1}>
{questions.map((question) => (
<QuestionRequestCard
key={question.requestId}
questionRequest={question}
onReply={onReply}
onReject={onReject}
/>
))}
</Stack>
);
src/components/chat/AgentTodoPlanCard.tsx
-308
View File
@@ -1,308 +0,0 @@
"use client";
import React from "react";
import {
Box,
Chip,
CircularProgress,
Collapse,
IconButton,
Stack,
Typography,
alpha,
useTheme,
} from "@mui/material";
import AssignmentTurnedInRounded from "@mui/icons-material/AssignmentTurnedInRounded";
import CheckCircleRounded from "@mui/icons-material/CheckCircleRounded";
import BlockRounded from "@mui/icons-material/BlockRounded";
import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
import KeyboardArrowUpRounded from "@mui/icons-material/KeyboardArrowUpRounded";
import RadioButtonUncheckedRounded from "@mui/icons-material/RadioButtonUncheckedRounded";
import type { Message } from "./GlobalChatbox.types";
export const TodoPlanCard = ({
todoUpdate,
}: {
todoUpdate: NonNullable<Message["todos"]>;
}) => {
const theme = useTheme();
const total = todoUpdate.todos.length;
const completed = todoUpdate.todos.filter((todo) => todo.status === "completed").length;
const running = todoUpdate.todos.find((todo) => todo.status === "in_progress");
const cancelled = todoUpdate.todos.filter((todo) => todo.status === "cancelled").length;
const pending = todoUpdate.todos.filter((todo) => todo.status === "pending").length;
const progress = total > 0 ? Math.round((completed / total) * 100) : 0;
const isAborted = cancelled > 0 && completed + cancelled === total;
const canCollapse = total > 4;
const [expanded, setExpanded] = React.useState(!canCollapse && !isAborted);
const pinnedTodos = canCollapse ? todoUpdate.todos.slice(0, 4) : todoUpdate.todos;
const collapsibleTodos = canCollapse ? todoUpdate.todos.slice(4) : [];
const hiddenCount = expanded ? 0 : collapsibleTodos.length;
const latestUpdatedAt = Math.max(
todoUpdate.createdAt,
...todoUpdate.todos
.map((todo) => todo.updatedAt ?? todo.createdAt ?? 0)
.filter((value) => value > 0),
);
const updatedAtLabel =
latestUpdatedAt > 0
? new Intl.DateTimeFormat("zh-CN", {
hour: "2-digit",
minute: "2-digit",
}).format(new Date(latestUpdatedAt))
: undefined;
const getTodoVisual = (status: NonNullable<Message["todos"]>["todos"][number]["status"]) => {
if (status === "completed") {
return { icon: <CheckCircleRounded sx={{ fontSize: 17 }} />, color: theme.palette.success.main, label: "完成" };
}
if (status === "in_progress") {
return { icon: <CircularProgress size={15} thickness={5} />, color: "#0288d1", label: "进行中" };
}
if (status === "cancelled") {
return { icon: <BlockRounded sx={{ fontSize: 17 }} />, color: theme.palette.text.disabled, label: "中止" };
}
return { icon: <RadioButtonUncheckedRounded sx={{ fontSize: 17 }} />, color: theme.palette.text.secondary, label: "待办" };
};
const getPriorityLabel = (priority: NonNullable<Message["todos"]>["todos"][number]["priority"]) => {
if (priority === "high") return { label: "高优先级", color: "#8a5a00" };
if (priority === "medium") return { label: "中优先级", color: "#9a6a16" };
if (priority === "low") return { label: "低优先级", color: "#8d7960" };
return undefined;
};
const statusSummary = isAborted
? `${completed} 完成 / ${cancelled} 中止`
: [
completed ? `${completed} 完成` : null,
running ? "1 进行中" : null,
pending ? `${pending} 待办` : null,
cancelled ? `${cancelled} 中止` : null,
].filter(Boolean).join(" / ") || "等待任务";
const renderTodoRow = (
todo: NonNullable<Message["todos"]>["todos"][number],
index: number,
) => {
const visual = getTodoVisual(todo.status);
const priority = getPriorityLabel(todo.priority);
return (
<Stack
key={`${todo.id}-${index}`}
direction="row"
alignItems="flex-start"
spacing={1}
sx={{
py: 0.8,
borderTop: `1px solid ${alpha("#00838f", 0.08)}`,
color: todo.status === "cancelled" ? "text.disabled" : "text.primary",
}}
>
<Box
sx={{
width: 24,
height: 24,
borderRadius: 1.25,
display: "grid",
placeItems: "center",
flex: "0 0 auto",
color: visual.color,
bgcolor: alpha(visual.color, 0.08),
mt: 0.1,
}}
>
{visual.icon}
</Box>
<Box sx={{ minWidth: 0, flex: 1 }}>
<Typography
variant="body2"
sx={{
minWidth: 0,
wordBreak: "break-word",
lineHeight: 1.45,
textDecoration: todo.status === "cancelled" ? "line-through" : undefined,
}}
>
{todo.content}
</Typography>
</Box>
<Stack direction="row" spacing={0.5} sx={{ flex: "0 0 auto" }}>
{priority ? (
<Chip
size="small"
label={priority.label}
sx={{
height: 22,
borderRadius: "11px",
fontSize: "0.66rem",
fontWeight: 800,
color: priority.color,
bgcolor: alpha(priority.color, 0.045),
border: `1px solid ${alpha(priority.color, 0.16)}`,
"& .MuiChip-label": { px: 0.75 },
}}
/>
) : null}
<Chip
size="small"
label={visual.label}
sx={{
height: 22,
borderRadius: "11px",
fontSize: "0.66rem",
fontWeight: 800,
color: visual.color,
bgcolor: alpha(visual.color, 0.08),
"& .MuiChip-label": { px: 0.75 },
}}
/>
</Stack>
</Stack>
);
};
if (total === 0) {
return null;
}
return (
<Box
sx={{
borderRadius: 2,
overflow: "hidden",
border: `1px solid ${alpha("#00838f", 0.16)}`,
bgcolor: alpha("#f8fbfc", 0.82),
}}
>
<Stack
spacing={1}
role="button"
tabIndex={0}
onClick={() => {
if (canCollapse) {
setExpanded((value) => !value);
}
}}
onKeyDown={(event) => {
if (canCollapse && (event.key === "Enter" || event.key === " ")) {
event.preventDefault();
setExpanded((value) => !value);
}
}}
sx={{
px: 1.4,
py: 1.15,
cursor: canCollapse ? "pointer" : "default",
transition: "background-color 0.2s ease",
"&:hover": canCollapse ? { bgcolor: alpha("#00838f", 0.035) } : undefined,
}}
>
<Stack direction="row" alignItems="center" spacing={1}>
<Box
sx={{
width: 28,
height: 28,
borderRadius: 1.5,
display: "grid",
placeItems: "center",
flex: "0 0 auto",
color: "#00838f",
bgcolor: alpha("#00838f", 0.1),
border: `1px solid ${alpha("#00838f", 0.14)}`,
}}
>
<AssignmentTurnedInRounded sx={{ fontSize: 18 }} />
</Box>
<Box sx={{ minWidth: 0, flex: 1 }}>
<Stack direction="row" alignItems="center" spacing={0.75}>
<Typography variant="subtitle2" fontWeight={800} noWrap sx={{ lineHeight: 1.25 }}>
会话任务
</Typography>
<Chip
size="small"
label={running ? "执行中" : isAborted ? "已中止" : completed === total ? "已完成" : "已同步"}
sx={{
height: 20,
borderRadius: "10px",
fontSize: "0.66rem",
fontWeight: 800,
color: running ? "#0277bd" : isAborted ? "text.secondary" : "#00838f",
bgcolor: alpha(running ? "#0288d1" : isAborted ? "#64748b" : "#00838f", 0.08),
"& .MuiChip-label": { px: 0.75 },
}}
/>
</Stack>
<Typography variant="caption" color="text.secondary">
{statusSummary}{updatedAtLabel ? ` · ${updatedAtLabel} 更新` : ""}
</Typography>
</Box>
{canCollapse ? (
<IconButton
size="small"
aria-label={expanded ? "收起会话任务" : "展开会话任务"}
sx={{
width: 28,
height: 28,
color: "text.secondary",
bgcolor: alpha("#000", 0.035),
"&:hover": { bgcolor: alpha("#000", 0.07) },
}}
>
{expanded ? (
<KeyboardArrowUpRounded sx={{ fontSize: 18 }} />
) : (
<KeyboardArrowDownRounded sx={{ fontSize: 18 }} />
)}
</IconButton>
) : null}
</Stack>
<Box
sx={{
height: 6,
borderRadius: 999,
overflow: "hidden",
bgcolor: alpha("#00838f", 0.1),
}}
>
<Box
sx={{
width: `${progress}%`,
height: "100%",
borderRadius: 999,
bgcolor: isAborted ? theme.palette.text.disabled : "#00838f",
transition: "width 0.25s ease",
}}
/>
</Box>
</Stack>
<Stack spacing={0} sx={{ px: 1.4, pb: 1.1 }}>
{pinnedTodos.map((todo, index) => renderTodoRow(todo, index))}
{canCollapse ? (
<Collapse in={expanded} timeout={220} unmountOnExit={false}>
<Stack spacing={0}>
{collapsibleTodos.map((todo, index) =>
renderTodoRow(todo, index + pinnedTodos.length),
)}
</Stack>
</Collapse>
) : null}
{hiddenCount > 0 ? (
<Typography
variant="caption"
color="text.secondary"
sx={{
pt: 0.8,
borderTop: `1px solid ${alpha("#00838f", 0.08)}`,
}}
>
还有 {hiddenCount} 项，展开查看全部
</Typography>
) : null}
</Stack>
</Box>
);
};
src/components/chat/AgentTurn.test.tsx
-167
View File
@@ -1,167 +0,0 @@
/* eslint-disable @next/next/no-img-element */
import "@testing-library/jest-dom";
import React from "react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { AgentTurn } from "./AgentTurn";
jest.mock("next/image", () => ({
__esModule: true,
default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => (
<img {...props} alt={props.alt ?? ""} />
),
}));
jest.mock("framer-motion", () => ({
AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
motion: {
div: ({
children,
animate: _animate,
exit: _exit,
initial: _initial,
transition: _transition,
...props
}: React.HTMLAttributes<HTMLDivElement> & Record<string, unknown>) => (
<div {...props}>{children}</div>
),
span: ({
children,
animate: _animate,
transition: _transition,
...props
}: React.HTMLAttributes<HTMLSpanElement> & Record<string, unknown>) => (
<span {...props}>{children}</span>
),
},
}));
jest.mock("./AgentMarkdownBlock", () => ({
MarkdownBlock: ({ children }: { children: string }) => (
<div>{children.split(/\n+/u).map((line) => <p key={line}>{line}</p>)}</div>
),
normalizeClipboardText: (value: string) => value.replace(/\s+$/u, ""),
}));
describe("AgentTurn speech selection", () => {
it("shows a floating action and reads from the selected text", async () => {
const content = "第一段内容。\n\n第二段内容。";
const speechText = "第一段内容。\n第二段内容。";
const onSpeak = jest.fn();
const removeAllRanges = jest.fn();
render(
<AgentTurn
message={{ id: "assistant-1", role: "assistant", content }}
isStreaming={false}
messageSpeechState="idle"
onSpeak={onSpeak}
onPause={jest.fn()}
onResume={jest.fn()}
onStopSpeech={jest.fn()}
isTtsSupported
onCreateBranch={jest.fn()}
onReplyPermission={jest.fn()}
onReplyQuestion={jest.fn()}
onRejectQuestion={jest.fn()}
/>,
);
const selectedParagraph = screen.getByText("第二段内容。");
const selectedTextNode = selectedParagraph.firstChild as Text;
const range = {
commonAncestorContainer: selectedTextNode,
getBoundingClientRect: () => ({
width: 72,
height: 20,
top: 120,
right: 172,
bottom: 140,
left: 100,
x: 100,
y: 120,
toJSON: () => ({}),
}),
} as unknown as Range;
const selection = {
rangeCount: 1,
isCollapsed: false,
getRangeAt: () => range,
toString: () => "第二段",
removeAllRanges,
} as unknown as Selection;
jest.spyOn(window, "getSelection").mockReturnValue(selection);
jest.spyOn(window, "requestAnimationFrame").mockImplementation((callback) => {
callback(0);
return 1;
});
fireEvent.pointerUp(selectedParagraph);
const speechAction = await screen.findByRole("button", { name: "从这里开始朗读" });
fireEvent.click(speechAction);
await waitFor(() => {
expect(onSpeak).toHaveBeenCalledWith("assistant-1", speechText, {
startOffset: speechText.indexOf("第二段"),
});
});
expect(removeAllRanges).toHaveBeenCalledTimes(1);
await waitFor(() => {
expect(screen.queryByRole("button", { name: "从这里开始朗读" })).not.toBeInTheDocument();
});
});
it("offers one-time and saved permission approval with distinct actions", () => {
const onReplyPermission = jest.fn();
render(
<AgentTurn
message={{
id: "assistant-permission",
role: "assistant",
content: "",
progress: [
{
id: "permission-progress",
phase: "permission",
status: "running",
title: "等待权限确认",
},
],
permissions: [
{
requestId: "permission-1",
sessionId: "session-1",
permission: "bash",
patterns: ["npm test"],
target: "npm test",
always: ["npm test"],
createdAt: 1,
status: "pending",
},
],
}}
isStreaming
messageSpeechState="idle"
onSpeak={jest.fn()}
onPause={jest.fn()}
onResume={jest.fn()}
onStopSpeech={jest.fn()}
isTtsSupported
onCreateBranch={jest.fn()}
onReplyPermission={onReplyPermission}
onReplyQuestion={jest.fn()}
onRejectQuestion={jest.fn()}
/>,
);
expect(screen.getByRole("button", { name: "允许一次" })).toBeInTheDocument();
expect(screen.getByText("保存授权范围")).toBeInTheDocument();
expect(screen.getAllByText("npm test")).toHaveLength(2);
expect(screen.getByTestId("GppGoodRoundedIcon")).toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "保存授权" }));
expect(onReplyPermission).toHaveBeenCalledWith("permission-1", "always");
expect(screen.getByRole("button", { name: "拒绝" })).toBeInTheDocument();
});
});
src/components/chat/AgentTurn.tsx
-718
View File
@@ -1,718 +0,0 @@
"use client";
import Image from "next/image";
import React, { useMemo } from "react";
import { motion } from "framer-motion";
import {
Avatar,
Box,
CircularProgress,
Button,
Grow,
IconButton,
Paper,
Popper,
Stack,
Tooltip,
Typography,
alpha,
useTheme,
} from "@mui/material";
import ContentCopyRounded from "@mui/icons-material/ContentCopyRounded";
import { TbArrowsSplit2 } from "react-icons/tb";
import type { PermissionDecision } from "@/lib/chatStream";
import {
parseAssistantMessageSections,
parseContentWithToolCalls,
type ContentSegment,
} from "./chatMessageSections";
import type {
Message,
SpeechState,
} from "./GlobalChatbox.types";
import { stripMarkdown } from "./globalChatboxUtils";
import { findSpeechSelectionStartOffset } from "./speechStartOptions";
import { AgentProgressTimeline } from "./AgentProgressTimeline";
import { ChartGenerationSkeleton, ChatInlineChart } from "./ChatInlineChart";
import { ChatToolCallBlock } from "./ChatToolCallBlock";
import { MarkdownBlock, normalizeClipboardText } from "./AgentMarkdownBlock";
import { PermissionRequestGroup } from "./AgentPermissionRequests";
import { QuestionRequestGroup } from "./AgentQuestionRequests";
import { TodoPlanCard } from "./AgentTodoPlanCard";
import VolumeUpRounded from "@mui/icons-material/VolumeUpRounded";
import PauseRounded from "@mui/icons-material/PauseRounded";
import PlayArrowRounded from "@mui/icons-material/PlayArrowRounded";
import StopRounded from "@mui/icons-material/StopRounded";
const floatingActionSurfaceSx = {
display: "flex",
gap: 0.5,
p: 0.5,
borderRadius: "16px",
bgcolor: alpha("#fff", 0.8),
backdropFilter: "blur(16px)",
border: `1px solid ${alpha("#fff", 0.9)}`,
boxShadow: `0 4px 12px ${alpha("#000", 0.08)}`,
overflow: "hidden",
} as const;
const floatingActionTransitionTimeout = { enter: 150, exit: 120 } as const;
const floatingIconButtonSx = {
width: 28,
height: 28,
color: "text.secondary",
"&:hover": {
color: "#00acc1",
bgcolor: alpha("#00acc1", 0.1),
},
} as const;
const floatingSpeechButtonSx = {
minHeight: 34,
px: 1.25,
color: "text.primary",
fontSize: 13,
fontWeight: 700,
letterSpacing: 0,
whiteSpace: "nowrap",
borderRadius: "12px",
"&:hover": {
bgcolor: alpha("#00acc1", 0.1),
color: "#00acc1",
},
} as const;
type SpeechSelection = {
startOffset: number;
anchorRect: DOMRect;
};
type AgentTurnProps = {
message: Message;
isStreaming: boolean;
messageSpeechState: SpeechState;
onSpeak: (
messageId: string,
text: string,
options?: { startOffset?: number },
) => void;
onPause: () => void;
onResume: () => void;
onStopSpeech: () => void;
isTtsSupported: boolean;
onCreateBranch: (messageId: string) => void;
onReplyPermission: (requestId: string, reply: PermissionDecision) => void;
onReplyQuestion: (requestId: string, answers: string[][]) => void;
onRejectQuestion: (requestId: string) => void;
};
const StreamingStatus = () => {
const theme = useTheme();
return (
<Stack
direction="row"
spacing={0.75}
alignItems="center"
sx={{
px: 1,
py: 0.35,
borderRadius: 999,
bgcolor: alpha(theme.palette.primary.main, 0.07),
color: "text.secondary",
}}
>
<Stack direction="row" spacing={0.35} alignItems="center">
{[0, 1, 2].map((index) => (
<motion.span
key={index}
animate={{ opacity: [0.28, 0.86, 0.28] }}
transition={{
duration: 0.95,
repeat: Infinity,
delay: index * 0.14,
ease: "easeInOut",
}}
style={{
width: 4,
height: 4,
borderRadius: "50%",
background: theme.palette.primary.main,
display: "block",
}}
/>
))}
</Stack>
<Typography variant="caption" color="text.secondary" fontWeight={700}>
正在生成
</Typography>
</Stack>
);
};
const StreamingMarkdownBlock = ({
text,
isStreaming,
segmentKey,
}: {
text: string;
isStreaming: boolean;
segmentKey: string;
}) => {
const [streamTextState, setStreamTextState] = React.useState<{
displayText: string;
animatedTailLength: number;
}>({
displayText: text,
animatedTailLength: 0,
});
React.useLayoutEffect(() => {
setStreamTextState((current) => {
if (current.displayText === text) {
return current;
}
if (!isStreaming) {
return {
displayText: text,
animatedTailLength: 0,
};
}
if (current.displayText === text) {
return current;
}
return {
displayText: text,
animatedTailLength:
text.length > current.displayText.length &&
text.startsWith(current.displayText)
? Math.min(48, text.length - current.displayText.length)
: 0,
};
});
}, [isStreaming, text]);
return (
<MarkdownBlock
streamFadeKey={`${segmentKey}-${streamTextState.displayText.length}`}
streamFadeLength={streamTextState.animatedTailLength}
>
{streamTextState.displayText}
</MarkdownBlock>
);
};
export const AgentTurn = React.memo(
({
message,
isStreaming,
messageSpeechState,
onSpeak,
onPause,
onResume,
onStopSpeech,
isTtsSupported,
onCreateBranch,
onReplyPermission,
onReplyQuestion,
onRejectQuestion,
}: AgentTurnProps) => {
const theme = useTheme();
const isUser = message.role === "user";
const isErrorMessage = Boolean(message.isError);
const isStreamingAssistant = !isUser && !isErrorMessage && isStreaming;
const [isHovered, setIsHovered] = React.useState(false);
const answerContentRef = React.useRef<HTMLDivElement | null>(null);
const [speechSelection, setSpeechSelection] = React.useState<SpeechSelection | null>(null);
const isProgressComplete = message.progress?.some(
(item) => item.phase === "complete" && item.status === "completed",
) ?? false;
const isProgressRunning = !isErrorMessage && !isProgressComplete && (
message.progress?.some((item) => item.status === "running") ?? false
);
const parsedAssistantSections = useMemo(
() =>
!isUser && !isErrorMessage
? parseAssistantMessageSections(message.content)
: null,
[isErrorMessage, isUser, message.content],
);
const answerContent = parsedAssistantSections?.answer ?? message.content;
const speechText = useMemo(
() => stripMarkdown(answerContent),
[answerContent],
);
const captureSpeechSelection = React.useCallback(() => {
if (!isTtsSupported || isStreamingAssistant) {
setSpeechSelection(null);
return;
}
const selection = window.getSelection();
const container = answerContentRef.current;
if (!selection || selection.rangeCount === 0 || selection.isCollapsed || !container) {
setSpeechSelection(null);
return;
}
const range = selection.getRangeAt(0);
if (!container.contains(range.commonAncestorContainer)) {
setSpeechSelection(null);
return;
}
const selectedText = selection.toString();
const startOffset = findSpeechSelectionStartOffset(speechText, selectedText);
if (startOffset === null) {
setSpeechSelection(null);
return;
}
const anchorRect = range.getBoundingClientRect();
if (anchorRect.width === 0 && anchorRect.height === 0) {
setSpeechSelection(null);
return;
}
setSpeechSelection({ startOffset, anchorRect });
}, [isStreamingAssistant, isTtsSupported, speechText]);
const handleCaptureSpeechSelection = React.useCallback(() => {
window.requestAnimationFrame(captureSpeechSelection);
}, [captureSpeechSelection]);
React.useEffect(() => {
setSpeechSelection(null);
}, [message.id, speechText]);
React.useEffect(() => {
if (!speechSelection) return;
const closeSpeechSelection = () => setSpeechSelection(null);
const handleSelectionChange = () => {
if (window.getSelection()?.isCollapsed) {
closeSpeechSelection();
}
};
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") {
closeSpeechSelection();
}
};
document.addEventListener("selectionchange", handleSelectionChange);
document.addEventListener("keydown", handleKeyDown);
window.addEventListener("resize", closeSpeechSelection);
window.addEventListener("scroll", closeSpeechSelection, true);
return () => {
document.removeEventListener("selectionchange", handleSelectionChange);
document.removeEventListener("keydown", handleKeyDown);
window.removeEventListener("resize", closeSpeechSelection);
window.removeEventListener("scroll", closeSpeechSelection, true);
};
}, [speechSelection]);
const handleSpeakMessage = () => {
onSpeak(message.id, speechText);
};
const handleSpeakFromSelection = () => {
if (!speechSelection) return;
onSpeak(message.id, speechText, {
startOffset: speechSelection.startOffset,
});
window.getSelection()?.removeAllRanges();
setSpeechSelection(null);
};
const speechSelectionAnchor = React.useMemo(
() => speechSelection
? {
getBoundingClientRect: () => speechSelection.anchorRect,
}
: null,
[speechSelection],
);
const isSpeechSelectionOpen = Boolean(speechSelection);
const contentSegments: ContentSegment[] = useMemo(
() =>
!isUser && !isErrorMessage
? parseContentWithToolCalls(answerContent).segments
: [{ type: "text", content: answerContent }],
[answerContent, isErrorMessage, isUser],
);
const hasInlineChart = contentSegments.some(
(segment) =>
segment.type === "tool_call" &&
(segment.toolCall.tool === "chart" ||
segment.toolCall.tool === "show_chart"),
);
const visibleChartArtifacts = useMemo(
() =>
hasInlineChart
? []
: (message.artifacts?.filter((artifact) => artifact.kind === "chart") ?? []),
[hasInlineChart, message.artifacts],
);
if (isUser) {
return (
<motion.div
initial={{ opacity: 0, y: 12, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 8 }}
transition={{ type: "spring", stiffness: 350, damping: 25 }}
style={{ alignSelf: "flex-end", maxWidth: "86%", position: "relative" }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Paper
elevation={4}
sx={{
p: 2,
borderRadius: 5,
borderBottomRightRadius: 2,
color: "#fff",
background: `linear-gradient(135deg, #0288d1, #00acc1)`,
boxShadow: `0 8px 24px -8px ${alpha("#00acc1", 0.5)}, inset 0 2px 4px ${alpha("#fff", 0.2)}`,
backdropFilter: "blur(10px)",
"--chat-md-text": alpha("#fff", 0.96),
"--chat-md-heading": "#fff",
"--chat-md-link": "#e0f7fa",
"--chat-md-link-hover": "#fff",
"--chat-md-inline-code-bg": "rgba(255,255,255,0.15)",
"--chat-md-inline-code-border": alpha("#fff", 0.1),
"--chat-md-inline-code-text": "#fff",
"--chat-md-pre-bg": "rgba(0, 0, 0, 0.25)",
"--chat-md-pre-border": alpha("#fff", 0.1),
"--chat-md-pre-text": "#F8FAFC",
"--chat-md-quote-border": alpha("#fff", 0.4),
"--chat-md-quote-bg": alpha("#fff", 0.05),
"--chat-md-quote-text": alpha("#fff", 0.8),
}}
>
<MarkdownBlock>{message.content}</MarkdownBlock>
</Paper>
</motion.div>
);
}
return (
<motion.div
initial={{ opacity: 0, y: 14 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 8 }}
transition={{ type: "spring", stiffness: 320, damping: 26 }}
style={{ width: "100%", position: "relative" }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Stack direction="row" spacing={1.5} alignItems="flex-start">
<Avatar
sx={{
width: 34,
height: 34,
background: alpha("#ffffff", 0.9),
boxShadow: `0 4px 12px ${alpha("#00acc1", 0.25)}`,
border: `1.5px solid ${alpha("#fff", 0.8)}`,
color: "#00acc1",
mt: 0.25,
p: 0.5,
}}
>
<Image
src="/ai-agent.svg"
alt="TJWater Agent"
width={18}
height={18}
style={{ objectFit: "contain" }}
/>
</Avatar>
<Paper
elevation={0}
sx={{
flex: 1,
minWidth: 0,
p: 2,
borderRadius: 5,
bgcolor: alpha("#ffffff", 0.65),
border: `1px solid ${alpha("#fff", 0.8)}`,
boxShadow: `0 10px 30px -10px ${alpha(theme.palette.common.black, 0.08)}`,
backdropFilter: "blur(20px)",
position: "relative",
"--chat-md-text": "text.primary",
"--chat-md-heading": "text.primary",
"--chat-md-link": "#00838f",
"--chat-md-link-hover": "#00acc1",
"--chat-md-inline-code-bg": alpha("#00acc1", 0.08),
"--chat-md-inline-code-border": alpha("#00acc1", 0.15),
"--chat-md-inline-code-text": "#006064",
"--chat-md-pre-bg": "#1e293b",
"--chat-md-pre-border": "#475569",
"--chat-md-pre-text": "#f1f5f9",
"--chat-md-quote-border": "#00acc1",
"--chat-md-quote-bg": alpha("#00acc1", 0.04),
"--chat-md-quote-text": "text.secondary",
}}
>
<Stack spacing={1.5}>
{message.progress?.length ? (
<AgentProgressTimeline progress={message.progress} isAborted={isErrorMessage} />
) : null}
{message.permissions?.length ? (
<PermissionRequestGroup
permissions={message.permissions}
isRunning={isProgressRunning}
onReply={onReplyPermission}
/>
) : null}
{message.questions?.length ? (
<QuestionRequestGroup
questions={message.questions}
onReply={onReplyQuestion}
onReject={onRejectQuestion}
/>
) : null}
{message.todos ? (
<TodoPlanCard todoUpdate={message.todos} />
) : null}
<Box
ref={answerContentRef}
onPointerUp={handleCaptureSpeechSelection}
onKeyUp={handleCaptureSpeechSelection}
sx={{
p: 1.5,
borderRadius: 4,
bgcolor: alpha("#fff", 0.4),
border: `1px solid ${alpha("#fff", 0.6)}`,
position: "relative",
}}
>
<Stack spacing={1.2}>
<Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
<Typography variant="caption" color="text.secondary" fontWeight={800} sx={{ letterSpacing: 0.5 }}>
分析结果
</Typography>
{isStreamingAssistant ? <StreamingStatus /> : null}
</Stack>
{contentSegments.map((segment, segIdx) => {
if (segment.type === "text") {
const text = segment.content.trim();
if (!text && contentSegments.length > 1) return null;
return (
<StreamingMarkdownBlock
key={segIdx}
text={text || "..."}
isStreaming={isStreamingAssistant}
segmentKey={`${message.id}-${segIdx}`}
/>
);
}
if (segment.type === "tool_call") {
if (
segment.toolCall.tool === "chart" ||
segment.toolCall.tool === "show_chart"
) {
const p = segment.toolCall.params;
return (
<ChatInlineChart
key={segment.toolCall.id}
title={(p.title as string) ?? undefined}
chart_type={
(p.chart_type as "line" | "bar" | "pie") ?? "line"
}
x_data={p.x_data ?? p.xData ?? p.labels ?? p.categories}
series={p.series}
x_axis_name={(p.x_axis_name as string) ?? undefined}
y_axis_name={(p.y_axis_name as string) ?? undefined}
isStreaming={isStreamingAssistant}
/>
);
}
return (
<ChatToolCallBlock
key={segment.toolCall.id}
toolCall={segment.toolCall}
/>
);
}
if (segment.type === "tool_call_pending") {
return (
<ChartGenerationSkeleton
key="tool-pending"
status={<StreamingStatus />}
/>
);
}
return null;
})}
</Stack>
</Box>
<Popper
open={isSpeechSelectionOpen}
anchorEl={speechSelectionAnchor}
placement="top"
transition
modifiers={[
{ name: "offset", options: { offset: [0, 8] } },
{ name: "flip", enabled: true },
{ name: "preventOverflow", options: { padding: 8 } },
]}
sx={{ zIndex: theme.zIndex.tooltip }}
>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
timeout={floatingActionTransitionTimeout}
style={{
transformOrigin: placement.startsWith("bottom")
? "center top"
: "center bottom",
}}
>
<Paper elevation={4} sx={floatingActionSurfaceSx}>
<Button
size="small"
startIcon={<VolumeUpRounded sx={{ fontSize: 16 }} />}
onMouseDown={(event) => event.preventDefault()}
onClick={handleSpeakFromSelection}
sx={floatingSpeechButtonSx}
>
从这里开始朗读
</Button>
</Paper>
</Grow>
)}
</Popper>
{visibleChartArtifacts.map((artifact) => (
<ChatInlineChart
key={artifact.id}
title={(artifact.params.title as string) ?? artifact.title}
chart_type={
(artifact.params.chart_type as "line" | "bar" | "pie") ??
"line"
}
x_data={
artifact.params.x_data ??
artifact.params.xData ??
artifact.params.labels ??
artifact.params.categories
}
series={artifact.params.series}
x_axis_name={(artifact.params.x_axis_name as string) ?? undefined}
y_axis_name={(artifact.params.y_axis_name as string) ?? undefined}
isStreaming={isStreamingAssistant}
/>
))}
</Stack>
<Grow
in={isHovered && !isStreaming}
timeout={floatingActionTransitionTimeout}
mountOnEnter
unmountOnExit
style={{ transformOrigin: "right bottom" }}
>
<Paper
elevation={4}
sx={{
...floatingActionSurfaceSx,
position: "absolute",
top: -14,
right: 12,
zIndex: 10,
}}
>
<Tooltip title="复制">
<IconButton
size="small"
aria-label="复制"
onClick={() => {
navigator.clipboard.writeText(
normalizeClipboardText(message.content),
);
}}
sx={floatingIconButtonSx}
>
<ContentCopyRounded sx={{ fontSize: 16 }} />
</IconButton>
</Tooltip>
<Tooltip title="拆分为新会话">
<IconButton
size="small"
aria-label="拆分为新会话"
onClick={() => onCreateBranch(message.id)}
sx={floatingIconButtonSx}
>
<TbArrowsSplit2 size={16} />
</IconButton>
</Tooltip>
</Paper>
</Grow>
</Paper>
</Stack>
{!isErrorMessage && isTtsSupported ? (
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mt: 0.5, ml: 6, mb: 1 }}>
<Stack direction="row" spacing={0.5} sx={{ opacity: isHovered ? 1 : 0.4, transition: "opacity 0.2s" }}>
{messageSpeechState === "idle" ? (
<IconButton
size="small"
onClick={handleSpeakMessage}
aria-label="朗读消息"
sx={{ color: "text.secondary", opacity: 0.68, p: 0.5 }}
>
<VolumeUpRounded sx={{ fontSize: 16 }} />
</IconButton>
) : null}
{messageSpeechState === "loading" ? (
<>
<IconButton
size="small"
disabled
aria-label="正在生成语音"
sx={{ color: "primary.main", p: 0.5 }}
>
<CircularProgress size={16} thickness={5} />
</IconButton>
<IconButton size="small" onClick={onStopSpeech} aria-label="停止朗读" sx={{ color: "error.main", p: 0.5 }}>
<StopRounded sx={{ fontSize: 16 }} />
</IconButton>
</>
) : null}
{messageSpeechState === "playing" ? (
<>
<IconButton size="small" onClick={onPause} aria-label="暂停朗读" sx={{ color: "primary.main", p: 0.5 }}>
<PauseRounded sx={{ fontSize: 16 }} />
</IconButton>
<IconButton size="small" onClick={onStopSpeech} aria-label="停止朗读" sx={{ color: "error.main", p: 0.5 }}>
<StopRounded sx={{ fontSize: 16 }} />
</IconButton>
</>
) : null}
{messageSpeechState === "paused" ? (
<>
<IconButton size="small" onClick={onResume} aria-label="继续朗读" sx={{ color: "primary.main", p: 0.5 }}>
<PlayArrowRounded sx={{ fontSize: 16 }} />
</IconButton>
<IconButton size="small" onClick={onStopSpeech} aria-label="停止朗读" sx={{ color: "error.main", p: 0.5 }}>
<StopRounded sx={{ fontSize: 16 }} />
</IconButton>
</>
) : null}
</Stack>
</Stack>
) : null}
</motion.div>
);
},
);
AgentTurn.displayName = "AgentTurn";
src/components/chat/AgentWorkspace.test.tsx
-265
View File
@@ -1,265 +0,0 @@
/* eslint-disable @next/next/no-img-element */
import "@testing-library/jest-dom";
import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import { AgentWorkspace } from "./AgentWorkspace";
import type { Message } from "./GlobalChatbox.types";
const renderCounts = new Map<string, number>();
const mountCounts = new Map<string, number>();
const unmountCounts = new Map<string, number>();
const streamingFlags = new Map<string, boolean>();
jest.mock("next/image", () => ({
__esModule: true,
default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img {...props} alt={props.alt ?? ""} />,
}));
jest.mock("framer-motion", () => ({
AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
motion: {
div: ({
children,
animate: _animate,
exit: _exit,
initial: _initial,
layout: _layout,
transition: _transition,
whileHover: _whileHover,
...props
}: React.HTMLAttributes<HTMLDivElement> & Record<string, unknown>) => (
<div {...props}>{children}</div>
),
},
}));
jest.mock("./AgentTurn", () => ({
AgentTurn: ({ message, isStreaming }: { message: Message; isStreaming: boolean }) => {
React.useEffect(() => {
mountCounts.set(message.id, (mountCounts.get(message.id) ?? 0) + 1);
return () => {
unmountCounts.set(message.id, (unmountCounts.get(message.id) ?? 0) + 1);
};
}, [message.id]);
renderCounts.set(message.id, (renderCounts.get(message.id) ?? 0) + 1);
streamingFlags.set(message.id, isStreaming);
return <div data-testid={`turn-${message.id}`}>{message.content}</div>;
},
}));
describe("AgentWorkspace", () => {
const defaultProps = {
bottomRef: { current: null },
speakingMessageId: null,
speechState: "idle" as const,
onSpeak: jest.fn(),
onPauseSpeech: jest.fn(),
onResumeSpeech: jest.fn(),
onStopSpeech: jest.fn(),
isTtsSupported: false,
onCreateBranch: jest.fn(),
onReplyPermission: jest.fn(),
onReplyQuestion: jest.fn(),
onRejectQuestion: jest.fn(),
};
beforeEach(() => {
renderCounts.clear();
mountCounts.clear();
unmountCounts.clear();
streamingFlags.clear();
});
it("shows a loading skeleton instead of the empty state while switching history sessions", () => {
render(
<AgentWorkspace
{...defaultProps}
isStreaming={false}
isLoadingSession
messages={[]}
/>,
);
expect(screen.getByLabelText("正在加载历史记录")).toBeInTheDocument();
expect(screen.queryByText("我已就绪，请描述任务")).not.toBeInTheDocument();
});
it("shows runtime startup failures in the existing empty state and retries there", () => {
const onRetryRuntime = jest.fn();
render(
<AgentWorkspace
{...defaultProps}
isStreaming={false}
runtimeState="unavailable"
onRetryRuntime={onRetryRuntime}
messages={[]}
/>,
);
expect(screen.getByText("Agent 服务未就绪")).toBeInTheDocument();
expect(screen.queryByText("我已就绪，请描述任务")).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "重新检测" }));
expect(onRetryRuntime).toHaveBeenCalledTimes(1);
});
it("distinguishes model loading failures from backend startup failures", () => {
render(
<AgentWorkspace
{...defaultProps}
isStreaming={false}
runtimeState="models_unavailable"
messages={[]}
/>,
);
expect(screen.getByText("模型未加载")).toBeInTheDocument();
expect(screen.getByText(/模型配置加载失败/)).toBeInTheDocument();
});
it("keeps stable history turns from re-rendering while the last assistant message streams", () => {
const userMessage: Message = {
id: "user-1",
role: "user",
content: "question",
};
const assistantHistoryMessage: Message = {
id: "assistant-1",
role: "assistant",
content: "stable answer",
};
const streamingMessage: Message = {
id: "assistant-2",
role: "assistant",
content: "partial",
};
const { rerender } = render(
<AgentWorkspace
{...defaultProps}
isStreaming
messages={[userMessage, assistantHistoryMessage, streamingMessage]}
/>,
);
const updatedStreamingMessage: Message = {
...streamingMessage,
content: "partial with more tokens",
};
rerender(
<AgentWorkspace
{...defaultProps}
isStreaming
messages={[userMessage, assistantHistoryMessage, updatedStreamingMessage]}
/>,
);
expect(renderCounts.get("user-1")).toBe(1);
expect(renderCounts.get("assistant-1")).toBe(1);
expect(renderCounts.get("assistant-2")).toBe(2);
expect(streamingFlags.get("assistant-1")).toBe(false);
expect(streamingFlags.get("assistant-2")).toBe(true);
});
it("does not remount the streaming assistant turn when streaming finishes", () => {
const userMessage: Message = {
id: "user-1",
role: "user",
content: "question",
};
const assistantMessage: Message = {
id: "assistant-1",
role: "assistant",
content: "final answer",
};
const { rerender } = render(
<AgentWorkspace
{...defaultProps}
isStreaming
messages={[userMessage, assistantMessage]}
/>,
);
expect(streamingFlags.get("assistant-1")).toBe(true);
rerender(
<AgentWorkspace
{...defaultProps}
isStreaming={false}
messages={[userMessage, assistantMessage]}
/>,
);
expect(mountCounts.get("assistant-1")).toBe(1);
expect(unmountCounts.get("assistant-1") ?? 0).toBe(0);
expect(streamingFlags.get("assistant-1")).toBe(false);
});
it("windows long conversations instead of mounting every turn", () => {
const messages = Array.from({ length: 200 }, (_, index): Message => ({
id: `message-${index}`,
role: index % 2 === 0 ? "user" : "assistant",
content: `message ${index}`,
}));
render(
<AgentWorkspace
{...defaultProps}
isStreaming={false}
messages={messages}
/>,
);
expect(renderCounts.size).toBeGreaterThan(0);
expect(renderCounts.size).toBeLessThan(40);
});
it("preserves the flex alignment context around windowed turns", () => {
const messages = Array.from({ length: 41 }, (_, index): Message => ({
id: `message-${index}`,
role: index % 2 === 0 ? "user" : "assistant",
content: `message ${index}`,
}));
render(
<AgentWorkspace
{...defaultProps}
isStreaming={false}
messages={messages}
/>,
);
expect(screen.getByTestId("turn-message-0").parentElement).toHaveStyle({
display: "flex",
flexDirection: "column",
});
});
it("keeps visible turns mounted when crossing the windowing threshold", () => {
const messages = Array.from({ length: 41 }, (_, index): Message => ({
id: `message-${index}`,
role: index % 2 === 0 ? "user" : "assistant",
content: `message ${index}`,
}));
const { rerender } = render(
<AgentWorkspace
{...defaultProps}
isStreaming={false}
messages={messages.slice(0, 40)}
/>,
);
rerender(
<AgentWorkspace
{...defaultProps}
isStreaming={false}
messages={messages}
/>,
);
expect(mountCounts.get("message-0")).toBe(1);
expect(unmountCounts.get("message-0") ?? 0).toBe(0);
});
});
src/components/chat/AgentWorkspace.tsx
-660
View File
@@ -1,660 +0,0 @@
"use client";
import Image from "next/image";
import React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Box, Button, CircularProgress, Paper, Skeleton, Stack, Typography, alpha, Grid } from "@mui/material";
import WaterDropRounded from "@mui/icons-material/WaterDropRounded";
import SensorsRounded from "@mui/icons-material/SensorsRounded";
import TroubleshootRounded from "@mui/icons-material/TroubleshootRounded";
import MapRounded from "@mui/icons-material/MapRounded";
import ReplayRounded from "@mui/icons-material/ReplayRounded";
import { AgentTurn } from "./AgentTurn";
import type { AgentRuntimeState } from "@/lib/agentRuntime";
import type { PermissionDecision } from "@/lib/chatStream";
import type {
Message,
SpeechState,
} from "./GlobalChatbox.types";
type AgentWorkspaceProps = {
messages: Message[];
isStreaming: boolean;
runtimeState?: AgentRuntimeState;
onRetryRuntime?: () => void;
isLoadingSession?: boolean;
scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
bottomRef: React.RefObject<HTMLDivElement | null>;
onScrollStateChange?: (isNearBottom: boolean) => void;
speakingMessageId: string | null;
speechState: SpeechState;
onSpeak: (
messageId: string,
text: string,
options?: { startOffset?: number },
) => void;
onPauseSpeech: () => void;
onResumeSpeech: () => void;
onStopSpeech: () => void;
isTtsSupported: boolean;
onCreateBranch: (messageId: string) => void;
onReplyPermission: (requestId: string, reply: PermissionDecision) => void;
onReplyQuestion: (requestId: string, answers: string[][]) => void;
onRejectQuestion: (requestId: string) => void;
};
type TurnListProps = {
messages: Message[];
scrollTop: number;
viewportHeight: number;
isAssistantStreaming: boolean;
streamingMessageId: string | null;
speakingMessageId: string | null;
speechState: SpeechState;
onSpeak: (
messageId: string,
text: string,
options?: { startOffset?: number },
) => void;
onPauseSpeech: () => void;
onResumeSpeech: () => void;
onStopSpeech: () => void;
isTtsSupported: boolean;
onCreateBranch: (messageId: string) => void;
onReplyPermission: (requestId: string, reply: PermissionDecision) => void;
onReplyQuestion: (requestId: string, answers: string[][]) => void;
onRejectQuestion: (requestId: string) => void;
};
const STREAMING_BOTTOM_RESERVE_PX = 180;
const STREAMING_NEAR_BOTTOM_THRESHOLD_PX = STREAMING_BOTTOM_RESERVE_PX + 120;
const TURN_WINDOW_THRESHOLD = 40;
const TURN_ESTIMATED_HEIGHT_PX = 220;
const TURN_GAP_PX = 16;
const TURN_OVERSCAN_PX = 600;
const DEFAULT_VIEWPORT_HEIGHT_PX = 720;
const sameMessages = (left: Message[], right: Message[]) =>
left.length === right.length &&
left.every((message, index) => message === right[index]);
const TurnItem = React.memo(AgentTurn);
const TurnListInner = ({
messages,
scrollTop,
viewportHeight,
isAssistantStreaming,
streamingMessageId,
speakingMessageId,
speechState,
onSpeak,
onPauseSpeech,
onResumeSpeech,
onStopSpeech,
isTtsSupported,
onCreateBranch,
onReplyPermission,
onReplyQuestion,
onRejectQuestion,
}: TurnListProps) => {
const [measuredHeights, setMeasuredHeights] = React.useState(
() => new Map<string, number>(),
);
const isWindowed = messages.length > TURN_WINDOW_THRESHOLD;
React.useEffect(() => {
const activeIds = new Set(messages.map((message) => message.id));
setMeasuredHeights((current) => {
if ([...current.keys()].every((messageId) => activeIds.has(messageId))) {
return current;
}
return new Map(
[...current].filter(([messageId]) => activeIds.has(messageId)),
);
});
}, [messages]);
const updateMeasuredHeight = React.useCallback(
(messageId: string, height: number) => {
if (!Number.isFinite(height) || height <= 0) return;
const roundedHeight = Math.ceil(height);
setMeasuredHeights((current) => {
if (current.get(messageId) === roundedHeight) return current;
const next = new Map(current);
next.set(messageId, roundedHeight);
return next;
});
},
[],
);
const turnOffsets = React.useMemo(() => {
const offsets = new Array<number>(messages.length + 1).fill(0);
if (!isWindowed) return offsets;
for (let index = 0; index < messages.length; index += 1) {
const message = messages[index];
const size =
(measuredHeights.get(message.id) ?? TURN_ESTIMATED_HEIGHT_PX) +
TURN_GAP_PX;
offsets[index + 1] = offsets[index] + size;
}
return offsets;
}, [isWindowed, measuredHeights, messages]);
const windowState = React.useMemo(() => {
if (!isWindowed) {
return {
endIndex: messages.length,
startIndex: 0,
topSpacerHeight: 0,
bottomSpacerHeight: 0,
};
}
const visibleStart = Math.max(0, scrollTop - TURN_OVERSCAN_PX);
const visibleEnd = scrollTop + viewportHeight + TURN_OVERSCAN_PX;
const startIndex = Math.max(
0,
lowerBound(turnOffsets, visibleStart, 1) - 1,
);
const endIndex = lowerBound(turnOffsets, visibleEnd, startIndex);
const boundedEndIndex = Math.min(
messages.length,
Math.max(startIndex + 1, endIndex),
);
return {
startIndex,
endIndex: boundedEndIndex,
topSpacerHeight: turnOffsets[startIndex],
bottomSpacerHeight:
turnOffsets[messages.length] - turnOffsets[boundedEndIndex],
};
}, [isWindowed, messages.length, scrollTop, turnOffsets, viewportHeight]);
const visibleMessages = isWindowed
? messages.slice(windowState.startIndex, windowState.endIndex)
: messages;
return (
<>
{windowState.topSpacerHeight > 0 ? (
<Box aria-hidden sx={{ height: windowState.topSpacerHeight, flexShrink: 0 }} />
) : null}
{visibleMessages.map((message) => (
<MeasuredTurn
key={message.id}
message={message}
measure={isWindowed}
onHeightChange={updateMeasuredHeight}
>
<TurnItem
message={message}
isStreaming={isAssistantStreaming && message.id === streamingMessageId}
messageSpeechState={speakingMessageId === message.id ? speechState : "idle"}
onSpeak={onSpeak}
onPause={onPauseSpeech}
onResume={onResumeSpeech}
onStopSpeech={onStopSpeech}
isTtsSupported={isTtsSupported}
onCreateBranch={onCreateBranch}
onReplyPermission={onReplyPermission}
onReplyQuestion={onReplyQuestion}
onRejectQuestion={onRejectQuestion}
/>
</MeasuredTurn>
))}
{windowState.bottomSpacerHeight > 0 ? (
<Box aria-hidden sx={{ height: windowState.bottomSpacerHeight, flexShrink: 0 }} />
) : null}
</>
);
};
const lowerBound = (values: number[], target: number, fromIndex: number) => {
let low = Math.max(0, fromIndex);
let high = values.length;
while (low < high) {
const middle = low + Math.floor((high - low) / 2);
if (values[middle] < target) low = middle + 1;
else high = middle;
}
return low;
};
type MeasuredTurnProps = {
children: React.ReactNode;
measure: boolean;
message: Message;
onHeightChange: (messageId: string, height: number) => void;
};
const MeasuredTurn = ({
children,
measure,
message,
onHeightChange,
}: MeasuredTurnProps) => {
const rowRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
const row = rowRef.current;
if (!measure || !row) return;
const measureRow = () =>
onHeightChange(message.id, row.getBoundingClientRect().height);
measureRow();
if (typeof ResizeObserver === "undefined") return;
const observer = new ResizeObserver(measureRow);
observer.observe(row);
return () => observer.disconnect();
}, [measure, message.id, onHeightChange]);
return (
<Box
ref={rowRef}
sx={{
display: "flex",
flexDirection: "column",
flexShrink: 0,
mb: measure ? `${TURN_GAP_PX}px` : 0,
}}
>
{children}
</Box>
);
};
const TurnList = React.memo(
TurnListInner,
(prevProps, nextProps) =>
sameMessages(prevProps.messages, nextProps.messages) &&
prevProps.scrollTop === nextProps.scrollTop &&
prevProps.viewportHeight === nextProps.viewportHeight &&
prevProps.isAssistantStreaming === nextProps.isAssistantStreaming &&
prevProps.streamingMessageId === nextProps.streamingMessageId &&
prevProps.speakingMessageId === nextProps.speakingMessageId &&
prevProps.speechState === nextProps.speechState &&
prevProps.onSpeak === nextProps.onSpeak &&
prevProps.onPauseSpeech === nextProps.onPauseSpeech &&
prevProps.onResumeSpeech === nextProps.onResumeSpeech &&
prevProps.onStopSpeech === nextProps.onStopSpeech &&
prevProps.isTtsSupported === nextProps.isTtsSupported &&
prevProps.onCreateBranch === nextProps.onCreateBranch &&
prevProps.onReplyPermission === nextProps.onReplyPermission &&
prevProps.onReplyQuestion === nextProps.onReplyQuestion &&
prevProps.onRejectQuestion === nextProps.onRejectQuestion,
);
TurnList.displayName = "TurnList";
const EmptyState = ({
runtimeState,
onRetryRuntime,
}: {
runtimeState: AgentRuntimeState;
onRetryRuntime?: () => void;
}) => {
const isReady = runtimeState === "ready";
const isChecking = runtimeState === "checking";
const statusCopy = isChecking
? {
title: "正在连接 Agent 服务",
detail: "正在确认后端运行时和模型加载状态，请稍候。",
}
: runtimeState === "models_unavailable"
? {
title: "模型未加载",
detail: "Agent 服务已启动，但模型配置加载失败。请检查模型配置后重新检测。",
}
: runtimeState === "unavailable"
? {
title: "Agent 服务未就绪",
detail: "无法连接 Agent 后端，或运行时启动失败。请检查服务后重新检测。",
}
: {
title: "我已就绪，请描述任务",
detail: "你可以使用自然语言下达指令，我会自主规划决策执行、并在地图上呈现分析结果。",
};
const capabilities = [
{ icon: <WaterDropRounded sx={{ fontSize: 20, color: "#00acc1" }} />, label: "水力瓶颈识别" },
{ icon: <SensorsRounded sx={{ fontSize: 20, color: "#0288d1" }} />, label: "异常状态预警" },
{ icon: <TroubleshootRounded sx={{ fontSize: 20, color: "#43a047" }} />, label: "调度与改造建议" },
{ icon: <MapRounded sx={{ fontSize: 20, color: "#8e24aa" }} />, label: "GIS 地图联动" },
];
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: "spring", stiffness: 200, damping: 20 }}
style={{ margin: "auto", width: "100%", maxWidth: 440, padding: 16 }}
>
<Paper
role={isReady || isChecking ? "status" : "alert"}
aria-live="polite"
elevation={0}
sx={{
p: 4,
borderRadius: 4,
bgcolor: alpha("#ffffff", 0.4),
border: `1px solid ${alpha("#fff", 0.8)}`,
boxShadow: `0 16px 40px ${alpha("#000", 0.05)}`,
textAlign: "center",
backdropFilter: "blur(24px)",
position: "relative",
overflow: "hidden",
}}
>
<Box sx={{
position: "absolute",
top: -100,
right: -100,
width: 200,
height: 200,
background: "radial-gradient(circle, rgba(0, 172, 193, 0.15) 0%, rgba(255,255,255,0) 70%)",
}} />
<motion.div
animate={{
y: isReady ? [-6, 4, -6] : 0,
scale: isReady ? [1, 1.04, 1] : 1,
rotate: isReady ? [-3, 3, -3] : 0,
}}
transition={{ duration: 4.8, repeat: Infinity, ease: "easeInOut" }}
style={{
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
width: 88,
height: 88,
marginBottom: 12,
borderRadius: "50%",
background: "radial-gradient(circle, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.45) 58%, rgba(255,255,255,0) 100%)",
boxShadow: "0 10px 28px rgba(0, 131, 143, 0.12)",
}}
>
<Image
src="/ai-agent.svg"
alt="TJWater Agent"
width={54}
height={54}
style={{
objectFit: "contain",
filter: isReady
? "drop-shadow(0 4px 12px rgba(0, 131, 143, 0.2))"
: "grayscale(0.65) opacity(0.72)",
}}
/>
</motion.div>
<Typography variant="h6" color="text.primary" fontWeight={800} gutterBottom>
{statusCopy.title}
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.6, mb: isReady ? 3 : 2 }}>
{statusCopy.detail}
</Typography>
{isChecking ? (
<CircularProgress size={28} thickness={4} aria-label="正在检测 Agent 服务" />
) : !isReady ? (
<Button
variant="contained"
size="small"
startIcon={<ReplayRounded />}
onClick={onRetryRuntime}
sx={{ borderRadius: 999, px: 2, boxShadow: "none" }}
>
重新检测
</Button>
) : (
<Grid container spacing={1.5}>
{capabilities.map((item) => (
<Grid item xs={6} key={item.label}>
<motion.div whileHover={{ y: -2, scale: 1.02 }} transition={{ duration: 0.2 }}>
<Stack
direction="row"
spacing={1}
alignItems="center"
justifyContent="center"
sx={{
px: 1.5,
py: 1.5,
borderRadius: 3,
bgcolor: alpha("#fff", 0.5),
border: `1px solid ${alpha("#fff", 0.6)}`,
boxShadow: `0 4px 12px ${alpha("#000", 0.03)}`,
color: "text.primary",
transition: "all 0.2s",
"&:hover": {
bgcolor: alpha("#fff", 0.8),
borderColor: alpha("#00acc1", 0.4),
boxShadow: `0 6px 16px ${alpha("#00acc1", 0.15)}`,
}
}}
>
{item.icon}
<Typography variant="caption" fontWeight={700}>
{item.label}
</Typography>
</Stack>
</motion.div>
</Grid>
))}
</Grid>
)}
</Paper>
</motion.div>
);
};
const SessionLoadingSkeleton = () => (
<Stack
spacing={2.25}
aria-label="正在加载历史记录"
sx={{ width: "100%", maxWidth: 760, alignSelf: "stretch" }}
>
{Array.from({ length: 2 }, (_, turnIndex) => (
<Stack key={turnIndex} spacing={1.25}>
<Stack direction="row" justifyContent="flex-end">
<Paper
elevation={0}
sx={{
width: turnIndex === 0 ? "72%" : "64%",
maxWidth: "86%",
p: 1.75,
borderRadius: 5,
borderBottomRightRadius: 2,
bgcolor: alpha("#00acc1", 0.16),
border: `1px solid ${alpha("#00acc1", 0.12)}`,
boxShadow: `0 8px 24px -12px ${alpha("#00acc1", 0.35)}`,
}}
>
<Stack spacing={0.85}>
<Skeleton variant="text" width="76%" height={18} />
<Skeleton variant="text" width="48%" height={15} />
</Stack>
</Paper>
</Stack>
<Stack direction="row" spacing={1.5} alignItems="flex-start">
<Skeleton
variant="circular"
width={34}
height={34}
sx={{ bgcolor: alpha("#00acc1", 0.12), flexShrink: 0, mt: 0.25 }}
/>
<Paper
elevation={0}
sx={{
flex: 1,
minWidth: 0,
p: 2,
borderRadius: 5,
bgcolor: alpha("#ffffff", 0.52),
border: `1px solid ${alpha("#fff", 0.72)}`,
boxShadow: `0 10px 30px -10px ${alpha("#000", 0.06)}`,
}}
>
<Stack spacing={1}>
<Skeleton variant="text" width="38%" height={16} />
<Skeleton variant="text" width="94%" height={16} />
<Skeleton variant="text" width={turnIndex === 0 ? "88%" : "82%"} height={16} />
<Skeleton variant="text" width={turnIndex === 0 ? "78%" : "70%"} height={16} />
<Skeleton variant="rounded" width="100%" height={turnIndex === 0 ? 104 : 76} sx={{ borderRadius: 2 }} />
</Stack>
</Paper>
</Stack>
</Stack>
))}
</Stack>
);
export const AgentWorkspace = ({
messages,
isStreaming,
runtimeState = "ready",
onRetryRuntime,
isLoadingSession = false,
scrollContainerRef,
bottomRef,
onScrollStateChange,
speakingMessageId,
speechState,
onSpeak,
onPauseSpeech,
onResumeSpeech,
onStopSpeech,
isTtsSupported,
onCreateBranch,
onReplyPermission,
onReplyQuestion,
onRejectQuestion,
}: AgentWorkspaceProps) => {
const localScrollContainerRef = React.useRef<HTMLDivElement>(null);
const [scrollMetrics, setScrollMetrics] = React.useState({
scrollTop: 0,
viewportHeight: DEFAULT_VIEWPORT_HEIGHT_PX,
});
const streamingMessageId =
isStreaming && messages.at(-1)?.role === "assistant"
? messages.at(-1)?.id ?? null
: null;
const handleScroll = React.useCallback(
(event: React.UIEvent<HTMLDivElement>) => {
const target = event.currentTarget;
setScrollMetrics({
scrollTop: target.scrollTop,
viewportHeight: target.clientHeight || DEFAULT_VIEWPORT_HEIGHT_PX,
});
if (!onScrollStateChange) return;
const distanceToBottom =
target.scrollHeight - target.scrollTop - target.clientHeight;
onScrollStateChange(
distanceToBottom <
(isStreaming ? STREAMING_NEAR_BOTTOM_THRESHOLD_PX : 96),
);
},
[isStreaming, onScrollStateChange],
);
const setScrollContainer = React.useCallback(
(node: HTMLDivElement | null) => {
localScrollContainerRef.current = node;
if (scrollContainerRef) {
scrollContainerRef.current = node;
}
},
[scrollContainerRef],
);
React.useEffect(() => {
const container = localScrollContainerRef.current;
if (!container || typeof ResizeObserver === "undefined") return;
const updateViewportHeight = () => {
const viewportHeight =
container.clientHeight || DEFAULT_VIEWPORT_HEIGHT_PX;
setScrollMetrics((current) =>
current.viewportHeight === viewportHeight
? current
: { ...current, viewportHeight },
);
};
updateViewportHeight();
const observer = new ResizeObserver(updateViewportHeight);
observer.observe(container);
return () => observer.disconnect();
}, []);
return (
<Box
ref={setScrollContainer}
onScroll={handleScroll}
sx={{
flex: 1,
overflowY: "auto",
px: 2.5,
py: 2,
display: "flex",
flexDirection: "column",
scrollbarGutter: "stable",
zIndex: 5,
}}
>
{isLoadingSession ? (
<SessionLoadingSkeleton />
) : (
<>
<AnimatePresence initial={false}>
{messages.length === 0 ? (
<EmptyState
runtimeState={runtimeState}
onRetryRuntime={onRetryRuntime}
/>
) : null}
</AnimatePresence>
{messages.length > 0 ? (
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: messages.length > TURN_WINDOW_THRESHOLD ? 0 : 2,
}}
>
<TurnList
messages={messages}
scrollTop={
messages.length > TURN_WINDOW_THRESHOLD
? scrollMetrics.scrollTop
: 0
}
viewportHeight={scrollMetrics.viewportHeight}
isAssistantStreaming={isStreaming}
streamingMessageId={streamingMessageId}
speakingMessageId={speakingMessageId}
speechState={speechState}
onSpeak={onSpeak}
onPauseSpeech={onPauseSpeech}
onResumeSpeech={onResumeSpeech}
onStopSpeech={onStopSpeech}
isTtsSupported={isTtsSupported}
onCreateBranch={onCreateBranch}
onReplyPermission={onReplyPermission}
onReplyQuestion={onReplyQuestion}
onRejectQuestion={onRejectQuestion}
/>
</Box>
) : null}
</>
)}
<div
ref={bottomRef}
style={{
flexShrink: 0,
height: isStreaming ? STREAMING_BOTTOM_RESERVE_PX : 1,
}}
/>
</Box>
);
};
src/components/chat/ChatInlineChart.test.ts
-49
View File
@@ -1,49 +0,0 @@
import { normalizeChartData } from "./ChatInlineChart";
describe("normalizeChartData", () => {
it("keeps standard bar chart series data", () => {
const result = normalizeChartData(["A", "B"], [
{ name: "数量", data: [3, 5], type: "bar" },
]);
expect(result).toEqual({
xData: ["A", "B"],
series: [{ name: "数量", data: [3, 5], type: "bar" }],
});
});
it("normalizes line chart point arrays into x labels and y values", () => {
const result = normalizeChartData(undefined, [
{ name: "压力", data: [["10:00", 12.5], ["11:00", 13.1]] },
]);
expect(result).toEqual({
xData: ["10:00", "11:00"],
series: [{ name: "压力", data: [12.5, 13.1], type: undefined }],
});
});
it("normalizes pie chart point objects into a single series", () => {
const result = normalizeChartData(undefined, [
{ name: "低风险", value: 8 },
{ name: "高风险", value: 2 },
]);
expect(result).toEqual({
xData: ["低风险", "高风险"],
series: [{ name: "数据", data: [8, 2], type: undefined }],
});
});
it("accepts a single series object", () => {
const result = normalizeChartData(["A", "B"], {
name: "流量",
values: ["1.2", "2.4"],
});
expect(result).toEqual({
xData: ["A", "B"],
series: [{ name: "流量", data: [1.2, 2.4], type: undefined }],
});
});
});

Some files were not shown because too many files have changed in this diff Show More