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

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

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

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

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

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 {

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

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

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,

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

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

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

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 }

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

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