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.2 KiB

Raw Blame History

name, description

name	description
unocss-vite-integration	Setting up UnoCSS with Vite and framework-specific tips

UnoCSS Vite Integration

The Vite plugin is the most common way to use UnoCSS.

Installation

pnpm add -D unocss

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

Create config file:

// uno.config.ts
import { defineConfig, presetWind3 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
  ],
})

Add to entry:

// main.ts
import 'virtual:uno.css'

Modes

global (default)

Standard mode - generates global CSS injected via uno.css import.

import 'virtual:uno.css'

vue-scoped

Injects generated CSS into Vue SFC <style scoped>.

UnoCSS({
  mode: 'vue-scoped',
})

shadow-dom

For Web Components using Shadow DOM:

UnoCSS({
  mode: 'shadow-dom',
})

Add placeholder in component styles:

const template = document.createElement('template')
template.innerHTML = `
<style>
  :host { ... }
  @unocss-placeholder
</style>
<div class="m-1em">...</div>
`

per-module (experimental)

Generates CSS per module with optional scoping.

dist-chunk (experimental)

Generates CSS per chunk on build for MPA.

DevTools Support

Edit classes directly in browser DevTools:

import 'virtual:uno.css'
import 'virtual:unocss-devtools'

Warning: Uses MutationObserver to detect changes. Dynamic classes from scripts will also be included.

Framework-Specific Setup

React

// vite.config.ts
import React from '@vitejs/plugin-react'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(), // Must be before React when using attributify
    React(),
  ],
}

Note: Remove tsc from build script if using @unocss/preset-attributify.

Vue

Works out of the box with @vitejs/plugin-vue.

Svelte

import { svelte } from '@sveltejs/vite-plugin-svelte'
import extractorSvelte from '@unocss/extractor-svelte'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      extractors: [extractorSvelte()],
    }),
    svelte(),
  ],
}

Supports class:foo and class:foo={bar} syntax.

SvelteKit

Same as Svelte, use sveltekit() from @sveltejs/kit/vite.

Solid

import UnoCSS from 'unocss/vite'
import solidPlugin from 'vite-plugin-solid'

export default {
  plugins: [
    UnoCSS(),
    solidPlugin(),
  ],
}

Preact

import Preact from '@preact/preset-vite'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
    Preact(),
  ],
}

Elm

import Elm from 'vite-plugin-elm'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    Elm(),
    UnoCSS(),
  ],
}

Web Components (Lit)

UnoCSS({
  mode: 'shadow-dom',
  shortcuts: [
    { 'cool-blue': 'bg-blue-500 text-white' },
  ],
})

// my-element.ts
@customElement('my-element')
export class MyElement extends LitElement {
  static styles = css`
    :host { ... }
    @unocss-placeholder
  `
}

Supports part-[<part-name>]:<utility> for ::part styling.

Inspector

Visit http://localhost:5173/__unocss in dev mode to:

Inspect generated CSS rules
See applied classes per file
Test utilities in REPL

Legacy Browser Support

With @vitejs/plugin-legacy:

import legacy from '@vitejs/plugin-legacy'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      legacy: {
        renderModernChunks: false,
      },
    }),
    legacy({
      targets: ['defaults', 'not IE 11'],
      renderModernChunks: false,
    }),
  ],
}

VanillaJS / TypeScript

By default, .js and .ts files are not extracted. Configure to include:

// uno.config.ts
export default defineConfig({
  content: {
    pipeline: {
      include: [
        /\.(vue|svelte|[jt]sx|html)($|\?)/,
        'src/**/*.{js,ts}',
      ],
    },
  },
})

Or use magic comment in files:

// @unocss-include
export const classes = {
  active: 'bg-primary text-white',
}

4.2 KiB Raw Blame History