Optimized the root .gitignore to exclude virtual environments, node modules, and temp folders to ensure clean and lightweight version tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
车辆管理样式(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 等变量即可全局换色,无需改组件样式文件。