🚀 编写个人用户信息模块

src/layouts/default/header/components/user-dropdown/index.vue

@@ -11,6 +11,11 @@
 
     <template #overlay>
       <Menu @click="handleMenuClick">
+        <MenuItem
+          key="userInfo"
+          :text="t('layout.header.dropdownItemUserInfo')"
+          icon="ant-design:user-outlined"
+        />
         <MenuItem
           v-if="getUseLockPage"
           key="lock"
@@ -37,8 +42,8 @@
   import { useModal } from '/@/components/Modal';
   import { propTypes } from '/@/utils/propTypes';
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-
-  type MenuEvent = 'logout' | 'doc' | 'lock';
+  import { useRouter } from 'vue-router';
+  type MenuEvent = 'logout' | 'doc' | 'lock' | 'userInfo';
 
   export default defineComponent({
     name: 'UserDropdown',
@@ -61,7 +66,7 @@
         const { nickName = '', avatar, remarks } = userStore.getUserInfo || {};
         return { nickName, avatar: avatar, remarks };
       });
-
+      const { push } = useRouter();
       const [register, { openModal }] = useModal();
 
       function handleLock() {
@@ -75,6 +80,9 @@
 
       function handleMenuClick(e: { key: MenuEvent }) {
         switch (e.key) {
+          case 'userInfo':
+            push('/system/userInfo');
+            break;
           case 'logout':
             handleLoginOut();
             break;

src/locales/lang/en/layout.ts

@@ -3,6 +3,7 @@ export default {
   header: {
     // 用户下拉
     dropdownItemLoginOut: 'Login Out',
+    dropdownItemUserInfo: 'User Info',
 
     tooltipErrorLog: 'Error log',
     tooltipLock: 'Lock screen',

src/locales/lang/zh-CN/layout.ts

@@ -3,6 +3,7 @@ export default {
   header: {
     // 用户下拉
     dropdownItemLoginOut: '退出系统',
+    dropdownItemUserInfo: '个人中心',
 
     // 提示信息
     tooltipErrorLog: '错误日志',

src/views/system/user/userInfo/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <PageWrapper dense
+                 fixedHeight
+                 contentFullHeight
+                 contentClass="flex"
+    >
+      <ACard class="base-info w-2/5 xl:w-2/5">
+        <template #title>
+          <UserOutlined/> 基本信息
+        </template>
+        <div class="user-info-top">
+          <AAvatar draggable
+                   width="32px"
+                   src="https://godolphinx.org/dolphin1024x1024.png"
+                   :size="80"
+          />
+          <h2>管理员</h2>
+          <p>全栈工程师</p>
+          <a-button preIcon="fa6-solid:id-badge"
+                    type="primary"
+                    shape="round"
+          >admin</a-button>
+        </div>
+        <ADivider/>
+        <div class="user-info-main">
+          <ADescriptions :labelStyle="getLabelStyle"
+                         :contentStyle="getDescriptionsStyle"
+                         :colon="false"
+          >
+            <ADescriptionsItem span="24">
+              <template #label>
+                <Icon icon="fa6-solid:building"/>
+              </template>
+              研发部
+            </ADescriptionsItem>
+            <ADescriptionsItem span="24">
+              <template #label>
+                <Icon icon="fa6-solid:envelope"/>
+              </template>
+              1827945911@qq.com
+            </ADescriptionsItem>
+            <ADescriptionsItem span="24">
+              <template #label>
+                <Icon icon="fa6-solid:mobile"/>
+              </template>
+              15374801233
+            </ADescriptionsItem>
+            <ADescriptionsItem span="24">
+              <template #label>
+                <Icon icon="fa6-solid:venus-double"/>
+              </template>
+              男
+            </ADescriptionsItem>
+            <ADescriptionsItem span="24">
+              <template #label>
+                <Icon icon="fa6-solid:city"/>
+              </template>
+              长沙康来多租户
+            </ADescriptionsItem>
+            <ADescriptionsItem span="24">
+              <template #label>
+                <Icon icon="fa6-solid:robot"/>
+              </template>
+              已认证
+            </ADescriptionsItem>
+          </ADescriptions>
+        </div>
+      </ACard>
+      <ACard class="info-modify w-3/5 xl:w-3/5">
+        <template #title>
+          <SettingOutlined/> 资料修改
+        </template>
+      </ACard>
+    </PageWrapper>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Card, Avatar, Descriptions, Divider } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { UserOutlined, SettingOutlined } from '@ant-design/icons-vue';
+  import type { CSSProperties } from 'vue';
+  import { computed } from 'vue';
+  import { Icon } from '/@/components/Icon';
+
+  const ACard = Card;
+  const AAvatar = Avatar;
+  const ADescriptions = Descriptions;
+  const ADescriptionsItem = Descriptions.Item;
+  const ADivider = Divider;
+
+  const getLabelStyle = computed((): CSSProperties => ({
+    fontSize: '14px',
+    display: 'inline',
+    width: '40px'
+  }));
+
+  const getDescriptionsStyle = computed((): CSSProperties => ({
+    fontSize: '20px',
+    color: '#606266',
+    'text-align': 'left',
+    'font-weight': 400,
+    'line-height': '23px',
+    'font-size': '14px'
+  }));
+
+</script>
+
+<style lang="less" scoped>
+
+.base-info {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  margin: 10px 15px 10px 10px;
+  scrollbar-width: none;
+
+  .user-info-top {
+    padding: 20px 0px;
+    text-align: center;
+
+    h2 {
+      color: #515a6e;
+      margin-top: 10px;
+      font-size: 24px;
+    }
+
+    p {
+      color: #999;
+      margin-top: 5px;
+      font-size: 12px;
+      font-weight: 0;
+    }
+  }
+
+  .user-info-main {
+    padding: 20px 100px;
+  }
+}
+
+.base-info::-webkit-scrollbar {
+  display: none;
+}
+
+.info-modify {
+  margin: 10px 10px 10px 0px;
+
+}
+
+</style>