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. + */