From 2cc9e62852d8ab5ca5a7d2668c0dc3ecbbeb204f Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sun, 1 Jun 2025 18:25:43 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20ui(playground):=20reorganize=20c?=
 =?UTF-8?q?onfig=20manager=20layout=20to=20place=20reset=20button=20with?=
 =?UTF-8?q?=20timestamp?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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.
---
 .../components/playground/ConfigManager.js    | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/web/src/components/playground/ConfigManager.js b/web/src/components/playground/ConfigManager.js
index 12be1f4d..b3e5c07b 100644
--- a/web/src/components/playground/ConfigManager.js
+++ b/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