From f2f3bad9efa47083341fa1a6f354d8469e80f13c Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Mon, 9 Jun 2025 18:22:18 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20refactor:=20reorganize=20log=20t?=
 =?UTF-8?q?ype=20selector=20layout=20with=20responsive=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move Form.Select (log type selector) from grid layout to action button row
- Position log type selector on the left side of the action button area
- Keep action buttons (Query, Reset, Column Settings) aligned to the right
- Implement responsive design with sm: breakpoint (640px)
  - Mobile: vertical stacking with full-width elements
  - Desktop: horizontal layout with proper spacing
- Add min-width constraint (140px) for log type selector
- Remove extra padding-top from button area for cleaner spacing
- Maintain accessibility and usability across all screen sizes

This change improves the UI layout by better utilizing horizontal space
and providing a more intuitive grouping of form controls and actions.
---
 web/src/components/table/LogsTable.js     | 51 ++++++++++++-----------
 web/src/components/table/MjLogsTable.js   |  2 +-
 web/src/components/table/TaskLogsTable.js |  2 +-
 3 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/web/src/components/table/LogsTable.js b/web/src/components/table/LogsTable.js
index b234f098..65af55b3 100644
--- a/web/src/components/table/LogsTable.js
+++ b/web/src/components/table/LogsTable.js
@@ -1241,28 +1241,6 @@ const LogsTable = () => {
                     />
                   </div>
 
-                  {/* 日志类型选择器 */}
-                  <Form.Select
-                    field='logType'
-                    placeholder={t('日志类型')}
-                    className='!rounded-full'
-                    showClear
-                    pure
-                    onChange={() => {
-                      // 延迟执行搜索，让表单值先更新
-                      setTimeout(() => {
-                        refresh();
-                      }, 0);
-                    }}
-                  >
-                    <Form.Select.Option value='0'>{t('全部')}</Form.Select.Option>
-                    <Form.Select.Option value='1'>{t('充值')}</Form.Select.Option>
-                    <Form.Select.Option value='2'>{t('消费')}</Form.Select.Option>
-                    <Form.Select.Option value='3'>{t('管理')}</Form.Select.Option>
-                    <Form.Select.Option value='4'>{t('系统')}</Form.Select.Option>
-                    <Form.Select.Option value='5'>{t('错误')}</Form.Select.Option>
-                  </Form.Select>
-
                   {/* 其他搜索字段 */}
                   <Form.Input
                     field='token_name'
@@ -1314,9 +1292,32 @@ const LogsTable = () => {
                 </div>
 
                 {/* 操作按钮区域 */}
-                <div className='flex justify-between items-center pt-2'>
-                  <div></div>
-                  <div className='flex gap-2'>
+                <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3'>
+                  {/* 日志类型选择器 */}
+                  <div className='w-full sm:w-auto min-w-[140px]'>
+                    <Form.Select
+                      field='logType'
+                      placeholder={t('日志类型')}
+                      className='!rounded-full w-full sm:w-auto'
+                      showClear
+                      pure
+                      onChange={() => {
+                        // 延迟执行搜索，让表单值先更新
+                        setTimeout(() => {
+                          refresh();
+                        }, 0);
+                      }}
+                    >
+                      <Form.Select.Option value='0'>{t('全部')}</Form.Select.Option>
+                      <Form.Select.Option value='1'>{t('充值')}</Form.Select.Option>
+                      <Form.Select.Option value='2'>{t('消费')}</Form.Select.Option>
+                      <Form.Select.Option value='3'>{t('管理')}</Form.Select.Option>
+                      <Form.Select.Option value='4'>{t('系统')}</Form.Select.Option>
+                      <Form.Select.Option value='5'>{t('错误')}</Form.Select.Option>
+                    </Form.Select>
+                  </div>
+                  
+                  <div className='flex gap-2 w-full sm:w-auto justify-end'>
                     <Button
                       type='primary'
                       htmlType='submit'
diff --git a/web/src/components/table/MjLogsTable.js b/web/src/components/table/MjLogsTable.js
index 4fbb0874..08376641 100644
--- a/web/src/components/table/MjLogsTable.js
+++ b/web/src/components/table/MjLogsTable.js
@@ -890,7 +890,7 @@ const LogsTable = () => {
                   </div>
 
                   {/* 操作按钮区域 */}
-                  <div className="flex justify-between items-center pt-2">
+                  <div className="flex justify-between items-center">
                     <div></div>
                     <div className="flex gap-2">
                       <Button
diff --git a/web/src/components/table/TaskLogsTable.js b/web/src/components/table/TaskLogsTable.js
index 45f03dd1..4f802515 100644
--- a/web/src/components/table/TaskLogsTable.js
+++ b/web/src/components/table/TaskLogsTable.js
@@ -717,7 +717,7 @@ const LogsTable = () => {
                   </div>
 
                   {/* 操作按钮区域 */}
-                  <div className="flex justify-between items-center pt-2">
+                  <div className="flex justify-between items-center">
                     <div></div>
                     <div className="flex gap-2">
                       <Button