diff --git a/api/handler/user_handler.go b/api/handler/user_handler.go
index a74eff5b..0208e5dc 100644
--- a/api/handler/user_handler.go
+++ b/api/handler/user_handler.go
@@ -230,6 +230,8 @@ type userProfile struct {
 	Calls       int                  `json:"calls"`
 	ImgCalls    int                  `json:"img_calls"`
 	TotalTokens int64                `json:"total_tokens"`
+	Tokens      int64                `json:"tokens"`
+	ExpiredTime int64                `json:"expired_time"`
 }
 
 func (h *UserHandler) Profile(c *gin.Context) {
diff --git a/web/src/components/UserProfile.vue b/web/src/components/UserProfile.vue
new file mode 100644
index 00000000..7e5f8bff
--- /dev/null
+++ b/web/src/components/UserProfile.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="user-info" id="user-info">
+    <el-form v-if="user.id" :model="user" label-width="150px">
+      <el-row>
+        <el-upload
+            class="avatar-uploader"
+            :auto-upload="true"
+            :show-file-list="false"
+            :http-request="afterRead"
+        >
+          <el-avatar v-if="user.avatar" :src="user.avatar" shape="circle" :size="100"/>
+          <el-icon v-else class="avatar-uploader-icon">
+            <Plus/>
+          </el-icon>
+        </el-upload>
+      </el-row>
+      <el-form-item label="账户">
+        <span>{{ user.mobile }}</span>
+      </el-form-item>
+      <el-form-item label="剩余对话次数">
+        <el-tag>{{ user['calls'] }}</el-tag>
+      </el-form-item>
+      <el-form-item label="剩余绘图次数">
+        <el-tag>{{ user['img_calls'] }}</el-tag>
+      </el-form-item>
+      <el-form-item label="本月消耗电量">
+        <el-tag type="info">{{ user['tokens'] }}</el-tag>
+      </el-form-item>
+      <el-form-item label="累计消耗电量">
+        <el-tag type="info">{{ user['total_tokens'] }}</el-tag>
+      </el-form-item>
+      <el-form-item label="会员到期时间" v-if="user['expired_time']  > 0">
+        <el-tag type="danger">{{ dateFormat(user['expired_time']) }}</el-tag>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue"
+import {httpGet, httpPost} from "@/utils/http";
+import {ElMessage} from "element-plus";
+import {Plus} from "@element-plus/icons-vue";
+import Compressor from "compressorjs";
+import {dateFormat} from "@/utils/libs";
+
+const user = ref({
+  username: '',
+  nickname: '',
+  avatar: '',
+  mobile: '',
+  calls: 0,
+  tokens: 0,
+  chat_config: {api_keys: {OpenAI: "", Azure: "", ChatGLM: ""}}
+})
+
+onMounted(() => {
+  // 获取最新用户信息
+  httpGet('/api/user/profile').then(res => {
+    user.value = res.data
+    user.value.chat_config.api_keys = res.data.chat_config.api_keys ?? {OpenAI: "", Azure: "", ChatGLM: ""}
+  }).catch(e => {
+    ElMessage.error("获取用户信息失败：" + e.message)
+  });
+})
+
+const afterRead = (file) => {
+  // 压缩图片并上传
+  new Compressor(file.file, {
+    quality: 0.6,
+    success(result) {
+      const formData = new FormData();
+      formData.append('file', result, result.name);
+      // 执行上传操作
+      httpPost('/api/upload', formData).then((res) => {
+        user.value.avatar = res.data
+        httpPost('/api/user/profile/update', user.value).then(() => {
+          ElMessage.success({
+            message: '更新成功',
+            duration: 500,
+          })
+        }).catch((e) => {
+          ElMessage.error('更新失败：' + e.message)
+        })
+      }).catch((e) => {
+        ElMessage.error('图片上传失败:' + e.message)
+      })
+    },
+    error(err) {
+      console.log(err.message);
+    },
+  });
+};
+</script>
+
+<style lang="stylus" scoped>
+.user-info {
+  padding 20px
+
+  .el-row {
+    justify-content center
+    margin-bottom 10px
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/Member.vue b/web/src/views/Member.vue
index eada7e7f..445f1ff9 100644
--- a/web/src/views/Member.vue
+++ b/web/src/views/Member.vue
@@ -5,40 +5,46 @@
     </div>
     <div class="inner" :style="{height: listBoxHeight + 'px'}">
 
-      <div class="info">
-        <el-alert type="info" show-icon :closable="false" effect="dark">
-          <strong>说明:</strong> 成为本站会员后每月有500次对话额度，50次 AI 绘画额度，限制下月1号解除，若在期间超过次数后可单独购买点卡。
-          当月充值的点卡有效期可以延期到下个月底。
-        </el-alert>
+      <div class="user-profile">
+        <user-profile/>
       </div>
 
-      <ItemList :items="list" v-if="list.length > 0" :gap="30" :width="250">
-        <template #default="scope">
-          <div class="product-item" :style="{width: scope.width+'px'}" @click="orderPay(scope.item)">
-            <div class="image-container">
-              <el-image :src="vipImg" fit="cover"/>
-            </div>
-            <div class="product-title">
-              <span class="name">{{ scope.item.name }}</span>
-            </div>
-            <div class="product-info">
-              <div class="info-line">
-                <span class="label">商品原价：</span>
-                <span class="price">￥{{ scope.item.price }}</span>
+      <div class="product-box">
+        <div class="info">
+          <el-alert type="info" show-icon :closable="false" effect="dark">
+            <strong>说明:</strong> 成为本站会员后每月有500次对话额度，50次 AI 绘画额度，限制下月1号解除，若在期间超过次数后可单独购买点卡。
+            当月充值的点卡有效期可以延期到下个月底。
+          </el-alert>
+        </div>
+
+        <ItemList :items="list" v-if="list.length > 0" :gap="30" :width="200">
+          <template #default="scope">
+            <div class="product-item" :style="{width: scope.width+'px'}" @click="orderPay(scope.item)">
+              <div class="image-container">
+                <el-image :src="vipImg" fit="cover"/>
               </div>
-              <div class="info-line">
-                <span class="label">促销立减：</span>
-                <span class="price">￥{{ scope.item.discount }}</span>
+              <div class="product-title">
+                <span class="name">{{ scope.item.name }}</span>
               </div>
-              <div class="info-line">
-                <span class="label">有效期：</span>
-                <span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
-                <span class="expire" v-else>当月有效</span>
+              <div class="product-info">
+                <div class="info-line">
+                  <span class="label">商品原价：</span>
+                  <span class="price">￥{{ scope.item.price }}</span>
+                </div>
+                <div class="info-line">
+                  <span class="label">促销立减：</span>
+                  <span class="price">￥{{ scope.item.discount }}</span>
+                </div>
+                <div class="info-line">
+                  <span class="label">有效期：</span>
+                  <span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
+                  <span class="expire" v-else>当月有效</span>
+                </div>
               </div>
             </div>
-          </div>
-        </template>
-      </ItemList>
+          </template>
+        </ItemList>
+      </div>
     </div>
 
     <login-dialog :show="showLoginDialog" @hide="showLoginDialog = false"/>
@@ -81,6 +87,7 @@ import LoginDialog from "@/components/LoginDialog.vue";
 import {checkSession} from "@/action/session";
 import {arrayContains, removeArrayItem, substr} from "@/utils/libs";
 import router from "@/router";
+import UserProfile from "@/components/UserProfile.vue";
 
 const listBoxHeight = window.innerHeight - 97
 const list = ref([])
@@ -187,88 +194,105 @@ const queryOrder = (orderNo) => {
   }
 
   .inner {
+    display flex
     color #ffffff
     padding 15px;
     overflow-y visible
     overflow-x hidden
 
-    .info {
-      .el-alert__description {
-        font-size 14px !important
-        margin 0
-      }
+    .user-profile {
       padding 10px 20px
+      background-color #393F4A
+      color #ffffff
+      border-radius 10px
+
+      .el-form-item__label {
+        color #ffffff
+        justify-content start
+      }
     }
 
-    .list-box {
-      .product-item {
-        border 1px solid #666666
-        border-radius 6px
-        overflow hidden
-        cursor pointer
-        transition: all 0.3s ease; /* 添加过渡效果 */
+    .product-box {
+      padding 0 10px
 
-        .image-container {
-          display flex
-          justify-content center
+      .info {
+        .el-alert__description {
+          font-size 14px !important
+          margin 0
+        }
+        padding 10px 20px
+      }
 
-          .el-image {
-            padding 6px
+      .list-box {
+        .product-item {
+          border 1px solid #666666
+          border-radius 6px
+          overflow hidden
+          cursor pointer
+          transition: all 0.3s ease; /* 添加过渡效果 */
 
-            .el-image__inner {
-              border-radius 10px
+          .image-container {
+            display flex
+            justify-content center
+
+            .el-image {
+              padding 6px
+
+              .el-image__inner {
+                border-radius 10px
+              }
             }
           }
-        }
 
-        .product-title {
-          display flex
-          padding 10px
-
-          .name {
-            width 100%
-            text-align center
-            font-size 16px
-            font-weight bold
-            color #47fff1
-          }
-        }
-
-        .product-info {
-          padding 10px 20px
-          font-size 14px
-          color #999999
-
-          .info-line {
+          .product-title {
             display flex
-            width 100%
-            padding 5px 0
+            padding 10px
 
-            .label {
+            .name {
+              width 100%
+              text-align center
+              font-size 16px
+              font-weight bold
+              color #47fff1
+            }
+          }
+
+          .product-info {
+            padding 10px 20px
+            font-size 14px
+            color #999999
+
+            .info-line {
               display flex
               width 100%
+              padding 5px 0
+
+              .label {
+                display flex
+                width 100%
+              }
+
+              .price, .expire {
+                display flex
+                width 90px
+                justify-content right
+              }
+
+              .price {
+                color #f56c6c
+              }
+
+              .expire {
+                color #409eff
+              }
             }
 
-            .price, .expire {
-              display flex
-              width 80px
-              justify-content right
-            }
-
-            .price {
-              color #f56c6c
-            }
-
-            .expire {
-              color #409eff
-            }
           }
 
-        }
-
-        &:hover {
-          box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
-          transform: translateY(-10px); /* 向上移动10像素 */
+          &:hover {
+            box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
+            transform: translateY(-10px); /* 向上移动10像素 */
+          }
         }
       }
     }