青岚通用组件库

设计 Token

颜色、圆角、阴影、状态色，所有组件从这些变量派生。

Primary#1a835c

Blue#2563eb

Warning#e17516

Danger#df3630

Purple#7c3aed

Gray#343b38

:root {
  --cj-primary: #1a835c;
  --cj-radius: 8px;
  --cj-shadow-md: 0 4px 10px rgba(20,24,27,.08);
}

分类背景

入口页、工作台、数据分析页的背景基底。

入口聚合背景
.cj-bg-portal

业务工作台背景
.cj-bg-workbench

数据分析背景
.cj-bg-data

标题样式

页面标题、分组标题、面板标题。

Production

生产订单

管理生产任务、派工状态和工序进度。

<div class="cj-page-title">生产订单</div>

工序执行统计实时

面板标题用于卡片容器、表格容器、图表容器。

模块卡片

用于入口页、工作台、模块导航。

生产制造

订单、派工、进度、完工反馈。

12 页面常用

资产管理

设备台账、维保、巡检、报修。

82 页面Web

数据可视化

大屏总览、指标监控、异常告警。

大屏Screen

数据组件

KPI、趋势、图表容器和状态指标。

今日完成

128

较昨日 +12.6%

异常任务

7

需处理 3 项

设备稼动率

92%

稳定

待派工

36

本班次

图表容器 · ECharts / Canvas / SVG

筛选表单与按钮

列表页和看板工具条。

表格与列表

状态行、短告警条、任务列表。

生产任务3 条异常

单号	设备	状态	负责人
MO-240708-01	HP-021	告警	张工
MO-240708-02	HP-018	运行中	李工
MO-240708-03	HP-029	待确认	王工

待办列表6

1

处理 HP-021 真空告警

18:26 · 高优先级

紧急

2

确认本班次派工完成率

生产调度

待办

页面模板

后台、详情、手机端、入口页模板骨架。

后台列表页

标题 + 工具条 + 表格 + 批量操作。

cj-page
  cj-page-head
  cj-toolbar
  cj-panel > cj-table

详情页

基础信息 + 明细表 + 操作记录。

cj-grid cols-2
  cj-panel 信息
  cj-panel 记录

手机任务页

任务处理

扫码开工

当前工序：抽真空

大屏组件

单独引用 `_shared/caijai-screen-components.css`，用于 16:9 可视化看板。

设备运行总览

2026/07/08 10:30:00

设备总数

36

运行中

28

设备卡片