feat(views): 添加个人信息管理功能

- 新增个人信息管理页面，包括用户信息展示和编辑功能- 添加头像上传和裁剪功能
- 引入 vue-cropper 组件用于头像裁剪

package-lock.json

@@ -22,6 +22,7 @@
         "sass": "^1.89.2",
         "swiper": "^11.2.8",
         "vue": "^3.2.45",
+        "vue-cropper": "^1.1.4",
         "vue-echarts": "^7.0.3",
         "vue-router": "^4.1.6"
       },
@@ -8945,6 +8946,12 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "node_modules/vue-cropper": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-1.1.4.tgz",
+      "integrity": "sha512-5m98vBsCEI9rbS4JxELxXidtAui3qNyTHLHg67Qbn7g8cg+E6LcnC+hh3SM/p94x6mFh6KRxT1ttnta+wCYqWA==",
+      "license": "ISC"
+    },
     "node_modules/vue-demi": {
       "version": "0.13.11",
       "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",

package.json

@@ -24,11 +24,10 @@
     "mitt": "^3.0.0",
     "normalize.css": "^8.0.1",
     "pinia": "^2.0.29",
-
     "sass": "^1.89.2",
-
     "swiper": "^11.2.8",
     "vue": "^3.2.45",
+    "vue-cropper": "^1.1.4",
     "vue-echarts": "^7.0.3",
     "vue-router": "^4.1.6"
   },

src/views/components/management/person/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <Container title="个人信息" class="container mt-24px">
+    <a-table :columns="columns" :data="data" :pagination="false" class="mt-16px">
+      <template #info="{ record }">
+        <a-avatar :image-url="record.head_image" :size="32" />
+        {{ record.name }}
+        <icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
+      </template>
+      <template #mobile="{ record }">
+        {{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
+        <icon-edit size="13" class="ml-8px" />
+      </template>
+    </a-table>
+    <Modal v-model:visible="infoVisible" title="修改用户信息">
+      <a-form :model="userInfoForm" @submit="handleSubmitUserInfo">
+        <a-form-item field="head_image" label="头像">
+          <a-avatar :image-url="userInfoForm.head_image" :size="48" />
+          <a-upload action="/" />
+          <a-button @click="openEditImageModal"><icon-upload />上传新头像</a-button>
+        </a-form-item>
+        <a-form-item field="name" label="昵称">
+          <a-input v-model="userInfoForm.name" placeholder="请输入昵称" />
+        </a-form-item>
+      </a-form>
+    </Modal>
+    <Modal v-model:visible="imageVisible" title="头像裁剪">
+      <VueCropper></VueCropper>
+    </Modal>
+  </Container>
+</template>
+<script setup lang="ts">
+import Container from '@/components/container.vue';
+import Modal from '@/components/modal.vue';
+import { ref, reactive } from 'vue';
+import 'vue-cropper/dist/index.css';
+import { VueCropper }  from 'vue-cropper';
+
+const userInfo = reactive({
+  id: 1,
+  name: 'Jane Doe',
+  head_image: '',
+  mobile: '13600000000',
+});
+
+const columns = [
+  {
+    title: '用户信息',
+    slotName: 'info',
+  },
+  {
+    title: '手机号',
+    slotName: 'mobile',
+  },
+];
+const data = reactive([userInfo]);
+const infoVisible = ref(true);
+const imageVisible = ref(false);
+
+const userInfoForm = reactive({
+  name: '',
+  head_image: '',
+});
+
+function openEditInfoModal() {
+  infoVisible.value = true;
+}
+
+function openEditImageModal() {
+  imageVisible.value = true;
+}
+
+function handleSubmitUserInfo() {
+  console.log(123);
+}
+
+</script>
+
+<style scoped lang="less">
+
+</style>