Browse Source

[Feature][UI Next] Add profile detail. (#7827)

3.0.0/version-upgrade
songjianet 3 years ago committed by GitHub
parent
commit
d2794beb6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
  2. 2
      dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
  3. 10
      dolphinscheduler-ui-next/src/layouts/content/index.tsx
  4. 10
      dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
  5. 16
      dolphinscheduler-ui-next/src/locales/modules/en_US.ts
  6. 16
      dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
  7. 8
      dolphinscheduler-ui-next/src/router/routes.ts
  8. 49
      dolphinscheduler-ui-next/src/views/profile/index.tsx
  9. 29
      dolphinscheduler-ui-next/src/views/profile/info.module.scss
  10. 43
      dolphinscheduler-ui-next/src/views/profile/info.tsx
  11. 23
      dolphinscheduler-ui-next/src/views/profile/types.ts
  12. 53
      dolphinscheduler-ui-next/src/views/profile/use-profile.ts
  13. 16
      dolphinscheduler-ui-next/src/views/profile/use-update.ts

2
dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx

@ -54,7 +54,7 @@ const Sidebar = defineComponent({
/>
</NLayoutSider>
)
}
},
})
export default Sidebar

2
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' })
}
}

10
dolphinscheduler-ui-next/src/layouts/content/index.tsx

@ -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

10
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 {

16
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,
}

16
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,
}

8
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,

49
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 (
<Card title={t('profile.profile')}>
{{
default: () => <Info />,
'header-extra': () => (
<NButton type='info' size='small'>
{t('profile.edit')}
</NButton>
),
}}
</Card>
)
},
})
export default profile

29
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;
}
}
}

43
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 (
<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>
)
},
})
export default Info

23
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 }

53
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,
}
}

16
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.
*/
Loading…
Cancel
Save