{t('devices.s44')}
{fix2(realtimeDevice?.wind_speed)} m/s
-
{t('home.temperature')}
{fix2(realtimeDevice?.environment_temperature)}℃
+
{t('home.temperature')}
{formatTemperature(Number(realtimeDevice?.environment_temperature || 0), 1).label}
{t('devices.rainfall')}
{getVal(realtimeDevice?.rainfall)}
RTK
{realtimeDevice?.position_state?.is_fixed === 'fixing_successful' ? '固定' : '未固定'}
diff --git a/src/components/devices/DeviceStatusPage.tsx b/src/components/devices/DeviceStatusPage.tsx
index c74d17c..d040a52 100644
--- a/src/components/devices/DeviceStatusPage.tsx
+++ b/src/components/devices/DeviceStatusPage.tsx
@@ -61,6 +61,7 @@ import { MowerAllView } from './MowerAllView';
import { useMqtt } from '@/hooks/useMqtt';
import envConfig from '../../../env';
import { dataUrlToFile } from '@/lib/utils.ts';
+import { useUnitFormatter } from '@/lib/units';
import { PauseOutlined, PlayCircleOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
const { RangePicker } = DatePicker;
@@ -72,6 +73,7 @@ export default function DeviceStatusPage() {
const { t } = useTranslation();
const { userInfo } = useSelector((state: RootState) => state.user);
const { stationId, currentStation } = useSelector((state: RootState) => state.station);
+ const { formatTemperature } = useUnitFormatter();
const [persistentDroneData, setPersistentDroneData] = useState(null); // 持久化无人机数据
const [persistentHostData, setPersistentHostData] = useState(null); // 持久化机场数据
const [devices, setDevices] = useState([]);
@@ -1188,11 +1190,11 @@ export default function DeviceStatusPage() {
{t('devices.rtRightSpeed')}
{runningStatus?.rightMeasureSpeed !== undefined ? `${Number(runningStatus?.rightMeasureSpeed).toFixed(1)}rpm` : '-'}
{t('devices.rtLeftTemp')}
-
{runningStatus?.leftMotorTemp !== undefined ? `${Number(runningStatus?.leftMotorTemp).toFixed(1)}℃` : '-'}
+
{runningStatus?.leftMotorTemp !== undefined ? formatTemperature(Number(runningStatus?.leftMotorTemp), 1).label : '-'}
{t('devices.rtRightTemp')}
-
{runningStatus?.rightMotorTemp !== undefined ? `${Number(runningStatus?.rightMotorTemp).toFixed(1)}℃` : '-'}
+
{runningStatus?.rightMotorTemp !== undefined ? formatTemperature(Number(runningStatus?.rightMotorTemp), 1).label : '-'}
{t('devices.rtMainTemp')}
-
{runningStatus?.chipTemp !== undefined ? `${Number(runningStatus?.chipTemp).toFixed(1)}℃` : '-'}
+
{runningStatus?.chipTemp !== undefined ? formatTemperature(Number(runningStatus?.chipTemp), 1).label : '-'}
{t('devices.rtHeadingAngle')}
{runningStatus?.yaw !== undefined ? `${Number(runningStatus?.yaw).toFixed(1)}°` : '-'}
{t('devices.rtPitchAngle')}
@@ -1307,11 +1309,11 @@ export default function DeviceStatusPage() {
{t('devices.rtRightSpeed')}
{runningStatus?.rightMeasureSpeed !== undefined ? `${Number(runningStatus?.rightMeasureSpeed).toFixed(1)}rpm` : '-'}
{t('devices.rtLeftTemp')}
-
{runningStatus?.leftMotorTemp !== undefined ? `${Number(runningStatus?.leftMotorTemp).toFixed(1)}℃` : '-'}
+
{runningStatus?.leftMotorTemp !== undefined ? formatTemperature(Number(runningStatus?.leftMotorTemp), 1).label : '-'}
{t('devices.rtRightTemp')}
-
{runningStatus?.rightMotorTemp !== undefined ? `${Number(runningStatus?.rightMotorTemp).toFixed(1)}℃` : '-'}
+
{runningStatus?.rightMotorTemp !== undefined ? formatTemperature(Number(runningStatus?.rightMotorTemp), 1).label : '-'}
{t('devices.rtMainTemp')}
-
{runningStatus?.chipTemp !== undefined ? `${Number(runningStatus?.chipTemp).toFixed(1)}℃` : '-'}
+
{runningStatus?.chipTemp !== undefined ? formatTemperature(Number(runningStatus?.chipTemp), 1).label : '-'}
{t('devices.rtHeadingAngle')}
{runningStatus?.yaw !== undefined ? `${Number(runningStatus?.yaw).toFixed(1)}°` : '-'}
{t('devices.rtPitchAngle')}
diff --git a/src/components/devices/WayLinePage.tsx b/src/components/devices/WayLinePage.tsx
index 7437ac0..76606a8 100644
--- a/src/components/devices/WayLinePage.tsx
+++ b/src/components/devices/WayLinePage.tsx
@@ -38,6 +38,7 @@ const { RangePicker } = DatePicker;
export default function WayLinePage({ onRefresh }) {
const { t } = useTranslation();
const { userInfo } = useSelector((state: RootState) => state.user);
+ const { timezone } = useSelector((state: RootState) => state.preferences);
const { stationId } = useSelector((state: RootState) => state.station);
const { currentStation } = useSelector((state: RootState) => state.station);
@@ -325,7 +326,7 @@ export default function WayLinePage({ onRefresh }) {
days_of_month: [],
week_of_month: 1,
},
- time_zone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+ time_zone: timezone,
recurring_task_start_time_list: [],
});
@@ -389,7 +390,7 @@ export default function WayLinePage({ onRefresh }) {
task_type: 'immediate',
repeat_type: 'nonrepeating',
repeat_option: { interval: 1 },
- time_zone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+ time_zone: timezone,
begin_at: null,
end_at: null,
recurring_task_start_time_list: [],
@@ -687,7 +688,7 @@ export default function WayLinePage({ onRefresh }) {
resumable_status: 'auto',
min_battery_capacity: 50,
repeat_type: 'nonrepeating',
- time_zone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+ time_zone: timezone,
};
const res: any = await createWaylineTask(payload);
diff --git a/src/lib/dayjs.ts b/src/lib/dayjs.ts
new file mode 100644
index 0000000..574f3a0
--- /dev/null
+++ b/src/lib/dayjs.ts
@@ -0,0 +1,112 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export default dayjs;
+
+/** 在指定时区格式化时间，自动处理 DST */
+export function formatInTz(date: Date | string | number, tz: string, format: string): string {
+ try {
+ return dayjs(date).tz(tz).format(format);
+ } catch {
+ return dayjs(date).format(format);
+ }
+}
+
+/** 当前时间在指定时区的格式化结果 */
+export function nowInTz(tz: string, format: string): string {
+ return formatInTz(new Date(), tz, format);
+}
+
+/** 获取时区偏移标签，如 UTC+08:00 */
+export function getTimezoneOffsetLabel(tz: string): string {
+ try {
+ const offset = dayjs().tz(tz).utcOffset();
+ const sign = offset >= 0 ? '+' : '-';
+ const abs = Math.abs(offset);
+ const h = Math.floor(abs / 60).toString().padStart(2, '0');
+ const m = (abs % 60).toString().padStart(2, '0');
+ return `UTC${sign}${h}:${m}`;
+ } catch {
+ return 'UTC+00:00';
+ }
+}
+
+/** 判断指定时区当前是否处于夏令时 */
+export function isDST(tz: string): boolean {
+ try {
+ const now = dayjs().tz(tz);
+ // 取本年1月（北半球冬季）与本年7月（北半球夏季）的偏移量
+ const year = now.year();
+ const janOffset = dayjs.tz(dayjs(`${year}-01-15T12:00:00Z`).toISOString(), tz).utcOffset();
+ const julOffset = dayjs.tz(dayjs(`${year}-07-15T12:00:00Z`).toISOString(), tz).utcOffset();
+ const currentOffset = now.utcOffset();
+ // DST 时区夏季偏移量会大于冬季偏移量；当前偏移等于夏季偏移则为 DST
+ const summerOffset = Math.max(janOffset, julOffset);
+ const winterOffset = Math.min(janOffset, julOffset);
+ if (summerOffset === winterOffset) return false; // 无 DST 的时区
+ return currentOffset === summerOffset;
+ } catch {
+ return false;
+ }
+}
+
+export interface TimezoneOption {
+ value: string;
+ label: string;
+}
+
+/** 常用 IANA 时区列表 */
+export const TIMEZONES: TimezoneOption[] = [
+ // 亚洲
+ { value: 'Asia/Shanghai', label: '上海 (Shanghai)' },
+ { value: 'Asia/Hong_Kong', label: '香港 (Hong Kong)' },
+ { value: 'Asia/Tokyo', label: '东京 (Tokyo)' },
+ { value: 'Asia/Seoul', label: '首尔 (Seoul)' },
+ { value: 'Asia/Singapore', label: '新加坡 (Singapore)' },
+ { value: 'Asia/Bangkok', label: '曼谷 (Bangkok)' },
+ { value: 'Asia/Kolkata', label: '加尔各答 (Kolkata)' },
+ { value: 'Asia/Dubai', label: '迪拜 (Dubai)' },
+ { value: 'Asia/Taipei', label: '台北 (Taipei)' },
+ // 美洲
+ { value: 'America/New_York', label: '纽约 (New York)' },
+ { value: 'America/Chicago', label: '芝加哥 (Chicago)' },
+ { value: 'America/Denver', label: '丹佛 (Denver)' },
+ { value: 'America/Los_Angeles', label: '洛杉矶 (Los Angeles)' },
+ { value: 'America/Anchorage', label: '安克雷奇 (Anchorage)' },
+ { value: 'America/Toronto', label: '多伦多 (Toronto)' },
+ { value: 'America/Vancouver', label: '温哥华 (Vancouver)' },
+ { value: 'America/Mexico_City', label: '墨西哥城 (Mexico City)' },
+ { value: 'America/Sao_Paulo', label: '圣保罗 (São Paulo)' },
+ { value: 'America/Argentina/Buenos_Aires', label: '布宜诺斯艾利斯 (Buenos Aires)' },
+ // 欧洲
+ { value: 'Europe/London', label: '伦敦 (London)' },
+ { value: 'Europe/Paris', label: '巴黎 (Paris)' },
+ { value: 'Europe/Berlin', label: '柏林 (Berlin)' },
+ { value: 'Europe/Madrid', label: '马德里 (Madrid)' },
+ { value: 'Europe/Rome', label: '罗马 (Rome)' },
+ { value: 'Europe/Amsterdam', label: '阿姆斯特丹 (Amsterdam)' },
+ { value: 'Europe/Moscow', label: '莫斯科 (Moscow)' },
+ { value: 'Europe/Istanbul', label: '伊斯坦布尔 (Istanbul)' },
+ // 大洋洲
+ { value: 'Australia/Sydney', label: '悉尼 (Sydney)' },
+ { value: 'Australia/Perth', label: '珀斯 (Perth)' },
+ // 非洲
+ { value: 'Africa/Cairo', label: '开罗 (Cairo)' },
+ { value: 'Africa/Johannesburg', label: '约翰内斯堡 (Johannesburg)' },
+ // UTC
+ { value: 'UTC', label: 'UTC' },
+];
+
+/** 获取时区下拉选项，带 UTC 偏移标签 */
+export function getTimezoneOptions(): TimezoneOption[] {
+ return TIMEZONES.map((tz) => ({
+ value: tz.value,
+ label: `${tz.label} (${getTimezoneOffsetLabel(tz.value)})`,
+ }));
+}
diff --git a/src/lib/units.ts b/src/lib/units.ts
new file mode 100644
index 0000000..a706d28
--- /dev/null
+++ b/src/lib/units.ts
@@ -0,0 +1,104 @@
+import { useSelector } from 'react-redux';
+import type { RootState } from '../store';
+import type { UnitSystem } from '../store/preferencesSlice';
+
+/** 摄氏度转华氏度 */
+export function celsiusToFahrenheit(c: number): number {
+ return (c * 9) / 5 + 32;
+}
+
+/** 华氏度转摄氏度 */
+export function fahrenheitToCelsius(f: number): number {
+ return ((f - 32) * 5) / 9;
+}
+
+/** 公里转英里 */
+export function kmToMile(km: number): number {
+ return km * 0.621371;
+}
+
+/** 英里转公里 */
+export function mileToKm(mi: number): number {
+ return mi / 0.621371;
+}
+
+/** km/h 转 mph */
+export function kmhToMph(kmh: number): number {
+ return kmh * 0.621371;
+}
+
+export interface FormattedValue {
+ value: number;
+ unit: string;
+ label: string;
+}
+
+/** 根据单位制格式化温度（输入为摄氏度原始值） */
+export function formatTemperature(
+ celsius: number,
+ unitSystem: UnitSystem,
+ digits = 1
+): FormattedValue {
+ if (unitSystem === 'imperial') {
+ return {
+ value: Number(celsiusToFahrenheit(celsius).toFixed(digits)),
+ unit: '°F',
+ label: `${celsiusToFahrenheit(celsius).toFixed(digits)}°F`,
+ };
+ }
+ return {
+ value: Number(celsius.toFixed(digits)),
+ unit: '℃',
+ label: `${celsius.toFixed(digits)}℃`,
+ };
+}
+
+/** 根据单位制格式化距离（输入为公里原始值） */
+export function formatDistance(km: number, unitSystem: UnitSystem, digits = 1): FormattedValue {
+ if (unitSystem === 'imperial') {
+ return {
+ value: Number(kmToMile(km).toFixed(digits)),
+ unit: 'mi',
+ label: `${kmToMile(km).toFixed(digits)} mi`,
+ };
+ }
+ return {
+ value: Number(km.toFixed(digits)),
+ unit: 'km',
+ label: `${km.toFixed(digits)} km`,
+ };
+}
+
+/** 根据单位制格式化速度（输入为 km/h 原始值） */
+export function formatSpeed(kmh: number, unitSystem: UnitSystem, digits = 1): FormattedValue {
+ if (unitSystem === 'imperial') {
+ return {
+ value: Number(kmhToMph(kmh).toFixed(digits)),
+ unit: 'mph',
+ label: `${kmhToMph(kmh).toFixed(digits)} mph`,
+ };
+ }
+ return {
+ value: Number(kmh.toFixed(digits)),
+ unit: 'km/h',
+ label: `${kmh.toFixed(digits)} km/h`,
+ };
+}
+
+export interface UnitFormatter {
+ unitSystem: UnitSystem;
+ formatTemperature: (celsius: number, digits?: number) => FormattedValue;
+ formatDistance: (km: number, digits?: number) => FormattedValue;
+ formatSpeed: (kmh: number, digits?: number) => FormattedValue;
+}
+
+/** React hook: 从 preferencesSlice 读取 unitSystem，返回绑定好的格式化函数 */
+export function useUnitFormatter(): UnitFormatter {
+ const unitSystem = useSelector((state: RootState) => state.preferences.unitSystem);
+ return {
+ unitSystem,
+ formatTemperature: (celsius: number, digits = 1) => formatTemperature(celsius, unitSystem, digits),
+ formatDistance: (km: number, digits = 1) => formatDistance(km, unitSystem, digits),
+ formatSpeed: (kmh: number, digits = 1) => formatSpeed(kmh, unitSystem, digits),
+ };
+}
diff --git a/src/locales/en/index.ts b/src/locales/en/index.ts
index 5cc9e6a..b381f72 100644
--- a/src/locales/en/index.ts
+++ b/src/locales/en/index.ts
@@ -2559,6 +2559,17 @@
longitude: 'Longitude',
latitude: 'Latitude',
timezone: 'Timezone',
+ regionalSettings: 'Regional Settings',
+ unitSystem: 'Unit System',
+ metric: 'Metric',
+ imperial: 'Imperial',
+ timezoneSelect: 'Timezone',
+ daylightSavingTime: 'Daylight Saving Time',
+ dstActive: 'DST Active',
+ dstInactive: 'DST Inactive',
+ dateFormat: 'Date Format',
+ unitCelsius: 'Celsius',
+ unitFahrenheit: 'Fahrenheit',
logType: 'Log Type',
loginLog: 'Login Log',
operationLog: 'Operation Log',
diff --git a/src/locales/zh/index.ts b/src/locales/zh/index.ts
index c4b195a..7b2517f 100644
--- a/src/locales/zh/index.ts
+++ b/src/locales/zh/index.ts
@@ -2602,6 +2602,17 @@ const zh = {
longitude: '经度',
latitude: '纬度',
timezone: '时区',
+ regionalSettings: '区域配置',
+ unitSystem: '单位制',
+ metric: '公制',
+ imperial: '英制',
+ timezoneSelect: '时区选择',
+ daylightSavingTime: '夏令时',
+ dstActive: '当前处于夏令时',
+ dstInactive: '当前非夏令时',
+ dateFormat: '日期格式',
+ unitCelsius: '摄氏度',
+ unitFahrenheit: '华氏度',
// 日志管理
logType: '日志类型',
loginLog: '登录日志',
diff --git a/src/pages/RealTimeMonitor.tsx b/src/pages/RealTimeMonitor.tsx
index a8c8adc..75500ff 100644
--- a/src/pages/RealTimeMonitor.tsx
+++ b/src/pages/RealTimeMonitor.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import {
Card, Row, Col, Table, Select, Input, Tag,
Typography, Button, Space, Avatar, Pagination,
@@ -101,6 +101,7 @@ const RealTimeMonitorPage = () => {
const { modal } = App.useApp();
const { stationId, currentStation } = useSelector((state: any) => state.station);
const { userInfo } = useSelector((state: any) => state.user);
+ const { timezone } = useSelector((state: any) => state.preferences);
const [filterStatus, setFilterStatus] = useState('all');
const [filterType, setFilterType] = useState('all');
@@ -689,7 +690,7 @@ const RealTimeMonitorPage = () => {
resumable_status: 'auto',
min_battery_capacity: 50,
repeat_type: 'nonrepeating',
- time_zone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+ time_zone: timezone,
};
const res = await createWaylineTask(payload);
if (res?.code === 200 || res?.code === 0) {
diff --git a/src/store/index.ts b/src/store/index.ts
index 42f6d22..1afb030 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -4,11 +4,13 @@ import { useDispatch } from 'react-redux';
// 👇 保留 import，但是把类型定义放到 store 后面
import userReducer from './userSlice';
import stationReducer from './stationSlice'; // 👈 加这个
+import preferencesReducer from './preferencesSlice';
export const store = configureStore({
reducer: {
user: userReducer,
station: stationReducer, // 👈 加这个
+ preferences: preferencesReducer,
},
});
diff --git a/src/store/preferencesSlice.ts b/src/store/preferencesSlice.ts
new file mode 100644
index 0000000..35ce3a0
--- /dev/null
+++ b/src/store/preferencesSlice.ts
@@ -0,0 +1,111 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export type Locale = 'zh' | 'en';
+export type UnitSystem = 'metric' | 'imperial';
+export type DateFormat = 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm' | 'MM/DD/YYYY HH:mm:ss';
+
+export interface PreferencesState {
+ locale: Locale;
+ timezone: string;
+ unitSystem: UnitSystem;
+ dateFormat: DateFormat;
+}
+
+const STORAGE_KEY = 'preferences';
+
+const detectBrowserTimezone = (): string => {
+ try {
+ return Intl.DateTimeFormat().resolvedOptions().timeZone || 'Asia/Shanghai';
+ } catch {
+ return 'Asia/Shanghai';
+ }
+};
+
+const detectLocale = (): Locale => {
+ const stored = localStorage.getItem('i18nextLng');
+ if (stored?.startsWith('en')) return 'en';
+ return 'zh';
+};
+
+const loadFromStorage = (): PreferencesState => {
+ try {
+ const raw = localStorage.getItem(STORAGE_KEY);
+ if (raw) {
+ const parsed = JSON.parse(raw) as Partial
;
+ return {
+ locale: parsed.locale === 'en' ? 'en' : 'zh',
+ timezone: parsed.timezone || detectBrowserTimezone(),
+ unitSystem: parsed.unitSystem === 'imperial' ? 'imperial' : 'metric',
+ dateFormat: (parsed.dateFormat as DateFormat) || 'YYYY-MM-DD HH:mm:ss',
+ };
+ }
+ } catch {
+ // ignore
+ }
+ return {
+ locale: detectLocale(),
+ timezone: detectBrowserTimezone(),
+ unitSystem: 'metric',
+ dateFormat: 'YYYY-MM-DD HH:mm:ss',
+ };
+};
+
+const persist = (state: PreferencesState) => {
+ try {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+ } catch {
+ // ignore
+ }
+};
+
+const initialState: PreferencesState = loadFromStorage();
+persist(initialState);
+
+const preferencesSlice = createSlice({
+ name: 'preferences',
+ initialState,
+ reducers: {
+ setLocale: (state, action: PayloadAction) => {
+ state.locale = action.payload;
+ persist(state);
+ },
+ setTimezone: (state, action: PayloadAction) => {
+ state.timezone = action.payload;
+ persist(state);
+ },
+ setUnitSystem: (state, action: PayloadAction) => {
+ state.unitSystem = action.payload;
+ persist(state);
+ },
+ setDateFormat: (state, action: PayloadAction) => {
+ state.dateFormat = action.payload;
+ persist(state);
+ },
+ setPreferences: (state, action: PayloadAction>) => {
+ const { locale, timezone, unitSystem, dateFormat } = action.payload;
+ if (locale) state.locale = locale;
+ if (timezone) state.timezone = timezone;
+ if (unitSystem) state.unitSystem = unitSystem;
+ if (dateFormat) state.dateFormat = dateFormat;
+ persist(state);
+ },
+ resetPreferences: (state) => {
+ state.locale = detectLocale();
+ state.timezone = detectBrowserTimezone();
+ state.unitSystem = 'metric';
+ state.dateFormat = 'YYYY-MM-DD HH:mm:ss';
+ persist(state);
+ },
+ },
+});
+
+export const {
+ setLocale,
+ setTimezone,
+ setUnitSystem,
+ setDateFormat,
+ setPreferences,
+ resetPreferences,
+} = preferencesSlice.actions;
+
+export default preferencesSlice.reducer;