opt: optimize chat list page for mobile

web/src/assets/css/mobile/chat-list.css

@@ -0,0 +1,29 @@
+.mobile-chat-list .content .van-cell__value .chat-list-item {
+  display: flex;
+  font-size: 14px;
+}
+.mobile-chat-list .content .van-cell__value .chat-list-item .van-image {
+  min-width: 32px;
+  width: 32px;
+  height: 32px;
+}
+.mobile-chat-list .content .van-cell__value .chat-list-item .van-ellipsis {
+  margin-top: 5px;
+  margin-left: 10px;
+}
+.mobile-chat-list .van-nav-bar .van-nav-bar__right .van-icon {
+  font-size: 20px;
+}
+.van-popup .picker-option {
+  display: flex;
+  width: 100%;
+  padding: 0 10px;
+  overflow: hidden;
+  height: 20px;
+  text-overflow: ellipsis;
+}
+.van-popup .picker-option .van-image {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}

web/src/assets/css/mobile/chat-list.styl

@@ -0,0 +1,47 @@
+.mobile-chat-list {
+  .content {
+    .van-cell__value {
+      .chat-list-item {
+        display flex
+        font-size 14px
+
+        .van-image {
+          min-width 32px
+          width 32px
+          height 32px
+        }
+
+        .van-ellipsis {
+          margin-top 5px;
+          margin-left 10px;
+        }
+      }
+    }
+  }
+
+
+  .van-nav-bar {
+    .van-nav-bar__right {
+      .van-icon {
+        font-size 20px;
+      }
+    }
+  }
+}
+
+.van-popup {
+  .picker-option {
+    display flex
+    width 100%
+    padding 0 10px
+    overflow hidden
+    height 20px
+    text-overflow ellipsis
+
+    .van-image {
+      width 20px;
+      height 20px;
+      margin-right 5px
+    }
+  }
+}

web/src/components/mobile/ChatPrompt.vue

@@ -77,7 +77,7 @@ onMounted(() => {
       padding: 5px 10px;
       background-color: #98E165;
       color #444444
-      font-size: 16px
+      font-size: 14px
       border-radius: 5px
       line-height 1.5
     }

web/src/components/mobile/ChatReply.vue

@@ -95,7 +95,7 @@ onMounted(() => {
         padding: 5px 10px;
         color #444444
         background-color: #ffffff;
-        font-size: 16px
+        font-size: 14px
         border-radius: 5px;
 
         p:last-child {

web/src/router.js

@@ -159,31 +159,42 @@ const routes = [
         ]
     },
 
-    {
+
-        path: '/mobile/chat/session',
-        name: 'mobile-chat-session',
-        component: () => import('@/views/mobile/ChatSession.vue'),
-    },
     {
         name: 'mobile',
         path: '/mobile',
-        meta: {title: 'ChatPuls-智能助手V3'},
+        meta: {title: 'ChatPlus-智能助手V3'},
         component: () => import('@/views/mobile/Home.vue'),
-        redirect: '/mobile/chat/list',
+        redirect: '/mobile/chat',
         children: [
             {
-                path: '/mobile/chat/list',
+                path: '/mobile/chat',
-                name: 'mobile-chat-list',
+                name: 'mobile-chat',
                 component: () => import('@/views/mobile/ChatList.vue'),
             },
-
+            {
+                path: '/mobile/mj',
+                name: 'mobile-mj',
+                component: () => import('@/views/mobile/ImageMj.vue'),
+            },
             {
                 path: '/mobile/profile',
                 name: 'mobile-profile',
                 component: () => import('@/views/mobile/Profile.vue'),
             },
+            {
+                path: '/mobile/apps',
+                name: 'mobile-app',
+                component: () => import('@/views/mobile/ChatApps.vue'),
+            },
         ]
     },
+    {
+        path: '/mobile/chat/session',
+        name: 'mobile-chat-session',
+        component: () => import('@/views/mobile/ChatSession.vue'),
+    },
+    
     {
         name: 'test',
         path: '/test',

web/src/views/mobile/ChatList.vue

@@ -261,49 +261,5 @@ const removeChat = (item) => {
 </script>
 
 <style lang="stylus" scoped>
-$fontSize = 16px;
+@import "@/assets/css/mobile/chat-list.styl"
-.mobile-chat-list {
-
-  .content {
-    .van-cell__value {
-      .chat-list-item {
-        display flex
-        font-size $fontSize
-
-        .van-image {
-          min-width 32px
-          width 32px
-          height 32px
-        }
-
-        .van-ellipsis {
-          margin-top 5px;
-          margin-left 10px;
-        }
-      }
-    }
-  }
-
-  .van-picker-column {
-    .picker-option {
-      display flex
-      width 100%
-      padding 0 10px
-
-      .van-image {
-        width 20px;
-        height 20px;
-        margin-right 5px
-      }
-    }
-  }
-
-  .van-nav-bar {
-    .van-nav-bar__right {
-      .van-icon {
-        font-size 20px;
-      }
-    }
-  }
-}
 </style>

web/src/views/mobile/Home.vue

@@ -4,9 +4,10 @@
       <router-view/>
 
       <van-tabbar route v-model="active" @change="onChange">
-        <van-tabbar-item to="/mobile/chat/list" name="home" icon="chat-o"></van-tabbar-item>
+        <van-tabbar-item to="/mobile/chat" name="home" icon="chat-o">对话</van-tabbar-item>
-        <van-tabbar-item to="/mobile/setting" name="setting" icon="setting-o"></van-tabbar-item>
+        <van-tabbar-item to="/mobile/mj" name="imageMj" icon="photo-o">绘图</van-tabbar-item>
-        <van-tabbar-item to="/mobile/profile" name="profile" icon="user-o"></van-tabbar-item>
+        <van-tabbar-item to="/mobile/apps" name="apps" icon="apps-o">应用</van-tabbar-item>
+        <van-tabbar-item to="/mobile/profile" name="profile" icon="user-o">我的</van-tabbar-item>
       </van-tabbar>
 
     </div>
@@ -33,7 +34,6 @@ checkSession().then(() => {
 const active = ref('home')
 const onChange = (index) => {
   console.log(index)
-  // showToast(`标签 ${index}`);
 }
 
 </script>

web/src/views/mobile/ImageMj.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="mobile-user-profile container">
+    <van-nav-bar :title="title"/>
+
+    <div class="content">
+      <van-form @submit="save">
+        <van-cell-group inset v-model="form">
+          <van-field
+              v-model="form.mobile"
+              name="手机号"
+              label="手机号"
+              readonly
+              disabled
+              placeholder="手机号"
+          />
+          <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="primary">{{ form.calls }}</van-tag>
+            </template>
+          </van-field>
+
+          <van-field label="剩余绘图次数">
+            <template #input>
+              <van-tag type="primary">{{ form.img_calls }}</van-tag>
+            </template>
+          </van-field>
+
+          <van-field label="累计消耗tokens">
+            <template #input>
+              <van-tag type="primary">{{ form.total_tokens }}</van-tag>
+            </template>
+          </van-field>
+        </van-cell-group>
+        <div style="margin: 16px;">
+          <van-button round block type="primary" native-type="submit">
+            提交
+          </van-button>
+        </div>
+      </van-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+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: '',
+  mobile: '',
+  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 lang="stylus">
+.mobile-user-profile {
+  .content {
+    .van-field__label {
+      width 100px
+      text-align right
+    }
+  }
+}
+</style>