[Feature][UI] Adjust the style of the interface settings. (#12531)

dolphinscheduler-ui/src/views/ui-setting/index.tsx

@@ -16,76 +16,77 @@
  */
 
 import { useI18n } from 'vue-i18n'
-import { NForm, NFormItem, NSelect } from "naive-ui";
-import { defineComponent } from "vue";
+import { NSelect, NSpace } from 'naive-ui'
+import { defineComponent } from 'vue'
 import { useLogTimerStore } from '@/store/logTimer/logTimer'
- 
+import Card from '@/components/card'
+
 // Update LogTimer store when select value is updated
 const handleUpdateValue = (logTimer: number) => {
-    const logTimerStore = useLogTimerStore()
-    logTimerStore.setLogTimer(logTimer)
+  const logTimerStore = useLogTimerStore()
+  logTimerStore.setLogTimer(logTimer)
 }
 
 const setting = defineComponent({
-    name: 'ui-setting',
-    setup() {
-        const logTimerStore = useLogTimerStore()
-        const defaultLogTimer = logTimerStore.getLogTimer;
+  name: 'ui-setting',
+  setup() {
+    const logTimerStore = useLogTimerStore()
+    const defaultLogTimer = logTimerStore.getLogTimer
 
-        const logTimerMap = {
-            0: "Off",
-            10: '10 Seconds',
-            30: '30 Seconds',
-            60: '1 Minute',
-            300: '5 Minutes',
-            1800: '30 Minutes'
-        } as any
+    const logTimerMap = {
+      0: 'Off',
+      10: '10 Seconds',
+      30: '30 Seconds',
+      60: '1 Minute',
+      300: '5 Minutes',
+      1800: '30 Minutes'
+    } as any
 
-        const logTimerOptions = [
-            {
-                label: "Off",
-                value: 0,
-            },
-            {
-                label: "10 Seconds",
-                value: 10,
-            },
-            {
-                label: "30 Seconds",
-                value: 30,
-            },
-            {
-                label: "1 Minute",
-                value: 60,
-            },
-            {
-                label: "5 Minutes",
-                value: 300,
-            },
-            {
-                label: "30 Minutes",
-                value: 1800,
-            },
-            ]
-        return {defaultLogTimer, logTimerMap, logTimerOptions}
-    },
-    render() {
-        const { t } = useI18n()
+    const logTimerOptions = [
+      {
+        label: 'Off',
+        value: 0
+      },
+      {
+        label: '10 Seconds',
+        value: 10
+      },
+      {
+        label: '30 Seconds',
+        value: 30
+      },
+      {
+        label: '1 Minute',
+        value: 60
+      },
+      {
+        label: '5 Minutes',
+        value: 300
+      },
+      {
+        label: '30 Minutes',
+        value: 1800
+      }
+    ]
+    return { defaultLogTimer, logTimerMap, logTimerOptions }
+  },
+  render() {
+    const { t } = useI18n()
 
-        return ( 
-            <>
-            <NForm>
-                <NFormItem label={t('ui_setting.log.refresh_time')}>
-                <NSelect
-                    default-value={this.logTimerMap[this.defaultLogTimer]}
-                    options={this.logTimerOptions} 
-                    onUpdateValue={handleUpdateValue}
-                    />
-                </NFormItem>
-            </NForm>
-            </>
-        )
-    }
+    return (
+      <Card style={{ marginLeft: '25%', width: '50%' }} title={t('menu.ui_setting')}>
+        <NSpace align='center' justify='space-between'>
+          <span>{t('ui_setting.log.refresh_time')}</span>
+          <NSelect
+            style={{ width: '200px' }}
+            default-value={this.logTimerMap[this.defaultLogTimer]}
+            options={this.logTimerOptions}
+            onUpdateValue={handleUpdateValue}
+          />
+        </NSpace>
+      </Card>
+    )
+  }
 })
 
-export default setting
+export default setting