Files
website/data/content.ts
T
Dai0814 9955e830ce
mirror-to-gitee / mirror (push) Successful in 4s
refactor(portal): 对齐 facms.cn 架构,区块顺序归位并撤掉深色块
对比 https://www.facms.cn 后调整三处结构性差异:

1. 顺序归位
   参考站是「产品功能 → 核心能力」,先讲做什么再讲凭什么。
   上一版我把核心能力提到前面并染成深色,属于人为制造差异。
   现在改回:项目 → 产品功能 → 核心能力 → 界面预览。

2. 撤掉深色块
   参考站全程浅色,靠留白与间距分段,没有深色区块打断。
   移除 .p-section--deep 的使用,核心能力回归 p-section--alt 浅灰,
   与前后白底交替,和整站色阶统一。
   (样式定义保留,后续需要强调区块时可用。)

3. 核心能力改标签切换
   参考站核心能力是一条「通用特性」+ 9 个产品分组的标签切换。
   新增 abilityGroups:通用底座 / iotLCM / 秀杰 DTU / XiuAdmin 四组,
   每组 6 项,复用 CapabilityTabs(加 source="home" 与 cols 参数)。
   替代原先 8 张平铺卡片。

4. 产品功能密度对齐
   参考站产品功能 9 张卡各带 6 项功能点。原先我们只有 3 张卡
   (每条产品线一张),信息密度偏低。
   拆成 9 张:卡与库存 / 通道与上游 / 资费与计费 / 组织与账号 /
   生产与研发 / 代理与客户 / 设备接入 / 中后台底座 / 开发效率。

验证
- 构建 13 页,274 条引用 0 失效
- 浏览器实测区块顺序:hero → projects → features → core → preview
  → foundation → how → docs → cta,无 .p-section--deep 残留
- 产品功能 9 卡、核心能力 4 标签每标签 6 卡
- 移动端 390px 无横向溢出
2026-11-04 14:42:35 +08:00

533 lines
23 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* 门户首页的内容数据 —— 与 data/projects.ts 并列,只放首页排版需要的文案。
*
* 口径约束:这里的每一条都取自各项目的 README / 详情页,不写没有依据的数字。
* 需要新增能力时,先在对应项目仓核实,再补到这里。
*/
export interface Stat {
num: string
unit?: string
label: string
}
/** 首页数据条。只列可从仓库直接核对的事实。 */
export const stats: Stat[] = [
{ num: '3', label: '开源项目' },
{ num: '3', label: '运营商协议直连' },
{ num: '22', unit: '+', label: 'XiuAdmin 内置模块' },
{ num: '100', unit: '%', label: 'Apache-2.0 许可' },
]
/* ============================================================
产品功能 —— 首页「产品功能」区块,按产品线列功能点
============================================================ */
export interface ProductLine {
id: string
name: string
/** 一句话定位 */
tagline: string
/** 该产品线的功能清单,取 6 条最能说明问题的 */
features: string[]
/** 对应详情页 */
page: string
}
export const productLines: ProductLine[] = [
{
id: 'iotlcm-card',
name: '卡与库存',
tagline: '从入库到销户,每张卡都可追',
features: [
'卡信息检索与按三码查卡',
'批量导入建立卡档案',
'入库 / 在库 / 出库三级流转',
'库存批次与去向追溯',
'批量开停复机',
'续费与变更套餐',
],
page: '/projects/iotlcm/',
},
{
id: 'iotlcm-channel',
name: '通道与上游',
tagline: '把运营商接口差异收敛到一层',
features: [
'中国移动 OneLink 直连',
'中国电信 5G CMP 直连',
'中国联通 10646 直连',
'通道与接入参数模板',
'共享 Token 接入三方渠道',
'通道缓存转发与凭据管理',
],
page: '/projects/iotlcm/',
},
{
id: 'iotlcm-billing',
name: '资费与计费',
tagline: '套餐、流量池与定价分开建模',
features: [
'套餐与流量池定义',
'多层套餐结构绑定',
'面向代理商的定价规则',
'面向终端客户的差异化报价',
'达量断网阈值设置',
'实时用量与月累计查询',
],
page: '/projects/iotlcm/',
},
{
id: 'iotlcm-org',
name: '组织与账号',
tagline: '多租户下的权限治理',
features: [
'多级企业组织结构',
'用户与角色权限分配',
'菜单与按钮级权限',
'代理商分级与分佣',
'对外 API 凭证签发吊销',
'操作审计与工单流转',
],
page: '/projects/iotlcm/',
},
{
id: 'xiu-dtu-produce',
name: '生产与研发',
tagline: '设备出厂前的每个环节留痕',
features: [
'产品与硬件型号定义',
'工厂与生产批次管理',
'设备批量生产导入导出',
'固件版本登记与发布',
'OTA 升级任务分批下发',
'配置分组与版本管理',
],
page: '/projects/xiu-dtu/',
},
{
id: 'xiu-dtu-channel',
name: '代理与客户',
tagline: '设备划拨链路透明可回溯',
features: [
'多级代理结构维护',
'设备划拨与回收留痕',
'划拨历史回溯到批次',
'终端客户扫码绑定',
'一机一码防串货',
'代理商自助查单',
],
page: '/projects/xiu-dtu/',
},
{
id: 'xiu-dtu-device',
name: '设备接入',
tagline: '软硬一体的接入与监控',
features: [
'HTTP / TCP 双通道接入',
'指令下发与回执确认',
'事件上报与 UART 隧道',
'设备在线状态监控',
'信号强度与异常告警',
'联调与压测脚本随仓',
],
page: '/projects/xiu-dtu/',
},
{
id: 'xiu-admin-base',
name: '中后台底座',
tagline: '22 项能力开箱可用',
features: [
'多租户与租户套餐',
'用户、部门、岗位、角色',
'菜单与按钮级权限',
'字典、参数与客户端管理',
'在线用户与登录日志',
'通知公告与消息队列',
],
page: '/projects/xiu-admin/',
},
{
id: 'xiu-admin-dev',
name: '开发效率',
tagline: '少写样板代码',
features: [
'CURD 与树表代码生成',
'表单控件勾选生成',
'定时任务在线管理',
'附件上传与分片续传',
'服务与缓存监控',
'操作 / 登录 / 服务日志',
],
page: '/projects/xiu-admin/',
},
]
/* ============================================================
核心能力 —— 首页「核心能力」区块,强调工程层面的硬指标
============================================================ */
export interface CoreAbility {
title: string
text: string
/** 卡片角标,一个词概括 */
tag: string
}
export const coreAbilities: CoreAbility[] = [
{
tag: '部署',
title: '单机一条命令起',
text: 'Docker Compose 编排齐备,首次启动自动建库建表、导入种子数据与时序库建表,不需要本地编译,约一分钟可用。',
},
{
tag: '接入',
title: '运营商协议内置',
text: '中国移动 OneLink、中国电信 5G CMP、中国联通 10646 的接口差异收敛在对接层,上层业务不感知底层协议。',
},
{
tag: '开放',
title: '版本化对外接口',
text: 'V3 版本化接口、旧版兼容接口与运营商能力代理三套合同并行,升级不破坏既有调用方。',
},
{
tag: '治理',
title: '多租户权限模型',
text: '租户、部门、岗位、角色四层结构,菜单与按钮级权限、数据范围划分,关键操作全程留痕。',
},
{
tag: '韧性',
title: '上游抖动隔离',
text: '独立的通道缓存转发层,上游接口异常或超时不直接传导到管理端,配合健康探针与运行期 DNS 解析自动跟随容器 IP 变化。',
},
{
tag: '交付',
title: '离线可部署',
text: '镜像可导出为归档文件带入内网,无外网环境同样能完成安装与升级,适合企业内网与客户现场。',
},
{
tag: '数据',
title: '时序数据留存',
text: '流量与状态按账期落入时序库,月度账单自动生成、每小时增量更新,长期趋势分析不失真。',
},
{
tag: '维护',
title: '文档与代码同仓',
text: '使用手册、部署手册与接口合同与代码同仓维护,随平台一起发布,版本不会脱节。',
},
]
/* ============================================================
核心能力分组 —— 首页核心能力区块用标签切换呈现
组织方式对齐参考站:一条「通用底座」+ 每条产品线各一组
============================================================ */
export interface AbilityGroup {
id: string
name: string
intro: string
items: Capability[]
}
export const abilityGroups: AbilityGroup[] = [
{
id: 'common',
name: '通用底座',
intro: '三条产品线共享的工程能力,覆盖部署、权限、交付与维护。',
items: [
{ title: '单机一条命令起', text: 'Docker Compose 编排齐备,首次启动自动建库建表、导入种子数据与时序库建表,不需要本地编译,约一分钟可用。' },
{ title: '多租户权限模型', text: '租户、部门、岗位、角色四层结构,菜单与按钮级权限、数据范围划分,关键操作全程留痕。' },
{ title: '版本化对外接口', text: 'V3 版本化接口、旧版兼容接口与运营商能力代理三套合同并行,升级不破坏既有调用方。' },
{ title: '离线可部署', text: '镜像可导出为归档文件带入内网,无外网环境同样能完成安装与升级,适合企业内网与客户现场。' },
{ title: '文档与代码同仓', text: '使用手册、部署手册与接口合同与代码同仓维护,随平台一起发布,版本不会脱节。' },
{ title: '健康探针与自愈', text: '各服务带 healthcheck,网关依赖后端就绪后才启动;resolver + resolve 让上游容器换 IP 后自动跟随。' },
],
},
{
id: 'iotlcm',
name: 'iotLCM',
intro: '物联网卡平台的工程重点:协议收敛、上游隔离与用量数据的长期可回溯。',
items: [
{ title: '运营商协议内置', text: '中国移动 OneLink、中国电信 5G CMP、中国联通 10646 的接口差异收敛在对接层,上层业务不感知底层协议。' },
{ title: '上游抖动隔离', text: '独立的通道缓存转发层,上游异常或超时不直接传导到管理端,管理端可用性不受上游影响。' },
{ title: '时序数据留存', text: '流量与状态按账期落入时序库,月度账单自动生成、每小时增量更新,长期趋势分析不失真。' },
{ title: '全量同步与增量对齐', text: '流量、状态、IMEI 支持全量同步与增量对齐两条路径,数据不一致时可主动触发校准。' },
{ title: '批量任务可重试', text: '开停复机与续费按批次下发,失败项单独标记并可重试,不影响同批次其它卡。' },
{ title: '智能诊断', text: '结合卡状态、通道与用量给出诊断结论与处置建议,把排障从查日志变成看结论。' },
],
},
{
id: 'xiu-dtu',
name: '秀杰 DTU',
intro: '设备平台的工程重点:软硬绑定、配置下发与固件升级的可靠性。',
items: [
{ title: 'HTTP / TCP 双通道', text: '设备接入同时支持 HTTP 与 TCP,按现场网络条件选择,指令下发均有回执确认。' },
{ title: '一机一码防串货', text: '设备唯一识别码与型号绑定,扫码即绑定终端客户,杜绝拔卡换机与跨渠道窜货。' },
{ title: '配置版本化下发', text: '配置分组与版本独立管理,下发状态逐台可见,异常设备可单独重推。' },
{ title: 'OTA 分批升级', text: '固件升级任务分批下发,进度与结果可查,失败设备可重试,避免一次性全量推送的风险。' },
{ title: '生产批次可追溯', text: '产品、硬件型号、工厂与生产批次关联,出问题能回溯到具体批次与供应商。' },
{ title: '联调脚本随仓', text: '仓库自带设备联调与压测脚本,新设备接入可先在本地验证协议,再接真实环境。' },
],
},
{
id: 'xiu-admin',
name: 'XiuAdmin',
intro: '中后台框架的工程重点:少写样板代码,权限与审计开箱可用。',
items: [
{ title: '代码生成', text: '建表加简单配置即可生成 CURD 与树表代码,表单控件勾选生成,省掉大量重复劳动。' },
{ title: '模块化与插件化', text: '应用化、模块化、插件化机制,业务模块可独立开发与装卸,不侵入框架核心。' },
{ title: 'JWT 认证', text: '基于 JWT 的用户状态认证,前后端分离场景直接可用。' },
{ title: '路由自动生成文档', text: 'GoFrame 的规范化路由注册,无需注解即可生成 api 文档。' },
{ title: '全链路日志', text: '操作日志、登录日志、服务日志三类分开留存,异常可按堆栈直接定位。' },
{ title: '服务与缓存监控', text: 'CPU、内存、磁盘、网络、堆栈与缓存命令统计内置,不需要额外接监控组件。' },
],
},
]
export interface Capability {
title: string
text: string
}
/** 通用能力底座 —— 三个项目共享的工程特征 */
export const foundations: Capability[] = [
{
title: '单仓多服务',
text: '后端服务、前端应用、文档站与部署编排收在同一个仓库,一次 clone 拿到全部内容。',
},
{
title: '一条命令起',
text: 'Docker Compose 编排齐备,首次启动自动建库建表与种子数据,不需要本地编译。',
},
{
title: '接口开放',
text: '对外接口有独立的版本化合同与鉴权方式,可被自有系统或三方平台直接调用。',
},
{
title: '权限与审计',
text: '多租户、角色、菜单按钮权限与数据范围划分,关键操作留痕可追溯。',
},
{
title: '离线可部署',
text: '镜像可导出为归档文件带入内网,无外网环境同样可以完成安装与升级。',
},
{
title: '文档随仓发布',
text: '使用手册、部署手册与接口合同与代码同仓维护,版本不会脱节。',
},
]
/** iotLCM 的能力分组,按业务域拆 */
export interface CapGroup {
id: string
name: string
intro: string
items: Capability[]
}
export const iotlcmGroups: CapGroup[] = [
{
id: 'card',
name: '卡与库存',
intro: '从运营商渠道入库开始,一路管到销户,卡片状态与位置始终可查。',
items: [
{ title: '卡信息管理', text: '单卡详情、按三码检索、状态与用量快照,支持批量导入建立卡档案。' },
{ title: '三级库存流转', text: '入库、在库、出库全程留痕,按批次追溯每一张卡的来源与去向。' },
{ title: '批量开停复机', text: '按批次下发至运营商,执行结果自动回写,失败项可单独重试。' },
{ title: '续费与变更套餐', text: '单卡与批量受理并行,支持指定生效时间与到期处理策略。' },
{ title: '达量断网', text: '按用量阈值自动停机,阈值可批量设置,避免超量产生额外费用。' },
{ title: '智能诊断', text: '结合卡状态、通道与用量给出诊断结论与处置建议,缩短排障时间。' },
],
},
{
id: 'channel',
name: '通道与上游',
intro: '把不同运营商的接口差异收敛到一层,上层业务不用关心底层协议。',
items: [
{ title: '三大运营商直连', text: '中国移动 OneLink、中国电信 5G CMP、中国联通 10646 协议适配内置。' },
{ title: '通道与接入模板', text: '按运营商维护通道,接入参数模板化,新增通道不改业务代码。' },
{ title: '共享 Token 接入', text: '三方渠道商以共享 Token 模式接入,配合白名单转发控制调用范围。' },
{ title: '通道缓存转发', text: '独立转发层隔离上游抖动,上游异常不影响管理端可用性。' },
{ title: '凭据与配额管理', text: '上游凭据集中维护,调用量与配额可观测,异常调用及时告警。' },
{ title: '执行日志', text: '每次上游调用的请求与响应留存,问题定位有据可依。' },
],
},
{
id: 'billing',
name: '资费与计费',
intro: '套餐、流量池与定价分离建模,同一张卡可以按不同口径结算。',
items: [
{ title: '套餐配置', text: '套餐与流量池定义,支持多层套餐结构与绑定关系。' },
{ title: '定价规则', text: '面向代理商与终端客户的定价分开维护,支持差异化报价。' },
{ title: '生效与到期', text: '套餐生效、到期、续期的处理策略可配置,避免人工干预。' },
{ title: '用量查询', text: '实时用量与月累计分开统计,支持历史账期回溯。' },
{ title: '时序数据留存', text: '流量与状态按账期落入时序库,长期趋势分析不失真。' },
{ title: '分佣与结算', text: '代理商分佣规则配置,划拨与回收动作与结算口径对齐。' },
],
},
{
id: 'org',
name: '组织与账号',
intro: '多租户下的企业、账号与权限治理,对外凭证与对内角色分开管理。',
items: [
{ title: '企业与用户', text: '多级组织结构,企业下挂用户,数据按组织隔离。' },
{ title: '角色与权限', text: '按角色分配菜单与操作权限,按钮级权限可粒度控制。' },
{ title: '代理商体系', text: '代理商分级管理,设备与卡片划拨、回收动作全程留痕。' },
{ title: 'API 凭证', text: '对外调用凭证的签发、吊销与使用记录,异常调用可即时阻断。' },
{ title: '操作审计', text: '关键操作留痕,可按时段、操作人、对象多维检索。' },
{ title: '工单流转', text: '内部与客户侧工单流转,处理时效与责任人可追踪。' },
],
},
{
id: 'delivery',
name: '对外交付',
intro: '把平台能力以接口形式交付出去,自有系统与三方平台都能接。',
items: [
{ title: 'V3 版本化接口', text: '接口按版本演进,升级不破坏既有调用方。' },
{ title: '旧版兼容接口', text: '历史接口保持兼容,存量系统无需改造即可迁移。' },
{ title: '运营商能力代理', text: '白名单转发与共享 Token 两种模式,按需开放上游能力。' },
{ title: 'Web 管理端', text: '完整的后台界面,覆盖卡管理、资费、组织、运维全场景。' },
{ title: '小程序 / H5', text: '面向终端用户的移动端,支持查卡、办理与自助服务。' },
{ title: '接口文档', text: '接口合同与示例随文档站发布,接入方可以自助完成联调。' },
],
},
]
/** XiuAdmin 内置模块(取自项目详情页的 22 项,归并为可读分组) */
export interface AdminGroup {
name: string
items: string[]
}
export const adminGroups: AdminGroup[] = [
{ name: '租户与组织', items: ['租户管理', '租户套餐', '客户端管理', '部门管理', '岗位管理'] },
{ name: '账号与权限', items: ['用户管理', '角色管理', '菜单管理', '在线用户'] },
{ name: '开发效率', items: ['代码生成', '定时任务', '消息队列', '字典管理'] },
{ name: '配置与运维', items: ['配置管理', '服务监控', '缓存监控', '操作日志', '登录日志', '服务日志'] },
]
/** DTU 的能力分组 */
export const dtuGroups: CapGroup[] = [
{
id: 'produce',
name: '生产与研发',
intro: '从产品定义到固件版本,设备出厂前的每个环节都在系统里。',
items: [
{ title: '产品与型号', text: '产品定义、硬件型号与工厂信息维护,生产批次可追溯。' },
{ title: '设备生产', text: '批量生产导入导出,设备序列号与产品型号绑定。' },
{ title: '固件管理', text: '固件版本登记与发布,支持按型号推送不同版本。' },
{ title: 'OTA 升级', text: '升级任务分批下发,进度与结果可查,失败设备可重试。' },
{ title: '配置中心', text: '产品通用模型、配置分组与版本,下发状态逐台可见。' },
{ title: '指令下发', text: 'HTTP / TCP 双通道接入,指令下发与回执确认。' },
],
},
{
id: 'channel',
name: '代理与客户',
intro: '设备划拨链路透明,代理商与终端客户的归属关系清晰。',
items: [
{ title: '代理商管理', text: '多级代理结构,下级代理与设备列表分开维护。' },
{ title: '设备划拨', text: '划拨与回收动作留痕,历史记录可回溯到具体批次。' },
{ title: '终端绑定', text: '终端客户扫码绑定设备,一机一码防止串货。' },
{ title: '我的订单', text: '代理商自助查看订单与设备状态,减少人工对接。' },
{ title: '运行监控', text: '设备在线状态、信号与事件上报集中呈现。' },
{ title: '联调工具', text: '仓库自带设备联调与压测脚本,新设备接入可先本地验证。' },
],
},
]
/* ============================================================
界面预览 —— 首页「界面预览」区块
============================================================ */
export interface PreviewShot {
/** 截图文件名,放在 pages/public/screenshots/ 下;为空时渲染占位框 */
file: string
/** 图注,说明这张图看的是什么 */
caption: string
/** 所属端,用于标签切换 */
group: 'web' | 'app'
}
/**
* 每个分组的第一张是首屏大图,其余进下方缩略图条。
*
* 图片放置约定:pages/public/screenshots/<file>
* 建议尺寸 1600x1000(web)/ 750x1334(app),单张控制在 400KB 以内。
* file 留空时页面显示占位框与图注,不会报错 —— 补图时只改 file 字段即可。
*/
export const previewShots: Record<'web' | 'app', PreviewShot[]> = {
web: [
{ file: '', caption: '管理端工作台:卡量与用量概览', group: 'web' },
{ file: '', caption: '卡信息列表:三码检索与批量操作', group: 'web' },
{ file: '', caption: '业务受理:开通、续费与变更套餐', group: 'web' },
{ file: '', caption: '套餐与定价配置', group: 'web' },
{ file: '', caption: '通道与上游接入管理', group: 'web' },
{ file: '', caption: '企业、用户与角色权限', group: 'web' },
],
app: [
{ file: '', caption: '用户端首页:公开查卡入口', group: 'app' },
{ file: '', caption: '卡片详情与用量', group: 'app' },
{ file: '', caption: '业务办理:续费与套餐变更', group: 'app' },
{ file: '', caption: '智能诊断:按链路排查问题', group: 'app' },
],
}
/* ============================================================
官方文档 —— 首页「官方文档」区块
============================================================ */
export interface DocEntry {
name: string
/** 这份文档解决什么问题 */
desc: string
url: string
/** 归属项目名,用于分组显示 */
project: string
}
/**
* 文档站是随 iotLCM 发布的独立站点(VitePress),按手册分册。
* 地址可用 DOCS_BASE 环境变量在构建时覆盖,见 .vitepress/config.mts。
*/
const DOCS_BASE = 'http://open.5iot.com:5051/docs'
export const docs: DocEntry[] = [
{
name: '文档中心',
desc: '全部手册的入口页,按端与用途分册索引',
url: `${DOCS_BASE}/`,
project: 'iotLCM',
},
{
name: '使用手册 · Web 管理端',
desc: '查卡、业务受理、套餐定价、库存出入库、通道管理、企业用户与角色、工单、API 凭证',
url: `${DOCS_BASE}/manual/web/`,
project: 'iotLCM',
},
{
name: '使用手册 · 小程序端',
desc: '公开查卡、卡片排查、客户管理与划拨、工单、批次执行日志、消息与个人中心',
url: `${DOCS_BASE}/manual/mini-program/`,
project: 'iotLCM',
},
{
name: '部署手册',
desc: '环境要求、一键部署、配置说明、离线部署、拆分部署、自建镜像、运维与排错',
url: `${DOCS_BASE}/deploy/`,
project: 'iotLCM',
},
{
name: 'OpenAPI 合同',
desc: '鉴权方式、V3 接口、旧版兼容接口、运营商能力代理',
url: `${DOCS_BASE}/openapi/`,
project: 'iotLCM',
},
{
name: '门户部署说明',
desc: '本门户自身的构建参数、镜像形态与容器部署方式',
url: '/guide/portal-deploy',
project: '门户站',
},
]