🎨 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>
|
</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
|
<Form.Input
|
||||||
field='token_name'
|
field='token_name'
|
||||||
@@ -1314,9 +1292,32 @@ const LogsTable = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 操作按钮区域 */}
|
{/* 操作按钮区域 */}
|
||||||
<div className='flex justify-between items-center pt-2'>
|
<div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3'>
|
||||||
<div></div>
|
{/* 日志类型选择器 */}
|
||||||
<div className='flex gap-2'>
|
<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
|
<Button
|
||||||
type='primary'
|
type='primary'
|
||||||
htmlType='submit'
|
htmlType='submit'
|
||||||
|
|||||||
@@ -890,7 +890,7 @@ const LogsTable = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 操作按钮区域 */}
|
{/* 操作按钮区域 */}
|
||||||
<div className="flex justify-between items-center pt-2">
|
<div className="flex justify-between items-center">
|
||||||
<div></div>
|
<div></div>
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -717,7 +717,7 @@ const LogsTable = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 操作按钮区域 */}
|
{/* 操作按钮区域 */}
|
||||||
<div className="flex justify-between items-center pt-2">
|
<div className="flex justify-between items-center">
|
||||||
<div></div>
|
<div></div>
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
Reference in New Issue
Block a user