diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b34692a..7bc6e35 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
deleted file mode 100644
index a5b6dd4..0000000
--- a/pnpm-workspace.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-packages:
- - web
- - web-v2
\ No newline at end of file
diff --git a/web/AGENTS.md b/web/AGENTS.md
index e9c6441..c878589 100644
--- a/web/AGENTS.md
+++ b/web/AGENTS.md
@@ -45,4 +45,11 @@ pages/page-app/
- **react-hook-form**: 表单处理
- **sonner**: Toast 通知
- **zustand**: 状态管理
-- **tailwindcss v4**: 使用 @tailwindcss/vite 插件进行样式处理
\ No newline at end of file
+- **tailwindcss v4**: 使用 @tailwindcss/vite 插件进行样式处理
+
+## 主题系统
+
+- **主题配色**: 采用黑白配色方案,提供简洁优雅的视觉体验
+- **主题模式**: 支持 light(浅色)和 dark(深色)模式切换
+- **主题实现**: 使用 `next-themes` 进行主题管理
+- **CSS 变量**: 主题相关的 CSS 变量定义在 `src/styles/theme.css` 中
\ No newline at end of file
diff --git a/web/bun.lock b/web/bun.lock
index eccb913..ed09bff 100644
--- a/web/bun.lock
+++ b/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=="],
diff --git a/web/package.json b/web/package.json
index 31cce25..1fc1208 100644
--- a/web/package.json
+++ b/web/package.json
@@ -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",
diff --git a/web/src/app/id/page.tsx b/web/src/app/id/page.tsx
new file mode 100644
index 0000000..4a01efe
--- /dev/null
+++ b/web/src/app/id/page.tsx
@@ -0,0 +1,7 @@
+export default function IdPage() {
+ return (
+
+
V1 ID Page
+
+ )
+}
diff --git a/web/src/app/query-view/components/DetailsDialog.tsx b/web/src/app/query-view/components/DetailsDialog.tsx
index eb3e3de..1bb061c 100644
--- a/web/src/app/query-view/components/DetailsDialog.tsx
+++ b/web/src/app/query-view/components/DetailsDialog.tsx
@@ -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 (
+
+ 当前视图没有子视图信息
+
+ );
+ }
+
+ return (
+
+ {/* 当前选中的视图 ID */}
+ {currentView.viewId && (
+
+
+
+ {currentView.viewId}
+
+
+ )}
+
+ {/* Link */}
+ {currentView.link && (
+
+
+
+ {currentView.link}
+
+
+ )}
+
+ {/* Summary */}
+ {currentView.summary && (
+
+
+
+ {currentView.summary}
+
+
+ )}
+
+ {/* Tags */}
+ {currentView.tags && currentView.tags.length > 0 && (
+
+
+
+ {currentView.tags.map((tag: string, index: number) => (
+
+ {tag}
+
+ ))}
+
+
+ )}
+
+ {/* Title */}
+ {currentView.title && (
+
+
+
+ {currentView.title}
+
+
+ )}
+
+ {/* Description */}
+ {currentView.description && (
+
+
+
+ {currentView.description}
+
+
+ )}
+
+ {/* 子视图列表表格 */}
+
+
+
+
+
+
+ | ID |
+ 标题 |
+ 查询 |
+
+
+
+ {currentView.views.map((view: any, index: number) => {
+ const isSelected = view.id === currentView.viewId;
+ return (
+
+ |
+
+ {view.id || '-'}
+ {isSelected && (
+
+ 当前
+
+ )}
+
+ |
+ {view.title || '-'} |
+
+ {view.query || '-'}
+ |
+
+ );
+ })}
+
+
+
+
+
+ );
+};
+
+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 (
+
+ 无法获取详情信息
+
+ );
+ }
+ const [action, setAction] = useState(detailsData.action ? JSON.stringify(detailsData.action, null, 2) : '');
+ const otherFilds = useMemo(() => {
+ const { type } = detailsData;
+ if (type === 'api') {
+ {/* 其他字段 */ }
+ return <>{
+ detailsData.api && (
+
+
+
+
+ {JSON.stringify(detailsData.api, null, 2)}
+
+
+
+ )
+ }
+ >
+ }
+ if (type === 'context') {
+ return <>{
+ detailsData.context && (
+
+
+
+
+ {JSON.stringify(detailsData.context, null, 2)}
+
+
+
+ )
+ }
+ >
+ }
+ if (type === 'page') {
+ return <>{
+ detailsData.page && (
+
+
+
+
+ {JSON.stringify(detailsData.page, null, 2)}
+
+
+
+ )
+ }
+ >
+ }
+ 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 = (
+
+ )
+ const editCom = (<>
+ {queryViewStore.editing && }
+
+ >)
+ return (
+
+ {/* Type */}
+ {detailsData.type && (
+
+
+
+ {detailsData.type}
+
+
+ )}
+
+ {/* Title */}
+ {detailsData.title && (
+
+
+
+ {detailsData.title}
+
+
+ )}
+
+ {/* Description */}
+ {detailsData.description && (
+
+
+
+ {detailsData.description}
+
+
+ )}
+
+ {/* Action */}
+ {!queryViewStore.editing && detailsData.action && (
+
+
操作 {runCom} {editCom}
+
+
queryViewStore.setEditing(true)}>
+ {JSON.stringify(detailsData.action, null, 2)}
+
+
+
+ )}
+ {queryViewStore.editing && (
+
+
操作 {runCom} {editCom}
+
+ )}
+ {otherFilds}
+
+
+ );
+};
+
+export const RouterInfoPanel = ({ routeInfo }: { routeInfo: RouteInfo | null }) => {
+ if (!routeInfo) {
+ return (
+
+ 无法获取路由信息
+
+ );
+ }
+ 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 (
+
+ {/* ID */}
+ {_routeInfo.id && (
+
+
+
+ {_routeInfo.id}
+
+
+ )}
+
+ {/* Path */}
+ {_routeInfo.path && (
+
+
+
+ {_routeInfo.path}
+
+
+ )}
+
+ {/* Key */}
+ {_routeInfo.key && (
+
+
+
+ {_routeInfo.key}
+
+
+ )}
+
+ {/* Description */}
+ {_routeInfo.description && (
+
+
+
+ {_routeInfo.description}
+
+
+ )}
+
+ {/* Metadata */}
+ {metadata && (
+
+
+
+
+ {JSON.stringify(metadata, null, 2)}
+
+
+
+ )}
+
);
+}
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(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 (
-