feat: vue-mobile => 完成用户信息修改功能，前后端都添加文件上传功能。

web/src/views/ChatPlus.vue

@@ -209,7 +209,7 @@ import {
   VideoPause
 } from '@element-plus/icons-vue'
 import 'highlight.js/styles/a11y-dark.css'
-import {dateFormat, randString, removeArrayItem, renderInputText, UUID} from "@/utils/libs";
+import {dateFormat, isMobile, randString, removeArrayItem, renderInputText, UUID} from "@/utils/libs";
 import {ElMessage, ElMessageBox} from "element-plus";
 import hl from "highlight.js";
 import {getSessionId, removeLoginUser} from "@/store/session";
@@ -241,6 +241,10 @@ const showConfigDialog = ref(false);
 const showPasswordDialog = ref(false);
 const isLogin = ref(false)
 
+if (isMobile()) {
+  router.replace("/mobile")
+}
+
 onMounted(() => {
   resizeElement();
   checkSession().then((user) => {

web/src/views/Home.vue

@@ -6,11 +6,16 @@
 import {ref} from "vue"
 import {useRouter} from "vue-router";
 import {checkSession} from "@/action/session";
+import {isMobile} from "@/utils/libs";
 
 const title = ref("HI, ChatGPT PLUS!");
 const router = useRouter();
 checkSession().then(() => {
-  router.push("chat")
+  if (isMobile()) {
+    router.push("/mobile")
+  } else {
+    router.push("/chat")
+  }
 }).catch(() => {
   router.push("login")
 })

web/src/views/admin/UserList.vue

@@ -38,8 +38,8 @@
         <el-pagination v-if="users.total > 0"
                        background
                        layout="total, prev, pager, next"
-                       :current-page="users.page"
-                       :page-size="users.page_size"
+                       v-model:current-page="users.page"
+                       v-model:page-size="users.page_size"
                        :total="users.total"
                        @current-change="fetchUserList(users.page, users.page_size)"
         />
@@ -110,7 +110,7 @@ import {ElMessage, ElMessageBox} from "element-plus";
 import {dateFormat, disabledDate, removeArrayItem} from "@/utils/libs";
 
 // 变量定义
-const users = ref({})
+const users = ref({page: 1, page_size: 15})
 
 const user = ref({chat_roles: []})
 const roles = ref([])
@@ -128,7 +128,7 @@ const loading = ref(true)
 const userEditFormRef = ref(null)
 
 onMounted(() => {
-  fetchUserList(1, 10)
+  fetchUserList(users.value.page, users.value.page_size)
   // 获取角色列表
   httpGet('/api/admin/role/list').then((res) => {
     roles.value = res.data;

web/src/views/mobile/ChatSession.vue

@@ -145,6 +145,7 @@ const onLoad = () => {
         blocks.forEach((block) => {
           hl.highlightElement(block)
         })
+
         scrollListBox()
       })
     }
@@ -239,12 +240,10 @@ const connect = function (chat_id, role_id) {
             blocks.forEach((block) => {
               hl.highlightElement(block)
             })
+            scrollListBox()
           })
         }
 
-        nextTick(() => {
-          scrollListBox()
-        })
       };
     }
 
@@ -275,7 +274,7 @@ const connect = function (chat_id, role_id) {
 
 // 将聊天框的滚动条滑动到最底部
 const scrollListBox = () => {
-  document.getElementById('message-list-box').scrollTo(0, document.getElementById('message-list-box').scrollHeight)
+  document.getElementById('message-list-box').scrollTo(0, document.getElementById('message-list-box').scrollHeight + 46)
 }
 
 const sendMessage = () => {
@@ -352,6 +351,7 @@ const shareChat = () => {
 .mobile-chat {
   .message-list-box {
     padding-top 50px
+    padding-bottom 10px
     overflow-x auto
     background #F5F5F5;
 

web/src/views/mobile/Home.vue

@@ -17,9 +17,20 @@
 <script setup>
 import {ref} from "vue";
 import {getMobileTheme} from "@/store/system";
+import {useRouter} from "vue-router";
+import {isMobile} from "@/utils/libs";
+import {checkSession} from "@/action/session";
+
+const router = useRouter()
+checkSession().then(() => {
+  if (!isMobile()) {
+    router.replace('/chat')
+  }
+}).catch(() => {
+  router.push('/login')
+})
 
 const active = ref('home')
-
 const onChange = (index) => {
   console.log(index)
   // showToast(`标签 ${index}`);

web/src/views/mobile/Profile.vue

@@ -3,23 +3,43 @@
     <van-nav-bar :title="title"/>
 
     <div class="content">
-      <van-form @submit="onSubmit">
-        <van-cell-group inset>
+      <van-form @submit="save">
+        <van-cell-group inset v-model="form">
           <van-field
-              v-model="username"
+              v-model="form.username"
               name="用户名"
               label="用户名"
+              readonly
+              disabled
               placeholder="用户名"
-              :rules="[{ required: true, message: '请填写用户名' }]"
           />
           <van-field
-              v-model="password"
-              type="password"
-              name="密码"
-              label="密码"
-              placeholder="密码"
-              :rules="[{ required: true, message: '请填写密码' }]"
+              v-model="form.nickname"
+              name="昵称"
+              label="昵称"
+              placeholder="昵称"
+              :rules="[{ required: true, message: '请填写用户昵称' }]"
           />
+          <van-field label="头像">
+            <template #input>
+              <van-uploader v-model="fileList"
+                            reupload max-count="1"
+                            :deletable="false"
+                            :after-read="afterRead"/>
+            </template>
+          </van-field>
+
+          <van-field label="剩余次数">
+            <template #input>
+              <van-tag type="success">{{ form.calls }}</van-tag>
+            </template>
+          </van-field>
+
+          <van-field label="剩余 Tokens">
+            <template #input>
+              <van-tag type="primary">{{ form.tokens }}</van-tag>
+            </template>
+          </van-field>
         </van-cell-group>
         <div style="margin: 16px;">
           <van-button round block type="primary" native-type="submit">
@@ -32,9 +52,68 @@
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
+import {showFailToast, showNotify, showSuccessToast} from "vant";
+import {httpGet, httpPost} from "@/utils/http";
+import Compressor from 'compressorjs';
 
 const title = ref('用户设置')
+const form = ref({
+  username: '',
+  nickname: '',
+  avatar: '',
+  calls: 0,
+  tokens: 0
+})
+const fileList = ref([
+  {
+    url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg',
+    message: '上传中...',
+  }
+]);
+
+onMounted(() => {
+  httpGet('/api/user/profile').then(res => {
+    form.value = res.data
+    fileList.value[0].url = form.value.avatar
+  }).catch((e) => {
+    console.log(e.message)
+    showFailToast('获取用户信息失败')
+  });
+})
+
+const afterRead = (file) => {
+  file.status = 'uploading';
+  file.message = '上传中...';
+  // 压缩图片并上传
+  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
+        file.status = 'success'
+        showNotify({type: 'success', message: '上传成功'})
+      }).catch((e) => {
+        console.log(e.message)
+        showNotify({type: 'danger', message: '上传失败'})
+      })
+    },
+    error(err) {
+      console.log(err.message);
+    },
+  });
+};
+
+const save = () => {
+  httpPost('/api/user/profile/update', form.value).then(() => {
+    showSuccessToast('保存成功')
+  }).catch(() => {
+    showFailToast('保存失败')
+  })
+}
 </script>
 
 <style scoped>

web/src/views/mobile/Setting.vue

@@ -7,7 +7,6 @@
         <van-cell-group inset>
           <van-field
               v-model="form.chat_config.model"
-              is-link
               readonly
               label="默认模型"
               placeholder=""
@@ -15,8 +14,8 @@
           />
           <van-field
               v-model.number="form.chat_config.max_tokens"
-              name="MaxTokens"
               type="number"
+              name="MaxTokens"
               label="MaxTokens"
               placeholder="每次请求最大 token 数量"
               :rules="[{ required: true, message: '请填写 MaxTokens' }]"
@@ -51,7 +50,7 @@
         </van-cell-group>
         <div style="margin: 16px;">
           <van-button round block type="primary" native-type="submit">
-            保存
+            提交
           </van-button>
         </div>
       </van-form>
@@ -90,7 +89,6 @@ const models = ref([])
 onMounted(() => {
   // 获取最新用户信息
   httpGet('/api/user/profile').then(res => {
-    console.log(res.data)
     form.value = res.data
   }).catch(() => {
     showFailToast('获取用户信息失败')
@@ -99,7 +97,6 @@ onMounted(() => {
   // 加载系统配置
   httpGet('/api/admin/config/get?key=system').then(res => {
     const mds = res.data.models;
-    console.log(mds)
     mds.forEach(item => {
       models.value.push({text: item, value: item})
     })