feat: 修改scroll滚动

src/api/helper.js

@@ -0,0 +1,9 @@
+import http from "@/utils/request";
+
+export const helperApi = {
+  /**
+   * 获取助手列表
+   */
+  getHelperList: params => http.get('/front/bigModel/agentAssistant/list', { params }),
+
+}

src/components/Layout/TheMenu.vue

@@ -71,7 +71,7 @@ const menuOptions = [
   {
     label: () => renderLabel('智能助手'),
     icon: renderIcon({ name: 'menu-user' }),
-    key: '/'
+    key: '/helper'
   },
   {
     label: () => renderLabel('用户中心'),

src/composables/useInfinite.js

@@ -37,9 +37,8 @@ export const useInfinite = (path, props) => {
   }
 
   const onReset = async () => {
-    console.log( "recordList", recordList.value );
     const { rows, total } = await initRecordData({page:1, pageSize: (pageParams.value.page * pageParams.value.pageSize) + 1});
-    console.log( "row", rows );
+
     recordList.value = rows;
     counter.value = total;
     noMore.value = !unref(isMore);

src/views/helper/HelperView.vue

@@ -1,5 +1,225 @@
+<script setup>
+import { ref, unref, computed, onMounted, onUnmounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMessage } from 'naive-ui';
+import { useChatStore } from '@/stores/modules/chatStore';
+import { BaseButton, RecodeCardItem, TheSubMenu, TheChatView, ChatWelcome } from '@/components';
+import { ChatAsk, ChatAnswer, ChatInput } from '@/components/Chat';
+import { helperApi } from '@/api/helper';
+
+
+import { useInfinite } from '@/composables/useInfinite';
+import { useScroll } from '@/composables/useScroll';
+import { useChat } from '@/composables/useChat';
+import { useRecommend } from '@/composables/useRecommend';
+
+const { recordList, isFetching, onScrolltolower, onReset, addHistoryRecord } = useInfinite('/front/bigModel/qa/pageList', { module: 2 });
+
+const dataList = ref(new Array(100).fill({ a:"hello" }));
+const isLoading = ref(true);
+
+const lists = [
+	{
+		title:'报告研究',
+		content:'写出一篇有关 #智慧水务# 的500字研究报告，报告中需引述最新的研究，并引用专家观点',
+	},
+	{
+		title:'报告开场白',
+		content:'我现在正在写一篇大学生研究报告，报告的开场白需要让普通人能快速理解。我的报告主题是 #关于AIGC快速发展的调查和研究#，请提供三种开头方式，要简单到普通人都能听懂，同时要足够能吸引人，让他们愿意专心听下去',
+	},
+	{
+		title:'邮件回复',
+		content:'你扮演一个 #调度工程师#，帮我写一封邮件，邮件的内容是 #向公司的领导申请更多的开发资源支持#，邮件内容需要简单明了，语气大方得体，使用中文表达'
+	},{
+		title:'周报撰写',
+		content:'你扮演一个资深员工，我把这一周的工作内容发给你，你帮我撰写为一篇完整的周报。周报要分成本周工作总结、下周工作计划、遇到的困难和解决方案、个人感悟四个段落分别撰写。每一段落都要以分条列表形式写出具体事项，你要一步一步的引导我，让我写出一篇完整的周报。'
+	},{
+		title:'PPT大纲',
+		content:'你扮演一个PPT专家，我把PPT主题#论智慧水务新时代#发给你，请自动生成主题、内容、讲稿'
+	},{
+		title:'报告开场白',
+		content:'我现在正在写一篇大学生研究报告，报告的开场白需要让普通人能快速理解。我的报告主题是 #关于AIGC快速发展的调查和研究#，请提供三种开头方式，要简单到普通人都能听懂，同时要足够能吸引人，让他们愿意专心听下去',
+	},{
+		title:'SWTO分析',
+		content:'你现在扮演专业的分析研究员，帮我针对#智慧水务# 做一个SWOT分析，要求尽可能详细'
+	},{
+		title:'周报撰写',
+		content:'你扮演一个资深员工，我把这一周的工作内容发给你，你帮我撰写为一篇完整的周报。周报要分成本周工作总结、下周工作计划、遇到的困难和解决方案、个人感悟四个段落分别撰写。每一段落都要以分条列表形式写出具体事项，你要一步一步的引导我，让我写出一篇完整的周报。'
+	},{
+		title:'PPT大纲',
+		content:'你扮演一个PPT专家，我把PPT主题#论智慧水务新时代#发给你，请自动生成主题、内容、讲稿'
+	},{
+		title:'SWTO分析',
+		content:'你现在扮演专业的分析研究员，帮我针对#智慧水务# 做一个SWOT分析，要求尽可能详细'
+	},{
+		title:'SWTO分析',
+		content:'你现在扮演专业的分析研究员，帮我针对#智慧水务# 做一个SWOT分析，要求尽可能详细'
+	},{
+		title:'SWTO分析',
+		content:'你现在扮演专业的分析研究员，帮我针对#智慧水务# 做一个SWOT分析，要求尽可能详细'
+	},
+	{
+		title:'报告研究',
+		content:'写出一篇有关 #智慧水务# 的500字研究报告，报告中需引述最新的研究，并引用专家观点',
+	},
+	{
+		title:'报告研究',
+		content:'写出一篇有关 #智慧水务# 的500字研究报告，报告中需引述最新的研究，并引用专家观点',
+	},
+	{
+		title:'报告研究',
+		content:'写出一篇有关 #智慧水务# 的500字研究报告，报告中需引述最新的研究，并引用专家观点',
+	},
+	{
+		title:'报告研究',
+		content:'写出一篇有关 #智慧水务# 的500字研究报告，报告中需引述最新的研究，并引用专家观点',
+	},
+	{
+		title:'报告研究',
+		content:'写出一篇有关 #智慧水务# 的500字研究报告，报告中需引述最新的研究，并引用专家观点',
+	},
+	{
+		title:'报告研究',
+		content:'写出一篇有关 #智慧水务# 的500字研究报告，报告中需引述最新的研究，并引用专家观点',
+	},
+]
+
+const getMoreData = () => {
+  
+}
+
+
+const fetchHelperList = () => {
+
+}
+
+const handleCreateDialog = () => {
+
+}
+
+
+onMounted(() => {
+
+  helperApi.getHelperList();
+
+})
+</script>
 <template>
-  <div>
-    智能助手
-  </div>
-</template>
+  <section class="flex items-start h-full">
+    <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, index in recordList"
+          :key="item.sessionId + index"
+          :title="item.showVal"
+          :time="item.createTime"
+          :data-item="item"
+          @on-click="handleChatDetail"
+          @on-delete="handeChatDelete"
+        />
+      </div>
+    </TheSubMenu>
+
+    
+
+    <TheChatView ref="scrollRef">
+      <ChatWelcome title="您好,我是LibraAI专家问答" card-title="您可以试着问我："
+        :sub-title="[
+          'LibarAI智能助手模块，具有强大的文本理解和生成能力，可快速响应用户需求',
+          '提供撰写文章、生成报告等服务。'
+        ]" 
+        :card-content="recommendList"
+        @on-click="handleWelcomeRecommend"
+      />
+
+        <div class="grid-container">
+          <div class="grid-content">
+            <div class="grid-item" v-for="item,index in lists">
+              <div class="grid-item-icon">
+                <SvgIcon name="report"></SvgIcon>
+                <h3 class="grid-item-title">{{index}}{{item.title}}</h3>
+              </div>
+              <div class="text-[#555555] mt-2">
+                <!--如果item.content中包含#号，把#号用span标签包裹并设置为蓝色--->
+                <template v-if="item.content.indexOf('#') !== -1">
+                  <span v-for="word in item.content.split('#')">{{word}}<span style="color: #2454FF;"> # </span></span>
+                </template>
+                <template v-else>
+                  <p>{{item.content}}</p>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      <template #footer>
+        <ChatInput
+          ref="inputRef"
+          v-model:loading="isLoading"
+          v-model:switch="switchActive"
+          @on-click="handleSubmit"
+          @on-enter="handleSubmit"
+        ></ChatInput>
+      </template>
+    </TheChatView>
+  </section>  
+</template>
+
+<style scoped lang="scss">
+.grid-container{
+	position: relative;
+	height: calc(100% - 184px);
+  padding-bottom: 20px;
+  margin-top: 36px;
+	overflow: hidden;
+	overflow-y: scroll;
+  
+  &::-webkit-scrollbar {
+    width: 0px;
+  }
+
+	.grid-content{
+		column-count:3; 
+		column-gap:20px;
+		-moz-column-count:3;
+		-webkit-column-count:3;
+		-moz-column-gap:20px;
+		-webkit-column-gap:20px;
+
+		.grid-item{
+			height: auto;
+			padding: 20px 16px 16px 16px;
+			margin-bottom: 20px;
+			border-radius: 10px;
+			box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+			background-color: #fff;
+			-moz-page-break-inside: avoid;
+			-webkit-column-break-inside: avoid;
+			break-inside: avoid;
+
+			.grid-item-icon{
+				display: flex;
+				align-items: center;
+				justify-content: start;
+
+				.grid-item-title{
+					margin-left: 20px;
+					font-size: 16px;
+					font-weight: 600;
+					color: #1A2029;
+				}
+
+			}
+		}
+	}
+
+
+}
+
+</style>