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'

Reply via email to