mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-09-24 16:04:35 +08:00
feat(config): add simple/full editor modes and task-oriented sections
Default to a compact simple mode that surfaces only high-frequency fields (port, API keys, proxy, debug, log-to-file, quota fallbacks). Full mode reorganizes the visual editor into 7 task-oriented sections (connectivity, network, logging, quota, streaming, advanced, payload), promoting network to top level and collapsing TLS/remote, the advanced group, and each payload rule group by default. Mode choice persists in localStorage. Presentation-only: field semantics, onChange, and YAML sync are unchanged.
This commit is contained in:
LTbinglingfeng
@@ -140,6 +140,9 @@
|
||||
.overviewHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
|
||||
@include mobile {
|
||||
@@ -172,6 +175,117 @@
|
||||
background: var(--warning-bg);
|
||||
}
|
||||
|
||||
.modeSwitch {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
padding: 3px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.modeButton {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 30px;
|
||||
padding: 0 12px;
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.modeButtonActive {
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 10%, transparent);
|
||||
}
|
||||
|
||||
.simpleView {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
max-width: 760px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.simpleForm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.simpleBanner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--warning-border);
|
||||
border-radius: 8px;
|
||||
background: var(--warning-bg);
|
||||
color: var(--warning-text);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.simpleBannerAction {
|
||||
@include button-reset;
|
||||
flex: 0 0 auto;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--warning-border);
|
||||
border-radius: 6px;
|
||||
color: var(--warning-text);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
transition: background-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in srgb, var(--warning-text) 10%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.simpleMore {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
min-height: 46px;
|
||||
padding: 12px 16px;
|
||||
border: 1px dashed var(--border-color);
|
||||
border-radius: 8px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
border-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--text-primary);
|
||||
color: var(--text-primary);
|
||||
background: color-mix(in srgb, var(--text-primary) 4%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.workspace {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -909,7 +909,28 @@
|
||||
"visual": {
|
||||
"notice": "Visual mode covers common fields. Review or edit unsupported config.yaml entries in source mode.",
|
||||
"quick_jump": "Quick Jump",
|
||||
"mode": {
|
||||
"simple": "Simple",
|
||||
"full": "Full",
|
||||
"label": "Editor mode",
|
||||
"more_settings": "Switch to full mode to see all {{total}} sections",
|
||||
"validation_banner": "Some advanced settings have validation errors and are blocking save. Switch to full mode to fix them.",
|
||||
"switch_to_full": "Switch to full mode"
|
||||
},
|
||||
"sections": {
|
||||
"connectivity": {
|
||||
"title": "Access & Authentication",
|
||||
"description": "Server address, port, auth directory, and API keys"
|
||||
},
|
||||
"logging": {
|
||||
"title": "Logging & Diagnostics",
|
||||
"description": "Debug, log output, and usage statistics"
|
||||
},
|
||||
"advanced": {
|
||||
"title": "Advanced & Experimental",
|
||||
"description": "Header spoofing, signature cache, plugin sources, and other rarely changed settings",
|
||||
"disclosure": "Show advanced & experimental settings (hidden by default)"
|
||||
},
|
||||
"server": {
|
||||
"title": "Server Configuration",
|
||||
"description": "Basic server settings",
|
||||
|
||||
@@ -896,7 +896,28 @@
|
||||
"visual": {
|
||||
"notice": "Визуальный режим охватывает основные поля. Остальные параметры config.yaml по-прежнему нужно проверять или редактировать в режиме исходника.",
|
||||
"quick_jump": "Быстрый переход",
|
||||
"mode": {
|
||||
"simple": "Простой",
|
||||
"full": "Полный",
|
||||
"label": "Режим редактора",
|
||||
"more_settings": "Переключитесь в полный режим, чтобы увидеть все разделы ({{total}})",
|
||||
"validation_banner": "В некоторых дополнительных параметрах есть ошибки проверки, сохранение заблокировано. Переключитесь в полный режим, чтобы исправить их.",
|
||||
"switch_to_full": "Перейти в полный режим"
|
||||
},
|
||||
"sections": {
|
||||
"connectivity": {
|
||||
"title": "Доступ и аутентификация",
|
||||
"description": "Адрес сервера, порт, каталог аутентификации и ключи API"
|
||||
},
|
||||
"logging": {
|
||||
"title": "Логи и диагностика",
|
||||
"description": "Отладка, вывод логов и статистика использования"
|
||||
},
|
||||
"advanced": {
|
||||
"title": "Дополнительно и эксперименты",
|
||||
"description": "Подмена заголовков, кэш подписей, источники плагинов и другие редко изменяемые настройки",
|
||||
"disclosure": "Показать дополнительные и экспериментальные настройки (скрыты по умолчанию)"
|
||||
},
|
||||
"server": {
|
||||
"title": "Настройки сервера",
|
||||
"description": "Базовые параметры сервера",
|
||||
|
||||
@@ -909,7 +909,28 @@
|
||||
"visual": {
|
||||
"notice": "可视化模式覆盖常用字段，未覆盖的配置仍需在源文件模式中查看或编辑。",
|
||||
"quick_jump": "快速跳转",
|
||||
"mode": {
|
||||
"simple": "简单",
|
||||
"full": "完整",
|
||||
"label": "编辑模式",
|
||||
"more_settings": "切换到完整模式，查看全部 {{total}} 个配置分区",
|
||||
"validation_banner": "部分高级配置项存在校验错误，已阻止保存。请切换到完整模式进行修复。",
|
||||
"switch_to_full": "切换完整模式"
|
||||
},
|
||||
"sections": {
|
||||
"connectivity": {
|
||||
"title": "接入与认证",
|
||||
"description": "服务地址、端口、认证目录与 API 密钥"
|
||||
},
|
||||
"logging": {
|
||||
"title": "日志与诊断",
|
||||
"description": "调试、日志输出与使用统计"
|
||||
},
|
||||
"advanced": {
|
||||
"title": "高级与实验",
|
||||
"description": "请求头伪装、签名缓存、插件源等不常修改的设置",
|
||||
"disclosure": "展开高级与实验配置（默认隐藏）"
|
||||
},
|
||||
"server": {
|
||||
"title": "服务器配置",
|
||||
"description": "基础服务器设置",
|
||||
|
||||
@@ -935,7 +935,28 @@
|
||||
"visual": {
|
||||
"notice": "視覺化模式涵蓋常用欄位，未涵蓋的設定仍需在原始檔模式中查看或編輯。",
|
||||
"quick_jump": "快速跳轉",
|
||||
"mode": {
|
||||
"simple": "簡單",
|
||||
"full": "完整",
|
||||
"label": "編輯模式",
|
||||
"more_settings": "切換到完整模式，檢視全部 {{total}} 個設定分區",
|
||||
"validation_banner": "部分進階設定項存在驗證錯誤，已阻止儲存。請切換到完整模式進行修正。",
|
||||
"switch_to_full": "切換完整模式"
|
||||
},
|
||||
"sections": {
|
||||
"connectivity": {
|
||||
"title": "接入與認證",
|
||||
"description": "服務位址、連接埠、認證目錄與 API 金鑰"
|
||||
},
|
||||
"logging": {
|
||||
"title": "日誌與診斷",
|
||||
"description": "除錯、日誌輸出與使用統計"
|
||||
},
|
||||
"advanced": {
|
||||
"title": "進階與實驗",
|
||||
"description": "請求標頭偽裝、簽章快取、外掛來源等不常修改的設定",
|
||||
"disclosure": "展開進階與實驗設定（預設隱藏）"
|
||||
},
|
||||
"server": {
|
||||
"title": "伺服器設定",
|
||||
"description": "基本伺服器設定",
|
||||
|
||||
Reference in New Issue
Block a user