QXJ 项目文档

简体中文

English
日本語

简体中文

English
日本語

主题

NSP 应用商店 apps.nsp.ac.cn ​

国家信息中心 NSP 鸿蒙应用商店官网源码，仿 Apple App Store 风格的纯静态 站点，展示可下载的鸿蒙 NEXT 应用（当前为 QXJ 安全浏览器正式版与开发版， 即风四C星浏览器稳定版 / 尝鲜版构建），并提供版本历史、应用故事、专题等 页面与 .hap 下载（HarmonyOS deeplink）。

线上地址：

技术栈 ​

  • Vue 3.5 + TypeScript + Vue Router 4：无 UI 组件库、无 HTTP 请求库；
  • Vite 6 构建（dev：TypeScript 5.7、vue-tsc），产物为纯静态文件， Nginx 托管；pnpm/npm 锁文件均在。

页面与路由 ​

路由页面职责
/appstoreTodayPageToday 首页：应用卡片、横向货架（shelf）；支持 ?q= 按名称/开发者/副标题搜索
/storiesStoriesPage应用故事（风四C星故事介绍，侧栏入口已注释）
/topicsTopicsPage专题合集，占位「敬请期待」
/app/:idAppDetailPage应用详情（正式版）：介绍、截图、版本历史、下载
/app/:id/devAppDetailPage应用详情（开发版）：同上，切换尝鲜版数据源
/重定向 → /appstore通配符同样兜底到 /appstore

AppDetailPage 结构（对标 App Store web）：返回/鸿蒙提示 → 头部（图标/名称/ 获取）→ 截图预览（横竖屏 + 弹窗）→ 新功能 → 简介 → 信息 → 当前版本 （构建 Tab + deeplink 下载）→ 历史版本（折叠）；含设备形态下拉（平板/ 手机/电脑/电视/穿戴，默认平板）、release/debug 切换、「所有设备 × 所有 版本」总览弹层。

首页与搜索 ​

  • Today 首页以大卡片行（今日焦点）+ 横向货架（HorizontalShelf）组织内容， 货架数据由 todayShelves / appShelves / topCharts 等工厂生成的占位 条目填充，营造 App Store 式陈列效果；
  • 搜索通过 URL query 驱动：访问 /appstore?q=关键词，按应用名称、开发者、 副标题匹配过滤卡片；
  • 侧栏（SidebarNav）提供搜索框与「应用中心 / 专题」导航，useViewport 五档断点控制响应式（视口 <484px 时隐藏侧栏）。

详情页下载链路 ​

  • 「当前版本」区按构建 Tab 展示所选设备形态 × release/debug 构建，点击下载 按钮经 utils/harmony.ts 生成 store:// deeplink，由鸿蒙系统接管安装 流程；
  • 非鸿蒙 UA 访问时给出提示（harmony.ts 的 UA 判定）；
  • 「历史版本」区折叠展示同版本线下全部历史版本，并按当前选中设备过滤 builds；
  • 「所有设备 × 所有版本」弹层提供全量构建总览，便于多端用户自助选择。

数据维护 ​

唯一数据源：仓库 src/data/apps.ts（约 950 行）。应用信息、版本列表、下载地址、截图清单 均在此维护：

  • 真实应用只有一个：风四C星浏览器（id/bundleName cn.ac.nsp.qxj.nsp_browser），其余为工厂生成的占位条目 （todayShelves / appShelves / topCharts）；
  • 应用安装包托管于腾讯云 COS（北京）： https://nsp-mcs-qxj-1302029212.cos.ap-beijing.myqcloud.com/harmony/qxj_harmony_next_pad_nsp_browser/...；
  • 版本数据：
    • 稳定版 QXJ_VERSIONS：最新 4.1.54（4001054，2026-10-08），共 17 个 版本；部分老版本版本级下架（deprecated），4.1.16 的 release 构建为 构建级下架；
    • 尝鲜版 QXJ_DEV_VERSIONS：最新 5.2.89（5002089）；如 5.2.70 含 tablet/phone 两个构建（构建用 device 字段区分设备）；
  • 截图：server_info.jpg + 01.jpeg~14.jpeg，横屏 （screenshotOrientation=landscape）；
  • 类型定义 src/types/app.ts：AppItem / AppVersion（版本级 deprecated）/ AppBuild（device 默认 tablet、构建级 deprecated、hot）/ AppManifest（minAPI 5.0.5(17)、targetAPI 6.1.1(24)）/ DeviceType； 查询函数 findItem / findCardForItem。

历史版本设备过滤：详情页历史版本区按当前选中设备过滤 builds，避免 平板版本里出现手机构建；下架标记区分版本级与「当前设备构建全部下架」。

版本更新命令 ​

新增版本时，把发布页文本（COS 控制台复制的一个/多个 {"app":...} JSON 块）粘到 tmp/paste.txt，执行：

bash
npm run add-version       # 正式版（写入 QXJ_VERSIONS）
npm run add-dev-version   # 开发版（写入 QXJ_DEV_VERSIONS）

脚本逻辑要点（scripts/add-version.mjs / scripts/add-dev-version.mjs）： 花括号配平切分 JSON；按包大小推断构建类型（≤20MB 为 release，否则 debug）；按模块名选 manifest 工厂；日期取 pkgUrl 14 位时间戳；同 versionCode 合并 builds（支持同版本多端补包）；packageHash / device+type 去重；支持 --changelog、--device、--dry-run 等参数。

典型发版流程：

  1. 鸿蒙端构建出包并上传 COS，拿到各设备的下载直链；
  2. 在 COS 控制台 / 发布页复制发布文本（含 pkgUrl、packageHash、 sign、模块清单等的 JSON 块）粘贴至 tmp/paste.txt；
  3. 按渠道执行 npm run add-version（稳定版）或 npm run add-dev-version （尝鲜版），脚本自动把新版本追加到 apps.ts 对应数组；
  4. 如需补写更新说明可加 --changelog，多端分批出包时可对同一 versionCode 多次执行，脚本自动合并 builds；
  5. npm run build 本地验证后，上传 dist/ 到宝塔站点目录即完成发布。

脚本只改数据文件、不改页面代码；tmp/ 已加入 .gitignore。

开发与构建 ​

bash
npm install
npm run dev        # 本地开发
npm run build      # vue-tsc 类型检查 + vite build
npm run preview

部署 ​

部署拓扑 ​

应用商店是纯静态站点，构建产物由阿里云域名服（8.140.216.214）上的宝塔 Nginx 托管，经标准 HTTPS（443）访问；安装包实体不在站点内，下载链接指向 腾讯云 COS 上的 .hap 文件，站点只存元数据。

Nginx 配置（宝塔风格） ​

站点监听 443 ssl，server_name apps.nsp.ac.cn，静态文件由 Nginx 托管， SPA 路由用 try_files ... /index.html 兜底，证书为宝塔免费 DV 证书。发布时 将构建产物上传到站点目录即可。

nginx
server {
    listen 443 ssl;
    server_name apps.nsp.ac.cn;
    root /www/wwwroot/apps.nsp.ac.cn;
    location / {
        try_files $uri $uri/ /index.html;   # SPA 路由兜底
    }
    # 敏感文件 / 目录拦截：.env / package.json / Dockerfile / .git 等一律 404
    location ~* (\.env.*|package(-lock)?\.json|Dockerfile|...) { return 404; }
    location ~* /(\.git|\.svn|node_modules|runtime)/ { return 404; }
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; }
    location ~ .*\.(js|css)?$                  { expires 12h; }
}

配置要点：

  • 敏感文件/目录（.env、清单、.git、node_modules 等）一律 404；
  • 图片缓存 30 天、js/css 12 小时；
  • /appstore 是前端路由路径而非子目录部署——Vite 未设 base（资源 以 / 为根）；
  • 宝塔面板的 /.well-known/ 放行用于 ACME 证书申请验证，但禁止在该目录 放可执行与打包文件（if 规则匹配 .(php|jsp|py|js|css|zip|sql|bak)$ 返回 403）；
  • 仓库内 nginx.conf 是早期部署在外网测试服时的历史配置（listen 7777 + IP 直连），该入口已停用，以现网 443 域名站点为准。

安装包托管（腾讯云 COS） ​

构建产物不在站点内，而是上传到腾讯云对象存储，站点只存 manifest 元数据：

typescript
// src/data/apps.ts
const QXJ_DEPLOY = 'nsp-mcs-qxj-1302029212.cos.ap-beijing.myqcloud.com'
const QXJ_ICON_URL = `https://${QXJ_DEPLOY}/harmony/qxj_harmony_next_pad_nsp_browser/app_icon.png`
const QXJ_BASE = `https://${QXJ_DEPLOY}/harmony/qxj_harmony_next_pad_nsp_browser`

每个版本构建（AppBuild）携带 pkgUrl（COS 直链）、packageHash、sign 与 manifest 工厂构造的完整 HarmonyOS 安装清单（bundleName / versionCode / minAPIVersion 5.0.5(17) / targetAPIVersion 6.1.1(24) / modules），浏览器通过 store:// deeplink 触发系统安装流程。

线上实测 ​

线上地址 https://apps.nsp.ac.cn/appstore 可正常访问（合法 HTTPS）， 仿 Apple App Store 风格：左侧深色侧栏（搜索 + 应用中心 / 专题），主区 「APP OF THE DAY」焦点卡为风四C星浏览器，下方「今日焦点」横排展示 晨读 / 简截 / 色卡 / 番茄钟等占位应用。详情页含截图预览、版本历史与 store:// 下载按钮。

部署详见

完整的宝塔 Nginx 反向代理、终端预置服务器配置与自签证书处理见 部署与服务器配置。

工程目录 ​

src/
├── components/   # cards（AppIcon/Today/Poster/ListRow）、layout/SidebarNav、
│                 # media/Artwork、shelves/HorizontalShelf、ui（PillButton/SectionHeader）
├── composables/useViewport.ts   # 五档断点（<484 隐藏侧栏）
├── data/apps.ts
├── pages/
├── router/
├── styles/tokens.css
├── types/app.ts
└── utils/harmony.ts   # .hap deeplink 生成、UA 判定、版本过滤

相关文档

最近更新