271 lines
9.3 KiB
TypeScript
271 lines
9.3 KiB
TypeScript
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||
import { View, Text, TextInput, TouchableOpacity, ScrollView, StyleSheet, Switch, Platform } from 'react-native';
|
||
import { useDeviceStore } from '../stores/deviceStore';
|
||
import { SEND_FREQ_TABLE, SAMPLE_FREQ_TABLE, AMP_RATIO_TABLE, SOURCE_MODE_TABLE } from '../protocol/constants';
|
||
import { useTheme } from '../design/tokens';
|
||
|
||
interface PickerRowProps {
|
||
label: string;
|
||
options: readonly { code: number; label: string }[];
|
||
value: number;
|
||
onChange: (code: number) => void;
|
||
}
|
||
|
||
const CHIP_W = 72;
|
||
|
||
function PickerRow({ label, options, value, onChange }: PickerRowProps) {
|
||
const theme = useTheme();
|
||
const scrollRef = useRef<ScrollView>(null);
|
||
const activeIdx = options.findIndex((o) => o.code === value);
|
||
|
||
useEffect(() => {
|
||
if (activeIdx > 0 && scrollRef.current) {
|
||
scrollRef.current.scrollTo({ x: Math.max(0, activeIdx * CHIP_W - CHIP_W), animated: false });
|
||
}
|
||
}, [activeIdx]);
|
||
|
||
return (
|
||
<View style={[S.row, { borderBottomColor: theme.bg.divider, backgroundColor: theme.bg.surface }]}>
|
||
<Text style={[S.rowLabel, { color: theme.text.muted }]}>{label}</Text>
|
||
<ScrollView ref={scrollRef} horizontal showsHorizontalScrollIndicator={false} style={S.optScroll}>
|
||
{options.map((o) => {
|
||
const active = o.code === value;
|
||
return (
|
||
<TouchableOpacity
|
||
key={o.code}
|
||
style={[S.optChip, { borderColor: theme.bg.border }, active && { borderColor: theme.blue.fg + '55', backgroundColor: theme.blue.bg }]}
|
||
onPress={() => onChange(o.code)}
|
||
activeOpacity={0.7}
|
||
>
|
||
<Text style={[S.optText, { color: theme.text.muted }, active && { color: theme.blue.fg, fontWeight: '700' }]}>{o.label}</Text>
|
||
</TouchableOpacity>
|
||
);
|
||
})}
|
||
</ScrollView>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
interface NumberRowProps {
|
||
label: string;
|
||
value: number;
|
||
min: number;
|
||
max: number;
|
||
onCommit: (v: number) => void;
|
||
suffix?: string;
|
||
}
|
||
|
||
// Keeps a local draft string while typing; commits a clamped integer on blur.
|
||
function NumberRow({ label, value, min, max, onCommit, suffix }: NumberRowProps) {
|
||
const theme = useTheme();
|
||
const [draft, setDraft] = useState(String(value));
|
||
|
||
// Sync when the store value changes externally (e.g. presets).
|
||
useEffect(() => { setDraft(String(value)); }, [value]);
|
||
|
||
const commit = () => {
|
||
const n = parseInt(draft, 10);
|
||
const clamped = isNaN(n) ? min : Math.max(min, Math.min(max, n));
|
||
setDraft(String(clamped));
|
||
if (clamped !== value) onCommit(clamped);
|
||
};
|
||
|
||
const invalid = (() => {
|
||
const n = parseInt(draft, 10);
|
||
return isNaN(n) || n < min || n > max;
|
||
})();
|
||
|
||
return (
|
||
<View style={[S.row, { borderBottomColor: theme.bg.divider, backgroundColor: theme.bg.surface }]}>
|
||
<Text style={[S.rowLabel, { color: theme.text.muted }]}>{label}</Text>
|
||
<View style={S.inputWrap}>
|
||
<TextInput
|
||
style={[S.input, { color: theme.text.primary, borderBottomColor: theme.bg.border }, invalid && { borderBottomColor: theme.red.fg }]}
|
||
value={draft}
|
||
onChangeText={setDraft}
|
||
onBlur={commit}
|
||
keyboardType="numeric"
|
||
selectTextOnFocus
|
||
placeholderTextColor={theme.text.muted}
|
||
/>
|
||
{suffix && <Text style={[S.suffix, { color: theme.text.muted }]}>{suffix}</Text>}
|
||
</View>
|
||
{invalid && (
|
||
<Text style={[S.hint, { color: theme.red.fg }]}>{min}–{max}</Text>
|
||
)}
|
||
</View>
|
||
);
|
||
}
|
||
|
||
function SectionHeader({ title }: { title: string }) {
|
||
const theme = useTheme();
|
||
return (
|
||
<View style={S.sectionHeader}>
|
||
<Text style={[S.sectionTitle, { color: theme.text.muted }]}>{title}</Text>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
interface FormProps { onAnyChange?: () => void }
|
||
|
||
export function ParamForm({ onAnyChange }: FormProps = {}) {
|
||
const theme = useTheme();
|
||
const { config, updateConfig } = useDeviceStore();
|
||
const patch = (partial: Partial<typeof config>) => {
|
||
updateConfig(partial);
|
||
onAnyChange?.();
|
||
};
|
||
|
||
return (
|
||
<View style={[S.container, { backgroundColor: theme.bg.base }]}>
|
||
|
||
<SectionHeader title="采集配置" />
|
||
|
||
{/* Channel count */}
|
||
<View style={[S.row, { borderBottomColor: theme.bg.divider, backgroundColor: theme.bg.surface }]}>
|
||
<Text style={[S.rowLabel, { color: theme.text.muted }]}>通道数</Text>
|
||
<View style={S.channelRow}>
|
||
{[1, 2, 3, 4, 5, 6].map((n) => {
|
||
const active = config.channelNum === n;
|
||
return (
|
||
<TouchableOpacity
|
||
key={n}
|
||
style={[S.chChip, { borderColor: theme.bg.border, backgroundColor: theme.bg.surface }, active && { borderColor: theme.blue.fg + '66', backgroundColor: theme.blue.bg }]}
|
||
onPress={() => patch({ channelNum: n })}
|
||
activeOpacity={0.7}
|
||
>
|
||
<Text style={[S.chText, { color: theme.text.muted }, active && { color: theme.blue.fg }]}>{n}</Text>
|
||
</TouchableOpacity>
|
||
);
|
||
})}
|
||
</View>
|
||
</View>
|
||
|
||
<PickerRow label="发射频率" options={SEND_FREQ_TABLE} value={config.sendFreq} onChange={(v) => patch({ sendFreq: v })} />
|
||
<PickerRow label="采样频率" options={SAMPLE_FREQ_TABLE} value={config.sampleFreq} onChange={(v) => patch({ sampleFreq: v })} />
|
||
|
||
<NumberRow
|
||
label="采样点数" value={config.sampleDepth}
|
||
min={64} max={65535}
|
||
onCommit={(v) => { patch({ sampleDepth: v }); }}
|
||
/>
|
||
<NumberRow
|
||
label="叠加次数" value={config.accNum}
|
||
min={1} max={9999}
|
||
onCommit={(v) => { patch({ accNum: v }); }}
|
||
/>
|
||
|
||
<SectionHeader title="放大与源" />
|
||
|
||
<PickerRow label="增 益" options={AMP_RATIO_TABLE} value={config.ampRatio} onChange={(v) => patch({ ampRatio: v })} />
|
||
<PickerRow label="源模式" options={SOURCE_MODE_TABLE} value={config.sourceMode} onChange={(v) => patch({ sourceMode: v })} />
|
||
|
||
<SectionHeader title="高级设置" />
|
||
|
||
{/* Reverse accumulation */}
|
||
<View style={[S.row, { borderBottomColor: theme.bg.divider, backgroundColor: theme.bg.surface }]}>
|
||
<Text style={[S.rowLabel, { color: theme.text.muted }]}>反向叠加</Text>
|
||
<View style={S.switchRow}>
|
||
<Text style={[S.switchLabel, { color: theme.text.muted }]}>CH1-3</Text>
|
||
<Switch
|
||
value={config.negAcc123}
|
||
onValueChange={(v) => patch({ negAcc123: v })}
|
||
thumbColor={config.negAcc123 ? theme.blue.fg : theme.text.muted}
|
||
trackColor={{ false: theme.bg.border, true: theme.blue.border }}
|
||
/>
|
||
<Text style={[S.switchLabel, { color: theme.text.muted }]}>CH4-6</Text>
|
||
<Switch
|
||
value={config.negAcc456}
|
||
onValueChange={(v) => patch({ negAcc456: v })}
|
||
thumbColor={config.negAcc456 ? theme.blue.fg : theme.text.muted}
|
||
trackColor={{ false: theme.bg.border, true: theme.blue.border }}
|
||
/>
|
||
</View>
|
||
</View>
|
||
|
||
<NumberRow
|
||
label="补偿延时" value={config.compDisableDelay}
|
||
min={0} max={65535}
|
||
onCommit={(v) => { patch({ compDisableDelay: v }); }}
|
||
suffix="×50μs"
|
||
/>
|
||
|
||
{/* File prefix */}
|
||
<View style={[S.row, { borderBottomColor: theme.bg.divider, backgroundColor: theme.bg.surface }]}>
|
||
<Text style={[S.rowLabel, { color: theme.text.muted }]}>文件前缀</Text>
|
||
<View style={S.inputWrap}>
|
||
<TextInput
|
||
style={[S.input, { color: theme.text.primary, borderBottomColor: theme.bg.border }]}
|
||
value={config.filePrefix}
|
||
onChangeText={(v) => patch({ filePrefix: v.slice(0, 15) })}
|
||
maxLength={15}
|
||
autoCapitalize="none"
|
||
placeholderTextColor={theme.text.muted}
|
||
/>
|
||
</View>
|
||
</View>
|
||
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const S = StyleSheet.create({
|
||
container: {},
|
||
|
||
sectionHeader: {
|
||
paddingHorizontal: 16,
|
||
paddingTop: 14,
|
||
paddingBottom: 6,
|
||
},
|
||
sectionTitle: {
|
||
fontSize: 9,
|
||
fontWeight: '700',
|
||
letterSpacing: 2,
|
||
textTransform: 'uppercase',
|
||
},
|
||
|
||
row: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 10,
|
||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||
gap: 12,
|
||
marginHorizontal: 0,
|
||
},
|
||
rowLabel: { fontSize: 12, width: 68, flexShrink: 0, letterSpacing: 0.3 },
|
||
|
||
// Picker chips
|
||
optScroll: { flex: 1 },
|
||
optChip: { borderWidth: 1, borderRadius: 6, paddingHorizontal: 9, paddingVertical: 4, marginRight: 5 },
|
||
optText: { fontSize: 11 },
|
||
|
||
// Number input
|
||
inputWrap: { flexDirection: 'row', alignItems: 'center', flex: 1 },
|
||
input: {
|
||
flex: 1,
|
||
fontSize: 13,
|
||
fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
|
||
paddingVertical: 4,
|
||
borderBottomWidth: 1,
|
||
},
|
||
suffix: { fontSize: 10, marginLeft: 8 },
|
||
hint: { fontSize: 9, marginLeft: 4 },
|
||
|
||
// Channel chips
|
||
channelRow: { flexDirection: 'row', gap: 6, flex: 1 },
|
||
chChip: {
|
||
width: 30,
|
||
height: 30,
|
||
borderRadius: 15,
|
||
borderWidth: 1,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
chText: { fontSize: 12, fontWeight: '700' },
|
||
|
||
// Switch row
|
||
switchRow: { flexDirection: 'row', alignItems: 'center', gap: 8, flex: 1 },
|
||
switchLabel: { fontSize: 12 },
|
||
});
|