# 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 服务器引擎 ## 开发 ```bash # 安装依赖 pnpm install # 启动开发服务器 pnpm dev # 构建生产版本 pnpm build # 预览生产构建 pnpm preview # 生成静态站点 pnpm generate ``` ## 配置 ### 更新版本信息 编辑 `server/utils/versions.ts` 文件: ```typescript 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` 中配置: ```typescript 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) ```bash pnpm generate ``` 生成的静态文件在 `.output/public` 目录,可部署到: - Vercel - Netlify - GitHub Pages - Cloudflare Pages ### 服务器端渲染(SSR) ```bash 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](https://icon-sets.iconify.design/) ## License MIT