falt: 更新历史记录

pages/chat/chat.vue

@@ -6,12 +6,22 @@
         <!-- 抽屉窗口 -->
         <view class="drawer" :class="{ open: isDrawerOpen }">
             <view class="drawer-content">
-                <view class="drawer-title">历史对话</view>
+                <view class="drawer-title">AI+</view>
                 <scroll-view scroll-y :show-scrollbar="false" class="chat-scroll">
+                    <view class="drawer-input-content">
+                        <input
+                            class="drawer-input"
+                            type="text"
+                            v-model="searchText"
+                            placeholder-class="input-placeholder"
+                            placeholder="请输入搜索历史对话"
+                        />
+                        <uni-icons class="input-search" type="search" size="20"></uni-icons>
+                    </view>
                     <view
                         class="drawer-rows"
                         @click="changeDialogue(item)"
-                        v-for="(item, index) in tabeList"
+                        v-for="(item, index) in filteredList"
                         :key="item.id"
                     >
                         <view
@@ -47,8 +57,8 @@
 </template>
 
 <script setup>
-import { ref, inject, nextTick } from 'vue';
+import { ref, inject, nextTick, computed } from 'vue';
-const { $api, navTo } = inject('globalFunction');
+const { $api, navTo, insertSortData } = inject('globalFunction');
 import { onLoad, onShow } from '@dcloudio/uni-app';
 import useChatGroupDBStore from '@/stores/userChatGroupStore';
 import aiPaging from './components/ai-paging.vue';
@@ -58,8 +68,17 @@ const isDrawerOpen = ref(false);
 const scrollIntoView = ref(false);
 import config from '@/config';
 
+const searchText = ref('');
 const paging = ref(null);
 
+// 实时过滤
+const filteredList = computed(() => {
+    if (!searchText.value) return tabeList.value;
+    const list = tabeList.value.filter((item) => !item.isTitle && item.title.includes(searchText.value));
+    const [result, lastData] = $api.insertSortData(list);
+    return result;
+});
+
 onLoad(() => {
     // useChatGroupDBStore().getHistory();
 });
@@ -117,7 +136,7 @@ const changeDialogue = (item) => {
     position: fixed;
     top: 0;
     left: 0; /* 如果要右侧弹出改为 right: 0; */
-    width: 500rpx;
+    width: 523rpx;
     height: 100vh;
     background: #e7e7e6;
     transform: translateX(-100%);
@@ -132,44 +151,65 @@ const changeDialogue = (item) => {
 
 }
 
+.drawer-input-content
+    margin: 0 28rpx
+    padding: 0 24rpx
+    height: 72rpx;
+    background: #F6F6F6;
+    border-radius: 16rpx 16rpx 16rpx 16rpx;
+    display: flex
+    align-items: center
+    justify-content: center
+    .drawer-input
+        font-size: 28rpx
+        width: 100%
+    .input-placeholder
+        font-weight: 500;
+        font-size: 28rpx;
+        color: #A6A6A6;
+    .input-search
+        margin-left: 20rpx
 /* 抽屉内容 */
 .drawer-content
     height: 100%
+    background: #FFFFFF;
     .drawer-title
         height: calc(88rpx + env(safe-area-inset-top));
         line-height: calc(88rpx + env(safe-area-inset-top));
-        padding: 0 20rpx;
+        padding: 0 52rpx;
-        background: rgba(71, 120, 236, 1);
+        color: #333333;
-        color: #FFFFFF;
+        font-size: 32rpx
-        font-size: 30rpx
+        font-weight: bold
     .chat-scroll
         height: calc(100% - 88rpx + env(safe-area-inset-top));
     .drawer-rows
-        padding: 0 20rpx;
+        padding: 0 28rpx;
         // border-bottom: 2rpx dashed #e8e8e8
         overflow:hidden; //超出的文本隐藏
         text-overflow:ellipsis; //溢出用省略号显示
         white-space:nowrap; //溢出不换行
         .drawer-row-title
-            color: #5d5d5d;
+            color: #A6A6A6;
+            font-weight: 500;
             font-weight: bold;
-            font-size: 24rpx
+            font-size: 28rpx
-            line-height: 88rpx
+            padding: 0 24rpx
-            height: 88rpx
+            margin-top: 50rpx
-            margin-top: 16rpx
+            margin-bottom: 16rpx
-            // border-bottom: 2rpx dashed #5d5d5d
         .drawer-row-list
             height: 66rpx;
             line-height: 66rpx
-            color: #000000
             font-size: 28rpx
             overflow: hidden
             text-overflow: ellipsis
+            font-weight: 500;
+            color: #595959;
+            padding: 0 24rpx
         .drawer-row-active
         .drawer-row-list:active
-            background: #DCDCDB
+            color: #333333;
-            border-radius: 8rpx
+            background: #F6F6F6;
-            padding: 0 10rpx
+            border-radius: 16rpx 16rpx 16rpx 16rpx;
 
 
 /* 主要内容区域 */