@neatui/vue 2.17.5 → 3.1.0

package/src/components/basic/IRouterView.vue

@@ -1,9 +1,9 @@
 <template>
-  <div :am-view="view" :am-mode="mode" class="iroute-view pr full" :view-full="full ? 1 : 0" @animationend="anim">
+  <div :am-view="view" :am-mode="mode" :am-animate="transitioning ? 1 : 0" class="iroute-view pr full" :view-full="full ? 1 : 0" @animationend="anim">
     <div :class="listClass" :style="listStyle" am-view-item="list">
       <slot name="list" :mode="mode"></slot>
     </div>
-    <div v-if="view === 'iteming' || view === 'listing' || view === 'item'" ref="itemRef" :class="itemClass" :style="itemStyle" am-view-item="item">
+    <div v-if="itemEverMounted" ref="itemRef" :class="itemClass" :style="itemStyle" am-view-item="item">
       <div class="iroute-view-dark" @click="cancel"></div>
       <div class="iroute-view-body" :style="mode === 'preview' || mode === 'pop-up' ? '' : 'width: 100%;'">
         <slot name="item" :mode="mode"></slot>
@@ -12,7 +12,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { deepcopy } from '@fekit/utils';
+  import { deepcopy, env } from '@fekit/utils';
   import { ref, watch, provide, reactive } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   const route = useRoute();
@@ -21,6 +21,7 @@
   interface Props {
     full?: boolean | 0 | 1;
     once?: number;
+    animate?: boolean | 0 | 1;
     mode?: 'default' | 'preview' | 'pop-up' | 'window';
     queryName?: string;
     listClass?: string;
@@ -31,6 +32,7 @@
   const props: any = withDefaults(defineProps<Props>(), {
     full: 0,
     once: 0,
+    animate: 1,
     mode: 'default',
     queryName: 'id',
     listClass: 'full',
@@ -39,64 +41,90 @@
     itemStyle: '',
   });
   const state: any = reactive({
-    first: 1,
     list: null,
     item: null,
   });
 
   const evs = (v: any = 'list', p: any = 'item') => {
     return (then: any = () => {}, param: any) => {
+      if (!env.client) return;
+      // 注册时已在目标视图、且对侧没留数据 → 视为初次挂载噪音，吞掉一次
+      // 对侧已经写入 state[v]（如 item 退出前调用了 onitem(param)）→ 不跳过，正常派发
+      let skipInitial = view.value === v && state[v] == null;
       watch(
         () => view.value,
         () => {
-          if (view.value === v) {
-            if (param) {
-              state[p] = param;
-            }
-            if (!state.first) {
-              then({ view: view.value, mode: props.mode, param: deepcopy(state[v] || {}) });
-            } else {
-              state.first = 0;
-            }
+          if (view.value !== v) return;
+          if (skipInitial) {
+            skipInitial = false;
+            // 初始 list 仍写入 state.item：item 首次进入能拿到 list 的上下文。
+            // 初始 item 不写入 state.list：避免 deep-link 仅靠 item slot 挂载
+            // 就给 list 留下假的 "edit" 信号、cancel 回 list 触发误刷新。
+            if (v === 'list' && param) state[p] = param;
+            return;
           }
+          if (param) state[p] = param;
+          then({ view: view.value, mode: props.mode, param: deepcopy(state[v] || {}) });
         },
-        { deep: true, immediate: true },
+        { immediate: true },
       );
     };
   };
 
+  const hasItemQuery = () => {
+    const value = route.query[props.queryName];
+    if (Array.isArray(value)) return value.some((item) => item !== undefined && item !== null && item !== '');
+    return value !== undefined && value !== null && value !== '';
+  };
+
   const init = ref(0);
-  const view = ref('');
+  const currentHasItem = ref(hasItemQuery());
+  const transitioning = ref(false);
+  const view = ref(currentHasItem.value ? 'item' : 'list');
+  // item slot 只在首次进入 item 视图后才挂载，之后始终保持，保留表单状态等
+  // list slot 则始终挂载（模板无 v-if），保留勾选/滚动/筛选
+  const itemEverMounted = ref(view.value === 'item' || view.value === 'iteming' || view.value === 'listing');
+  watch(
+    () => view.value,
+    (v) => {
+      if (v === 'item' || v === 'iteming' || v === 'listing') itemEverMounted.value = true;
+    },
+  );
+  const showAnimations = ['iroute-show-default', 'iroute-show-preview', 'iroute-show-pop-up', 'iroute-show-window'];
+  const hideAnimations = ['iroute-hide-default', 'iroute-hide-preview', 'iroute-hide-pop-up', 'iroute-hide-window'];
   const anim = (e: any) => {
-    if (
-      e.animationName === 'am-show-default' ||
-      e.animationName === 'am-show-window' ||
-      e.animationName === 'am-show-preview' ||
-      e.animationName === 'am-show-pop-up' ||
-      e.animationName === 'am-hide-default' ||
-      e.animationName === 'am-hide-window' ||
-      e.animationName === 'am-hide-preview' ||
-      e.animationName === 'am-hide-pop-up'
-    ) {
-      view.value = route.query[props.queryName] ? 'item' : 'list';
-    }
+    const isShow = showAnimations.includes(e.animationName);
+    const isHide = hideAnimations.includes(e.animationName);
+    if (!isShow && !isHide) return;
+
+    currentHasItem.value = hasItemQuery();
+    view.value = currentHasItem.value ? 'item' : 'list';
+    if (isShow || props.mode !== 'default') transitioning.value = false;
   };
 
   const a = () => {
+    const nextHasItem = hasItemQuery();
     if (init.value) {
       if (!props.once) {
-        view.value = route.query[props.queryName] ? 'iteming' : 'listing';
+        const shouldAnimate = !!props.animate && nextHasItem !== currentHasItem.value;
+        currentHasItem.value = nextHasItem;
+        transitioning.value = shouldAnimate;
+        view.value = shouldAnimate ? (nextHasItem ? 'iteming' : 'listing') : nextHasItem ? 'item' : 'list';
       }
     } else {
-      view.value = route.query[props.queryName] ? 'item' : 'list';
+      currentHasItem.value = nextHasItem;
+      transitioning.value = false;
+      view.value = nextHasItem ? 'item' : 'list';
       init.value = 1;
     }
   };
 
   provide('onlist', evs('list', 'item'));
   provide('onitem', evs('item', 'list'));
-  watch(() => route.query[props.queryName], a);
-  a();
+  if (env.client) {
+    watch(() => route.query[props.queryName], a);
+    a();
+  }
 
   // 取消
   const cancel = () => {
@@ -125,18 +153,15 @@
     width: 100%;
     height: 100%;
     & > * {
-      pointer-events: none;
-      & > * {
-        pointer-events: auto;
-      }
+      pointer-events: auto;
     }
   }
 
   // 默认模式
-  [am-view][am-mode~='default'] {
+  .iroute-view[am-mode~='default'] {
     overflow: hidden;
 
-    @keyframes am-show-default {
+    @keyframes iroute-show-default {
       0% {
         opacity: 0;
         transform: translate3d(1em, 0, 0);
@@ -146,7 +171,7 @@
         transform: translate3d(0, 0, 0);
       }
     }
-    @keyframes am-hide-default {
+    @keyframes iroute-hide-default {
       0% {
         opacity: 1;
         transform: translate3d(0, 0, 0);
@@ -177,39 +202,47 @@
       & > [am-view-item~='list'] {
         flex-direction: column;
         display: flex;
-        animation: am-show-default 0.35s ease both;
+      }
+    }
+    &[am-animate='1'][am-view='list'] {
+      & > [am-view-item~='list'] {
+        animation: iroute-show-default 0.35s ease both;
       }
     }
     &[am-view='listing'] {
       & > [am-view-item~='item'] {
         flex-direction: column;
         display: flex;
-        animation: am-hide-default 0.3s ease-in-out both;
+        animation: iroute-hide-default 0.3s ease-in-out both;
       }
     }
     &[am-view='item'] {
       & > [am-view-item~='item'] {
         display: flex;
-        animation: am-show-default 0.35s ease both;
+      }
+    }
+    &[am-animate='1'][am-view='item'] {
+      & > [am-view-item~='item'] {
+        animation: iroute-show-default 0.35s ease both;
       }
     }
     &[am-view='iteming'] {
       & > [am-view-item~='list'] {
         display: flex;
-        animation: am-hide-default 0.3s ease-in-out both;
+        animation: iroute-hide-default 0.3s ease-in-out both;
       }
     }
   }
 
-  // 默认模式
-  [am-view][am-mode~='preview'] {
+  // 预览模式
+  .iroute-view[am-mode~='preview'] {
     overflow: hidden;
 
     .iroute-view-body {
       justify-content: end;
     }
 
-    @keyframes am-show-preview {
+    @keyframes iroute-show-preview {
       0% {
         opacity: 0;
         transform: translate3d(110%, 0, 0);
@@ -219,7 +252,7 @@
         transform: translate3d(0, 0, 0);
       }
     }
-    @keyframes am-hide-preview {
+    @keyframes iroute-hide-preview {
       0% {
         opacity: 1;
         transform: translate3d(0, 0, 0);
@@ -256,18 +289,27 @@
         pointer-events: none;
       }
     }
-    &[am-view='list'],
+    // list 视图：item 即便始终挂载也要隐藏（无 v-if 时需 CSS 兜底）
+    &[am-view='list'] {
+      & > [am-view-item~='item'] {
+        display: none;
+      }
+    }
     &[am-view='listing'] {
       & > [am-view-item~='item'] {
         display: flex;
-        animation: am-hide-preview 0.5s ease-in-out both;
+        animation: iroute-hide-preview 0.5s ease-in-out both;
+      }
+    }
+    &[am-view='item'] {
+      & > [am-view-item~='item'] {
+        display: flex;
       }
     }
-    &[am-view='item'],
     &[am-view='iteming'] {
       & > [am-view-item~='item'] {
         display: flex;
-        animation: am-show-preview 0.5s ease both;
+        animation: iroute-show-preview 0.5s ease both;
       }
     }
 
@@ -284,7 +326,7 @@
   }
 
   // 弹出窗口
-  [am-view][am-mode~='pop-up'] {
+  .iroute-view[am-mode~='pop-up'] {
     overflow: hidden;
 
     .iroute-view-body {
@@ -297,7 +339,7 @@
       pointer-events: none;
     }
 
-    @keyframes am-show-pop-up {
+    @keyframes iroute-show-pop-up {
       0% {
         opacity: 0;
         transform: translate3d(0, 0, 0) scale(0.95);
@@ -307,7 +349,7 @@
         transform: translate3d(0, 0, 0);
       }
     }
-    @keyframes am-hide-pop-up {
+    @keyframes iroute-hide-pop-up {
       0% {
         opacity: 1;
         transform: translate3d(0, 0, 0);
@@ -347,50 +389,56 @@
         transition: all 0.35s;
       }
     }
-    &[am-view='list'],
+    // list 视图：item 即便始终挂载也要隐藏（无 v-if 时需 CSS 兜底）
+    &[am-view='list'] {
+      & > [am-view-item~='item'] {
+        display: none;
+      }
+    }
     &[am-view='listing'] {
       & > [am-view-item~='item'] {
         display: flex;
         opacity: 0;
         & > * {
-          animation: am-hide-pop-up 0.35s ease both;
+          animation: iroute-hide-pop-up 0.35s ease both;
         }
       }
     }
-    &[am-view='item'],
+    &[am-view='item'] {
+      & > [am-view-item~='item'] {
+        display: flex;
+        opacity: 1;
+      }
+    }
     &[am-view='iteming'] {
       & > [am-view-item~='item'] {
         display: flex;
         opacity: 1;
         & > * {
-          animation: am-show-pop-up 0.35s ease both;
+          animation: iroute-show-pop-up 0.35s ease both;
         }
       }
     }
   }
 
-  // 窗口模式
-  [am-view][am-mode~='window'] {
+  // 窗口模式：item 撑满整个浏览器窗口的全屏 overlay，行为类似 pop-up 但内容撑满
+  .iroute-view[am-mode~='window'] {
     overflow: hidden;
 
-    @keyframes am-show-default {
+    @keyframes iroute-show-window {
       0% {
         opacity: 0;
-        transform: translate3d(1em, 0, 0);
       }
       100% {
         opacity: 1;
-        transform: translate3d(0, 0, 0);
       }
     }
-    @keyframes am-hide-default {
+    @keyframes iroute-hide-window {
       0% {
         opacity: 1;
-        transform: translate3d(0, 0, 0);
       }
       100% {
         opacity: 0;
-        transform: translate3d(1em, 0, 0);
       }
     }
 
@@ -409,31 +457,42 @@
       &[am-view-item~='row'] {
         flex-direction: row !important;
       }
+
+      &[am-view-item~='item'] {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 100;
+        pointer-events: none;
+      }
     }
     &[am-view='list'] {
-      [am-view-item~='list'] {
+      & > [am-view-item~='list'] {
         flex-direction: column;
         display: flex;
-        animation: am-show-default 0s ease both;
       }
     }
     &[am-view='listing'] {
-      [am-view-item~='item'] {
-        flex-direction: column;
+      & > [am-view-item~='item'] {
         display: flex;
-        animation: am-hide-default 0s ease-in-out both;
+        & > * {
+          animation: iroute-hide-window 0.3s ease both;
+        }
       }
     }
     &[am-view='item'] {
-      [am-view-item~='item'] {
+      & > [am-view-item~='item'] {
         display: flex;
-        animation: am-show-default 0s ease both;
       }
     }
     &[am-view='iteming'] {
-      [am-view-item~='list'] {
+      & > [am-view-item~='item'] {
         display: flex;
-        animation: am-hide-default 0s ease-in-out both;
+        & > * {
+          animation: iroute-show-window 0.3s ease both;
+        }
       }
     }
   }