From a5bb4de1fed4f7b4ca883a758116d84280b232c9 Mon Sep 17 00:00:00 2001
From: yuk255 <yuk255@qq.com>
Date: Fri, 26 Sep 2025 18:15:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=99=E5=B8=88=E7=AB=AF=E4=B8=AA?=
 =?UTF-8?q?=E4=BA=BA=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/admin/PersonalCenter.vue | 567 ++++++++++++++----------
 1 file changed, 341 insertions(+), 226 deletions(-)

diff --git a/src/components/admin/PersonalCenter.vue b/src/components/admin/PersonalCenter.vue
index 71753fb..79ada20 100644
--- a/src/components/admin/PersonalCenter.vue
+++ b/src/components/admin/PersonalCenter.vue
@@ -1,263 +1,378 @@
 <template>
-    <div class="personal-center">
-        <!-- Tabs -->
-        <div class="tabs">
-            <div class="tab" :class="{ active: activeTab === 'base' }" @click="activeTab = 'base'">基础信息</div>
-            <div class="tab" :class="{ active: activeTab === 'password' }" @click="activeTab = 'password'">密码修改</div>
-        </div>
+  <div class="personal-center">
+    <!-- Tabs -->
+    <n-tabs v-model:value="activeTab" type="line">
+      <n-tab-pane name="base" tab="基础信息">
+        <!-- 基础信息内容 -->
+        <n-card title="基础信息" :bordered="false">
+          <n-form
+            :model="formData"
+            label-placement="left"
+            label-width="80px"
+            :disabled="!isEditing"
+          >
+            <n-form-item label="头像">
+              <div class="avatar-container">
+                <div class="avatar-wrapper">
+                  <n-avatar
+                    round
+                    :size="80"
+                    :src="avatar"
+                    @click.stop="previewAvatar"
+                  >
+                    <template #fallback>
+                      <div class="avatar-fallback">
+                        <svg
+                          width="32"
+                          height="32"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                        >
+                          <circle
+                            cx="12"
+                            cy="8"
+                            r="3"
+                            stroke="#999"
+                            stroke-width="1.5"
+                            fill="none"
+                          />
+                          <path
+                            d="M6 20c0-4 3-6 6-6s6 2 6 6"
+                            stroke="#999"
+                            stroke-width="1.5"
+                            fill="none"
+                          />
+                        </svg>
+                      </div>
+                    </template>
+                  </n-avatar>
+                  <div v-if="avatar" class="avatar-preview-hint">
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="white"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="3"
+                        stroke="white"
+                        stroke-width="2"
+                        fill="none"
+                      />
+                      <path
+                        d="M12 1v6m0 10v6m11-7h-6m-10 0H1"
+                        stroke="white"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </div>
+                  <n-button
+                    v-if="isEditing"
+                    circle
+                    size="small"
+                    class="avatar-edit-btn"
+                    @click.stop="triggerUpload"
+                    title="更换头像"
+                  >
+                    <template #icon>
+                      <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                        />
+                      </svg>
+                    </template>
+                  </n-button>
+                </div>
+              </div>
+              <input
+                ref="fileInput"
+                type="file"
+                accept="image/*"
+                @change="handleFileChange"
+                style="display: none"
+              />
+            </n-form-item>
+            <n-form-item label="姓名">
+              <n-input v-model:value="formData.name" placeholder="请输入姓名" />
+            </n-form-item>
+            <n-form-item label="自我介绍">
+              <n-input
+                v-model:value="formData.intro"
+                type="textarea"
+                :rows="4"
+                placeholder="请输入自我介绍"
+              />
+            </n-form-item>
+            <n-form-item>
+              <n-space>
+                <n-button type="primary" @click="startEdit" v-if="!isEditing">
+                  编辑资料
+                </n-button>
+                <n-button type="primary" @click="save" v-if="isEditing">
+                  保存
+                </n-button>
+                <n-button @click="cancelEdit" v-if="isEditing"> 取消 </n-button>
+              </n-space>
+            </n-form-item>
+          </n-form>
+        </n-card>
+      </n-tab-pane>
 
-        <!-- Card: 基础信息 -->
-        <div v-if="activeTab === 'base'" class="card">
-            <div class="card-title">基础信息</div>
-            <div class="form">
-                <div class="form-row stack">
-                    <label class="label">姓名：</label>
-                    <input class="input" type="text" v-model="name" :disabled="!isEditing" />
-                </div>
-                <div class="form-row align-start stack">
-                    <label class="label">自我介绍：</label>
-                    <textarea class="textarea" v-model="intro" :disabled="!isEditing" rows="4"></textarea>
-                </div>
-                <div class="actions">
-                    <button class="btn primary" @click="startEdit">编辑资料</button>
-                    <button class="btn primary" @click="save">保存</button>
-                </div>
-            </div>
-        </div>
+      <n-tab-pane name="password" tab="密码修改">
+        <!-- 密码修改内容 -->
+        <n-card title="密码修改" :bordered="false">
+          <n-form
+            :model="passwordForm"
+            label-placement="left"
+            label-width="80px"
+          >
+            <n-form-item label="帐号">
+              <n-input v-model:value="passwordForm.account" disabled />
+            </n-form-item>
+            <n-form-item label="原密码">
+              <n-input
+                v-model:value="passwordForm.oldPassword"
+                type="password"
+                placeholder="请输入原密码"
+                show-password-on="click"
+              />
+            </n-form-item>
+            <n-form-item label="新密码">
+              <n-input
+                v-model:value="passwordForm.newPassword"
+                type="password"
+                placeholder="请输入新密码"
+                show-password-on="click"
+              />
+            </n-form-item>
+            <n-form-item label="确认密码">
+              <n-input
+                v-model:value="passwordForm.confirmPassword"
+                type="password"
+                placeholder="请确认密码"
+                show-password-on="click"
+              />
+            </n-form-item>
+            <n-form-item>
+              <n-button type="primary" @click="savePassword"> 保存 </n-button>
+            </n-form-item>
+          </n-form>
+        </n-card>
+      </n-tab-pane>
+    </n-tabs>
 
-        <!-- Card: 密码修改 -->
-        <div v-else class="card">
-            <div class="card-title">密码修改</div>
-            <div class="p-form">
-                <div class="p-row stack">
-                    <label class="p-label">帐号：</label>
-                    <input class="p-input p-input-wide" type="text" v-model="account" disabled />
-                </div>
-                <div class="p-row stack">
-                    <label class="p-label">原密码：</label>
-                    <input class="p-input p-input-wide" type="password" v-model="oldPassword" placeholder="请输入原密码" />
-                </div>
-                <div class="p-row stack">
-                    <label class="p-label">新密码：</label>
-                    <input class="p-input p-input-wide" type="password" v-model="newPassword" placeholder="请输入新密码" />
-                </div>
-                <div class="p-row stack">
-                    <label class="p-label">确认密码：</label>
-                    <input class="p-input p-input-wide" type="password" v-model="confirmPassword" placeholder="请确认密码" />
-                </div>
-                <div class="p-actions">
-                    <button class="btn primary" @click="savePassword">保存</button>
-                </div>
-            </div>
+    <!-- 头像预览弹窗 -->
+    <n-modal v-model:show="showPreview" @mask-click="closePreview">
+      <n-card
+        style="width: 600px"
+        title="头像预览"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
+        <template #header-extra>
+          <n-button quaternary circle @click="closePreview">
+            <template #icon>
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </template>
+          </n-button>
+        </template>
+        <div style="text-align: center">
+          <img
+            :src="avatar"
+            alt="头像预览"
+            style="max-width: 100%; max-height: 400px; border-radius: 8px"
+          />
         </div>
-    </div>
+      </n-card>
+    </n-modal>
+  </div>
 </template>
 
 <script setup lang="ts">
-// @ts-nocheck
-import { ref } from 'vue'
+import { ref, reactive } from "vue";
+import { useUserStore } from "@/stores/user";
 
-const isEditing = ref(false)
-const activeTab = ref<'base' | 'password'>('base')
-const name = ref('张成学')
-const intro = ref(
-    '复旦大学经济学院教师，长期从事西方经济学的教学，主要讲授经济学原理、微观经济学、宏观经济学、管理经济学等基础课程，参与的“宏观经济学课程”被评为上海市精品课程与国家级精品课程'
-)
+interface FormData {
+  name: string;
+  intro: string;
+}
+
+interface PasswordForm {
+  account: string;
+  oldPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
+const userStore = useUserStore();
+
+const isEditing = ref(false);
+const activeTab = ref<"base" | "password">("base");
+
+// 基础信息表单
+const formData = reactive<FormData>({
+  name: userStore.user?.profile?.realName || "",
+  intro: userStore.user?.profile?.bio || "",
+});
+
+// 头像相关
+const avatar = ref<string>(userStore.user?.avatar || "");
+const fileInput = ref<HTMLInputElement | null>(null);
+const showPreview = ref(false);
 
 // 密码修改表单
-const account = ref('16568855622')
-const oldPassword = ref('')
-const newPassword = ref('')
-const confirmPassword = ref('')
+const passwordForm = reactive<PasswordForm>({
+  account: userStore.user?.username || "",
+  oldPassword: "",
+  newPassword: "",
+  confirmPassword: "",
+});
 
 function startEdit() {
-    isEditing.value = true
+  isEditing.value = true;
 }
 
 function save() {
-    // 可在此接入后端提交逻辑
-    isEditing.value = false
+  // 可在此接入后端提交逻辑
+  isEditing.value = false;
+}
+
+function cancelEdit() {
+  // 恢复原始数据
+  formData.name = userStore.user?.profile?.realName || "";
+  formData.intro = userStore.user?.profile?.bio || "";
+  isEditing.value = false;
 }
 
 function savePassword() {
-    if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
-        return
-    }
-    if (newPassword.value !== confirmPassword.value) {
-        return
-    }
-    // 对接后端修改密码接口
+  if (
+    !passwordForm.oldPassword ||
+    !passwordForm.newPassword ||
+    !passwordForm.confirmPassword
+  ) {
+    return;
+  }
+  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+    return;
+  }
+  // 对接后端修改密码接口
+}
+
+// 头像相关方法
+function previewAvatar() {
+  if (avatar.value) {
+    showPreview.value = true;
+  }
+}
+
+function closePreview() {
+  showPreview.value = false;
+}
+
+function triggerUpload() {
+  if (!isEditing.value) return;
+  fileInput.value?.click();
+}
+
+function handleFileChange(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (!file) return;
+
+  // 验证文件类型
+  if (!file.type.startsWith("image/")) {
+    alert("请选择图片文件");
+    return;
+  }
+
+  // 验证文件大小 (5MB)
+  if (file.size > 5 * 1024 * 1024) {
+    alert("图片大小不能超过5MB");
+    return;
+  }
+
+  // 创建预览
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    avatar.value = e.target?.result as string;
+  };
+  reader.readAsDataURL(file);
+
+  // 清空input值，避免选择同一文件时不触发change
+  target.value = "";
 }
 </script>
 
-
 <style scoped>
 .personal-center {
-    background: #fff;
-    min-height: 100%;
-    padding: 20px 30px;
+  height: 100%;
+  padding: 20px;
+  background: #fff;
 }
 
-.tabs {
-    display: flex;
-    gap: 24px;
-    border-bottom: 1.5px solid #F1F3F4;
-    padding: 0 0 12px 0;
-    margin-bottom: 30px;
+/* 头像相关样式 */
+.avatar-container {
+  display: flex;
+  align-items: center;
 }
 
-.tab {
-    font-size: 16px;
-    color: #666666;
-    padding-bottom: 8px;
-    position: relative;
-    cursor: default;
+.avatar-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.tab.active {
-    color: #0288D1;
-    font-weight: 500;
+.avatar-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: #f8f9fa;
 }
 
-.tab.active::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: -13px;
-    height: 4px;
-    width: 100%;
-    background: #0288D1;
+.avatar-preview-hint {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
 }
 
-.card {
-    background: #ffffff;
-    padding: 16px 16px 20px;
-    border: 1.5px solid #D8D8D8;
+.avatar-wrapper:hover .avatar-preview-hint {
+  opacity: 1;
 }
 
-.card-title {
-    font-size: 14px;
-    color: #333333;
-    margin-bottom: 12px;
-    padding-bottom: 14px;
-    border-bottom: 1.5px solid #E6E6E6;
-}
-
-.form {
-    margin-top: 130px;
-    background: #ffffff;
-}
-
-.form-row {
-    display: flex;
-    align-items: center;
-    margin-bottom: 16px;
-}
-
-.form-row.stack {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 0 90px;
-}
-
-.form-row.align-start {
-    align-items: flex-start;
-}
-
-.label {
-    width: 72px;
-    font-size: 14px;
-    color: #999999;
-    line-height: 32px;
-}
-
-.input {
-    width: 340px;
-    height: 41px;
-    border: 1.5px solid #D8D8D8;
-    padding: 0 10px;
-    font-size: 14px;
-    color: #333333;
-    background: #F5F8FB;
-}
-
-.input-wide {
-    width: 100%;
-}
-
-
-
-.textarea {
-    flex: 1;
-    width: 100%;
-    min-height: 120px;
-    border: 1.5px solid #D8D8D8;
-    padding: 8px 10px;
-    font-size: 14px;
-    color: #333333;
-    background: #F5F8FB;
-    resize: none;
-}
-
-.actions {
-    margin-top: 30px;
-    display: flex;
-    gap: 12px;
-    padding: 0 90px;
-}
-
-.p-form {
-    padding: 0 10px;
-    margin-top: 10px;
-}
-
-.p-row {
-    display: flex;
-    align-items: center;
-    margin-bottom: 16px;
-}
-
-.p-row.stack {
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.p-label {
-    width: 72px;
-    font-size: 14px;
-    color: #999999;
-    line-height: 32px;
-}
-
-.p-input {
-    width: 320px;
-    height: 41px;
-    border: 1.5px solid #D8D8D8;
-    padding: 0 10px;
-    font-size: 14px;
-    color: #333333;
-    background: #F5F8FB;
-}
-
-.p-input-wide {
-    width: 100%;
-}
-
-.p-actions {
-    margin-top: 30px;
-}
-
-.btn {
-    min-width: 92px;
-    height: 32px;
-    border-radius: 1px;
-    font-size: 14px;
-    cursor: pointer;
-    border: none;
-}
-
-.btn.primary {
-    background: #0288D1;
-    color: #ffffff;
+.avatar-edit-btn {
+  position: absolute !important;
+  bottom: -4px !important;
+  right: -4px !important;
 }
 </style>