Files
website/data/content.ts
T
Dai0814 ccb3f5e39a
mirror-to-gitee / mirror (push) Successful in 4s
feat(portal): 首页补齐产品功能、核心能力、界面预览、官方文档四个区块
用户反馈首页缺产品功能、核心能力与界面预览,且没有官方文档入口。

新增区块
- 产品功能:三条产品线(iotLCM / 秀杰 DTU / XiuAdmin),
  每条列 6 项能力,卡片底部直达详情页
- 核心能力:8 张带标签的卡片,讲工程层面的硬指标
  (部署、接入、开放、治理、韧性、交付、数据、维护),
  与"产品功能"区分开:前者是做什么,后者是凭什么能用住
- 界面预览:ScreenshotPreview 组件,Web 管理端 / 小程序端两组标签切换,
  首屏大图 + 缩略图条,带浏览器窗口装饰
- 官方文档:6 个入口卡片(文档中心、Web 手册、小程序手册、部署手册、
  OpenAPI 合同、门户部署说明),外链自动加 target=_blank

界面预览的占位机制
- previewShots 里 file 留空时渲染带图注的占位框,不报错、不影响构建
- 补图只改 file 字段,组件无需改动
- 新增 pages/public/screenshots/README.md 写清命名、尺寸、脱敏要求

导航
- 增加产品功能、核心能力、界面预览、官方文档四个锚点项
- 窄屏(≤860px)隐藏中间三个锚点项,避免挤压

验证
- 构建 13 页,208 条引用 0 失效
- 浏览器实测:7 个导航项、5 个 section 锚点齐全
- 移动端 390px 无横向溢出
- 文档站 5 个外链地址均实测 200 可达
2026-11-04 14:27:48 +08:00

382 lines
16 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',
name: 'iotLCM 物联网卡',
tagline: 'SIM 卡从入库到销户的全流程',
features: [
'卡信息检索与批量导入',
'入库 / 库存 / 出库三级流转',
'批量开停复机与续费',
'套餐、流量池与定价',
'三大运营商协议直连',
'达量断网与智能诊断',
],
page: '/projects/iotlcm/',
},
{
id: 'xiu-dtu',
name: '秀杰 DTU 设备',
tagline: 'DTU 设备从生产到运行监控',
features: [
'产品、型号与生产批次',
'固件版本与 OTA 升级',
'配置分组与下发状态',
'代理商划拨与回收',
'HTTP / TCP 双通道接入',
'设备在线状态监控',
],
page: '/projects/xiu-dtu/',
},
{
id: 'xiu-admin',
name: 'XiuAdmin 中后台',
tagline: '22 项内置功能的应用底座',
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 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: '门户站',
},
]