🎨 ui(playground): reorganize config manager layout to place reset button with timestamp

- Move reset settings button to the same row as the last modified timestamp
- Use flexbox layout with justify-between to align timestamp left and reset button right
- Keep export and import buttons on the separate row below
- Improve space utilization and visual hierarchy in the settings panel

This change enhances the user interface by creating a more compact and intuitive layout
for the configuration management controls in the playground component.
This commit is contained in:
Apple\Apple
2025-06-01 18:25:43 +08:00
parent 26ef7aae38
commit 2cc9e62852

View File

@@ -206,14 +206,23 @@ const ConfigManager = ({
// 桌面端显示紧凑的按钮组 // 桌面端显示紧凑的按钮组
return ( return (
<div className="space-y-3"> <div className="space-y-3">
{/* 配置状态信息,使用较小的字体 */} {/* 配置状态信息和重置按钮 */}
<div className="text-center"> <div className="flex items-center justify-between">
<Typography.Text className="text-xs text-gray-500"> <Typography.Text className="text-xs text-gray-500">
{getConfigStatus()} {getConfigStatus()}
</Typography.Text> </Typography.Text>
<Button
icon={<RotateCcw size={12} />}
size="small"
theme="borderless"
type="danger"
onClick={handleReset}
className="!rounded-lg !text-xs !h-7 !px-2"
style={{ minWidth: 'auto' }}
/>
</div> </div>
{/* 紧凑的按钮布局 */} {/* 导出和导入按钮 */}
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
icon={<Download size={12} />} icon={<Download size={12} />}
@@ -236,16 +245,6 @@ const ConfigManager = ({
> >
{t('导入')} {t('导入')}
</Button> </Button>
<Button
icon={<RotateCcw size={12} />}
size="small"
theme="borderless"
type="danger"
onClick={handleReset}
className="!rounded-lg !text-xs !h-7 !px-2"
style={{ minWidth: 'auto' }}
/>
</div> </div>
<input <input