# 工业互联网平台 v5.0 · 启动手册 · 离线指南 > 适用：本原型 `原型/` 目录所有 HTML 页面 > 更新日期：2026-04-19 --- ## 1. 一分钟启动 | 场景 | 步骤 | |---|---| | 我是产品经理，第一次看 | ① 解压 `原型/` 至本地任意目录 → ② 双击 **`START.html`** → ③ 在三大入口卡片中选「应用管理平台 · 控制台」开始体验 | | 我要看完整登录 SSO 流程 | 双击 **`login.html`**，任选一个示例账号一键登录 | | 我只想看某个子平台 | 直接双击对应 `*_index.html`，例如 `platforms/bi/app/bi_index.html` | | 我要看移动驾驶舱 | 双击 `platforms/mobile/index.html`，浏览器请缩小窗口至 ~ 400 px 宽，或切到 DevTools 设备模拟（iPhone 12 推荐） | | 我要部署给同事看 | 见第 6 节"内网静态服务器部署" | > 全部页面都是**纯静态 HTML + JS + CSS**，**无需任何服务端、数据库、构建工具**。 --- ## 2. 离线运行原理 | 资源 | 离线策略 | 文件 | |---|---|---| | 图标库 | 本地 `` polyfill + 870+ MDI SVG 内联 | `assets/vendor/iconify-icon.local.js` + `assets/vendor/iconify-mdi-data.js` | | 3D 引擎 | three.js 本地化（约 670 KB） | `assets/vendor/three.min.js` | | 字体 | 系统字体栈（PingFang SC / Microsoft YaHei / system-ui） | `assets/css/base.css` 内联 | | 业务数据 | 全部 mock 数据，运行期 JS 工厂构造 | `assets/js/mock.js` 与各页面内联 | | 图表 | 自研 SVG / Canvas，**不依赖** ECharts / D3 / Chart.js 在线版 | `assets/js/charts.js` | > 关键约束：**HTML 中只允许出现** `file://` / `blob:` / `data:` / 相对路径资源；**严禁** 出现 `https://cdn.*` / `https://fonts.googleapis.com/*` / `unpkg` 等任何在线域名。 > 校验方法：DevTools → Network 标签页打开页面，确认 0 条外部域名请求。 --- ## 3. 双击运行（file:// 协议）注意事项 ### 3.1 推荐做法 1. 将 `原型/` 整个目录解压在**本地磁盘**，路径中**避免空格、中文括号、感叹号等特殊字符**（中文目录名本身没问题）。 2. 用 **Edge ≥ 110** 或 **Chrome ≥ 110** 双击 `START.html`。 3. 弹出"是否允许该文件访问本地文件"提示时（macOS Safari），点击允许即可。 ### 3.2 file:// 下的已知行为差异 | 行为 | 说明 | 处理 | |---|---|---| | `fetch()` 加载本地 JSON | Chrome / Edge 默认禁止 file:// 下 fetch 本地文件 | 本原型已**全部内联化**（数据放在 `*.js` 中作为全局变量），不依赖 fetch；如自行扩展请走第 6 节内网部署 | | `localStorage` | file:// 下每个文件路径自己一个 origin，子平台间不共享 token | 本原型对 `dt_logged` 等关键 key 做了**全平台同源约定**，但若你把同一份 HTML 同时放在两个不同盘符，会出现"在 D 盘登录后回到 C 盘需重新登录"现象 | | `postMessage` | iframe 父子通信正常 ✓ | 无需特殊处理 | | Service Worker | file:// 下不可用 | 本原型未使用 Service Worker | | 弹出新窗口 | `window.open` 在 file:// 下会被部分浏览器拦截 | 编辑器 / 大屏均为 `window.open(..., '_blank')`，首次点击如被拦截，请允许"始终允许此站点弹出窗口" | ### 3.3 不推荐的浏览器 | 浏览器 | 现象 | |---|---| | IE 11 | ✗ 完全不支持 Web Components / Flexbox gap | | 360 安全浏览器兼容模式 | ✗ 旧 IE 内核，请切到极速模式 | | 微信内置浏览器 | ⚠ 仅移动驾驶舱可看，桌面端布局错乱 | --- ## 4. 故障排查 ### 4.1 图标不显示（变成空白方块或 ❓ 占位） **症状**：所有 `` 都不渲染，或个别图标显示为 `mdi:help-circle-outline` 占位。 **原因 → 排查**： 1. **`iconify-mdi-data.js` 未加载** → 打开 DevTools Console，检查是否有 `MDI_ICON_DATA is not defined` 报错。 - 修复：确认页面 `` 中两行脚本顺序为： ```html ``` - **iconify-mdi-data.js 必须在 iconify-icon.local.js 之前**。 2. **图标名拼写错误** → polyfill 找不到时落 `mdi:help-circle-outline` 占位，并把缺失名 push 到 `window.__MDI_MISSING__` 数组。在 Console 输入 `window.__MDI_MISSING__` 可查看缺失列表。 - 修复：使用其他存在的 MDI 图标名（[mdi 图标库](https://pictogrammers.com/library/mdi/) 仅供命名参考，运行时无需联网）。 3. **路径深度错** → 部分页面在 `pages//.html` 嵌套，相对路径前缀应为 `../../`，shell 在 `/app/` 深 3 级用 `../../../`。 - 修复：检查 `