xieyinlu/zhilu-admin
1
0
Fork 0
mirror of https://github.com/ccmjga/zhilu-admin synced 2026-03-13 21:27:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix ai button

Browse Source
This commit is contained in:
Chuck1sn
2025-06-11 10:40:24 +08:00
parent a30d63ebdd
commit 79d4ced364
2 changed files with 110 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/Headbar.vue
View File

@@ -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"

118
frontend/src/components/icons/AiChatIcon.vue
View File

@@ -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>