From cd0073a023760e878947b77912adb12d077fd6ef Mon Sep 17 00:00:00 2001
From: dkp <daikunping@xiaotiai.com>
Date: Wed, 18 Jun 2025 18:00:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(views):=20=E6=B7=BB=E5=8A=A0=E4=B8=AA?=
 =?UTF-8?q?=E4=BA=BA=E4=BF=A1=E6=81=AF=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增个人信息管理页面，包括用户信息展示和编辑功能- 添加头像上传和裁剪功能
- 引入 vue-cropper 组件用于头像裁剪
---
 package-lock.json                             |  7 ++
 package.json                                  |  3 +-
 .../components/management/person/index.vue    | 80 +++++++++++++++++++
 3 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 src/views/components/management/person/index.vue

diff --git a/package-lock.json b/package-lock.json
index 739795d..d972c82 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 184c6ae..b46c95a 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/views/components/management/person/index.vue b/src/views/components/management/person/index.vue
new file mode 100644
index 0000000..58636fd
--- /dev/null
+++ b/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>