项目展示

问题 → 方案 → Demo → 相关文章;先看叙事,再点进演示

多端生活/内容 H5 与扫码入口

除了博客,还需要一块能快速触达 App / H5 / 小程序的「生活区」展示,又不必和博客首页抢注意力。

独立 Zone 站点 + 项目页手机框预览;旁侧放各端二维码,扫码即达,博客只负责导流与说明。

Zone

APP

APP

扫码下载安装即可体验App

h5页面

h5页面

扫码即可体验h5页面!

微信小程序

微信小程序

微信扫码即可体验微信小程序!

支付宝小程序

支付宝小程序

支付宝扫码即可体验微信小程序!

同一套博客 API 的 H5 / 小程序前台

博客长期只有 PC 向的 Nuxt 站:手机阅读、小程序分发都偏弱,若再维护一套完全不同的接口与交互,成本会翻倍。

用 uni-app 复用 blog-server(及 Go 网关)同一套 API,对齐登录、文章、RPG 等能力;H5 部署在 go.jiang-xia.top,小程序按端适配样式与 Socket,和 Nuxt 端形成「四端」之一。

Demo

Blog UniApp

内容、权限与 RPG 运营后台

前台再完整,没有后台也难以运营文章、用户、支付与冒险数值。

Vue3 管理端对接同一后端:RBAC、内容审核、数据大屏与 RPG 配置集中在此,项目页可直接 iframe 预览。

Blog Admin

运营向数据大屏

列表和表格看不清站点整体走势,演示与巡检时需要一块「一眼概况」。

管理端同域下的数据大屏页,项目页嵌入预览;指标与后台工作台同源。

Data Screen

Zone 侧管理入口

Zone 内容与权限不宜和博客后台完全混在同一套菜单里,需要独立运营入口。

独立 Zone Admin 地址,项目页提供登录预览;与 Zone H5 成对出现。

Zone Admin