# 车辆管理样式（ONE-OS Web）

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

## 文件说明

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

## 引入方式

### 1. 静态 HTML

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

页面根节点：

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

### 2. Vite / Webpack

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

### 3. Axhub / JSX 原型（当前仓库）

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

若部署路径不同，可设置：

```js
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` 等变量即可全局换色，无需改组件样式文件。