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

This commit is contained in:
songjianet 2022-10-26 09:33:49 +08:00 committed by GitHub
parent 138eab6eb3
commit 1794cea4fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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