|
@@ -44,6 +44,8 @@ function shortTime(value?: string | number): string {
|
|
|
return `${hh}:${mm}:${ss}`;
|
|
return `${hh}:${mm}:${ss}`;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+const AUTO_UPDATE_INTERVAL = 5000;
|
|
|
|
|
+
|
|
|
export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
|
|
export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
|
|
|
const { t } = useTranslation();
|
|
const { t } = useTranslation();
|
|
|
const { datepicker } = useDatepicker();
|
|
const { datepicker } = useDatepicker();
|
|
@@ -53,6 +55,7 @@ export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
|
|
|
const [showDirect, setShowDirect] = useState(true);
|
|
const [showDirect, setShowDirect] = useState(true);
|
|
|
const [showBlocked, setShowBlocked] = useState(true);
|
|
const [showBlocked, setShowBlocked] = useState(true);
|
|
|
const [showProxy, setShowProxy] = useState(true);
|
|
const [showProxy, setShowProxy] = useState(true);
|
|
|
|
|
+ const [autoUpdate, setAutoUpdate] = useState(false);
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
|
const [logs, setLogs] = useState<XrayLogEntry[]>([]);
|
|
const [logs, setLogs] = useState<XrayLogEntry[]>([]);
|
|
|
const openRef = useRef(open);
|
|
const openRef = useRef(open);
|
|
@@ -75,6 +78,11 @@ export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
|
|
|
}
|
|
}
|
|
|
}, [rows, filter, showDirect, showBlocked, showProxy]);
|
|
}, [rows, filter, showDirect, showBlocked, showProxy]);
|
|
|
|
|
|
|
|
|
|
+ const refreshRef = useRef(refresh);
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
|
+ refreshRef.current = refresh;
|
|
|
|
|
+ }, [refresh]);
|
|
|
|
|
+
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
openRef.current = open;
|
|
openRef.current = open;
|
|
|
if (open) refresh();
|
|
if (open) refresh();
|
|
@@ -84,6 +92,12 @@ export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
|
|
|
if (openRef.current) refresh();
|
|
if (openRef.current) refresh();
|
|
|
}, [rows, showDirect, showBlocked, showProxy, refresh]);
|
|
}, [rows, showDirect, showBlocked, showProxy, refresh]);
|
|
|
|
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
|
+ if (!open || !autoUpdate) return;
|
|
|
|
|
+ const id = setInterval(() => refreshRef.current(), AUTO_UPDATE_INTERVAL);
|
|
|
|
|
+ return () => clearInterval(id);
|
|
|
|
|
+ }, [open, autoUpdate]);
|
|
|
|
|
+
|
|
|
function fullDate(value?: string | number): string {
|
|
function fullDate(value?: string | number): string {
|
|
|
return IntlUtil.formatDate(value, datepicker);
|
|
return IntlUtil.formatDate(value, datepicker);
|
|
|
}
|
|
}
|
|
@@ -158,6 +172,9 @@ export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
|
|
|
<Checkbox checked={showProxy} onChange={(e) => setShowProxy(e.target.checked)}>
|
|
<Checkbox checked={showProxy} onChange={(e) => setShowProxy(e.target.checked)}>
|
|
|
Proxy
|
|
Proxy
|
|
|
</Checkbox>
|
|
</Checkbox>
|
|
|
|
|
+ <Checkbox checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)}>
|
|
|
|
|
+ {t('pages.index.autoUpdate')}
|
|
|
|
|
+ </Checkbox>
|
|
|
</Form.Item>
|
|
</Form.Item>
|
|
|
<Form.Item className="download-item">
|
|
<Form.Item className="download-item">
|
|
|
<Button type="primary" onClick={download} icon={<DownloadOutlined />} />
|
|
<Button type="primary" onClick={download} icon={<DownloadOutlined />} />
|