feat: check if the user's chat quota is gt than current chat model required before starting a conversation

web/src/components/ConfigDialog.vue

@@ -5,55 +5,30 @@
       :close-on-click-modal="true"
       :before-close="close"
       style="max-width: 600px"
-      title="用户设置"
+      title="账户信息"
   >
     <div class="user-info" id="user-info">
-      <el-form v-if="form.id" :model="form" label-width="150px">
+      <el-form v-if="user.id" :model="user" label-width="150px">
         <el-form-item label="账户">
-          <span>{{ form.mobile }}</span>
-        </el-form-item>
-        <el-form-item label="头像">
-          <el-upload
-              class="avatar-uploader"
-              :auto-upload="true"
-              :show-file-list="false"
-              :http-request="afterRead"
-          >
-            <el-avatar v-if="form.avatar" :src="form.avatar" shape="square" :size="100"/>
-            <el-icon v-else class="avatar-uploader-icon">
-              <Plus/>
-            </el-icon>
-          </el-upload>
+          <span>{{ user.mobile }}</span>
         </el-form-item>
         <el-form-item label="剩余对话次数">
-          <el-tag>{{ form['calls'] }}</el-tag>
+          <el-tag>{{ user['calls'] }}</el-tag>
         </el-form-item>
         <el-form-item label="剩余绘图次数">
-          <el-tag>{{ form['img_calls'] }}</el-tag>
+          <el-tag>{{ user['img_calls'] }}</el-tag>
         </el-form-item>
-        <el-form-item label="累计消耗 Tokens">
-          <el-tag type="info">{{ form['total_tokens'] }}</el-tag>
+        <el-form-item label="本月消耗电量">
+          <el-tag type="info">{{ user['tokens'] }}</el-tag>
         </el-form-item>
-        <el-form-item label="OpenAI API KEY">
-          <el-input v-model="form.chat_config['api_keys']['OpenAI']"/>
+        <el-form-item label="累计消耗电量">
+          <el-tag type="info">{{ user['total_tokens'] }}</el-tag>
         </el-form-item>
-        <el-form-item label="Azure API KEY">
-          <el-input v-model="form['chat_config']['api_keys']['Azure']"/>
-        </el-form-item>
-        <el-form-item label="ChatGLM API KEY">
-          <el-input v-model="form['chat_config']['api_keys']['ChatGLM']"/>
+        <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 #footer>
-      <span class="dialog-footer">
-        <el-button @click="close">关闭</el-button>
-        <el-button type="primary" @click="save">
-          保存
-        </el-button>
-      </span>
-    </template>
   </el-dialog>
 </template>
 
@@ -63,6 +38,7 @@ 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";
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
@@ -74,7 +50,7 @@ const props = defineProps({
 const showDialog = computed(() => {
   return props.show
 })
-const form = ref({
+const user = ref({
   username: '',
   nickname: '',
   avatar: '',
@@ -87,50 +63,15 @@ const form = ref({
 onMounted(() => {
   // 获取最新用户信息
   httpGet('/api/user/profile').then(res => {
-    form.value = res.data
-    form.value.chat_config.api_keys = res.data.chat_config.api_keys ?? {OpenAI: "", Azure: "", ChatGLM: ""}
+    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) => {
-  // console.log(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) => {
-        form.value.avatar = res.data
-        ElMessage.success({message: "上传成功", duration: 500})
-      }).catch((e) => {
-        ElMessage.error('上传失败:' + e.message)
-      })
-    },
-    error(err) {
-      console.log(err.message);
-    },
-  });
-};
-
 // eslint-disable-next-line no-undef
-const emits = defineEmits(['hide', 'update-user']);
-const save = function () {
-  httpPost('/api/user/profile/update', form.value).then(() => {
-    ElMessage.success({
-      message: '更新成功',
-      duration: 500,
-      onClose: () => emits('hide', false)
-    })
-    // 更新用户数据
-    emits('update-user', {nickname: form.value['nickname'], avatar: form.value['avatar']});
-  }).catch((e) => {
-    ElMessage.error('更新失败：' + e.message)
-  })
-}
+const emits = defineEmits(['hide']);
 const close = function () {
   emits('hide', false);
 }

web/src/components/LoginDialog.vue

@@ -9,7 +9,7 @@
       title="用户登录"
   >
     <div class="form">
-      <el-form label-width="65px">
+      <el-form label-width="75px">
         <el-form-item>
           <template #label>
             <div class="label">
@@ -20,7 +20,7 @@
             </div>
           </template>
           <template #default>
-            <el-input v-model="username" placeholder="手机号码"/>
+            <el-input v-model="username" size="large" placeholder="手机号码"/>
           </template>
         </el-form-item>
         <el-form-item>
@@ -33,12 +33,12 @@
             </div>
           </template>
           <template #default>
-            <el-input v-model="password" type="password" placeholder="密码"/>
+            <el-input v-model="password" type="password" size="large" placeholder="密码"/>
           </template>
         </el-form-item>
 
         <div class="login-btn">
-          <el-button type="primary" @click="submit" round>登录</el-button>
+          <el-button type="primary" @click="submit" size="large" round>登录</el-button>
         </div>
       </el-form>
     </div>
@@ -90,9 +90,17 @@ const close = function () {
   border-radius 20px
 
   .label {
+    padding-top 3px
+
     .el-icon {
-      font-size 16px
+      position relative
+      font-size 20px
       margin-right 6px
+      top 4px
+    }
+
+    span {
+      font-size 16px
     }
   }
 

web/src/components/UserProfile.vue

@@ -32,6 +32,20 @@
       <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-item label="OpenAI API KEY">
+        <el-input v-model="user.chat_config['api_keys']['OpenAI']"/>
+      </el-form-item>
+      <el-form-item label="Azure API KEY">
+        <el-input v-model="user['chat_config']['api_keys']['Azure']"/>
+      </el-form-item>
+      <el-form-item label="ChatGLM API KEY">
+        <el-input v-model="user['chat_config']['api_keys']['ChatGLM']"/>
+      </el-form-item>
+
+      <el-row class="opt-line">
+        <el-button color="#47fff1" :dark="false" round @click="save">保存</el-button>
+      </el-row>
     </el-form>
   </div>
 </template>
@@ -43,6 +57,7 @@ import {ElMessage} from "element-plus";
 import {Plus} from "@element-plus/icons-vue";
 import Compressor from "compressorjs";
 import {dateFormat} from "@/utils/libs";
+import {checkSession} from "@/action/session";
 
 const user = ref({
   username: '',
@@ -55,13 +70,17 @@ const user = ref({
 })
 
 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: ""}
+  checkSession().then(() => {
+    // 获取最新用户信息
+    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)
+    });
   }).catch(e => {
-    ElMessage.error("获取用户信息失败：" + e.message)
-  });
+    console.log(e)
+  })
 })
 
 const afterRead = (file) => {
@@ -74,14 +93,7 @@ const afterRead = (file) => {
       // 执行上传操作
       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)
-        })
+        ElMessage.success({message: "上传成功", duration: 500})
       }).catch((e) => {
         ElMessage.error('图片上传失败:' + e.message)
       })
@@ -91,6 +103,14 @@ const afterRead = (file) => {
     },
   });
 };
+
+const save = () => {
+  httpPost('/api/user/profile/update', user.value).then(() => {
+    ElMessage.success({message: '更新成功', duration: 500})
+  }).catch((e) => {
+    ElMessage.error('更新失败：' + e.message)
+  })
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -101,5 +121,13 @@ const afterRead = (file) => {
     justify-content center
     margin-bottom 10px
   }
+
+  .opt-line {
+    padding-top 20px
+
+    .el-button {
+      width 100%
+    }
+  }
 }
 </style>