feat: adjust layout for user profile page

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) {

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>

web/src/views/Member.vue

@@ -5,6 +5,11 @@
     </div>
     <div class="inner" :style="{height: listBoxHeight + 'px'}">
 
+      <div class="user-profile">
+        <user-profile/>
+      </div>
+
+      <div class="product-box">
         <div class="info">
           <el-alert type="info" show-icon :closable="false" effect="dark">
             <strong>说明:</strong> 成为本站会员后每月有500次对话额度，50次 AI 绘画额度，限制下月1号解除，若在期间超过次数后可单独购买点卡。
@@ -12,7 +17,7 @@
           </el-alert>
         </div>
 
-      <ItemList :items="list" v-if="list.length > 0" :gap="30" :width="250">
+        <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">
@@ -40,6 +45,7 @@
           </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,11 +194,27 @@ const queryOrder = (orderNo) => {
   }
 
   .inner {
+    display flex
     color #ffffff
     padding 15px;
     overflow-y visible
     overflow-x hidden
 
+    .user-profile {
+      padding 10px 20px
+      background-color #393F4A
+      color #ffffff
+      border-radius 10px
+
+      .el-form-item__label {
+        color #ffffff
+        justify-content start
+      }
+    }
+
+    .product-box {
+      padding 0 10px
+
       .info {
         .el-alert__description {
           font-size 14px !important
@@ -251,7 +274,7 @@ const queryOrder = (orderNo) => {
 
               .price, .expire {
                 display flex
-              width 80px
+                width 90px
                 justify-content right
               }
 
@@ -273,6 +296,7 @@ const queryOrder = (orderNo) => {
         }
       }
     }
+  }
 
 }
 </style>