【交互思考】从混乱到丝滑：前端导航与同步弹窗的单例化 Demo 实现

1
<NuxtLink
2
  v-for="item in navItems"
3
  :key="item.label"
4
  class="nav-item"
5
  :class="{ 'active': item.isActive }"  <!-- 手动激活样式 -->
6
  :to="undefined"                     <!-- 禁用默认跳转 -->
7
  @click.prevent="handleNavClick(item)"  <!-- 阻止默认事件 -->
8
>
9
  {{ item.label }}
10
</NuxtLink>

1
async function handleNavClick(item: NavItem) {
2
  // 1. 埋点（通用化：替换业务字段为entityId）
3
  const triggerPage = route.path.split('/').pop() || '';
4
  trackEvent('nav:click', {
5
    entityId: route.params.entityId,
6
    triggerPage,
7
    targetPage: item.targetPage,
8
  });
9

10
  // 2. 同步状态判断（延迟100ms，等待表单异步同步）
11
  setTimeout(async () => {
12
    const isSyncing = syncStore.isSyncing || quoteStore.isQuoteSyncing;
13
    const targetPath = localePath(item.route);
14

15
    if (isSyncing) {
16
      // 触发弹窗事件（合并设计/报价事件）
17
      mitt.emit('sync:start', targetPath);
18
    } else {
19
      // 无同步，正常跳转
20
      await navigateTo(targetPath);
21
    }
22
  }, 100);
23
}

1
// 通用路由匹配：比较路由name和query（支持多参数）
2
const isRouteActive = (target: { name: string; query: Record<string, string> }) => {
3
  return (
4
    route.name === target.name &&
5
    JSON.stringify(route.query) === JSON.stringify(target.query)
6
  );
7
};
8

9
// 导航项计算属性（替换业务命名为通用section）
10
const navItems = computed(() => {
11
  const query = { ...route.query };
12
  return [
13
    {
14
      label: '设计模块',
15
      targetPage: 'design',
16
      route: { name: 'entity-entityId-design', query },
17
      isActive: isRouteActive({ name: 'entity-entityId-design', query }),
18
    },
19
    {
20
      label: '报价模块',
21
      targetPage: 'quote',
22
      route: { name: 'entity-entityId-quote', query },
23
      isActive: isRouteActive({ name: 'entity-entityId-quote', query }),
24
    },
25
  ];
26
});

1
<script setup lang="ts">
2
import { ref, watch } from 'vue';
3
import { useNuxtApp } from '#app';
4

5
const { $mitt: mitt } = useNuxtApp();
6
const visible = ref(false);
7
const targetPath = ref(''); // 目标路径（单例，新值覆盖旧值）
8

9
// 合并事件：design和quote同步都触发同一个处理函数
10
const handleSyncStart = (path: string) => {
11
  // 优化：避免同一路径重复触发
12
  if (targetPath.value === path) return;
13
  visible.value = true;
14
  targetPath.value = path;
15
};
16

17
// 监听两个事件，指向同一处理函数
18
mitt.on('design:sync-start', handleSyncStart);
19
mitt.on('quote:sync-start', handleSyncStart);
20

21
// 监听同步状态：所有同步完成后关闭弹窗并跳转
22
watch(
23
  () => [syncStore.isSyncing, quoteStore.isQuoteSyncing],
24
  (newStates) => {
25
    const allSynced = newStates.every(state => !state);
26
    if (allSynced && visible.value) {
27
      visible.value = false;
28
      navigateTo(targetPath.value); // 跳转至目标路径
29
      targetPath.value = ''; // 清空路径，避免二次跳转
30
    }
31
  },
32
  { deep: true }
33
);
34

35
// 组件卸载时清除监听（防止内存泄漏）
36
onUnmounted(() => {
37
  mitt.off('design:sync-start', handleSyncStart);
38
  mitt.off('quote:sync-start', handleSyncStart);
39
});
40
</script>
41

42
<template>
43
  <div v-if="visible" class="sync-modal">
44
    <div class="modal-content">
45
      <span>同步中，请稍候...</span>
46
    </div>
47
  </div>
48
</template>