- 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: 下拉刷新 / 上拉加载 - 产品首页: 添加业务联系 - 文档: 清理过时文件,补充缺失规范章节
2.5 KiB
2.5 KiB
name, description
| name | description |
|---|---|
| preset-attributify | Group utilities in HTML attributes instead of class |
Preset Attributify
Group utilities in HTML attributes for better readability.
Installation
import { defineConfig, presetAttributify, presetWind3 } from 'unocss'
export default defineConfig({
presets: [
presetWind3(),
presetAttributify(),
],
})
Basic Usage
Instead of long class strings:
<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200">
Button
</button>
Group by prefix in attributes:
<button
bg="blue-400 hover:blue-500"
text="sm white"
font="mono light"
p="y-2 x-4"
border="2 rounded blue-200"
>
Button
</button>
Prefix Self-Referencing
For utilities matching their prefix (flex, grid, border), use ~:
<!-- Before -->
<button class="border border-red">Button</button>
<!-- After -->
<button border="~ red">Button</button>
Valueless Attributify
Use utilities as boolean attributes:
<div m-2 rounded text-teal-400 />
Handling Property Conflicts
When attribute names conflict with HTML properties:
<!-- Use un- prefix -->
<a un-text="red">Text color to red</a>
Enforce Prefix
presetAttributify({
prefix: 'un-',
prefixedOnly: true,
})
Options
presetAttributify({
strict: false, // Only generate CSS for attributify
prefix: 'un-', // Attribute prefix
prefixedOnly: false, // Require prefix for all
nonValuedAttribute: true, // Support valueless attributes
ignoreAttributes: [], // Attributes to ignore
trueToNonValued: false, // Treat value="true" as valueless
})
TypeScript Support
Vue 3
// html.d.ts
declare module '@vue/runtime-dom' {
interface HTMLAttributes { [key: string]: any }
}
declare module '@vue/runtime-core' {
interface AllowedComponentProps { [key: string]: any }
}
export {}
React
import type { AttributifyAttributes } from '@unocss/preset-attributify'
declare module 'react' {
interface HTMLAttributes<T> extends AttributifyAttributes {}
}
JSX Support
For JSX where <div foo> becomes <div foo={true}>:
import { transformerAttributifyJsx } from 'unocss'
export default defineConfig({
transformers: [
transformerAttributifyJsx(),
],
})
Important: Only use attributify if uno.config.* shows presetAttributify() is enabled.