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

2025-11-12 04:03:42 +08:00 · 2023-06-27 12:11:55 +08:00
parent c3d62bb8d8
commit 3efd5fb77a
20 changed files with 353 additions and 73 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -11,6 +11,7 @@
        "@element-plus/icons-vue": "^2.1.0",
        "axios": "^0.27.2",
        "clipboard": "^2.0.11",
+        "compressorjs": "^1.2.1",
        "core-js": "^3.8.3",
        "element-plus": "^2.1.11",
        "good-storage": "^1.1.1",
@@ -3634,6 +3635,11 @@
      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
      "dev": true
    },
+    "node_modules/blueimp-canvas-to-blob": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
+      "integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
+    },
    "node_modules/body-parser": {
      "version": "1.19.2",
      "resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-1.19.2.tgz",
@@ -4225,6 +4231,15 @@
      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
      "dev": true
    },
+    "node_modules/compressorjs": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/compressorjs/-/compressorjs-1.2.1.tgz",
+      "integrity": "sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==",
+      "dependencies": {
+        "blueimp-canvas-to-blob": "^3.29.0",
+        "is-blob": "^2.1.0"
+      }
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -6632,6 +6647,17 @@
        "node": ">=8"
      }
    },
+    "node_modules/is-blob": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-blob/-/is-blob-2.1.0.tgz",
+      "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/is-ci": {
      "version": "1.2.1",
      "resolved": "https://registry.npmmirror.com/is-ci/-/is-ci-1.2.1.tgz",
@@ -14142,6 +14168,11 @@
      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
      "dev": true
    },
+    "blueimp-canvas-to-blob": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
+      "integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
+    },
    "body-parser": {
      "version": "1.19.2",
      "resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-1.19.2.tgz",
@@ -14611,6 +14642,15 @@
        }
      }
    },
+    "compressorjs": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/compressorjs/-/compressorjs-1.2.1.tgz",
+      "integrity": "sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==",
+      "requires": {
+        "blueimp-canvas-to-blob": "^3.29.0",
+        "is-blob": "^2.1.0"
+      }
+    },
    "concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -16523,6 +16563,11 @@
        "binary-extensions": "^2.0.0"
      }
    },
+    "is-blob": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-blob/-/is-blob-2.1.0.tgz",
+      "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw=="
+    },
    "is-ci": {
      "version": "1.2.1",
      "resolved": "https://registry.npmmirror.com/is-ci/-/is-ci-1.2.1.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -11,6 +11,7 @@
    "@element-plus/icons-vue": "^2.1.0",
    "axios": "^0.27.2",
    "clipboard": "^2.0.11",
+    "compressorjs": "^1.2.1",
    "core-js": "^3.8.3",
    "element-plus": "^2.1.11",
    "good-storage": "^1.1.1",
--- a/web/src/components/ConfigDialog.vue
+++ b/web/src/components/ConfigDialog.vue
@@ -9,23 +9,33 @@
    <div class="user-info" id="user-info">
      <el-form v-if="form.id" :model="form" label-width="120px">
        <el-form-item label="昵称">
-          <el-input v-model="form['nickname']"/>
+          <el-input v-model="form.nickname"/>
        </el-form-item>
        <el-form-item label="头像">
-          <el-input v-model="form['avatar']"/>
+          <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>
        </el-form-item>
        <el-form-item label="用户名">
-          <el-input v-model="form['username']" disabled/>
+          <el-input v-model="form.username" readonly disabled/>
        </el-form-item>

        <el-form-item label="聊天上下文">
-          <el-switch v-model="form['chat_config']['enable_context']"/>
+          <el-switch v-model="form.chat_config.enable_context"/>
        </el-form-item>
        <el-form-item label="聊天记录">
-          <el-switch v-model="form['chat_config']['enable_history']"/>
+          <el-switch v-model="form.chat_config.enable_history"/>
        </el-form-item>
        <el-form-item label="Model">
-          <el-select v-model="form['chat_config']['model']" placeholder="默认会话模型">
+          <el-select v-model="form.chat_config.model" placeholder="默认会话模型">
            <el-option
                v-for="item in models"
                :key="item"
@@ -35,10 +45,10 @@
          </el-select>
        </el-form-item>
        <el-form-item label="MaxTokens">
-          <el-input v-model.number="form['chat_config']['max_tokens']"/>
+          <el-input v-model.number="form.chat_config.max_tokens"/>
        </el-form-item>
        <el-form-item label="Temperature">
-          <el-input v-model.number="form['chat_config']['temperature']"/>
+          <el-input v-model.number="form.chat_config.temperature"/>
        </el-form-item>
        <el-form-item label="剩余调用次数">
          <el-tag>{{ form['calls'] }}</el-tag>
@@ -69,6 +79,9 @@
 import {computed, 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 {showNotify} from "vant";

 const props = defineProps({
  show: Boolean,
@@ -79,7 +92,14 @@ const props = defineProps({
 const showDialog = computed(() => {
  return props.show
 })
-const form = ref({})
+const form = ref({
+  username: '',
+  nickname: '',
+  avatar: '',
+  calls: 0,
+  tokens: 0,
+  chat_configs: {}
+})
 const top = computed(() => {
  if (window.innerHeight < 1024) {
    return '5vh';
@@ -97,6 +117,29 @@ onMounted(() => {
  });
 })

+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: '上传成功', appendTo: '#user-info', duration: 1000})
+      }).catch((e) => {
+        console.log(e.message)
+        ElMessage.error({message: '上传失败', appendTo: '#user-info'})
+      })
+    },
+    error(err) {
+      console.log(err.message);
+    },
+  });
+};
+
 const emits = defineEmits(['hide', 'update-user']);
 const save = function () {
  httpPost('/api/user/profile/update', form.value).then(() => {
--- a/web/src/components/mobile/ChatPrompt.vue
+++ b/web/src/components/mobile/ChatPrompt.vue
@@ -73,6 +73,7 @@ onMounted(() => {

    .content {
      word-break break-word;
+      text-align left
      padding: 5px 10px;
      background-color: #98E165;
      color #444444
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -28,7 +28,9 @@ import {
    Switch,
    Tabbar,
    TabbarItem,
-    TextEllipsis
+    Tag,
+    TextEllipsis,
+    Uploader
 } from "vant";
 import router from "@/router";

@@ -58,6 +60,8 @@ app.use(SwipeCell);
 app.use(Dialog);
 app.use(ShareSheet);
 app.use(Switch);
+app.use(Uploader);
+app.use(Tag);
 app.use(router).use(ElementPlus).mount('#app')


--- a/web/src/views/ChatPlus.vue
+++ b/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) => {
--- a/web/src/views/Home.vue
+++ b/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")
 })
--- a/web/src/views/admin/UserList.vue
+++ b/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;
--- a/web/src/views/mobile/ChatSession.vue
+++ b/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;

--- a/web/src/views/mobile/Home.vue
+++ b/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}`);
--- a/web/src/views/mobile/Profile.vue
+++ b/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>
--- a/web/src/views/mobile/Setting.vue
+++ b/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})
    })