diff --git a/server/core/server.go b/server/core/server.go
index c2d60ead4..cac84f98f 100644
--- a/server/core/server.go
+++ b/server/core/server.go
@@ -40,7 +40,7 @@ func RunWindowsServer() {
 
 	fmt.Printf(`
 	%s gin-vue-admin
-	%s: v2.7.8-beta1
+	%s: v2.7.8
 	%s
 	%s: https://github.com/flipped-aurora/gin-vue-admin
 	%s: https://plugin.gin-vue-admin.com
diff --git a/server/docs/docs.go b/server/docs/docs.go
index 4ae77cef9..282629194 100644
--- a/server/docs/docs.go
+++ b/server/docs/docs.go
@@ -9080,7 +9080,7 @@ const docTemplate = `{
 
 // SwaggerInfo holds exported Swagger Info so clients can modify it
 var SwaggerInfo = &swag.Spec{
-	Version:          "v2.7.8-beta1",
+	Version:          "v2.7.8",
 	Host:             "",
 	BasePath:         "",
 	Schemes:          []string{},
diff --git a/server/initialize/internal/gorm.go b/server/initialize/internal/gorm.go
index dcf388bea..ebf5526c3 100644
--- a/server/initialize/internal/gorm.go
+++ b/server/initialize/internal/gorm.go
@@ -6,8 +6,6 @@ import (
 	"gorm.io/gorm"
 	"gorm.io/gorm/logger"
 	"gorm.io/gorm/schema"
-	"log"
-	"os"
 	"time"
 )
 
@@ -34,7 +32,7 @@ func (g *_gorm) Config(prefix string, singular bool) *gorm.Config {
 		general = global.GVA_CONFIG.Mysql.GeneralDB
 	}
 	return &gorm.Config{
-		Logger: logger.New(NewWriter(general, log.New(os.Stdout, "\r\n", log.LstdFlags)), logger.Config{
+		Logger: logger.New(NewWriter(general), logger.Config{
 			SlowThreshold: 200 * time.Millisecond,
 			LogLevel:      general.LogLevel(),
 			Colorful:      true,
diff --git a/server/initialize/internal/gorm_logger_writer.go b/server/initialize/internal/gorm_logger_writer.go
index 955503d87..9774c9635 100644
--- a/server/initialize/internal/gorm_logger_writer.go
+++ b/server/initialize/internal/gorm_logger_writer.go
@@ -3,7 +3,7 @@ package internal
 import (
 	"fmt"
 	"github.com/flipped-aurora/gin-vue-admin/server/config"
-	"go.uber.org/zap"
+	"github.com/flipped-aurora/gin-vue-admin/server/global"
 	"gorm.io/gorm/logger"
 )
 
@@ -12,26 +12,30 @@ type Writer struct {
 	writer logger.Writer
 }
 
-func NewWriter(config config.GeneralDB, writer logger.Writer) *Writer {
-	return &Writer{config: config, writer: writer}
+func NewWriter(config config.GeneralDB) *Writer {
+	return &Writer{config: config}
 }
 
 // Printf 格式化打印日志
 func (c *Writer) Printf(message string, data ...any) {
+
+	// 当有日志时候均需要输出到控制台
+	fmt.Printf(message, data...)
+
+	// 当开启了zap的情况，会打印到日志记录
 	if c.config.LogZap {
 		switch c.config.LogLevel() {
 		case logger.Silent:
-			zap.L().Debug(fmt.Sprintf(message, data...))
+			global.GVA_LOG.Debug(fmt.Sprintf(message, data...))
 		case logger.Error:
-			zap.L().Error(fmt.Sprintf(message, data...))
+			global.GVA_LOG.Error(fmt.Sprintf(message, data...))
 		case logger.Warn:
-			zap.L().Warn(fmt.Sprintf(message, data...))
+			global.GVA_LOG.Warn(fmt.Sprintf(message, data...))
 		case logger.Info:
-			zap.L().Info(fmt.Sprintf(message, data...))
+			global.GVA_LOG.Info(fmt.Sprintf(message, data...))
 		default:
-			zap.L().Info(fmt.Sprintf(message, data...))
+			global.GVA_LOG.Info(fmt.Sprintf(message, data...))
 		}
 		return
 	}
-	c.writer.Printf(message, data...)
 }
diff --git a/server/main.go b/server/main.go
index b4875a87a..4251f420f 100644
--- a/server/main.go
+++ b/server/main.go
@@ -22,7 +22,7 @@ import (
 // @Tag.Description 用户
 
 // @title                       Gin-Vue-Admin Swagger API接口文档
-// @version                     v2.7.8-beta1
+// @version                     v2.7.8
 // @description                 使用gin+vue进行极速开发的全栈开发基础平台
 // @securityDefinitions.apikey  ApiKeyAuth
 // @in                          header
diff --git a/server/resource/package/server/api/api.go.tpl b/server/resource/package/server/api/api.go.tpl
index 26d65d909..5d9af2c5d 100644
--- a/server/resource/package/server/api/api.go.tpl
+++ b/server/resource/package/server/api/api.go.tpl
@@ -130,7 +130,7 @@ func ({{.Abbreviation}}Api *{{.StructName}}Api) Update{{.StructName}}(c *gin.Con
 // @Security ApiKeyAuth
 // @Accept application/json
 // @Produce application/json
-// @Param data query {{.PrimaryField.FieldType}} true "用id查询{{.Description}}"
+// @Param {{.PrimaryField.FieldJson}} query {{.PrimaryField.FieldType}} true "用id查询{{.Description}}"
 // @Success 200 {object} response.Response{data={{.Package}}.{{.StructName}},msg=string} "查询成功"
 // @Router /{{.Abbreviation}}/find{{.StructName}} [get]
 func ({{.Abbreviation}}Api *{{.StructName}}Api) Find{{.StructName}}(c *gin.Context) {
diff --git a/server/resource/plugin/server/api/api.go.template b/server/resource/plugin/server/api/api.go.template
index a5ee38c6a..683824081 100644
--- a/server/resource/plugin/server/api/api.go.template
+++ b/server/resource/plugin/server/api/api.go.template
@@ -130,7 +130,7 @@ func (a *{{.Abbreviation}}) Update{{.StructName}}(c *gin.Context) {
 // @Security ApiKeyAuth
 // @Accept application/json
 // @Produce application/json
-// @Param data query model.{{.StructName}} true "用id查询{{.Description}}"
+// @Param {{.PrimaryField.FieldJson}} query {{.PrimaryField.FieldType}} true "用id查询{{.Description}}"
 // @Success 200 {object} response.Response{data=model.{{.StructName}},msg=string} "查询成功"
 // @Router /{{.Abbreviation}}/find{{.StructName}} [get]
 func (a *{{.Abbreviation}}) Find{{.StructName}}(c *gin.Context) {
diff --git a/server/service/system/sys_authority.go b/server/service/system/sys_authority.go
index 4cedf8d59..1db198503 100644
--- a/server/service/system/sys_authority.go
+++ b/server/service/system/sys_authority.go
@@ -226,7 +226,10 @@ func (authorityService *AuthorityService) GetStructAuthorityList(authorityID uin
 	if len(authorities) > 0 {
 		for k := range authorities {
 			list = append(list, authorities[k].AuthorityId)
-			_, err = authorityService.GetStructAuthorityList(authorities[k].AuthorityId)
+			childrenList, err := authorityService.GetStructAuthorityList(authorities[k].AuthorityId)
+			if err == nil {
+				list = append(list, childrenList...)
+			}
 		}
 	}
 	if *auth.ParentId == 0 {
diff --git a/web/package.json b/web/package.json
index cba45c982..5b41ed94f 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gin-vue-admin",
-  "version": "2.7.8-beta1",
+  "version": "2.7.8",
   "private": true,
   "scripts": {
     "serve": "node openDocument.js && vite --host --mode development",
diff --git a/web/src/api/fileUploadAndDownload.js b/web/src/api/fileUploadAndDownload.js
index 2bff5bb47..0f260b639 100644
--- a/web/src/api/fileUploadAndDownload.js
+++ b/web/src/api/fileUploadAndDownload.js
@@ -55,3 +55,13 @@ export const importURL = (data) => {
     data
   })
 }
+
+
+// 上传文件 暂时用于头像上传
+export const uploadFile = (data) => {
+  return service({
+    url: "/fileUploadAndDownload/upload",
+    method: "post",
+    data,
+  });
+};
\ No newline at end of file
diff --git a/web/src/core/config.js b/web/src/core/config.js
index 9a03f26b0..9c0137a7c 100644
--- a/web/src/core/config.js
+++ b/web/src/core/config.js
@@ -17,7 +17,7 @@ export const viteLogo = (env) => {
         `> 欢迎使用Gin-Vue-Admin，开源地址：https://github.com/flipped-aurora/gin-vue-admin`
       )
     )
-    console.log(greenText(`> 当前版本:vv2.7.8-beta1`))
+    console.log(greenText(`> 当前版本:v2.7.8`))
     console.log(greenText(`> 加群方式:微信：shouzi_1994 QQ群：470239250`))
     console.log(
       greenText(`> 项目地址：https://github.com/flipped-aurora/gin-vue-admin`)
diff --git a/web/src/core/gin-vue-admin.js b/web/src/core/gin-vue-admin.js
index ae71f1b7f..0280e0a75 100644
--- a/web/src/core/gin-vue-admin.js
+++ b/web/src/core/gin-vue-admin.js
@@ -10,7 +10,7 @@ export default {
     register(app)
     console.log(`
        欢迎使用 Gin-Vue-Admin
-       当前版本:v2.7.8-beta1
+       当前版本:v2.7.8
        加群方式:微信：shouzi_1994 QQ群：622360840
        项目地址：https://github.com/flipped-aurora/gin-vue-admin
        插件市场:https://plugin.gin-vue-admin.com
diff --git a/web/src/view/person/person.vue b/web/src/view/person/person.vue
index 3cf2ce6cf..e20327921 100644
--- a/web/src/view/person/person.vue
+++ b/web/src/view/person/person.vue
@@ -1,171 +1,226 @@
 <template>
-  <div class="gva-form-box">
-    <div class="grid grid-cols-12 w-full gap-2">
-      <div class="col-span-3 h-full">
-        <div
-          class="w-full h-full bg-white dark:bg-slate-900 px-4 py-8 rounded-lg shadow-lg box-border"
-        >
-          <div
-            class="user-card px-6 text-center bg-white dark:bg-slate-900 shrink-0"
-          >
-            <div class="flex justify-center">
-              <SelectImage
-                v-model="userStore.userInfo.headerImg"
-                file-type="image"
-              />
-            </div>
-            <div class="py-6 text-center">
-              <p
-                v-if="!editFlag"
-                class="text-3xl flex justify-center items-center gap-4"
-              >
-                {{ userStore.userInfo.nickName }}
-                <el-icon
-                  class="cursor-pointer text-sm"
-                  color="#66b1ff"
-                  @click="openEdit"
-                >
-                  <edit />
-                </el-icon>
-              </p>
-              <p v-if="editFlag" class="flex justify-center items-center gap-4">
-                <el-input v-model="nickName" />
-                <el-icon
-                  class="cursor-pointer"
-                  color="#67c23a"
-                  @click="enterEdit"
-                >
-                  <check />
-                </el-icon>
-                <el-icon
-                  class="cursor-pointer"
-                  color="#f23c3c"
-                  @click="closeEdit"
-                >
-                  <close />
-                </el-icon>
-              </p>
-              <p class="text-gray-500 mt-2 text-md">
-                这个家伙很懒，什么都没有留下
-              </p>
-            </div>
-            <div class="w-full h-full text-left">
-              <ul class="inline-block h-full w-full">
-                <li class="info-list">
-                  <el-icon>
-                    <user />
-                  </el-icon>
-                  {{ userStore.userInfo.nickName }}
-                </li>
-                <el-tooltip
-                  class="item"
-                  effect="light"
-                  content="北京反转极光科技有限公司-技术部-前端事业群"
-                  placement="top"
-                >
-                  <li class="info-list">
-                    <el-icon>
-                      <data-analysis />
+  <div class="profile-container">
+    <!-- 顶部个人信息卡片 -->
+    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm mb-8">
+      <!-- 顶部背景图 -->
+      <div class="h-48 bg-blue-50 dark:bg-slate-600 relative">
+        <div class="absolute inset-0 bg-pattern opacity-7"></div>
+      </div>
+
+      <!-- 个人信息区 -->
+      <div class="px-8 -mt-20 pb-8">
+        <div class="flex flex-col lg:flex-row items-start gap-8">
+          <!-- 左侧头像 -->
+          <div class="profile-avatar-wrapper flex-shrink-0 mx-auto lg:mx-0">
+            <ProfileAvatar
+              v-model="userStore.userInfo.headerImg"
+              @update:modelValue="handleAvatarChange"
+            />
+          </div>
+
+          <!-- 右侧信息 -->
+          <div class="flex-1 pt-20 w-full">
+            <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
+              <div>
+                <div class="flex items-center gap-4 mb-4">
+                  <div v-if="!editFlag" class="text-2xl font-bold flex items-center gap-3 text-gray-800 dark:text-gray-100">
+                    {{ userStore.userInfo.nickName }}
+                    <el-icon
+                      class="cursor-pointer text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors duration-200"
+                      @click="openEdit"
+                    >
+                      <edit />
                     </el-icon>
-                    北京反转极光科技有限公司-技术部-前端事业群
-                  </li>
-                </el-tooltip>
-                <li class="info-list">
-                  <el-icon>
-                    <video-camera />
-                  </el-icon>
-                  中国·北京市·朝阳区
-                </li>
-                <el-tooltip
-                  class="item"
-                  effect="light"
-                  content="GoLang/JavaScript/Vue/Gorm"
-                  placement="top"
-                >
-                  <li class="info-list">
-                    <el-icon>
-                      <medal />
-                    </el-icon>
-                    GoLang/JavaScript/Vue/Gorm
-                  </li>
-                </el-tooltip>
-              </ul>
+                  </div>
+                  <div v-else class="flex items-center gap-3">
+                    <el-input
+                      v-model="nickName"
+                      class="w-48"
+                      size="large"
+                    />
+                    <el-button type="success" circle @click="enterEdit">
+                      <el-icon><check /></el-icon>
+                    </el-button>
+                    <el-button type="danger" circle @click="closeEdit">
+                      <el-icon><close /></el-icon>
+                    </el-button>
+                  </div>
+                </div>
+
+                <div class="flex flex-col lg:flex-row items-start lg:items-center gap-4 lg:gap-8 text-gray-500 dark:text-gray-400">
+                  <div class="flex items-center gap-2">
+                    <el-icon><location /></el-icon>
+                    <span>中国·北京市·朝阳区</span>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <el-icon><office-building /></el-icon>
+                    <span>北京反转极光科技有限公司</span>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <el-icon><user /></el-icon>
+                    <span>技术部·前端事业群</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="flex gap-4 mt-4 lg:mt-0">
+                <el-button type="primary" plain>
+                  <el-icon><message /></el-icon>
+                  发送消息
+                </el-button>
+                <el-button>
+                  <el-icon><share /></el-icon>
+                  分享主页
+                </el-button>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="col-span-9">
-        <div
-          class="bg-white dark:bg-slate-900 h-full px-4 py-8 rounded-lg shadow-lg box-border"
-        >
-          <el-tabs v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane label="账号绑定" name="second">
-              <ul>
-                <li class="borderd">
-                  <p class="pb-2.5 text-xl text-gray-600">密保手机</p>
-                  <p class="pb-2.5 text-lg text-gray-400">
-                    已绑定手机:{{ userStore.userInfo.phone }}
-                    <a
-                      href="javascript:void(0)"
-                      class="float-right text-blue-400"
-                      @click="changePhoneFlag = true"
-                      >立即修改</a
-                    >
-                  </p>
-                </li>
-                <li class="borderd pt-2.5">
-                  <p class="pb-2.5 text-xl text-gray-600">密保邮箱</p>
-                  <p class="pb-2.5 text-lg text-gray-400">
-                    已绑定邮箱：{{ userStore.userInfo.email }}
-                    <a
-                      href="javascript:void(0)"
-                      class="float-right text-blue-400"
-                      @click="changeEmailFlag = true"
-                      >立即修改</a
-                    >
-                  </p>
-                </li>
-                <li class="borderd pt-2.5">
-                  <p class="pb-2.5 text-xl text-gray-600">密保问题</p>
-                  <p class="pb-2.5 text-lg text-gray-400">
-                    未设置密保问题
-                    <a
-                      href="javascript:void(0)"
-                      class="float-right text-blue-400"
-                      >去设置</a
-                    >
-                  </p>
-                </li>
-                <li class="borderd pt-2.5">
-                  <p class="pb-2.5 text-xl text-gray-600">修改密码</p>
-                  <p class="pb-2.5 text-lg text-gray-400">
-                    修改个人密码
-                    <a
-                      href="javascript:void(0)"
-                      class="float-right text-blue-400"
-                      @click="showPassword = true"
-                      >修改密码</a
-                    >
-                  </p>
-                </li>
-              </ul>
+    </div>
+
+    <!-- 主要内容区 -->
+    <div class="grid lg:grid-cols-12 md:grid-cols-1 gap-8">
+      <!-- 左侧信息栏 -->
+      <div class="lg:col-span-4">
+        <div class="bg-white dark:bg-slate-800 rounded-xl p-6 mb-6 profile-card">
+          <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
+            <el-icon class="text-blue-500"><info-filled /></el-icon>
+            基本信息
+          </h2>
+          <div class="space-y-4">
+            <div class="flex items-center gap-3 text-gray-600 dark:text-gray-300">
+              <el-icon class="text-blue-500"><phone /></el-icon>
+              <span class="font-medium">手机号码：</span>
+              <span>{{ userStore.userInfo.phone || '未设置' }}</span>
+              <el-button
+                link
+                type="primary"
+                class="ml-auto"
+                @click="changePhoneFlag = true"
+              >
+                修改
+              </el-button>
+            </div>
+            <div class="flex items-center gap-3 text-gray-600 dark:text-gray-300">
+              <el-icon class="text-green-500"><message /></el-icon>
+              <span class="font-medium">邮箱地址：</span>
+              <span>{{ userStore.userInfo.email || '未设置' }}</span>
+              <el-button
+                link
+                type="primary"
+                class="ml-auto"
+                @click="changeEmailFlag = true"
+              >
+                修改
+              </el-button>
+            </div>
+            <div class="flex items-center gap-3 text-gray-600 dark:text-gray-300">
+              <el-icon class="text-purple-500"><lock /></el-icon>
+              <span class="font-medium">账号密码：</span>
+              <span>已设置</span>
+              <el-button
+                link
+                type="primary"
+                class="ml-auto"
+                @click="showPassword = true"
+              >
+                修改
+              </el-button>
+            </div>
+          </div>
+        </div>
+
+        <div class="bg-white dark:bg-slate-800 rounded-xl p-6 profile-card">
+          <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
+            <el-icon class="text-blue-500"><medal /></el-icon>
+            技能特长
+          </h2>
+          <div class="flex flex-wrap gap-2">
+            <el-tag effect="plain" type="success">GoLang</el-tag>
+            <el-tag effect="plain" type="warning">JavaScript</el-tag>
+            <el-tag effect="plain" type="danger">Vue</el-tag>
+            <el-tag effect="plain" type="info">Gorm</el-tag>
+            <el-button link class="text-sm">
+              <el-icon><plus /></el-icon>
+              添加技能
+            </el-button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧内容区 -->
+      <div class="lg:col-span-8">
+        <div class="bg-white dark:bg-slate-800 rounded-xl p-6 profile-card">
+          <el-tabs class="custom-tabs">
+            <el-tab-pane>
+              <template #label>
+                <div class="flex items-center gap-2">
+                  <el-icon><data-line /></el-icon>
+                  数据统计
+                </div>
+              </template>
+              <div class="grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-6 py-6">
+                <div class="stat-card">
+                  <div class="text-2xl lg:text-4xl font-bold text-blue-500 mb-2">138</div>
+                  <div class="text-gray-500 text-sm">项目参与</div>
+                </div>
+                <div class="stat-card">
+                  <div class="text-2xl lg:text-4xl font-bold text-green-500 mb-2">2.3k</div>
+                  <div class="text-gray-500 text-sm">代码提交</div>
+                </div>
+                <div class="stat-card">
+                  <div class="text-2xl lg:text-4xl font-bold text-purple-500 mb-2">95%</div>
+                  <div class="text-gray-500 text-sm">任务完成</div>
+                </div>
+                <div class="stat-card">
+                  <div class="text-2xl lg:text-4xl font-bold text-yellow-500 mb-2">12</div>
+                  <div class="text-gray-500 text-sm">获得勋章</div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane>
+              <template #label>
+                <div class="flex items-center gap-2">
+                  <el-icon><calendar /></el-icon>
+                  近期动态
+                </div>
+              </template>
+              <div class="py-6">
+                <el-timeline>
+                  <el-timeline-item
+                    v-for="(activity, index) in activities"
+                    :key="index"
+                    :type="activity.type"
+                    :timestamp="activity.timestamp"
+                    :hollow="true"
+                    class="pb-6"
+                  >
+                    <h3 class="text-base font-medium mb-1">{{ activity.title }}</h3>
+                    <p class="text-gray-500 text-sm">{{ activity.content }}</p>
+                  </el-timeline-item>
+                </el-timeline>
+              </div>
             </el-tab-pane>
           </el-tabs>
         </div>
       </div>
     </div>
 
+    <!-- 弹窗 -->
     <el-dialog
       v-model="showPassword"
       title="修改密码"
-      width="360px"
+      width="400px"
+      class="custom-dialog"
       @close="clearPassword"
     >
       <el-form
         ref="modifyPwdForm"
         :model="pwdModify"
         :rules="rules"
-        label-width="80px"
+        label-width="90px"
+        class="py-4"
       >
         <el-form-item :minlength="6" label="原密码" prop="password">
           <el-input v-model="pwdModify.password" show-password />
@@ -189,76 +244,91 @@
       </template>
     </el-dialog>
 
-    <el-dialog v-model="changePhoneFlag" title="绑定手机" width="600px">
-      <el-form :model="phoneForm">
-        <el-form-item label="手机号" label-width="120px">
-          <el-input
-            v-model="phoneForm.phone"
-            placeholder="请输入手机号"
-            autocomplete="off"
-          />
+    <el-dialog
+      v-model="changePhoneFlag"
+      title="修改手机号"
+      width="400px"
+      class="custom-dialog"
+    >
+      <el-form :model="phoneForm" label-width="80px" class="py-4">
+        <el-form-item label="手机号">
+          <el-input v-model="phoneForm.phone" placeholder="请输入新的手机号码">
+            <template #prefix>
+              <el-icon><phone /></el-icon>
+            </template>
+          </el-input>
         </el-form-item>
-        <el-form-item label="验证码" label-width="120px">
-          <div class="flex w-full gap-4">
+        <el-form-item label="验证码">
+          <div class="flex gap-4">
             <el-input
               v-model="phoneForm.code"
+              placeholder="请输入验证码"
               class="flex-1"
-              autocomplete="off"
-              placeholder="请自行设计短信服务，此处为模拟随便写"
-              style="width: 300px"
-            />
-            <el-button type="primary" :disabled="time > 0" @click="getCode">{{
-              time > 0 ? `(${time}s)后重新获取` : '获取验证码'
-            }}</el-button>
+            >
+              <template #prefix>
+                <el-icon><key /></el-icon>
+              </template>
+            </el-input>
+            <el-button
+              type="primary"
+              :disabled="time > 0"
+              class="w-32"
+              @click="getCode"
+            >
+              {{ time > 0 ? `${time}s` : '获取验证码' }}
+            </el-button>
           </div>
         </el-form-item>
       </el-form>
       <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="closeChangePhone">{{
-            t('general.cancel')
-          }}</el-button>
-          <el-button type="primary" @click="changePhone">更改</el-button>
-        </span>
+        <div class="dialog-footer">
+          <el-button @click="closeChangePhone"> {{ t('general.cancel') }} </el-button>
+          <el-button type="primary" @click="changePhone"> {{ t('general.confirm') }} </el-button>
+        </div>
       </template>
     </el-dialog>
 
-    <el-dialog v-model="changeEmailFlag" title="绑定邮箱" width="600px">
-      <el-form :model="emailForm">
-        <el-form-item label="邮箱" label-width="120px">
-          <el-input
-            v-model="emailForm.email"
-            placeholder="请输入邮箱"
-            autocomplete="off"
-          />
+    <el-dialog
+      v-model="changeEmailFlag"
+      title="修改邮箱"
+      width="400px"
+      class="custom-dialog"
+    >
+      <el-form :model="emailForm" label-width="80px" class="py-4">
+        <el-form-item label="邮箱">
+          <el-input v-model="emailForm.email" placeholder="请输入新的邮箱地址">
+            <template #prefix>
+              <el-icon><message /></el-icon>
+            </template>
+          </el-input>
         </el-form-item>
-        <el-form-item label="验证码" label-width="120px">
-          <div class="flex w-full gap-4">
+        <el-form-item label="验证码">
+          <div class="flex gap-4">
             <el-input
               v-model="emailForm.code"
+              placeholder="请输入验证码"
               class="flex-1"
-              placeholder="请自行设计邮件服务，此处为模拟随便写"
-              autocomplete="off"
-              style="width: 300px"
-            />
+            >
+              <template #prefix>
+                <el-icon><key /></el-icon>
+              </template>
+            </el-input>
             <el-button
               type="primary"
               :disabled="emailTime > 0"
+              class="w-32"
               @click="getEmailCode"
-              >{{
-                emailTime > 0 ? `(${emailTime}s)后重新获取` : '获取验证码'
-              }}</el-button
             >
+              {{ emailTime > 0 ? `${emailTime}s` : '获取验证码' }}
+            </el-button>
           </div>
         </el-form-item>
       </el-form>
       <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="closeChangeEmail">{{
-            t('general.cancel')
-          }}</el-button>
-          <el-button type="primary" @click="changeEmail">更改</el-button>
-        </span>
+        <div class="dialog-footer">
+          <el-button @click="closeChangeEmail">{{ t('general.cancel') }}</el-button>
+          <el-button type="primary" @click="changeEmail">{{ t('general.confirm') }}</el-button>
+        </div>
       </template>
     </el-dialog>
   </div>
@@ -266,10 +336,10 @@
 
 <script setup>
   import { setSelfInfo, changePassword } from '@/api/user.js'
-  import { reactive, ref, watch } from 'vue'
+  import { reactive, ref } from 'vue'
   import { ElMessage } from 'element-plus'
   import { useUserStore } from '@/pinia/modules/user'
-  import SelectImage from '@/components/selectImage/selectImage.vue'
+  import ProfileAvatar from '@/components/Avatar/ProfileAvatar.vue'
   import { useI18n } from 'vue-i18n' // added by mohamed hassan to support multilanguage
 
   const { t } = useI18n() // added by mohamed hassan to support multilanguage
@@ -278,7 +348,13 @@
     name: 'Person'
   })
 
-  const activeName = ref('second')
+  const userStore = useUserStore()
+  const modifyPwdForm = ref(null)
+  const showPassword = ref(false)
+  const pwdModify = ref({})
+  const nickName = ref('')
+  const editFlag = ref(false)
+
   const rules = reactive({
     password: [
       { required: true, message: '请输入密码', trigger: 'blur' },
@@ -304,12 +380,6 @@
     ]
   })
 
-  const userStore = useUserStore()
-  const modifyPwdForm = ref(null)
-  const showPassword = ref(false)
-  const pwdModify = ref({})
-  const nickName = ref('')
-  const editFlag = ref(false)
   const savePassword = async () => {
     modifyPwdForm.value.validate((valid) => {
       if (valid) {
@@ -322,8 +392,6 @@
           }
           showPassword.value = false
         })
-      } else {
-        return false
       }
     })
   }
@@ -334,23 +402,9 @@
       newPassword: '',
       confirmPassword: ''
     }
-    modifyPwdForm.value.clearValidate()
+    modifyPwdForm.value?.clearValidate()
   }
 
-  watch(
-    () => userStore.userInfo.headerImg,
-    async (val) => {
-      const res = await setSelfInfo({ headerImg: val })
-      if (res.code === 0) {
-        userStore.ResetUserInfo({ headerImg: val })
-        ElMessage({
-          type: 'success',
-          message: t('general.setupSuccess')
-        })
-      }
-    }
-  )
-
   const openEdit = () => {
     nickName.value = userStore.userInfo.nickName
     editFlag.value = true
@@ -367,19 +421,12 @@
     })
     if (res.code === 0) {
       userStore.ResetUserInfo({ nickName: nickName.value })
-      ElMessage({
-        type: 'success',
-        message: t('general.setupSuccess')
-      })
+      ElMessage.success( t('general.modifySuccess'))
     }
     nickName.value = ''
     editFlag.value = false
   }
 
-  const handleClick = (tab, event) => {
-    console.log(tab, event)
-  }
-
   const changePhoneFlag = ref(false)
   const time = ref(0)
   const phoneForm = reactive({
@@ -445,17 +492,118 @@
       closeChangeEmail()
     }
   }
-</script>
 
-<style lang="scss">
-  .borderd {
-    @apply border-b-2 border-solid border-gray-100 dark:border-gray-500 border-t-0 border-r-0 border-l-0;
-    &:last-child {
-      @apply border-b-0;
+  const handleAvatarChange = async (newUrl) => {
+    const res = await setSelfInfo({ headerImg: newUrl })
+    if (res.code === 0) {
+      userStore.ResetUserInfo({ headerImg: newUrl })
     }
   }
 
-  .info-list {
-    @apply w-full whitespace-nowrap overflow-hidden text-ellipsis py-3 text-lg text-gray-700;
+  // 添加活动数据
+  const activities = [
+    {
+      timestamp: '2024-01-10',
+      title: '完成项目里程碑',
+      content: '成功完成第三季度主要项目开发任务，获得团队一致好评',
+      type: 'primary'
+    },
+    {
+      timestamp: '2024-01-11',
+      title: '代码审核完成',
+      content: '完成核心模块代码审核，提出多项改进建议并获采纳',
+      type: 'success'
+    },
+    {
+      timestamp: '2024-01-12',
+      title: '技术分享会',
+      content: '主持团队技术分享会，分享前端性能优化经验',
+      type: 'warning'
+    },
+    {
+      timestamp: '2024-01-13',
+      title: '新功能上线',
+      content: '成功上线用户反馈的新特性，显著提升用户体验',
+      type: 'danger'
+    }
+  ]
+</script>
+
+<style lang="scss">
+  .profile-container {
+    @apply p-4 lg:p-6 min-h-screen bg-gray-50 dark:bg-slate-900;
+
+    .bg-pattern {
+      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    }
+
+    .profile-card {
+      @apply shadow-sm hover:shadow-md transition-shadow duration-300;
+    }
+
+    .profile-action-btn {
+      @apply bg-white/10 hover:bg-white/20 border-white/20;
+      .el-icon {
+        @apply mr-1;
+      }
+    }
+
+    .stat-card {
+      @apply p-4 lg:p-6 rounded-lg bg-gray-50 dark:bg-slate-700/50 text-center hover:shadow-md transition-all duration-300;
+    }
+
+    .custom-tabs {
+      :deep(.el-tabs__nav-wrap::after) {
+        @apply h-0.5 bg-gray-100 dark:bg-gray-700;
+      }
+      :deep(.el-tabs__active-bar) {
+        @apply h-0.5 bg-blue-500;
+      }
+      :deep(.el-tabs__item) {
+        @apply text-base font-medium px-6;
+        .el-icon {
+          @apply mr-1 text-lg;
+        }
+        &.is-active {
+          @apply text-blue-500;
+        }
+      }
+      :deep(.el-timeline-item__node--normal) {
+        @apply left-[-2px];
+      }
+      :deep(.el-timeline-item__wrapper) {
+        @apply pl-8;
+      }
+      :deep(.el-timeline-item__timestamp) {
+        @apply text-gray-400 text-sm;
+      }
+    }
+
+    .custom-dialog {
+      :deep(.el-dialog__header) {
+        @apply mb-0 pb-4 border-b border-gray-100 dark:border-gray-700;
+      }
+      :deep(.el-dialog__footer) {
+        @apply mt-0 pt-4 border-t border-gray-100 dark:border-gray-700;
+      }
+      :deep(.el-input__wrapper) {
+        @apply shadow-none;
+      }
+      :deep(.el-input__prefix) {
+        @apply mr-2;
+      }
+    }
+
+    .edit-input {
+      :deep(.el-input__wrapper) {
+        @apply bg-white/10 border-white/20 shadow-none;
+        input {
+          @apply text-white;
+          &::placeholder {
+            @apply text-white/60;
+          }
+        }
+      }
+    }
   }
 </style>