🚀 编写个人用户信息模块

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

@@ -69,8 +69,16 @@
       </ACard>
       <ACard class="info-modify w-3/5 xl:w-3/5">
         <template #title>
-          <SettingOutlined/> 资料修改
+          <CreditCardOutlined/> 资料修改
         </template>
+        <ACard :bordered="false"
+               :tab-list="tabListNoTitle"
+               :active-tab-key="state.currentCardKey"
+               @tabChange="key => state.currentCardKey = key"
+        >
+          <p v-if="state.currentCardKey === 'baseInfo'">修改基本信息待开发中。。。</p>
+          <p v-if="state.currentCardKey === 'uploadAvatar'">上传头像待开发中。。。</p>
+        </ACard>
       </ACard>
     </PageWrapper>
   </div>
@@ -79,17 +87,25 @@
 <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 { UserOutlined, CreditCardOutlined } from '@ant-design/icons-vue';
   import type { CSSProperties } from 'vue';
-  import { computed } from 'vue';
+  import {computed, reactive} from 'vue';
   import { Icon } from '/@/components/Icon';
 
+  interface InfoState {
+    currentCardKey: string;
+  }
+
   const ACard = Card;
   const AAvatar = Avatar;
   const ADescriptions = Descriptions;
   const ADescriptionsItem = Descriptions.Item;
   const ADivider = Divider;
 
+  const state = reactive<InfoState>({
+    currentCardKey: 'baseInfo'
+  });
+
   const getLabelStyle = computed((): CSSProperties => ({
     fontSize: '14px',
     display: 'inline',
@@ -105,6 +121,17 @@
     'font-size': '14px'
   }));
 
+  const tabListNoTitle = [
+    {
+      key: 'baseInfo',
+      tab: '基本信息',
+    },
+    {
+      key: 'uploadAvatar',
+      tab: '上传头像',
+    }
+  ];
+
 </script>
 
 <style lang="less" scoped>