Compare commits
3
Commits
22afdbf2e8
...
d80a071987
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d80a071987 | ||
|
|
216c7b1ab9 | ||
|
|
7d966a5e91 |
@@ -1,60 +0,0 @@
|
||||
# Copilot Instructions for TJWaterFrontend_Refine
|
||||
|
||||
## Environment Setup
|
||||
|
||||
1. **Node.js**: Ensure you have Node.js v18 or later installed.
|
||||
2. **Dependencies**: Run `npm install` to install all project dependencies.
|
||||
3. **Environment Variables**: Create a `.env.local` file in the root directory with
|
||||
|
||||
Using bash setup dependencies:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## Build, Test, and Lint
|
||||
|
||||
- **Dev Server**: `npm run dev` (Runs with increased memory limit: `--max_old_space_size=4096`)
|
||||
- **Build**: `npm run build`
|
||||
- **Lint**: `npm run lint` (ESLint)
|
||||
- **Test**: `npm run test` (Jest)
|
||||
- Run a specific test file: `npm run test -- <path/to/file>`
|
||||
- Run a specific test case: `npm run test -- -t 'test name'`
|
||||
|
||||
## High-Level Architecture
|
||||
|
||||
- **Framework**: **Next.js 16 (App Router)** integrated with **Refine** (`@refinedev/core`).
|
||||
- **Routing**:
|
||||
- Routes are defined in `src/app`.
|
||||
- Refine resources (e.g., `/network-simulation`, `/hydraulic-simulation/*`) map directly to these routes.
|
||||
- Configuration is central in `src/app/_refine_context.tsx`.
|
||||
- **State Management**:
|
||||
- **Global App State**: **Zustand** (`src/store`).
|
||||
- **Server State**: Managed by Refine hooks (`useList`, `useOne`, etc.) via **React Query**.
|
||||
- **Authentication**:
|
||||
- **NextAuth.js** handling Keycloak integration.
|
||||
- Session token is synced to Zustand (`useAuthStore`) in `RefineContext`.
|
||||
- **Data Layer**:
|
||||
- Custom Data Provider: `src/providers/data-provider`.
|
||||
- API Utilities: `src/lib/api.ts`, `src/lib/apiFetch.ts`.
|
||||
- **UI & Styling**:
|
||||
- **Material UI (MUI)**: Primary component library (`@mui/material`, `@refinedev/mui`).
|
||||
- **Tailwind CSS v4**: Utility classes for layout and custom styling (`@tailwindcss/postcss`).
|
||||
- **Mapping**: OpenLayers (`ol`), deck.gl, Turf.js.
|
||||
- **Charts**: ECharts, MUI X Charts.
|
||||
|
||||
## Key Conventions
|
||||
|
||||
- **Refine Integration**:
|
||||
- Use Refine hooks (`useTable`, `useForm`, `useNavigation`) for data-heavy components.
|
||||
- Resources are defined in the `<Refine>` component in `src/app/_refine_context.tsx`.
|
||||
- **Project Structure**:
|
||||
- `src/components/`: Grouped by feature (e.g., `olmap`, `project`) or common UI elements.
|
||||
- `src/lib/`: Utility functions and API helpers.
|
||||
- `src/providers/`: Refine providers (data, etc.).
|
||||
- **Imports**:
|
||||
- Use absolute imports with `@/` alias (e.g., `@/components`, `@/store`, `@/lib`).
|
||||
- _Note_: `@libs` alias in tsconfig points to non-existent `src/libs` folder; prefer `@/lib`.
|
||||
- **Styling**:
|
||||
- Prefer MUI components for standard UI elements.
|
||||
- Use Tailwind utility classes for layout and custom overrides.
|
||||
@@ -0,0 +1,41 @@
|
||||
# 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 components, `camelCase` for variables/functions, and descriptive feature-oriented filenames. 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.
|
||||
@@ -118,6 +118,12 @@ const TOOL_META: Record<string, ToolMeta> = {
|
||||
actionLabel: "定位到地图",
|
||||
color: "#3ba272",
|
||||
},
|
||||
zoom_to_map: {
|
||||
label: "缩放到坐标",
|
||||
icon: <LocationOnRounded sx={{ fontSize: 18 }} />,
|
||||
actionLabel: "缩放到地图",
|
||||
color: "#0ea5e9",
|
||||
},
|
||||
view_history: {
|
||||
label: "查看计算结果",
|
||||
icon: <TimelineRounded sx={{ fontSize: 18 }} />,
|
||||
@@ -176,6 +182,46 @@ function normalizeLocateIds(params: Record<string, unknown>): string[] {
|
||||
return [];
|
||||
}
|
||||
|
||||
function readFiniteNumber(value: unknown): number | null {
|
||||
if (typeof value === "number" && Number.isFinite(value)) {
|
||||
return value;
|
||||
}
|
||||
if (typeof value === "string" && value.trim()) {
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function buildZoomTo3857Action(
|
||||
params: Record<string, unknown>,
|
||||
): Extract<ChatToolAction, { type: "zoom_to_map" }> | null {
|
||||
const rawCoordinate = params.coordinate ?? params.coordinates ?? params.center;
|
||||
const tuple = Array.isArray(rawCoordinate)
|
||||
? rawCoordinate
|
||||
: [params.x ?? params.lon ?? params.longitude, params.y ?? params.lat ?? params.latitude];
|
||||
const x = readFiniteNumber(tuple[0]);
|
||||
const y = readFiniteNumber(tuple[1]);
|
||||
if (x === null || y === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const zoom = readFiniteNumber(params.zoom);
|
||||
const durationMs = readFiniteNumber(params.duration_ms ?? params.durationMs);
|
||||
const rawSourceCrs = params.source_crs ?? params.sourceCrs ?? params.crs;
|
||||
const normalizedSourceCrs =
|
||||
typeof rawSourceCrs === "string" ? rawSourceCrs.trim().toUpperCase() : "";
|
||||
const sourceCrs =
|
||||
normalizedSourceCrs === "EPSG:4326" ? "EPSG:4326" : "EPSG:3857";
|
||||
return {
|
||||
type: "zoom_to_map",
|
||||
coordinate: [x, y],
|
||||
sourceCrs,
|
||||
zoom: zoom ?? undefined,
|
||||
durationMs: durationMs ?? undefined,
|
||||
};
|
||||
}
|
||||
|
||||
function getToolDescription(toolCall: ToolCall): string {
|
||||
const { params } = toolCall;
|
||||
const resolveScadaFeatureInfos = (): [string, string][] => {
|
||||
@@ -281,6 +327,14 @@ function getToolDescription(toolCall: ToolCall): string {
|
||||
case "render_junctions": {
|
||||
return (params.render_ref as string | undefined) ?? "渲染引用";
|
||||
}
|
||||
case "zoom_to_map": {
|
||||
const action = buildZoomTo3857Action(params);
|
||||
if (!action) {
|
||||
return "地图坐标";
|
||||
}
|
||||
const zoom = action.zoom === undefined ? "" : ` · zoom ${action.zoom}`;
|
||||
return `${action.coordinate[0]}, ${action.coordinate[1]} · ${action.sourceCrs}${zoom}`;
|
||||
}
|
||||
case APPLY_LAYER_STYLE_TOOL: {
|
||||
const payload = parseApplyLayerStylePayload(params);
|
||||
return payload ? describeApplyLayerStyle(payload) : "图层样式";
|
||||
@@ -341,6 +395,8 @@ function buildAction(toolCall: ToolCall): ChatToolAction | null {
|
||||
(params.end as string | undefined),
|
||||
});
|
||||
switch (toolCall.tool) {
|
||||
case "zoom_to_map":
|
||||
return buildZoomTo3857Action(params);
|
||||
case "locate_features": {
|
||||
const featureTypeRaw = params.feature_type;
|
||||
const featureType =
|
||||
|
||||
@@ -148,6 +148,46 @@ const compactNames = (names: string[]) => {
|
||||
: names.join(", ");
|
||||
};
|
||||
|
||||
const readFiniteNumber = (value: unknown): number | null => {
|
||||
if (typeof value === "number" && Number.isFinite(value)) {
|
||||
return value;
|
||||
}
|
||||
if (typeof value === "string" && value.trim()) {
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : null;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const parseZoomTo3857Action = (
|
||||
params: Record<string, unknown>,
|
||||
): Extract<ChatToolAction, { type: "zoom_to_map" }> | null => {
|
||||
const rawCoordinate = params.coordinate ?? params.coordinates ?? params.center;
|
||||
const tuple = Array.isArray(rawCoordinate)
|
||||
? rawCoordinate
|
||||
: [params.x ?? params.lon ?? params.longitude, params.y ?? params.lat ?? params.latitude];
|
||||
const x = readFiniteNumber(tuple[0]);
|
||||
const y = readFiniteNumber(tuple[1]);
|
||||
if (x === null || y === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const zoom = readFiniteNumber(params.zoom);
|
||||
const durationMs = readFiniteNumber(params.duration_ms ?? params.durationMs);
|
||||
const rawSourceCrs = params.source_crs ?? params.sourceCrs ?? params.crs;
|
||||
const normalizedSourceCrs =
|
||||
typeof rawSourceCrs === "string" ? rawSourceCrs.trim().toUpperCase() : "";
|
||||
const sourceCrs =
|
||||
normalizedSourceCrs === "EPSG:4326" ? "EPSG:4326" : "EPSG:3857";
|
||||
return {
|
||||
type: "zoom_to_map",
|
||||
coordinate: [x, y],
|
||||
sourceCrs,
|
||||
zoom: zoom ?? undefined,
|
||||
durationMs: durationMs ?? undefined,
|
||||
};
|
||||
};
|
||||
|
||||
const buildLocateArtifact = (
|
||||
tool: string,
|
||||
params: Record<string, unknown>,
|
||||
@@ -190,6 +230,18 @@ const buildToolAction = (
|
||||
};
|
||||
}
|
||||
|
||||
if (tool === "zoom_to_map") {
|
||||
const action = parseZoomTo3857Action(params);
|
||||
return {
|
||||
action,
|
||||
kind: "map",
|
||||
title: "缩放到地图坐标",
|
||||
description: action
|
||||
? `${action.coordinate[0]}, ${action.coordinate[1]} (${action.sourceCrs})`
|
||||
: "地图坐标",
|
||||
};
|
||||
}
|
||||
|
||||
if (tool === "locate_features" || LOCATE_TOOL_CONFIG[tool]) {
|
||||
const locate = buildLocateArtifact(tool, params);
|
||||
return {
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, type Dispatch, type SetStateAction } fr
|
||||
import Feature from "ol/Feature";
|
||||
import { GeoJSON } from "ol/format";
|
||||
import Point from "ol/geom/Point";
|
||||
import { transform } from "ol/proj";
|
||||
import { bbox, featureCollection } from "@turf/turf";
|
||||
|
||||
import { useChatToolActionHandler } from "@/hooks/useChatToolActionHandler";
|
||||
@@ -110,6 +111,18 @@ export const useToolbarChatActions = ({
|
||||
locateFeatures(action.ids, action.layer, action.geometryKind);
|
||||
break;
|
||||
}
|
||||
case "zoom_to_map": {
|
||||
const center =
|
||||
action.sourceCrs === "EPSG:4326"
|
||||
? transform(action.coordinate, "EPSG:4326", "EPSG:3857")
|
||||
: action.coordinate;
|
||||
map?.getView().animate({
|
||||
center,
|
||||
zoom: action.zoom ?? map.getView().getZoom() ?? 18,
|
||||
duration: action.durationMs ?? 1000,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "view_history": {
|
||||
setChatPanelFeatureInfos(action.featureInfos);
|
||||
setChatPanelType(action.dataType);
|
||||
|
||||
@@ -15,6 +15,13 @@ export type ChatToolAction =
|
||||
layer: string;
|
||||
geometryKind: "point" | "line";
|
||||
}
|
||||
| {
|
||||
type: "zoom_to_map";
|
||||
coordinate: [number, number];
|
||||
sourceCrs?: "EPSG:3857" | "EPSG:4326";
|
||||
zoom?: number;
|
||||
durationMs?: number;
|
||||
}
|
||||
| {
|
||||
type: "view_history";
|
||||
featureInfos: [string, string][];
|
||||
|
||||
Reference in New Issue
Block a user