Преглед изворни кода

🎨 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.
Apple\Apple пре 9 месеци
родитељ
комит
2cc9e62852
1 измењених фајлова са 12 додато и 13 уклоњено
  1. 12 13
      web/src/components/playground/ConfigManager.js

+ 12 - 13
web/src/components/playground/ConfigManager.js

@@ -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