riwa-ionic/packages/distribute/README.md

Riwa App 分发页

基于 Nuxt 4 + NuxtUI + TailwindCSS 4 构建的现代化应用分发页面。

技术栈

• 框架: Nuxt 4.2.2
• UI 库: Nuxt UI 4.3.0 (内置 TailwindCSS 4)
• 国际化: @nuxtjs/i18n 10.2.1
• 语言: TypeScript 5.9.3
• 代码规范: @nuxt/eslint 1.12.1

功能特性

• ✨ 基于 NuxtUI 组件的简洁现代 UI
• 🌙 自动深色模式支持（系统同步）
• 🌍 多语言支持（中文/英文）
• 📱 自动检测平台（iOS/Android/Desktop）
• 📊 实时下载统计展示
• 📝 版本更新日志
• 📖 安装指引说明
• 🔗 支持 iOS、Android、H5 三端下载
• 🚀 SSR/SSG 支持
• ⚡ Nitro 服务器引擎

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览生产构建
pnpm preview

# 生成静态站点
pnpm generate

配置

更新版本信息

编辑 server/utils/versions.ts 文件：

export const currentVersion: AppVersion = {
  version: "1.0.0",
  buildNumber: "100",
  releaseDate: "2025-12-30",
  releaseNotes: {
    "zh-CN": ["更新内容..."],
    "en-US": ["What's new..."],
  },
  downloads: {
    ios: "https://example.com/app.ipa",
    android: "https://example.com/app.apk",
    h5: "https://app.example.com",
  },
};

接入真实 API

替换 server/utils/versions.ts 中的以下函数：

• fetchDownloadStats() - 获取下载统计
• trackDownload() - 记录下载事件

或修改 server/api/ 目录下的 API 路由文件。

自定义主题

Nuxt UI 使用 TailwindCSS 4，可在 nuxt.config.ts 中配置：

export default defineNuxtConfig({
  colorMode: {
    preference: "system", // 'light' | 'dark' | 'system'
  },
});

目录结构

packages/distribute/
├── server/
│   ├── api/                 # API 路由
│   │   ├── version.get.ts   # 获取版本信息
│   │   ├── stats.get.ts     # 获取统计数据
│   │   └── track/
│   │       └── [platform].post.ts  # 记录下载
│   └── utils/
│       └── versions.ts      # 版本数据和工具函数
├── composables/
│   └── usePlatformDetection.ts  # 平台检测 composable
├── locales/
│   ├── zh-CN.json          # 简体中文
│   └── en-US.json          # 英文
├── types/
│   └── index.ts            # TypeScript 类型定义
├── public/
│   └── favicon.svg         # 网站图标
├── app.vue                 # 主应用组件
├── nuxt.config.ts          # Nuxt 配置
├── tsconfig.json           # TypeScript 配置
└── package.json

API 路由

• GET /api/version - 获取当前版本信息
• GET /api/stats - 获取下载统计
• POST /api/track/:platform - 记录下载事件（platform: ios | android | h5）

部署

静态站点生成（SSG）

pnpm generate

生成的静态文件在 .output/public 目录，可部署到：

• Vercel
• Netlify
• GitHub Pages
• Cloudflare Pages

服务器端渲染（SSR）

pnpm build

使用 Nitro 服务器引擎，可部署到：

• Vercel
• Netlify Functions
• Cloudflare Workers
• Node.js 服务器

自动导入

Nuxt 自动导入以下内容：

• Vue 3 API（ref, computed, watch 等）
• Nuxt 组件和工具函数
• NuxtUI 组件（UButton, UCard, UIcon 等）
• Composables（自定义的 composables）

无需手动 import！

图标

使用 NuxtUI 内置的 Iconify 图标：

• Heroicons: i-heroicons-*
• 其他图标集: 访问 Iconify

License

MIT