feat: hooks分装

src/components/Layout/TheSubMenu.vue

@@ -8,10 +8,16 @@ defineProps({
   title: {
     type: String,
     default: ''
+  },
+  loading: {
+    type: Boolean,
+    default: false
   }
 })
 
-const emits = defineEmits(['on-load']);
+// const modelLoading = defineModel('loading');
+
+const emits = defineEmits(['scrollToLower']);
 
 const appStore = useAppStore();
 
@@ -19,7 +25,7 @@ const { subMenuCollapse } = storeToRefs(appStore);
 
 const changeCollapse = () => appStore.toggleSubMenuCollapse();
 
-const handleLoad = () => emits('on-load');
+const handleLoadMore = () => emits('scrollToLower');
 </script>
 
 <template>
@@ -35,9 +41,9 @@ const handleLoad = () => emits('on-load');
     </div>
 
     <div class="sub-menu-main w-full h-full">
-      <NInfiniteScroll class="h-full" :distance="10" @load="handleLoad">
+      <NInfiniteScroll class="h-full" :distance="10" @load="handleLoadMore">
         <slot></slot>
-        <div class="footer-loading w-full h-[50px]">
+        <div class="footer-loading w-full h-[50px]" v-show="loading">
           加载更多
         </div>
       </NInfiniteScroll>
@@ -62,7 +68,6 @@ const handleLoad = () => emits('on-load');
     position: absolute;
     bottom: 0px;
     @include flex(x, center, center);
-    display: none;
     background: linear-gradient(180deg, rgba(229, 235, 247, 0.2) 0%, #E5EBF7 15.45%, #E5EBF7 100%);
     font-size: 12px;
     color: #666;

src/composables/useInfinite.js

@@ -0,0 +1,63 @@
+import { ref, unref, onMounted } from "vue";
+import { chatApi } from '@/api/chat';
+
+export const useInfinite = (props) => {
+  const pageParams = { page: 1, pageSize: 10 };
+
+  const recordList = ref([]);
+  const counter = ref(0);
+  const isFetching = ref(false);
+  const noMore = ref(false);
+
+  const onScrolltolower = async () => {
+    if(unref(isFetching) || unref(noMore)) return;
+
+    isFetching.value = true;
+
+    const { rows, total } = await chatApi.getAnswerHistoryList({ ...props, ...pageParams });
+    
+    recordList.value.push(rows);
+
+    if (pageParams.page * pageParams.pageSize < total) {
+      pageParams.page ++;
+    } else {
+      noMore = true;
+    }
+
+    isFetching.value = false;
+  }
+
+  const getMore = async() => {
+    const { rows, total } = await chatApi.getAnswerHistoryList({ ...props, ...pageParams });
+    counter.value = total;
+    recordList.value.push(rows);
+  }
+
+  onMounted(() => getMore());
+
+  return {
+    recordList,
+    isFetching,
+    onScrolltolower
+  }
+}
+//   {
+//     data,
+//     isLoading,
+//     isError,
+//     isFetching,
+//     isFetchingNextPage,
+//     fetchNextPage,
+//     hasNextPage,
+//   },
+//   {
+//     pageSize = 10,
+//     onSuccess,
+//     onError,
+//     onSettled,
+//     onFetchingNextPage,
+//   } = {},
+// ) => {
+//   const handleFetchNextPage = () => {
+//   }
+// }

src/permission.js

@@ -2,6 +2,9 @@ import router from './router';
 import { createDiscreteApi} from 'naive-ui';
 import { useUserStore } from '@/stores/modules/userStore';
 
+const whiteList = ['/login'];
+const TITLE_SUFFIX = ' - LibraAI人工智能运营体';
+
 const { loadingBar } = createDiscreteApi(['loadingBar'], {
   loadingBarProviderProps: {
     loadingBarStyle: {
@@ -10,12 +13,12 @@ const { loadingBar } = createDiscreteApi(['loadingBar'], {
   }
 })
 
-const whiteList = ['/login'];
-const TITLE_SUFFIX = ' - LibraAI人工智能运营体';
-
+// 简易的基础权限
 router.beforeEach(async (to, from, next) => {
 
   loadingBar.start();
+  next();
+  return
 
   const isRouterAuth = whiteList.includes(to.path);
 

src/utils/request.ts

@@ -1,15 +1,15 @@
 import axios from 'axios';
 import { useUserStore } from '@/stores/modules/userStore';
-// import { createDiscreteApi } from 'naive-ui';
+import { createDiscreteApi } from 'naive-ui';
 
 import { tansParams } from "@/utils/tools";
 
 import type { Result } from '@/types/data';
 import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig, AxiosError } from 'axios';
 
-// import type { NotificationApi } from "naive-ui";
+import type { NotificationApi } from "naive-ui";
 
-// const { notification } = createDiscreteApi(["notification"]);
+const { notification } = createDiscreteApi(["notification"]);
 
 const useStore = useUserStore();
 
@@ -32,14 +32,14 @@ enum errorCode {
   'HTTP版本不受支持'   = 505
 }
 
-// const showNotification = (type: keyof NotificationApi = 'error', meta: string) => {
-//   notification[type]({
-//     content: '提示',
-//     meta,
-//     duration: 3 * 1000,
-//     keepAliveOnHover: true
-//   })
-// }
+const showNotification = (type: keyof NotificationApi = 'error', meta: string) => {
+  notification[type]({
+    content: '提示',
+    meta,
+    duration: 3 * 1000,
+    keepAliveOnHover: true
+  })
+}
 
 export class Request {
 
@@ -73,10 +73,10 @@ export class Request {
       // !success && showNotification("error", message);
       return code === 200 ? res.data : Promise.reject(res.data);
     }, (error: AxiosError) => {
-      const errorMessage = errorCode[error.response?.status as number] || '未知错误';
-      // showNotification("error", errorMessage);
-      console.log("error", error);
-      return error;
+      console.log(error);
+      const errorMessage = errorCode[error.response?.status as number] || error.message ||'未知错误';
+      showNotification("error", errorMessage);
+      return Promise.reject(error);
     })
   }
 

src/views/answer/AnswerView.vue

@@ -2,21 +2,15 @@
 import { ref, reactive,onMounted } from 'vue';
 import { NPopconfirm } from 'naive-ui';
 import { SvgIcon, BaseButton, BaseInput, RecodeCardItem, TheSubMenu, TheChatView } from '@/components';
+import { useInfinite } from '@/composables/useInfinite';
 import { chatApi } from '@/api/chat';
 
-const switchModelState = ref(true);
-
-const historyRecord = reactive({
-  rows: [],
-  total: 0
-})
+// TODO: 如果这里的key不一样，将会在拆一层组件出来 - list
+const { recordList, isFetching, onScrolltolower } = useInfinite({model: 0});
 
-// const historyRecordData = ref({rows: [], total: 0});
+const switchModelState = ref(true);
 
 onMounted(async () => {
-  // 查询历史记录
-  const { rows, total } = await chatApi.getAnswerHistoryList({ module: 0 });
-  historyRecord.rows = rows;
 })
 
 // 新建对话
@@ -27,18 +21,16 @@ const handleCreateDialog = () => {
 
 <template>
   <section class="flex items-start h-full">
-    <TheSubMenu title="历史记录">
+    <TheSubMenu title="历史记录" @scrollToLower="onScrolltolower" :loading="isFetching">
 
       <template #top>
-        
-     
         <div class="create-btn px-[11px] pb-[22px]">
           <BaseButton @click="handleCreateDialog">新建对话</BaseButton>
         </div>
       </template>
 
       <div class="pr-[4px] text-[#5e5e5e]">
-        <RecodeCardItem v-for="item in historyRecord.rows" :key="item" v-bind="item" />
+        <RecodeCardItem v-for="item in recordList" :key="item.sessionId" v-bind="item" />
       </div>
 
     </TheSubMenu>

src/views/login/LoginView.vue

@@ -35,7 +35,7 @@ const handleSubmit = async () => {
     router.push("/");
   }
   catch (error) {
-    errorMsg.value = error.msg;
+    errorMsg.value = error.message;
   }
   finally {
     loading.value = false;