From 45b493ee983ae0ff6b6effbe73b52b7f958dc86c Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Sat, 22 Nov 2025 09:12:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/my/My.vue       | 202 ++++++++++++++++-
 pages.json                 |   7 +
 pages/my/profile/index.vue | 449 +++++++++++++++++++++++++++++++++++++
 3 files changed, 650 insertions(+), 8 deletions(-)
 create mode 100644 pages/my/profile/index.vue

diff --git a/components/my/My.vue b/components/my/My.vue
index e196065..36b35b9 100644
--- a/components/my/My.vue
+++ b/components/my/My.vue
@@ -1,5 +1,46 @@
 <template>
   <view class="mine-page">
+    <!-- 个人资料卡片 -->
+    <view class="profile-card" @click="goToProfile">
+      <view class="profile-header">
+        <view class="avatar-wrapper">
+          <image 
+            v-if="userInfo?.user?.avatar" 
+            class="avatar-img" 
+            :src="userInfo.user.avatar" 
+            mode="aspectFill"
+          />
+          <view v-else class="avatar-placeholder">
+            <text class="avatar-text">{{ getAvatarText(userInfo?.user?.nickName) }}</text>
+          </view>
+        </view>
+        <view class="profile-info">
+          <view class="name-row">
+            <text class="user-name">{{ userInfo?.user?.nickName || '--' }}</text>
+            <text v-if="userInfo?.roles?.[0]" class="role-badge">{{ userInfo.roles[0] }}</text>
+          </view>
+          <text class="dept-name">{{ userInfo?.user?.deptName || '--' }}</text>
+        </view>
+        <view class="arrow-icon">›</view>
+      </view>
+<!--      <view class="profile-stats">-->
+<!--        <view class="stat-item">-->
+<!--          <text class="stat-value">{{ userInfo?.user?.taskCount || 0 }}</text>-->
+<!--          <text class="stat-label">任务数</text>-->
+<!--        </view>-->
+<!--        <view class="stat-divider"></view>-->
+<!--        <view class="stat-item">-->
+<!--          <text class="stat-value">{{ userInfo?.user?.projectCount || 0 }}</text>-->
+<!--          <text class="stat-label">项目数</text>-->
+<!--        </view>-->
+<!--        <view class="stat-divider"></view>-->
+<!--        <view class="stat-item">-->
+<!--          <text class="stat-value">{{ userInfo?.user?.taskNum || 0 }}</text>-->
+<!--          <text class="stat-label">任务编号</text>-->
+<!--        </view>-->
+<!--      </view>-->
+    </view>
+
     <view 
       class="card settings-card"
       v-if="showPrivateSwitch"
@@ -183,6 +224,19 @@ const handleUpdate = () => {
   showUpdateDialog(updateData)
 }
 
+// 获取头像文字
+const getAvatarText = (name) => {
+  if (!name) return '?'
+  return name.charAt(0).toUpperCase()
+}
+
+// 跳转到个人资料详情页
+const goToProfile = () => {
+  uni.navigateTo({
+    url: '/pages/my/profile/index'
+  })
+}
+
 const onLogout = async () => {
   if (loading.value) return
   loading.value = true
@@ -203,22 +257,157 @@ const onLogout = async () => {
 
 <style lang="scss" scoped>
 .mine-page {
-
+  padding: 24rpx;
   background-color: #f6f7fb;
-
+  min-height: 100vh;
   box-sizing: border-box;
 }
 
+.profile-card {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 24rpx;
+  padding: 40rpx 32rpx;
+  margin-bottom: 24rpx;
+  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+.profile-card::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.profile-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 32rpx;
+  position: relative;
+  z-index: 1;
+}
+
+.avatar-wrapper {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.2);
+  border: 4rpx solid rgba(255, 255, 255, 0.3);
+  margin-right: 24rpx;
+  flex-shrink: 0;
+}
+
+.avatar-img {
+  width: 100%;
+  height: 100%;
+}
+
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.avatar-text {
+  font-size: 48rpx;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.profile-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.name-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+
+.user-name {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #ffffff;
+  margin-right: 16rpx;
+}
+
+.role-badge {
+  font-size: 20rpx;
+  background: rgba(255, 255, 255, 0.25);
+  color: #ffffff;
+  padding: 4rpx 12rpx;
+  border-radius: 12rpx;
+  font-weight: 500;
+}
+
+.dept-name {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.arrow-icon {
+  font-size: 48rpx;
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: 300;
+  margin-left: 16rpx;
+}
+
+.profile-stats {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding-top: 32rpx;
+  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+  position: relative;
+  z-index: 1;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.stat-value {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 8rpx;
+}
+
+.stat-label {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.stat-divider {
+  width: 1rpx;
+  height: 60rpx;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 0 16rpx;
+}
+
 .card {
   background: #ffffff;
   border-radius: 16rpx;
   padding: 32rpx;
+  margin-bottom: 24rpx;
   box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
 }
 
-.settings-card {
-  margin-bottom: 24rpx;
-}
 
 .setting-row {
   display: flex;
@@ -238,9 +427,6 @@ const onLogout = async () => {
   color: #6b7280;
 }
 
-.version-card {
-  margin-bottom: 24rpx;
-}
 
 .version-header {
   margin-bottom: 24rpx;
diff --git a/pages.json b/pages.json
index c6385cc..b2c8fb5 100644
--- a/pages.json
+++ b/pages.json
@@ -180,6 +180,13 @@
 			"style": {
 				"navigationBarTitleText": "公告详情"
 			}
+		},
+		{
+			"path": "pages/my/profile/index",
+			"style": {
+				"navigationBarTitleText": "个人资料",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 
diff --git a/pages/my/profile/index.vue b/pages/my/profile/index.vue
new file mode 100644
index 0000000..66a6d79
--- /dev/null
+++ b/pages/my/profile/index.vue
@@ -0,0 +1,449 @@
+<template>
+  <view class="profile-detail-page">
+    <!-- 自定义导航栏 -->
+    <view class="custom-navbar">
+      <view class="navbar-content">
+        <text class="nav-btn" @click="handleBack">‹</text>
+        <text class="nav-title">个人资料</text>
+        <text class="nav-btn" style="opacity: 0;">占位</text>
+      </view>
+    </view>
+
+    <!-- 内容区域 -->
+    <scroll-view class="content-scroll" scroll-y>
+      <!-- 头像和基本信息卡片 -->
+      <view class="profile-header-card">
+        <view class="avatar-section">
+          <view class="avatar-wrapper-large">
+            <image 
+              v-if="userInfo?.user?.avatar" 
+              class="avatar-img-large" 
+              :src="userInfo.user.avatar" 
+              mode="aspectFill"
+            />
+            <view v-else class="avatar-placeholder-large">
+              <text class="avatar-text-large">{{ getAvatarText(userInfo?.user?.nickName) }}</text>
+            </view>
+          </view>
+          <view class="user-basic-info">
+            <text class="user-name-large">{{ userInfo?.user?.nickName || '--' }}</text>
+            <view style="display: flex;align-items: center;gap: 10px">
+              <view class="user-dept-large">{{ userInfo?.user?.deptName || '--' }}</view>
+              <view class="role-tags" v-if="userInfo?.roles && userInfo.roles.length > 0">
+                <text
+                    class="role-tag"
+                    v-for="(role, index) in userInfo.roles"
+                    :key="index"
+                >
+                  {{ role }}
+                </text>
+              </view>
+            </view>
+
+          </view>
+        </view>
+      </view>
+
+      <!-- 统计信息卡片 -->
+      <view class="info-card stats-card">
+        <view class="card-title">工作统计</view>
+        <view class="stats-grid">
+          <view class="stat-box">
+            <text class="stat-number">{{ userInfo?.user?.taskCount || 0 }}</text>
+            <text class="stat-desc">任务数</text>
+          </view>
+          <view class="stat-box">
+            <text class="stat-number">{{ userInfo?.user?.projectCount || 0 }}</text>
+            <text class="stat-desc">项目数</text>
+          </view>
+          <view class="stat-box">
+            <text class="stat-number">{{ userInfo?.user?.taskNum || 0 }}</text>
+            <text class="stat-desc">任务编号</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 基本信息卡片 -->
+      <view class="info-card">
+        <view class="card-title">基本信息</view>
+        <view class="info-list">
+          <view class="info-item">
+            <text class="info-label">用户名</text>
+            <text class="info-value">{{ userInfo?.user?.userName || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">工号</text>
+            <text class="info-value">{{ userInfo?.user?.userNo || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">手机号</text>
+            <text class="info-value">{{ userInfo?.user?.phonenumber || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">邮箱</text>
+            <text class="info-value">{{ userInfo?.user?.email || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">性别</text>
+            <text class="info-value">{{ getSexText(userInfo?.user?.sex) }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">生日</text>
+            <text class="info-value">{{ userInfo?.user?.birthday || '--' }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 部门信息卡片 -->
+      <view class="info-card" v-if="userInfo?.user?.dept">
+        <view class="card-title">部门信息</view>
+        <view class="info-list">
+          <view class="info-item">
+            <text class="info-label">部门名称</text>
+            <text class="info-value">{{ userInfo.user.dept.deptName || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">部门负责人</text>
+            <text class="info-value">{{ userInfo.user.dept.leader || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">部门邮箱</text>
+            <text class="info-value">{{ userInfo.user.dept.email || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">部门电话</text>
+            <text class="info-value">{{ userInfo.user.dept.phone || '--' }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 工作信息卡片 -->
+      <view class="info-card">
+        <view class="card-title">工作信息</view>
+        <view class="info-list">
+          <view class="info-item">
+            <text class="info-label">入职日期</text>
+            <text class="info-value">{{ userInfo?.user?.employDate || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">离职日期</text>
+            <text class="info-value">{{ userInfo?.user?.resignDate || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">创建时间</text>
+            <text class="info-value">{{ userInfo?.user?.createTime || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">最后登录</text>
+            <text class="info-value">{{ userInfo?.user?.loginDate || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">登录IP</text>
+            <text class="info-value">{{ userInfo?.user?.loginIp || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">状态</text>
+            <text class="info-value" :class="getStatusClass(userInfo?.user?.status)">
+              {{ getStatusText(userInfo?.user?.status) }}
+            </text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 权限信息卡片 -->
+      <view class="info-card" v-if="userInfo?.permissions && userInfo.permissions.length > 0">
+        <view class="card-title">权限信息</view>
+        <view class="permissions-list">
+          <text 
+            class="permission-tag" 
+            v-for="(permission, index) in userInfo.permissions" 
+            :key="index"
+          >
+            {{ permission }}
+          </text>
+        </view>
+      </view>
+
+      <!-- 备注信息 -->
+      <view class="info-card" v-if="userInfo?.user?.remark">
+        <view class="card-title">备注</view>
+        <view class="remark-content">
+          <text>{{ userInfo.user.remark }}</text>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useUserStore } from '@/store/user'
+
+const userStore = useUserStore()
+const { userInfo } = storeToRefs(userStore)
+
+// 获取头像文字
+const getAvatarText = (name) => {
+  if (!name) return '?'
+  return name.charAt(0).toUpperCase()
+}
+
+// 获取性别文本
+const getSexText = (sex) => {
+  if (sex === '0') return '女'
+  if (sex === '1') return '男'
+  return '--'
+}
+
+// 获取状态文本
+const getStatusText = (status) => {
+  if (status === '0') return '正常'
+  if (status === '1') return '停用'
+  return '--'
+}
+
+// 获取状态样式类
+const getStatusClass = (status) => {
+  if (status === '0') return 'status-normal'
+  if (status === '1') return 'status-disabled'
+  return ''
+}
+
+// 返回
+const handleBack = () => {
+  uni.navigateBack()
+}
+</script>
+
+<style lang="scss" scoped>
+.profile-detail-page {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  //height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.custom-navbar {
+  background-color: #fff;
+  padding-top: var(--status-bar-height, 0);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 100;
+}
+
+.navbar-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: 0 16px;
+}
+
+.nav-btn {
+  font-size: 24px;
+  color: #333;
+  font-weight: bold;
+  min-width: 44px;
+  text-align: center;
+}
+
+.nav-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  flex: 1;
+  text-align: center;
+}
+
+.content-scroll {
+  box-sizing: border-box;
+  flex: 1;
+  padding: 16px;
+}
+
+.profile-header-card {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  padding: 32px 24px;
+  margin-bottom: 16px;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.avatar-section {
+  display: flex;
+  align-items: center;
+}
+
+.avatar-wrapper-large {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.2);
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  margin-right: 24px;
+  flex-shrink: 0;
+}
+
+.avatar-img-large {
+  width: 100%;
+  height: 100%;
+}
+
+.avatar-placeholder-large {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.avatar-text-large {
+  font-size: 48px;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.user-basic-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.user-name-large {
+  font-size: 28px;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 8px;
+}
+
+.user-dept-large {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.9);
+
+}
+
+.role-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.role-tag {
+  font-size: 12px;
+  background: rgba(255, 255, 255, 0.25);
+  color: #ffffff;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-weight: 500;
+}
+
+.info-card {
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.stats-card {
+  .stats-grid {
+    display: flex;
+    justify-content: space-around;
+    padding: 16px 0;
+  }
+
+  .stat-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+  }
+
+  .stat-number {
+    font-size: 32px;
+    font-weight: 600;
+    color: #667eea;
+    margin-bottom: 8px;
+  }
+
+  .stat-desc {
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+.info-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  border-bottom: 1px solid #f5f5f5;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.info-label {
+  font-size: 14px;
+  color: #666;
+  flex-shrink: 0;
+}
+
+.info-value {
+  font-size: 14px;
+  color: #333;
+  text-align: right;
+  flex: 1;
+  margin-left: 16px;
+
+  &.status-normal {
+    color: #67c23a;
+  }
+
+  &.status-disabled {
+    color: #f56c6c;
+  }
+}
+
+.permissions-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.permission-tag {
+  font-size: 12px;
+  background: #f0f7ff;
+  color: #409eff;
+  padding: 6px 12px;
+  border-radius: 12px;
+  font-weight: 500;
+}
+
+.remark-content {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+  padding: 8px 0;
+}
+</style>
+