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

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

@@ -16,9 +16,10 @@
  */
 
 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) => {
@@ -30,10 +31,10 @@ const setting = defineComponent({
   name: 'ui-setting',
   setup() {
     const logTimerStore = useLogTimerStore()
-        const defaultLogTimer = logTimerStore.getLogTimer;
+    const defaultLogTimer = logTimerStore.getLogTimer
 
     const logTimerMap = {
-            0: "Off",
+      0: 'Off',
       10: '10 Seconds',
       30: '30 Seconds',
       60: '1 Minute',
@@ -43,47 +44,47 @@ const setting = defineComponent({
 
     const logTimerOptions = [
       {
-                label: "Off",
-                value: 0,
+        label: 'Off',
+        value: 0
       },
       {
-                label: "10 Seconds",
-                value: 10,
+        label: '10 Seconds',
+        value: 10
       },
       {
-                label: "30 Seconds",
-                value: 30,
+        label: '30 Seconds',
+        value: 30
       },
       {
-                label: "1 Minute",
-                value: 60,
+        label: '1 Minute',
+        value: 60
       },
       {
-                label: "5 Minutes",
-                value: 300,
+        label: '5 Minutes',
+        value: 300
       },
       {
-                label: "30 Minutes",
-                value: 1800,
-            },
+        label: '30 Minutes',
+        value: 1800
+      }
     ]
-        return {defaultLogTimer, logTimerMap, logTimerOptions}
+    return { defaultLogTimer, logTimerMap, logTimerOptions }
   },
   render() {
     const { t } = useI18n()
 
     return (
-            <>
-            <NForm>
-                <NFormItem label={t('ui_setting.log.refresh_time')}>
+      <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}
           />
-                </NFormItem>
-            </NForm>
-            </>
+        </NSpace>
+      </Card>
     )
   }
 })