a27e3b8e43
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>
58 lines
1.4 KiB
Markdown
58 lines
1.4 KiB
Markdown
# 车辆管理样式（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` 等变量即可全局换色，无需改组件样式文件。
|