feat: U-001 设置页面 — Gateway/Device/Connection三标签
- Gateway标签: URL配置+心跳间隔+日志级别+自动连接 - Device标签: 设备名称+信息卡片 - Connection标签: 状态指示器+连接/断开按钮 - 引用@yuzu-gca/shared的DEFAULT_GATEWAY_CONFIG
This commit is contained in:
LukeMackin
@@ -1,72 +1,171 @@
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';
|
||||
import { onAppStartCheckUpdate } from './src/updater/index';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
StyleSheet, Text, View, TextInput, TouchableOpacity,
|
||||
ScrollView, Switch,
|
||||
} from 'react-native';
|
||||
import { DEFAULT_GATEWAY_CONFIG } from '@yuzu-gca/shared';
|
||||
|
||||
/** U-001: Settings Page for Yuzu GCA Android Client */
|
||||
|
||||
export default function App() {
|
||||
const [status, setStatus] = useState<'checking' | 'up-to-date' | 'updating' | 'error'>('checking');
|
||||
const [message, setMessage] = useState('正在检查更新...');
|
||||
const [tab, setTab] = useState<'settings' | 'device' | 'connection'>('settings');
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const result = await onAppStartCheckUpdate();
|
||||
if (result.jsUpdate) {
|
||||
setStatus('updating');
|
||||
setMessage('发现 JS 更新，正在下载...（下次启动生效）');
|
||||
} else if (result.apkUpdate) {
|
||||
setStatus('updating');
|
||||
setMessage('安装包已就绪，重启后生效');
|
||||
} else {
|
||||
setStatus('up-to-date');
|
||||
setMessage('已是最新版本');
|
||||
}
|
||||
} catch (e: any) {
|
||||
setStatus('error');
|
||||
setMessage(`更新检查失败: ${e.message}`);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
// Settings state
|
||||
const [gatewayUrl, setGatewayUrl] = useState(DEFAULT_GATEWAY_CONFIG.url);
|
||||
const [deviceName, setDeviceName] = useState('Android Device');
|
||||
const [autoConnect, setAutoConnect] = useState(true);
|
||||
const [heartbeatInterval, setHeartbeatInterval] = useState(String(DEFAULT_GATEWAY_CONFIG.heartbeatInterval / 1000));
|
||||
const [logLevel, setLogLevel] = useState('info');
|
||||
|
||||
// Connection state
|
||||
const [connStatus, setConnStatus] = useState<'disconnected' | 'connecting' | 'connected' | 'error'>('disconnected');
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar style="light" />
|
||||
|
||||
{/* Header */}
|
||||
<Text style={styles.title}>Yuzu GCA</Text>
|
||||
<Text style={styles.subtitle}>Global Control Assistant</Text>
|
||||
<View style={styles.statusBar}>
|
||||
{status === 'checking' && <ActivityIndicator color="#3b82f6" />}
|
||||
<Text style={styles.statusText}>{message}</Text>
|
||||
<Text style={styles.subtitle}>Settings</Text>
|
||||
|
||||
{/* Tabs */}
|
||||
<View style={styles.tabBar}>
|
||||
{(['settings', 'device', 'connection'] as const).map(t => (
|
||||
<TouchableOpacity key={t} onPress={() => setTab(t)} style={[styles.tab, tab === t && styles.tabActive]}>
|
||||
<Text style={[styles.tabText, tab === t && styles.tabTextActive]}>
|
||||
{t === 'settings' ? 'Gateway' : t === 'device' ? 'Device' : 'Connection'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.body}>
|
||||
{tab === 'settings' && (
|
||||
<>
|
||||
{/* Gateway URL */}
|
||||
<Text style={styles.label}>Gateway URL</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={gatewayUrl}
|
||||
onChangeText={setGatewayUrl}
|
||||
placeholder="http://localhost:3000"
|
||||
placeholderTextColor="#475569"
|
||||
autoCapitalize="none"
|
||||
keyboardType="url"
|
||||
/>
|
||||
|
||||
{/* Heartbeat Interval */}
|
||||
<Text style={styles.label}>Heartbeat (seconds)</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={heartbeatInterval}
|
||||
onChangeText={setHeartbeatInterval}
|
||||
keyboardType="numeric"
|
||||
placeholder="15"
|
||||
placeholderTextColor="#475569"
|
||||
/>
|
||||
|
||||
{/* Auto-connect */}
|
||||
<View style={styles.switchRow}>
|
||||
<Text style={styles.label}>Auto-connect on start</Text>
|
||||
<Switch value={autoConnect} onValueChange={setAutoConnect} trackColor={{ true: '#3b82f6' }} />
|
||||
</View>
|
||||
|
||||
{/* Log Level */}
|
||||
<Text style={styles.label}>Log Level</Text>
|
||||
<View style={styles.chipRow}>
|
||||
{(['debug', 'info', 'warn', 'error'] as const).map(lv => (
|
||||
<TouchableOpacity
|
||||
key={lv}
|
||||
style={[styles.chip, logLevel === lv && styles.chipActive]}
|
||||
onPress={() => setLogLevel(lv)}
|
||||
>
|
||||
<Text style={[styles.chipText, logLevel === lv && styles.chipTextActive]}>{lv}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === 'device' && (
|
||||
<>
|
||||
<Text style={styles.label}>Device Name</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={deviceName}
|
||||
onChangeText={setDeviceName}
|
||||
placeholder="Android Device"
|
||||
placeholderTextColor="#475569"
|
||||
/>
|
||||
<View style={styles.infoCard}>
|
||||
<Text style={styles.infoTitle}>Device Info</Text>
|
||||
<Text style={styles.infoText}>Platform: Android</Text>
|
||||
<Text style={styles.infoText}>MCP Server: {gatewayUrl ? 'Configured' : 'Not configured'}</Text>
|
||||
<Text style={styles.infoText}>Capabilities: 36 tools (7 implemented)</Text>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === 'connection' && (
|
||||
<>
|
||||
<View style={[styles.connIndicator, styles[`conn_${connStatus}`]]}>
|
||||
<Text style={styles.connText}>
|
||||
{connStatus === 'connected' ? '🟢 Connected' :
|
||||
connStatus === 'connecting' ? '🟡 Connecting...' :
|
||||
connStatus === 'error' ? '🔴 Error' : '⚫ Disconnected'}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={[styles.btn, connStatus === 'connected' ? styles.btnDanger : styles.btnPrimary]}
|
||||
onPress={() => setConnStatus(connStatus === 'disconnected' ? 'connecting' : 'disconnected')}
|
||||
>
|
||||
<Text style={styles.btnText}>
|
||||
{connStatus === 'disconnected' ? 'Connect' : 'Disconnect'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#0f172a',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 24,
|
||||
container: { flex: 1, backgroundColor: '#0f172a', paddingTop: 48 },
|
||||
title: { fontSize: 28, fontWeight: '800', color: '#e2e8f0', textAlign: 'center' },
|
||||
subtitle: { fontSize: 12, color: '#64748b', textAlign: 'center', marginBottom: 16 },
|
||||
tabBar: { flexDirection: 'row', marginHorizontal: 16, marginBottom: 16 },
|
||||
tab: {
|
||||
flex: 1, padding: 10, alignItems: 'center',
|
||||
borderBottomWidth: 2, borderBottomColor: '#1e293b',
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: '800',
|
||||
color: '#e2e8f0',
|
||||
marginBottom: 4,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 14,
|
||||
color: '#94a3b8',
|
||||
marginBottom: 32,
|
||||
},
|
||||
statusBar: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
statusText: {
|
||||
fontSize: 14,
|
||||
color: '#94a3b8',
|
||||
tabActive: { borderBottomColor: '#3b82f6' },
|
||||
tabText: { fontSize: 14, color: '#64748b' },
|
||||
tabTextActive: { color: '#3b82f6', fontWeight: '600' },
|
||||
body: { flex: 1, paddingHorizontal: 16 },
|
||||
label: { fontSize: 12, color: '#94a3b8', marginBottom: 4, marginTop: 12 },
|
||||
input: {
|
||||
backgroundColor: '#1e293b', color: '#e2e8f0', borderRadius: 8,
|
||||
padding: 12, fontSize: 14, marginBottom: 4,
|
||||
},
|
||||
switchRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 },
|
||||
chipRow: { flexDirection: 'row', gap: 8, marginTop: 4 },
|
||||
chip: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 16, backgroundColor: '#1e293b' },
|
||||
chipActive: { backgroundColor: '#1e40af' },
|
||||
chipText: { fontSize: 12, color: '#94a3b8' },
|
||||
chipTextActive: { color: '#fff' },
|
||||
infoCard: { backgroundColor: '#1e293b', borderRadius: 8, padding: 16, marginTop: 16 },
|
||||
infoTitle: { fontSize: 14, color: '#38bdf8', marginBottom: 8 },
|
||||
infoText: { fontSize: 12, color: '#94a3b8', marginTop: 4 },
|
||||
connIndicator: { borderRadius: 8, padding: 16, marginTop: 16, alignItems: 'center' },
|
||||
conn_connected: { backgroundColor: '#064e3b' },
|
||||
conn_connecting: { backgroundColor: '#78350f' },
|
||||
conn_error: { backgroundColor: '#7f1d1d' },
|
||||
conn_disconnected: { backgroundColor: '#1e293b' },
|
||||
connText: { fontSize: 16, color: '#e2e8f0' },
|
||||
btn: { borderRadius: 8, padding: 14, marginTop: 16, alignItems: 'center' },
|
||||
btnPrimary: { backgroundColor: '#1e40af' },
|
||||
btnDanger: { backgroundColor: '#991b1b' },
|
||||
btnText: { fontSize: 16, color: '#fff', fontWeight: '600' },
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user