feat: sync full workspace including web modules, docs, and configurations to Gitea
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>
This commit is contained in:
王冕
57
web端/styles/README.md
Normal file
57
web端/styles/README.md
Normal file
@@ -0,0 +1,57 @@
|
||||
# 车辆管理样式（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` 等变量即可全局换色，无需改组件样式文件。
|
||||
14
web端/styles/index.css
Normal file
14
web端/styles/index.css
Normal file
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* ONE-OS Web 端 — 车辆管理样式入口
|
||||
* 构建时在入口 HTML/JS 中引入本文件即可
|
||||
*
|
||||
* @example HTML
|
||||
* <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@5/dist/reset.css" />
|
||||
* <link rel="stylesheet" href="./styles/index.css" />
|
||||
*
|
||||
* @example Webpack / Vite
|
||||
* import 'antd/dist/reset.css';
|
||||
* import './styles/index.css';
|
||||
*/
|
||||
|
||||
@import url('./vehicle-management.css');
|
||||
7
web端/styles/oneos-arco-theme-README.md
Normal file
7
web端/styles/oneos-arco-theme-README.md
Normal file
@@ -0,0 +1,7 @@
|
||||
# ONEOS Arco 主题（@arco-themes/vue-oneos）
|
||||
|
||||
来源：[npm @arco-themes/vue-oneos](https://www.npmjs.com/package/@arco-themes/vue-oneos)
|
||||
|
||||
`web端/styles/oneos-arco-theme.css` 为官方 theme 副本，供后续接入 Vue/Arco 时参考。
|
||||
|
||||
**站点信息页**当前使用列表页绿色规范（`H2_PAGE_STYLE`），未启用 OneOS 蓝主题。
|
||||
509
web端/styles/oneos-arco-theme.css
Normal file
509
web端/styles/oneos-arco-theme.css
Normal file
@@ -0,0 +1,509 @@
|
||||
body {
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
body {
|
||||
--color-white: #ffffff;
|
||||
--color-black: #000000;
|
||||
--color-border: rgb(var(--gray-3));
|
||||
--color-bg-popup: var(--color-bg-5);
|
||||
--color-bg-1: #fff;
|
||||
--color-bg-2: #fff;
|
||||
--color-bg-3: #fff;
|
||||
--color-bg-4: #fff;
|
||||
--color-bg-5: #fff;
|
||||
--color-bg-white: #fff;
|
||||
--color-neutral-1: rgb(var(--gray-1));
|
||||
--color-neutral-2: rgb(var(--gray-2));
|
||||
--color-neutral-3: rgb(var(--gray-3));
|
||||
--color-neutral-4: rgb(var(--gray-4));
|
||||
--color-neutral-5: rgb(var(--gray-5));
|
||||
--color-neutral-6: rgb(var(--gray-6));
|
||||
--color-neutral-7: rgb(var(--gray-7));
|
||||
--color-neutral-8: rgb(var(--gray-8));
|
||||
--color-neutral-9: rgb(var(--gray-9));
|
||||
--color-neutral-10: rgb(var(--gray-10));
|
||||
--color-text-1: #121314;
|
||||
--color-text-2: #5c5c5c;
|
||||
--color-text-3: #909399;
|
||||
--color-text-4: #c2c2c2;
|
||||
--color-fill-1: #fafafa;
|
||||
--color-fill-2: var(--color-neutral-2);
|
||||
--color-fill-3: var(--color-neutral-3);
|
||||
--color-fill-4: var(--color-neutral-4);
|
||||
--color-border-1: #ebeef5;
|
||||
--color-border-2: #e5e6eb;
|
||||
--color-border-3: #dcdfe6;
|
||||
--color-border-4: #cdd0d6;
|
||||
--color-primary-light-1: rgb(var(--primary-1));
|
||||
--color-primary-light-2: rgb(var(--primary-2));
|
||||
--color-primary-light-3: rgb(var(--primary-3));
|
||||
--color-primary-light-4: rgb(var(--primary-4));
|
||||
--color-secondary: var(--color-neutral-2);
|
||||
--color-secondary-hover: var(--color-neutral-3);
|
||||
--color-secondary-active: var(--color-neutral-4);
|
||||
--color-secondary-disabled: var(--color-neutral-1);
|
||||
--color-danger-light-1: rgb(var(--danger-1));
|
||||
--color-danger-light-2: rgb(var(--danger-2));
|
||||
--color-danger-light-3: rgb(var(--danger-3));
|
||||
--color-danger-light-4: rgb(var(--danger-4));
|
||||
--color-success-light-1: rgb(var(--success-1));
|
||||
--color-success-light-2: rgb(var(--success-2));
|
||||
--color-success-light-3: rgb(var(--success-3));
|
||||
--color-success-light-4: rgb(var(--success-4));
|
||||
--color-warning-light-1: rgb(var(--warning-1));
|
||||
--color-warning-light-2: rgb(var(--warning-2));
|
||||
--color-warning-light-3: rgb(var(--warning-3));
|
||||
--color-warning-light-4: rgb(var(--warning-4));
|
||||
--color-link-light-1: rgb(var(--link-1));
|
||||
--color-link-light-2: rgb(var(--link-2));
|
||||
--color-link-light-3: rgb(var(--link-3));
|
||||
--color-link-light-4: rgb(var(--link-4));
|
||||
--border-radius-none: 0;
|
||||
--border-radius-small: 4px;
|
||||
--border-radius-medium: 6px;
|
||||
--border-radius-large: 8px;
|
||||
--border-radius-circle: 50%;
|
||||
--color-tooltip-bg: rgb(var(--gray-10));
|
||||
--color-spin-layer-bg: rgba(255, 255, 255, 0.6);
|
||||
--color-menu-dark-bg: #232324;
|
||||
--color-menu-light-bg: #ffffff;
|
||||
--color-menu-dark-hover: rgba(255, 255, 255, 0.04);
|
||||
--color-mask-bg: rgba(29, 33, 41, 0.6);
|
||||
}
|
||||
body[arco-theme='dark'] {
|
||||
--color-black: #000000;
|
||||
--color-border: #333335;
|
||||
--color-bg-1: #17171a;
|
||||
--color-bg-2: #232324;
|
||||
--color-bg-3: #2a2a2b;
|
||||
--color-bg-4: #313132;
|
||||
--color-bg-5: #373739;
|
||||
--color-bg-white: #f6f6f6;
|
||||
--color-text-1: rgba(255, 255, 255, 0.9);
|
||||
--color-text-2: rgba(255, 255, 255, 0.7);
|
||||
--color-text-3: rgba(255, 255, 255, 0.5);
|
||||
--color-text-4: rgba(255, 255, 255, 0.3);
|
||||
--color-fill-1: rgba(255, 255, 255, 0.04);
|
||||
--color-fill-2: rgba(255, 255, 255, 0.08);
|
||||
--color-fill-3: rgba(255, 255, 255, 0.12);
|
||||
--color-fill-4: rgba(255, 255, 255, 0.16);
|
||||
--color-border-1: var(--color-neutral-2);
|
||||
--color-border-2: var(--color-neutral-3);
|
||||
--color-border-3: var(--color-neutral-4);
|
||||
--color-border-4: var(--color-neutral-6);
|
||||
--color-primary-light-1: rgba(var(--primary-6), 0.2);
|
||||
--color-primary-light-2: rgba(var(--primary-6), 0.35);
|
||||
--color-primary-light-3: rgba(var(--primary-6), 0.5);
|
||||
--color-primary-light-4: rgba(var(--primary-6), 0.65);
|
||||
--color-secondary: rgba(var(--gray-9), 0.08);
|
||||
--color-secondary-hover: rgba(var(--gray-8), 0.16);
|
||||
--color-secondary-active: rgba(var(--gray-7), 0.24);
|
||||
--color-secondary-disabled: rgba(var(--gray-9), 0.08);
|
||||
--color-danger-light-1: rgba(var(--danger-6), 0.2);
|
||||
--color-danger-light-2: rgba(var(--danger-6), 0.35);
|
||||
--color-danger-light-3: rgba(var(--danger-6), 0.5);
|
||||
--color-danger-light-4: rgba(var(--danger-6), 0.65);
|
||||
--color-success-light-1: rgba(var(--success-6), 0.2);
|
||||
--color-success-light-2: rgba(var(--success-6), 0.35);
|
||||
--color-success-light-3: rgba(var(--success-6), 0.5);
|
||||
--color-success-light-4: rgba(var(--success-6), 0.65);
|
||||
--color-warning-light-1: rgba(var(--warning-6), 0.2);
|
||||
--color-warning-light-2: rgba(var(--warning-6), 0.35);
|
||||
--color-warning-light-3: rgba(var(--warning-6), 0.5);
|
||||
--color-warning-light-4: rgba(var(--warning-6), 0.65);
|
||||
--color-link-light-1: rgba(var(--link-6), 0.2);
|
||||
--color-link-light-2: rgba(var(--link-6), 0.35);
|
||||
--color-link-light-3: rgba(var(--link-6), 0.5);
|
||||
--color-link-light-4: rgba(var(--link-6), 0.65);
|
||||
--color-tooltip-bg: #373739;
|
||||
--color-spin-layer-bg: rgba(51, 51, 51, 0.6);
|
||||
--color-menu-dark-bg: #232324;
|
||||
--color-menu-light-bg: #232324;
|
||||
--color-menu-dark-hover: var(--color-fill-2);
|
||||
--color-mask-bg: rgba(23, 23, 26, 0.6);
|
||||
}
|
||||
body {
|
||||
--red-1: 255, 236, 232;
|
||||
--red-2: 253, 205, 197;
|
||||
--red-3: 251, 172, 163;
|
||||
--red-4: 249, 137, 129;
|
||||
--red-5: 247, 101, 96;
|
||||
--red-6: 245, 63, 63;
|
||||
--red-7: 203, 39, 45;
|
||||
--red-8: 161, 21, 30;
|
||||
--red-9: 119, 8, 19;
|
||||
--red-10: 77, 0, 10;
|
||||
--orangered-1: 255, 243, 232;
|
||||
--orangered-2: 253, 221, 195;
|
||||
--orangered-3: 252, 197, 159;
|
||||
--orangered-4: 250, 172, 123;
|
||||
--orangered-5: 249, 144, 87;
|
||||
--orangered-6: 247, 114, 52;
|
||||
--orangered-7: 204, 81, 32;
|
||||
--orangered-8: 162, 53, 17;
|
||||
--orangered-9: 119, 31, 6;
|
||||
--orangered-10: 77, 14, 0;
|
||||
--orange-1: 255, 247, 232;
|
||||
--orange-2: 255, 228, 186;
|
||||
--orange-3: 255, 207, 139;
|
||||
--orange-4: 255, 182, 93;
|
||||
--orange-5: 255, 154, 46;
|
||||
--orange-6: 255, 125, 0;
|
||||
--orange-7: 210, 95, 0;
|
||||
--orange-8: 166, 69, 0;
|
||||
--orange-9: 121, 46, 0;
|
||||
--orange-10: 77, 27, 0;
|
||||
--gold-1: 255, 252, 232;
|
||||
--gold-2: 253, 244, 191;
|
||||
--gold-3: 252, 233, 150;
|
||||
--gold-4: 250, 220, 109;
|
||||
--gold-5: 249, 204, 69;
|
||||
--gold-6: 247, 186, 30;
|
||||
--gold-7: 204, 146, 19;
|
||||
--gold-8: 162, 109, 10;
|
||||
--gold-9: 119, 75, 4;
|
||||
--gold-10: 77, 45, 0;
|
||||
--yellow-1: 254, 255, 232;
|
||||
--yellow-2: 254, 254, 190;
|
||||
--yellow-3: 253, 250, 148;
|
||||
--yellow-4: 252, 242, 107;
|
||||
--yellow-5: 251, 232, 66;
|
||||
--yellow-6: 250, 220, 25;
|
||||
--yellow-7: 207, 175, 15;
|
||||
--yellow-8: 163, 132, 8;
|
||||
--yellow-9: 120, 93, 3;
|
||||
--yellow-10: 77, 56, 0;
|
||||
--lime-1: 252, 255, 232;
|
||||
--lime-2: 237, 248, 187;
|
||||
--lime-3: 220, 241, 144;
|
||||
--lime-4: 201, 233, 104;
|
||||
--lime-5: 181, 226, 65;
|
||||
--lime-6: 159, 219, 29;
|
||||
--lime-7: 126, 183, 18;
|
||||
--lime-8: 95, 148, 10;
|
||||
--lime-9: 67, 112, 4;
|
||||
--lime-10: 42, 77, 0;
|
||||
--green-1: 232, 255, 234;
|
||||
--green-2: 175, 240, 181;
|
||||
--green-3: 123, 225, 136;
|
||||
--green-4: 76, 210, 99;
|
||||
--green-5: 35, 195, 67;
|
||||
--green-6: 0, 180, 42;
|
||||
--green-7: 0, 154, 41;
|
||||
--green-8: 0, 128, 38;
|
||||
--green-9: 0, 102, 34;
|
||||
--green-10: 0, 77, 28;
|
||||
--cyan-1: 232, 255, 251;
|
||||
--cyan-2: 183, 244, 236;
|
||||
--cyan-3: 137, 233, 224;
|
||||
--cyan-4: 94, 223, 214;
|
||||
--cyan-5: 55, 212, 207;
|
||||
--cyan-6: 20, 201, 201;
|
||||
--cyan-7: 13, 165, 170;
|
||||
--cyan-8: 7, 130, 139;
|
||||
--cyan-9: 3, 97, 108;
|
||||
--cyan-10: 0, 66, 77;
|
||||
--blue-1: 232, 247, 255;
|
||||
--blue-2: 195, 231, 254;
|
||||
--blue-3: 159, 212, 253;
|
||||
--blue-4: 123, 192, 252;
|
||||
--blue-5: 87, 169, 251;
|
||||
--blue-6: 52, 145, 250;
|
||||
--blue-7: 32, 108, 207;
|
||||
--blue-8: 17, 75, 163;
|
||||
--blue-9: 6, 48, 120;
|
||||
--blue-10: 0, 26, 77;
|
||||
--arcoblue-1: 232, 243, 255;
|
||||
--arcoblue-2: 190, 218, 255;
|
||||
--arcoblue-3: 148, 191, 255;
|
||||
--arcoblue-4: 106, 161, 255;
|
||||
--arcoblue-5: 64, 128, 255;
|
||||
--arcoblue-6: 22, 93, 255;
|
||||
--arcoblue-7: 14, 66, 210;
|
||||
--arcoblue-8: 7, 44, 166;
|
||||
--arcoblue-9: 3, 26, 121;
|
||||
--arcoblue-10: 0, 13, 77;
|
||||
--purple-1: 245, 232, 255;
|
||||
--purple-2: 221, 190, 246;
|
||||
--purple-3: 195, 150, 237;
|
||||
--purple-4: 168, 113, 227;
|
||||
--purple-5: 141, 78, 218;
|
||||
--purple-6: 114, 46, 209;
|
||||
--purple-7: 85, 29, 176;
|
||||
--purple-8: 60, 16, 143;
|
||||
--purple-9: 39, 6, 110;
|
||||
--purple-10: 22, 0, 77;
|
||||
--pinkpurple-1: 255, 232, 251;
|
||||
--pinkpurple-2: 247, 186, 239;
|
||||
--pinkpurple-3: 240, 142, 230;
|
||||
--pinkpurple-4: 232, 101, 223;
|
||||
--pinkpurple-5: 225, 62, 219;
|
||||
--pinkpurple-6: 217, 26, 217;
|
||||
--pinkpurple-7: 176, 16, 182;
|
||||
--pinkpurple-8: 138, 9, 147;
|
||||
--pinkpurple-9: 101, 3, 112;
|
||||
--pinkpurple-10: 66, 0, 77;
|
||||
--magenta-1: 255, 232, 241;
|
||||
--magenta-2: 253, 194, 219;
|
||||
--magenta-3: 251, 157, 199;
|
||||
--magenta-4: 249, 121, 183;
|
||||
--magenta-5: 247, 84, 168;
|
||||
--magenta-6: 245, 49, 157;
|
||||
--magenta-7: 203, 30, 131;
|
||||
--magenta-8: 161, 16, 105;
|
||||
--magenta-9: 119, 6, 79;
|
||||
--magenta-10: 77, 0, 52;
|
||||
--gray-1: 247, 248, 250;
|
||||
--gray-2: 242, 243, 245;
|
||||
--gray-3: 229, 230, 235;
|
||||
--gray-4: 201, 205, 212;
|
||||
--gray-5: 169, 174, 184;
|
||||
--gray-6: 134, 144, 156;
|
||||
--gray-7: 107, 119, 133;
|
||||
--gray-8: 78, 89, 105;
|
||||
--gray-9: 39, 46, 59;
|
||||
--gray-10: 29, 33, 41;
|
||||
--primary-1: var(--arcoblue-1);
|
||||
--primary-2: var(--arcoblue-2);
|
||||
--primary-3: var(--arcoblue-3);
|
||||
--primary-4: var(--arcoblue-4);
|
||||
--primary-5: var(--arcoblue-5);
|
||||
--primary-6: var(--arcoblue-6);
|
||||
--primary-7: var(--arcoblue-7);
|
||||
--primary-8: var(--arcoblue-8);
|
||||
--primary-9: var(--arcoblue-9);
|
||||
--primary-10: var(--arcoblue-10);
|
||||
--link-1: var(--arcoblue-1);
|
||||
--link-2: var(--arcoblue-2);
|
||||
--link-3: var(--arcoblue-3);
|
||||
--link-4: var(--arcoblue-4);
|
||||
--link-5: var(--arcoblue-5);
|
||||
--link-6: var(--arcoblue-6);
|
||||
--link-7: var(--arcoblue-7);
|
||||
--link-8: var(--arcoblue-8);
|
||||
--link-9: var(--arcoblue-9);
|
||||
--link-10: var(--arcoblue-10);
|
||||
--success-1: var(--green-1);
|
||||
--success-2: var(--green-2);
|
||||
--success-3: var(--green-3);
|
||||
--success-4: var(--green-4);
|
||||
--success-5: var(--green-5);
|
||||
--success-6: var(--green-6);
|
||||
--success-7: var(--green-7);
|
||||
--success-8: var(--green-8);
|
||||
--success-9: var(--green-9);
|
||||
--success-10: var(--green-10);
|
||||
--danger-1: var(--red-1);
|
||||
--danger-2: var(--red-2);
|
||||
--danger-3: var(--red-3);
|
||||
--danger-4: var(--red-4);
|
||||
--danger-5: var(--red-5);
|
||||
--danger-6: var(--red-6);
|
||||
--danger-7: var(--red-7);
|
||||
--danger-8: var(--red-8);
|
||||
--danger-9: var(--red-9);
|
||||
--danger-10: var(--red-10);
|
||||
--warning-1: var(--orange-1);
|
||||
--warning-2: var(--orange-2);
|
||||
--warning-3: var(--orange-3);
|
||||
--warning-4: var(--orange-4);
|
||||
--warning-5: var(--orange-5);
|
||||
--warning-6: var(--orange-6);
|
||||
--warning-7: var(--orange-7);
|
||||
--warning-8: var(--orange-8);
|
||||
--warning-9: var(--orange-9);
|
||||
--warning-10: var(--orange-10);
|
||||
}
|
||||
body[arco-theme='dark'] {
|
||||
--red-1: 77, 0, 10;
|
||||
--red-2: 119, 6, 17;
|
||||
--red-3: 161, 22, 31;
|
||||
--red-4: 203, 46, 52;
|
||||
--red-5: 245, 78, 78;
|
||||
--red-6: 247, 105, 101;
|
||||
--red-7: 249, 141, 134;
|
||||
--red-8: 251, 176, 167;
|
||||
--red-9: 253, 209, 202;
|
||||
--red-10: 255, 240, 236;
|
||||
--orangered-1: 77, 14, 0;
|
||||
--orangered-2: 119, 30, 5;
|
||||
--orangered-3: 162, 55, 20;
|
||||
--orangered-4: 204, 87, 41;
|
||||
--orangered-5: 247, 126, 69;
|
||||
--orangered-6: 249, 146, 90;
|
||||
--orangered-7: 250, 173, 125;
|
||||
--orangered-8: 252, 198, 161;
|
||||
--orangered-9: 253, 222, 197;
|
||||
--orangered-10: 255, 244, 235;
|
||||
--orange-1: 77, 27, 0;
|
||||
--orange-2: 121, 48, 4;
|
||||
--orange-3: 166, 75, 10;
|
||||
--orange-4: 210, 105, 19;
|
||||
--orange-5: 255, 141, 31;
|
||||
--orange-6: 255, 150, 38;
|
||||
--orange-7: 255, 179, 87;
|
||||
--orange-8: 255, 205, 135;
|
||||
--orange-9: 255, 227, 184;
|
||||
--orange-10: 255, 247, 232;
|
||||
--gold-1: 77, 45, 0;
|
||||
--gold-2: 119, 75, 4;
|
||||
--gold-3: 162, 111, 15;
|
||||
--gold-4: 204, 150, 31;
|
||||
--gold-5: 247, 192, 52;
|
||||
--gold-6: 249, 204, 68;
|
||||
--gold-7: 250, 220, 108;
|
||||
--gold-8: 252, 233, 149;
|
||||
--gold-9: 253, 244, 190;
|
||||
--gold-10: 255, 252, 232;
|
||||
--yellow-1: 77, 56, 0;
|
||||
--yellow-2: 120, 94, 7;
|
||||
--yellow-3: 163, 134, 20;
|
||||
--yellow-4: 207, 179, 37;
|
||||
--yellow-5: 250, 225, 60;
|
||||
--yellow-6: 251, 233, 75;
|
||||
--yellow-7: 252, 243, 116;
|
||||
--yellow-8: 253, 250, 157;
|
||||
--yellow-9: 254, 254, 198;
|
||||
--yellow-10: 254, 255, 240;
|
||||
--lime-1: 42, 77, 0;
|
||||
--lime-2: 68, 112, 6;
|
||||
--lime-3: 98, 148, 18;
|
||||
--lime-4: 132, 183, 35;
|
||||
--lime-5: 168, 219, 57;
|
||||
--lime-6: 184, 226, 75;
|
||||
--lime-7: 203, 233, 112;
|
||||
--lime-8: 222, 241, 152;
|
||||
--lime-9: 238, 248, 194;
|
||||
--lime-10: 253, 255, 238;
|
||||
--green-1: 0, 77, 28;
|
||||
--green-2: 4, 102, 37;
|
||||
--green-3: 10, 128, 45;
|
||||
--green-4: 18, 154, 55;
|
||||
--green-5: 29, 180, 64;
|
||||
--green-6: 39, 195, 70;
|
||||
--green-7: 80, 210, 102;
|
||||
--green-8: 126, 225, 139;
|
||||
--green-9: 178, 240, 183;
|
||||
--green-10: 235, 255, 236;
|
||||
--cyan-1: 0, 66, 77;
|
||||
--cyan-2: 6, 97, 108;
|
||||
--cyan-3: 17, 131, 139;
|
||||
--cyan-4: 31, 166, 170;
|
||||
--cyan-5: 48, 201, 201;
|
||||
--cyan-6: 63, 212, 207;
|
||||
--cyan-7: 102, 223, 215;
|
||||
--cyan-8: 144, 233, 225;
|
||||
--cyan-9: 190, 244, 237;
|
||||
--cyan-10: 240, 255, 252;
|
||||
--blue-1: 0, 26, 77;
|
||||
--blue-2: 5, 47, 120;
|
||||
--blue-3: 19, 76, 163;
|
||||
--blue-4: 41, 113, 207;
|
||||
--blue-5: 70, 154, 250;
|
||||
--blue-6: 90, 170, 251;
|
||||
--blue-7: 125, 193, 252;
|
||||
--blue-8: 161, 213, 253;
|
||||
--blue-9: 198, 232, 254;
|
||||
--blue-10: 234, 248, 255;
|
||||
--arcoblue-1: 0, 13, 77;
|
||||
--arcoblue-2: 4, 27, 121;
|
||||
--arcoblue-3: 14, 50, 166;
|
||||
--arcoblue-4: 29, 77, 210;
|
||||
--arcoblue-5: 48, 111, 255;
|
||||
--arcoblue-6: 60, 126, 255;
|
||||
--arcoblue-7: 104, 159, 255;
|
||||
--arcoblue-8: 147, 190, 255;
|
||||
--arcoblue-9: 190, 218, 255;
|
||||
--arcoblue-10: 234, 244, 255;
|
||||
--purple-1: 22, 0, 77;
|
||||
--purple-2: 39, 6, 110;
|
||||
--purple-3: 62, 19, 143;
|
||||
--purple-4: 90, 37, 176;
|
||||
--purple-5: 123, 61, 209;
|
||||
--purple-6: 142, 81, 218;
|
||||
--purple-7: 169, 116, 227;
|
||||
--purple-8: 197, 154, 237;
|
||||
--purple-9: 223, 194, 246;
|
||||
--purple-10: 247, 237, 255;
|
||||
--pinkpurple-1: 66, 0, 77;
|
||||
--pinkpurple-2: 101, 3, 112;
|
||||
--pinkpurple-3: 138, 13, 147;
|
||||
--pinkpurple-4: 176, 27, 182;
|
||||
--pinkpurple-5: 217, 46, 217;
|
||||
--pinkpurple-6: 225, 61, 219;
|
||||
--pinkpurple-7: 232, 102, 223;
|
||||
--pinkpurple-8: 240, 146, 230;
|
||||
--pinkpurple-9: 247, 193, 240;
|
||||
--pinkpurple-10: 255, 242, 253;
|
||||
--magenta-1: 77, 0, 52;
|
||||
--magenta-2: 119, 8, 80;
|
||||
--magenta-3: 161, 23, 108;
|
||||
--magenta-4: 203, 43, 136;
|
||||
--magenta-5: 245, 69, 166;
|
||||
--magenta-6: 247, 86, 169;
|
||||
--magenta-7: 249, 122, 184;
|
||||
--magenta-8: 251, 158, 200;
|
||||
--magenta-9: 253, 195, 219;
|
||||
--magenta-10: 255, 232, 241;
|
||||
--gray-1: 23, 23, 26;
|
||||
--gray-2: 46, 46, 48;
|
||||
--gray-3: 72, 72, 73;
|
||||
--gray-4: 95, 95, 96;
|
||||
--gray-5: 120, 120, 122;
|
||||
--gray-6: 146, 146, 147;
|
||||
--gray-7: 171, 171, 172;
|
||||
--gray-8: 197, 197, 197;
|
||||
--gray-9: 223, 223, 223;
|
||||
--gray-10: 246, 246, 246;
|
||||
--primary-1: var(--arcoblue-1);
|
||||
--primary-2: var(--arcoblue-2);
|
||||
--primary-3: var(--arcoblue-3);
|
||||
--primary-4: var(--arcoblue-4);
|
||||
--primary-5: var(--arcoblue-5);
|
||||
--primary-6: var(--arcoblue-6);
|
||||
--primary-7: var(--arcoblue-7);
|
||||
--primary-8: var(--arcoblue-8);
|
||||
--primary-9: var(--arcoblue-9);
|
||||
--primary-10: var(--arcoblue-10);
|
||||
--link-1: var(--arcoblue-1);
|
||||
--link-2: var(--arcoblue-2);
|
||||
--link-3: var(--arcoblue-3);
|
||||
--link-4: var(--arcoblue-4);
|
||||
--link-5: var(--arcoblue-5);
|
||||
--link-6: var(--arcoblue-6);
|
||||
--link-7: var(--arcoblue-7);
|
||||
--link-8: var(--arcoblue-8);
|
||||
--link-9: var(--arcoblue-9);
|
||||
--link-10: var(--arcoblue-10);
|
||||
--success-1: var(--green-1);
|
||||
--success-2: var(--green-2);
|
||||
--success-3: var(--green-3);
|
||||
--success-4: var(--green-4);
|
||||
--success-5: var(--green-5);
|
||||
--success-6: var(--green-6);
|
||||
--success-7: var(--green-7);
|
||||
--success-8: var(--green-8);
|
||||
--success-9: var(--green-9);
|
||||
--success-10: var(--green-10);
|
||||
--danger-1: var(--red-1);
|
||||
--danger-2: var(--red-2);
|
||||
--danger-3: var(--red-3);
|
||||
--danger-4: var(--red-4);
|
||||
--danger-5: var(--red-5);
|
||||
--danger-6: var(--red-6);
|
||||
--danger-7: var(--red-7);
|
||||
--danger-8: var(--red-8);
|
||||
--danger-9: var(--red-9);
|
||||
--danger-10: var(--red-10);
|
||||
--warning-1: var(--orange-1);
|
||||
--warning-2: var(--orange-2);
|
||||
--warning-3: var(--orange-3);
|
||||
--warning-4: var(--orange-4);
|
||||
--warning-5: var(--orange-5);
|
||||
--warning-6: var(--orange-6);
|
||||
--warning-7: var(--orange-7);
|
||||
--warning-8: var(--orange-8);
|
||||
--warning-9: var(--orange-9);
|
||||
--warning-10: var(--orange-10);
|
||||
}
|
||||
|
||||
726
web端/styles/vehicle-management.css
Normal file
726
web端/styles/vehicle-management.css
Normal file
@@ -0,0 +1,726 @@
|
||||
/**
|
||||
* ONE-OS 车辆管理模块样式
|
||||
* 页面根节点: .vm-page
|
||||
* 构建引用: <link rel="stylesheet" href="styles/vehicle-management.css" />
|
||||
* 或: @import './styles/vehicle-management.css';
|
||||
*
|
||||
* 依赖: Ant Design v5（antd）
|
||||
* 建议顺序: antd.css → vm-tokens.css → vehicle-management.css
|
||||
*/
|
||||
|
||||
@import url('./vm-tokens.css');
|
||||
|
||||
/* ==========================================================================
|
||||
Page shell
|
||||
========================================================================== */
|
||||
|
||||
.vm-page {
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
padding: var(--vm-page-padding-y) var(--vm-page-padding-x) var(--vm-page-padding-bottom);
|
||||
font-family: var(--vm-font-family);
|
||||
font-size: var(--vm-font-size-base);
|
||||
line-height: var(--vm-line-height-normal);
|
||||
color: var(--vm-color-text);
|
||||
background: linear-gradient(
|
||||
165deg,
|
||||
var(--vm-color-bg-page-alt) 0%,
|
||||
var(--vm-color-bg-page) 50%,
|
||||
var(--vm-color-bg-page-alt) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.vm-page *,
|
||||
.vm-page *::before,
|
||||
.vm-page *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.vm-page.vm-detail-shell {
|
||||
padding: var(--vm-page-padding-y) var(--vm-page-padding-x);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Page header
|
||||
========================================================================== */
|
||||
|
||||
.vm-page .vm-page-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--vm-space-3);
|
||||
margin-bottom: var(--vm-space-4);
|
||||
}
|
||||
|
||||
.vm-page .vm-page-header .ant-breadcrumb {
|
||||
font-size: var(--vm-font-size-base);
|
||||
}
|
||||
|
||||
.vm-page .vm-page-header .ant-breadcrumb a,
|
||||
.vm-page .vm-page-header .ant-breadcrumb button {
|
||||
color: var(--vm-color-primary);
|
||||
cursor: pointer;
|
||||
transition: color var(--vm-duration-fast) var(--vm-ease-default);
|
||||
}
|
||||
|
||||
.vm-page .vm-page-header .ant-breadcrumb a:hover,
|
||||
.vm-page .vm-page-header .ant-breadcrumb button:hover {
|
||||
color: var(--vm-color-primary-hover);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Filter card
|
||||
========================================================================== */
|
||||
|
||||
.vm-page .vm-filter-card.ant-card {
|
||||
margin-bottom: var(--vm-space-4);
|
||||
border: 1px solid var(--vm-color-border) !important;
|
||||
border-radius: var(--vm-radius-2xl) !important;
|
||||
box-shadow: var(--vm-shadow-card) !important;
|
||||
}
|
||||
|
||||
.vm-page .vm-filter-card > .ant-card-head {
|
||||
min-height: auto;
|
||||
padding: var(--vm-space-3) var(--vm-space-5) !important;
|
||||
border-bottom: 1px solid var(--vm-color-border-light) !important;
|
||||
}
|
||||
|
||||
.vm-page .vm-filter-card > .ant-card-head .ant-card-head-title {
|
||||
padding: 0 !important;
|
||||
font-size: var(--vm-font-size-md) !important;
|
||||
font-weight: var(--vm-font-weight-bold) !important;
|
||||
color: var(--vm-color-text) !important;
|
||||
}
|
||||
|
||||
.vm-page .vm-filter-card > .ant-card-body {
|
||||
padding: var(--vm-space-4) var(--vm-space-5) var(--vm-space-5) !important;
|
||||
}
|
||||
|
||||
.vm-page .vm-filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--vm-filter-columns), minmax(0, 1fr));
|
||||
gap: 14px var(--vm-space-5);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vm-page .vm-filter-field {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vm-page .vm-filter-field-label {
|
||||
flex: 0 0 var(--vm-filter-label-width);
|
||||
font-size: var(--vm-font-size-sm);
|
||||
font-weight: var(--vm-font-weight-medium);
|
||||
line-height: var(--vm-line-height-tight);
|
||||
color: var(--vm-color-text-secondary);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vm-page .vm-filter-field-control {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vm-page .vm-filter-field-control .ant-input,
|
||||
.vm-page .vm-filter-field-control .ant-input-affix-wrapper,
|
||||
.vm-page .vm-filter-field-control .ant-select,
|
||||
.vm-page .vm-filter-field-control .ant-select-selector,
|
||||
.vm-page .vm-filter-field-control .ant-cascader,
|
||||
.vm-page .vm-filter-field-control .ant-picker {
|
||||
width: 100%;
|
||||
border-radius: var(--vm-radius-md) !important;
|
||||
}
|
||||
|
||||
.vm-page .vm-filter-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--vm-space-2);
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--vm-space-4);
|
||||
padding-top: var(--vm-space-4);
|
||||
border-top: 1px solid var(--vm-color-border-light);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Table section
|
||||
========================================================================== */
|
||||
|
||||
.vm-page .vm-table-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.vm-page .vm-table-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px var(--vm-space-4);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.vm-page .vm-table-toolbar-meta {
|
||||
font-size: var(--vm-font-size-sm);
|
||||
color: var(--vm-color-text-muted);
|
||||
}
|
||||
|
||||
.vm-page .vm-table-toolbar-meta strong {
|
||||
font-weight: var(--vm-font-weight-bold);
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--vm-color-text);
|
||||
}
|
||||
|
||||
.vm-page .vm-table-toolbar-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--vm-space-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vm-page .vm-plate-search {
|
||||
width: var(--vm-table-toolbar-search-width);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.vm-page .vm-plate-search .ant-input,
|
||||
.vm-page .vm-plate-search .ant-input-affix-wrapper,
|
||||
.vm-page .vm-plate-search .ant-input-search-button {
|
||||
border-radius: var(--vm-radius-md) !important;
|
||||
}
|
||||
|
||||
.vm-page .vm-table-card {
|
||||
overflow: hidden;
|
||||
background: var(--vm-color-bg-card);
|
||||
border: 1px solid var(--vm-color-border);
|
||||
border-radius: var(--vm-radius-2xl);
|
||||
box-shadow: var(--vm-shadow-card);
|
||||
}
|
||||
|
||||
/* List table */
|
||||
.vm-page .vm-list-table .ant-table-content table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.vm-page .vm-list-table .ant-table-thead > tr > th {
|
||||
padding: var(--vm-space-3) var(--vm-space-4) !important;
|
||||
font-size: var(--vm-font-size-sm) !important;
|
||||
font-weight: var(--vm-font-weight-bold) !important;
|
||||
color: var(--vm-color-text-secondary) !important;
|
||||
background: var(--vm-color-bg-muted) !important;
|
||||
border-bottom: 1px solid var(--vm-color-border) !important;
|
||||
}
|
||||
|
||||
.vm-page .vm-list-table .ant-table-tbody > tr:not(.ant-table-measure-row) > td {
|
||||
padding: var(--vm-space-3) var(--vm-space-4) !important;
|
||||
font-size: var(--vm-font-size-sm);
|
||||
vertical-align: middle !important;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vm-page .vm-list-table .ant-table-tbody > tr:not(.ant-table-measure-row):hover > td {
|
||||
background: var(--vm-color-bg-muted) !important;
|
||||
}
|
||||
|
||||
.vm-page .vm-list-table .ant-table-tbody > tr:not(.ant-table-measure-row) > td.ant-table-cell-fix-right {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.vm-page .vm-list-table .ant-table-tbody > tr.ant-table-row-selected > td {
|
||||
background: var(--vm-color-primary-light) !important;
|
||||
}
|
||||
|
||||
.vm-page .vm-list-table .ant-pagination {
|
||||
margin: 0 !important;
|
||||
padding: var(--vm-space-3) var(--vm-space-4) !important;
|
||||
border-top: 1px solid var(--vm-color-border-light);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Table cell components
|
||||
========================================================================== */
|
||||
|
||||
.vm-page .vm-action-btn {
|
||||
min-height: var(--vm-action-btn-min-height);
|
||||
padding: 0 var(--vm-space-1) !important;
|
||||
font-weight: var(--vm-font-weight-semibold) !important;
|
||||
color: var(--vm-color-primary) !important;
|
||||
}
|
||||
|
||||
.vm-page .vm-action-btn:hover {
|
||||
color: var(--vm-color-primary-hover) !important;
|
||||
}
|
||||
|
||||
.vm-page .vm-action-more-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--vm-action-more-size);
|
||||
height: var(--vm-action-more-size);
|
||||
color: var(--vm-color-text-muted);
|
||||
cursor: pointer;
|
||||
border-radius: var(--vm-radius-md);
|
||||
transition:
|
||||
background var(--vm-duration-fast) var(--vm-ease-default),
|
||||
color var(--vm-duration-fast) var(--vm-ease-default);
|
||||
}
|
||||
|
||||
.vm-page .vm-action-more-btn:hover {
|
||||
color: #334155;
|
||||
background: var(--vm-color-bg-hover);
|
||||
}
|
||||
|
||||
.vm-page .vm-action-more-btn:focus-visible {
|
||||
outline: 2px solid var(--vm-color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.vm-page .vm-plate-link {
|
||||
padding: 0;
|
||||
font-size: var(--vm-font-size-sm);
|
||||
font-weight: var(--vm-font-weight-bold);
|
||||
color: var(--vm-color-text);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.vm-page .vm-plate-link:hover {
|
||||
color: var(--vm-color-primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.vm-page .vm-plate-link:focus-visible {
|
||||
border-radius: var(--vm-space-1);
|
||||
outline: 2px solid var(--vm-color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.vm-page .vm-vin-text {
|
||||
font-family: var(--vm-font-mono);
|
||||
font-size: var(--vm-font-size-xs);
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--vm-color-text-secondary);
|
||||
}
|
||||
|
||||
.vm-page .vm-online-pill {
|
||||
display: inline-flex;
|
||||
gap: var(--vm-space-2);
|
||||
align-items: center;
|
||||
padding: 2px var(--vm-space-2);
|
||||
font-size: var(--vm-font-size-xs);
|
||||
font-weight: var(--vm-font-weight-semibold);
|
||||
border-radius: var(--vm-radius-pill);
|
||||
}
|
||||
|
||||
.vm-page .vm-online-pill--on {
|
||||
color: var(--vm-color-success-text);
|
||||
background: var(--vm-color-success-bg);
|
||||
}
|
||||
|
||||
.vm-page .vm-online-pill--off {
|
||||
color: var(--vm-color-text-muted);
|
||||
background: var(--vm-color-bg-hover);
|
||||
}
|
||||
|
||||
.vm-page .vm-online-dot {
|
||||
flex-shrink: 0;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.vm-page .vm-online-pill--on .vm-online-dot {
|
||||
background: var(--vm-color-success);
|
||||
}
|
||||
|
||||
.vm-page .vm-online-pill--off .vm-online-dot {
|
||||
background: var(--vm-color-text-placeholder);
|
||||
}
|
||||
|
||||
.vm-page .vm-status-tag {
|
||||
margin: 0 !important;
|
||||
font-weight: var(--vm-font-weight-semibold) !important;
|
||||
line-height: 20px !important;
|
||||
border: none !important;
|
||||
border-radius: var(--vm-radius-sm) !important;
|
||||
}
|
||||
|
||||
.vm-page .vm-empty-wrap {
|
||||
padding: 48px 0;
|
||||
color: var(--vm-color-text-placeholder);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vm-page .vm-empty-wrap svg {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Detail page
|
||||
========================================================================== */
|
||||
|
||||
.vm-page .vm-detail-card {
|
||||
margin-bottom: var(--vm-space-4);
|
||||
padding: var(--vm-space-6);
|
||||
background: var(--vm-color-bg-card);
|
||||
border: 1px solid var(--vm-color-border);
|
||||
border-radius: var(--vm-radius-2xl);
|
||||
box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.vm-page .vm-detail-hero {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--vm-space-3) var(--vm-space-4);
|
||||
align-items: center;
|
||||
margin-bottom: var(--vm-space-5);
|
||||
padding-bottom: var(--vm-space-5);
|
||||
border-bottom: 1px solid var(--vm-color-border-light);
|
||||
}
|
||||
|
||||
.vm-page .vm-detail-plate {
|
||||
font-size: var(--vm-font-size-xl);
|
||||
font-weight: var(--vm-font-weight-extrabold);
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--vm-color-text);
|
||||
}
|
||||
|
||||
.vm-page .vm-section-title {
|
||||
display: flex;
|
||||
gap: var(--vm-space-2);
|
||||
align-items: center;
|
||||
margin-bottom: var(--vm-space-4);
|
||||
font-size: var(--vm-font-size-md);
|
||||
font-weight: var(--vm-font-weight-bold);
|
||||
color: var(--vm-color-text);
|
||||
}
|
||||
|
||||
.vm-page .vm-section-title::before {
|
||||
flex-shrink: 0;
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
content: '';
|
||||
background: linear-gradient(180deg, var(--vm-color-primary), #60a5fa);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.vm-page .vm-detail-kv-row {
|
||||
display: flex;
|
||||
gap: var(--vm-space-6);
|
||||
margin-bottom: var(--vm-space-4);
|
||||
}
|
||||
|
||||
.vm-page .vm-detail-kv-col {
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.vm-page .vm-detail-kv-item {
|
||||
display: flex;
|
||||
gap: var(--vm-space-2);
|
||||
align-items: center;
|
||||
min-height: 22px;
|
||||
margin-bottom: var(--vm-space-4);
|
||||
}
|
||||
|
||||
.vm-page .vm-kv-label {
|
||||
flex-shrink: 0;
|
||||
min-width: var(--vm-kv-label-width);
|
||||
font-size: var(--vm-font-size-sm);
|
||||
color: var(--vm-color-text-muted);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.vm-page .vm-kv-value {
|
||||
min-width: 0;
|
||||
font-size: var(--vm-font-size-sm);
|
||||
color: var(--vm-color-text);
|
||||
}
|
||||
|
||||
.vm-page .vm-kv-link {
|
||||
font-weight: var(--vm-font-weight-semibold);
|
||||
color: var(--vm-color-primary);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.vm-page .vm-kv-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.vm-page .vm-kv-link:focus-visible {
|
||||
border-radius: var(--vm-space-1);
|
||||
outline: 2px solid var(--vm-color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.vm-page .vm-expand-bar {
|
||||
margin-top: var(--vm-space-2);
|
||||
padding-top: var(--vm-space-4);
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--vm-color-border-light);
|
||||
}
|
||||
|
||||
.vm-page .vm-tab-card {
|
||||
padding: var(--vm-space-6);
|
||||
margin-top: 0;
|
||||
background: var(--vm-color-bg-card);
|
||||
border-radius: var(--vm-radius-md);
|
||||
box-shadow: var(--vm-shadow-card);
|
||||
}
|
||||
|
||||
.vm-page .vm-tab-placeholder {
|
||||
padding: var(--vm-space-2) 0;
|
||||
font-size: var(--vm-font-size-base);
|
||||
color: var(--vm-color-text-muted);
|
||||
}
|
||||
|
||||
.vm-page .vm-detail-tabs .ant-tabs-nav {
|
||||
margin-bottom: var(--vm-space-4);
|
||||
}
|
||||
|
||||
.vm-page .vm-detail-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||
font-weight: var(--vm-font-weight-semibold);
|
||||
color: var(--vm-color-primary);
|
||||
}
|
||||
|
||||
.vm-page .vm-detail-tabs .ant-tabs-ink-bar {
|
||||
background: var(--vm-color-primary);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Blocks: hint / banner / import fail
|
||||
========================================================================== */
|
||||
|
||||
.vm-page .vm-modal-hint,
|
||||
.vm-modal-hint {
|
||||
margin-bottom: var(--vm-space-4);
|
||||
padding: 10px 14px;
|
||||
font-size: var(--vm-font-size-sm);
|
||||
line-height: var(--vm-line-height-relaxed);
|
||||
color: var(--vm-color-text-secondary);
|
||||
background: var(--vm-color-primary-light);
|
||||
border: 1px solid var(--vm-color-primary-border);
|
||||
border-radius: var(--vm-radius-lg);
|
||||
}
|
||||
|
||||
.vm-page .vm-edit-banner,
|
||||
.vm-edit-banner {
|
||||
margin-bottom: var(--vm-space-4);
|
||||
padding: var(--vm-space-3) 14px;
|
||||
font-size: var(--vm-font-size-sm);
|
||||
color: var(--vm-color-text-secondary);
|
||||
background: var(--vm-color-bg-muted);
|
||||
border: 1px solid var(--vm-color-border);
|
||||
border-radius: var(--vm-radius-lg);
|
||||
}
|
||||
|
||||
.vm-page .vm-edit-banner strong,
|
||||
.vm-edit-banner strong {
|
||||
font-weight: var(--vm-font-weight-semibold);
|
||||
color: var(--vm-color-text);
|
||||
}
|
||||
|
||||
.vm-page .vm-import-fail,
|
||||
.vm-import-fail {
|
||||
margin-top: var(--vm-space-4);
|
||||
padding: var(--vm-space-3) 14px;
|
||||
font-size: var(--vm-font-size-sm);
|
||||
background: var(--vm-color-error-bg);
|
||||
border: 1px solid var(--vm-color-error-border);
|
||||
border-radius: var(--vm-radius-lg);
|
||||
}
|
||||
|
||||
.vm-page .vm-import-fail a,
|
||||
.vm-import-fail a {
|
||||
font-weight: var(--vm-font-weight-medium);
|
||||
color: var(--vm-color-primary);
|
||||
}
|
||||
|
||||
.vm-page .vm-prd-content,
|
||||
.vm-prd-content {
|
||||
max-height: 560px;
|
||||
overflow: auto;
|
||||
font-size: var(--vm-font-size-sm);
|
||||
line-height: var(--vm-line-height-relaxed);
|
||||
color: var(--vm-color-text-secondary);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Ant Design — scoped under .vm-page
|
||||
========================================================================== */
|
||||
|
||||
.vm-page .ant-btn {
|
||||
border-radius: var(--vm-radius-md);
|
||||
transition:
|
||||
transform var(--vm-duration-fast) var(--vm-ease-default),
|
||||
box-shadow var(--vm-duration-fast) var(--vm-ease-default),
|
||||
background var(--vm-duration-fast) var(--vm-ease-default),
|
||||
border-color var(--vm-duration-fast) var(--vm-ease-default);
|
||||
}
|
||||
|
||||
.vm-page .ant-btn-primary:not(:disabled) {
|
||||
background: var(--vm-color-primary) !important;
|
||||
border-color: var(--vm-color-primary) !important;
|
||||
box-shadow: var(--vm-shadow-btn-primary);
|
||||
}
|
||||
|
||||
.vm-page .ant-btn-primary:not(:disabled):hover {
|
||||
background: var(--vm-color-primary-hover) !important;
|
||||
border-color: var(--vm-color-primary-hover) !important;
|
||||
}
|
||||
|
||||
.vm-page .ant-btn-default.vm-btn-ghost,
|
||||
.vm-page .vm-btn-req {
|
||||
color: var(--vm-color-text-secondary) !important;
|
||||
border-color: var(--vm-color-border) !important;
|
||||
}
|
||||
|
||||
.vm-page .ant-input:focus,
|
||||
.vm-page .ant-input-focused,
|
||||
.vm-page .ant-input-affix-wrapper-focused,
|
||||
.vm-page .ant-select-focused .ant-select-selector,
|
||||
.vm-page .ant-picker-focused {
|
||||
border-color: var(--vm-color-primary) !important;
|
||||
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
|
||||
}
|
||||
|
||||
.vm-page .ant-upload-wrapper .ant-upload-drag {
|
||||
border-radius: var(--vm-radius-xl) !important;
|
||||
border-color: var(--vm-color-border) !important;
|
||||
background: var(--vm-color-bg-muted) !important;
|
||||
transition:
|
||||
border-color var(--vm-duration-fast) var(--vm-ease-default),
|
||||
background var(--vm-duration-fast) var(--vm-ease-default);
|
||||
}
|
||||
|
||||
.vm-page .ant-upload-wrapper .ant-upload-drag:hover {
|
||||
border-color: var(--vm-color-primary-border) !important;
|
||||
background: var(--vm-color-primary-light) !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Modal (portal — use Modal wrapClassName="vm-modal-wrap")
|
||||
========================================================================== */
|
||||
|
||||
.vm-modal-wrap .ant-modal-content {
|
||||
border-radius: var(--vm-radius-xl);
|
||||
}
|
||||
|
||||
.vm-modal-wrap .ant-modal-header {
|
||||
border-bottom: 1px solid var(--vm-color-border-light);
|
||||
}
|
||||
|
||||
.vm-modal-wrap .ant-modal-footer {
|
||||
border-top: 1px solid var(--vm-color-border-light);
|
||||
}
|
||||
|
||||
.vm-modal-wrap .ant-btn-primary:not(:disabled) {
|
||||
background: var(--vm-color-primary);
|
||||
border-color: var(--vm-color-primary);
|
||||
box-shadow: var(--vm-shadow-btn-primary);
|
||||
}
|
||||
|
||||
.vm-modal-wrap .ant-btn-primary:not(:disabled):hover {
|
||||
background: var(--vm-color-primary-hover);
|
||||
border-color: var(--vm-color-primary-hover);
|
||||
}
|
||||
|
||||
.vm-modal-wrap .ant-upload-drag {
|
||||
border-radius: var(--vm-radius-xl);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Utilities
|
||||
========================================================================== */
|
||||
|
||||
.vm-u-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.vm-u-text-muted {
|
||||
color: var(--vm-color-text-muted);
|
||||
}
|
||||
|
||||
.vm-u-tabular {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Responsive
|
||||
========================================================================== */
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.vm-page .vm-filter-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.vm-page {
|
||||
padding: var(--vm-space-4) var(--vm-space-4) var(--vm-space-6);
|
||||
}
|
||||
|
||||
.vm-page .vm-filter-field {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--vm-space-2);
|
||||
}
|
||||
|
||||
.vm-page .vm-filter-field-label {
|
||||
flex: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.vm-page .vm-table-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.vm-page .vm-plate-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vm-page .vm-detail-kv-row {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.vm-page .vm-filter-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Accessibility — reduced motion
|
||||
========================================================================== */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.vm-page .ant-btn,
|
||||
.vm-page .vm-action-more-btn,
|
||||
.vm-page .vm-plate-link {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
93
web端/styles/vm-tokens.css
Normal file
93
web端/styles/vm-tokens.css
Normal file
@@ -0,0 +1,93 @@
|
||||
/**
|
||||
* ONE-OS 车辆管理 / 中后台列表页 — 设计令牌
|
||||
* 与 web端/车辆管理.jsx 规范一致，可供其他运维模块复用
|
||||
*/
|
||||
:root {
|
||||
/* Brand */
|
||||
--vm-color-primary: #2563eb;
|
||||
--vm-color-primary-hover: #1d4ed8;
|
||||
--vm-color-primary-light: #eff6ff;
|
||||
--vm-color-primary-border: #bfdbfe;
|
||||
--vm-color-primary-shadow: rgba(37, 99, 235, 0.45);
|
||||
|
||||
/* Semantic */
|
||||
--vm-color-success: #10b981;
|
||||
--vm-color-success-bg: #ecfdf5;
|
||||
--vm-color-success-text: #047857;
|
||||
--vm-color-warning: #f59e0b;
|
||||
--vm-color-error: #ef4444;
|
||||
--vm-color-error-bg: #fef2f2;
|
||||
--vm-color-error-border: #fecaca;
|
||||
|
||||
/* Neutral */
|
||||
--vm-color-bg-page: #f8fafc;
|
||||
--vm-color-bg-page-alt: #f1f5f9;
|
||||
--vm-color-bg-card: #ffffff;
|
||||
--vm-color-bg-muted: #f8fafc;
|
||||
--vm-color-bg-hover: #f1f5f9;
|
||||
--vm-color-border: #e2e8f0;
|
||||
--vm-color-border-light: #f1f5f9;
|
||||
--vm-color-text: #0f172a;
|
||||
--vm-color-text-secondary: #475569;
|
||||
--vm-color-text-muted: #64748b;
|
||||
--vm-color-text-placeholder: #94a3b8;
|
||||
|
||||
/* Typography */
|
||||
--vm-font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
--vm-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
--vm-font-size-xs: 12px;
|
||||
--vm-font-size-sm: 13px;
|
||||
--vm-font-size-base: 14px;
|
||||
--vm-font-size-md: 15px;
|
||||
--vm-font-size-lg: 16px;
|
||||
--vm-font-size-xl: 22px;
|
||||
--vm-font-weight-medium: 500;
|
||||
--vm-font-weight-semibold: 600;
|
||||
--vm-font-weight-bold: 700;
|
||||
--vm-font-weight-extrabold: 800;
|
||||
--vm-line-height-tight: 1.35;
|
||||
--vm-line-height-normal: 1.5;
|
||||
--vm-line-height-relaxed: 1.65;
|
||||
|
||||
/* Spacing */
|
||||
--vm-space-1: 4px;
|
||||
--vm-space-2: 8px;
|
||||
--vm-space-3: 12px;
|
||||
--vm-space-4: 16px;
|
||||
--vm-space-5: 20px;
|
||||
--vm-space-6: 24px;
|
||||
--vm-space-8: 32px;
|
||||
|
||||
/* Radius */
|
||||
--vm-radius-sm: 6px;
|
||||
--vm-radius-md: 8px;
|
||||
--vm-radius-lg: 10px;
|
||||
--vm-radius-xl: 12px;
|
||||
--vm-radius-2xl: 16px;
|
||||
--vm-radius-pill: 999px;
|
||||
|
||||
/* Shadow */
|
||||
--vm-shadow-card: 0 4px 20px -4px rgba(15, 23, 42, 0.04);
|
||||
--vm-shadow-card-hover: 0 8px 28px -6px rgba(15, 23, 42, 0.08);
|
||||
--vm-shadow-btn-primary: 0 2px 8px -2px var(--vm-color-primary-shadow);
|
||||
|
||||
/* Layout */
|
||||
--vm-page-padding-x: 24px;
|
||||
--vm-page-padding-y: 24px;
|
||||
--vm-page-padding-bottom: 32px;
|
||||
--vm-filter-label-width: 88px;
|
||||
--vm-filter-columns: 4;
|
||||
--vm-table-toolbar-search-width: 240px;
|
||||
--vm-action-btn-min-height: 32px;
|
||||
--vm-action-more-size: 32px;
|
||||
--vm-kv-label-width: 100px;
|
||||
|
||||
/* Motion */
|
||||
--vm-duration-fast: 150ms;
|
||||
--vm-duration-normal: 200ms;
|
||||
--vm-ease-default: ease;
|
||||
|
||||
/* Z-index */
|
||||
--vm-z-dropdown: 1050;
|
||||
--vm-z-modal: 1100;
|
||||
}
|
||||
Reference in New Issue
Block a user