fix(page): 🧩 修改请求使用最近hook-fetch的hooks
This commit is contained in:
Json_Lee
parent
10100e0786
commit
0a8841424d
18
package.json
18
package.json
@ -36,7 +36,7 @@
|
||||
"@vueuse/core": "^13.3.0",
|
||||
"@vueuse/integrations": "^13.3.0",
|
||||
"element-plus": "^2.9.11",
|
||||
"hook-fetch": "1.1.2",
|
||||
"hook-fetch": "^1.1.3",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^3.0.3",
|
||||
"pinia-plugin-persistedstate": "^4.3.0",
|
||||
@ -60,6 +60,13 @@
|
||||
"lint-staged": "^16.1.0",
|
||||
"prettier": "^3.5.3",
|
||||
"sass-embedded": "^1.89.1",
|
||||
"stylelint": "^16.20.0",
|
||||
"stylelint-config-html": "^1.1.0",
|
||||
"stylelint-config-recess-order": "^6.0.0",
|
||||
"stylelint-config-recommended-scss": "^15.0.1",
|
||||
"stylelint-config-recommended-vue": "^1.6.0",
|
||||
"stylelint-config-standard": "^38.0.0",
|
||||
"stylelint-config-standard-scss": "^15.0.1",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-api-pro": "^0.0.7",
|
||||
"unocss": "66.1.3",
|
||||
@ -68,14 +75,7 @@
|
||||
"vite": "^6.3.5",
|
||||
"vite-plugin-env-typed": "^0.0.2",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vue-tsc": "^2.2.10",
|
||||
"stylelint": "^16.20.0",
|
||||
"stylelint-config-html": "^1.1.0",
|
||||
"stylelint-config-recess-order": "^6.0.0",
|
||||
"stylelint-config-recommended-scss": "^15.0.1",
|
||||
"stylelint-config-recommended-vue": "^1.6.0",
|
||||
"stylelint-config-standard": "^38.0.0",
|
||||
"stylelint-config-standard-scss": "^15.0.1"
|
||||
"vue-tsc": "^2.2.10"
|
||||
},
|
||||
"config": {
|
||||
"commitizen": {
|
||||
|
||||
20
pnpm-lock.yaml
generated
20
pnpm-lock.yaml
generated
@ -33,8 +33,8 @@ importers:
|
||||
specifier: ^2.9.11
|
||||
version: 2.9.11(vue@3.5.16(typescript@5.8.3))
|
||||
hook-fetch:
|
||||
specifier: 1.1.2
|
||||
version: 1.1.2(typescript-api-pro@0.0.7)
|
||||
specifier: ^1.1.3
|
||||
version: 1.1.3(react@19.1.0)(typescript-api-pro@0.0.7)(vue@3.5.16(typescript@5.8.3))
|
||||
nprogress:
|
||||
specifier: ^0.2.0
|
||||
version: 0.2.0
|
||||
@ -2788,10 +2788,12 @@ packages:
|
||||
resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
|
||||
hasBin: true
|
||||
|
||||
hook-fetch@1.1.2:
|
||||
resolution: {integrity: sha512-Vi4Afdj7DY8LouCaeXjH1TKk6DtZDVtkEvVcvRH044BTamajzVgTjTws++tWkDvX90Ih/7/mZ8qB1h4Nwf5RXA==}
|
||||
hook-fetch@1.1.3:
|
||||
resolution: {integrity: sha512-FkWKUjZWr83gyew0YbRyEc72dlIGCYvNXiRfi4AXlb/hvIiFPQfcvlP3IFaIYKERUeKXmuBS9fuNuK8JPQiOCg==}
|
||||
peerDependencies:
|
||||
react: ^19.1.0
|
||||
typescript-api-pro: ^0.0.6
|
||||
vue: ^3.5.16
|
||||
|
||||
hookable@5.5.3:
|
||||
resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
|
||||
@ -3934,6 +3936,10 @@ packages:
|
||||
rc9@2.1.2:
|
||||
resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
|
||||
|
||||
react@19.1.0:
|
||||
resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
read-yaml-file@1.1.0:
|
||||
resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
|
||||
engines: {node: '>=6'}
|
||||
@ -8023,11 +8029,13 @@ snapshots:
|
||||
|
||||
he@1.2.0: {}
|
||||
|
||||
hook-fetch@1.1.2(typescript-api-pro@0.0.7):
|
||||
hook-fetch@1.1.3(react@19.1.0)(typescript-api-pro@0.0.7)(vue@3.5.16(typescript@5.8.3)):
|
||||
dependencies:
|
||||
qs: 6.14.0
|
||||
radash: 12.1.0
|
||||
react: 19.1.0
|
||||
typescript-api-pro: 0.0.7
|
||||
vue: 3.5.16(typescript@5.8.3)
|
||||
|
||||
hookable@5.5.3: {}
|
||||
|
||||
@ -9299,6 +9307,8 @@ snapshots:
|
||||
defu: 6.1.4
|
||||
destr: 2.0.5
|
||||
|
||||
react@19.1.0: {}
|
||||
|
||||
read-yaml-file@1.1.0:
|
||||
dependencies:
|
||||
graceful-fs: 4.2.11
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!-- 每个回话对应的聊天内容 -->
|
||||
<script setup lang="ts">
|
||||
import type { HookFetchRequest } from 'node_modules/hook-fetch/types/utils';
|
||||
import type { AnyObject } from 'typescript-api-pro';
|
||||
import type { Sender } from 'vue-element-plus-x';
|
||||
import type { BubbleProps } from 'vue-element-plus-x/types/Bubble';
|
||||
import type { BubbleListInstance } from 'vue-element-plus-x/types/BubbleList';
|
||||
import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
|
||||
import type { ThinkingStatus } from 'vue-element-plus-x/types/Thinking';
|
||||
import { useHookFetch } from 'hook-fetch/vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { send } from '@/api';
|
||||
import FilesSelect from '@/components/FilesSelect/index.vue';
|
||||
@ -40,9 +40,13 @@ const inputValue = ref('');
|
||||
const senderRef = ref<InstanceType<typeof Sender> | null>(null);
|
||||
const bubbleItems = ref<MessageItem[]>([]);
|
||||
const bubbleListRef = ref<BubbleListInstance | null>(null);
|
||||
const isLoading = ref(false);
|
||||
// 记录发送的返回
|
||||
let sendRequest: HookFetchRequest<any, any> | null = null;
|
||||
|
||||
const { stream, loading: isLoading, cancel } = useHookFetch({
|
||||
request: send,
|
||||
onError: (err) => {
|
||||
console.warn('测试错误拦截', err);
|
||||
},
|
||||
});
|
||||
// 记录进入思考中
|
||||
let isThinking = false;
|
||||
|
||||
@ -91,7 +95,6 @@ watch(
|
||||
// 封装数据处理逻辑
|
||||
function handleDataChunk(chunk: AnyObject) {
|
||||
try {
|
||||
// console.log('New chunk:', chunk);
|
||||
const reasoningChunk = chunk.choices?.[0].delta.reasoning_content;
|
||||
if (reasoningChunk) {
|
||||
// 开始思考链状态
|
||||
@ -153,14 +156,13 @@ async function startSSE(chatContent: string) {
|
||||
// console.log('chatContent', chatContent);
|
||||
// 清空输入框
|
||||
inputValue.value = '';
|
||||
isLoading.value = true;
|
||||
addMessage(chatContent, true);
|
||||
addMessage('', false);
|
||||
|
||||
// 这里有必要调用一下 BubbleList 组件的滚动到底部 手动触发 自动滚动
|
||||
bubbleListRef.value?.scrollToBottom();
|
||||
|
||||
sendRequest = send({
|
||||
for await (const chunk of stream({
|
||||
messages: bubbleItems.value
|
||||
.filter((item: any) => item.role === 'user')
|
||||
.map((item: any) => ({
|
||||
@ -170,9 +172,7 @@ async function startSSE(chatContent: string) {
|
||||
sessionId: route.params?.id !== 'not_login' ? String(route.params?.id) : undefined,
|
||||
userId: userStore.userInfo?.userId,
|
||||
model: modelStore.currentModelInfo.modelName ?? '',
|
||||
});
|
||||
|
||||
for await (const chunk of sendRequest.stream()) {
|
||||
})) {
|
||||
handleDataChunk(chunk.result as AnyObject);
|
||||
}
|
||||
}
|
||||
@ -185,14 +185,12 @@ async function startSSE(chatContent: string) {
|
||||
if (bubbleItems.value.length) {
|
||||
bubbleItems.value[bubbleItems.value.length - 1].typing = false;
|
||||
}
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 中断请求
|
||||
async function cancelSSE() {
|
||||
sendRequest?.abort();
|
||||
isLoading.value = false;
|
||||
cancel();
|
||||
// 结束最后一条消息打字状态
|
||||
if (bubbleItems.value.length) {
|
||||
bubbleItems.value[bubbleItems.value.length - 1].typing = false;
|
||||
@ -252,38 +250,21 @@ watch(
|
||||
<BubbleList ref="bubbleListRef" :list="bubbleItems" max-height="calc(100vh - 240px)">
|
||||
<template #header="{ item }">
|
||||
<Thinking
|
||||
v-if="item.reasoning_content"
|
||||
v-model="item.thinlCollapse"
|
||||
:content="item.reasoning_content"
|
||||
:status="item.thinkingStatus"
|
||||
class="thinking-chain-warp"
|
||||
@change="handleChange"
|
||||
v-if="item.reasoning_content" v-model="item.thinlCollapse" :content="item.reasoning_content"
|
||||
:status="item.thinkingStatus" class="thinking-chain-warp" @change="handleChange"
|
||||
/>
|
||||
</template>
|
||||
</BubbleList>
|
||||
|
||||
<Sender
|
||||
ref="senderRef"
|
||||
v-model="inputValue"
|
||||
class="chat-defaul-sender"
|
||||
:auto-size="{
|
||||
ref="senderRef" v-model="inputValue" class="chat-defaul-sender" :auto-size="{
|
||||
maxRows: 6,
|
||||
minRows: 2,
|
||||
}"
|
||||
variant="updown"
|
||||
clearable
|
||||
allow-speech
|
||||
:loading="isLoading"
|
||||
@submit="startSSE"
|
||||
@cancel="cancelSSE"
|
||||
}" variant="updown" clearable allow-speech :loading="isLoading" @submit="startSSE" @cancel="cancelSSE"
|
||||
>
|
||||
<template #header>
|
||||
<div class="sender-header p-12px pt-6px pb-0px">
|
||||
<Attachments
|
||||
:items="filesStore.filesList"
|
||||
:hide-upload="true"
|
||||
@delete-card="handleDeleteCard"
|
||||
>
|
||||
<Attachments :items="filesStore.filesList" :hide-upload="true" @delete-card="handleDeleteCard">
|
||||
<template #prev-button="{ show, onScrollLeft }">
|
||||
<div
|
||||
v-if="show"
|
||||
|
||||
1
types/hook-fetch.d.ts
vendored
1
types/hook-fetch.d.ts
vendored
@ -1 +1,2 @@
|
||||
/// <reference types="hook-fetch/plugins" />
|
||||
/// <reference types="hook-fetch/vue" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user