77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { useCallback, useEffect, useState } from 'react'
|
||
import { View, Text, ScrollView, StyleSheet, RefreshControl } from 'react-native'
|
||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||
|
||
import { useBind } from '@/context/BindContext'
|
||
import { apiFetch } from '@/lib/api'
|
||
import { theme } from '@/constants/theme'
|
||
|
||
export default function DeskScreen() {
|
||
const { bind } = useBind()
|
||
const [raw, setRaw] = useState<string>('')
|
||
const [err, setErr] = useState('')
|
||
const [refreshing, setRefreshing] = useState(false)
|
||
|
||
const load = useCallback(async () => {
|
||
if (!bind) {
|
||
setErr('未绑定 PC')
|
||
setRaw('')
|
||
return
|
||
}
|
||
setErr('')
|
||
try {
|
||
const r = await apiFetch(bind, '/client/overview')
|
||
if (!r.ok) throw new Error(String(r.status))
|
||
const j = await r.json()
|
||
setRaw(JSON.stringify(j, null, 2))
|
||
} catch (e) {
|
||
setErr(e instanceof Error ? e.message : String(e))
|
||
setRaw('')
|
||
}
|
||
}, [bind])
|
||
|
||
useEffect(() => {
|
||
void load()
|
||
}, [load])
|
||
|
||
const onRefresh = useCallback(async () => {
|
||
setRefreshing(true)
|
||
await load()
|
||
setRefreshing(false)
|
||
}, [load])
|
||
|
||
return (
|
||
<SafeAreaView style={styles.safe} edges={['bottom']}>
|
||
<ScrollView
|
||
contentContainerStyle={styles.scroll}
|
||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => void onRefresh()} />}
|
||
>
|
||
<Text style={styles.h1}>工作台</Text>
|
||
<Text style={styles.lead}>来自后端 /client/overview 的摘要（与桌面工作台同源数据）。</Text>
|
||
{err ? <Text style={styles.err}>{err}</Text> : null}
|
||
{raw ? <Text style={styles.pre}>{raw}</Text> : !err ? <Text style={styles.muted}>暂无数据</Text> : null}
|
||
</ScrollView>
|
||
</SafeAreaView>
|
||
)
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
safe: { flex: 1, backgroundColor: theme.bg },
|
||
scroll: { padding: 20, paddingBottom: 40 },
|
||
h1: { fontSize: 22, fontWeight: '700', color: theme.text, marginBottom: 8 },
|
||
lead: { fontSize: 14, color: theme.muted, marginBottom: 16, lineHeight: 22 },
|
||
pre: {
|
||
fontFamily: 'monospace',
|
||
fontSize: 11,
|
||
color: '#c8cdd5',
|
||
lineHeight: 18,
|
||
backgroundColor: theme.bgCard,
|
||
padding: 12,
|
||
borderRadius: 10,
|
||
borderWidth: 1,
|
||
borderColor: theme.border,
|
||
},
|
||
err: { color: theme.danger, marginBottom: 12 },
|
||
muted: { color: theme.muted },
|
||
})
|