🎨 refactor: reorganize log type selector layout with responsive design
- 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.
This commit is contained in:
@@ -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'
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user