feat(mobile-upgrade): 添加移动应用升级管理Web前端
使用Clean Architecture架构实现移动应用版本管理Web前端: - Domain层: 版本实体、Repository接口定义 - Infrastructure层: API客户端、Repository实现 - Application层: Zustand状态管理、React Hooks - Presentation层: 版本列表、上传、编辑组件 技术栈: Next.js 14 + React + TypeScript + Zustand + Tailwind CSS 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Developer
parent
fcd97f26cf
commit
6db948099c
|
|
@ -0,0 +1,35 @@
|
||||||
|
# Dependencies
|
||||||
|
node_modules/
|
||||||
|
.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# Build
|
||||||
|
.next/
|
||||||
|
out/
|
||||||
|
build/
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# Local env files
|
||||||
|
.env*.local
|
||||||
|
|
||||||
|
# Testing
|
||||||
|
coverage/
|
||||||
|
|
||||||
|
# Debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# TypeScript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
reactStrictMode: true,
|
||||||
|
output: 'standalone',
|
||||||
|
env: {
|
||||||
|
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3010',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = nextConfig
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,36 @@
|
||||||
|
{
|
||||||
|
"name": "mobile-upgrade-admin",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Mobile App Upgrade Management Admin Panel",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev -p 3020",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start -p 3020",
|
||||||
|
"lint": "next lint",
|
||||||
|
"type-check": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"next": "^14.0.4",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"zustand": "^4.4.7",
|
||||||
|
"axios": "^1.6.2",
|
||||||
|
"@tanstack/react-query": "^5.14.0",
|
||||||
|
"date-fns": "^3.0.6",
|
||||||
|
"clsx": "^2.0.0",
|
||||||
|
"react-hot-toast": "^2.4.1",
|
||||||
|
"react-dropzone": "^14.2.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^20.10.5",
|
||||||
|
"@types/react": "^18.2.45",
|
||||||
|
"@types/react-dom": "^18.2.18",
|
||||||
|
"typescript": "^5.3.3",
|
||||||
|
"eslint": "^8.56.0",
|
||||||
|
"eslint-config-next": "^14.0.4",
|
||||||
|
"tailwindcss": "^3.4.0",
|
||||||
|
"postcss": "^8.4.32",
|
||||||
|
"autoprefixer": "^10.4.16"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--foreground-rgb: 0, 0, 0;
|
||||||
|
--background-rgb: 249, 250, 251;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: rgb(var(--foreground-rgb));
|
||||||
|
background: rgb(var(--background-rgb));
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.btn {
|
||||||
|
@apply px-4 py-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
@apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
@apply bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
@apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success {
|
||||||
|
@apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
@apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
@apply block text-sm font-medium text-gray-700 mb-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
@apply bg-white rounded-lg shadow-md p-6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
import type { Metadata } from 'next'
|
||||||
|
import { Toaster } from 'react-hot-toast'
|
||||||
|
import './globals.css'
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'Mobile Upgrade Admin',
|
||||||
|
description: 'Mobile App Version Management Admin Panel',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<body>
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
<nav className="bg-white shadow-sm border-b">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="flex justify-between h-16">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<h1 className="text-xl font-semibold text-gray-900">
|
||||||
|
Mobile Upgrade Admin
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<Toaster position="top-right" />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,176 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEffect, useState, useCallback } from 'react'
|
||||||
|
import { useVersions, useVersionActions } from '@/application'
|
||||||
|
import { Platform } from '@/domain'
|
||||||
|
import { VersionCard } from '@/presentation/components/version-card'
|
||||||
|
import { UploadModal } from '@/presentation/components/upload-modal'
|
||||||
|
import { EditModal } from '@/presentation/components/edit-modal'
|
||||||
|
import toast from 'react-hot-toast'
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
const { versions, isLoading, error, refetch, setFilter } = useVersions()
|
||||||
|
const { deleteVersion, toggleVersion } = useVersionActions()
|
||||||
|
|
||||||
|
const [platformFilter, setPlatformFilter] = useState<Platform | 'all'>('all')
|
||||||
|
const [showUploadModal, setShowUploadModal] = useState(false)
|
||||||
|
const [editingVersionId, setEditingVersionId] = useState<string | null>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFilter({ platform: platformFilter === 'all' ? undefined : platformFilter })
|
||||||
|
}, [platformFilter, setFilter])
|
||||||
|
|
||||||
|
const handleRefresh = useCallback(() => {
|
||||||
|
refetch()
|
||||||
|
}, [refetch])
|
||||||
|
|
||||||
|
const handleDelete = async (id: string) => {
|
||||||
|
if (!confirm('确定要删除这个版本吗？此操作不可恢复。')) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await deleteVersion(id)
|
||||||
|
toast.success('版本已删除')
|
||||||
|
} catch (err) {
|
||||||
|
toast.error('删除失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToggle = async (id: string, isEnabled: boolean) => {
|
||||||
|
try {
|
||||||
|
await toggleVersion(id, isEnabled)
|
||||||
|
toast.success(isEnabled ? '版本已启用' : '版本已禁用')
|
||||||
|
} catch (err) {
|
||||||
|
toast.error('操作失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleUploadSuccess = () => {
|
||||||
|
setShowUploadModal(false)
|
||||||
|
refetch()
|
||||||
|
toast.success('版本上传成功')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEditSuccess = () => {
|
||||||
|
setEditingVersionId(null)
|
||||||
|
refetch()
|
||||||
|
toast.success('版本更新成功')
|
||||||
|
}
|
||||||
|
|
||||||
|
const filteredVersions = versions
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900">版本管理</h2>
|
||||||
|
<p className="text-gray-600 mt-1">管理移动应用的版本更新</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowUploadModal(true)}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
上传新版本
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="card">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<label className="label">平台筛选：</label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setPlatformFilter('all')}
|
||||||
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||||
|
platformFilter === 'all'
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
全部
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setPlatformFilter('android')}
|
||||||
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||||
|
platformFilter === 'android'
|
||||||
|
? 'bg-green-600 text-white'
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Android
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setPlatformFilter('ios')}
|
||||||
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||||
|
platformFilter === 'ios'
|
||||||
|
? 'bg-gray-800 text-white'
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
iOS
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error State */}
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
|
||||||
|
加载失败：{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Loading State */}
|
||||||
|
{isLoading && (
|
||||||
|
<div className="flex justify-center py-12">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Version List */}
|
||||||
|
{!isLoading && !error && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{filteredVersions.length === 0 ? (
|
||||||
|
<div className="card text-center py-12">
|
||||||
|
<p className="text-gray-500">暂无版本数据</p>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowUploadModal(true)}
|
||||||
|
className="btn btn-primary mt-4"
|
||||||
|
>
|
||||||
|
上传第一个版本
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
filteredVersions.map((version) => (
|
||||||
|
<VersionCard
|
||||||
|
key={version.id}
|
||||||
|
version={version}
|
||||||
|
onEdit={() => setEditingVersionId(version.id)}
|
||||||
|
onDelete={() => handleDelete(version.id)}
|
||||||
|
onToggle={(enabled) => handleToggle(version.id, enabled)}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Upload Modal */}
|
||||||
|
{showUploadModal && (
|
||||||
|
<UploadModal
|
||||||
|
onClose={() => setShowUploadModal(false)}
|
||||||
|
onSuccess={handleUploadSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Edit Modal */}
|
||||||
|
{editingVersionId && (
|
||||||
|
<EditModal
|
||||||
|
versionId={editingVersionId}
|
||||||
|
onClose={() => setEditingVersionId(null)}
|
||||||
|
onSuccess={handleEditSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
import { useEffect } from 'react'
|
||||||
|
import { useVersionStore } from '../stores/version-store'
|
||||||
|
|
||||||
|
export function useVersions() {
|
||||||
|
const {
|
||||||
|
versions,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
filter,
|
||||||
|
fetchVersions,
|
||||||
|
setFilter,
|
||||||
|
clearError,
|
||||||
|
} = useVersionStore()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchVersions()
|
||||||
|
}, [filter.platform, filter.includeDisabled])
|
||||||
|
|
||||||
|
return {
|
||||||
|
versions,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
filter,
|
||||||
|
refetch: fetchVersions,
|
||||||
|
setFilter,
|
||||||
|
clearError,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useVersion(id: string | null) {
|
||||||
|
const {
|
||||||
|
selectedVersion,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
fetchVersionById,
|
||||||
|
setSelectedVersion,
|
||||||
|
clearError,
|
||||||
|
} = useVersionStore()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (id) {
|
||||||
|
fetchVersionById(id)
|
||||||
|
} else {
|
||||||
|
setSelectedVersion(null)
|
||||||
|
}
|
||||||
|
}, [id])
|
||||||
|
|
||||||
|
return {
|
||||||
|
version: selectedVersion,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
refetch: () => id && fetchVersionById(id),
|
||||||
|
clearError,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useVersionActions() {
|
||||||
|
const {
|
||||||
|
fetchVersions,
|
||||||
|
setFilter,
|
||||||
|
createVersion,
|
||||||
|
updateVersion,
|
||||||
|
deleteVersion,
|
||||||
|
toggleVersion,
|
||||||
|
uploadVersion,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
clearError,
|
||||||
|
} = useVersionStore()
|
||||||
|
|
||||||
|
return {
|
||||||
|
loadVersions: fetchVersions,
|
||||||
|
setFilter,
|
||||||
|
createVersion,
|
||||||
|
updateVersion,
|
||||||
|
deleteVersion,
|
||||||
|
toggleVersion,
|
||||||
|
uploadVersion,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
clearError,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
export * from './stores/version-store'
|
||||||
|
export * from './hooks/use-versions'
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
import { create } from 'zustand'
|
||||||
|
import {
|
||||||
|
AppVersion,
|
||||||
|
CreateVersionInput,
|
||||||
|
UpdateVersionInput,
|
||||||
|
UploadVersionInput,
|
||||||
|
Platform,
|
||||||
|
} from '@/domain'
|
||||||
|
import { versionRepository } from '@/infrastructure'
|
||||||
|
|
||||||
|
interface VersionState {
|
||||||
|
versions: AppVersion[]
|
||||||
|
selectedVersion: AppVersion | null
|
||||||
|
isLoading: boolean
|
||||||
|
error: string | null
|
||||||
|
filter: {
|
||||||
|
platform?: Platform
|
||||||
|
includeDisabled: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
fetchVersions: () => Promise<void>
|
||||||
|
fetchVersionById: (id: string) => Promise<void>
|
||||||
|
createVersion: (input: CreateVersionInput) => Promise<AppVersion>
|
||||||
|
updateVersion: (id: string, input: UpdateVersionInput) => Promise<AppVersion>
|
||||||
|
deleteVersion: (id: string) => Promise<void>
|
||||||
|
toggleVersion: (id: string, isEnabled: boolean) => Promise<void>
|
||||||
|
uploadVersion: (input: UploadVersionInput) => Promise<AppVersion>
|
||||||
|
setFilter: (filter: Partial<VersionState['filter']>) => void
|
||||||
|
setSelectedVersion: (version: AppVersion | null) => void
|
||||||
|
clearError: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useVersionStore = create<VersionState>((set, get) => ({
|
||||||
|
versions: [],
|
||||||
|
selectedVersion: null,
|
||||||
|
isLoading: false,
|
||||||
|
error: null,
|
||||||
|
filter: {
|
||||||
|
platform: undefined,
|
||||||
|
includeDisabled: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchVersions: async () => {
|
||||||
|
set({ isLoading: true, error: null })
|
||||||
|
try {
|
||||||
|
const { filter } = get()
|
||||||
|
const versions = await versionRepository.list(filter)
|
||||||
|
set({ versions, isLoading: false })
|
||||||
|
} catch (err) {
|
||||||
|
set({
|
||||||
|
error: err instanceof Error ? err.message : 'Failed to fetch versions',
|
||||||
|
isLoading: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchVersionById: async (id: string) => {
|
||||||
|
set({ isLoading: true, error: null })
|
||||||
|
try {
|
||||||
|
const version = await versionRepository.getById(id)
|
||||||
|
set({ selectedVersion: version, isLoading: false })
|
||||||
|
} catch (err) {
|
||||||
|
set({
|
||||||
|
error: err instanceof Error ? err.message : 'Failed to fetch version',
|
||||||
|
isLoading: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
createVersion: async (input: CreateVersionInput) => {
|
||||||
|
set({ isLoading: true, error: null })
|
||||||
|
try {
|
||||||
|
const version = await versionRepository.create(input)
|
||||||
|
const { versions } = get()
|
||||||
|
set({ versions: [version, ...versions], isLoading: false })
|
||||||
|
return version
|
||||||
|
} catch (err) {
|
||||||
|
set({
|
||||||
|
error: err instanceof Error ? err.message : 'Failed to create version',
|
||||||
|
isLoading: false,
|
||||||
|
})
|
||||||
|
throw err
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
updateVersion: async (id: string, input: UpdateVersionInput) => {
|
||||||
|
set({ isLoading: true, error: null })
|
||||||
|
try {
|
||||||
|
const version = await versionRepository.update(id, input)
|
||||||
|
const { versions } = get()
|
||||||
|
set({
|
||||||
|
versions: versions.map((v) => (v.id === id ? version : v)),
|
||||||
|
selectedVersion: version,
|
||||||
|
isLoading: false,
|
||||||
|
})
|
||||||
|
return version
|
||||||
|
} catch (err) {
|
||||||
|
set({
|
||||||
|
error: err instanceof Error ? err.message : 'Failed to update version',
|
||||||
|
isLoading: false,
|
||||||
|
})
|
||||||
|
throw err
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteVersion: async (id: string) => {
|
||||||
|
set({ isLoading: true, error: null })
|
||||||
|
try {
|
||||||
|
await versionRepository.delete(id)
|
||||||
|
const { versions, selectedVersion } = get()
|
||||||
|
set({
|
||||||
|
versions: versions.filter((v) => v.id !== id),
|
||||||
|
selectedVersion: selectedVersion?.id === id ? null : selectedVersion,
|
||||||
|
isLoading: false,
|
||||||
|
})
|
||||||
|
} catch (err) {
|
||||||
|
set({
|
||||||
|
error: err instanceof Error ? err.message : 'Failed to delete version',
|
||||||
|
isLoading: false,
|
||||||
|
})
|
||||||
|
throw err
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleVersion: async (id: string, isEnabled: boolean) => {
|
||||||
|
set({ isLoading: true, error: null })
|
||||||
|
try {
|
||||||
|
await versionRepository.toggle(id, isEnabled)
|
||||||
|
const { versions } = get()
|
||||||
|
set({
|
||||||
|
versions: versions.map((v) =>
|
||||||
|
v.id === id ? { ...v, isEnabled } : v
|
||||||
|
),
|
||||||
|
isLoading: false,
|
||||||
|
})
|
||||||
|
} catch (err) {
|
||||||
|
set({
|
||||||
|
error: err instanceof Error ? err.message : 'Failed to toggle version',
|
||||||
|
isLoading: false,
|
||||||
|
})
|
||||||
|
throw err
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
uploadVersion: async (input: UploadVersionInput) => {
|
||||||
|
set({ isLoading: true, error: null })
|
||||||
|
try {
|
||||||
|
const version = await versionRepository.upload(input)
|
||||||
|
const { versions } = get()
|
||||||
|
set({ versions: [version, ...versions], isLoading: false })
|
||||||
|
return version
|
||||||
|
} catch (err) {
|
||||||
|
set({
|
||||||
|
error: err instanceof Error ? err.message : 'Failed to upload version',
|
||||||
|
isLoading: false,
|
||||||
|
})
|
||||||
|
throw err
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setFilter: (filter) => {
|
||||||
|
set((state) => ({
|
||||||
|
filter: { ...state.filter, ...filter },
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
|
||||||
|
setSelectedVersion: (version) => {
|
||||||
|
set({ selectedVersion: version })
|
||||||
|
},
|
||||||
|
|
||||||
|
clearError: () => {
|
||||||
|
set({ error: null })
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
export type Platform = 'android' | 'ios'
|
||||||
|
|
||||||
|
export interface AppVersion {
|
||||||
|
id: string
|
||||||
|
platform: Platform
|
||||||
|
versionCode: number
|
||||||
|
versionName: string
|
||||||
|
buildNumber: string
|
||||||
|
downloadUrl: string
|
||||||
|
fileSize: string
|
||||||
|
fileSha256: string
|
||||||
|
changelog: string
|
||||||
|
isForceUpdate: boolean
|
||||||
|
isEnabled: boolean
|
||||||
|
minOsVersion: string | null
|
||||||
|
releaseDate: string | null
|
||||||
|
createdAt: string
|
||||||
|
updatedAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateVersionInput {
|
||||||
|
platform: Platform
|
||||||
|
versionCode: number
|
||||||
|
versionName: string
|
||||||
|
buildNumber: string
|
||||||
|
downloadUrl: string
|
||||||
|
fileSize: string
|
||||||
|
fileSha256: string
|
||||||
|
changelog: string
|
||||||
|
isForceUpdate: boolean
|
||||||
|
minOsVersion?: string
|
||||||
|
releaseDate?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateVersionInput {
|
||||||
|
downloadUrl?: string
|
||||||
|
fileSize?: string
|
||||||
|
fileSha256?: string
|
||||||
|
changelog?: string
|
||||||
|
isForceUpdate?: boolean
|
||||||
|
isEnabled?: boolean
|
||||||
|
minOsVersion?: string | null
|
||||||
|
releaseDate?: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UploadVersionInput {
|
||||||
|
file: File
|
||||||
|
platform: Platform
|
||||||
|
versionName: string
|
||||||
|
buildNumber: string
|
||||||
|
changelog?: string
|
||||||
|
isForceUpdate?: boolean
|
||||||
|
minOsVersion?: string
|
||||||
|
releaseDate?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface VersionListFilter {
|
||||||
|
platform?: Platform
|
||||||
|
includeDisabled?: boolean
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
export * from './entities/version'
|
||||||
|
export * from './repositories/version-repository'
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import {
|
||||||
|
AppVersion,
|
||||||
|
CreateVersionInput,
|
||||||
|
UpdateVersionInput,
|
||||||
|
UploadVersionInput,
|
||||||
|
VersionListFilter,
|
||||||
|
} from '../entities/version'
|
||||||
|
|
||||||
|
export interface IVersionRepository {
|
||||||
|
list(filter?: VersionListFilter): Promise<AppVersion[]>
|
||||||
|
getById(id: string): Promise<AppVersion>
|
||||||
|
create(input: CreateVersionInput): Promise<AppVersion>
|
||||||
|
update(id: string, input: UpdateVersionInput): Promise<AppVersion>
|
||||||
|
delete(id: string): Promise<void>
|
||||||
|
toggle(id: string, isEnabled: boolean): Promise<void>
|
||||||
|
upload(input: UploadVersionInput): Promise<AppVersion>
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
import axios, { AxiosInstance, AxiosError } from 'axios'
|
||||||
|
|
||||||
|
export class ApiError extends Error {
|
||||||
|
constructor(
|
||||||
|
public statusCode: number,
|
||||||
|
message: string,
|
||||||
|
public data?: unknown
|
||||||
|
) {
|
||||||
|
super(message)
|
||||||
|
this.name = 'ApiError'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createApiClient(): AxiosInstance {
|
||||||
|
const client = axios.create({
|
||||||
|
baseURL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3010',
|
||||||
|
timeout: 30000,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
client.interceptors.response.use(
|
||||||
|
(response) => response,
|
||||||
|
(error: AxiosError) => {
|
||||||
|
if (error.response) {
|
||||||
|
const data = error.response.data as { message?: string }
|
||||||
|
throw new ApiError(
|
||||||
|
error.response.status,
|
||||||
|
data?.message || error.message,
|
||||||
|
data
|
||||||
|
)
|
||||||
|
}
|
||||||
|
throw new ApiError(0, error.message)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
return client
|
||||||
|
}
|
||||||
|
|
||||||
|
export const apiClient = createApiClient()
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
export * from './http/api-client'
|
||||||
|
export * from './repositories/version-repository-impl'
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
import { AxiosInstance } from 'axios'
|
||||||
|
import {
|
||||||
|
AppVersion,
|
||||||
|
CreateVersionInput,
|
||||||
|
UpdateVersionInput,
|
||||||
|
UploadVersionInput,
|
||||||
|
VersionListFilter,
|
||||||
|
IVersionRepository,
|
||||||
|
} from '@/domain'
|
||||||
|
import { apiClient } from '../http/api-client'
|
||||||
|
|
||||||
|
export class VersionRepositoryImpl implements IVersionRepository {
|
||||||
|
private client: AxiosInstance
|
||||||
|
|
||||||
|
constructor(client?: AxiosInstance) {
|
||||||
|
this.client = client || apiClient
|
||||||
|
}
|
||||||
|
|
||||||
|
async list(filter?: VersionListFilter): Promise<AppVersion[]> {
|
||||||
|
const params = new URLSearchParams()
|
||||||
|
if (filter?.platform) {
|
||||||
|
params.append('platform', filter.platform)
|
||||||
|
}
|
||||||
|
if (filter?.includeDisabled) {
|
||||||
|
params.append('includeDisabled', 'true')
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await this.client.get<AppVersion[]>(
|
||||||
|
`/api/v1/versions?${params.toString()}`
|
||||||
|
)
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
|
||||||
|
async getById(id: string): Promise<AppVersion> {
|
||||||
|
const response = await this.client.get<AppVersion>(`/api/v1/versions/${id}`)
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
|
||||||
|
async create(input: CreateVersionInput): Promise<AppVersion> {
|
||||||
|
const response = await this.client.post<AppVersion>('/api/v1/versions', input)
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
|
||||||
|
async update(id: string, input: UpdateVersionInput): Promise<AppVersion> {
|
||||||
|
const response = await this.client.put<AppVersion>(
|
||||||
|
`/api/v1/versions/${id}`,
|
||||||
|
input
|
||||||
|
)
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
|
||||||
|
async delete(id: string): Promise<void> {
|
||||||
|
await this.client.delete(`/api/v1/versions/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
async toggle(id: string, isEnabled: boolean): Promise<void> {
|
||||||
|
await this.client.patch(`/api/v1/versions/${id}/toggle`, { isEnabled })
|
||||||
|
}
|
||||||
|
|
||||||
|
async upload(input: UploadVersionInput): Promise<AppVersion> {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('file', input.file)
|
||||||
|
formData.append('platform', input.platform)
|
||||||
|
formData.append('versionName', input.versionName)
|
||||||
|
formData.append('buildNumber', input.buildNumber)
|
||||||
|
formData.append('isForceUpdate', String(input.isForceUpdate ?? false))
|
||||||
|
|
||||||
|
if (input.changelog) {
|
||||||
|
formData.append('changelog', input.changelog)
|
||||||
|
}
|
||||||
|
if (input.minOsVersion) {
|
||||||
|
formData.append('minOsVersion', input.minOsVersion)
|
||||||
|
}
|
||||||
|
if (input.releaseDate) {
|
||||||
|
formData.append('releaseDate', input.releaseDate)
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await this.client.post<AppVersion>(
|
||||||
|
'/api/v1/versions/upload',
|
||||||
|
formData,
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data',
|
||||||
|
},
|
||||||
|
timeout: 300000, // 5 minutes for large file uploads
|
||||||
|
}
|
||||||
|
)
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const versionRepository = new VersionRepositoryImpl()
|
||||||
|
|
@ -0,0 +1,187 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { useVersion, useVersionActions } from '@/application'
|
||||||
|
|
||||||
|
interface EditModalProps {
|
||||||
|
versionId: string
|
||||||
|
onClose: () => void
|
||||||
|
onSuccess: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function EditModal({ versionId, onClose, onSuccess }: EditModalProps) {
|
||||||
|
const { version, isLoading, error: loadError } = useVersion(versionId)
|
||||||
|
const { updateVersion } = useVersionActions()
|
||||||
|
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
changelog: '',
|
||||||
|
isForceUpdate: false,
|
||||||
|
isEnabled: true,
|
||||||
|
minOsVersion: '',
|
||||||
|
})
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (version) {
|
||||||
|
setFormData({
|
||||||
|
changelog: version.changelog || '',
|
||||||
|
isForceUpdate: version.isForceUpdate,
|
||||||
|
isEnabled: version.isEnabled,
|
||||||
|
minOsVersion: version.minOsVersion || '',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [version])
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setError(null)
|
||||||
|
setIsSubmitting(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
await updateVersion(versionId, {
|
||||||
|
changelog: formData.changelog || undefined,
|
||||||
|
isForceUpdate: formData.isForceUpdate,
|
||||||
|
isEnabled: formData.isEnabled,
|
||||||
|
minOsVersion: formData.minOsVersion || undefined,
|
||||||
|
})
|
||||||
|
onSuccess()
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : '更新失败')
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl p-8">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
|
||||||
|
<p className="text-gray-600 mt-4">加载中...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loadError || !version) {
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl p-8">
|
||||||
|
<p className="text-red-600">加载版本信息失败</p>
|
||||||
|
<button onClick={onClose} className="btn btn-primary mt-4">
|
||||||
|
关闭
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900">编辑版本</h3>
|
||||||
|
<p className="text-gray-500 text-sm mt-1">
|
||||||
|
{version.platform.toUpperCase()} v{version.versionName} (Build {version.buildNumber})
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-400 hover:text-gray-600"
|
||||||
|
>
|
||||||
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
{/* Min OS Version */}
|
||||||
|
<div>
|
||||||
|
<label className="label">最低系统版本</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.minOsVersion}
|
||||||
|
onChange={(e) => setFormData((prev) => ({ ...prev, minOsVersion: e.target.value }))}
|
||||||
|
placeholder={version.platform === 'android' ? '例如：8.0' : '例如：14.0'}
|
||||||
|
className="input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Changelog */}
|
||||||
|
<div>
|
||||||
|
<label className="label">更新日志</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.changelog}
|
||||||
|
onChange={(e) => setFormData((prev) => ({ ...prev, changelog: e.target.value }))}
|
||||||
|
placeholder="请输入本版本的更新内容..."
|
||||||
|
rows={4}
|
||||||
|
className="input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Force Update */}
|
||||||
|
<div>
|
||||||
|
<label className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.isForceUpdate}
|
||||||
|
onChange={(e) => setFormData((prev) => ({ ...prev, isForceUpdate: e.target.checked }))}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
<span className="text-gray-700">强制更新</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-gray-500 text-xs mt-1">
|
||||||
|
勾选后，用户必须更新到此版本才能继续使用应用
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Enabled */}
|
||||||
|
<div>
|
||||||
|
<label className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.isEnabled}
|
||||||
|
onChange={(e) => setFormData((prev) => ({ ...prev, isEnabled: e.target.checked }))}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
<span className="text-gray-700">启用此版本</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-gray-500 text-xs mt-1">
|
||||||
|
禁用后，此版本将不会推送给用户
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex justify-end gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="btn bg-gray-100 text-gray-700 hover:bg-gray-200"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn-primary"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
|
{isSubmitting ? '保存中...' : '保存'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,251 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useRef } from 'react'
|
||||||
|
import { Platform } from '@/domain'
|
||||||
|
import { useVersionActions } from '@/application'
|
||||||
|
|
||||||
|
interface UploadModalProps {
|
||||||
|
onClose: () => void
|
||||||
|
onSuccess: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UploadModal({ onClose, onSuccess }: UploadModalProps) {
|
||||||
|
const { uploadVersion } = useVersionActions()
|
||||||
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||||
|
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
platform: 'android' as Platform,
|
||||||
|
versionName: '',
|
||||||
|
buildNumber: '',
|
||||||
|
changelog: '',
|
||||||
|
isForceUpdate: false,
|
||||||
|
minOsVersion: '',
|
||||||
|
})
|
||||||
|
const [file, setFile] = useState<File | null>(null)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const selectedFile = e.target.files?.[0]
|
||||||
|
if (selectedFile) {
|
||||||
|
setFile(selectedFile)
|
||||||
|
// Auto-detect platform from file extension
|
||||||
|
if (selectedFile.name.endsWith('.apk')) {
|
||||||
|
setFormData((prev) => ({ ...prev, platform: 'android' }))
|
||||||
|
} else if (selectedFile.name.endsWith('.ipa')) {
|
||||||
|
setFormData((prev) => ({ ...prev, platform: 'ios' }))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
if (!file) {
|
||||||
|
setError('请选择安装包文件')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.versionName) {
|
||||||
|
setError('请输入版本号')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.buildNumber) {
|
||||||
|
setError('请输入构建号')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsSubmitting(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
await uploadVersion({
|
||||||
|
platform: formData.platform,
|
||||||
|
versionName: formData.versionName,
|
||||||
|
buildNumber: formData.buildNumber,
|
||||||
|
changelog: formData.changelog || undefined,
|
||||||
|
isForceUpdate: formData.isForceUpdate,
|
||||||
|
minOsVersion: formData.minOsVersion || undefined,
|
||||||
|
file,
|
||||||
|
})
|
||||||
|
onSuccess()
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : '上传失败')
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900">上传新版本</h3>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-400 hover:text-gray-600"
|
||||||
|
>
|
||||||
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
{/* File Upload */}
|
||||||
|
<div>
|
||||||
|
<label className="label">安装包文件 *</label>
|
||||||
|
<div
|
||||||
|
onClick={() => fileInputRef.current?.click()}
|
||||||
|
className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer hover:border-blue-400 transition-colors"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
ref={fileInputRef}
|
||||||
|
type="file"
|
||||||
|
accept=".apk,.ipa"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
className="hidden"
|
||||||
|
/>
|
||||||
|
{file ? (
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-900 font-medium">{file.name}</p>
|
||||||
|
<p className="text-gray-500 text-sm">
|
||||||
|
{(file.size / (1024 * 1024)).toFixed(2)} MB
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||||
|
</svg>
|
||||||
|
<p className="mt-2 text-gray-600">点击选择 APK 或 IPA 文件</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Platform */}
|
||||||
|
<div>
|
||||||
|
<label className="label">平台 *</label>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<label className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="platform"
|
||||||
|
value="android"
|
||||||
|
checked={formData.platform === 'android'}
|
||||||
|
onChange={(e) => setFormData((prev) => ({ ...prev, platform: e.target.value as Platform }))}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
Android
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="platform"
|
||||||
|
value="ios"
|
||||||
|
checked={formData.platform === 'ios'}
|
||||||
|
onChange={(e) => setFormData((prev) => ({ ...prev, platform: e.target.value as Platform }))}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
iOS
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Version Name */}
|
||||||
|
<div>
|
||||||
|
<label className="label">版本号 *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.versionName}
|
||||||
|
onChange={(e) => setFormData((prev) => ({ ...prev, versionName: e.target.value }))}
|
||||||
|
placeholder="例如：1.0.0"
|
||||||
|
className="input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Build Number */}
|
||||||
|
<div>
|
||||||
|
<label className="label">构建号 *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.buildNumber}
|
||||||
|
onChange={(e) => setFormData((prev) => ({ ...prev, buildNumber: e.target.value }))}
|
||||||
|
placeholder="例如：100"
|
||||||
|
className="input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Min OS Version */}
|
||||||
|
<div>
|
||||||
|
<label className="label">最低系统版本</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.minOsVersion}
|
||||||
|
onChange={(e) => setFormData((prev) => ({ ...prev, minOsVersion: e.target.value }))}
|
||||||
|
placeholder={formData.platform === 'android' ? '例如：8.0' : '例如：14.0'}
|
||||||
|
className="input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Changelog */}
|
||||||
|
<div>
|
||||||
|
<label className="label">更新日志</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.changelog}
|
||||||
|
onChange={(e) => setFormData((prev) => ({ ...prev, changelog: e.target.value }))}
|
||||||
|
placeholder="请输入本版本的更新内容..."
|
||||||
|
rows={4}
|
||||||
|
className="input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Force Update */}
|
||||||
|
<div>
|
||||||
|
<label className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.isForceUpdate}
|
||||||
|
onChange={(e) => setFormData((prev) => ({ ...prev, isForceUpdate: e.target.checked }))}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
<span className="text-gray-700">强制更新</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-gray-500 text-xs mt-1">
|
||||||
|
勾选后，用户必须更新到此版本才能继续使用应用
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex justify-end gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="btn bg-gray-100 text-gray-700 hover:bg-gray-200"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn-primary"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
|
{isSubmitting ? '上传中...' : '上传'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { AppVersion } from '@/domain'
|
||||||
|
|
||||||
|
interface VersionCardProps {
|
||||||
|
version: AppVersion
|
||||||
|
onEdit: () => void
|
||||||
|
onDelete: () => void
|
||||||
|
onToggle: (enabled: boolean) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function VersionCard({ version, onEdit, onDelete, onToggle }: VersionCardProps) {
|
||||||
|
const platformColors = {
|
||||||
|
android: 'bg-green-100 text-green-800',
|
||||||
|
ios: 'bg-gray-100 text-gray-800',
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatFileSize = (size: string) => {
|
||||||
|
const bytes = parseInt(size, 10)
|
||||||
|
if (isNaN(bytes)) return size
|
||||||
|
if (bytes < 1024) return `${bytes} B`
|
||||||
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
||||||
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatDate = (dateStr: string | null) => {
|
||||||
|
if (!dateStr) return '-'
|
||||||
|
return new Date(dateStr).toLocaleString('zh-CN')
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="card hover:shadow-md transition-shadow">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
{/* Left: Version Info */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<span className={`px-2 py-1 rounded text-xs font-medium uppercase ${platformColors[version.platform]}`}>
|
||||||
|
{version.platform}
|
||||||
|
</span>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">
|
||||||
|
v{version.versionName}
|
||||||
|
</h3>
|
||||||
|
<span className="text-sm text-gray-500">
|
||||||
|
(Build {version.buildNumber})
|
||||||
|
</span>
|
||||||
|
{version.isForceUpdate && (
|
||||||
|
<span className="px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">
|
||||||
|
强制更新
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className={`px-2 py-1 rounded text-xs font-medium ${
|
||||||
|
version.isEnabled
|
||||||
|
? 'bg-blue-100 text-blue-800'
|
||||||
|
: 'bg-gray-100 text-gray-500'
|
||||||
|
}`}>
|
||||||
|
{version.isEnabled ? '已启用' : '已禁用'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4 text-sm text-gray-600 mb-3">
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-400">版本号：</span>
|
||||||
|
{version.versionCode}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-400">文件大小：</span>
|
||||||
|
{formatFileSize(version.fileSize)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-400">最低系统版本：</span>
|
||||||
|
{version.minOsVersion || '-'}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-400">发布时间：</span>
|
||||||
|
{formatDate(version.releaseDate)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{version.changelog && (
|
||||||
|
<div className="text-sm">
|
||||||
|
<span className="text-gray-400">更新日志：</span>
|
||||||
|
<p className="text-gray-700 mt-1 whitespace-pre-line bg-gray-50 p-2 rounded">
|
||||||
|
{version.changelog}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mt-3 text-xs text-gray-400">
|
||||||
|
创建于 {formatDate(version.createdAt)}
|
||||||
|
{version.updatedAt !== version.createdAt && (
|
||||||
|
<> · 更新于 {formatDate(version.updatedAt)}</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right: Actions */}
|
||||||
|
<div className="flex flex-col gap-2 ml-4">
|
||||||
|
<button
|
||||||
|
onClick={() => onToggle(!version.isEnabled)}
|
||||||
|
className={`btn text-sm ${
|
||||||
|
version.isEnabled
|
||||||
|
? 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||||
|
: 'bg-blue-100 text-blue-700 hover:bg-blue-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{version.isEnabled ? '禁用' : '启用'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onEdit}
|
||||||
|
className="btn bg-yellow-100 text-yellow-700 hover:bg-yellow-200 text-sm"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onDelete}
|
||||||
|
className="btn bg-red-100 text-red-700 hover:bg-red-200 text-sm"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</button>
|
||||||
|
{version.downloadUrl && (
|
||||||
|
<a
|
||||||
|
href={version.downloadUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="btn bg-green-100 text-green-700 hover:bg-green-200 text-sm text-center"
|
||||||
|
>
|
||||||
|
下载
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export * from './components/version-card'
|
||||||
|
export * from './components/upload-modal'
|
||||||
|
export * from './components/edit-modal'
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [{ "name": "next" }],
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"],
|
||||||
|
"@/domain/*": ["src/domain/*"],
|
||||||
|
"@/application/*": ["src/application/*"],
|
||||||
|
"@/infrastructure/*": ["src/infrastructure/*"],
|
||||||
|
"@/presentation/*": ["src/presentation/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue