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