12451 b553c4e519 feat: API 统一 + 设备详情补全 + H5 导航优化

- API 路由统一: 移除 /api/h5/，统一 /api/pms/ 入口
- 二进制改名: api-server -> pms-api（与服务名一致）
- nginx: 合并 /api/ + /pms/api/ 为 /api/pms/
- 新增 docs/API.md 接口文档
- 后端: CabinetDetail 增加 rssi/pow_fail/address/soc 等字段
- Redis 管道批量读取仓体实时数据（SOC/电压/电流/功率）
- DB: 所有 TIMESTAMP 列改为 DATETIME（修复类型不匹配）
- 用户管理: 新增创建时间/修改时间列，状态改用 Switch
- 角色管理/用户管理: 操作按钮改为图标
- PC 设备详情: 基本信息补全 RSSI/ICCID/电源/地址
- PC 卡片: 通道统计改用 Lucide 图标，颜色统一
- PC 二维码: canvas 渲染，含编号文字，支持右键下载
- H5: 按 uni-app 规范修正导航（navigateTo 替代 reLaunch）
- H5: 详情页加返回导航条
- H5: 扫码支持摄像头（jsQR）+ ?id= 参数
- H5: 底部 tabBar 在所有页面常显
- H5: 首页统计改为 6 项（设备/通道/空闲/充电/充满/故障）
- H5: 下拉刷新 / 上拉加载
- 产品首页: 添加业务联系
- 文档: 清理过时文件，补充缺失规范章节

2026-07-04 04:03:02 +08:00

4.0 KiB

Raw Blame History

Async Component Lazy Hydration Strategies (Vue 3.5+)

Rule

In Vue 3.5+, use hydration strategies with async components to control when SSR-rendered components become interactive. Import hydration strategies individually for tree-shaking.

Why This Matters

In SSR applications, hydrating all components immediately can block the main thread and delay interactivity. Lazy hydration allows non-critical components to become interactive only when needed, improving Time to Interactive (TTI) metrics.

Available Hydration Strategies

hydrateOnIdle

Hydrates when the browser is idle using requestIdleCallback:

<script setup>
import { defineAsyncComponent, hydrateOnIdle } from 'vue'

// Good for non-critical, below-the-fold content
const AsyncFooter = defineAsyncComponent({
  loader: () => import('./Footer.vue'),
  hydrate: hydrateOnIdle()
})

// With max timeout (in case idle never occurs)
const AsyncSidebar = defineAsyncComponent({
  loader: () => import('./Sidebar.vue'),
  hydrate: hydrateOnIdle(5000) // Max 5 seconds
})
</script>

hydrateOnVisible

Hydrates when element enters the viewport via IntersectionObserver:

<script setup>
import { defineAsyncComponent, hydrateOnVisible } from 'vue'

// Good for content below the fold
const AsyncComments = defineAsyncComponent({
  loader: () => import('./Comments.vue'),
  hydrate: hydrateOnVisible()
})

// With root margin for earlier hydration
const AsyncRelatedPosts = defineAsyncComponent({
  loader: () => import('./RelatedPosts.vue'),
  hydrate: hydrateOnVisible({ rootMargin: '100px' })
})
</script>

hydrateOnMediaQuery

Hydrates when a media query matches:

<script setup>
import { defineAsyncComponent, hydrateOnMediaQuery } from 'vue'

// Only hydrate on mobile devices
const AsyncMobileMenu = defineAsyncComponent({
  loader: () => import('./MobileMenu.vue'),
  hydrate: hydrateOnMediaQuery('(max-width: 768px)')
})

// Only hydrate on desktop
const AsyncDesktopSidebar = defineAsyncComponent({
  loader: () => import('./DesktopSidebar.vue'),
  hydrate: hydrateOnMediaQuery('(min-width: 1024px)')
})
</script>

hydrateOnInteraction

Hydrates when user interacts with the component:

<script setup>
import { defineAsyncComponent, hydrateOnInteraction } from 'vue'

// Hydrate on click
const AsyncDropdown = defineAsyncComponent({
  loader: () => import('./Dropdown.vue'),
  hydrate: hydrateOnInteraction('click')
})

// Hydrate on multiple events
const AsyncTooltip = defineAsyncComponent({
  loader: () => import('./Tooltip.vue'),
  hydrate: hydrateOnInteraction(['mouseover', 'focus'])
})
</script>

Note: The triggering event is replayed after hydration completes, so user interaction is not lost.

Custom Hydration Strategy

import { defineAsyncComponent, type HydrationStrategy } from 'vue'

const hydrateAfterAnimation: HydrationStrategy = (hydrate, forEachElement) => {
  // Wait for page load animation to complete
  const timeout = setTimeout(hydrate, 1000)

  return () => clearTimeout(timeout) // Cleanup
}

const AsyncWidget = defineAsyncComponent({
  loader: () => import('./Widget.vue'),
  hydrate: hydrateAfterAnimation
})

Key Points

Hydration strategies only apply to SSR - they have no effect in client-only apps
Import strategies individually: import { hydrateOnIdle } from 'vue'
hydrateOnInteraction replays the triggering event after hydration
Use hydrateOnVisible for below-the-fold content
Use hydrateOnIdle for non-critical components
Use hydrateOnMediaQuery for device-specific components

Strategy Selection Guide

Component Type	Recommended Strategy
Footer, related content	`hydrateOnIdle`
Below-the-fold sections	`hydrateOnVisible`
Interactive widgets	`hydrateOnInteraction`
Mobile-only components	`hydrateOnMediaQuery`
Critical above-the-fold	No strategy (immediate)

References

Vue.js Async Components Documentation

4.0 KiB Raw Blame History