This is an automated email from the ASF dual-hosted git repository. songjian pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/incubator-seatunnel-web.git
The following commit(s) were added to refs/heads/main by this push: new 60e074d1 [Feat][UI] Finish writing the setting page. (#33) 60e074d1 is described below commit 60e074d139a13bd5d34fc3cc7f634e6f930d14f5 Author: songjianet <1778651...@qq.com> AuthorDate: Wed Mar 1 20:56:23 2023 +0800 [Feat][UI] Finish writing the setting page. (#33) --- .../src/layouts/dashboard/header/user/index.tsx | 2 +- .../dashboard/header/user/use-user-dropdown.ts | 13 +++- seatunnel-ui/src/locales/en_US/index.ts | 4 +- seatunnel-ui/src/locales/en_US/menu.ts | 1 + .../src/locales/en_US/{menu.ts => setting.ts} | 16 ++-- seatunnel-ui/src/router/routes.ts | 20 ++++- seatunnel-ui/src/views/setting/index.tsx | 89 ++++++++++++++++++++++ .../en_US/menu.ts => views/setting/use-setting.ts} | 10 --- seatunnel-ui/src/views/tasks/list/index.tsx | 3 +- 9 files changed, 132 insertions(+), 26 deletions(-) diff --git a/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx b/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx index 0db68462..b5d1da25 100644 --- a/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx +++ b/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx @@ -38,7 +38,7 @@ const User = defineComponent({ <NSpace justify='end' align='center' - class='h-16 w-48 mr-12' + class='h-16 mr-12' style={{ cursor: 'pointer' }} > <NDropdown diff --git a/seatunnel-ui/src/layouts/dashboard/header/user/use-user-dropdown.ts b/seatunnel-ui/src/layouts/dashboard/header/user/use-user-dropdown.ts index 05db7291..f1bafe79 100644 --- a/seatunnel-ui/src/layouts/dashboard/header/user/use-user-dropdown.ts +++ b/seatunnel-ui/src/layouts/dashboard/header/user/use-user-dropdown.ts @@ -21,7 +21,11 @@ import { useRouter } from 'vue-router' import { NIcon } from 'naive-ui' import { userLogout } from '@/service/user' import { useUserStore } from '@/store/user' -import { LogoutOutlined, QuestionCircleOutlined } from '@vicons/antd' +import { + LogoutOutlined, + QuestionCircleOutlined, + SettingOutlined +} from '@vicons/antd' import type { Router } from 'vue-router' import type { Component } from 'vue' @@ -44,6 +48,11 @@ export function useUserDropdown() { label: t('menu.help'), icon: renderIcon(QuestionCircleOutlined) }, + { + key: 'setting', + label: t('menu.setting'), + icon: renderIcon(SettingOutlined) + }, { key: 'logout', label: t('menu.logout'), @@ -58,6 +67,8 @@ export function useUserDropdown() { const handleSelect = (key: string) => { if (key === 'help') { window.open('http://seatunnel.incubator.apache.org/versions/') + } else if (key === 'setting') { + router.push({ path: '/setting' }) } else if (key === 'logout') { userLogout().then(() => { userStore.setUserInfo({}) diff --git a/seatunnel-ui/src/locales/en_US/index.ts b/seatunnel-ui/src/locales/en_US/index.ts index 4c71c783..fefb82cb 100644 --- a/seatunnel-ui/src/locales/en_US/index.ts +++ b/seatunnel-ui/src/locales/en_US/index.ts @@ -23,6 +23,7 @@ import data_pipes from '@/locales/en_US/data-pipes' import log from '@/locales/en_US/log' import jobs from '@/locales/en_US/jobs' import tasks from '@/locales/en_US/tasks' +import setting from '@/locales/en_US/setting' export default { login, @@ -32,5 +33,6 @@ export default { data_pipes, log, jobs, - tasks + tasks, + setting } diff --git a/seatunnel-ui/src/locales/en_US/menu.ts b/seatunnel-ui/src/locales/en_US/menu.ts index 722579a4..37fd071b 100644 --- a/seatunnel-ui/src/locales/en_US/menu.ts +++ b/seatunnel-ui/src/locales/en_US/menu.ts @@ -21,6 +21,7 @@ export default { manage: 'Manage', user_manage: 'User Manage', help: 'Help', + setting: 'Setting', logout: 'Logout', tasks: 'Tasks' } diff --git a/seatunnel-ui/src/locales/en_US/menu.ts b/seatunnel-ui/src/locales/en_US/setting.ts similarity index 75% copy from seatunnel-ui/src/locales/en_US/menu.ts copy to seatunnel-ui/src/locales/en_US/setting.ts index 722579a4..6c6cfc9a 100644 --- a/seatunnel-ui/src/locales/en_US/menu.ts +++ b/seatunnel-ui/src/locales/en_US/setting.ts @@ -16,11 +16,13 @@ */ export default { - data_pipes: 'Data Pipes', - jobs: 'Jobs', - manage: 'Manage', - user_manage: 'User Manage', - help: 'Help', - logout: 'Logout', - tasks: 'Tasks' + table_setting: 'Table Setting', + sequence_column: 'Sequence Column', + data_unique_value: 'Data Unique Value', + language_setting: 'Language Setting', + language: 'Language', + theme_setting: 'Theme Setting', + theme: 'Theme', + english: 'English', + light: 'Light' } diff --git a/seatunnel-ui/src/router/routes.ts b/seatunnel-ui/src/router/routes.ts index 1784f7c9..8397eecf 100644 --- a/seatunnel-ui/src/router/routes.ts +++ b/seatunnel-ui/src/router/routes.ts @@ -32,10 +32,22 @@ const loginPage: RouteRecordRaw[] = [ { path: '/login', name: 'login', - component: components['login'], - meta: { - auth: [] - } + component: components['login'] + }, + { + path: '/setting', + redirect: { name: 'setting' }, + component: () => import('@/layouts/dashboard'), + children: [ + { + path: '/setting', + name: 'setting', + component: components['setting'], + meta: { + title: 'setting' + } + } + ] } ] diff --git a/seatunnel-ui/src/views/setting/index.tsx b/seatunnel-ui/src/views/setting/index.tsx new file mode 100644 index 00000000..cb606665 --- /dev/null +++ b/seatunnel-ui/src/views/setting/index.tsx @@ -0,0 +1,89 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { defineComponent } from 'vue' +import { useI18n } from 'vue-i18n' +import { NSpace, NCard, NSwitch, NList, NListItem, NSelect } from 'naive-ui' + +const Setting = defineComponent({ + name: 'Setting', + setup() { + const { t } = useI18n() + + return { + t + } + }, + render() { + return ( + <NSpace vertical> + <NCard title={this.t('setting.table_setting')}> + <NList> + <NListItem> + <NSpace justify='space-between' align='center'> + <span>{this.t('setting.sequence_column')}</span> + <NSwitch /> + </NSpace> + </NListItem> + <NListItem> + <NSpace justify='space-between' align='center'> + <span>{this.t('setting.data_unique_value')}</span> + <NSwitch /> + </NSpace> + </NListItem> + </NList> + </NCard> + <NCard title={this.t('setting.language_setting')}> + <NList> + <NListItem> + <NSpace justify='space-between' align='center'> + <span>{this.t('setting.language')}</span> + <div class='w-56'> + <NSelect + value={'english'} + options={[ + { value: 'english', label: this.t('setting.english') } + ]} + /> + </div> + </NSpace> + </NListItem> + </NList> + </NCard> + <NCard title={this.t('setting.theme_setting')}> + <NList> + <NListItem> + <NSpace justify='space-between' align='center'> + <span>{this.t('setting.theme')}</span> + <div class='w-56'> + <NSelect + value={'light'} + options={[ + { value: 'light', label: this.t('setting.light') } + ]} + /> + </div> + </NSpace> + </NListItem> + </NList> + </NCard> + </NSpace> + ) + } +}) + +export default Setting diff --git a/seatunnel-ui/src/locales/en_US/menu.ts b/seatunnel-ui/src/views/setting/use-setting.ts similarity index 82% copy from seatunnel-ui/src/locales/en_US/menu.ts copy to seatunnel-ui/src/views/setting/use-setting.ts index 722579a4..3e7c6c26 100644 --- a/seatunnel-ui/src/locales/en_US/menu.ts +++ b/seatunnel-ui/src/views/setting/use-setting.ts @@ -14,13 +14,3 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -export default { - data_pipes: 'Data Pipes', - jobs: 'Jobs', - manage: 'Manage', - user_manage: 'User Manage', - help: 'Help', - logout: 'Logout', - tasks: 'Tasks' -} diff --git a/seatunnel-ui/src/views/tasks/list/index.tsx b/seatunnel-ui/src/views/tasks/list/index.tsx index 3bdd20bc..e52bda2c 100644 --- a/seatunnel-ui/src/views/tasks/list/index.tsx +++ b/seatunnel-ui/src/views/tasks/list/index.tsx @@ -22,8 +22,7 @@ import { NDataTable, NInput, NPagination, - NSpace, - NSelect + NSpace } from 'naive-ui' import { useI18n } from 'vue-i18n' import { useTable } from './use-table'