Nginx-UI站点列表修改页的站点名称显示同步问题分析

Nginx-UI站点列表修改页的站点名称显示同步问题分析

问题背景

在Nginx-UI管理系统中，站点列表页面与站点编辑页面之间的数据同步是一个常见的技术挑战。当用户在站点编辑页面修改站点名称后，返回到站点列表页面时，经常会出现名称显示不同步的问题。这种问题不仅影响用户体验，还可能造成管理混乱。

技术架构分析

前端组件结构

Nginx-UI采用Vue 3 + TypeScript + Ant Design Vue的技术栈，站点管理功能主要包含以下核心组件：

数据流分析

// 站点列表数据获取逻辑
const curd = ref()
const namespaceId = ref(Number.parseInt(route.query.namespace_id as string) || 0)

// 编辑页面跳转逻辑
@edit-item="record => router.push({
  path: `/sites/${encodeURIComponent(record.name)}`,
})"

同步问题根源

1. 组件间状态隔离

站点列表和编辑页面使用独立的状态管理，缺乏实时同步机制：

// 列表页面使用独立的API调用
:api="site"
:columns="columns"

// 编辑页面使用Pinia store
const editorStore = useSiteEditorStore()
const { data, loading } = storeToRefs(editorStore)

2. 页面导航缺乏状态更新

当从编辑页面返回列表页面时，没有触发数据重新加载：

// 返回按钮逻辑 - 缺少数据刷新
<AButton @click="$router.push('/sites/list')">
  {{ $gettext('Back') }}
</AButton>

3. 缓存策略问题

组件可能使用了缓存数据，而没有及时从服务器获取最新状态。

解决方案设计

方案一：事件总线同步

// 创建全局事件总线
const eventBus = mitt()

// 编辑页面保存成功后触发事件
async function save() {
  try {
    await editorStore.save()
    message.success($gettext('Saved successfully'))
    eventBus.emit('site-updated', { name: name.value })
  } catch {
    // do nothing
  }
}

// 列表页面监听事件
onMounted(() => {
  eventBus.on('site-updated', () => {
    curd.value?.refresh()
  })
})

方案二：路由守卫数据刷新

// 使用路由守卫在返回时刷新数据
router.beforeEach((to, from) => {
  if (from.path.includes('/sites/') && to.path === '/sites/list') {
    // 从站点编辑页面返回列表页面时刷新数据
    curd.value?.refresh()
  }
})

方案三：Pinia状态共享

// 创建共享的站点状态store
export const useSiteStore = defineStore('site', {
  state: () => ({
    lastUpdated: null as number | null,
    sites: [] as Site[]
  }),
  actions: {
    async refreshSites() {
      const response = await site.getList()
      this.sites = response.data
      this.lastUpdated = Date.now()
    }
  }
})

实现细节

优化后的编辑页面保存逻辑

async function save() {
  try {
    await editorStore.save()
    message.success($gettext('Saved successfully'))
    
    // 触发全局更新事件
    useEventBus().emit('site:updated', {
      name: name.value,
      timestamp: Date.now()
    })
    
    // 可选：直接刷新列表数据
    if (window.opener) {
      window.opener.postMessage({ type: 'site-updated' }, '*')
    }
  } catch (error) {
    console.error('Save failed:', error)
  }
}

列表页面的事件监听

// 在SiteList.vue中添加事件监听
onMounted(() => {
  // 监听站点更新事件
  useEventBus().on('site:updated', () => {
    curd.value?.refresh()
  })
  
  // 监听页面可见性变化
  document.addEventListener('visibilitychange', () => {
    if (!document.hidden) {
      curd.value?.refresh()
    }
  })
})

性能优化考虑

数据更新策略对比

策略类型	实时性	性能影响	实现复杂度	适用场景
事件驱动	高	低	中	单页面应用内通信
轮询检查	中	高	低	简单场景，数据变化不频繁
WebSocket	极高	中	高	需要实时同步的复杂系统
路由守卫	中	低	低	页面导航时同步

推荐实施方案

测试验证方案

单元测试用例

describe('站点名称同步测试', () => {
  it('应该正确触发站点更新事件', async () => {
    const eventBus = useEventBus()
    const spy = vi.spyOn(eventBus, 'emit')
    
    await saveSiteChanges()
    expect(spy).toHaveBeenCalledWith('site:updated', expect.any(Object))
  })
  
  it('应该在收到更新事件后刷新数据', async () => {
    const curdRefresh = vi.fn()
    const curd = { value: { refresh: curdRefresh } }
    
    mountSiteList({ curd })
    eventBus.emit('site:updated')
    
    await nextTick()
    expect(curdRefresh).toHaveBeenCalled()
  })
})

集成测试场景

1. 修改站点名称并返回列表
2. 多个浏览器标签页同时操作
3. 网络延迟情况下的数据一致性
4. 并发修改冲突处理

总结与最佳实践

Nginx-UI站点名称同步问题的解决需要综合考虑前端架构、状态管理和用户体验。通过实现合理的事件驱动机制，结合路由守卫和状态共享，可以有效地解决数据同步问题。

关键实践要点：

• 使用事件总线进行组件间通信
• 在页面可见性变化时自动刷新数据
• 实现适当的数据缓存策略
• 提供用户操作反馈机制
• 建立完善的测试覆盖

通过上述方案的实施，可以确保Nginx-UI站点管理系统在各个页面间的数据一致性，提升用户体验和管理效率。