From d2794beb6dca52b643382a4c1add4f691e6865e5 Mon Sep 17 00:00:00 2001
From: songjianet <1778651752@qq.com>
Date: Wed, 5 Jan 2022 20:06:56 +0800
Subject: [PATCH] [Feature][UI Next] Add profile detail. (#7827)
---
.../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 +++
.../src/views/profile/index.tsx | 49 +++++++++++++++++
.../src/views/profile/info.module.scss | 29 ++++++++++
.../src/views/profile/info.tsx | 43 +++++++++++++++
.../src/views/profile/types.ts | 23 ++++++++
.../src/views/profile/use-profile.ts | 53 +++++++++++++++++++
.../src/views/profile/use-update.ts | 16 ++++++
13 files changed, 266 insertions(+), 17 deletions(-)
create mode 100644 dolphinscheduler-ui-next/src/views/profile/index.tsx
create mode 100644 dolphinscheduler-ui-next/src/views/profile/info.module.scss
create mode 100644 dolphinscheduler-ui-next/src/views/profile/info.tsx
create mode 100644 dolphinscheduler-ui-next/src/views/profile/types.ts
create mode 100644 dolphinscheduler-ui-next/src/views/profile/use-profile.ts
create mode 100644 dolphinscheduler-ui-next/src/views/profile/use-update.ts
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 99bbd78fc9..c4017dbb4c 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({
/>
)
- }
+ },
})
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 02455848ab..7591821bdf 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 12a55cb631..6d456c483f 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 (
@@ -55,19 +56,20 @@ const Content = defineComponent({
onHandleMenuClick={getSideMenuOptions}
headerMenuOptions={headerMenuOptions}
languageOptions={state.languageOptions}
- profileOptions={state.profileOptions}
+ profileOptions={state.userDropdownOptions}
/>
- { state.isShowSide && }
+ {state.isShowSide && (
+
+ )}
)
- }
-
+ },
})
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 2cb7d96c20..f71181aca4 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 e050b49e0f..599ef87218 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 341ee3ff9b..f9150db848 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 b09eec9365..221a3486e1 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/views/profile/index.tsx b/dolphinscheduler-ui-next/src/views/profile/index.tsx
new file mode 100644
index 0000000000..9633b03a06
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/profile/index.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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 { NButton } from 'naive-ui'
+import Card from '@/components/card'
+import Info from './info'
+
+const profile = defineComponent({
+ name: 'profile',
+ setup() {
+ const { t } = useI18n()
+
+ return { t }
+ },
+ render() {
+ const { t } = this
+
+ return (
+
+ {{
+ default: () => ,
+ 'header-extra': () => (
+
+ {t('profile.edit')}
+
+ ),
+ }}
+
+ )
+ },
+})
+
+export default profile
diff --git a/dolphinscheduler-ui-next/src/views/profile/info.module.scss b/dolphinscheduler-ui-next/src/views/profile/info.module.scss
new file mode 100644
index 0000000000..3f76f2a838
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/profile/info.module.scss
@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+.container {
+ > .item {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+
+ > .label {
+ display: inline-block;
+ width: 100px;
+ }
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/views/profile/info.tsx b/dolphinscheduler-ui-next/src/views/profile/info.tsx
new file mode 100644
index 0000000000..dff721d5ee
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/profile/info.tsx
@@ -0,0 +1,43 @@
+/*
+ * 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 { useProfile } from './use-profile'
+import styles from './info.module.scss'
+
+const Info = defineComponent({
+ name: 'Info',
+ setup() {},
+ render() {
+ const { infoOptions } = useProfile()
+
+ return (
+
+ {infoOptions.value.map((item) => {
+ return (
+ -
+ {item.key}:
+ {item.value}
+
+ )
+ })}
+
+ )
+ },
+})
+
+export default Info
diff --git a/dolphinscheduler-ui-next/src/views/profile/types.ts b/dolphinscheduler-ui-next/src/views/profile/types.ts
new file mode 100644
index 0000000000..2def04bad7
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/profile/types.ts
@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+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 0000000000..c0fe9805ee
--- /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> = 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/views/profile/use-update.ts b/dolphinscheduler-ui-next/src/views/profile/use-update.ts
new file mode 100644
index 0000000000..3e7c6c26f5
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/profile/use-update.ts
@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */