From 79d4ced36403b50192b84cc420a8b219e3f0ebe9 Mon Sep 17 00:00:00 2001
From: Chuck1sn <chuck1inzl@gmail.com>
Date: Wed, 11 Jun 2025 10:40:24 +0800
Subject: [PATCH] fix ai button

---
 frontend/src/components/Headbar.vue          |   9 +-
 frontend/src/components/icons/AiChatIcon.vue | 118 +++++++++++++++++--
 2 files changed, 110 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Headbar.vue b/frontend/src/components/Headbar.vue
index eab4135..076c2ef 100644
--- a/frontend/src/components/Headbar.vue
+++ b/frontend/src/components/Headbar.vue
@@ -31,12 +31,9 @@
             </span>
             <span class="text-sm py-0.5 px-2 font-medium">0.2k</span>
           </a>
-          <span class="flex space-x-2 sm:space-x-3">
-            <button class="cursor-pointer p-1" @click="changeAssistantVisible">
-              <AiChatIcon />
-            </button>
-          </span>
-
+          <button class="cursor-pointer pt-1" @click="changeAssistantVisible">
+            <AiChatIcon />
+          </button>
           <div class="flex items-center ms-2 sm:ms-3">
             <div>
               <button type="button" id="dropdown-button"
diff --git a/frontend/src/components/icons/AiChatIcon.vue b/frontend/src/components/icons/AiChatIcon.vue
index def9b83..d17e573 100644
--- a/frontend/src/components/icons/AiChatIcon.vue
+++ b/frontend/src/components/icons/AiChatIcon.vue
@@ -1,25 +1,44 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-    stroke-linecap="round" stroke-linejoin="round" :class="['lucide lucide-bot-icon lucide-bot ai-breath', size]">
-    <path d="M12 8V4H8" />
-    <rect width="16" height="12" x="4" y="8" rx="2" />
-    <path d="M2 14h2" />
-    <path d="M20 14h2" />
-    <path d="M15 13v2" />
-    <path d="M9 13v2" />
-  </svg>
+  <div class="ai-icon-container relative" :class="containerClass">
+    <!-- 主图标 -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+      stroke-linecap="round" stroke-linejoin="round" :class="['lucide lucide-bot-icon z-10 relative ai-breath', size]">
+      <path d="M12 8V4H8" class="bot-antenna" />
+      <rect width="16" height="12" x="4" y="8" rx="2" class="bot-body" />
+      <path d="M2 14h2" class="bot-ear" />
+      <path d="M20 14h2" class="bot-ear" />
+      <path d="M15 13v2" class="bot-eye" />
+      <path d="M9 13v2" class="bot-eye" />
+    </svg>
+  </div>
 </template>
 
 <script setup lang="ts">
-const { size = "w-6 h-6" } = defineProps<{
+const props = defineProps<{
 	size?: string;
+	containerClass?: string;
 }>();
+
+const { size = "w-6 h-6" } = props;
 </script>
 
 <style scoped>
+.ai-icon-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.3s ease;
+}
+
+.ai-icon-container:hover {
+  transform: scale(1.1);
+}
+
+/* 机器人图标呼吸效果 */
 .ai-breath {
   animation: ai-breath 1.8s infinite ease-in-out;
   filter: drop-shadow(0 0 6px #60a5fa);
+  transition: all 0.3s ease;
 }
 
 @keyframes ai-breath {
@@ -31,8 +50,85 @@ const { size = "w-6 h-6" } = defineProps<{
   }
 
   50% {
-    filter: drop-shadow(0 0 16px #2563eb) brightness(1.3);
+    filter: drop-shadow(0 0 12px #2563eb) brightness(1.4);
     stroke: #2563eb;
   }
 }
+
+/* 机器人各部分动画 */
+.bot-antenna {
+  animation: antenna-move 3s infinite ease-in-out;
+  transform-origin: bottom;
+}
+
+.bot-body {
+  animation: body-pulse 3s infinite ease-in-out;
+}
+
+.bot-ear {
+  animation: ear-wiggle 3s infinite ease-in-out;
+  transform-origin: 50% 50%;
+}
+
+.bot-eye {
+  animation: eye-blink 3.5s infinite;
+  transform-origin: 50% 50%;
+}
+
+@keyframes antenna-move {
+
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+
+  30% {
+    transform: rotate(-5deg);
+  }
+
+  60% {
+    transform: rotate(5deg);
+  }
+}
+
+@keyframes body-pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.03);
+  }
+}
+
+@keyframes ear-wiggle {
+
+  0%,
+  100% {
+    transform: scaleX(1);
+  }
+
+  30% {
+    transform: scaleX(1.2);
+  }
+
+  60% {
+    transform: scaleX(0.8);
+  }
+}
+
+@keyframes eye-blink {
+
+  0%,
+  96%,
+  100% {
+    transform: scaleY(1);
+  }
+
+  98% {
+    transform: scaleY(0.1);
+  }
+}
 </style>