feat: enhance query view with fullscreen toggle and details management
- Added fullscreen toggle functionality to the QueryView component. - Introduced new icons for maximizing and minimizing the view. - Updated the QueryView component to handle details display with tab management. - Refactored the store to manage details data and active tabs. - Improved the handling of view data in the studio, including filtering unnecessary fields. - Created new routes for ID and console views, integrating them into the routing structure. - Added dynamic basename calculation based on the current URL path. - Enhanced the query module to utilize context keys for better state management. - Updated the UI components for better user experience and accessibility.
This commit is contained in:
43
pnpm-lock.yaml
generated
43
pnpm-lock.yaml
generated
@@ -24,8 +24,8 @@ importers:
|
||||
specifier: ^1.2.0
|
||||
version: 1.2.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
'@kevisual/router':
|
||||
specifier: 0.0.74
|
||||
version: 0.0.74
|
||||
specifier: 0.0.76
|
||||
version: 0.0.76
|
||||
'@tanstack/react-router':
|
||||
specifier: ^1.160.2
|
||||
version: 1.160.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
@@ -86,13 +86,16 @@ importers:
|
||||
valtio:
|
||||
specifier: ^2.3.0
|
||||
version: 2.3.0(@types/react@19.2.14)(react@19.2.4)
|
||||
zod:
|
||||
specifier: ^4.3.6
|
||||
version: 4.3.6
|
||||
zustand:
|
||||
specifier: ^5.0.11
|
||||
version: 5.0.11(@types/react@19.2.14)(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
|
||||
devDependencies:
|
||||
'@kevisual/api':
|
||||
specifier: ^0.0.51
|
||||
version: 0.0.51(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
|
||||
specifier: ^0.0.52
|
||||
version: 0.0.52(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
|
||||
'@kevisual/context':
|
||||
specifier: ^0.0.6
|
||||
version: 0.0.6
|
||||
@@ -100,8 +103,8 @@ importers:
|
||||
specifier: ^0.0.5
|
||||
version: 0.0.5
|
||||
'@kevisual/query':
|
||||
specifier: ^0.0.46
|
||||
version: 0.0.46
|
||||
specifier: ^0.0.47
|
||||
version: 0.0.47
|
||||
'@kevisual/types':
|
||||
specifier: ^0.0.12
|
||||
version: 0.0.12
|
||||
@@ -112,8 +115,8 @@ importers:
|
||||
specifier: ^1.160.2
|
||||
version: 1.160.2(@tanstack/react-router@1.160.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@tanstack/router-core@1.160.0)(csstype@3.2.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
'@tanstack/router-plugin':
|
||||
specifier: ^1.160.2
|
||||
version: 1.160.2(@tanstack/react-router@1.160.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.0-beta.14(@types/node@25.2.3)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0))
|
||||
specifier: ^1.161.0
|
||||
version: 1.161.0(@tanstack/react-router@1.160.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.0-beta.14(@types/node@25.2.3)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0))
|
||||
'@types/node':
|
||||
specifier: ^25.2.3
|
||||
version: 25.2.3
|
||||
@@ -504,8 +507,8 @@ packages:
|
||||
'@jridgewell/trace-mapping@0.3.31':
|
||||
resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
|
||||
|
||||
'@kevisual/api@0.0.51':
|
||||
resolution: {integrity: sha512-uQzAhcJlJqIjBZ5wHBnDPsKf0/JYRKP7p3eS6TGn/Um4bvJ/AI0mP5QtJson/VcdJOFFwORiF3CJQ1ifm/Cadw==}
|
||||
'@kevisual/api@0.0.52':
|
||||
resolution: {integrity: sha512-xWajr5lPqBpAwyWseXqE25tNiD/GUZcFdcQJB/oRtObjRa3rog1/U/otV098WZUZVYPGGeAMriKSd3MFdPFcjQ==}
|
||||
|
||||
'@kevisual/context@0.0.6':
|
||||
resolution: {integrity: sha512-w7HBOuO3JH37n6xT6W3FD7ykqHTwtyxOQzTzfEcKDCbsvGB1wVreSxFm2bvoFnnFLuxT/5QMpKlnPrwvmcTGnw==}
|
||||
@@ -516,11 +519,11 @@ packages:
|
||||
'@kevisual/load@0.0.6':
|
||||
resolution: {integrity: sha512-+3YTFehRcZ1haGel5DKYMUwmi5i6f2psyaPZlfkKU/cOXgkpwoG9/BEqPCnPjicKqqnksEpixVRkyHJ+5bjLVA==}
|
||||
|
||||
'@kevisual/query@0.0.46':
|
||||
resolution: {integrity: sha512-JwHV16ehk8JWM5wiWW5kz9yTg4HrOmmnci5QvwQYdhXYXDzGpUrOxeoz3wloMs4kX3bkowz97iLLW6uQdgUoTw==}
|
||||
'@kevisual/query@0.0.47':
|
||||
resolution: {integrity: sha512-ZR7WXeDDGUSzBtcGVU3J173sA0hCqrGTw5ybGbdNGlM0VyJV/XQIovCcSoZh1YpnciLRRqJvzXUgTnCkam+M3g==}
|
||||
|
||||
'@kevisual/router@0.0.74':
|
||||
resolution: {integrity: sha512-J8qDsvrpf317H0Gq9YkeGwI+GS23RC0q/mYbKOia8wF33ylz+pDhBN8T1KmXx90AVBt/tMGNVJRgEhTVdTgpvA==}
|
||||
'@kevisual/router@0.0.76':
|
||||
resolution: {integrity: sha512-9Ut1kvo/GjXnUUaZETqJ04NYzTMl4BXerJZrcfGnA34nlcwniSm8QvveXXRTlyfLSiXVUZPZcf57IgalD29miQ==}
|
||||
|
||||
'@kevisual/types@0.0.12':
|
||||
resolution: {integrity: sha512-zJXH2dosir3jVrQ6QG4i0+iLQeT9gJ3H+cKXs8ReWboxBSYzUZO78XssVeVrFPsJ33iaAqo4q3DWbSS1dWGn7Q==}
|
||||
@@ -1254,8 +1257,8 @@ packages:
|
||||
resolution: {integrity: sha512-De6TicInwy3/9rQ++RZAyFOvB2oi5UV5T0iiIlxe3jgiOLFxMA4EKKVlT+alDxKnq6udTLam9xqhvGOVZ6a2hw==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
'@tanstack/router-plugin@1.160.2':
|
||||
resolution: {integrity: sha512-+uyjLK4hImFyENb08PwDfvnKpwfdjCA29sKrHRk/ff9H23RUm10MW0UMjIrVU+4Dql/xsbzsqrTwIyRS6zna9Q==}
|
||||
'@tanstack/router-plugin@1.161.0':
|
||||
resolution: {integrity: sha512-E0JGeMdKGYYMMjOEiM+330nIs0PG3nE/9KyU+7+SV54hDf4Xdt6BC3J9pDj1qA3oNqI5DwwTsG7GBA+7m47O4A==}
|
||||
engines: {node: '>=12'}
|
||||
peerDependencies:
|
||||
'@rsbuild/core': '>=1.0.2'
|
||||
@@ -2848,7 +2851,7 @@ snapshots:
|
||||
'@jridgewell/resolve-uri': 3.1.2
|
||||
'@jridgewell/sourcemap-codec': 1.5.5
|
||||
|
||||
'@kevisual/api@0.0.51(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))':
|
||||
'@kevisual/api@0.0.52(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))':
|
||||
dependencies:
|
||||
'@kevisual/context': 0.0.6
|
||||
'@kevisual/js-filter': 0.0.5
|
||||
@@ -2877,9 +2880,9 @@ snapshots:
|
||||
dependencies:
|
||||
eventemitter3: 5.0.4
|
||||
|
||||
'@kevisual/query@0.0.46': {}
|
||||
'@kevisual/query@0.0.47': {}
|
||||
|
||||
'@kevisual/router@0.0.74':
|
||||
'@kevisual/router@0.0.76':
|
||||
dependencies:
|
||||
es-toolkit: 1.44.0
|
||||
|
||||
@@ -3592,7 +3595,7 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@tanstack/router-plugin@1.160.2(@tanstack/react-router@1.160.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.0-beta.14(@types/node@25.2.3)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0))':
|
||||
'@tanstack/router-plugin@1.161.0(@tanstack/react-router@1.160.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.0-beta.14(@types/node@25.2.3)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0))':
|
||||
dependencies:
|
||||
'@babel/core': 7.29.0
|
||||
'@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
packages:
|
||||
- web
|
||||
- web-v2
|
||||
@@ -45,4 +45,11 @@ pages/page-app/
|
||||
- **react-hook-form**: 表单处理
|
||||
- **sonner**: Toast 通知
|
||||
- **zustand**: 状态管理
|
||||
- **tailwindcss v4**: 使用 @tailwindcss/vite 插件进行样式处理
|
||||
- **tailwindcss v4**: 使用 @tailwindcss/vite 插件进行样式处理
|
||||
|
||||
## 主题系统
|
||||
|
||||
- **主题配色**: 采用黑白配色方案，提供简洁优雅的视觉体验
|
||||
- **主题模式**: 支持 light（浅色）和 dark（深色）模式切换
|
||||
- **主题实现**: 使用 `next-themes` 进行主题管理
|
||||
- **CSS 变量**: 主题相关的 CSS 变量定义在 `src/styles/theme.css` 中
|
||||
46
web/bun.lock
46
web/bun.lock
@@ -6,8 +6,8 @@
|
||||
"name": "@kevisual/router-studio",
|
||||
"dependencies": {
|
||||
"@base-ui/react": "^1.2.0",
|
||||
"@kevisual/router": "0.0.75",
|
||||
"@tanstack/react-router": "^1.160.2",
|
||||
"@kevisual/router": "0.0.80",
|
||||
"@tanstack/react-router": "^1.161.1",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"@uiw/react-md-editor": "^4.0.11",
|
||||
"antd": "^6.3.0",
|
||||
@@ -15,6 +15,7 @@
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
"dayjs": "^1.11.19",
|
||||
"eruda": "^3.4.3",
|
||||
"es-toolkit": "^1.44.0",
|
||||
"fuse.js": "^7.1.0",
|
||||
"idb-keyval": "^6.2.2",
|
||||
@@ -27,17 +28,18 @@
|
||||
"react-resizable-panels": "^4.6.4",
|
||||
"sonner": "^2.0.7",
|
||||
"valtio": "^2.3.0",
|
||||
"zod": "^4.3.6",
|
||||
"zustand": "^5.0.11",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@kevisual/api": "^0.0.51",
|
||||
"@kevisual/context": "^0.0.6",
|
||||
"@kevisual/api": "^0.0.52",
|
||||
"@kevisual/context": "^0.0.8",
|
||||
"@kevisual/js-filter": "^0.0.5",
|
||||
"@kevisual/query": "^0.0.47",
|
||||
"@kevisual/query": "^0.0.49",
|
||||
"@kevisual/types": "^0.0.12",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@tanstack/react-router-devtools": "^1.160.2",
|
||||
"@tanstack/router-plugin": "^1.160.2",
|
||||
"@tanstack/react-router-devtools": "^1.161.1",
|
||||
"@tanstack/router-plugin": "^1.161.1",
|
||||
"@types/node": "^25.2.3",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
@@ -194,17 +196,17 @@
|
||||
|
||||
"@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
|
||||
|
||||
"@kevisual/api": ["@kevisual/api@0.0.51", "", { "dependencies": { "@kevisual/context": "^0.0.6", "@kevisual/js-filter": "^0.0.5", "@kevisual/load": "^0.0.6", "@paralleldrive/cuid2": "^3.3.0", "es-toolkit": "^1.44.0", "eventemitter3": "^5.0.4", "fuse.js": "^7.1.0", "nanoid": "^5.1.6", "path-browserify-esm": "^1.0.6", "sonner": "^2.0.7", "spark-md5": "^3.0.2", "zustand": "^5.0.11" } }, "sha512-uQzAhcJlJqIjBZ5wHBnDPsKf0/JYRKP7p3eS6TGn/Um4bvJ/AI0mP5QtJson/VcdJOFFwORiF3CJQ1ifm/Cadw=="],
|
||||
"@kevisual/api": ["@kevisual/api@0.0.52", "", { "dependencies": { "@kevisual/context": "^0.0.6", "@kevisual/js-filter": "^0.0.5", "@kevisual/load": "^0.0.6", "@paralleldrive/cuid2": "^3.3.0", "es-toolkit": "^1.44.0", "eventemitter3": "^5.0.4", "fuse.js": "^7.1.0", "nanoid": "^5.1.6", "path-browserify-esm": "^1.0.6", "sonner": "^2.0.7", "spark-md5": "^3.0.2", "zustand": "^5.0.11" } }, "sha512-xWajr5lPqBpAwyWseXqE25tNiD/GUZcFdcQJB/oRtObjRa3rog1/U/otV098WZUZVYPGGeAMriKSd3MFdPFcjQ=="],
|
||||
|
||||
"@kevisual/context": ["@kevisual/context@0.0.6", "", {}, "sha512-w7HBOuO3JH37n6xT6W3FD7ykqHTwtyxOQzTzfEcKDCbsvGB1wVreSxFm2bvoFnnFLuxT/5QMpKlnPrwvmcTGnw=="],
|
||||
"@kevisual/context": ["@kevisual/context@0.0.8", "", {}, "sha512-DTJpyHI34NE76B7g6f+QlIqiCCyqI2qkBMQE736dzeRDGxOjnbe2iQY9W+Rt2PE6kmymM3qyOmSfNovyWyWrkA=="],
|
||||
|
||||
"@kevisual/js-filter": ["@kevisual/js-filter@0.0.5", "", {}, "sha512-+S+Sf3K/aP6XtZI2s7TgKOr35UuvUvtpJ9YDW30a+mY0/N8gRuzyKhieBzQN7Ykayzz70uoMavBXut2rUlLgzw=="],
|
||||
|
||||
"@kevisual/load": ["@kevisual/load@0.0.6", "", { "dependencies": { "eventemitter3": "^5.0.1" } }, "sha512-+3YTFehRcZ1haGel5DKYMUwmi5i6f2psyaPZlfkKU/cOXgkpwoG9/BEqPCnPjicKqqnksEpixVRkyHJ+5bjLVA=="],
|
||||
|
||||
"@kevisual/query": ["@kevisual/query@0.0.47", "", {}, "sha512-ZR7WXeDDGUSzBtcGVU3J173sA0hCqrGTw5ybGbdNGlM0VyJV/XQIovCcSoZh1YpnciLRRqJvzXUgTnCkam+M3g=="],
|
||||
"@kevisual/query": ["@kevisual/query@0.0.49", "", {}, "sha512-GrWW+QlBO5lkiqvb7PjOstNtpTQVSR74EHHWjm7YoL9UdT1wuPQXGUApZHmMBSh3NIWCf0AL2G1hPWZMC7YeOQ=="],
|
||||
|
||||
"@kevisual/router": ["@kevisual/router@0.0.75", "", { "dependencies": { "es-toolkit": "^1.44.0" } }, "sha512-WBDRKMjNYTP7ymkUUtiQwWYIcqnc+TGo3rFuRze8ovYV2UN5cQxIkIfsDbgWOdV1/v9b57gtiJvJRqWjCBWKRg=="],
|
||||
"@kevisual/router": ["@kevisual/router@0.0.80", "", { "dependencies": { "es-toolkit": "^1.44.0" } }, "sha512-rVwi6Yf411bnNm2x94lMm+s4Csw0Yb7u/aj+VJJ59iouAYhjLuL7Rs1EcARhnQf47cegBJi6zozfGHgLsLHN2w=="],
|
||||
|
||||
"@kevisual/types": ["@kevisual/types@0.0.12", "", {}, "sha512-zJXH2dosir3jVrQ6QG4i0+iLQeT9gJ3H+cKXs8ReWboxBSYzUZO78XssVeVrFPsJ33iaAqo4q3DWbSS1dWGn7Q=="],
|
||||
|
||||
@@ -398,21 +400,21 @@
|
||||
|
||||
"@tanstack/history": ["@tanstack/history@1.154.14", "", {}, "sha512-xyIfof8eHBuub1CkBnbKNKQXeRZC4dClhmzePHVOEel4G7lk/dW+TQ16da7CFdeNLv6u6Owf5VoBQxoo6DFTSA=="],
|
||||
|
||||
"@tanstack/react-router": ["@tanstack/react-router@1.160.2", "", { "dependencies": { "@tanstack/history": "1.154.14", "@tanstack/react-store": "^0.8.0", "@tanstack/router-core": "1.160.0", "isbot": "^5.1.22", "tiny-invariant": "^1.3.3", "tiny-warning": "^1.0.3" }, "peerDependencies": { "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" } }, "sha512-EJWAMS4qCfWKNCzzYGy6ZuWTdBATYEEWieaQdmM7zUesyOQ01j7o6aKXdmCp9rWuSKjPHXagWubEnEo+Puhi3w=="],
|
||||
"@tanstack/react-router": ["@tanstack/react-router@1.161.1", "", { "dependencies": { "@tanstack/history": "1.154.14", "@tanstack/react-store": "^0.8.0", "@tanstack/router-core": "1.161.1", "isbot": "^5.1.22", "tiny-invariant": "^1.3.3", "tiny-warning": "^1.0.3" }, "peerDependencies": { "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" } }, "sha512-RQlCaunj+sleC8/JLxd22sWNpwqTHftcRdwGwNF27tjEzTnj06C6azWmA5sGclTdxGVclEOc/eaW7bUv5klsNw=="],
|
||||
|
||||
"@tanstack/react-router-devtools": ["@tanstack/react-router-devtools@1.160.2", "", { "dependencies": { "@tanstack/router-devtools-core": "1.160.0" }, "peerDependencies": { "@tanstack/react-router": "^1.160.2", "@tanstack/router-core": "^1.160.0", "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" }, "optionalPeers": ["@tanstack/router-core"] }, "sha512-uSdQD77S+LcANCiWcLsrqSxyEqTXdZhBETbciKcYJrcgd8rfkxg6AIewYi7148QPU6gb3VKQbeRlqXmBeEs5dg=="],
|
||||
"@tanstack/react-router-devtools": ["@tanstack/react-router-devtools@1.161.1", "", { "dependencies": { "@tanstack/router-devtools-core": "1.161.1" }, "peerDependencies": { "@tanstack/react-router": "^1.161.1", "@tanstack/router-core": "^1.161.1", "react": ">=18.0.0 || >=19.0.0", "react-dom": ">=18.0.0 || >=19.0.0" }, "optionalPeers": ["@tanstack/router-core"] }, "sha512-fl+o760gCHbd4Nb64SpVJQjpe77xDh2Mx6NqZy0aKACXvWRd8CDcFPzSvDZu4s7tHqFKMfzXqhNzL/jT+A8Prg=="],
|
||||
|
||||
"@tanstack/react-store": ["@tanstack/react-store@0.8.1", "", { "dependencies": { "@tanstack/store": "0.8.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-XItJt+rG8c5Wn/2L/bnxys85rBpm0BfMbhb4zmPVLXAKY9POrp1xd6IbU4PKoOI+jSEGc3vntPRfLGSgXfE2Ig=="],
|
||||
|
||||
"@tanstack/react-table": ["@tanstack/react-table@8.21.3", "", { "dependencies": { "@tanstack/table-core": "8.21.3" }, "peerDependencies": { "react": ">=16.8", "react-dom": ">=16.8" } }, "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww=="],
|
||||
|
||||
"@tanstack/router-core": ["@tanstack/router-core@1.160.0", "", { "dependencies": { "@tanstack/history": "1.154.14", "@tanstack/store": "^0.8.0", "cookie-es": "^2.0.0", "seroval": "^1.4.2", "seroval-plugins": "^1.4.2", "tiny-invariant": "^1.3.3", "tiny-warning": "^1.0.3" } }, "sha512-vbh6OsE0MG+0c+SKh2uk5yEEZlWsxT96Ub2JaTs7ixOvZp3Wu9PTEIe2BA3cShNZhEsDI0Le4NqgY4XIaHLLvA=="],
|
||||
"@tanstack/router-core": ["@tanstack/router-core@1.161.1", "", { "dependencies": { "@tanstack/history": "1.154.14", "@tanstack/store": "^0.8.0", "cookie-es": "^2.0.0", "seroval": "^1.4.2", "seroval-plugins": "^1.4.2", "tiny-invariant": "^1.3.3", "tiny-warning": "^1.0.3" } }, "sha512-Ika9RBvxB5cE+ziLxq90rqwhl9sb+j6mlGkRDwuDaGSDODenFeCDzjE0YQlgQ/kBUdSK2K1fFBiQPy5cnl54Og=="],
|
||||
|
||||
"@tanstack/router-devtools-core": ["@tanstack/router-devtools-core@1.160.0", "", { "dependencies": { "clsx": "^2.1.1", "goober": "^2.1.16", "tiny-invariant": "^1.3.3" }, "peerDependencies": { "@tanstack/router-core": "^1.160.0", "csstype": "^3.0.10" }, "optionalPeers": ["csstype"] }, "sha512-P/l0GVd0qmDbskg8/UbkOrCxuFz0t69BCxv2j4+8Xfy8AcqnFtoR1LChKgYyxGPy9sWOxktAneFdy1xA3X/Q6A=="],
|
||||
"@tanstack/router-devtools-core": ["@tanstack/router-devtools-core@1.161.1", "", { "dependencies": { "clsx": "^2.1.1", "goober": "^2.1.16", "tiny-invariant": "^1.3.3" }, "peerDependencies": { "@tanstack/router-core": "^1.161.1", "csstype": "^3.0.10" }, "optionalPeers": ["csstype"] }, "sha512-I3BcTUD2D8l1sKkab4JJM5LHwwWX5sDCbbhD+MGWplycIujzaW7xADbOnwLpeDjtJarc8kY20cUQ2NJ2eaX9kw=="],
|
||||
|
||||
"@tanstack/router-generator": ["@tanstack/router-generator@1.160.1", "", { "dependencies": { "@tanstack/router-core": "1.160.0", "@tanstack/router-utils": "1.158.0", "@tanstack/virtual-file-routes": "1.154.7", "prettier": "^3.5.0", "recast": "^0.23.11", "source-map": "^0.7.4", "tsx": "^4.19.2", "zod": "^3.24.2" } }, "sha512-De6TicInwy3/9rQ++RZAyFOvB2oi5UV5T0iiIlxe3jgiOLFxMA4EKKVlT+alDxKnq6udTLam9xqhvGOVZ6a2hw=="],
|
||||
"@tanstack/router-generator": ["@tanstack/router-generator@1.161.1", "", { "dependencies": { "@tanstack/router-core": "1.161.1", "@tanstack/router-utils": "1.158.0", "@tanstack/virtual-file-routes": "1.154.7", "prettier": "^3.5.0", "recast": "^0.23.11", "source-map": "^0.7.4", "tsx": "^4.19.2", "zod": "^3.24.2" } }, "sha512-IvkjrSaqr3WzYDUjdXOug1x5MhJT5Pw+hKkAi+GDA4isaBjyXS71QmY3jhsZZ2Rz08Xjw2JkAoIJCxfqw6AQKw=="],
|
||||
|
||||
"@tanstack/router-plugin": ["@tanstack/router-plugin@1.160.2", "", { "dependencies": { "@babel/core": "^7.28.5", "@babel/plugin-syntax-jsx": "^7.27.1", "@babel/plugin-syntax-typescript": "^7.27.1", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.5", "@babel/types": "^7.28.5", "@tanstack/router-core": "1.160.0", "@tanstack/router-generator": "1.160.1", "@tanstack/router-utils": "1.158.0", "@tanstack/virtual-file-routes": "1.154.7", "chokidar": "^3.6.0", "unplugin": "^2.1.2", "zod": "^3.24.2" }, "peerDependencies": { "@rsbuild/core": ">=1.0.2", "@tanstack/react-router": "^1.160.2", "vite": ">=5.0.0 || >=6.0.0 || >=7.0.0", "vite-plugin-solid": "^2.11.10", "webpack": ">=5.92.0" }, "optionalPeers": ["@rsbuild/core", "@tanstack/react-router", "vite", "vite-plugin-solid", "webpack"] }, "sha512-+uyjLK4hImFyENb08PwDfvnKpwfdjCA29sKrHRk/ff9H23RUm10MW0UMjIrVU+4Dql/xsbzsqrTwIyRS6zna9Q=="],
|
||||
"@tanstack/router-plugin": ["@tanstack/router-plugin@1.161.1", "", { "dependencies": { "@babel/core": "^7.28.5", "@babel/plugin-syntax-jsx": "^7.27.1", "@babel/plugin-syntax-typescript": "^7.27.1", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.5", "@babel/types": "^7.28.5", "@tanstack/router-core": "1.161.1", "@tanstack/router-generator": "1.161.1", "@tanstack/router-utils": "1.158.0", "@tanstack/virtual-file-routes": "1.154.7", "chokidar": "^3.6.0", "unplugin": "^2.1.2", "zod": "^3.24.2" }, "peerDependencies": { "@rsbuild/core": ">=1.0.2", "@tanstack/react-router": "^1.161.1", "vite": ">=5.0.0 || >=6.0.0 || >=7.0.0", "vite-plugin-solid": "^2.11.10", "webpack": ">=5.92.0" }, "optionalPeers": ["@rsbuild/core", "@tanstack/react-router", "vite", "vite-plugin-solid", "webpack"] }, "sha512-1veqinPZRJMWJSgKljk3XF6l9PaDRRqnc2FMEGBRJ5ycmDqvzCP4RaKbA5pfE/DbXHkKF5Z7BiAeateZHgm4jA=="],
|
||||
|
||||
"@tanstack/router-utils": ["@tanstack/router-utils@1.158.0", "", { "dependencies": { "@babel/core": "^7.28.5", "@babel/generator": "^7.28.5", "@babel/parser": "^7.28.5", "@babel/types": "^7.28.5", "ansis": "^4.1.0", "babel-dead-code-elimination": "^1.0.12", "diff": "^8.0.2", "pathe": "^2.0.3", "tinyglobby": "^0.2.15" } }, "sha512-qZ76eaLKU6Ae9iI/mc5zizBX149DXXZkBVVO3/QRIll79uKLJZHQlMKR++2ba7JsciBWz1pgpIBcCJPE9S0LVg=="],
|
||||
|
||||
@@ -554,6 +556,8 @@
|
||||
|
||||
"error-causes": ["error-causes@3.0.2", "", {}, "sha512-i0B8zq1dHL6mM85FGoxaJnVtx6LD5nL2v0hlpGdntg5FOSyzQ46c9lmz5qx0xRS2+PWHGOHcYxGIBC5Le2dRMw=="],
|
||||
|
||||
"eruda": ["eruda@3.4.3", "", {}, "sha512-J2TsF4dXSspOXev5bJ6mljv0dRrxj21wklrDzbvPmYaEmVoC+2psylyRi70nUPFh1mTQfIBsSusUtAMZtUN+/w=="],
|
||||
|
||||
"es-toolkit": ["es-toolkit@1.44.0", "", {}, "sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg=="],
|
||||
|
||||
"esbuild": ["esbuild@0.27.3", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.3", "@esbuild/android-arm": "0.27.3", "@esbuild/android-arm64": "0.27.3", "@esbuild/android-x64": "0.27.3", "@esbuild/darwin-arm64": "0.27.3", "@esbuild/darwin-x64": "0.27.3", "@esbuild/freebsd-arm64": "0.27.3", "@esbuild/freebsd-x64": "0.27.3", "@esbuild/linux-arm": "0.27.3", "@esbuild/linux-arm64": "0.27.3", "@esbuild/linux-ia32": "0.27.3", "@esbuild/linux-loong64": "0.27.3", "@esbuild/linux-mips64el": "0.27.3", "@esbuild/linux-ppc64": "0.27.3", "@esbuild/linux-riscv64": "0.27.3", "@esbuild/linux-s390x": "0.27.3", "@esbuild/linux-x64": "0.27.3", "@esbuild/netbsd-arm64": "0.27.3", "@esbuild/netbsd-x64": "0.27.3", "@esbuild/openbsd-arm64": "0.27.3", "@esbuild/openbsd-x64": "0.27.3", "@esbuild/openharmony-arm64": "0.27.3", "@esbuild/sunos-x64": "0.27.3", "@esbuild/win32-arm64": "0.27.3", "@esbuild/win32-ia32": "0.27.3", "@esbuild/win32-x64": "0.27.3" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg=="],
|
||||
@@ -978,12 +982,14 @@
|
||||
|
||||
"yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
|
||||
|
||||
"zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
|
||||
"zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
|
||||
|
||||
"zustand": ["zustand@5.0.11", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg=="],
|
||||
|
||||
"zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
|
||||
|
||||
"@kevisual/api/@kevisual/context": ["@kevisual/context@0.0.6", "", {}, "sha512-w7HBOuO3JH37n6xT6W3FD7ykqHTwtyxOQzTzfEcKDCbsvGB1wVreSxFm2bvoFnnFLuxT/5QMpKlnPrwvmcTGnw=="],
|
||||
|
||||
"@radix-ui/react-dialog/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
|
||||
|
||||
"@radix-ui/react-dismissable-layer/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
|
||||
@@ -1008,6 +1014,10 @@
|
||||
|
||||
"@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
|
||||
|
||||
"@tanstack/router-generator/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
|
||||
|
||||
"@tanstack/router-plugin/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
|
||||
|
||||
"@uiw/react-markdown-preview/rehype-prism-plus": ["rehype-prism-plus@2.0.0", "", { "dependencies": { "hast-util-to-string": "^3.0.0", "parse-numeric-range": "^1.3.0", "refractor": "^4.8.0", "rehype-parse": "^9.0.0", "unist-util-filter": "^5.0.0", "unist-util-visit": "^5.0.0" } }, "sha512-FeM/9V2N7EvDZVdR2dqhAzlw5YI49m9Tgn7ZrYJeYHIahM6gcXpH0K1y2gNnKanZCydOMluJvX2cB9z3lhY8XQ=="],
|
||||
|
||||
"anymatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@base-ui/react": "^1.2.0",
|
||||
"@kevisual/router": "0.0.75",
|
||||
"@tanstack/react-router": "^1.160.2",
|
||||
"@kevisual/router": "0.0.80",
|
||||
"@tanstack/react-router": "^1.161.1",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"@uiw/react-md-editor": "^4.0.11",
|
||||
"antd": "^6.3.0",
|
||||
@@ -23,6 +23,7 @@
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
"dayjs": "^1.11.19",
|
||||
"eruda": "^3.4.3",
|
||||
"es-toolkit": "^1.44.0",
|
||||
"fuse.js": "^7.1.0",
|
||||
"idb-keyval": "^6.2.2",
|
||||
@@ -35,17 +36,18 @@
|
||||
"react-resizable-panels": "^4.6.4",
|
||||
"sonner": "^2.0.7",
|
||||
"valtio": "^2.3.0",
|
||||
"zod": "^4.3.6",
|
||||
"zustand": "^5.0.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@kevisual/api": "^0.0.51",
|
||||
"@kevisual/context": "^0.0.6",
|
||||
"@kevisual/api": "^0.0.52",
|
||||
"@kevisual/context": "^0.0.8",
|
||||
"@kevisual/js-filter": "^0.0.5",
|
||||
"@kevisual/query": "^0.0.47",
|
||||
"@kevisual/query": "^0.0.49",
|
||||
"@kevisual/types": "^0.0.12",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@tanstack/react-router-devtools": "^1.160.2",
|
||||
"@tanstack/router-plugin": "^1.160.2",
|
||||
"@tanstack/react-router-devtools": "^1.161.1",
|
||||
"@tanstack/router-plugin": "^1.161.1",
|
||||
"@types/node": "^25.2.3",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
|
||||
7
web/src/app/id/page.tsx
Normal file
7
web/src/app/id/page.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function IdPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1>V1 ID Page</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,151 +1,589 @@
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { useQueryViewStore } from '../store';
|
||||
import { DetailsTab, useQueryViewStore } from '../store';
|
||||
import { useShallow } from 'zustand/shallow';
|
||||
import { useStudioStore } from '@/app/studio/store';
|
||||
import { useState } from 'react';
|
||||
import { useStudioStore, filterRouteInfo, getPayload } from '@/app/studio/store';
|
||||
import { QueryView } from '..';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { pickRouterViewData, RouterViewData, RouterViewItem } from '@kevisual/api/proxy';
|
||||
import { RouteInfo, fromJSONSchema } from '@kevisual/router/browser';
|
||||
import { pick } from 'es-toolkit';
|
||||
import { toast } from 'sonner';
|
||||
import { Play } from 'lucide-react';
|
||||
// 视图信息表格组件
|
||||
export const ViewInfoTable = ({ currentView }: { currentView?: RouterViewData }) => {
|
||||
|
||||
if (!currentView || !currentView.views || currentView.views.length === 0) {
|
||||
return (
|
||||
<div className="text-sm text-gray-500 text-center py-8">
|
||||
当前视图没有子视图信息
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 当前选中的视图 ID */}
|
||||
{currentView.viewId && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">当前视图 ID</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{currentView.viewId}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Link */}
|
||||
{currentView.link && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">链接</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md break-all">
|
||||
{currentView.link}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Summary */}
|
||||
{currentView.summary && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">摘要</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{currentView.summary}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tags */}
|
||||
{currentView.tags && currentView.tags.length > 0 && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">标签</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{currentView.tags.map((tag: string, index: number) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-2 py-1 text-xs bg-gray-900 text-white rounded-md"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
{currentView.title && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">标题</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{currentView.title}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{currentView.description && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">描述</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md whitespace-pre-wrap">
|
||||
{currentView.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 子视图列表表格 */}
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-2">视图列表</label>
|
||||
<div className="border border-gray-300 rounded-md overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-100 border-b border-gray-300">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-700">ID</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-700">标题</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-700">查询</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentView.views.map((view: any, index: number) => {
|
||||
const isSelected = view.id === currentView.viewId;
|
||||
return (
|
||||
<tr
|
||||
key={view.id || index}
|
||||
className={`border-b border-gray-200 transition-colors ${isSelected
|
||||
? 'bg-gray-500 hover:bg-gray-900'
|
||||
: index % 2 === 0
|
||||
? 'bg-white hover:bg-gray-50'
|
||||
: 'bg-gray-50 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
<td className={`px-4 py-2 text-sm ${isSelected ? 'text-white font-semibold' : 'text-gray-900'}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
{view.id || '-'}
|
||||
{isSelected && (
|
||||
<span className="px-2 py-0.5 text-xs bg-white text-gray-900 rounded-full font-medium">
|
||||
当前
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className={`px-4 py-2 text-sm ${isSelected ? 'text-white' : 'text-gray-900'}`}>{view.title || '-'}</td>
|
||||
<td className={`px-4 py-2 text-sm font-mono ${isSelected ? 'text-gray-200' : 'text-gray-600'}`}>
|
||||
{view.query || '-'}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const DetailsInfoPanel = ({ detailsData }: { detailsData: RouterViewItem | null }) => {
|
||||
const queryViewStore = useQueryViewStore(useShallow((state) => ({
|
||||
editing: state.editing,
|
||||
setEditing: state.setEditing,
|
||||
setDetailsData: state.setDetailsData,
|
||||
setDetailsActiveTab: state.setDetailsActiveTab
|
||||
})));
|
||||
const studioStore = useStudioStore(useShallow((state) => ({
|
||||
queryProxy: state.queryProxy,
|
||||
})));
|
||||
if (!detailsData) {
|
||||
return (
|
||||
<div className="text-sm text-gray-500 text-center py-8">
|
||||
无法获取详情信息
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const [action, setAction] = useState(detailsData.action ? JSON.stringify(detailsData.action, null, 2) : '');
|
||||
const otherFilds = useMemo(() => {
|
||||
const { type } = detailsData;
|
||||
if (type === 'api') {
|
||||
{/* 其他字段 */ }
|
||||
return <>{
|
||||
detailsData.api && (
|
||||
<div className="border-b border-gray-200 pb-3 w-full scrollbar">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">API</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs w-full">
|
||||
{JSON.stringify(detailsData.api, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
}
|
||||
if (type === 'context') {
|
||||
return <>{
|
||||
detailsData.context && (
|
||||
<div className="border-b border-gray-200 pb-3 w-full scrollbar">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">上下文</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs w-full">
|
||||
{JSON.stringify(detailsData.context, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
}
|
||||
if (type === 'page') {
|
||||
return <>{
|
||||
detailsData.page && (
|
||||
<div className="border-b border-gray-200 pb-3 w-full scrollbar">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">页面信息</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs w-full">
|
||||
{JSON.stringify(detailsData.page, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
}
|
||||
return null;
|
||||
}, [detailsData]);
|
||||
const onRun = useCallback(async () => {
|
||||
let _action = detailsData?.action;
|
||||
const isEditing = queryViewStore.editing;
|
||||
if (isEditing) {
|
||||
try {
|
||||
_action = JSON.parse(action as string);
|
||||
} catch (error) {
|
||||
toast.error('操作信息必须是合法的 JSON 格式');
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
if (!_action) {
|
||||
toast.error('没有操作信息可供执行');
|
||||
return;
|
||||
}
|
||||
if (!studioStore.queryProxy) {
|
||||
toast.error('没有可用的查询代理，无法执行操作');
|
||||
return;
|
||||
}
|
||||
const payload = getPayload(_action as any);
|
||||
const res = await studioStore.queryProxy.run({
|
||||
..._action,
|
||||
// @ts-ignore
|
||||
payload,
|
||||
})
|
||||
console.log('执行结果', res);
|
||||
if (res?.code === 200) {
|
||||
queryViewStore.setDetailsData({
|
||||
...detailsData,
|
||||
action: _action,
|
||||
response: res,
|
||||
});
|
||||
toast.success('操作执行成功', {
|
||||
action: {
|
||||
label: '查看数据',
|
||||
onClick: () => queryViewStore.setDetailsActiveTab('response'),
|
||||
},
|
||||
closeButton: true,
|
||||
duration: 2000,
|
||||
position: 'top-center',
|
||||
});
|
||||
} else {
|
||||
toast.error(`操作执行失败: ${res?.message || '未知错误'}`);
|
||||
}
|
||||
}, [queryViewStore.editing, studioStore.queryProxy, action]);
|
||||
const runCom = (
|
||||
<button
|
||||
className="inline-flex items-center gap-1 ml-2 px-2 py-0.5 text-xs rounded-md bg-gray-900 text-white hover:bg-gray-700 transition-colors align-middle cursor-pointer"
|
||||
onClick={() => {
|
||||
console.log('点击执行', detailsData.action);
|
||||
onRun();
|
||||
}}
|
||||
>
|
||||
<Play className="w-3 h-3" />
|
||||
执行
|
||||
</button>
|
||||
)
|
||||
const editCom = (<>
|
||||
{queryViewStore.editing && <button
|
||||
className="inline-flex items-center gap-1 ml-2 px-2 py-0.5 text-xs rounded-md bg-gray-900 text-white hover:bg-gray-700 transition-colors align-middle cursor-pointer"
|
||||
onClick={() => {
|
||||
if (queryViewStore.editing) {
|
||||
// 保存操作
|
||||
try {
|
||||
const parsedAction = JSON.parse(action);
|
||||
detailsData.action = parsedAction;
|
||||
queryViewStore.setEditing(false);
|
||||
queryViewStore.setDetailsData({ ...detailsData });
|
||||
toast.success('操作信息已更新');
|
||||
} catch (error) {
|
||||
toast.error('操作信息必须是合法的 JSON 格式');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}}>保存</button>}
|
||||
<button
|
||||
className="inline-flex items-center gap-1 ml-2 px-2 py-0.5 text-xs rounded-md border border-gray-300 hover:bg-gray-50 transition-colors align-middle cursor-pointer"
|
||||
onClick={() => {
|
||||
if (queryViewStore.editing) {
|
||||
setAction(detailsData.action ? JSON.stringify(detailsData.action, null, 2) : '');
|
||||
}
|
||||
queryViewStore.setEditing(!queryViewStore.editing);
|
||||
}}
|
||||
>
|
||||
{queryViewStore.editing ? '取消' : '编辑'}
|
||||
</button>
|
||||
</>)
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Type */}
|
||||
{detailsData.type && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">类型</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{detailsData.type}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
{detailsData.title && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">标题</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{detailsData.title}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{detailsData.description && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">描述</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md whitespace-pre-wrap">
|
||||
{detailsData.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action */}
|
||||
{!queryViewStore.editing && detailsData.action && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<div className="text-sm font-semibold text-gray-700 block mb-1 py-2 cursor-pointer">操作 {runCom} {editCom}</div>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs overflow-auto cursor-pointer" onClick={() => queryViewStore.setEditing(true)}>
|
||||
{JSON.stringify(detailsData.action, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{queryViewStore.editing && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<div className="text-sm font-semibold text-gray-700 block mb-1 py-2">操作 {runCom} {editCom} </div>
|
||||
<textarea
|
||||
className="text-sm text-gray-900 bg-gray-100 px-3 py-2 rounded-md w-full h-32 font-mono border-gray-600 focus:ring-2 focus:ring-gray-500 focus:outline-none scrollbar"
|
||||
value={action}
|
||||
onChange={(e) => {
|
||||
setAction(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{otherFilds}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const RouterInfoPanel = ({ routeInfo }: { routeInfo: RouteInfo | null }) => {
|
||||
if (!routeInfo) {
|
||||
return (
|
||||
<div className="text-sm text-gray-500 text-center py-8">
|
||||
无法获取路由信息
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const _routeInfo = pick(routeInfo, ['id', 'path', 'key', 'description', 'metadata']);
|
||||
const metadata = useMemo(() => {
|
||||
if (!_routeInfo.metadata) return null;
|
||||
const _metadata = _routeInfo.metadata;
|
||||
if (_metadata.viewItem) {
|
||||
_metadata.viewItem = filterRouteInfo(_metadata.viewItem);
|
||||
}
|
||||
return _metadata;
|
||||
}, [_routeInfo.metadata]);
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* ID */}
|
||||
{_routeInfo.id && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">ID{_routeInfo?.id.startsWith("rand") ? ' (当前id会随机变化)' : ''}</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{_routeInfo.id}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Path */}
|
||||
{_routeInfo.path && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">路径</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{_routeInfo.path}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Key */}
|
||||
{_routeInfo.key && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">Key</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{_routeInfo.key}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{_routeInfo.description && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">描述</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md whitespace-pre-wrap">
|
||||
{_routeInfo.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata */}
|
||||
{metadata && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">Metadata</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs overflow-auto">
|
||||
{JSON.stringify(metadata, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>);
|
||||
}
|
||||
|
||||
export const DetailsDialog = () => {
|
||||
const [activeTab, setActiveTab] = useState('details');
|
||||
const { showDetailsDialog, setShowDetailsDialog, detailsData } = useQueryViewStore(
|
||||
const queryViewStore = useQueryViewStore(
|
||||
useShallow((state) => ({
|
||||
showDetailsDialog: state.showDetailsDialog,
|
||||
setShowDetailsDialog: state.setShowDetailsDialog,
|
||||
detailsData: state.detailsData,
|
||||
detailsActiveTab: state.detailsActiveTab,
|
||||
setDetailsActiveTab: state.setDetailsActiveTab,
|
||||
allDetailsTabs: state.allDetailsTabs,
|
||||
setAllDetailsTabs: state.setAllDetailsTabs,
|
||||
editing: state.editing,
|
||||
setEditing: state.setEditing,
|
||||
}))
|
||||
);
|
||||
const { currentView } = useStudioStore(useShallow((state) => ({
|
||||
|
||||
const { currentView, queryProxy } = useStudioStore(useShallow((state) => ({
|
||||
currentView: state.currentView,
|
||||
queryProxy: state.queryProxy,
|
||||
})));
|
||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||
const [forceViewDialogOpen, setForceViewDialogOpen] = useState(false)
|
||||
const routeInfo = useMemo(() => {
|
||||
const action = queryViewStore?.detailsData?.action;
|
||||
if (!action) return null;
|
||||
if (!queryProxy) return null;
|
||||
const router = queryProxy!.router?.findRoute?.(action)
|
||||
if (!router) return null;
|
||||
return router as RouteInfo;
|
||||
}, [queryProxy, queryViewStore.detailsData]);
|
||||
console.log('metadata', queryViewStore.detailsData?._id, queryViewStore.detailsData);
|
||||
const onChangeTab = useCallback((key) => {
|
||||
if (key !== 'response') {
|
||||
queryViewStore.setDetailsActiveTab(key);
|
||||
return;
|
||||
}
|
||||
let needCheck = true;
|
||||
const action = queryViewStore?.detailsData?.action;
|
||||
if (!action) {
|
||||
needCheck = false
|
||||
toast.error('没有操作信息，无法查看响应数据');
|
||||
return
|
||||
}
|
||||
|
||||
if (!detailsData) return null;
|
||||
console.log('activeTab ', activeTab);
|
||||
const args = routeInfo?.metadata?.args || [];
|
||||
const keys = Object.keys(args);
|
||||
if (keys.length === 0) {
|
||||
needCheck = false;
|
||||
}
|
||||
if (!needCheck) {
|
||||
queryViewStore.setDetailsActiveTab(key);
|
||||
return;
|
||||
}
|
||||
console.log('args', args);
|
||||
|
||||
const payload = getPayload(action as any);
|
||||
payload.data = {}
|
||||
const schema = fromJSONSchema<true>(args, { mergeObject: true });
|
||||
console.log('payload', payload);
|
||||
console.log('schema', schema);
|
||||
const validateResult = schema.safeParse(payload);
|
||||
console.log('validateResult', validateResult);
|
||||
if (!validateResult.success) {
|
||||
// 参数不合法，无法查看响应数据，需要提示用户强制查看还是取消，如果用户选择强制查看，则直接切换到响应标签页，如果用户选择取消，则保持在当前标签页
|
||||
setForceViewDialogOpen(true);
|
||||
} else {
|
||||
queryViewStore.setDetailsActiveTab(key);
|
||||
}
|
||||
|
||||
}, [routeInfo])
|
||||
if (!queryViewStore.detailsData) return null;
|
||||
return (
|
||||
<Dialog open={showDetailsDialog} onOpenChange={setShowDetailsDialog}>
|
||||
<DialogContent className="max-w-3xl! max-h-[80vh] overflow-hidden">
|
||||
<DialogHeader>
|
||||
<DialogTitle>详情信息</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex gap-2 border-b border-gray-200">
|
||||
<button
|
||||
onClick={() => setActiveTab('details')}
|
||||
className={`px-4 py-2 text-sm font-medium transition-colors relative ${
|
||||
activeTab === 'details'
|
||||
? 'text-gray-900 border-b-2 border-gray-900'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
详情
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('view')}
|
||||
className={`px-4 py-2 text-sm font-medium transition-colors relative ${
|
||||
activeTab === 'view'
|
||||
? 'text-gray-900 border-b-2 border-gray-900'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
视图
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('response')}
|
||||
className={`px-4 py-2 text-sm font-medium transition-colors relative ${
|
||||
activeTab === 'response'
|
||||
? 'text-gray-900 border-b-2 border-gray-900'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
响应
|
||||
</button>
|
||||
</div>
|
||||
<>
|
||||
<Dialog open={forceViewDialogOpen} onOpenChange={setForceViewDialogOpen}>
|
||||
<DialogContent className="max-w-sm!">
|
||||
<DialogHeader>
|
||||
<DialogTitle>参数不合法</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="text-sm text-gray-600 py-2">
|
||||
当前参数不合法，可能导致请求失败。是否仍要强制查看响应数据？
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 mt-2">
|
||||
<button
|
||||
className="px-4 py-2 text-sm rounded-md border border-gray-300 hover:bg-gray-50 transition-colors"
|
||||
onClick={() => {
|
||||
setForceViewDialogOpen(false);
|
||||
queryViewStore.setEditing(true);
|
||||
queryViewStore.setDetailsActiveTab('details');
|
||||
}}
|
||||
>
|
||||
去编辑
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 text-sm rounded-md border border-gray-300 hover:bg-gray-50 transition-colors"
|
||||
onClick={() => setForceViewDialogOpen(false)}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 text-sm rounded-md bg-gray-900 text-white hover:bg-gray-700 transition-colors"
|
||||
onClick={() => {
|
||||
setForceViewDialogOpen(false);
|
||||
queryViewStore.setDetailsActiveTab('response');
|
||||
}}
|
||||
>
|
||||
强制查看
|
||||
</button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Dialog open={queryViewStore.showDetailsDialog} onOpenChange={queryViewStore.setShowDetailsDialog}>
|
||||
<DialogContent className={`max-h-[80vh] overflow-hidden ${isFullscreen ? 'w-screen! h-screen! max-w-screen! max-h-screen! ' : 'max-w-3xl! '}`}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>详情信息</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="mt-4 h-[calc(80vh-200px)] overflow-auto scrollbar">
|
||||
{/* 第一个标签页：详情信息 */}
|
||||
{activeTab === 'details' && (
|
||||
<div className="space-y-4">
|
||||
{/* Type */}
|
||||
{detailsData.type && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">类型</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{detailsData.type}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-2 border-b border-gray-200">
|
||||
{queryViewStore.allDetailsTabs.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => onChangeTab(tab.key as DetailsTab)}
|
||||
className={`px-4 py-2 text-sm font-medium transition-colors relative ${queryViewStore.detailsActiveTab === tab.key
|
||||
? 'text-gray-900 border-b-2 border-gray-900'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
{detailsData.title && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">标题</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{detailsData.title}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-4 h-[calc(80vh-200px)] overflow-auto scrollbar px-2">
|
||||
{/* 第一个标签页：详情信息 */}
|
||||
{queryViewStore.detailsActiveTab === 'details' && (
|
||||
<DetailsInfoPanel detailsData={queryViewStore.detailsData} />
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{detailsData.description && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">描述</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md whitespace-pre-wrap">
|
||||
{detailsData.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* 第二个标签页：当前视图 */}
|
||||
{queryViewStore.detailsActiveTab === 'view' && (
|
||||
<ViewInfoTable currentView={currentView} />
|
||||
)}
|
||||
|
||||
{/* Action */}
|
||||
{detailsData.action && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">操作</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs overflow-auto">
|
||||
{JSON.stringify(detailsData.action, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* 第三个标签页：路由信息 */}
|
||||
{queryViewStore.detailsActiveTab === 'router' && (
|
||||
<RouterInfoPanel routeInfo={routeInfo} />
|
||||
)}
|
||||
|
||||
{/* 其他字段 */}
|
||||
{detailsData.api && (
|
||||
<div className="border-b border-gray-200 pb-3 w-full scrollbar">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">API</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs w-full">
|
||||
{JSON.stringify(detailsData.api, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 第二个标签页：当前视图 */}
|
||||
{activeTab === 'view' && (
|
||||
<div className="space-y-4">
|
||||
{currentView ? (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">视图 ID</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{currentView.viewId}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-gray-500 text-center py-8">
|
||||
当前没有视图信息
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 第三个标签页：响应 */}
|
||||
{activeTab === 'response' && (
|
||||
<div className="space-y-4">
|
||||
<QueryView viewData={detailsData} type={'message'} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
{/* 第三个标签页：响应 */}
|
||||
{queryViewStore.detailsActiveTab === 'response' && (
|
||||
<div className="space-y-4">
|
||||
<QueryView viewData={queryViewStore.detailsData} type={'message'} setIsFullscreen={setIsFullscreen} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog >
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { QueryProxy, RouterViewItem } from '@kevisual/api/proxy'
|
||||
import { app } from '@/agent/index.ts'
|
||||
import { use, useEffect, useState } from 'react'
|
||||
import { use, useEffect, useState, useRef, useId, useMemo } from 'react'
|
||||
import { flexRender, useReactTable, getCoreRowModel, ColumnDef } from '@tanstack/react-table'
|
||||
import { RefreshCw, Info, MoreVertical, Edit, Trash2, Download, Save, ExternalLink, Code, Delete } from 'lucide-react'
|
||||
import { RefreshCw, Info, MoreVertical, Edit, Trash2, Download, Save, ExternalLink, Code, Delete, Maximize, Minimize } from 'lucide-react'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
@@ -10,16 +10,18 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { Message, useStudioStore } from '../studio/store'
|
||||
import { filterRouteInfo, Message, useStudioStore } from '../studio/store'
|
||||
import { useQueryViewStore } from './store'
|
||||
import { DetailsDialog } from './components/DetailsDialog'
|
||||
import { useShallow } from 'zustand/shallow'
|
||||
import { cloneDeep } from 'es-toolkit'
|
||||
import { toast } from 'sonner'
|
||||
import { Result } from '@kevisual/query'
|
||||
export const QueryViewTypes = ['component', 'page', 'message'] as const
|
||||
type Props = {
|
||||
type: 'component' | 'page' | 'message',
|
||||
viewData?: RouterViewItem
|
||||
type: typeof QueryViewTypes[number],
|
||||
viewData?: RouterViewItem,
|
||||
setIsFullscreen?: (isFullscreen: boolean) => void,
|
||||
}
|
||||
|
||||
const queryProxy = new QueryProxy({
|
||||
@@ -28,13 +30,15 @@ const queryProxy = new QueryProxy({
|
||||
export const QueryView = (props: Props) => {
|
||||
const [data, setData] = useState<any[]>([])
|
||||
const [columns, setColumns] = useState<ColumnDef<any>[]>([])
|
||||
const [type] = useState<'component' | 'page' | 'message'>(props.type || 'page')
|
||||
const [type] = useState<Props['type']>(props.type || 'page')
|
||||
const [viewData, setViewData] = useState<RouterViewItem | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [showMoreMenu, setShowMoreMenu] = useState(false)
|
||||
const [selectedRow, setSelectedRow] = useState<any | null>(null)
|
||||
const [isList, setIsList] = useState(true)
|
||||
const [obj, setObj] = useState<any>(null)
|
||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||
const routeViewRef = useRef<HTMLDivElement>(null)
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns: columns,
|
||||
@@ -46,9 +50,13 @@ export const QueryView = (props: Props) => {
|
||||
const queryViewStore = useQueryViewStore(useShallow((state) => ({
|
||||
setShowDetailsDialog: state.setShowDetailsDialog,
|
||||
setDetailsData: state.setDetailsData,
|
||||
setEditing: state.setEditing,
|
||||
})))
|
||||
const isPage = type === 'page'
|
||||
const isMessage = type === 'message'
|
||||
const id = useId()
|
||||
|
||||
const handleResponse = (response: Result) => {
|
||||
console.log('response', response, viewData);
|
||||
const list = response.data?.list
|
||||
if (!list) {
|
||||
setIsList(false);
|
||||
@@ -75,9 +83,7 @@ export const QueryView = (props: Props) => {
|
||||
const res = await queryProxy.runByRouteView(viewData!)
|
||||
const response = res.response;
|
||||
handleResponse(response)
|
||||
console.log('res', res);
|
||||
toast.success('数据获取成功')
|
||||
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
@@ -89,28 +95,19 @@ export const QueryView = (props: Props) => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleShowDetails = () => {
|
||||
console.log('Show details for row:', props.viewData)
|
||||
const data = cloneDeep(props.viewData) as RouterViewItem
|
||||
// 删除可能过大的字段，避免在详情弹窗展示
|
||||
if (data.type === 'api') {
|
||||
delete data?.api?.query;
|
||||
}
|
||||
if (data.type === 'worker') {
|
||||
delete data?.worker?.worker;
|
||||
}
|
||||
if (data.type === 'context') {
|
||||
delete data?.context?.router;
|
||||
}
|
||||
queryViewStore.setDetailsData(data);
|
||||
const handleShowDetails = (editing?: boolean) => {
|
||||
const data = filterRouteInfo(props.viewData!)
|
||||
queryViewStore.setDetailsData(data, 'details');
|
||||
queryViewStore.setShowDetailsDialog(true);
|
||||
if (typeof editing === 'boolean') {
|
||||
queryViewStore.setEditing(editing);
|
||||
} else {
|
||||
queryViewStore.setEditing(false);
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = () => {
|
||||
if (selectedRow) {
|
||||
console.log('Edit row:', selectedRow)
|
||||
// 在这里添加编辑逻辑
|
||||
}
|
||||
handleShowDetails(true)
|
||||
}
|
||||
|
||||
const handleDelete = () => {
|
||||
@@ -144,23 +141,33 @@ export const QueryView = (props: Props) => {
|
||||
// 在这里添加保存并打开逻辑
|
||||
}
|
||||
}
|
||||
// useEffect(() => {
|
||||
// console.log('执行查询', viewData, props.type)
|
||||
// if (viewData && props.type !== 'message') {
|
||||
// main()
|
||||
// } else if (viewData && props.type === 'message') {
|
||||
// console.log('viewData ', viewData, props.type)
|
||||
// if (viewData.response) {
|
||||
// handleResponse(viewData.response)
|
||||
// } else {
|
||||
// //
|
||||
// }
|
||||
// }
|
||||
// }, [viewData, props.type])
|
||||
|
||||
const handleToggleFullscreen = () => {
|
||||
setIsFullscreen(!isFullscreen)
|
||||
if (props.setIsFullscreen) {
|
||||
props.setIsFullscreen(!isFullscreen)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
props.viewData && setViewData(props.viewData as RouterViewItem)
|
||||
}, [])
|
||||
if (viewData && props.type !== 'message') {
|
||||
main()
|
||||
} else if (viewData && props.type === 'message' && !viewData.response) {
|
||||
main()
|
||||
}
|
||||
}, [viewData, props.type])
|
||||
|
||||
useEffect(() => {
|
||||
if (props.viewData) {
|
||||
const detailsData = cloneDeep(props.viewData) as RouterViewItem
|
||||
setViewData(detailsData)
|
||||
// 如果是 message 类型且有 response，直接处理响应
|
||||
if (props.type === 'message' && props.viewData.response) {
|
||||
handleResponse(props.viewData.response)
|
||||
}
|
||||
}
|
||||
}, [props.viewData])
|
||||
const RenderTable = () => {
|
||||
if (!isList) {
|
||||
return <pre className='bg-gray-100 p-4 rounded-lg overflow-auto'>
|
||||
@@ -205,9 +212,26 @@ export const QueryView = (props: Props) => {
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
const isPage = type === 'page'
|
||||
return <div id='route-view' className={`w-full ${type === 'component' ? 'max-h-150 overflow-y-auto' : 'h-full overflow-auto'} p-4`}>
|
||||
<DetailsDialog />
|
||||
|
||||
const typeClass = useMemo(() => {
|
||||
if (isFullscreen && type !== 'message') {
|
||||
return 'fixed inset-0 z-50 bg-white dark:bg-gray-900 w-screen h-screen'
|
||||
} else if (isFullscreen && type === 'message') {
|
||||
return 'absolute inset-0 z-50 bg-white dark:bg-gray-900 w-full h-full p-4'
|
||||
}
|
||||
switch (type) {
|
||||
case 'component':
|
||||
return 'max-h-150 overflow-y-auto'
|
||||
case 'page':
|
||||
return 'h-full overflow-auto'
|
||||
case 'message':
|
||||
return 'h-full overflow-auto'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}, [type, isFullscreen])
|
||||
|
||||
const content = <div ref={routeViewRef} id={'route-view-' + id} className={`w-full route-view ${typeClass} p-4 `}>
|
||||
<div className='mb-4'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h2 className={`font-bold ${type === 'component' ? 'text-lg' : 'text-2xl'} truncate`} title={`路由视图 - ${viewData?.title || '未命名'}`}>路由视图 - {viewData?.title || '未命名'}</h2>
|
||||
@@ -221,7 +245,7 @@ export const QueryView = (props: Props) => {
|
||||
>
|
||||
<RefreshCw size={20} className={isLoading ? 'animate-spin' : 'cursor-pointer'} />
|
||||
</button>
|
||||
{!isPage && <button
|
||||
{!isPage && !isMessage && <button
|
||||
onClick={handleDelete}
|
||||
disabled={isLoading}
|
||||
className='p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50'
|
||||
@@ -230,13 +254,11 @@ export const QueryView = (props: Props) => {
|
||||
</button>}
|
||||
|
||||
<DropdownMenu open={showMoreMenu} onOpenChange={setShowMoreMenu}>
|
||||
<DropdownMenuTrigger>
|
||||
<button
|
||||
className='p-2 hover:bg-gray-200 rounded-lg transition-colors'
|
||||
title='更多选项'
|
||||
>
|
||||
<MoreVertical size={20} />
|
||||
</button>
|
||||
<DropdownMenuTrigger
|
||||
className='p-2 hover:bg-gray-200 rounded-lg transition-colors'
|
||||
title='更多选项'
|
||||
>
|
||||
<MoreVertical size={20} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align='end' className='w-48 border-gray-300'>
|
||||
{!isPage && (
|
||||
@@ -256,18 +278,24 @@ export const QueryView = (props: Props) => {
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
<DropdownMenuItem onClick={() => handleShowDetails()}>
|
||||
<Info size={16} className='mr-2' />
|
||||
<span>详情</span>
|
||||
</DropdownMenuItem>
|
||||
{!isMessage && (
|
||||
<DropdownMenuItem onClick={() => handleShowDetails()}>
|
||||
<Info size={16} className='mr-2' />
|
||||
<span>详情</span>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem onClick={handleEdit}>
|
||||
<Edit size={16} className='mr-2' />
|
||||
<span>编辑</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleDelete} variant='destructive'>
|
||||
<DropdownMenuItem onClick={handleToggleFullscreen}>
|
||||
{isFullscreen ? <Minimize size={16} className='mr-2' /> : <Maximize size={16} className='mr-2' />}
|
||||
<span>{isFullscreen ? '退出全屏' : '全屏'}</span>
|
||||
</DropdownMenuItem>
|
||||
{!isMessage && <DropdownMenuItem onClick={handleDelete} variant='destructive'>
|
||||
<Trash2 size={16} className='mr-2' />
|
||||
<span>{!isPage ? '移除' : '删除'}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuItem>}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={handleExport}>
|
||||
<Download size={16} className='mr-2' />
|
||||
@@ -282,10 +310,12 @@ export const QueryView = (props: Props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-full overflow-x-auto rounded-lg shadow-md border border-gray-300'>
|
||||
<div className='w-full overflow-x-auto scrollbar rounded-lg shadow-md border border-gray-300'>
|
||||
<RenderTable />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return content
|
||||
}
|
||||
export const QueryViewMessages = (props: Props) => {
|
||||
const studioStore = useStudioStore(useShallow((state) => ({
|
||||
@@ -295,9 +325,13 @@ export const QueryViewMessages = (props: Props) => {
|
||||
const initPage = async () => {
|
||||
const url = new URL(window.location.href)
|
||||
const id = url.searchParams.get('id') || ''
|
||||
const message = studioStore.messages.find(msg => msg.id === id)
|
||||
if (!id) {
|
||||
toast.error('缺少查询视图ID参数')
|
||||
// return
|
||||
setTimeout(() => {
|
||||
toast.error('缺少查询视图ID参数')
|
||||
console.error('Missing query view ID parameter')
|
||||
}, 1000)
|
||||
return
|
||||
}
|
||||
// 查询query-view的保存的id，赋值后然后执行查询
|
||||
// @ts-ignore
|
||||
@@ -307,8 +341,8 @@ export const QueryViewMessages = (props: Props) => {
|
||||
title: '获取数据',
|
||||
type: 'api',
|
||||
api: {
|
||||
// url: "/api/router",
|
||||
url: "http://localhost:52000/api/router",
|
||||
url: "/api/router",
|
||||
// url: "http://localhost:52000/api/router",
|
||||
},
|
||||
action: {
|
||||
path: 'router',
|
||||
@@ -323,7 +357,7 @@ export const QueryViewMessages = (props: Props) => {
|
||||
initPage()
|
||||
}
|
||||
}, [props.type])
|
||||
return <div>
|
||||
return <div className='w-full h-full flex flex-col scrollbar'>
|
||||
{studioStore.messages.map((msg, index) => (
|
||||
<div key={msg._id || msg.id} className="p-4 border-b border-gray-200">
|
||||
<QueryView viewData={msg} type={props.type} />
|
||||
@@ -332,7 +366,8 @@ export const QueryViewMessages = (props: Props) => {
|
||||
</div>
|
||||
}
|
||||
export const AppProvider = () => {
|
||||
return <main className='w-full h-screen flex flex-col overflow-auto'>
|
||||
return <div className='w-full h-full flex flex-col overflow-hidden'>
|
||||
<DetailsDialog />
|
||||
<QueryViewMessages type="page" />
|
||||
</main>
|
||||
</div>
|
||||
}
|
||||
6
web/src/app/query-view/page.tsx
Normal file
6
web/src/app/query-view/page.tsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import { AppProvider } from './index'
|
||||
export default function App() {
|
||||
return (
|
||||
<AppProvider />
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,26 @@
|
||||
import { RouterViewItem } from '@kevisual/api/proxy';
|
||||
import { create } from 'zustand';
|
||||
|
||||
export const detailsTabs = ['details', 'view', 'router', 'response'] as const;
|
||||
export const AllTabs = [
|
||||
{
|
||||
key: 'details',
|
||||
label: '详情',
|
||||
},
|
||||
{
|
||||
key: 'view',
|
||||
label: '视图',
|
||||
},
|
||||
{
|
||||
key: 'router',
|
||||
label: '路由',
|
||||
},
|
||||
{
|
||||
key: 'response',
|
||||
label: '响应',
|
||||
},
|
||||
]
|
||||
export type DetailsTab = (typeof detailsTabs)[number];
|
||||
type QueryViewState = {
|
||||
showDataDialog: boolean;
|
||||
setShowDataDialog: (show: boolean) => void;
|
||||
@@ -7,8 +28,14 @@ type QueryViewState = {
|
||||
setDataDialogContent: (content: any) => void;
|
||||
showDetailsDialog: boolean;
|
||||
setShowDetailsDialog: (show: boolean) => void;
|
||||
detailsData: any;
|
||||
setDetailsData: (data: any) => void;
|
||||
detailsData: RouterViewItem | null;
|
||||
setDetailsData: (data: RouterViewItem | null, tab?: DetailsTab) => void;
|
||||
detailsActiveTab: DetailsTab;
|
||||
setDetailsActiveTab: (tab: DetailsTab) => void;
|
||||
allDetailsTabs: typeof AllTabs;
|
||||
setAllDetailsTabs: (tabs: typeof AllTabs) => void;
|
||||
editing: boolean;
|
||||
setEditing: (editing: boolean) => void;
|
||||
};
|
||||
export const useQueryViewStore = create<QueryViewState>((set) => ({
|
||||
showDataDialog: false,
|
||||
@@ -18,5 +45,16 @@ export const useQueryViewStore = create<QueryViewState>((set) => ({
|
||||
showDetailsDialog: false,
|
||||
setShowDetailsDialog: (show) => set({ showDetailsDialog: show }),
|
||||
detailsData: null,
|
||||
setDetailsData: (data) => set({ detailsData: data }),
|
||||
setDetailsData: (data, tab) => {
|
||||
if (typeof tab !== 'undefined') {
|
||||
set({ detailsActiveTab: tab });
|
||||
}
|
||||
set({ detailsData: data })
|
||||
},
|
||||
detailsActiveTab: 'details',
|
||||
setDetailsActiveTab: (tab) => set({ detailsActiveTab: tab }),
|
||||
editing: false,
|
||||
setEditing: (editing) => set({ editing }),
|
||||
allDetailsTabs: AllTabs,
|
||||
setAllDetailsTabs: (tabs) => set({ allDetailsTabs: tabs }),
|
||||
}));
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useStudioStore } from './store.ts';
|
||||
import { filterRouteInfo, useStudioStore } from './store.ts';
|
||||
import { use, useEffect, useState } from 'react';
|
||||
import { MonitorPlay, Play, PanelLeft, PanelLeftClose, PanelRight, PanelRightClose, Filter, FilterX, Search, X, MoreHorizontal, Info, Code, RotateCcw } from 'lucide-react';
|
||||
import { Panel, Group } from 'react-resizable-panels'
|
||||
@@ -9,12 +9,16 @@ import { Input } from '@/components/ui/input.tsx';
|
||||
import { Button } from '@/components/ui/button.tsx';
|
||||
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu.tsx';
|
||||
import { ExportDialog } from './components/ExportDialog';
|
||||
import { useQueryViewStore } from '../query-view/store/index.ts';
|
||||
import { toast } from 'sonner';
|
||||
import { DetailsDialog } from '../query-view/components/DetailsDialog.tsx';
|
||||
export const AppProvider = () => {
|
||||
const { showLeftPanel, showRightPanel } = useStudioStore(useShallow((state) => ({
|
||||
showLeftPanel: state.showLeftPanel,
|
||||
showRightPanel: state.showRightPanel,
|
||||
})));
|
||||
return <div className='w-full h-full flex flex-col overflow-hidden'>
|
||||
<DetailsDialog />
|
||||
<Group className="h-full flex-1 overflow-hidden">
|
||||
{showLeftPanel && <Panel defaultSize={300} minSize={250} maxSize={500} className="border-r border-gray-300 overflow-auto">
|
||||
<ViewList />
|
||||
@@ -86,6 +90,8 @@ export const App = () => {
|
||||
const { routes, queryRouteList, run, loading, searchRoutes, ...store } = useStudioStore(useShallow((state) => ({
|
||||
routes: state.routes,
|
||||
searchRoutes: state.searchRoutes,
|
||||
searchKeyword: state.searchKeyword,
|
||||
setSearchKeyword: state.setSearchKeyword,
|
||||
queryRouteList: state.queryRouteList,
|
||||
run: state.run,
|
||||
loading: state.loading,
|
||||
@@ -95,9 +101,14 @@ export const App = () => {
|
||||
setShowExportDialog: state.setShowExportDialog,
|
||||
setExportRoutes: state.setExportRoutes,
|
||||
})));
|
||||
const queryViewStore = useQueryViewStore(useShallow((state) => ({
|
||||
setShowDetailsDialog: state.setShowDetailsDialog,
|
||||
setDetailsData: state.setDetailsData,
|
||||
setEditing: state.setEditing,
|
||||
})))
|
||||
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
|
||||
const [visibleIds, setVisibleIds] = useState<Set<string>>(new Set());
|
||||
const [searchKeyword, setSearchKeyword] = useState<string>('');
|
||||
const { searchKeyword, setSearchKeyword } = store
|
||||
const [defaultKeyword, setDefaultKeyword] = useState<string>('');
|
||||
useEffect(() => {
|
||||
queryRouteList(true);
|
||||
@@ -243,22 +254,29 @@ export const App = () => {
|
||||
</button>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<button
|
||||
className="p-1.5 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-all duration-200 cursor-pointer"
|
||||
title="更多选项"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<MoreHorizontal size={14} strokeWidth={2.5} />
|
||||
</button>
|
||||
<DropdownMenuTrigger
|
||||
className="p-1.5 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-all duration-200 cursor-pointer"
|
||||
title="更多选项"
|
||||
>
|
||||
<MoreHorizontal size={14} strokeWidth={2.5} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="border-gray-300">
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// TODO: 实现显示详情功能
|
||||
console.log('显示详情', route);
|
||||
const viewItem = route.metadata?.viewItem;
|
||||
if (!viewItem) {
|
||||
toast.error('路由没有关联的视图数据');
|
||||
return;
|
||||
}
|
||||
const _viewItem = filterRouteInfo(viewItem);
|
||||
_viewItem.action = {
|
||||
path: route.path,
|
||||
key: route.key,
|
||||
}
|
||||
queryViewStore.setDetailsData(_viewItem, 'router');
|
||||
queryViewStore.setShowDetailsDialog(true);
|
||||
}}
|
||||
>
|
||||
<Info size={14} className="mr-2" />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
import { create } from 'zustand';
|
||||
import { QueryProxy, RouterViewData, RouterViewItem, pickRouterViewData } from '@kevisual/api/proxy'
|
||||
import { QueryProxy, RouterViewData, RouterViewItem, pickRouterViewData } from '@kevisual/api/query-proxy'
|
||||
import { query } from '@/modules/query.ts'
|
||||
import { toast } from 'sonner';
|
||||
import { use } from '@kevisual/context'
|
||||
@@ -64,15 +64,36 @@ interface StudioState {
|
||||
setMessages: (messages: Message[]) => void;
|
||||
addMessage: (message: Message) => void;
|
||||
deleteMessage: (message: Message) => void;
|
||||
searchKeyword?: string;
|
||||
setSearchKeyword?: (keyword: string) => void;
|
||||
searchKeyword: string;
|
||||
setSearchKeyword: (keyword: string) => void;
|
||||
showExportDialog: boolean;
|
||||
setShowExportDialog: (show: boolean) => void;
|
||||
exportRoutes?: RouteItem[];
|
||||
setExportRoutes: (routes?: RouteItem[]) => void;
|
||||
}
|
||||
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
export const filterRouteInfo = (viewData: RouterViewItem) => {
|
||||
const data = cloneDeep(viewData) as RouterViewItem
|
||||
// 删除可能过大的字段，避免在详情弹窗展示
|
||||
if (data.type === 'api') {
|
||||
delete data?.api?.query;
|
||||
}
|
||||
if (data.type === 'worker') {
|
||||
delete data?.worker?.worker;
|
||||
}
|
||||
if (data.type === 'context') {
|
||||
delete data?.context?.router;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
export const getPayload = (value: { path?: string, key?: string, id?: string, payload?: any, [key: string]: any }): Record<string, any> => {
|
||||
const { path, key, id, payload, ...rest } = value;
|
||||
return {
|
||||
...rest,
|
||||
...payload,
|
||||
}
|
||||
}
|
||||
export const useStudioStore = create<StudioState>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
@@ -85,7 +106,7 @@ export const useStudioStore = create<StudioState>()(
|
||||
const routes: any[] = await queryProxy.listRoutes(() => true, { query: keyword });
|
||||
set({ routes, searchKeyword: keyword });
|
||||
},
|
||||
searchKeyword: undefined,
|
||||
searchKeyword: '',
|
||||
setSearchKeyword: (keyword: string) => set({ searchKeyword: keyword }),
|
||||
currentView: undefined,
|
||||
queryRouteList: async (first: boolean = false) => {
|
||||
@@ -104,8 +125,8 @@ export const useStudioStore = create<StudioState>()(
|
||||
searchKeyword = query;
|
||||
}
|
||||
}
|
||||
console.log('视图ID:', currentView, searchKeyword);
|
||||
console.log('查询路由列表，视图ID:', viewId, queryProxy.router?.routes?.length);
|
||||
// console.log('视图ID:', currentView, searchKeyword);
|
||||
// console.log('查询路由列表，视图ID:', viewId, queryProxy.router?.routes?.length);
|
||||
const routes: any[] = await queryProxy.listRoutes(() => true, { query: searchKeyword });
|
||||
set({ routes, searchKeyword });
|
||||
},
|
||||
@@ -206,7 +227,6 @@ export const useStudioStore = create<StudioState>()(
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log('运行结果 route', route);
|
||||
if (showRightPanel) {
|
||||
if (route.metadata && route.metadata?.viewItem) {
|
||||
const messages = get().messages
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useStudioStore } from '../studio/store.ts';
|
||||
import { Search, RotateCw, Plus, MoreHorizontal, Layout, Edit2, Trash2 } from "lucide-react";
|
||||
import { Search, RotateCw, Plus, MoreHorizontal, Layout, Edit2, Trash2, MousePointer2 } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
@@ -13,10 +13,14 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { ViewEditor } from "@/app/view/components/ViewEditor.tsx";
|
||||
import { toast } from "sonner";
|
||||
import { useShallow } from "zustand/shallow";
|
||||
|
||||
const ViewItem = ({ view, onEdit, onDelete, onDeleteViewItem }: { view: any; onEdit: (view: any) => void; onDelete: (id: string) => void; onDeleteViewItem: (id: string, viewId: string) => void }) => {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const studioStore = useStudioStore();
|
||||
const studioStore = useStudioStore(useShallow((state) => ({
|
||||
currentView: state.currentView,
|
||||
searchRoutes: state.searchRoutes
|
||||
})));
|
||||
useEffect(() => {
|
||||
const currentViewId = studioStore.currentView?.viewId;
|
||||
if (view.views.some((v: any) => v.id === currentViewId)) {
|
||||
@@ -24,7 +28,10 @@ const ViewItem = ({ view, onEdit, onDelete, onDeleteViewItem }: { view: any; onE
|
||||
}
|
||||
}, [studioStore.currentView?.viewId]);
|
||||
const ShowViews = (props: { views: { id: string, title: string, query?: any }[] }) => {
|
||||
const studioStore = useStudioStore();
|
||||
const studioStore = useStudioStore(useShallow((state) => ({
|
||||
currentView: state.currentView,
|
||||
setCurrentView: state.setCurrentView,
|
||||
})));
|
||||
const currentViewId = studioStore.currentView?.viewId;
|
||||
const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
|
||||
const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
|
||||
@@ -110,14 +117,20 @@ const ViewItem = ({ view, onEdit, onDelete, onDeleteViewItem }: { view: any; onE
|
||||
</div>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
}}>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
<DropdownMenuTrigger
|
||||
className="inline-flex items-center justify-center h-8 w-8 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="border-gray-300">
|
||||
<DropdownMenuItem className="cursor-pointer" onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
studioStore.searchRoutes('')
|
||||
}}>
|
||||
<MousePointer2 className="h-4 w-4 mr-2" />
|
||||
选中
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="cursor-pointer" onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEdit(view);
|
||||
|
||||
@@ -2,12 +2,12 @@ import ReactDOM from 'react-dom/client'
|
||||
import { RouterProvider, createRouter } from '@tanstack/react-router'
|
||||
import { routeTree } from './routeTree.gen'
|
||||
import './index.css'
|
||||
import { basename } from './modules/basename'
|
||||
import { getDynamicBasename } from './modules/basename'
|
||||
|
||||
// Set up a Router instance
|
||||
const router = createRouter({
|
||||
routeTree,
|
||||
basepath: basename,
|
||||
basepath: getDynamicBasename(),
|
||||
defaultPreload: 'intent',
|
||||
scrollRestoration: true,
|
||||
})
|
||||
|
||||
@@ -8,4 +8,15 @@ export const wrapBasename = (path: string) => {
|
||||
} else {
|
||||
return path;
|
||||
}
|
||||
}
|
||||
|
||||
// 动态计算 basename，根据当前 URL 路径
|
||||
export const getDynamicBasename = (): string => {
|
||||
const path = window.location.pathname
|
||||
const [user, key, id] = path.split('/').filter(Boolean)
|
||||
if (key === 'v1' && id) {
|
||||
return `/${user}/v1/${id}`
|
||||
}
|
||||
// 默认使用构建时的 basename
|
||||
return basename
|
||||
}
|
||||
@@ -1,13 +1,20 @@
|
||||
import { Query } from '@kevisual/query';
|
||||
import { QueryLoginBrowser } from '@kevisual/api/query-login'
|
||||
export const query = new Query({
|
||||
url: '/api/router',
|
||||
import { useContextKey } from '@kevisual/context';
|
||||
export const query = useContextKey('query', () => {
|
||||
return new Query({
|
||||
url: '/api/router',
|
||||
});
|
||||
});
|
||||
|
||||
export const queryClient = new Query({
|
||||
url: '/client/router',
|
||||
export const queryClient = useContextKey('queryClient', () => {
|
||||
return new Query({
|
||||
url: '/client/router',
|
||||
});
|
||||
});
|
||||
|
||||
export const queryLogin = new QueryLoginBrowser({
|
||||
query: query
|
||||
export const queryLogin = useContextKey('queryLogin', () => {
|
||||
return new QueryLoginBrowser({
|
||||
query: query
|
||||
});
|
||||
});
|
||||
@@ -9,8 +9,26 @@
|
||||
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
|
||||
|
||||
import { Route as rootRouteImport } from './routes/__root'
|
||||
import { Route as ViewRouteImport } from './routes/view'
|
||||
import { Route as ConsoleRouteImport } from './routes/console'
|
||||
import { Route as IdRouteImport } from './routes/$id'
|
||||
import { Route as IndexRouteImport } from './routes/index'
|
||||
|
||||
const ViewRoute = ViewRouteImport.update({
|
||||
id: '/view',
|
||||
path: '/view',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const ConsoleRoute = ConsoleRouteImport.update({
|
||||
id: '/console',
|
||||
path: '/console',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const IdRoute = IdRouteImport.update({
|
||||
id: '/$id',
|
||||
path: '/$id',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const IndexRoute = IndexRouteImport.update({
|
||||
id: '/',
|
||||
path: '/',
|
||||
@@ -19,28 +37,61 @@ const IndexRoute = IndexRouteImport.update({
|
||||
|
||||
export interface FileRoutesByFullPath {
|
||||
'/': typeof IndexRoute
|
||||
'/$id': typeof IdRoute
|
||||
'/console': typeof ConsoleRoute
|
||||
'/view': typeof ViewRoute
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
'/': typeof IndexRoute
|
||||
'/$id': typeof IdRoute
|
||||
'/console': typeof ConsoleRoute
|
||||
'/view': typeof ViewRoute
|
||||
}
|
||||
export interface FileRoutesById {
|
||||
__root__: typeof rootRouteImport
|
||||
'/': typeof IndexRoute
|
||||
'/$id': typeof IdRoute
|
||||
'/console': typeof ConsoleRoute
|
||||
'/view': typeof ViewRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
fileRoutesByFullPath: FileRoutesByFullPath
|
||||
fullPaths: '/'
|
||||
fullPaths: '/' | '/$id' | '/console' | '/view'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to: '/'
|
||||
id: '__root__' | '/'
|
||||
to: '/' | '/$id' | '/console' | '/view'
|
||||
id: '__root__' | '/' | '/$id' | '/console' | '/view'
|
||||
fileRoutesById: FileRoutesById
|
||||
}
|
||||
export interface RootRouteChildren {
|
||||
IndexRoute: typeof IndexRoute
|
||||
IdRoute: typeof IdRoute
|
||||
ConsoleRoute: typeof ConsoleRoute
|
||||
ViewRoute: typeof ViewRoute
|
||||
}
|
||||
|
||||
declare module '@tanstack/react-router' {
|
||||
interface FileRoutesByPath {
|
||||
'/view': {
|
||||
id: '/view'
|
||||
path: '/view'
|
||||
fullPath: '/view'
|
||||
preLoaderRoute: typeof ViewRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/console': {
|
||||
id: '/console'
|
||||
path: '/console'
|
||||
fullPath: '/console'
|
||||
preLoaderRoute: typeof ConsoleRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/$id': {
|
||||
id: '/$id'
|
||||
path: '/$id'
|
||||
fullPath: '/$id'
|
||||
preLoaderRoute: typeof IdRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/': {
|
||||
id: '/'
|
||||
path: '/'
|
||||
@@ -53,6 +104,9 @@ declare module '@tanstack/react-router' {
|
||||
|
||||
const rootRouteChildren: RootRouteChildren = {
|
||||
IndexRoute: IndexRoute,
|
||||
IdRoute: IdRoute,
|
||||
ConsoleRoute: ConsoleRoute,
|
||||
ViewRoute: ViewRoute,
|
||||
}
|
||||
export const routeTree = rootRouteImport
|
||||
._addFileChildren(rootRouteChildren)
|
||||
|
||||
10
web/src/routes/$id.tsx
Normal file
10
web/src/routes/$id.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import App from '@/app/page'
|
||||
|
||||
export const Route = createFileRoute('/$id')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return <App />
|
||||
}
|
||||
@@ -1,11 +1,17 @@
|
||||
import { Link, Outlet, createRootRoute, useNavigate } from '@tanstack/react-router'
|
||||
import { Link, Outlet, createRootRoute, useLocation } from '@tanstack/react-router'
|
||||
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
|
||||
import { Toaster } from '@/components/ui/sonner'
|
||||
import { Load } from '@kevisual/context/load'
|
||||
import * as query from '@/modules/query';
|
||||
export const Route = createRootRoute({
|
||||
component: RootComponent,
|
||||
})
|
||||
Load.npm({ pkg: 'eruda' });
|
||||
|
||||
function RootComponent() {
|
||||
// 这里预加载一下 query 模块，避免在代码分割自动threeshaking;
|
||||
query;
|
||||
|
||||
return (
|
||||
<div className='h-full overflow-hidden'>
|
||||
|
||||
@@ -17,14 +23,14 @@ function RootComponent() {
|
||||
}}
|
||||
activeOptions={{ exact: true }}
|
||||
>
|
||||
Home
|
||||
首页
|
||||
</Link>
|
||||
</div>
|
||||
<hr />
|
||||
<main className='h-[calc(100%-4rem)] overflow-auto scrollbar'>
|
||||
<Outlet />
|
||||
</main>
|
||||
<TanStackRouterDevtools position="bottom-right" />
|
||||
<TanStackRouterDevtools position="bottom-left" />
|
||||
<Toaster />
|
||||
</div>
|
||||
|
||||
|
||||
45
web/src/routes/console.tsx
Normal file
45
web/src/routes/console.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { useContextKey } from '@kevisual/context';
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import type Eruda from 'eruda';
|
||||
import { useEffect, useRef } from 'react';
|
||||
export const Route = createFileRoute('/console')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
|
||||
function RouteComponent() {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
init();
|
||||
return () => {
|
||||
deinit();
|
||||
}
|
||||
}, [])
|
||||
const deinit = async () => {
|
||||
const eruda: typeof Eruda = await useContextKey('eruda');
|
||||
eruda.destroy();
|
||||
}
|
||||
const init = async () => {
|
||||
console.log('正在初始化控制台...');
|
||||
const eruda: typeof Eruda = await useContextKey('eruda');
|
||||
console.log('eruda', eruda);
|
||||
if (!ref.current) return;
|
||||
eruda.init({
|
||||
container: ref.current!,
|
||||
tool: ['console'],
|
||||
inline: true,
|
||||
});
|
||||
const consoleTool = eruda.get('console');
|
||||
consoleTool.html('<span style="color:red">Red</span>');
|
||||
}
|
||||
|
||||
return <div className='w-full overflow-hidden' style={{
|
||||
height: 'calc(100% - 48px)'
|
||||
}} >
|
||||
<div className='min-w-150 w-[80%] mx-auto h-full py-4'>
|
||||
<div className='relative w-full h-full border'>
|
||||
<div ref={ref}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
9
web/src/routes/view.tsx
Normal file
9
web/src/routes/view.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import App from '../app/query-view/page'
|
||||
export const Route = createFileRoute('/view')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return <App />
|
||||
}
|
||||
Reference in New Issue
Block a user