From b938b4246353e70f8c01fa2a7009c0d4749f133f Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Fri, 16 Oct 2026 02:42:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=B8=83=E5=B1=80=E8=AF=AD?=
 =?UTF-8?q?=E6=B3=95=E4=BF=AE=E5=A4=8D=E5=89=8D=E6=A3=80=E6=9F=A5=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

保存本轮桌面端操作区统一水平排列和垂直对齐的当前实现，后续仅修复 CSS 语法警告。
---
 frontend/src/main-app.js              |   1 +
 frontend/src/styles/action-layout.css | 191 ++++++++++++++++++++++++++
 2 files changed, 192 insertions(+)
 create mode 100644 frontend/src/styles/action-layout.css

diff --git a/frontend/src/main-app.js b/frontend/src/main-app.js
index cecdaac..c6505bc 100644
--- a/frontend/src/main-app.js
+++ b/frontend/src/main-app.js
@@ -8,6 +8,7 @@ import { createRouteAssetRecovery, isReadOnlyRoute, isRouteAssetLoadError } from
 
 import './styles/element-services.css'
 import './assets/main.css'
+import './styles/action-layout.css'
 
 const isReservedResetPath = (pathname) => {
   let decoded = pathname.trim()
diff --git a/frontend/src/styles/action-layout.css b/frontend/src/styles/action-layout.css
new file mode 100644
index 0000000..76e8de9
--- /dev/null
+++ b/frontend/src/styles/action-layout.css
@@ -0,0 +1,191 @@
+/* 统一桌面端操作区：按钮横向排列、垂直居中，移动端保留页面自身布局。 */
+:where(
+  .action-row,
+  .overview-actions,
+  .form-actions,
+  .row-actions,
+  .dialog-footer,
+  .recovery-dialog-actions,
+  .external-dialog-actions,
+  .relay-item-actions,
+  .relay-editor-actions,
+  .totp-actions,
+  .telegram-actions,
+  .telegram-buttons,
+  .telegram-callback-actions,
+  .wechat-buttons,
+  .spam-actions,
+  .header-actions,
+  .selection-actions,
+  .composer-actions,
+  .mail-detail-state-actions,
+  .admin-recovery-actions,
+  .public-recovery-actions,
+  .verification-actions,
+  .log-page-actions,
+  .group-toolbar,
+  .credential-actions,
+  .config-pagination,
+) {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+:where(
+  .action-row,
+  .overview-actions,
+  .form-actions,
+  .row-actions,
+  .dialog-footer,
+  .recovery-dialog-actions,
+  .external-dialog-actions,
+  .relay-item-actions,
+  .relay-editor-actions,
+  .totp-actions,
+  .telegram-actions,
+  .telegram-buttons,
+  .telegram-callback-actions,
+  .wechat-buttons,
+  .spam-actions,
+  .header-actions,
+  .selection-actions,
+  .composer-actions,
+  .mail-detail-state-actions,
+  .admin-recovery-actions,
+  .public-recovery-actions,
+  .verification-actions,
+  .log-page-actions,
+  .group-toolbar,
+  .config-pagination,
+) > .el-button,
+:where(
+  .action-row,
+  .overview-actions,
+  .form-actions,
+  .row-actions,
+  .dialog-footer,
+  .recovery-dialog-actions,
+  .external-dialog-actions,
+  .relay-item-actions,
+  .relay-editor-actions,
+  .totp-actions,
+  .telegram-actions,
+  .telegram-buttons,
+  .telegram-callback-actions,
+  .wechat-buttons,
+  .spam-actions,
+  .header-actions,
+  .selection-actions,
+  .composer-actions,
+  .mail-detail-state-actions,
+  .admin-recovery-actions,
+  .public-recovery-actions,
+  .verification-actions,
+  .log-page-actions,
+  .group-toolbar,
+  .credential-actions,
+  .config-pagination,
+) .el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: 0 !important;
+  vertical-align: middle;
+}
+
+@media (min-width: 769px) {
+  :where(
+    .action-row,
+    .overview-actions,
+    .form-actions,
+    .row-actions,
+    .dialog-footer,
+    .recovery-dialog-actions,
+    .external-dialog-actions,
+    .relay-item-actions,
+    .relay-editor-actions,
+    .totp-actions,
+    .telegram-actions,
+    .telegram-buttons,
+    .telegram-callback-actions,
+    .wechat-buttons,
+    .spam-actions,
+    .header-actions,
+    .selection-actions,
+    .composer-actions,
+    .mail-detail-state-actions,
+    .admin-recovery-actions,
+    .public-recovery-actions,
+    .verification-actions,
+    .log-page-actions,
+    .group-toolbar,
+    .credential-actions,
+    .config-pagination,
+    ) {
+    flex-direction: row;
+    flex-wrap: nowrap !important;
+  }
+
+  :where(
+    .action-row,
+    .overview-actions,
+    .form-actions,
+    .row-actions,
+    .dialog-footer,
+    .recovery-dialog-actions,
+    .external-dialog-actions,
+    .relay-item-actions,
+    .relay-editor-actions,
+    .totp-actions,
+    .telegram-actions,
+    .telegram-buttons,
+    .telegram-callback-actions,
+    .wechat-buttons,
+    .spam-actions,
+    .header-actions,
+    .selection-actions,
+    .composer-actions,
+    .mail-detail-state-actions,
+    .admin-recovery-actions,
+    .public-recovery-actions,
+    .verification-actions,
+    .log-page-actions,
+    .group-toolbar,
+    .credential-actions,
+    .config-pagination,
+    ) > .el-button,
+  :where(
+    .action-row,
+    .overview-actions,
+    .form-actions,
+    .row-actions,
+    .dialog-footer,
+    .recovery-dialog-actions,
+    .external-dialog-actions,
+    .relay-item-actions,
+    .relay-editor-actions,
+    .totp-actions,
+    .telegram-actions,
+    .telegram-buttons,
+    .telegram-callback-actions,
+    .wechat-buttons,
+    .spam-actions,
+    .header-actions,
+    .selection-actions,
+    .composer-actions,
+    .mail-detail-state-actions,
+    .admin-recovery-actions,
+    .public-recovery-actions,
+    .verification-actions,
+    .log-page-actions,
+    .group-toolbar,
+    .credential-actions,
+    .config-pagination,
+    ) .el-button {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+}