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

3.7 KiB

Raw Blame History

name, description

name	description
preset-icons	Pure CSS icons using Iconify with any icon set

Preset Icons

Use any icon as a pure CSS class, powered by Iconify.

Installation

pnpm add -D @unocss/preset-icons @iconify-json/[collection-name]

Example: @iconify-json/mdi for Material Design Icons, @iconify-json/carbon for Carbon icons.

import { defineConfig, presetIcons } from 'unocss'

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

Usage

Two naming conventions:

<prefix><collection>-<icon> → i-ph-anchor-simple-thin
<prefix><collection>:<icon> → i-ph:anchor-simple-thin

<!-- Phosphor anchor icon -->
<div class="i-ph-anchor-simple-thin" />

<!-- Material Design alarm with color -->
<div class="i-mdi-alarm text-orange-400" />

<!-- Large Vue logo -->
<div class="i-logos-vue text-3xl" />

<!-- Dynamic: Sun in light mode, Moon in dark -->
<button class="i-carbon-sun dark:i-carbon-moon" />

<!-- Hover effect -->
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

Browse icons at icones.js.org or Iconify.

Icon Modes

Icons automatically choose between mask (monochrome) and background-img (colorful).

Force Specific Mode

?mask - Render as mask (colorable with currentColor)
?bg - Render as background image (preserves original colors)

<!-- Original with colors -->
<div class="i-vscode-icons:file-type-light-pnpm" />

<!-- Force mask mode, apply custom color -->
<div class="i-vscode-icons:file-type-light-pnpm?mask text-red-300" />

Options

presetIcons({
  scale: 1.2,              // Scale relative to font size
  prefix: 'i-',            // Class prefix (default)
  mode: 'auto',            // 'auto' | 'mask' | 'bg'
  extraProperties: {
    'display': 'inline-block',
    'vertical-align': 'middle',
  },
  warn: true,              // Warn on missing icons
  autoInstall: true,       // Auto-install missing icon sets
  cdn: 'https://esm.sh/',  // CDN for browser usage
})

Custom Icon Collections

Inline SVGs

presetIcons({
  collections: {
    custom: {
      circle: '<svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="50"></circle></svg>',
    },
  }
})

Usage: <span class="i-custom:circle"></span>

File System Loader

import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'

presetIcons({
  collections: {
    'my-icons': FileSystemIconLoader(
      './assets/icons',
      svg => svg.replace(/#fff/, 'currentColor')
    ),
  }
})

Dynamic Import (Browser)

import presetIcons from '@unocss/preset-icons/browser'

presetIcons({
  collections: {
    carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
  }
})

Icon Customization

presetIcons({
  customizations: {
    // Transform SVG
    transform(svg, collection, icon) {
      return svg.replace(/#fff/, 'currentColor')
    },
    // Global sizing
    customize(props) {
      props.width = '2em'
      props.height = '2em'
      return props
    },
    // Per-collection
    iconCustomizer(collection, icon, props) {
      if (collection === 'mdi') {
        props.width = '2em'
      }
    }
  }
})

CSS Directive

Use icon() in CSS (requires transformer-directives):

.icon {
  background-image: icon('i-carbon-sun');
}
.icon-colored {
  background-image: icon('i-carbon-moon', '#fff');
}

Accessibility

<!-- With label -->
<a href="/profile" aria-label="Profile" class="i-ph:user-duotone"></a>

<!-- Decorative -->
<a href="/profile">
  <span aria-hidden="true" class="i-ph:user-duotone"></span>
  My Profile
</a>

3.7 KiB Raw Blame History