Files

车辆管理样式ONE-OS Web

web端/车辆管理.jsx 页面规范一致,可直接用于前端构建。

文件说明

文件 用途
vm-tokens.css 设计令牌(:root CSS 变量)
vehicle-management.css 页面组件样式筛选、表格、详情、Ant 覆盖)
index.css 推荐入口,聚合上述文件

引入方式

1. 静态 HTML

<link rel="stylesheet" href="https://unpkg.com/antd@5/dist/reset.css" />
<link rel="stylesheet" href="./web端/styles/index.css" />

页面根节点:

<div class="vm-page">
  <!-- 列表 / 详情内容 -->
</div>

2. Vite / Webpack

import 'antd/dist/reset.css';
import '../web端/styles/index.css';

3. Axhub / JSX 原型(当前仓库)

车辆管理.jsx 会在运行时自动注入 styles/vehicle-management.css(已 @import tokens

若部署路径不同,可设置:

window.VM_STYLESHEET_HREF = '/assets/styles/vehicle-management.css';

类名约定

  • 页面容器:.vm-page
  • 详情页:.vm-page.vm-detail-shell
  • 筛选:.vm-filter-card.vm-filter-grid.vm-filter-field
  • 表格:.vm-table-section.vm-table-card.vm-list-table
  • 弹窗Modal 增加 wrapClassName="vm-modal-wrap"

定制主题

修改 vm-tokens.css--vm-color-primary 等变量即可全局换色,无需改组件样式文件。