From af36f6fb2d43f07efbfffb644e3faf05a44c28d3 Mon Sep 17 00:00:00 2001 From: Supra4E8C Date: Fri, 27 Mar 2026 19:47:41 +0800 Subject: [PATCH] fix(config): keep mobile action status visible --- src/i18n/locales/en.json | 8 ++++++++ src/i18n/locales/ru.json | 8 ++++++++ src/i18n/locales/zh-CN.json | 8 ++++++++ src/pages/ConfigPage.module.scss | 17 ++++++++++++++++- src/pages/ConfigPage.tsx | 25 ++++++++++++++++++++++++- 5 files changed, 64 insertions(+), 2 deletions(-) diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index d5abdd3..3d8ddfd 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -1133,16 +1133,24 @@ "description": "Edit config.yaml via visual editor or source file", "status_idle": "Waiting for action", "status_loading": "Loading configuration...", + "status_loading_short": "Loading", "status_loaded": "Configuration loaded", + "status_loaded_short": "Loaded", "status_dirty": "Unsaved changes", + "status_dirty_short": "Unsaved", "status_disconnected": "Connect to the server to load the configuration", + "status_disconnected_short": "Disconnected", "status_load_failed": "Load failed", + "status_load_failed_short": "Failed", "status_saving": "Saving configuration...", + "status_saving_short": "Saving", "status_saved": "Configuration saved", "status_save_failed": "Save failed", "save_success": "Configuration saved successfully", "error_yaml_not_supported": "Server did not return YAML. Verify the /config.yaml endpoint is available.", "visual_mode_unavailable": "Visual editor unavailable until YAML syntax is fixed", + "visual_mode_unavailable_short": "YAML issue", + "validation_blocked_short": "Fix errors", "visual_mode_unavailable_detail": "Visual editor is unavailable because the configuration contains invalid YAML: {{message}}", "visual_mode_save_blocked": "Cannot save from visual mode until the YAML syntax is fixed", "visual_mode_latest_yaml_invalid": "The latest server configuration contains invalid YAML. Review it in source mode before saving visual changes: {{message}}", diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json index 5e3ed62..a3edcff 100644 --- a/src/i18n/locales/ru.json +++ b/src/i18n/locales/ru.json @@ -1136,16 +1136,24 @@ "description": "Редактируйте config.yaml через визуальный редактор или исходный файл", "status_idle": "Ожидание действия", "status_loading": "Загрузка конфигурации...", + "status_loading_short": "Загрузка", "status_loaded": "Конфигурация загружена", + "status_loaded_short": "Загружено", "status_dirty": "Есть несохранённые изменения", + "status_dirty_short": "Несохранено", "status_disconnected": "Подключитесь к серверу, чтобы загрузить конфигурацию", + "status_disconnected_short": "Нет связи", "status_load_failed": "Не удалось загрузить", + "status_load_failed_short": "Ошибка", "status_saving": "Сохранение конфигурации...", + "status_saving_short": "Сохранение", "status_saved": "Конфигурация сохранена", "status_save_failed": "Не удалось сохранить", "save_success": "Конфигурация успешно сохранена", "error_yaml_not_supported": "Сервер не вернул YAML. Убедитесь, что доступна конечная точка /config.yaml.", "visual_mode_unavailable": "Визуальный редактор недоступен, пока не исправлен синтаксис YAML", + "visual_mode_unavailable_short": "Ошибка YAML", + "validation_blocked_short": "Есть ошибки", "visual_mode_unavailable_detail": "Визуальный редактор недоступен, потому что в конфигурации есть некорректный YAML: {{message}}", "visual_mode_save_blocked": "Нельзя сохранять из визуального режима, пока не исправлен синтаксис YAML", "visual_mode_latest_yaml_invalid": "Последняя конфигурация на сервере содержит некорректный YAML. Проверьте её в режиме исходника перед сохранением визуальных изменений: {{message}}", diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json index c18895b..bd66eab 100644 --- a/src/i18n/locales/zh-CN.json +++ b/src/i18n/locales/zh-CN.json @@ -1133,16 +1133,24 @@ "description": "通过可视化或者源文件方式编辑 config.yaml 配置文件", "status_idle": "等待操作", "status_loading": "加载配置中...", + "status_loading_short": "加载中", "status_loaded": "配置已加载", + "status_loaded_short": "已加载", "status_dirty": "有未保存的更改", + "status_dirty_short": "未保存", "status_disconnected": "请先连接服务器以加载配置", + "status_disconnected_short": "未连接", "status_load_failed": "加载失败", + "status_load_failed_short": "失败", "status_saving": "正在保存配置...", + "status_saving_short": "保存中", "status_saved": "配置保存完成", "status_save_failed": "保存失败", "save_success": "配置已保存", "error_yaml_not_supported": "服务器未返回 YAML 格式，请确认 /config.yaml 接口可用", "visual_mode_unavailable": "YAML 语法修复前无法使用可视化编辑", + "visual_mode_unavailable_short": "YAML错误", + "validation_blocked_short": "待修复", "visual_mode_unavailable_detail": "当前配置存在无效 YAML，暂时无法使用可视化编辑：{{message}}", "visual_mode_save_blocked": "请先修复 YAML 语法错误，再从可视化模式保存", "visual_mode_latest_yaml_invalid": "服务端最新配置包含无效 YAML，请先切回源码模式检查后再保存可视化修改：{{message}}", diff --git a/src/pages/ConfigPage.module.scss b/src/pages/ConfigPage.module.scss index 3aa3763..9082414 100644 --- a/src/pages/ConfigPage.module.scss +++ b/src/pages/ConfigPage.module.scss @@ -440,6 +440,7 @@ .floatingStatus { display: inline-flex; align-items: center; + min-width: 0; min-height: 28px; padding: 0 10px; border-radius: 999px; @@ -455,6 +456,12 @@ text-overflow: ellipsis; } +.floatingStatusCompact { + max-width: 112px; + padding: 0 8px; + font-size: 10px; +} + .floatingActionButton { @include button-reset; position: relative; @@ -509,7 +516,9 @@ } .floatingStatus { - display: none; + max-width: min(180px, 40vw); + font-size: 10px; + padding: 0 8px; } .floatingActionButton { @@ -519,6 +528,12 @@ } } +@media (max-width: 480px) { + .floatingStatus { + max-width: min(132px, 38vw); + } +} + @media (max-width: 380px) { .pageHeader, .workspaceShell { diff --git a/src/pages/ConfigPage.tsx b/src/pages/ConfigPage.tsx index 785f4ea..08c194b 100644 --- a/src/pages/ConfigPage.tsx +++ b/src/pages/ConfigPage.tsx @@ -18,6 +18,7 @@ import { } from '@/components/ui/icons'; import { VisualConfigEditor } from '@/components/config/VisualConfigEditor'; import { DiffModal } from '@/components/config/DiffModal'; +import { useMediaQuery } from '@/hooks/useMediaQuery'; import { useVisualConfig } from '@/hooks/useVisualConfig'; import { useNotificationStore, useAuthStore, useThemeStore } from '@/stores'; import { configFileApi } from '@/services/api/configFile'; @@ -43,6 +44,7 @@ export function ConfigPage() { const showConfirmation = useNotificationStore((state) => state.showConfirmation); const connectionStatus = useAuthStore((state) => state.connectionStatus); const resolvedTheme = useThemeStore((state) => state.resolvedTheme); + const isMobile = useMediaQuery('(max-width: 768px)'); const { visualValues, @@ -411,6 +413,21 @@ export function ConfigPage() { return ''; }; + const getFloatingStatusText = () => { + if (!isMobile) return getStatusText(); + if (disableControls) + return t('config_management.status_disconnected_short', { defaultValue: 'Disconnected' }); + if (loading) return t('config_management.status_loading_short', { defaultValue: 'Loading' }); + if (error) return t('config_management.status_load_failed_short', { defaultValue: 'Failed' }); + if (hasVisualModeError) + return t('config_management.visual_mode_unavailable_short', { defaultValue: 'YAML issue' }); + if (hasVisualValidationErrors) + return t('config_management.visual.validation_blocked_short', { defaultValue: 'Fix errors' }); + if (saving) return t('config_management.status_saving_short', { defaultValue: 'Saving' }); + if (isDirty) return t('config_management.status_dirty_short', { defaultValue: 'Unsaved' }); + return t('config_management.status_loaded_short', { defaultValue: 'Loaded' }); + }; + const handleReload = useCallback(() => { if (!isDirty) { void loadConfig(); @@ -432,7 +449,13 @@ export function ConfigPage() { const floatingActions = (
-
{getStatusText()}
+
+ {getFloatingStatusText()} +