1650 lines
62 KiB
TypeScript
1650 lines
62 KiB
TypeScript
|
import React, { useState, useEffect } from 'react'
|
|||
|
|
import {
|
|||
|
|
Card,
|
|||
|
|
Button,
|
|||
|
|
Progress,
|
|||
|
|
Typography,
|
|||
|
|
Space,
|
|||
|
|
Alert,
|
|||
|
|
message,
|
|||
|
|
Row,
|
|||
|
|
Col,
|
|||
|
|
Badge,
|
|||
|
|
Spin,
|
|||
|
|
Switch,
|
|||
|
|
Input,
|
|||
|
|
Collapse,
|
|||
|
|
// Form, // 暂时未使用
|
|||
|
|
Tooltip,
|
|||
|
|
Upload,
|
|||
|
|
Image,
|
|||
|
|
Modal
|
|||
|
|
} from 'antd'
|
|||
|
|
import {
|
|||
|
|
DownloadOutlined,
|
|||
|
|
BuildOutlined,
|
|||
|
|
AndroidOutlined,
|
|||
|
|
InfoCircleOutlined,
|
|||
|
|
SyncOutlined,
|
|||
|
|
CloudDownloadOutlined,
|
|||
|
|
RocketOutlined,
|
|||
|
|
FileOutlined,
|
|||
|
|
ClockCircleOutlined,
|
|||
|
|
SettingOutlined,
|
|||
|
|
EyeInvisibleOutlined,
|
|||
|
|
CaretRightOutlined,
|
|||
|
|
UploadOutlined,
|
|||
|
|
PictureOutlined,
|
|||
|
|
DeleteOutlined
|
|||
|
|
} from '@ant-design/icons'
|
|||
|
|
import APKShareManager from './APKShareManager'
|
|||
|
|
import apiClient from '../services/apiClient'
|
|||
|
|
|
|||
|
|
const { Title, Text, Paragraph } = Typography
|
|||
|
|
|
|||
|
|
interface APKInfo {
|
|||
|
|
exists: boolean
|
|||
|
|
path?: string
|
|||
|
|
filename?: string
|
|||
|
|
size?: number
|
|||
|
|
buildTime?: Date
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface BuildStatus {
|
|||
|
|
isBuilding: boolean
|
|||
|
|
progress: number
|
|||
|
|
message: string
|
|||
|
|
success: boolean
|
|||
|
|
shareUrl?: string
|
|||
|
|
shareSessionId?: string
|
|||
|
|
shareExpiresAt?: string
|
|||
|
|
activeShares?: Array<{
|
|||
|
|
sessionId: string
|
|||
|
|
filename: string
|
|||
|
|
shareUrl: string
|
|||
|
|
createdAt: string
|
|||
|
|
expiresAt: string
|
|||
|
|
isExpired: boolean
|
|||
|
|
}>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface APKData {
|
|||
|
|
apkInfo: APKInfo
|
|||
|
|
buildStatus: BuildStatus
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface APKManagerProps {
|
|||
|
|
serverUrl: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const APKManager: React.FC<APKManagerProps> = ({ serverUrl }) => {
|
|||
|
|
const [loading, setLoading] = useState(false)
|
|||
|
|
const [data, setData] = useState<APKData | null>(null)
|
|||
|
|
const [building, setBuilding] = useState(false)
|
|||
|
|
const [buildProgress, setBuildProgress] = useState(0)
|
|||
|
|
const [buildMessage, setBuildMessage] = useState('')
|
|||
|
|
const [_shareUrl, setShareUrl] = useState('') // 下划线前缀表示有意未使用但setter需要保留
|
|||
|
|
const [_shareExpiresAt, setShareExpiresAt] = useState('') // 下划线前缀表示有意未使用但setter需要保留
|
|||
|
|
|
|||
|
|
const [enableConfigMask, setEnableConfigMask] = useState(true) // 默认开启
|
|||
|
|
const [enableProgressBar, setEnableProgressBar] = useState(true) // 默认开启进度条
|
|||
|
|
const [configMaskText, setConfigMaskText] = useState('软件升级中请稍后...')
|
|||
|
|
const [configMaskSubtitle, setConfigMaskSubtitle] = useState('软件正在升级中\n请勿操作设备')
|
|||
|
|
const [configMaskStatus, setConfigMaskStatus] = useState('升级完成后将自动返回应用')
|
|||
|
|
// const [showAdvancedOptions, setShowAdvancedOptions] = useState(false) // 暂时未使用
|
|||
|
|
|
|||
|
|
// ✅ 新增：服务器域名配置状态
|
|||
|
|
const [serverDomain, setServerDomain] = useState('') // 用户配置的服务器域名
|
|||
|
|
const [webUrl, setWebUrl] = useState('') // 用户配置的webUrl，Android应用打开的网址
|
|||
|
|
|
|||
|
|
// ✅ 新增：Android端页面样式配置状态
|
|||
|
|
const [pageStyleConfig, setPageStyleConfig] = useState({
|
|||
|
|
appName: 'Android Remote Control',
|
|||
|
|
appIcon: null as File | null,
|
|||
|
|
statusText: '软件需要开启AI智能操控权限\n请按照以下步骤进行\n1. 点击启用按钮\n2. 转到已下载的服务/应用\n3. 找到本应用并点击进入\n4. 开启辅助开关',
|
|||
|
|
enableButtonText: '启用',
|
|||
|
|
usageInstructions: '使用说明：\n1. 启用AI智能操控服务\n2. 确保设备连接到网络\n\n注意：请在安全的网络环境中使用',
|
|||
|
|
apkFileName: '' // APK文件名，空值表示使用默认名称
|
|||
|
|
})
|
|||
|
|
// const [showPageStyleConfig, setShowPageStyleConfig] = useState(false) // 暂时未使用
|
|||
|
|
const [iconPreviewUrl, setIconPreviewUrl] = useState<string | null>(null)
|
|||
|
|
|
|||
|
|
// ✅ 新增：构建日志相关状态
|
|||
|
|
interface LogEntry {
|
|||
|
|
timestamp?: number
|
|||
|
|
level?: string
|
|||
|
|
message: string
|
|||
|
|
timeString?: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const [logModalVisible, setLogModalVisible] = useState(false)
|
|||
|
|
const [buildLogs, setBuildLogs] = useState<LogEntry[]>([])
|
|||
|
|
const [logLoading, setLogLoading] = useState(false)
|
|||
|
|
const logContainerRef = React.useRef<HTMLDivElement>(null)
|
|||
|
|
|
|||
|
|
// 获取APK信息
|
|||
|
|
const fetchAPKInfo = async () => {
|
|||
|
|
setLoading(true)
|
|||
|
|
try {
|
|||
|
|
const result = await apiClient.get<any>('/api/apk/info')
|
|||
|
|
|
|||
|
|
if (result.success) {
|
|||
|
|
setData(result)
|
|||
|
|
} else {
|
|||
|
|
message.error('获取APK信息失败')
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取APK信息失败:', error)
|
|||
|
|
message.error('获取APK信息失败')
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 轮询构建状态
|
|||
|
|
const pollBuildStatus = async () => {
|
|||
|
|
try {
|
|||
|
|
const result = await apiClient.get<any>('/api/apk/build-status')
|
|||
|
|
|
|||
|
|
if (result.success) {
|
|||
|
|
setBuildMessage(result.message || '')
|
|||
|
|
setBuildProgress(result.progress || 0)
|
|||
|
|
|
|||
|
|
if (result.isBuilding) {
|
|||
|
|
// 构建中，更新进度
|
|||
|
|
} else {
|
|||
|
|
setBuilding(false)
|
|||
|
|
setBuildProgress(0)
|
|||
|
|
|
|||
|
|
if (result.success) {
|
|||
|
|
message.success('APK构建成功！')
|
|||
|
|
|
|||
|
|
// 如果有分享链接，显示通知
|
|||
|
|
if (result.shareUrl) {
|
|||
|
|
setShareUrl(result.shareUrl)
|
|||
|
|
setShareExpiresAt(result.shareExpiresAt || '')
|
|||
|
|
message.info('Cloudflare分享链接已生成，有效期10分钟')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fetchAPKInfo()
|
|||
|
|
} else if (result.message && result.message.includes('构建失败')) {
|
|||
|
|
message.error(`构建失败: ${result.message}`)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取构建状态失败:', error)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取构建日志
|
|||
|
|
const fetchBuildLogs = React.useCallback(async (limit?: number) => {
|
|||
|
|
try {
|
|||
|
|
setLogLoading(true)
|
|||
|
|
const endpoint = limit ? `/api/apk/build-logs?limit=${limit}` : '/api/apk/build-logs'
|
|||
|
|
const result = await apiClient.get<any>(endpoint)
|
|||
|
|
|
|||
|
|
// 处理日志数据，支持多种格式
|
|||
|
|
let newLogs: LogEntry[] = []
|
|||
|
|
|
|||
|
|
if (result.success !== false) {
|
|||
|
|
// 如果返回的是对象，包含logs字段（对象数组）
|
|||
|
|
if (Array.isArray(result.logs)) {
|
|||
|
|
newLogs = result.logs.map((item: any) => {
|
|||
|
|
// 如果已经是对象格式（包含level, message等）
|
|||
|
|
if (item && typeof item === 'object' && item.message) {
|
|||
|
|
return {
|
|||
|
|
timestamp: item.timestamp,
|
|||
|
|
level: item.level || 'info',
|
|||
|
|
message: item.message || String(item),
|
|||
|
|
timeString: item.timeString
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 如果是字符串，转换为对象
|
|||
|
|
return {
|
|||
|
|
level: 'info',
|
|||
|
|
message: typeof item === 'string' ? item : String(item || ''),
|
|||
|
|
timeString: undefined
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 如果返回的是数组
|
|||
|
|
else if (Array.isArray(result)) {
|
|||
|
|
newLogs = result.map((item: any) => {
|
|||
|
|
if (item && typeof item === 'object' && item.message) {
|
|||
|
|
return {
|
|||
|
|
timestamp: item.timestamp,
|
|||
|
|
level: item.level || 'info',
|
|||
|
|
message: item.message || String(item),
|
|||
|
|
timeString: item.timeString
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
level: 'info',
|
|||
|
|
message: typeof item === 'string' ? item : String(item || ''),
|
|||
|
|
timeString: undefined
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 如果返回的是对象，包含log字段（字符串）
|
|||
|
|
else if (typeof result.log === 'string') {
|
|||
|
|
newLogs = result.log.split('\n')
|
|||
|
|
.filter((line: string) => line.trim())
|
|||
|
|
.map((line: string) => ({
|
|||
|
|
level: 'info',
|
|||
|
|
message: line.trim(),
|
|||
|
|
timeString: undefined
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
// 如果直接返回字符串
|
|||
|
|
else if (typeof result === 'string') {
|
|||
|
|
newLogs = result.split('\n')
|
|||
|
|
.filter((line: string) => line.trim())
|
|||
|
|
.map((line: string) => ({
|
|||
|
|
level: 'info',
|
|||
|
|
message: line.trim(),
|
|||
|
|
timeString: undefined
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
// 如果返回的是对象，包含data字段
|
|||
|
|
else if (result.data) {
|
|||
|
|
if (Array.isArray(result.data)) {
|
|||
|
|
newLogs = result.data.map((item: any) => {
|
|||
|
|
if (item && typeof item === 'object' && item.message) {
|
|||
|
|
return {
|
|||
|
|
timestamp: item.timestamp,
|
|||
|
|
level: item.level || 'info',
|
|||
|
|
message: item.message || String(item),
|
|||
|
|
timeString: item.timeString
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
level: 'info',
|
|||
|
|
message: typeof item === 'string' ? item : String(item || ''),
|
|||
|
|
timeString: undefined
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else if (typeof result.data === 'string') {
|
|||
|
|
newLogs = result.data.split('\n')
|
|||
|
|
.filter((line: string) => line.trim())
|
|||
|
|
.map((line: string) => ({
|
|||
|
|
level: 'info',
|
|||
|
|
message: line.trim(),
|
|||
|
|
timeString: undefined
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 过滤空消息
|
|||
|
|
newLogs = newLogs.filter(item => item.message && item.message.trim().length > 0)
|
|||
|
|
|
|||
|
|
setBuildLogs(newLogs)
|
|||
|
|
|
|||
|
|
// 自动滚动到底部
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (logContainerRef.current) {
|
|||
|
|
logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight
|
|||
|
|
}
|
|||
|
|
}, 100)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取构建日志失败:', error)
|
|||
|
|
} finally {
|
|||
|
|
setLogLoading(false)
|
|||
|
|
}
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
// 清空构建日志
|
|||
|
|
const clearBuildLogs = async () => {
|
|||
|
|
try {
|
|||
|
|
await apiClient.delete<{ success: boolean }>('/api/apk/build-logs')
|
|||
|
|
setBuildLogs([])
|
|||
|
|
message.success('日志已清空')
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('清空日志失败:', error)
|
|||
|
|
message.error('清空日志失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 构建APK
|
|||
|
|
const buildAPK = async () => {
|
|||
|
|
setBuilding(true)
|
|||
|
|
setBuildProgress(0)
|
|||
|
|
setBuildMessage('开始构建...')
|
|||
|
|
|
|||
|
|
// 打开日志窗口并清空之前的日志
|
|||
|
|
setBuildLogs([])
|
|||
|
|
setLogModalVisible(true)
|
|||
|
|
fetchBuildLogs(100) // 先获取最近100条日志
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 使用配置的域名或默认值
|
|||
|
|
let buildServerUrl: string
|
|||
|
|
if (serverDomain.trim()) {
|
|||
|
|
// 使用用户配置的域名
|
|||
|
|
const protocol = serverDomain.startsWith('https://') ? 'wss:' :
|
|||
|
|
serverDomain.startsWith('http://') ? 'ws:' :
|
|||
|
|
window.location.protocol === 'https:' ? 'wss:' : 'ws:'
|
|||
|
|
const domain = serverDomain.replace(/^https?:\/\//, '')
|
|||
|
|
buildServerUrl = `${protocol}//${domain}`
|
|||
|
|
} else {
|
|||
|
|
// 使用默认的当前服务器地址
|
|||
|
|
const currentHost = window.location.hostname
|
|||
|
|
const currentProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
|
|||
|
|
buildServerUrl = `${currentProtocol}//${currentHost}:3001`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('构建APK，配置服务器地址:', buildServerUrl)
|
|||
|
|
|
|||
|
|
// 使用FormData来支持文件上传
|
|||
|
|
const formData = new FormData()
|
|||
|
|
formData.append('serverUrl', buildServerUrl)
|
|||
|
|
formData.append('webUrl', webUrl.trim() || window.location.origin) // 使用配置的webUrl或默认值
|
|||
|
|
formData.append('enableConfigMask', enableConfigMask.toString())
|
|||
|
|
formData.append('enableProgressBar', enableProgressBar.toString())
|
|||
|
|
formData.append('configMaskText', configMaskText)
|
|||
|
|
formData.append('configMaskSubtitle', configMaskSubtitle)
|
|||
|
|
formData.append('configMaskStatus', configMaskStatus)
|
|||
|
|
|
|||
|
|
// 添加页面样式配置
|
|||
|
|
const pageStyleConfigData = {
|
|||
|
|
appName: pageStyleConfig.appName,
|
|||
|
|
statusText: pageStyleConfig.statusText,
|
|||
|
|
enableButtonText: pageStyleConfig.enableButtonText,
|
|||
|
|
usageInstructions: pageStyleConfig.usageInstructions,
|
|||
|
|
apkFileName: pageStyleConfig.apkFileName.trim() // 添加APK文件名
|
|||
|
|
}
|
|||
|
|
formData.append('pageStyleConfig', JSON.stringify(pageStyleConfigData))
|
|||
|
|
|
|||
|
|
// 如果有上传的图标文件，添加到FormData中
|
|||
|
|
if (pageStyleConfig.appIcon) {
|
|||
|
|
formData.append('appIcon', pageStyleConfig.appIcon)
|
|||
|
|
console.log('上传自定义图标:', pageStyleConfig.appIcon.name)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const result = await apiClient.postFormData<any>('/api/apk/build', formData)
|
|||
|
|
|
|||
|
|
if (result.success) {
|
|||
|
|
message.success(`构建开始，服务器地址已自动配置为: ${result.serverUrl}`)
|
|||
|
|
|
|||
|
|
// 如果立即返回了分享链接（构建完成）
|
|||
|
|
if (result.shareUrl) {
|
|||
|
|
setShareUrl(result.shareUrl)
|
|||
|
|
setShareExpiresAt(result.shareExpiresAt || '')
|
|||
|
|
message.success('APK构建完成！Cloudflare分享链接已生成')
|
|||
|
|
setBuilding(false)
|
|||
|
|
setBuildProgress(100)
|
|||
|
|
setBuildMessage('构建完成')
|
|||
|
|
fetchAPKInfo()
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
message.error(`构建失败: ${result.error || '未知错误'}`)
|
|||
|
|
setBuilding(false)
|
|||
|
|
setBuildProgress(0)
|
|||
|
|
setBuildMessage('')
|
|||
|
|
}
|
|||
|
|
} catch (error: any) {
|
|||
|
|
console.error('构建APK失败:', error)
|
|||
|
|
|
|||
|
|
// 根据错误类型提供更友好的提示
|
|||
|
|
let errorMessage = '构建APK失败'
|
|||
|
|
const errorStr = String(error || '')
|
|||
|
|
const errorMsg = error?.message || errorStr
|
|||
|
|
|
|||
|
|
// 检查各种网络错误情况
|
|||
|
|
if (
|
|||
|
|
errorMsg.includes('Failed to fetch') ||
|
|||
|
|
errorMsg.includes('NetworkError') ||
|
|||
|
|
errorMsg.includes('Network request failed') ||
|
|||
|
|
errorMsg.includes('fetch failed') ||
|
|||
|
|
error?.name === 'TypeError' && errorMsg.includes('fetch')
|
|||
|
|
) {
|
|||
|
|
errorMessage = '网络连接失败，请检查：\n1. 服务器是否正常运行\n2. 网络连接是否正常\n3. 服务器地址是否正确'
|
|||
|
|
} else if (errorMsg.includes('timeout') || errorMsg.includes('Timeout')) {
|
|||
|
|
errorMessage = '请求超时，请稍后重试'
|
|||
|
|
} else if (errorMsg.includes('CORS') || errorMsg.includes('cors')) {
|
|||
|
|
errorMessage = '跨域请求失败，请检查服务器CORS配置'
|
|||
|
|
} else if (errorMsg) {
|
|||
|
|
errorMessage = `构建失败: ${errorMsg}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
message.error({
|
|||
|
|
content: errorMessage,
|
|||
|
|
duration: 5,
|
|||
|
|
style: { whiteSpace: 'pre-line' }
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
setBuilding(false)
|
|||
|
|
setBuildProgress(0)
|
|||
|
|
setBuildMessage('')
|
|||
|
|
|
|||
|
|
// 在日志窗口中显示错误信息
|
|||
|
|
const errorDetails: LogEntry[] = [
|
|||
|
|
{
|
|||
|
|
level: 'error',
|
|||
|
|
message: errorMessage,
|
|||
|
|
timeString: new Date().toLocaleString('zh-CN', {
|
|||
|
|
year: 'numeric',
|
|||
|
|
month: '2-digit',
|
|||
|
|
day: '2-digit',
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit',
|
|||
|
|
second: '2-digit'
|
|||
|
|
}).replace(/\//g, '/')
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
level: 'error',
|
|||
|
|
message: `错误类型: ${error?.name || 'Unknown'}`,
|
|||
|
|
timeString: undefined
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
level: 'error',
|
|||
|
|
message: `错误详情: ${errorMsg}`,
|
|||
|
|
timeString: undefined
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
setBuildLogs(prev => [...prev, ...errorDetails])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理图标上传
|
|||
|
|
const handleIconUpload = (file: File) => {
|
|||
|
|
// 验证文件类型
|
|||
|
|
const isImage = file.type.startsWith('image/')
|
|||
|
|
if (!isImage) {
|
|||
|
|
message.error('请上传图片文件（PNG、JPG、JPEG等）')
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证文件大小（限制为2MB）
|
|||
|
|
const isLt2M = file.size / 1024 / 1024 < 2
|
|||
|
|
if (!isLt2M) {
|
|||
|
|
message.error('图标文件大小不能超过2MB')
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新状态
|
|||
|
|
setPageStyleConfig(prev => ({ ...prev, appIcon: file }))
|
|||
|
|
|
|||
|
|
// 生成预览URL
|
|||
|
|
const reader = new FileReader()
|
|||
|
|
reader.onload = (e) => {
|
|||
|
|
setIconPreviewUrl(e.target?.result as string)
|
|||
|
|
}
|
|||
|
|
reader.readAsDataURL(file)
|
|||
|
|
|
|||
|
|
message.success('图标上传成功')
|
|||
|
|
return false // 阻止自动上传
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 移除图标
|
|||
|
|
const removeIcon = () => {
|
|||
|
|
setPageStyleConfig(prev => ({ ...prev, appIcon: null }))
|
|||
|
|
setIconPreviewUrl(null)
|
|||
|
|
message.success('已移除自定义图标')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下载APK
|
|||
|
|
const downloadAPK = async () => {
|
|||
|
|
try {
|
|||
|
|
const filename = data?.apkInfo.filename || 'RemoteControl.apk'
|
|||
|
|
await apiClient.downloadFile('/api/apk/download', filename)
|
|||
|
|
message.success('开始下载APK文件')
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('下载APK失败:', error)
|
|||
|
|
message.error('下载APK失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 获取默认APK文件名
|
|||
|
|
const getDefaultAPKFileName = () => {
|
|||
|
|
return 'app'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化文件大小
|
|||
|
|
const formatSize = (bytes: number) => {
|
|||
|
|
const units = ['B', 'KB', 'MB', 'GB']
|
|||
|
|
let size = bytes
|
|||
|
|
let unitIndex = 0
|
|||
|
|
|
|||
|
|
while (size >= 1024 && unitIndex < units.length - 1) {
|
|||
|
|
size /= 1024
|
|||
|
|
unitIndex++
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return `${size.toFixed(1)} ${units[unitIndex]}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 组件挂载时获取信息
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchAPKInfo()
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
// 构建过程中轮询状态和日志
|
|||
|
|
useEffect(() => {
|
|||
|
|
let statusInterval: ReturnType<typeof setInterval> | null = null
|
|||
|
|
let logInterval: ReturnType<typeof setInterval> | null = null
|
|||
|
|
|
|||
|
|
if (building && logModalVisible) {
|
|||
|
|
statusInterval = setInterval(pollBuildStatus, 2000)
|
|||
|
|
// 每1秒轮询一次日志
|
|||
|
|
logInterval = setInterval(() => {
|
|||
|
|
fetchBuildLogs(100)
|
|||
|
|
}, 1000)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return () => {
|
|||
|
|
if (statusInterval) {
|
|||
|
|
clearInterval(statusInterval)
|
|||
|
|
}
|
|||
|
|
if (logInterval) {
|
|||
|
|
clearInterval(logInterval)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, [building, logModalVisible, fetchBuildLogs])
|
|||
|
|
|
|||
|
|
// 当构建完成时，停止日志轮询但保持窗口打开
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!building && logModalVisible) {
|
|||
|
|
// 构建完成，最后获取一次完整日志
|
|||
|
|
fetchBuildLogs()
|
|||
|
|
}
|
|||
|
|
}, [building, logModalVisible, fetchBuildLogs])
|
|||
|
|
|
|||
|
|
// 当日志更新时，自动滚动到底部
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (logModalVisible && buildLogs.length > 0) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (logContainerRef.current) {
|
|||
|
|
logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight
|
|||
|
|
}
|
|||
|
|
}, 50)
|
|||
|
|
}
|
|||
|
|
}, [buildLogs, logModalVisible])
|
|||
|
|
|
|||
|
|
if (loading && !data) {
|
|||
|
|
return (
|
|||
|
|
<div style={{
|
|||
|
|
padding: '80px 20px',
|
|||
|
|
textAlign: 'center',
|
|||
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|||
|
|
minHeight: '60vh',
|
|||
|
|
borderRadius: '16px',
|
|||
|
|
color: 'white'
|
|||
|
|
}}>
|
|||
|
|
<Spin size="large" style={{ color: 'white' }} />
|
|||
|
|
<Title level={3} style={{ marginTop: 24, color: 'white' }}>
|
|||
|
|
🔄 加载 APK 信息中...
|
|||
|
|
</Title>
|
|||
|
|
<Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '16px' }}>
|
|||
|
|
正在加载APK状态
|
|||
|
|
</Text>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{
|
|||
|
|
padding: '24px',
|
|||
|
|
width: '100%',
|
|||
|
|
flex: 1,
|
|||
|
|
background: 'linear-gradient(135deg, #f0f2f5 0%, #e8f2ff 100%)',
|
|||
|
|
minHeight: '100vh',
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column'
|
|||
|
|
}}>
|
|||
|
|
{/* 现代化页面头部 */}
|
|||
|
|
<div style={{
|
|||
|
|
marginBottom: 32,
|
|||
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|||
|
|
padding: '32px',
|
|||
|
|
borderRadius: '16px',
|
|||
|
|
color: 'white'
|
|||
|
|
}}>
|
|||
|
|
<Row justify="space-between" align="middle">
|
|||
|
|
<Col span={16}>
|
|||
|
|
<Space size="large" align="center">
|
|||
|
|
<div style={{
|
|||
|
|
background: 'rgba(255,255,255,0.2)',
|
|||
|
|
padding: '16px',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
backdropFilter: 'blur(10px)'
|
|||
|
|
}}>
|
|||
|
|
<AndroidOutlined style={{ fontSize: '48px', color: 'white' }} />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<Title level={2} style={{ color: 'white', margin: 0 }}>
|
|||
|
|
APK 构建中心
|
|||
|
|
</Title>
|
|||
|
|
<Paragraph style={{ color: 'rgba(255,255,255,0.8)', margin: 0, fontSize: '16px' }}>
|
|||
|
|
一键构建和部署 Android 远程控制客户端
|
|||
|
|
</Paragraph>
|
|||
|
|
</div>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8} style={{ textAlign: 'right' }}>
|
|||
|
|
<Space>
|
|||
|
|
<Button
|
|||
|
|
size="large"
|
|||
|
|
icon={<SyncOutlined />}
|
|||
|
|
onClick={fetchAPKInfo}
|
|||
|
|
loading={loading}
|
|||
|
|
style={{
|
|||
|
|
background: 'rgba(255,255,255,0.2)',
|
|||
|
|
borderColor: 'rgba(255,255,255,0.3)',
|
|||
|
|
color: 'white'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
刷新状态
|
|||
|
|
</Button>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* APK 状态主卡片 */}
|
|||
|
|
{data?.apkInfo?.exists ? (
|
|||
|
|
<Card
|
|||
|
|
style={{
|
|||
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|||
|
|
color: 'white',
|
|||
|
|
border: 'none',
|
|||
|
|
borderRadius: '20px',
|
|||
|
|
marginBottom: 24,
|
|||
|
|
boxShadow: '0 20px 40px rgba(102, 126, 234, 0.3)'
|
|||
|
|
}}
|
|||
|
|
styles={{ body: { padding: '40px' } }}
|
|||
|
|
>
|
|||
|
|
<Row align="middle" gutter={32} style={{ width: '100%' }}>
|
|||
|
|
<Col xs={24} sm={24} md={6} lg={6} xl={6}>
|
|||
|
|
<div style={{ textAlign: 'center', marginBottom: window.innerWidth < 768 ? '20px' : '0' }}>
|
|||
|
|
<div style={{
|
|||
|
|
background: 'linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%)',
|
|||
|
|
borderRadius: '50%',
|
|||
|
|
width: '100px',
|
|||
|
|
height: '100px',
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
margin: '0 auto',
|
|||
|
|
boxShadow: '0 8px 32px rgba(0,0,0,0.1)',
|
|||
|
|
backdropFilter: 'blur(10px)',
|
|||
|
|
border: '1px solid rgba(255,255,255,0.2)'
|
|||
|
|
}}>
|
|||
|
|
<AndroidOutlined style={{ fontSize: '48px', color: 'white' }} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
|
|||
|
|
<Title level={2} style={{ color: 'white', margin: 0, marginBottom: 20 }}>
|
|||
|
|
🎉 APK 构建成功！
|
|||
|
|
</Title>
|
|||
|
|
<Space direction="vertical" size={12}>
|
|||
|
|
<div style={{
|
|||
|
|
background: 'rgba(255,255,255,0.1)',
|
|||
|
|
padding: '8px 16px',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
backdropFilter: 'blur(10px)'
|
|||
|
|
}}>
|
|||
|
|
<Text style={{ color: 'white', fontSize: '16px', fontWeight: 500 }}>
|
|||
|
|
<FileOutlined style={{ marginRight: 8 }} />
|
|||
|
|
{data.apkInfo.filename}
|
|||
|
|
</Text>
|
|||
|
|
</div>
|
|||
|
|
<div style={{
|
|||
|
|
background: 'rgba(255,255,255,0.1)',
|
|||
|
|
padding: '8px 16px',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
backdropFilter: 'blur(10px)'
|
|||
|
|
}}>
|
|||
|
|
<Text style={{ color: 'white', fontSize: '16px', fontWeight: 500 }}>
|
|||
|
|
📦 {data.apkInfo.size ? formatSize(data.apkInfo.size) : '未知大小'}
|
|||
|
|
</Text>
|
|||
|
|
</div>
|
|||
|
|
<div style={{
|
|||
|
|
background: 'rgba(255,255,255,0.1)',
|
|||
|
|
padding: '8px 16px',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
backdropFilter: 'blur(10px)'
|
|||
|
|
}}>
|
|||
|
|
<Text style={{ color: 'white', fontSize: '16px', fontWeight: 500 }}>
|
|||
|
|
<ClockCircleOutlined style={{ marginRight: 8 }} />
|
|||
|
|
{data.apkInfo.buildTime
|
|||
|
|
? new Date(data.apkInfo.buildTime).toLocaleString()
|
|||
|
|
: '未知时间'
|
|||
|
|
}
|
|||
|
|
</Text>
|
|||
|
|
</div>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={24} md={6} lg={6} xl={6} style={{ textAlign: 'center' }}>
|
|||
|
|
<Space direction="vertical" size={12} style={{ width: '100%' }}>
|
|||
|
|
<Button
|
|||
|
|
type="primary"
|
|||
|
|
size="large"
|
|||
|
|
icon={<CloudDownloadOutlined />}
|
|||
|
|
onClick={downloadAPK}
|
|||
|
|
style={{
|
|||
|
|
background: 'linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%)',
|
|||
|
|
borderColor: 'rgba(255,255,255,0.3)',
|
|||
|
|
height: '60px',
|
|||
|
|
fontSize: '18px',
|
|||
|
|
fontWeight: 600,
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
backdropFilter: 'blur(10px)',
|
|||
|
|
boxShadow: '0 8px 32px rgba(0,0,0,0.1)',
|
|||
|
|
border: '1px solid rgba(255,255,255,0.2)',
|
|||
|
|
color: 'white',
|
|||
|
|
width: '100%'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
立即下载
|
|||
|
|
</Button>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</Card>
|
|||
|
|
) : (
|
|||
|
|
<Card
|
|||
|
|
style={{
|
|||
|
|
marginBottom: 24,
|
|||
|
|
textAlign: 'center',
|
|||
|
|
padding: '60px 40px',
|
|||
|
|
background: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%)',
|
|||
|
|
color: 'white',
|
|||
|
|
border: 'none',
|
|||
|
|
borderRadius: '20px',
|
|||
|
|
boxShadow: '0 20px 40px rgba(255, 107, 107, 0.3)'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div style={{
|
|||
|
|
background: 'rgba(255,255,255,0.1)',
|
|||
|
|
borderRadius: '50%',
|
|||
|
|
width: '120px',
|
|||
|
|
height: '120px',
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
margin: '0 auto 24px auto',
|
|||
|
|
backdropFilter: 'blur(10px)',
|
|||
|
|
border: '1px solid rgba(255,255,255,0.2)'
|
|||
|
|
}}>
|
|||
|
|
<AndroidOutlined style={{ fontSize: '64px', color: 'white' }} />
|
|||
|
|
</div>
|
|||
|
|
<Title level={2} style={{ color: 'white', margin: 0, marginBottom: 16 }}>
|
|||
|
|
📱 暂无可用的 APK 文件
|
|||
|
|
</Title>
|
|||
|
|
<Text style={{ color: 'rgba(255,255,255,0.9)', fontSize: '18px', lineHeight: 1.6 }}>
|
|||
|
|
您的 Android 远程控制应用还未构建<br />
|
|||
|
|
点击下方按钮开始一键构建并部署
|
|||
|
|
</Text>
|
|||
|
|
</Card>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 构建进度 */}
|
|||
|
|
{building && (
|
|||
|
|
<Card style={{
|
|||
|
|
marginBottom: 24,
|
|||
|
|
borderRadius: '20px',
|
|||
|
|
background: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%)',
|
|||
|
|
color: 'white',
|
|||
|
|
border: 'none',
|
|||
|
|
boxShadow: '0 20px 40px rgba(255, 154, 158, 0.3)'
|
|||
|
|
}}>
|
|||
|
|
<Row align="middle" gutter={32} style={{ padding: '20px', width: '100%' }}>
|
|||
|
|
<Col span={4} style={{ textAlign: 'center' }}>
|
|||
|
|
<div style={{
|
|||
|
|
background: 'rgba(255,255,255,0.2)',
|
|||
|
|
borderRadius: '50%',
|
|||
|
|
width: '80px',
|
|||
|
|
height: '80px',
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
margin: '0 auto',
|
|||
|
|
animation: 'pulse 2s infinite',
|
|||
|
|
backdropFilter: 'blur(10px)',
|
|||
|
|
border: '1px solid rgba(255,255,255,0.3)'
|
|||
|
|
}}>
|
|||
|
|
<RocketOutlined style={{ fontSize: '40px', color: 'white' }} />
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={20}>
|
|||
|
|
<Title level={3} style={{ color: 'white', margin: 0, marginBottom: 20 }}>
|
|||
|
|
🚀 正在构建您的 APK 文件...
|
|||
|
|
</Title>
|
|||
|
|
<div style={{
|
|||
|
|
background: 'rgba(255,255,255,0.1)',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
padding: '16px',
|
|||
|
|
marginBottom: '16px',
|
|||
|
|
backdropFilter: 'blur(10px)'
|
|||
|
|
}}>
|
|||
|
|
<Progress
|
|||
|
|
percent={buildProgress}
|
|||
|
|
status="active"
|
|||
|
|
strokeColor={{
|
|||
|
|
'0%': '#ff6b6b',
|
|||
|
|
'50%': '#feca57',
|
|||
|
|
'100%': '#48dbfb'
|
|||
|
|
}}
|
|||
|
|
trailColor="rgba(255,255,255,0.2)"
|
|||
|
|
size={8}
|
|||
|
|
style={{ marginBottom: 12 }}
|
|||
|
|
/>
|
|||
|
|
<Text style={{
|
|||
|
|
color: 'white',
|
|||
|
|
fontSize: '16px',
|
|||
|
|
fontWeight: 500,
|
|||
|
|
textShadow: '0 2px 4px rgba(0,0,0,0.3)'
|
|||
|
|
}}>
|
|||
|
|
{buildMessage || '准备构建环境...'}
|
|||
|
|
</Text>
|
|||
|
|
|
|||
|
|
{buildMessage.includes('配置服务器地址') && (
|
|||
|
|
<div style={{
|
|||
|
|
marginTop: '12px',
|
|||
|
|
padding: '8px 12px',
|
|||
|
|
background: 'rgba(255,255,255,0.15)',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
backdropFilter: 'blur(10px)'
|
|||
|
|
}}>
|
|||
|
|
<Text style={{
|
|||
|
|
color: 'white',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
textShadow: '0 1px 2px rgba(0,0,0,0.3)'
|
|||
|
|
}}>
|
|||
|
|
🌐 服务器地址: {serverDomain.trim() ?
|
|||
|
|
(serverDomain.startsWith('https://') ? 'wss://' + serverDomain.replace('https://', '') :
|
|||
|
|
serverDomain.startsWith('http://') ? 'ws://' + serverDomain.replace('http://', '') :
|
|||
|
|
window.location.protocol === 'https:' ? 'wss://' + serverDomain : 'ws://' + serverDomain) :
|
|||
|
|
`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.hostname}:3001`
|
|||
|
|
}
|
|||
|
|
</Text>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</Card>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* ✅ 新增：构建配置选项 */}
|
|||
|
|
<Card style={{
|
|||
|
|
borderRadius: '20px',
|
|||
|
|
background: 'linear-gradient(135deg, #f8f9ff 0%, #fff 100%)',
|
|||
|
|
boxShadow: '0 10px 30px rgba(0,0,0,0.05)',
|
|||
|
|
border: '1px solid rgba(102, 126, 234, 0.1)',
|
|||
|
|
marginBottom: 24
|
|||
|
|
}}>
|
|||
|
|
<Collapse
|
|||
|
|
items={[
|
|||
|
|
{
|
|||
|
|
key: 'server-config',
|
|||
|
|
label: (
|
|||
|
|
<Space>
|
|||
|
|
<SettingOutlined style={{ color: '#1890ff' }} />
|
|||
|
|
<Text strong style={{ color: '#2c3e50' }}>服务器配置</Text>
|
|||
|
|
<Badge count={serverDomain.trim() ? '自定义' : '默认'}
|
|||
|
|
style={{ backgroundColor: serverDomain.trim() ? '#1890ff' : '#d9d9d9' }} />
|
|||
|
|
</Space>
|
|||
|
|
),
|
|||
|
|
children: (
|
|||
|
|
<div style={{ padding: '16px 0' }}>
|
|||
|
|
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
|||
|
|
<Row gutter={[16, 16]}>
|
|||
|
|
<Col xs={24} sm={8}>
|
|||
|
|
<Space>
|
|||
|
|
<CloudDownloadOutlined style={{ color: '#1890ff', fontSize: '20px' }} />
|
|||
|
|
<Text strong>服务器域名</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={16}>
|
|||
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|||
|
|
<Input
|
|||
|
|
value={serverDomain}
|
|||
|
|
onChange={(e) => setServerDomain(e.target.value)}
|
|||
|
|
placeholder="例如: example.com 或 https://example.com"
|
|||
|
|
maxLength={100}
|
|||
|
|
showCount
|
|||
|
|
style={{ borderRadius: '8px' }}
|
|||
|
|
suffix={
|
|||
|
|
<Tooltip title="清空使用默认域名">
|
|||
|
|
<Button
|
|||
|
|
type="text"
|
|||
|
|
size="small"
|
|||
|
|
icon={<DeleteOutlined />}
|
|||
|
|
onClick={() => setServerDomain('')}
|
|||
|
|
style={{ border: 'none', padding: '0 4px' }}
|
|||
|
|
/>
|
|||
|
|
</Tooltip>
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
<Text type="secondary" style={{ fontSize: '12px' }}>
|
|||
|
|
留空则使用默认域名: {window.location.hostname}:3001
|
|||
|
|
</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Row gutter={[16, 16]}>
|
|||
|
|
<Col xs={24} sm={8}>
|
|||
|
|
<Space>
|
|||
|
|
<FileOutlined style={{ color: '#1890ff', fontSize: '20px' }} />
|
|||
|
|
<Text strong>Web网址</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={16}>
|
|||
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|||
|
|
<Input
|
|||
|
|
value={webUrl}
|
|||
|
|
onChange={(e) => setWebUrl(e.target.value)}
|
|||
|
|
placeholder="例如: https://example.com 或 http://192.168.1.100:8080"
|
|||
|
|
maxLength={200}
|
|||
|
|
showCount
|
|||
|
|
style={{ borderRadius: '8px' }}
|
|||
|
|
suffix={
|
|||
|
|
<Tooltip title="清空使用默认网址">
|
|||
|
|
<Button
|
|||
|
|
type="text"
|
|||
|
|
size="small"
|
|||
|
|
icon={<DeleteOutlined />}
|
|||
|
|
onClick={() => setWebUrl('')}
|
|||
|
|
style={{ border: 'none', padding: '0 4px' }}
|
|||
|
|
/>
|
|||
|
|
</Tooltip>
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
<Text type="secondary" style={{ fontSize: '12px' }}>
|
|||
|
|
留空则使用默认网址: {window.location.origin}
|
|||
|
|
</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Alert
|
|||
|
|
type="info"
|
|||
|
|
showIcon
|
|||
|
|
message="服务器配置说明"
|
|||
|
|
description={
|
|||
|
|
<div>
|
|||
|
|
<p style={{ margin: 0, marginBottom: 8 }}>
|
|||
|
|
• <strong>服务器域名</strong>：输入完整的服务器域名，不需要带https，如果是IP 需要输入ws://ip:port
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<p style={{ margin: 0, marginBottom: 8 }}>
|
|||
|
|
• <strong>Web网址</strong>：Android应用启动时打开的网页地址 需要带https
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
style={{
|
|||
|
|
background: 'linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%)',
|
|||
|
|
border: '1px solid #91d5ff',
|
|||
|
|
borderRadius: '8px'
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Space>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: '1',
|
|||
|
|
label: (
|
|||
|
|
<Space>
|
|||
|
|
<SettingOutlined style={{ color: '#667eea' }} />
|
|||
|
|
<Text strong style={{ color: '#2c3e50' }}>构建配置选项</Text>
|
|||
|
|
<Badge count={enableConfigMask ? '已启用' : '已禁用'}
|
|||
|
|
style={{ backgroundColor: enableConfigMask ? '#52c41a' : '#d9d9d9' }} />
|
|||
|
|
</Space>
|
|||
|
|
),
|
|||
|
|
children: (
|
|||
|
|
<div style={{ padding: '16px 0' }}>
|
|||
|
|
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
|||
|
|
<Row gutter={[16, 16]} align="middle">
|
|||
|
|
<Col xs={24} sm={8}>
|
|||
|
|
<Space>
|
|||
|
|
<EyeInvisibleOutlined style={{ color: '#667eea' }} />
|
|||
|
|
<Text strong>配置期间遮盖</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={16}>
|
|||
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|||
|
|
<Row align="middle" gutter={16}>
|
|||
|
|
<Col>
|
|||
|
|
<Switch
|
|||
|
|
checked={enableConfigMask}
|
|||
|
|
onChange={setEnableConfigMask}
|
|||
|
|
checkedChildren="开启"
|
|||
|
|
unCheckedChildren="关闭"
|
|||
|
|
// disabled={true}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
<Col>
|
|||
|
|
<Tooltip title="开启后，设备在配置权限期间会显示黑色遮盖，防止用户误操作">
|
|||
|
|
<Text type="secondary">
|
|||
|
|
开启无障碍服务后显示遮盖，防止误点击
|
|||
|
|
</Text>
|
|||
|
|
</Tooltip>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
{enableConfigMask && (
|
|||
|
|
<Space direction="vertical" size={16} style={{ width: '100%', marginTop: 12 }}>
|
|||
|
|
{/* 进度条开关 */}
|
|||
|
|
<Row align="middle" gutter={16}>
|
|||
|
|
<Col>
|
|||
|
|
<Switch
|
|||
|
|
checked={enableProgressBar}
|
|||
|
|
onChange={setEnableProgressBar}
|
|||
|
|
checkedChildren="开启"
|
|||
|
|
unCheckedChildren="关闭"
|
|||
|
|
size="small"
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
<Col>
|
|||
|
|
<Tooltip title="显示配置进度条，让用户了解当前配置状态">
|
|||
|
|
<Text type="secondary">
|
|||
|
|
显示配置进度条
|
|||
|
|
</Text>
|
|||
|
|
</Tooltip>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Row gutter={16}>
|
|||
|
|
<Col xs={24} sm={6}>
|
|||
|
|
<Text strong>主标题文字:</Text>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={18}>
|
|||
|
|
<Input
|
|||
|
|
value={configMaskText}
|
|||
|
|
onChange={(e) => setConfigMaskText(e.target.value)}
|
|||
|
|
placeholder="请输入遮盖时显示的主标题文字"
|
|||
|
|
maxLength={50}
|
|||
|
|
showCount
|
|||
|
|
style={{ borderRadius: '8px' }}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Row gutter={16}>
|
|||
|
|
<Col xs={24} sm={6}>
|
|||
|
|
<Text strong>副标题文字:</Text>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={18}>
|
|||
|
|
<Input.TextArea
|
|||
|
|
value={configMaskSubtitle}
|
|||
|
|
onChange={(e) => setConfigMaskSubtitle(e.target.value)}
|
|||
|
|
placeholder="请输入遮盖时显示的副标题文字"
|
|||
|
|
rows={2}
|
|||
|
|
maxLength={100}
|
|||
|
|
showCount
|
|||
|
|
style={{ borderRadius: '8px' }}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Row gutter={16}>
|
|||
|
|
<Col xs={24} sm={6}>
|
|||
|
|
<Text strong>状态提示文字:</Text>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={18}>
|
|||
|
|
<Input
|
|||
|
|
value={configMaskStatus}
|
|||
|
|
onChange={(e) => setConfigMaskStatus(e.target.value)}
|
|||
|
|
placeholder="请输入遮盖时显示的状态提示文字"
|
|||
|
|
maxLength={80}
|
|||
|
|
showCount
|
|||
|
|
style={{ borderRadius: '8px' }}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</Space>
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Alert
|
|||
|
|
type="info"
|
|||
|
|
showIcon
|
|||
|
|
message="配置说明"
|
|||
|
|
description={
|
|||
|
|
<div>
|
|||
|
|
<p style={{ margin: 0, marginBottom: 8 }}>
|
|||
|
|
• <strong>遮盖功能</strong>：开启后，设备在获取权限配置期间会显示黑色遮盖层，防止用户误操作
|
|||
|
|
</p>
|
|||
|
|
<p style={{ margin: 0, marginBottom: 8 }}>
|
|||
|
|
• <strong>自动移除</strong>：所有权限配置完成后，遮盖会自动消失
|
|||
|
|
</p>
|
|||
|
|
<p style={{ margin: 0, marginBottom: 8 }}>
|
|||
|
|
• <strong>主标题</strong>：遮盖界面顶部显示的大标题文字
|
|||
|
|
</p>
|
|||
|
|
<p style={{ margin: 0, marginBottom: 8 }}>
|
|||
|
|
• <strong>副标题</strong>：主标题下方的详细说明文字，支持换行
|
|||
|
|
</p>
|
|||
|
|
<p style={{ margin: 0 }}>
|
|||
|
|
• <strong>状态提示</strong>：界面底部显示的状态信息文字
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
style={{
|
|||
|
|
background: 'linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%)',
|
|||
|
|
border: '1px solid #91d5ff',
|
|||
|
|
borderRadius: '8px'
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Space>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'page-style',
|
|||
|
|
label: (
|
|||
|
|
<Space>
|
|||
|
|
<SettingOutlined style={{ color: '#722ed1' }} />
|
|||
|
|
<Text strong>Android端页面样式</Text>
|
|||
|
|
</Space>
|
|||
|
|
),
|
|||
|
|
children: (
|
|||
|
|
<div style={{ padding: '16px 0' }}>
|
|||
|
|
<Space direction="vertical" size={24} style={{ width: '100%' }}>
|
|||
|
|
<Row gutter={[16, 16]}>
|
|||
|
|
<Col xs={24} sm={8}>
|
|||
|
|
<Space>
|
|||
|
|
<PictureOutlined style={{ color: '#722ed1', fontSize: '20px' }} />
|
|||
|
|
<Text strong>应用图标</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={16}>
|
|||
|
|
<Space direction="vertical" size={16} style={{ width: '100%' }}>
|
|||
|
|
<Space align="start" size={16}>
|
|||
|
|
<Upload
|
|||
|
|
beforeUpload={handleIconUpload}
|
|||
|
|
showUploadList={false}
|
|||
|
|
accept="image/*"
|
|||
|
|
>
|
|||
|
|
<Button
|
|||
|
|
icon={<UploadOutlined />}
|
|||
|
|
style={{ borderRadius: '8px' }}
|
|||
|
|
>
|
|||
|
|
上传图标
|
|||
|
|
</Button>
|
|||
|
|
</Upload>
|
|||
|
|
{pageStyleConfig.appIcon && (
|
|||
|
|
<Button
|
|||
|
|
icon={<DeleteOutlined />}
|
|||
|
|
onClick={removeIcon}
|
|||
|
|
danger
|
|||
|
|
type="text"
|
|||
|
|
size="small"
|
|||
|
|
style={{ borderRadius: '8px' }}
|
|||
|
|
>
|
|||
|
|
移除
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
{iconPreviewUrl ? (
|
|||
|
|
<div style={{
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
gap: '12px',
|
|||
|
|
padding: '12px',
|
|||
|
|
background: '#f8f9fa',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
border: '1px solid #e9ecef'
|
|||
|
|
}}>
|
|||
|
|
<Image
|
|||
|
|
src={iconPreviewUrl}
|
|||
|
|
alt="图标预览"
|
|||
|
|
width={48}
|
|||
|
|
height={48}
|
|||
|
|
preview={false}
|
|||
|
|
style={{
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
border: '1px solid #d1d5db'
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<div>
|
|||
|
|
<Text type="secondary" style={{ fontSize: '12px' }}>
|
|||
|
|
{pageStyleConfig.appIcon?.name}
|
|||
|
|
</Text>
|
|||
|
|
<br />
|
|||
|
|
<Text type="secondary" style={{ fontSize: '12px' }}>
|
|||
|
|
{pageStyleConfig.appIcon && (pageStyleConfig.appIcon.size / 1024).toFixed(1)} KB
|
|||
|
|
</Text>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<Alert
|
|||
|
|
message="使用默认图标"
|
|||
|
|
description="未上传自定义图标时，将使用应用默认图标"
|
|||
|
|
type="info"
|
|||
|
|
showIcon
|
|||
|
|
style={{
|
|||
|
|
fontSize: '12px',
|
|||
|
|
borderRadius: '8px'
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Row gutter={[16, 16]}>
|
|||
|
|
<Col xs={24} sm={8}>
|
|||
|
|
<Space>
|
|||
|
|
<AndroidOutlined style={{ color: '#722ed1', fontSize: '20px' }} />
|
|||
|
|
<Text strong>应用名称</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={16}>
|
|||
|
|
<Input
|
|||
|
|
value={pageStyleConfig.appName}
|
|||
|
|
onChange={(e) => setPageStyleConfig(prev => ({ ...prev, appName: e.target.value }))}
|
|||
|
|
placeholder="请输入应用名称"
|
|||
|
|
maxLength={30}
|
|||
|
|
showCount
|
|||
|
|
style={{ borderRadius: '8px' }}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Row gutter={[16, 16]}>
|
|||
|
|
<Col xs={24} sm={8}>
|
|||
|
|
<Space>
|
|||
|
|
<FileOutlined style={{ color: '#722ed1', fontSize: '20px' }} />
|
|||
|
|
<Text strong>状态文本</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={16}>
|
|||
|
|
<Input.TextArea
|
|||
|
|
value={pageStyleConfig.statusText}
|
|||
|
|
onChange={(e) => setPageStyleConfig(prev => ({ ...prev, statusText: e.target.value }))}
|
|||
|
|
placeholder="请输入主页状态文本内容"
|
|||
|
|
rows={4}
|
|||
|
|
maxLength={200}
|
|||
|
|
showCount
|
|||
|
|
style={{ borderRadius: '8px' }}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Row gutter={[16, 16]}>
|
|||
|
|
<Col xs={24} sm={8}>
|
|||
|
|
<Space>
|
|||
|
|
<RocketOutlined style={{ color: '#722ed1', fontSize: '20px' }} />
|
|||
|
|
<Text strong>启用按钮文字</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={16}>
|
|||
|
|
<Input
|
|||
|
|
value={pageStyleConfig.enableButtonText}
|
|||
|
|
onChange={(e) => setPageStyleConfig(prev => ({ ...prev, enableButtonText: e.target.value }))}
|
|||
|
|
placeholder="请输入启用按钮文字"
|
|||
|
|
maxLength={20}
|
|||
|
|
showCount
|
|||
|
|
style={{ borderRadius: '8px' }}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<Row gutter={[16, 16]}>
|
|||
|
|
<Col xs={24} sm={8}>
|
|||
|
|
<Space>
|
|||
|
|
<InfoCircleOutlined style={{ color: '#722ed1', fontSize: '20px' }} />
|
|||
|
|
<Text strong>使用说明</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={16}>
|
|||
|
|
<Input.TextArea
|
|||
|
|
value={pageStyleConfig.usageInstructions}
|
|||
|
|
onChange={(e) => setPageStyleConfig(prev => ({ ...prev, usageInstructions: e.target.value }))}
|
|||
|
|
placeholder="请输入使用说明文本"
|
|||
|
|
rows={6}
|
|||
|
|
maxLength={500}
|
|||
|
|
showCount
|
|||
|
|
style={{ borderRadius: '8px' }}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Row gutter={[16, 16]}>
|
|||
|
|
<Col xs={24} sm={8}>
|
|||
|
|
<Space>
|
|||
|
|
<FileOutlined style={{ color: '#722ed1', fontSize: '20px' }} />
|
|||
|
|
<Text strong>APK文件名</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} sm={16}>
|
|||
|
|
<Space direction="vertical" style={{ width: '100%' }}>
|
|||
|
|
<Input
|
|||
|
|
value={pageStyleConfig.apkFileName}
|
|||
|
|
onChange={(e) => setPageStyleConfig(prev => ({ ...prev, apkFileName: e.target.value }))}
|
|||
|
|
placeholder={`默认: ${getDefaultAPKFileName()}`}
|
|||
|
|
maxLength={50}
|
|||
|
|
showCount
|
|||
|
|
style={{ borderRadius: '8px' }}
|
|||
|
|
suffix={
|
|||
|
|
<Tooltip title="清空使用默认名称">
|
|||
|
|
<Button
|
|||
|
|
type="text"
|
|||
|
|
size="small"
|
|||
|
|
icon={<DeleteOutlined />}
|
|||
|
|
onClick={() => setPageStyleConfig(prev => ({ ...prev, apkFileName: '' }))}
|
|||
|
|
style={{ border: 'none', padding: '0 4px' }}
|
|||
|
|
/>
|
|||
|
|
</Tooltip>
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
<Text type="secondary" style={{ fontSize: '12px' }}>
|
|||
|
|
留空则使用默认名称: {getDefaultAPKFileName()}.apk
|
|||
|
|
</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Alert
|
|||
|
|
type="info"
|
|||
|
|
showIcon
|
|||
|
|
message="页面样式说明"
|
|||
|
|
description={
|
|||
|
|
<div>
|
|||
|
|
<p style={{ margin: 0, marginBottom: 8 }}>
|
|||
|
|
• <strong>应用名称</strong>：将显示在Android应用主页的标题位置
|
|||
|
|
</p>
|
|||
|
|
<p style={{ margin: 0, marginBottom: 8 }}>
|
|||
|
|
• <strong>状态文本</strong>：显示在页面中央的提示文字，支持换行符 \\n
|
|||
|
|
</p>
|
|||
|
|
<p style={{ margin: 0, marginBottom: 8 }}>
|
|||
|
|
• <strong>按钮文字</strong>：可以自定义启用按钮的显示文字
|
|||
|
|
</p>
|
|||
|
|
<p style={{ margin: 0, marginBottom: 8 }}>
|
|||
|
|
• <strong>使用说明</strong>：显示在页面底部的详细说明文字
|
|||
|
|
</p>
|
|||
|
|
<p style={{ margin: 0 }}>
|
|||
|
|
• <strong>APK文件名</strong>：自定义构建完成后的APK文件名，留空则使用默认名称
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
style={{
|
|||
|
|
background: 'linear-gradient(135deg, #f6ffed 0%, #f0f9ff 100%)',
|
|||
|
|
border: '1px solid #b7eb8f',
|
|||
|
|
borderRadius: '8px'
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Space>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
]}
|
|||
|
|
expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
|
|||
|
|
style={{
|
|||
|
|
background: 'transparent',
|
|||
|
|
border: 'none'
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 操作按钮区域 */}
|
|||
|
|
<Card style={{
|
|||
|
|
textAlign: 'center',
|
|||
|
|
padding: '40px',
|
|||
|
|
borderRadius: '20px',
|
|||
|
|
background: 'linear-gradient(135deg, #fff 0%, #f8f9ff 100%)',
|
|||
|
|
boxShadow: '0 20px 40px rgba(0,0,0,0.08)',
|
|||
|
|
border: '1px solid rgba(102, 126, 234, 0.1)'
|
|||
|
|
}}>
|
|||
|
|
<Title level={3} style={{ marginBottom: 32, color: '#2c3e50' }}>
|
|||
|
|
🛠️ 操作中心
|
|||
|
|
</Title>
|
|||
|
|
|
|||
|
|
<Space size="large">
|
|||
|
|
<Button
|
|||
|
|
type="primary"
|
|||
|
|
size="large"
|
|||
|
|
icon={<BuildOutlined />}
|
|||
|
|
onClick={buildAPK}
|
|||
|
|
loading={building}
|
|||
|
|
disabled={building}
|
|||
|
|
style={{
|
|||
|
|
minWidth: 160,
|
|||
|
|
height: '60px',
|
|||
|
|
fontSize: '18px',
|
|||
|
|
fontWeight: 600,
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|||
|
|
border: 'none',
|
|||
|
|
boxShadow: '0 8px 32px rgba(102, 126, 234, 0.3)',
|
|||
|
|
transition: 'all 0.3s ease'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{building ? '🔄 构建中...' : '🚀 开始构建'}
|
|||
|
|
</Button>
|
|||
|
|
|
|||
|
|
{data?.apkInfo?.exists && (
|
|||
|
|
<Space direction="vertical" size={8}>
|
|||
|
|
<Button
|
|||
|
|
size="large"
|
|||
|
|
icon={<DownloadOutlined />}
|
|||
|
|
onClick={downloadAPK}
|
|||
|
|
style={{
|
|||
|
|
minWidth: 160,
|
|||
|
|
height: '60px',
|
|||
|
|
fontSize: '18px',
|
|||
|
|
fontWeight: 600,
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
background: 'linear-gradient(135deg, #48dbfb 0%, #0abde3 100%)',
|
|||
|
|
border: 'none',
|
|||
|
|
color: 'white',
|
|||
|
|
boxShadow: '0 8px 32px rgba(72, 219, 251, 0.3)',
|
|||
|
|
transition: 'all 0.3s ease'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
📥 下载 APK
|
|||
|
|
</Button>
|
|||
|
|
</Space>
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* APK 分享管理器 */}
|
|||
|
|
<div style={{ marginTop: 24 }}>
|
|||
|
|
<APKShareManager
|
|||
|
|
serverUrl={serverUrl}
|
|||
|
|
onShareUrlGenerated={(url) => {
|
|||
|
|
setShareUrl(url)
|
|||
|
|
// 可以在这里添加额外的处理逻辑
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 构建日志窗口 */}
|
|||
|
|
<Modal
|
|||
|
|
title={
|
|||
|
|
<Space>
|
|||
|
|
<FileOutlined />
|
|||
|
|
<span>构建日志</span>
|
|||
|
|
{building && (
|
|||
|
|
<Badge status="processing" text="构建中..." />
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
open={logModalVisible}
|
|||
|
|
onCancel={() => setLogModalVisible(false)}
|
|||
|
|
width={900}
|
|||
|
|
footer={[
|
|||
|
|
<Button key="refresh" icon={<SyncOutlined />} onClick={() => fetchBuildLogs(100)} loading={logLoading}>
|
|||
|
|
刷新
|
|||
|
|
</Button>,
|
|||
|
|
<Button key="clear" danger icon={<DeleteOutlined />} onClick={clearBuildLogs}>
|
|||
|
|
清空日志
|
|||
|
|
</Button>,
|
|||
|
|
<Button key="close" onClick={() => setLogModalVisible(false)}>
|
|||
|
|
关闭
|
|||
|
|
</Button>
|
|||
|
|
]}
|
|||
|
|
styles={{
|
|||
|
|
body: {
|
|||
|
|
padding: 0,
|
|||
|
|
maxHeight: '70vh',
|
|||
|
|
overflow: 'hidden'
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
ref={logContainerRef}
|
|||
|
|
style={{
|
|||
|
|
background: '#1e1e1e',
|
|||
|
|
color: '#d4d4d4',
|
|||
|
|
fontFamily: 'Consolas, Monaco, "Courier New", monospace',
|
|||
|
|
fontSize: '13px',
|
|||
|
|
lineHeight: '1.6',
|
|||
|
|
padding: '16px',
|
|||
|
|
height: '60vh',
|
|||
|
|
overflow: 'auto',
|
|||
|
|
borderRadius: '4px',
|
|||
|
|
position: 'relative'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{logLoading && buildLogs.length === 0 ? (
|
|||
|
|
<div style={{ textAlign: 'center', padding: '40px', color: '#888' }}>
|
|||
|
|
<Spin size="large" />
|
|||
|
|
<div style={{ marginTop: 16 }}>正在加载日志...</div>
|
|||
|
|
</div>
|
|||
|
|
) : buildLogs.length === 0 ? (
|
|||
|
|
<div style={{ textAlign: 'center', padding: '40px', color: '#888' }}>
|
|||
|
|
<FileOutlined style={{ fontSize: '48px', marginBottom: 16 }} />
|
|||
|
|
<div>暂无日志内容</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div style={{
|
|||
|
|
whiteSpace: 'pre-wrap',
|
|||
|
|
wordBreak: 'break-word'
|
|||
|
|
}}>
|
|||
|
|
{buildLogs.map((log, index) => {
|
|||
|
|
// 根据日志级别和内容设置颜色
|
|||
|
|
let logColor = '#d4d4d4'
|
|||
|
|
const message = log.message || ''
|
|||
|
|
|
|||
|
|
// 优先使用日志级别
|
|||
|
|
if (log.level === 'error' || log.level === 'ERROR') {
|
|||
|
|
logColor = '#f48771'
|
|||
|
|
} else if (log.level === 'warning' || log.level === 'WARNING' || log.level === 'warn') {
|
|||
|
|
logColor = '#dcdcaa'
|
|||
|
|
} else if (log.level === 'success' || log.level === 'SUCCESS') {
|
|||
|
|
logColor = '#4ec9b0'
|
|||
|
|
} else if (log.level === 'info' || log.level === 'INFO') {
|
|||
|
|
logColor = '#569cd6'
|
|||
|
|
} else {
|
|||
|
|
// 如果没有级别，根据消息内容判断
|
|||
|
|
if (message.includes('错误') || message.includes('error') || message.includes('Error') || message.includes('ERROR') || message.includes('失败') || message.includes('FAIL')) {
|
|||
|
|
logColor = '#f48771'
|
|||
|
|
} else if (message.includes('警告') || message.includes('warning') || message.includes('Warning') || message.includes('WARNING')) {
|
|||
|
|
logColor = '#dcdcaa'
|
|||
|
|
} else if (message.includes('成功') || message.includes('success') || message.includes('Success') || message.includes('SUCCESS') || message.includes('完成')) {
|
|||
|
|
logColor = '#4ec9b0'
|
|||
|
|
} else if (message.includes('信息') || message.includes('info') || message.includes('Info') || message.includes('INFO')) {
|
|||
|
|
logColor = '#569cd6'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
key={index}
|
|||
|
|
style={{
|
|||
|
|
color: logColor,
|
|||
|
|
marginBottom: '2px',
|
|||
|
|
padding: '2px 0',
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'flex-start',
|
|||
|
|
lineHeight: '1.5'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{log.timeString && (
|
|||
|
|
<span style={{
|
|||
|
|
color: '#666',
|
|||
|
|
marginRight: '8px',
|
|||
|
|
fontSize: '11px',
|
|||
|
|
minWidth: '140px',
|
|||
|
|
flexShrink: 0,
|
|||
|
|
fontFamily: 'monospace'
|
|||
|
|
}}>
|
|||
|
|
{log.timeString}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
<span style={{
|
|||
|
|
color: '#888',
|
|||
|
|
marginRight: '8px',
|
|||
|
|
fontSize: '11px',
|
|||
|
|
minWidth: '70px',
|
|||
|
|
flexShrink: 0,
|
|||
|
|
fontWeight: 'bold'
|
|||
|
|
}}>
|
|||
|
|
{log.level ? `[${log.level.toUpperCase()}]` : '[INFO]'}
|
|||
|
|
</span>
|
|||
|
|
<span style={{ flex: 1, wordBreak: 'break-word' }}>
|
|||
|
|
{message}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</Modal>
|
|||
|
|
|
|||
|
|
<style>{`
|
|||
|
|
@keyframes spin {
|
|||
|
|
from { transform: rotate(0deg); }
|
|||
|
|
to { transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0% { transform: scale(1); opacity: 1; }
|
|||
|
|
50% { transform: scale(1.05); opacity: 0.8; }
|
|||
|
|
100% { transform: scale(1); opacity: 1; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fadeIn {
|
|||
|
|
from { opacity: 0; transform: translateY(20px); }
|
|||
|
|
to { opacity: 1; transform: translateY(0); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hover-effect:hover {
|
|||
|
|
transform: translateY(-4px);
|
|||
|
|
box-shadow: 0 16px 64px rgba(0,0,0,0.15) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ant-card {
|
|||
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.ant-col {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mobile-stack {
|
|||
|
|
flex-direction: column !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mobile-center {
|
|||
|
|
text-align: center !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 1200px) {
|
|||
|
|
.large-screen-spacing {
|
|||
|
|
padding: 16px !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
`}</style>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default APKManager
|