perf: 修改获取图片主色调指令逻辑

src/directives/getImageMainColor.ts

@@ -1,24 +1,49 @@
 import { getImageMainColor } from '@/utils/tools';
 
-// 创建图片主色调指令
+const DEFAULT_COLOR = '#E6E6E8';
+const pendingRequests = new Map<HTMLElement, Promise<string | void>>();
+
 const imageMainColorDirective = {
   mounted(el: HTMLElement, binding: any) {
-    const imageUrl = binding.value;
+    updateColor(el, binding.value);
+  },
 
-    if (!imageUrl) return;
+  updated(el: HTMLElement, binding: any) {
+    if (binding.value !== binding.oldValue) {
+      updateColor(el, binding.value);
+    }
+  },
 
-    getImageMainColor(imageUrl)
-      .then(color => {
-        el.style.backgroundColor = color;
-      })
-      .catch(error => {
-        console.error('获取图片主色调失败:', error);
-        // 设置默认背景色
-        el.style.backgroundColor = '#E6E6E8';
-      });
+  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);

src/views/agent/chat/index.vue

@@ -6,9 +6,10 @@
     </div>
     <div class="workflow-container">
       <div class="left-wap mr-24px" v-if="isCollapsed == false">
-        <div class="w-full w-100% mb-15px h-160px rounded-8px bg-#E6E6E8" v-image-main-color="cozeInfo.image_url">
+        <div class="w-full w-100% mb-15px h-160px rounded-8px" v-image-main-color="cozeInfo.image_url">
           <img v-if="cozeInfo?.image_url" :src="cozeInfo?.image_url" class="w-full h-full object-contain" />
         </div>
+
         <div class="content mb-15px">
           <div class="title-body">
             <div class="text mr-4px">{{ cozeInfo?.name }}</div>
@@ -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);

src/views/agent/index/index.vue

@@ -23,7 +23,7 @@
                 :xxl="4"
                 v-for="(product, k) in item.agent_products" :key="k">
           <div class="card-container cursor-pointer !h-252px" @click="goDetail(product?.type, product?.id)">
-            <div class="card-image h-120px w-100%  bg-cover bg-center bg-#E6E6E8 mb-8px" v-image-main-color="product.image_url">
+            <div class="card-image h-120px w-100%  bg-cover bg-center mb-8px" v-image-main-color="product.image_url">
               <img class="object-contain h-full w-100% " :src="product?.image_url"/>
             </div>
 

src/views/agent/work-flow/index.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="workflow-container flex-1">
       <div class="left-wap mr-24px" v-if="isCollapsed == false">
-        <div class="w-full w-100% mb-15px h-160px rounded-8px bg-#E6E6E8" v-image-main-color="cozeInfo.image_url">
+        <div class="w-full w-100% mb-15px h-160px rounded-8px" v-image-main-color="cozeInfo.image_url">
           <img v-if="cozeInfo?.image_url" :src="cozeInfo?.image_url" class="w-full h-full object-contain" />
         </div>
         <div class="content mb-15px">