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

2.5 KiB

Raw Blame History

name, description

name	description
nuxt-integration	Using Pinia with Nuxt - auto-imports, SSR, and best practices

Nuxt Integration

Pinia works seamlessly with Nuxt 3/4, handling SSR, serialization, and XSS protection automatically.

Installation

npx nuxi@latest module add pinia

This installs both @pinia/nuxt and pinia. If pinia isn't installed, add it manually.

npm users: If you get ERESOLVE unable to resolve dependency tree, add to package.json:
"overrides": { "vue": "latest" }

Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
})

Auto Imports

These are automatically available:

usePinia() - get pinia instance
defineStore() - define stores
storeToRefs() - extract reactive refs
acceptHMRUpdate() - HMR support

All stores in app/stores/ (Nuxt 4) or stores/ are auto-imported.

Custom Store Directories

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
  pinia: {
    storesDirs: ['./stores/**', './custom-folder/stores/**'],
  },
})

Fetching Data in Pages

Use callOnce() for SSR-friendly data fetching:

<script setup>
const store = useStore()

// Run once, data persists across navigations
await callOnce('user', () => store.fetchUser())
</script>

<script setup>
const store = useStore()

// Refetch on every navigation (like useFetch)
await callOnce('user', () => store.fetchUser(), { mode: 'navigation' })
</script>

Using Stores Outside Components

In navigation guards, middlewares, or other stores, pass the pinia instance:

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to) => {
  const nuxtApp = useNuxtApp()
  const store = useStore(nuxtApp.$pinia)

  if (to.meta.requiresAuth && !store.isLoggedIn) {
    return navigateTo('/login')
  }
})

Most of the time, you don't need this - just use stores in components or other injection-aware contexts.

Pinia Plugins with Nuxt

Create a Nuxt plugin:

// plugins/myPiniaPlugin.ts
import { PiniaPluginContext } from 'pinia'

function MyPiniaPlugin({ store }: PiniaPluginContext) {
  store.$subscribe((mutation) => {
    console.log(`[🍍 ${mutation.storeId}]: ${mutation.type}`)
  })
  return { creationTime: new Date() }
}

export default defineNuxtPlugin(({ $pinia }) => {
  $pinia.use(MyPiniaPlugin)
})

2.5 KiB Raw Blame History