Browse Source

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

3.2.0-release
songjianet 2 years ago committed by GitHub
parent
commit
1794cea4fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 47
      dolphinscheduler-ui/src/views/ui-setting/index.tsx

47
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,29 +44,29 @@ 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 }
},
@ -73,17 +74,17 @@ const setting = defineComponent({
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>
)
}
})

Loading…
Cancel
Save