This is an automated email from the ASF dual-hosted git repository.
zhongjiajie 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 d2794be [Feature][UI Next] Add profile detail. (#7827)
d2794be is described below
commit d2794beb6dca52b643382a4c1add4f691e6865e5
Author: songjianet <[email protected]>
AuthorDate: Wed Jan 5 20:06:56 2022 +0800
[Feature][UI Next] Add profile detail. (#7827)
---
.../layouts/content/components/sidebar/index.tsx | 2 +-
.../content/components/user/use-dropdown.ts | 2 +
.../src/layouts/content/index.tsx | 16 ++++---
.../src/layouts/content/use-dataList.ts | 10 ++--
.../src/locales/modules/en_US.ts | 16 ++++++-
.../src/locales/modules/zh_CN.ts | 16 ++++++-
dolphinscheduler-ui-next/src/router/routes.ts | 8 ++++
.../use-dropdown.ts => views/profile/index.tsx} | 54 +++++++++++-----------
.../profile/info.module.scss} | 34 ++++----------
.../use-dropdown.ts => views/profile/info.tsx} | 50 +++++++++-----------
.../use-dropdown.ts => views/profile/types.ts} | 34 ++------------
.../src/views/profile/use-profile.ts | 53 +++++++++++++++++++++
.../profile/use-update.ts} | 31 -------------
13 files changed, 170 insertions(+), 156 deletions(-)
diff --git
a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
index 99bbd78..c4017db 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
@@ -54,7 +54,7 @@ const Sidebar = defineComponent({
/>
</NLayoutSider>
)
- }
+ },
})
export default Sidebar
diff --git
a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
b/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
index 0245584..7591821 100644
---
a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
+++
b/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
@@ -30,6 +30,8 @@ export function useDropDown() {
useLogout()
} else if (key === 'password') {
router.push({ path: 'password' })
+ } else if (key === 'profile') {
+ router.push({ path: 'profile' })
}
}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
index 12a55cb..6d456c4 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
@@ -36,11 +36,11 @@ const Content = defineComponent({
},
render() {
const { state, getHeaderMenuOptions } = useDataList()
-
+
const headerMenuOptions = getHeaderMenuOptions(state.menuOptions)
-
+
const sideMenuOptions = ref()
-
+
const getSideMenuOptions = (item: any) => {
this.languageStore.setMenuKey(item.key)
sideMenuOptions.value =
@@ -48,6 +48,7 @@ const Content = defineComponent({
[]
state.isShowSide = sideMenuOptions.value.length !== 0
}
+
return (
<NLayout style='height: 100%;'>
<NLayoutHeader style='height: 65px;'>
@@ -55,19 +56,20 @@ const Content = defineComponent({
onHandleMenuClick={getSideMenuOptions}
headerMenuOptions={headerMenuOptions}
languageOptions={state.languageOptions}
- profileOptions={state.profileOptions}
+ profileOptions={state.userDropdownOptions}
/>
</NLayoutHeader>
<NLayout has-sider position='absolute' style='top: 65px;'>
- { state.isShowSide && <SideBar
sideMenuOptions={sideMenuOptions.value} /> }
+ {state.isShowSide && (
+ <SideBar sideMenuOptions={sideMenuOptions.value} />
+ )}
<NLayoutContent native-scrollbar={false} style='padding: 16px 22px;'>
<router-view />
</NLayoutContent>
</NLayout>
</NLayout>
)
- }
-
+ },
})
export default Content
diff --git a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
index 2cb7d96..f71181a 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
@@ -226,19 +226,19 @@ export function useDataList() {
},
]
- const profileOptions = [
+ const userDropdownOptions = [
{
- label: t('profile.profile'),
+ label: t('userDropdown.profile'),
key: 'profile',
icon: renderIcon(UserOutlined),
},
{
- label: t('profile.password'),
+ label: t('userDropdown.password'),
key: 'password',
icon: renderIcon(KeyOutlined),
},
{
- label: t('profile.logout'),
+ label: t('userDropdown.logout'),
key: 'logout',
icon: renderIcon(LogoutOutlined),
},
@@ -262,7 +262,7 @@ export function useDataList() {
isShowSide: false,
menuOptions,
languageOptions,
- profileOptions,
+ userDropdownOptions,
})
return {
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index e050b49..599ef87 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@@ -29,7 +29,7 @@ const theme = {
dark: 'Dark',
}
-const profile = {
+const userDropdown = {
profile: 'Profile',
password: 'Password',
logout: 'Logout',
@@ -88,11 +88,23 @@ const password = {
submit: 'Submit',
}
+const profile = {
+ profile: 'Profile',
+ edit: 'Edit',
+ username: 'Username',
+ email: 'Email',
+ phone: 'Phone',
+ permission: 'Permission',
+ create_time: 'Create Time',
+ update_time: 'Update Time',
+}
+
export default {
login,
theme,
- profile,
+ userDropdown,
menu,
home,
password,
+ profile,
}
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index 341ee3f..f9150db 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
@@ -29,7 +29,7 @@ const theme = {
dark: '深色',
}
-const profile = {
+const userDropdown = {
profile: '用户信息',
password: '密码管理',
logout: '退出登录',
@@ -87,11 +87,23 @@ const password = {
submit: '提交',
}
+const profile = {
+ profile: '用户信息',
+ edit: '编辑',
+ username: '用户名',
+ email: '邮箱',
+ phone: '手机',
+ permission: '权限',
+ create_time: '创建时间',
+ update_time: '更新时间',
+}
+
export default {
login,
theme,
- profile,
+ userDropdown,
menu,
home,
password,
+ profile,
}
diff --git a/dolphinscheduler-ui-next/src/router/routes.ts
b/dolphinscheduler-ui-next/src/router/routes.ts
index b09eec9..221a348 100644
--- a/dolphinscheduler-ui-next/src/router/routes.ts
+++ b/dolphinscheduler-ui-next/src/router/routes.ts
@@ -54,6 +54,14 @@ const basePage: RouteRecordRaw[] = [
title: '修改密码',
},
},
+ {
+ path: '/profile',
+ name: 'profile',
+ component: components['profile'],
+ meta: {
+ title: '用户信息',
+ },
+ },
],
},
projectsPage,
diff --git
a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
b/dolphinscheduler-ui-next/src/views/profile/index.tsx
similarity index 52%
copy from
dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
copy to dolphinscheduler-ui-next/src/views/profile/index.tsx
index 0245584..9633b03 100644
---
a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
+++ b/dolphinscheduler-ui-next/src/views/profile/index.tsx
@@ -15,33 +15,35 @@
* limitations under the License.
*/
-import { useRouter } from 'vue-router'
-import { DropdownOption } from 'naive-ui'
-import { logout } from '@/service/modules/logout'
-import { useUserStore } from '@/store/user/user'
-import type { Router } from 'vue-router'
+import { defineComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { NButton } from 'naive-ui'
+import Card from '@/components/card'
+import Info from './info'
-export function useDropDown() {
- const router: Router = useRouter()
- const userStore = useUserStore()
+const profile = defineComponent({
+ name: 'profile',
+ setup() {
+ const { t } = useI18n()
- const handleSelect = (key: string | number, option: DropdownOption) => {
- if (key === 'logout') {
- useLogout()
- } else if (key === 'password') {
- router.push({ path: 'password' })
- }
- }
+ return { t }
+ },
+ render() {
+ const { t } = this
- const useLogout = () => {
- logout().then(() => {
- userStore.setSessionId('')
- userStore.setUserInfo({})
- router.push({ path: 'login' })
- })
- }
+ return (
+ <Card title={t('profile.profile')}>
+ {{
+ default: () => <Info />,
+ 'header-extra': () => (
+ <NButton type='info' size='small'>
+ {t('profile.edit')}
+ </NButton>
+ ),
+ }}
+ </Card>
+ )
+ },
+})
- return {
- handleSelect,
- }
-}
+export default profile
diff --git
a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
b/dolphinscheduler-ui-next/src/views/profile/info.module.scss
similarity index 52%
copy from
dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
copy to dolphinscheduler-ui-next/src/views/profile/info.module.scss
index 0245584..3f76f2a 100644
---
a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
+++ b/dolphinscheduler-ui-next/src/views/profile/info.module.scss
@@ -15,33 +15,15 @@
* limitations under the License.
*/
-import { useRouter } from 'vue-router'
-import { DropdownOption } from 'naive-ui'
-import { logout } from '@/service/modules/logout'
-import { useUserStore } from '@/store/user/user'
-import type { Router } from 'vue-router'
+.container {
+ > .item {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
-export function useDropDown() {
- const router: Router = useRouter()
- const userStore = useUserStore()
-
- const handleSelect = (key: string | number, option: DropdownOption) => {
- if (key === 'logout') {
- useLogout()
- } else if (key === 'password') {
- router.push({ path: 'password' })
+ > .label {
+ display: inline-block;
+ width: 100px;
}
}
-
- const useLogout = () => {
- logout().then(() => {
- userStore.setSessionId('')
- userStore.setUserInfo({})
- router.push({ path: 'login' })
- })
- }
-
- return {
- handleSelect,
- }
}
diff --git
a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
b/dolphinscheduler-ui-next/src/views/profile/info.tsx
similarity index 52%
copy from
dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
copy to dolphinscheduler-ui-next/src/views/profile/info.tsx
index 0245584..dff721d 100644
---
a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
+++ b/dolphinscheduler-ui-next/src/views/profile/info.tsx
@@ -15,33 +15,29 @@
* limitations under the License.
*/
-import { useRouter } from 'vue-router'
-import { DropdownOption } from 'naive-ui'
-import { logout } from '@/service/modules/logout'
-import { useUserStore } from '@/store/user/user'
-import type { Router } from 'vue-router'
+import { defineComponent } from 'vue'
+import { useProfile } from './use-profile'
+import styles from './info.module.scss'
-export function useDropDown() {
- const router: Router = useRouter()
- const userStore = useUserStore()
+const Info = defineComponent({
+ name: 'Info',
+ setup() {},
+ render() {
+ const { infoOptions } = useProfile()
- const handleSelect = (key: string | number, option: DropdownOption) => {
- if (key === 'logout') {
- useLogout()
- } else if (key === 'password') {
- router.push({ path: 'password' })
- }
- }
+ return (
+ <dl class={styles.container}>
+ {infoOptions.value.map((item) => {
+ return (
+ <dd class={styles.item}>
+ <span class={styles.label}>{item.key}: </span>
+ <span>{item.value}</span>
+ </dd>
+ )
+ })}
+ </dl>
+ )
+ },
+})
- const useLogout = () => {
- logout().then(() => {
- userStore.setSessionId('')
- userStore.setUserInfo({})
- router.push({ path: 'login' })
- })
- }
-
- return {
- handleSelect,
- }
-}
+export default Info
diff --git
a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
b/dolphinscheduler-ui-next/src/views/profile/types.ts
similarity index 52%
copy from
dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
copy to dolphinscheduler-ui-next/src/views/profile/types.ts
index 0245584..2def04b 100644
---
a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
+++ b/dolphinscheduler-ui-next/src/views/profile/types.ts
@@ -15,33 +15,9 @@
* limitations under the License.
*/
-import { useRouter } from 'vue-router'
-import { DropdownOption } from 'naive-ui'
-import { logout } from '@/service/modules/logout'
-import { useUserStore } from '@/store/user/user'
-import type { Router } from 'vue-router'
-
-export function useDropDown() {
- const router: Router = useRouter()
- const userStore = useUserStore()
-
- const handleSelect = (key: string | number, option: DropdownOption) => {
- if (key === 'logout') {
- useLogout()
- } else if (key === 'password') {
- router.push({ path: 'password' })
- }
- }
-
- const useLogout = () => {
- logout().then(() => {
- userStore.setSessionId('')
- userStore.setUserInfo({})
- router.push({ path: 'login' })
- })
- }
-
- return {
- handleSelect,
- }
+interface InfoProps {
+ key: string
+ value: string | number | undefined
}
+
+export { InfoProps }
diff --git a/dolphinscheduler-ui-next/src/views/profile/use-profile.ts
b/dolphinscheduler-ui-next/src/views/profile/use-profile.ts
new file mode 100644
index 0000000..c0fe980
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/profile/use-profile.ts
@@ -0,0 +1,53 @@
+/*
+ * 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 { ref } from 'vue'
+import { useUserStore } from '@/store/user/user'
+import { useI18n } from 'vue-i18n'
+import type { UserInfoRes } from '@/service/modules/users/types'
+import type { InfoProps } from './types'
+import type { Ref } from 'vue'
+
+export function useProfile() {
+ const { t } = useI18n()
+ const userStore = useUserStore()
+ const userInfo = userStore.getUserInfo as UserInfoRes
+ const infoOptions: Ref<Array<InfoProps>> = ref([])
+
+ infoOptions.value.push({
+ key: t('profile.username'),
+ value: userInfo.userName,
+ })
+ infoOptions.value.push({ key: t('profile.email'), value: userInfo.email })
+ infoOptions.value.push({ key: t('profile.phone'), value: userInfo.phone })
+ infoOptions.value.push({
+ key: t('profile.permission'),
+ value: userInfo.userName,
+ })
+ infoOptions.value.push({
+ key: t('profile.create_time'),
+ value: userInfo.createTime,
+ })
+ infoOptions.value.push({
+ key: t('profile.update_time'),
+ value: userInfo.updateTime,
+ })
+
+ return {
+ infoOptions,
+ }
+}
diff --git
a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
b/dolphinscheduler-ui-next/src/views/profile/use-update.ts
similarity index 51%
copy from
dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
copy to dolphinscheduler-ui-next/src/views/profile/use-update.ts
index 0245584..3e7c6c2 100644
---
a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
+++ b/dolphinscheduler-ui-next/src/views/profile/use-update.ts
@@ -14,34 +14,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
-import { useRouter } from 'vue-router'
-import { DropdownOption } from 'naive-ui'
-import { logout } from '@/service/modules/logout'
-import { useUserStore } from '@/store/user/user'
-import type { Router } from 'vue-router'
-
-export function useDropDown() {
- const router: Router = useRouter()
- const userStore = useUserStore()
-
- const handleSelect = (key: string | number, option: DropdownOption) => {
- if (key === 'logout') {
- useLogout()
- } else if (key === 'password') {
- router.push({ path: 'password' })
- }
- }
-
- const useLogout = () => {
- logout().then(() => {
- userStore.setSessionId('')
- userStore.setUserInfo({})
- router.push({ path: 'login' })
- })
- }
-
- return {
- handleSelect,
- }
-}
