From 709ed8218b267fad0829c2ae975429c40a8b350c Mon Sep 17 00:00:00 2001
From: ccmjga <ccmjga@gmail.com>
Date: Sun, 1 Jun 2025 17:52:12 +0800
Subject: [PATCH] fix side flow

---
 frontend/src/components/Assistant.vue        | 10 +++---
 frontend/src/components/Dashboard.vue        | 35 +++++++++++---------
 frontend/src/components/Headbar.vue          | 24 ++++++--------
 frontend/src/components/Sidebar.vue          |  5 ---
 frontend/src/components/icons/AiChatIcon.vue | 31 ++++++++++++++++-
 frontend/src/views/OverView.vue              |  2 +-
 6 files changed, 67 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/Assistant.vue b/frontend/src/components/Assistant.vue
index 7b203a3..d86c017 100644
--- a/frontend/src/components/Assistant.vue
+++ b/frontend/src/components/Assistant.vue
@@ -1,13 +1,14 @@
 <template>
-	<div class="h-[calc(100vh-3.5rem)] flex flex-col box-border p-3 overflow-y-auto w-72 border-gray-200 border-l"
+	<div
+		class="h-[calc(100vh-3.5rem)] flex flex-col box-border p-3 overflow-y-auto w-80 overflow-x-hidden border-gray-200 border-l"
 		ref="chatContainer">
 		<div class="flex flex-col gap-y-5 flex-1 pb-2">
 			<li v-for="chatElement in messages" :key="chatElement.content"
-				:class="['flex items-start gap-2.5', chatElement.isUser ? 'flex-row-reverse' : 'flex-row']">
+				:class="['flex items-start gap-2.5', chatElement.isUser ? 'flex-row-reverse max-w-full break-words' : 'flex-row']">
 				<img class="w-8 h-8 rounded-full" :src="chatElement.isUser ? '/java.svg' : '/trump.jpg'" alt="avatar">
 				<div
 					:class="['flex flex-col leading-1.5 p-4 border-gray-200 rounded-e-xl rounded-es-xl ', chatElement.isUser ? 'bg-blue-100' : 'bg-gray-100']">
-					<div class="flex items-center space-x-2 rtl:space-x-reverse">
+					<div class="flex items-center space-x-2">
 						<span class="text-sm font-semibold text-gray-900 ">{{ chatElement.username }}</span>
 						<LoadingIcon :textColor="'text-gray-900'"
 							v-if="isLoading && !chatElement.isUser && chatElement.content === ''" />
@@ -41,7 +42,8 @@
 				<div class="px-4 py-2 bg-white rounded-t-lg">
 					<label for="comment" class="sr-only"></label>
 					<textarea id="comment" rows="3" v-model="inputMessage"
-						class="w-full px-0 text-gray-900 bg-white border-0  focus:ring-0  " placeholder="发送消息" required></textarea>
+						class="w-full px-0 text-gray-900 bg-white border-0  focus:ring-0"
+						:placeholder="isCommandMode ? '输入创建用户/删除用户试试看' : '随便聊聊'" required></textarea>
 				</div>
 				<div class="flex justify-between px-2 py-2 border-t border-gray-200">
 					<form>
diff --git a/frontend/src/components/Dashboard.vue b/frontend/src/components/Dashboard.vue
index f92ab91..fa72257 100644
--- a/frontend/src/components/Dashboard.vue
+++ b/frontend/src/components/Dashboard.vue
@@ -1,21 +1,26 @@
+<template>
+  <Headbar :changeAssistantVisible="changeAssistantVisible"></Headbar>
+  <Sidebar>
+  </Sidebar>
+  <div class="flex flex-row h-[calc(100vh-3.5rem)] mt-14">
+    <article class="flex-1 ml-44 overflow-y-auto">
+      <RouterView></RouterView>
+    </article>
+    <Assistant v-if="isAssistantVisible"></Assistant>
+  </div>
+
+</template>
+
 <script setup lang="ts">
 import { RouterView } from "vue-router";
 import Headbar from "./Headbar.vue";
 import Sidebar from "./Sidebar.vue";
 import Assistant from "./Assistant.vue";
+import { ref } from "vue";
+
+const isAssistantVisible = ref(false);
+
+const changeAssistantVisible = () => {
+	isAssistantVisible.value = !isAssistantVisible.value;
+};
 </script>
-
-<template>
-  <Headbar></Headbar>
-  <Sidebar>
-  </Sidebar>
-  <!-- 主内容区域 -->
-  <div class="flex flex-row h-[calc(100vh-3.5rem)] mt-14"> <!-- 减去Headbar高度 -->
-    <!-- 文章内容区域 -->
-    <article class="flex-1 ml-44 overflow-y-auto">
-      <RouterView></RouterView>
-    </article>
-    <Assistant></Assistant>
-  </div>
-
-</template>
diff --git a/frontend/src/components/Headbar.vue b/frontend/src/components/Headbar.vue
index 74e3897..d1ef0f3 100644
--- a/frontend/src/components/Headbar.vue
+++ b/frontend/src/components/Headbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav class="fixed top-0 z-40 w-full bg-white border-b border-gray-200  ">
+  <nav class="fixed top-0 z-40 w-full bg-white border-b border-gray-200">
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
       <div class="flex items-center justify-between">
         <div class="flex items-center justify-start rtl:justify-end">
@@ -31,19 +31,10 @@
             </span>
             <span class="text-sm py-0.5 px-2 font-medium">0.1k</span>
           </a>
-          <span class="flex space-x-2">
-            <svg class="w-6 h-6 text-gray-500" fill="currentColor" viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z">
-              </path>
-            </svg>
-            <svg class="w-6 h-6 text-gray-500" fill="currentColor" viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z">
-              </path>
-            </svg>
+          <span class="flex space-x-3">
+            <button class="cursor-pointer" @click="changeAssistantVisible">
+              <AiChatIcon class="w-6 h-6 text-gray-600" />
+            </button>
           </span>
 
           <div class="flex items-center ms-3">
@@ -107,9 +98,14 @@ import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import useUserAuth from "../composables/auth/useUserAuth";
 import { RouteName, RoutePath } from "../router/constants";
+import AiChatIcon from "./icons/AiChatIcon.vue";
 
 const userDropDownMenu = ref<DropdownInterface>();
 
+const { changeAssistantVisible } = defineProps<{
+	changeAssistantVisible: () => void;
+}>();
+
 onMounted(() => {
 	initFlowbite();
 	const $dropdownUser = document.getElementById("dropdown-user");
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 9fa3108..0dab800 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -71,11 +71,6 @@ const menuItems = [
 		path: `${RoutePath.DASHBOARD}/${RoutePath.SCHEDULERVIEW}`,
 		icon: SchedulerIcon,
 	},
-	{
-		title: "AI 对话",
-		path: `${RoutePath.DASHBOARD}/${RoutePath.AICHATVIEW}`,
-		icon: AiChatIcon,
-	},
 	{
 		title: "大模型管理",
 		path: `${RoutePath.DASHBOARD}/${RoutePath.LLMCONFIGVIEW}`,
diff --git a/frontend/src/components/icons/AiChatIcon.vue b/frontend/src/components/icons/AiChatIcon.vue
index c3dacef..8891408 100644
--- a/frontend/src/components/icons/AiChatIcon.vue
+++ b/frontend/src/components/icons/AiChatIcon.vue
@@ -1,3 +1,32 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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"><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>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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">
+    <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>
 </template>
+
+<style scoped>
+.ai-breath {
+  animation: ai-breath 1.8s infinite ease-in-out;
+  filter: drop-shadow(0 0 6px #60a5fa);
+}
+
+@keyframes ai-breath {
+
+  0%,
+  100% {
+    filter: drop-shadow(0 0 6px #60a5fa) brightness(1);
+    stroke: #60a5fa;
+  }
+
+  50% {
+    filter: drop-shadow(0 0 16px #2563eb) brightness(1.3);
+    stroke: #2563eb;
+  }
+}
+</style>
diff --git a/frontend/src/views/OverView.vue b/frontend/src/views/OverView.vue
index 3d4512b..c8d08cd 100644
--- a/frontend/src/views/OverView.vue
+++ b/frontend/src/views/OverView.vue
@@ -200,7 +200,7 @@
                 d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm0 16a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm1-5.034V12a1 1 0 0 1-2 0v-1.418a1 1 0 0 1 1.038-.999 1.436 1.436 0 0 0 1.488-1.441 1.501 1.501 0 1 0-3-.116.986.986 0 0 1-1.037.961 1 1 0 0 1-.96-1.037A3.5 3.5 0 1 1 11 11.466Z" />
             </svg>
             <div data-popover id="chart-info" role="tooltip"
-              class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-72   ">
+              class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-72 ">
               <div class="p-3 space-y-2">
                 <h3 class="font-semibold text-gray-900 ">Activity growth - Incremental</h3>
                 <p>Report helps navigate cumulative growth of community activities. Ideally, the chart should have a