# mcfront

**Repository Path**: kdisi_admin/mcfront

## Basic Information

- **Project Name**: mcfront
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-11-12
- **Last Updated**: 2026-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mcfront

统一微前端工作区。每个应用独立目录维护，统一使用 React + qiankun 生命周期协议。

## 应用目录

- `apps/video`：VideoOps React 子应用，来源 `/data/video/frontend`。
- `apps/doors`：出入管控 React 子应用，来源 `/home/ljz/doors/doors/web`。
- `apps/bi`：BI React 子应用，仅保留机房大屏与消防大屏；原 Vue 源码保留在 `/home/ljz/iot/bi` 作为迁移参考。
- `apps/portal`：门户 React 工作台；原 Vue 源码保留在 `mciot/web/src-vue` 作为迁移参考。
- `packages/portal-sdk`：门户与子应用之间的消息协议与路由桥接。
- `packages/portal-theme`：四个应用共用的设计 token（颜色、字体、圆角、阴影、间距、布局尺寸）。

Video 与 Doors 已复制到此工作区，原目录保留作为回滚来源。BI 和门户包含大量 Vue 专属组件、Pinia/Element Plus 依赖及既有未提交改动，必须按页面和契约逐步迁移，不能通过改后缀或包配置伪装成 React。

## 迁移状态

| 应用 | 当前状态 | 未迁移内容 |
| --- | --- | --- |
| Video | React 应用已纳入 workspace；React 门户已有 qiankun 加载与会话/深链接入；本机 Video 服务已由 workspace 源构建并部署 | Video 本身暂无已知迁移缺口；其他环境的门户发布仍需单独安排 |
| Doors | React 应用已纳入 workspace | qiankun 加载器和生产路由仍由旧门户仓库控制 |
| BI | React/Vite/qiankun；仅保留登录、机房大屏与消防大屏；机房含运营统计和温湿度趋势，消防含设备在线统计及活动告警 | 原 Vue 大屏的设备分布、建筑楼层态势和视频联动交互仍需按数据接口继续迁移 |
| Portal | React 工作台已切换为本机 Core 的 `/app/things/` 宿主；含 Core 登录、会话兼容、角色应用过滤、深链、403，以及工单、告警、设备地图、日志、任务、人脸告警、站内信、通知配置、数据分析概览、问题反馈、历史与实时数据、第三方单测点只读接入、业态与空间、设备基础档案/设备详情、属性实时推送、在线单属性控制、协议网关列表、网关子设备模型聚合/待建档列表、解绑和自动接入策略、设备详情 OTA 固件选择联动、协议/字典/模块查询、应用与接口授权管理、部门同步中心、插槽管理、OEM 配置、开放认证与短期 Token 签发、平台只读通知配置、产品/品类及产品/通用物模型设计、项目/部门/用户/角色/租户管理、租户系统配置 | 旧 Vue 门户仍保留为回滚来源；其他设备运维、其他运维和系统业务页面及对应 Core 菜单级路由授权尚未迁移；其他环境未切换 |

当前 `pnpm build` 仅证明四个 workspace 应用可编译，不代表 BI 或门户功能迁移完成。本机 React Portal 切换按用户要求先行完成且保留了旧入口回滚副本；尚未迁移的页面仍可能无法在新门户使用。

本轮 Portal 并行补齐（2026-11-13）：

- 设备列表：保留模型指纹，并展示全部设备标签。
- 定时任务：接入 Core 的手动发送接口，提供“立即执行”、操作确认、防重复提交和结果反馈；继续补齐新增、编辑、删除表单。编辑保留 Core 不支持修改的身份和类型，阻止后端无法应用的字段清空。
- 协议管理：请求失败时显示加载失败，避免误报为空列表；增加分页、身份头和接口错误回归测试。分页字段以 Core 的 `page/size` 契约为准。
- 产品及通用物模型：自动读取后续分页，修复仅显示首 100 项的问题；后续页失败时拒绝返回不完整结果，保留页面原有成功快照。
- OTA 创建表单：完整分页读取产品和固件选项；读取失败或遇到不完整页时不返回部分选项。

继续补齐任务组分页、创建、编辑、删除和选择任务组查看任务；发送配置支持延时秒数或指定执行时间、超时及截止时间，以及符合任务组类型的队列、SQL、脚本单次参数覆盖。现有任务的运行优先级沿用任务配置。发送返回的字符串运行 ID 保留在本次页面会话，可发起取消；切换令牌、租户、角色或开发环境后，草稿、快照和运行记录重新建立。

后续按旧页面对照补齐产品详情属性规格展示、工单指定处理人筛选与全量 CSV 导出，以及数据分析的“查看全部产品”入口（受产品菜单权限控制）。

以上改动使用本地测试验证，尚未进行真实后端和浏览器交互联调。

## 展示效果一致性

四个应用（门户、视频、门禁、BI）共用 `packages/portal-theme` 里的设计 token：同一套青绿色系、字体栈、圆角、阴影、间距，以及一致的布局尺寸（侧边栏 236px / 收起 64px / 顶栏 60px）。BI 因为是专用大屏，布局形态保持独立，但配色与字体跟其余应用一致。

各应用保留自己的 CSS 变量名（`--brand`、`--text-main` 等），只把取值改为引用共用 token，映射集中在 `packages/portal-theme/src/alias.css`。这样新增样式不必逐个改名，改动量可控。

### 配色统一 ≠ 展示效果统一

颜色对齐之后，切换应用仍能看出「换了个产品」——骨架一样，但细节的松紧和圆角不同：

- 圆角：门户原先在 4/5/6/7/8/9/10/16px 之间随意取值（188 处硬编码），视频用 `--radius-md`，门禁用 18px/20px/28px。同一张卡片，三个应用三个圆角。
- 字号：门户 339 处硬编码，视频用 `--fs-*`，门禁用 Tailwind 的 `text-sm`。
- 品牌色残留：视频的登录页辉光与滚动条仍是旧蓝色（`rgba(37, 99, 235)`）与旧灰蓝，品牌色换过来了这些却没跟着变。

因此除了颜色，圆角与字号也一并收进共用标尺：

| 维度 | 共用标尺 |
| --- | --- |
| 圆角 | `--mc-radius-sm` 4px / `--mc-radius-md` 6px / `--mc-radius-lg` 8px / `--mc-radius-xl` 12px / `--mc-radius-pill` 999px |
| 字号 | `--mc-fs-xs` 11 / `--mc-fs-sm` 12 / `--mc-fs-md` 13 / `--mc-fs-base` 14 / `--mc-fs-lg` 16 / `--mc-fs-xl` 20 / `--mc-fs-2xl` 26 |
| 阴影 | `--mc-shadow-sm` / `--mc-shadow-md` / `--mc-shadow-lg` / `--mc-shadow-float` / `--mc-shadow-focus` |
| 浮层 | `--mc-scrim`（遮罩）、`--mc-bg-glass`（毛玻璃顶栏）、`--mc-overlay-dark`（播放器反色层） |

`packages/portal-theme/src/components.css` 另有一层共用类名（`.mc-panel` `.mc-table-shell` `.mc-filter-bar` `.mc-btn` `.mc-badge` `.mc-input` 等），给三个应用提供一致的容器与控件外观。三个应用的框架不同，组件没法共用，但样式类名可以共用——这是它们唯一能对齐的层面。

### 纪律

由 `apps/portal/tests/theme.test.js` 守住：

- 四个应用的 CSS 里不再出现硬编码颜色。新增页面若写死色值，测试会失败。
- CSS 里不再出现 `rgb()` 与命名颜色（`white`/`black`）。半透明表面、遮罩、滚动条、网格线都收成 token。
- 门户与视频的圆角、字号必须取自共用标尺；门禁的 `rounded-[18px]` 这类任意值必须写成 `rounded-[var(--mc-radius-lg)]`。
- 门禁不得使用 Tailwind 调色板类（`bg-emerald-400`、`text-slate-950` 等），它们各自是独立的颜色，绕开了共用 token。
- 视频与门禁使用同一套图标体系（`lucide-react`）。视频此前用 Unicode 字形（`◎ ▣ ⌕ ▶ ⇄ ☰ ⇅`），不同系统字体下渲染差异很大，有的机器上直接变成方块。

门户在子应用视图下不渲染侧边栏——子应用自带侧边栏与顶栏，门户再叠一层会把内容区挤成窄缝。取而代之的是子应用标题栏上的「返回工作台」按钮。

门户导航是左侧分组侧边栏，分组按路由 hash 首段划分（`/ops` `/data` `/iot` `/system` → 运维中心 / 数据报表 / 物联网 / 系统管理），与迁移前的旧 Vue 门户一致。新增页面只要沿用同样的 hash 首段就会自动归组，不需要额外维护分组信息。分组可折叠，且只展示当前账号有权访问的页面。

## 请求代码的收敛

四个应用的请求代码各有且只有一份实现：

- 门户：`apps/portal/src/http.js`。`postCore` 走开发环境代理前缀，`postThings` 直连，`postJson` 按场景切换前缀，`postRaw` 供路径与请求头都随场景变化的接口使用。
- BI：`apps/bi/src/api/request.js`。收口了会话失效的判定（401 与 403 都算失效，普通失败不算失效——混在一起的话接口 500 也会把用户踢出门户）。
- 视频：`apps/video/src/lib/api.js` 的 `client.request`。
- 门禁：无直接请求，全部走门禁自己的后端。

三条纪律守着这件事，违反时测试会失败：

- `apps/portal/tests/http.test.js`：门户的请求头只由 `http.js` 构造；不允许内联 `fetch`。
- `apps/bi/tests/apiConsistency.test.js`：大屏接口都走共用的请求实现；会话失效的判定只有一份。
- 各应用的会话存储：`packages/portal-sdk/src/session.js` 保证同一个子应用只有一个桥接实例，且子应用替换 `setOnContext` 时令牌仍然落盘。

## 安装与验证

```bash
pnpm install
pnpm test
pnpm build
```

Video 子应用用于统一门户发布时，使用专用构建命令锁定 `/video/` 静态资源前缀和 `/api/video` 同源 API 前缀，并执行完整测试及产物检查：

```bash
pnpm build:video:portal
```

构建输出位于 `apps/video/dist/`。此命令只生成本地构建产物，不切换网关或部署服务。