feat: 完成移动端前段框架搭建

web/src/views/ChatPlus.vue

@@ -694,11 +694,12 @@ const chatName = ref('')
 // 搜索会话
 const searchChat = function () {
   if (chatName.value === '') {
+    chatList.value = allChats.value
     return
   }
   const roles = [];
   for (let i = 0; i < allChats.value.length; i++) {
-    if (allChats.value[i].title.indexOf(chatName.value) !== -1) {
+    if (allChats.value[i].title.toLowerCase().indexOf(chatName.value.toLowerCase()) !== -1) {
       roles.push(allChats.value[i]);
     }
   }

web/src/views/mobile/Chat.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="chat-mobile">
+    <van-nav-bar :title="title"/>
+
+    <div class="content">
+      <van-search
+          v-model="chatName"
+          placeholder="请输入会话标题"
+          input-align="center"
+          @input="search"
+      />
+
+      <van-list
+          v-model:loading="loading"
+          v-model:error="error"
+          error-text="请求失败，点击重新加载"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+      >
+        <van-cell v-for="item in chats" :key="item.id">
+          <div class="chat-list-item">
+            <van-image
+                round
+                :src="item.icon"
+            />
+            <van-text-ellipsis class="text" :content="item.title"/>
+          </div>
+        </van-cell>
+      </van-list>
+
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {httpGet} from "@/utils/http";
+import {getLoginUser} from "@/utils/storage";
+import {showFailToast} from "vant";
+
+const title = ref("会话列表")
+const chatName = ref("")
+const chats = ref([])
+const allChats = ref([])
+const loading = ref(false)
+const finished = ref(false)
+const error = ref(false)
+const user = getLoginUser()
+
+const onLoad = () => {
+  httpGet("/api/chat/list?user_id=" + user.id).then((res) => {
+    if (res.data) {
+      chats.value = res.data;
+      allChats.value = res.data;
+      finished.value = true
+    }
+    loading.value = false;
+  }).catch(() => {
+    error.value = true
+    showFailToast("加载会话列表失败")
+  })
+};
+
+const search = () => {
+  if (chatName.value === '') {
+    chats.value = allChats.value
+    return
+  }
+  const roles = [];
+  for (let i = 0; i < allChats.value.length; i++) {
+    if (allChats.value[i].title.toLowerCase().indexOf(chatName.value.toLowerCase()) !== -1) {
+      roles.push(allChats.value[i]);
+    }
+  }
+  chats.value = roles;
+}
+
+</script>
+
+<style scoped lang="stylus">
+
+.chat-mobile {
+  .content {
+    padding: 0 10px;
+
+    .van-cell__value {
+      .chat-list-item {
+        display flex
+
+        .van-image {
+          width 30px
+          height 30px
+        }
+
+        .text {
+          margin-top 4px;
+          margin-left 10px;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/mobile/Home.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <router-view/>
+
+    <van-tabbar route v-model="active" @change="onChange">
+      <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/profile" name="profile" icon="user-o"></van-tabbar-item>
+    </van-tabbar>
+
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+
+const active = ref('home');
+const onChange = (index) => {
+  console.log(index)
+  // showToast(`标签 ${index}`);
+}
+</script>
+
+<style lang="stylus">
+.van-toast--fail {
+  background #fef0f0
+  color #f56c6c
+}
+</style>

web/src/views/mobile/Profile.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <van-nav-bar :title="title"/>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+
+const title = ref('用户设置')
+</script>
+
+<style scoped>
+
+</style>

web/src/views/mobile/Setting.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <van-nav-bar :title="title"/>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+
+const title = ref('聊天设置')
+</script>
+
+<style scoped>
+
+</style>