🎨 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:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user