🎨 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 (
<div className="space-y-3">
{/* 配置状态信息,使用较小的字体 */}
<div className="text-center">
{/* 配置状态信息和重置按钮 */}
<div className="flex items-center justify-between">
<Typography.Text className="text-xs text-gray-500">
{getConfigStatus()}
</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 className="flex gap-2">
<Button
icon={<Download size={12} />}
@@ -236,16 +245,6 @@ const ConfigManager = ({
>
{t('导入')}
</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>
<input