From 759c8cfbdc1c038b9ed8695cb1c2dafd45aa1308 Mon Sep 17 00:00:00 2001 From: rd <1344903914@qq.com> Date: Mon, 4 Aug 2025 13:55:46 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=E8=8E=B7=E5=8F=96?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=BB=E8=89=B2=E8=B0=83=E6=8C=87=E4=BB=A4?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/directives/getImageMainColor.ts | 53 +++++++++++++++++++++-------- src/views/agent/chat/index.vue | 9 ++--- src/views/agent/index/index.vue | 2 +- src/views/agent/work-flow/index.vue | 2 +- 4 files changed, 46 insertions(+), 20 deletions(-) diff --git a/src/directives/getImageMainColor.ts b/src/directives/getImageMainColor.ts index 246539f..bd605ad 100644 --- a/src/directives/getImageMainColor.ts +++ b/src/directives/getImageMainColor.ts @@ -1,24 +1,49 @@ import { getImageMainColor } from '@/utils/tools'; -// 创建图片主色调指令 +const DEFAULT_COLOR = '#E6E6E8'; +const pendingRequests = new Map>(); + const imageMainColorDirective = { mounted(el: HTMLElement, binding: any) { - const imageUrl = binding.value; - - if (!imageUrl) return; - - getImageMainColor(imageUrl) - .then(color => { - el.style.backgroundColor = color; - }) - .catch(error => { - console.error('获取图片主色调失败:', error); - // 设置默认背景色 - el.style.backgroundColor = '#E6E6E8'; - }); + updateColor(el, binding.value); + }, + + updated(el: HTMLElement, binding: any) { + if (binding.value !== binding.oldValue) { + updateColor(el, binding.value); + } + }, + + beforeUnmount(el: HTMLElement) { + pendingRequests.delete(el); } }; +function updateColor(el: HTMLElement, imageUrl: string) { + if (!imageUrl) { + el.style.backgroundColor = DEFAULT_COLOR; + return; + } + + // 创建新的请求 + const request = getImageMainColor(imageUrl) + .then(color => { + if (pendingRequests.get(el) === request) { + el.style.backgroundColor = color; + pendingRequests.delete(el); + } + return color; + }) + .catch(error => { + console.error('获取图片主色调失败:', error); + el.style.backgroundColor = DEFAULT_COLOR; + pendingRequests.delete(el); + }); + + pendingRequests.set(el, request); +} + +// 获取图片主色调指令 export default { install(app: any) { app.directive('image-main-color', imageMainColorDirective); diff --git a/src/views/agent/chat/index.vue b/src/views/agent/chat/index.vue index 0b36240..723ec74 100644 --- a/src/views/agent/chat/index.vue +++ b/src/views/agent/chat/index.vue @@ -6,9 +6,10 @@
-
+
+
{{ cozeInfo?.name }}
@@ -104,10 +105,10 @@ const query = reactive({ id: id, }); -const cozeInfo = reactive({ +const cozeInfo = ref({ title: '', description: '', - icon_url: '', + image_url: '', bot_id: '', auth: {}, }); @@ -119,7 +120,7 @@ const initChat = async () => { return false; } - Object.assign(cozeInfo, data.info); + Object.assign(cozeInfo.value, data.info); await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.17/libs/cn/index.js'); let cozeConfig = await cozeWebSdkConfig(data.info.bot_id, data.info.name, data.info.auth, data.info.user_info); cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(cozeConfig); diff --git a/src/views/agent/index/index.vue b/src/views/agent/index/index.vue index ae815ea..75efe6b 100644 --- a/src/views/agent/index/index.vue +++ b/src/views/agent/index/index.vue @@ -23,7 +23,7 @@ :xxl="4" v-for="(product, k) in item.agent_products" :key="k">
-
+
diff --git a/src/views/agent/work-flow/index.vue b/src/views/agent/work-flow/index.vue index 35da77f..dccba11 100644 --- a/src/views/agent/work-flow/index.vue +++ b/src/views/agent/work-flow/index.vue @@ -6,7 +6,7 @@
-
+