feat: vue-mobile => 完善移动端聊天列表页功能

web/src/views/mobile/ChatList.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="container mobile-chat-list" v-if="isLogin">
+    <van-nav-bar
+        :title="title"
+        left-text="新建会话"
+        @click-left="showPicker = true">
+      <template #right>
+        <van-icon name="delete-o" @click="clearAllChatHistory"/>
+      </template>
+    </van-nav-bar>
+
+    <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-swipe-cell v-for="item in chats" :key="item.id">
+          <van-cell>
+            <div class="chat-list-item">
+              <van-image
+                  round
+                  :src="item.icon"
+              />
+              <div class="van-ellipsis">{{ item.title }}</div>
+            </div>
+          </van-cell>
+          <template #right>
+            <van-button square type="primary" text="修改" @click="editChat(item)"/>
+            <van-button square type="danger" text="删除" @click="removeChat(item)"/>
+          </template>
+        </van-swipe-cell>
+      </van-list>
+    </div>
+
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-picker
+          title="选择模型和角色"
+          :columns="columns"
+          @cancel="showPicker = false"
+          @confirm="newChat"
+      >
+        <template #option="item">
+          <div class="picker-option">
+            <van-image
+                fit="cover"
+                :src="item.icon"
+                round
+                v-if="item.icon"
+            />
+            <span>{{ item.text }}</span>
+          </div>
+        </template>
+      </van-picker>
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {httpGet} from "@/utils/http";
+import {getLoginUser} from "@/store/session";
+import {showFailToast, showSuccessToast, showToast} from "vant";
+import {checkSession} from "@/action/session";
+import router from "@/router";
+import {setChatConfig} from "@/store/chat";
+
+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 isLogin = ref(false)
+
+const showPicker = ref(false)
+const columns = ref([])
+
+checkSession().then(() => {
+  isLogin.value = true
+  // 加载角色列表
+  httpGet(`/api/role/list?user_id=${user.id}`).then((res) => {
+    if (res.data) {
+      const items = res.data
+      const roles = []
+      for (let i = 0; i < items.length; i++) {
+        // console.log(items[i])
+        roles.push({text: items[i].name, value: items[i].id, icon: items[i].icon})
+      }
+      columns.value[0] = roles
+    }
+  }).catch(() => {
+    showFailToast("加载聊天角色失败")
+  })
+
+  // 加载系统配置
+  httpGet('/api/admin/config/get?key=system').then(res => {
+    if (res.data) {
+      const items = res.data.models
+      const models = []
+      for (let i = 0; i < items.length; i++) {
+        models.push({text: items[i].toUpperCase(), value: items[i]})
+      }
+      columns.value[1] = models
+    }
+  }).catch(() => {
+    showFailToast("加载系统配置失败")
+  })
+}).catch(() => {
+  router.push("/login")
+})
+
+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 items = [];
+  for (let i = 0; i < allChats.value.length; i++) {
+    if (allChats.value[i].title.toLowerCase().indexOf(chatName.value.toLowerCase()) !== -1) {
+      items.push(allChats.value[i]);
+    }
+  }
+  chats.value = items;
+}
+
+const clearAllChatHistory = () => {
+  showSuccessToast('所有聊天记录已清空')
+}
+
+const newChat = (item) => {
+  showPicker.value = false
+  const options = item.selectedOptions
+  setChatConfig({
+    role: {
+      id: options[0].value,
+      name: options[0].text,
+      icon: options[0].icon
+    },
+    model: options[1].value,
+  })
+  router.push('/mobile/chat/session')
+}
+
+const editChat = (item) => {
+  showToast('修改会话标题')
+}
+
+const removeChat = (item) => {
+  showToast('删除当前会话')
+}
+
+</script>
+
+<style scoped lang="stylus">
+
+.mobile-chat-list {
+  .content {
+    .van-cell__value {
+      .chat-list-item {
+        display flex
+
+        .van-image {
+          width 30px
+          height 30px
+        }
+
+        .van-ellipsis {
+          margin-top 4px;
+          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>