You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by so...@apache.org on 2022/10/26 01:33:57 UTC
[dolphinscheduler] branch dev updated: [Feature][UI] Adjust the style of the interface settings. (#12531)
This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 1794cea4fa [Feature][UI] Adjust the style of the interface settings. (#12531)
1794cea4fa is described below
commit 1794cea4fad213a52b834e7e8a027143ad2d80fc
Author: songjianet <17...@qq.com>
AuthorDate: Wed Oct 26 09:33:49 2022 +0800
[Feature][UI] Adjust the style of the interface settings. (#12531)
---
dolphinscheduler-ui/src/views/ui-setting/index.tsx | 125 +++++++++++----------
1 file changed, 63 insertions(+), 62 deletions(-)
diff --git a/dolphinscheduler-ui/src/views/ui-setting/index.tsx b/dolphinscheduler-ui/src/views/ui-setting/index.tsx
index bee87f7bc7..61c44706c0 100644
--- a/dolphinscheduler-ui/src/views/ui-setting/index.tsx
+++ b/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
\ No newline at end of file
+export default setting