From 2afa1d573c87dcdc6c58780797ff3c327bd8742b Mon Sep 17 00:00:00 2001 From: smail Date: Thu, 15 Oct 2026 22:26:21 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20Telegram=20=E5=92=8C?= =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E9=80=9A=E7=9F=A5=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 统一宽窄非移动端的标题、绑定信息、开关表单和操作按钮布局，避免文字挤压与控件变形。 --- .../TelegramSettings/TelegramSettings.css | 87 ++++++++++++++----- .../WeChatSettings/WeChatSettings.css | 84 +++++++++++++----- 2 files changed, 128 insertions(+), 43 deletions(-) diff --git a/frontend/src/views/components/PluginSettings/TelegramSettings/TelegramSettings.css b/frontend/src/views/components/PluginSettings/TelegramSettings/TelegramSettings.css index 365bb9d..465efef 100644 --- a/frontend/src/views/components/PluginSettings/TelegramSettings/TelegramSettings.css +++ b/frontend/src/views/components/PluginSettings/TelegramSettings/TelegramSettings.css @@ -1,22 +1,22 @@ .telegram-settings { + display: grid; + gap: 16px; width: 100%; max-width: none; min-width: 0; box-sizing: border-box; - padding: 16px; + padding: 16px 16px 20px; } .telegram-header { - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; align-items: center; - justify-content: space-between; - gap: 16px; - margin-bottom: 20px; + gap: 12px; } .telegram-header h4 { - margin: 0 0 8px; + margin: 0; font-size: 18px; } @@ -28,12 +28,16 @@ word-break: normal; } +.telegram-header p { + margin: 6px 0 0; +} + .telegram-header a { color: var(--el-color-primary); } .telegram-settings .el-alert { - margin-bottom: 20px; + margin: 0; } .telegram-actions, @@ -46,7 +50,8 @@ } .telegram-actions { - margin-top: 20px; + justify-content: flex-end; + margin-top: 0; } .telegram-actions .el-button, @@ -62,19 +67,38 @@ .telegram-settings :deep(.el-form-item) { min-width: 0; margin-bottom: 0; + padding: 10px 12px; + border: 1px solid var(--el-border-color-lighter); + border-radius: 8px; + background: var(--el-fill-color-blank); +} + +.telegram-settings :deep(.el-form-item__label) { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .telegram-identity { - padding: 16px; - margin-bottom: 20px; + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + padding: 14px; + margin: 0; border: 1px solid var(--el-border-color-light); border-radius: 8px; + background: var(--el-fill-color-blank); } .telegram-identity strong { - flex: 1; - min-width: 100px; - overflow-wrap: anywhere; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.telegram-hint { + margin: -4px 0 0; } .telegram-binding { @@ -112,14 +136,13 @@ @container config-main (max-width: 420px) { .telegram-settings { - padding: 10px 4px; + gap: 12px; + padding: 10px 4px 14px; } .telegram-header { - align-items: flex-start; - flex-direction: column; - gap: 8px; - margin-bottom: 14px; + align-items: start; + gap: 8px 10px; } .telegram-settings :deep(.el-form) { @@ -128,10 +151,23 @@ } .telegram-identity { - align-items: flex-start; - flex-direction: column; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; padding: 12px; - margin-bottom: 14px; + gap: 8px 10px; + } + + .telegram-identity .telegram-hint, + .telegram-identity strong { + grid-column: 1; + } + + .telegram-identity .telegram-hint { + grid-row: 1; + } + + .telegram-identity strong { + grid-row: 2; } .telegram-buttons, @@ -139,8 +175,13 @@ width: 100%; } + .telegram-identity .telegram-buttons { + grid-column: 1 / -1; + } + .telegram-buttons .el-button, .telegram-actions .el-button { - flex: 1 1 auto; + flex: 1 1 0; + min-width: 0; } } diff --git a/frontend/src/views/components/PluginSettings/WeChatSettings/WeChatSettings.css b/frontend/src/views/components/PluginSettings/WeChatSettings/WeChatSettings.css index 7927eb9..6d01fd5 100644 --- a/frontend/src/views/components/PluginSettings/WeChatSettings/WeChatSettings.css +++ b/frontend/src/views/components/PluginSettings/WeChatSettings/WeChatSettings.css @@ -1,9 +1,11 @@ .wechat-settings { + display: grid; + gap: 16px; width: 100%; max-width: none; min-width: 0; box-sizing: border-box; - padding: 16px; + padding: 16px 16px 20px; } .wechat-header, @@ -16,12 +18,13 @@ } .wechat-header { - justify-content: space-between; - margin-bottom: 20px; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 12px; } .wechat-header h4 { - margin: 0 0 8px; + margin: 0; font-size: 18px; } @@ -35,24 +38,28 @@ } .wechat-header p { - margin: 0; + margin: 6px 0 0; } .wechat-settings .el-alert { - margin-bottom: 16px; + margin: 0; } .wechat-identity { - padding: 16px; - margin-bottom: 20px; + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + padding: 14px; + margin: 0; border: 1px solid var(--el-border-color-light); border-radius: 8px; + background: var(--el-fill-color-blank); } .wechat-identity strong { - flex: 1; - min-width: 100px; - overflow-wrap: anywhere; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .wechat-buttons .el-button { @@ -67,6 +74,26 @@ .wechat-settings :deep(.el-form-item) { margin-bottom: 0; + padding: 10px 12px; + border: 1px solid var(--el-border-color-lighter); + border-radius: 8px; + background: var(--el-fill-color-blank); +} + +.wechat-settings :deep(.el-form-item__label) { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wechat-hint { + margin: -4px 0 0; +} + +.wechat-settings > .wechat-buttons { + justify-content: flex-end; + margin-top: 0; } .wechat-binding { @@ -100,14 +127,13 @@ @container config-main (max-width: 420px) { .wechat-settings { - padding: 10px 4px; + gap: 12px; + padding: 10px 4px 14px; } .wechat-header { - align-items: flex-start; - flex-direction: column; - gap: 8px; - margin-bottom: 14px; + align-items: start; + gap: 8px 10px; } .wechat-settings :deep(.el-form) { @@ -116,17 +142,35 @@ } .wechat-identity { - align-items: flex-start; - flex-direction: column; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; padding: 12px; - margin-bottom: 14px; + gap: 8px 10px; + } + + .wechat-identity .wechat-label, + .wechat-identity strong { + grid-column: 1; + } + + .wechat-identity .wechat-label { + grid-row: 1; + } + + .wechat-identity strong { + grid-row: 2; } .wechat-buttons { width: 100%; } + .wechat-identity .wechat-buttons { + grid-column: 1 / -1; + } + .wechat-buttons .el-button { - flex: 1 1 auto; + flex: 1 1 0; + min-width: 0; } }