@neatui/vue 5.7.0 → 5.8.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @neatui/vue 更新记录
 
+## 5.8.0
+
+### IRouterView
+- 新增 `source` 属性：`query`（默认）从 `route.query` 读详情 ID，`params` 从 `route.params` 读（路由声明为 `/project/:id?` 这类形状）。
+- `source="params"` 时点遮罩返回列表：按匹配到的路由模式截掉 `:id` 及其后的路径段，query 原样保留，`/project/123/products/4?page=2` 回到 `/project?page=2`；不依赖路由 name，alias 路由同样适用。
+- 默认行为不变：不传 `source` 仍按 query 工作，老项目零改动。
+- Nuxt 页面用 `source="params"` 时需 `definePageMeta({ key })` 固定页面 key：`NuxtPage` 默认按参数生成 key，id 变化会整页重挂载。
+
 ## 5.5.1
 
 - 无组件改动，版本号与 `@neatui/css` 同步。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^6.0.0",
-    "@neatui/css": "^5.7.0",
+    "@neatui/css": "^5.8.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

package/src/components/basic/IRouterView.vue

@@ -24,6 +24,11 @@
     animate?: boolean | 0 | 1;
     mode?: 'default' | 'preview' | 'pop-up' | 'window';
     queryName?: string;
+    /**
+     * 详情 ID 从哪里读：query（?id=1）或 params（/project/1，路由需声明 :id?）。
+     * params 模式下 Nuxt 页面需用 definePageMeta({ key }) 固定页面 key，否则 id 变化会整页重挂载。
+     */
+    source?: 'query' | 'params';
     listClass?: string;
     listStyle?: string;
     itemClass?: string;
@@ -35,6 +40,7 @@
     animate: 1,
     mode: 'default',
     queryName: 'id',
+    source: 'query',
     listClass: 'full',
     listStyle: '',
     itemClass: 'full',
@@ -71,8 +77,11 @@
     };
   };
 
+  // 详情 ID 的容器：query（?id=1）或 params（/project/1）
+  const itemSource = () => (props.source === 'params' ? route.params : route.query);
+
   const hasItemQuery = () => {
-    const value = route.query[props.queryName];
+    const value = itemSource()[props.queryName];
     if (Array.isArray(value)) return value.some((item) => item !== undefined && item !== null && item !== '');
     return value !== undefined && value !== null && value !== '';
   };
@@ -122,12 +131,24 @@
   provide('onlist', evs('list', 'item'));
   provide('onitem', evs('item', 'list'));
   if (env.client) {
-    watch(() => route.query[props.queryName], a);
+    watch(() => itemSource()[props.queryName], a);
     a();
   }
 
+  // params 模式回列表：按匹配到的路由模式找到 :id 段，截掉它和它之后的路径段，query 原样保留
+  // /project/123/products/4?page=2 → /project?page=2；不依赖路由 name，alias 路由也适用
+  const listLocation = () => {
+    const pattern = route.matched[route.matched.length - 1]?.path || '';
+    const idSegment = new RegExp(`^:${props.queryName}(\\(.*\\))?[?*+]?$`);
+    const index = pattern.split('/').findIndex((seg) => idSegment.test(seg));
+    if (index > 0) return { path: route.path.split('/').slice(0, index).join('/') || '/', query: route.query };
+    // :id 不是独立路径段（如 /project-:id?）时，按当前命名路由把它置空
+    return { params: { ...route.params, [props.queryName]: '' }, query: route.query };
+  };
+
   // 取消
   const cancel = () => {
+    if (props.source === 'params') return router.push(listLocation());
     const _query = { ...route.query };
     delete _query[props.queryName];
     router.push({ path: route.path, query: _query });