167 lines
3.6 KiB
Markdown
167 lines
3.6 KiB
Markdown
# 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
|