From 65c96abf9d6c4528b9d8ef692e7238ff6d71b1f3 Mon Sep 17 00:00:00 2001
From: ccmjga <ccmjga@gmail.com>
Date: Sun, 1 Jun 2025 16:37:54 +0800
Subject: [PATCH] add assistant

---
 frontend/src/components/Assistant.vue | 199 +++++++++-----------------
 frontend/src/components/Button.vue    |   1 -
 frontend/src/components/Dashboard.vue |   6 +-
 frontend/src/components/Sidebar.vue   |   2 +-
 frontend/src/router/guards.ts         |  13 +-
 frontend/src/views/UserView.vue       |   2 +-
 6 files changed, 84 insertions(+), 139 deletions(-)

diff --git a/frontend/src/components/Assistant.vue b/frontend/src/components/Assistant.vue
index 7a9e7ed..e76a26d 100644
--- a/frontend/src/components/Assistant.vue
+++ b/frontend/src/components/Assistant.vue
@@ -1,139 +1,78 @@
 <template>
-  <div class="flex flex-col box-border pt-14 min-h-screen max-h-screen overflow-auto" ref="chatContainer">
-    <div class="flex flex-col gap-y-5 flex-1 pt-14">
-      <li v-for="chatElement in messages" :key="chatElement.content"
-        :class="['flex items-start gap-2.5', chatElement.isUser ? 'flex-row-reverse' : '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">
-            <span class="text-sm font-semibold text-gray-900 ">{{ chatElement.username }}</span>
-            <LoadingIcon :textColor="'text-gray-900'"
-              v-if="isLoading && !chatElement.isUser && chatElement.content === ''" />
-          </div>
-          <div>
-            <div class="markdown-content markdown-body text-base font-normal py-2.5 text-gray-900 "
-              v-html="renderMarkdown(chatElement.content)">
-            </div>
-            <button
-              v-if="chatElement.type === 'action' && (chatElement.command === 'CREATE_USER' || chatElement.command === 'CREATE_DEPARTMENT')"
-              type="button" @click="commandActionMap[chatElement.command!]"
-              class="px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-              {{
-              commandContentMap[chatElement.command!]
-              }}</button>
-            <InputButton
-              bgColor="bg-red-700 hover:bg-red-800 focus:ring-red-300 text-white focus:ring-4 focus:outline-none"
-              size="sm" :content="commandContentMap[chatElement.command!]" :handleSubmit="handleDeleteUserClick"
-              v-if="chatElement.command === 'DELETE_USER'" />
-            <InputButton
-              bgColor="bg-red-700 hover:bg-red-800 focus:ring-red-300 text-white focus:ring-4 focus:outline-none"
-              size="sm" :content="commandContentMap[chatElement.command!]" :handleSubmit="handleDeleteDepartmentClick"
-              v-if="chatElement.command === 'DELETE_DEPARTMENT'" />
-          </div>
-        </div>
-      </li>
-    </div>
+	<div
+		class="flex flex-col box-border px-3 scroll-auto overflow-auto fixed top-0 right-0 w-64 border-gray-200 border-l min-h-screen"
+		ref="chatContainer">
+		<div class="flex flex-col gap-y-5 flex-1">
+			<li v-for="chatElement in messages" :key="chatElement.content"
+				:class="['flex items-start gap-2.5', chatElement.isUser ? 'flex-row-reverse' : '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">
+						<span class="text-sm font-semibold text-gray-900 ">{{ chatElement.username }}</span>
+						<LoadingIcon :textColor="'text-gray-900'"
+							v-if="isLoading && !chatElement.isUser && chatElement.content === ''" />
+					</div>
+					<div>
+						<div class="markdown-content markdown-body text-base font-normal py-2.5 text-gray-900 "
+							v-html="renderMarkdown(chatElement.content)">
+						</div>
+						<button
+							v-if="chatElement.type === 'action' && (chatElement.command === 'CREATE_USER' || chatElement.command === 'CREATE_DEPARTMENT')"
+							type="button" @click="commandActionMap[chatElement.command!]"
+							class="px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+							{{
+							commandContentMap[chatElement.command!]
+							}}</button>
+						<InputButton
+							bgColor="bg-red-700 hover:bg-red-800 focus:ring-red-300 text-white focus:ring-4 focus:outline-none"
+							size="sm" :content="commandContentMap[chatElement.command!]" :handleSubmit="handleDeleteUserClick"
+							v-if="chatElement.command === 'DELETE_USER'" />
+						<InputButton
+							bgColor="bg-red-700 hover:bg-red-800 focus:ring-red-300 text-white focus:ring-4 focus:outline-none"
+							size="sm" :content="commandContentMap[chatElement.command!]" :handleSubmit="handleDeleteDepartmentClick"
+							v-if="chatElement.command === 'DELETE_DEPARTMENT'" />
+					</div>
+				</div>
+			</li>
+		</div>
 
-    <form class="sticky bottom-4 pt-14">
-      <button @click.prevent="toggleMode"
-        class="absolute left-1 top-2 inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium rounded-lg group focus:ring-4 focus:outline-none focus:ring-cyan-200"
-        :class="[
-          isCommandMode
-            ? 'bg-gradient-to-br from-cyan-500 to-blue-500 text-white'
-            : 'bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 text-gray-900'
-        ]">
-        <span class="relative px-3 py-2 transition-all ease-in duration-75 rounded-md hover:text-white" :class="[
-            isCommandMode
-              ? 'bg-transparent'
-              : 'bg-white  group-hover:bg-transparent'
-          ]">
-          指令模式
-        </span>
-      </button>
-      <div class="absolute right-1 top-2">
-        <button @click.prevent="() => handleSendClick('请帮我创建用户', true)" class=" inline-flex items-center justify-center p-0.5
-          mb-2 me-2 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500
-          to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4
-          focus:outline-none focus:ring-purple-200 cursor-pointer dark:focus:ring-purple-800">
-          <span
-            class="px-3 py-2 text-xs transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-transparent group-hover:dark:bg-transparent">
-            帮我创建用户?
-          </span>
-        </button>
-        <button @click.prevent="() => handleSendClick('删除用户', true)" class=" inline-flex items-center justify-center p-0.5
-          mb-2 me-2 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500
-          to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4
-          focus:outline-none focus:ring-purple-200 cursor-pointer dark:focus:ring-purple-800">
-          <span
-            class="px-3 py-2 text-xs transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-transparent group-hover:dark:bg-transparent">
-            删除用户
-          </span>
-        </button>
-        <button @click.prevent="() => handleSendClick('删除部门', true)" class=" inline-flex items-center justify-center p-0.5
-          mb-2 me-2 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500
-          to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4
-          focus:outline-none focus:ring-purple-200 cursor-pointer dark:focus:ring-purple-800">
-          <span
-            class="px-3 py-2 text-xs transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-transparent group-hover:dark:bg-transparent">
-            删除部门
-          </span>
-        </button>
-        <button @click.prevent="() => handleSendClick('请帮我创建部门', true)" class="inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 
-        cursor-pointer dark:focus:ring-purple-800">
-          <span
-            class="px-3 py-2 text-xs transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-transparent group-hover:dark:bg-transparent">
-            帮我创建部门?
-          </span>
-        </button>
-      </div>
-      <div class="w-full border border-gray-200 rounded-lg bg-gray-50">
-        <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>
-        </div>
-        <div class="flex items-center justify-between px-3 py-2 border-t  border-gray-200">
-          <Button :abortable="true" :isLoading="isLoading" :loadingContent="'中止'" :submitContent="'发送'"
-            :handleClick="() => handleSendClick(inputMessage, isCommandMode)" />
-          <div class="flex ps-0 space-x-1 rtl:space-x-reverse sm:ps-2">
-            <button type="button"
-              class="inline-flex justify-center items-center p-2 text-gray-500 rounded-sm cursor-pointer hover:text-gray-900 hover:bg-gray-100   ">
-              <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
-                viewBox="0 0 12 20">
-                <path stroke="currentColor" stroke-linejoin="round" stroke-width="2"
-                  d="M1 6v8a5 5 0 1 0 10 0V4.5a3.5 3.5 0 1 0-7 0V13a2 2 0 0 0 4 0V6" />
-              </svg>
-              <span class="sr-only">Attach file</span>
-            </button>
-            <button type="button"
-              class="inline-flex justify-center items-center p-2 text-gray-500 rounded-sm cursor-pointer hover:text-gray-900 hover:bg-gray-100   ">
-              <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
-                viewBox="0 0 20 18">
-                <path
-                  d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
-              </svg>
-              <span class="sr-only">Upload image</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-  <UserUpsertModal :id="'user-upsert-modal'" :onSubmit="handleUpsertUserSubmit" :closeModal="() => {
+		<form class="sticky">
+			<div class="w-full border border-gray-200 rounded-lg bg-gray-50">
+				<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>
+				</div>
+				<div class="flex justify-between px-2 py-2 border-t border-gray-200">
+					<form>
+						<select id="countries" v-model="isCommandMode"
+							class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg block">
+							<option selected :value="false">询问模式</option>
+							<option :value="true">指令模式</option>
+						</select>
+					</form>
+					<Button :abortable="true" :isLoading="isLoading" :loadingContent="'中止'" :submitContent="'发送'"
+						:handleClick="() => handleSendClick(inputMessage, isCommandMode)" />
+				</div>
+
+			</div>
+		</form>
+	</div>
+	<UserUpsertModal :id="'user-upsert-modal'" :onSubmit="handleUpsertUserSubmit" :closeModal="() => {
     userUpsertModal!.hide();
   }">
-  </UserUpsertModal>
-  <UserDeleteModal :id="'user-delete-modal'" :closeModal="() => {
+	</UserUpsertModal>
+	<UserDeleteModal :id="'user-delete-modal'" :closeModal="() => {
     currentDeleteUsername = undefined
     userDeleteModal!.hide();
   }" :onSubmit="handleDeleteUserSubmit" title="确定删除该用户吗" content="删除用户"></UserDeleteModal>
-  <DepartmentUpsertModal :id="'department-upsert-modal'" :onSubmit="handleUpsertDepartmentSubmit" :closeModal="() => {
+	<DepartmentUpsertModal :id="'department-upsert-modal'" :onSubmit="handleUpsertDepartmentSubmit" :closeModal="() => {
     availableDepartments = undefined
     departmentUpsertModal!.hide();
   }" :availableDepartments="availableDepartments">
-  </DepartmentUpsertModal>
-  <DepartmentDeleteModal :id="'department-delete-modal'" :closeModal="() => {
+	</DepartmentUpsertModal>
+	<DepartmentDeleteModal :id="'department-delete-modal'" :closeModal="() => {
     currentDeleteDepartmentName = undefined
     departmentDeleteModal!.hide();
   }" :onSubmit="handleDeleteDepartmentSubmit" title="确定删除该部门吗" content="删除部门"></DepartmentDeleteModal>
@@ -382,15 +321,15 @@ onMounted(async () => {
 @import "github-markdown-css/github-markdown-light.css";
 
 .markdown-body {
-  background: transparent !important;
+	background: transparent !important;
 }
 
 .markdown-body pre code {
-  white-space: pre !important;
-  tab-size: 2;
+	white-space: pre !important;
+	tab-size: 2;
 }
 
 .markdown-body p {
-  white-space: pre-wrap;
+	white-space: pre-wrap;
 }
 </style>
diff --git a/frontend/src/components/Button.vue b/frontend/src/components/Button.vue
index a3985f2..f960f77 100644
--- a/frontend/src/components/Button.vue
+++ b/frontend/src/components/Button.vue
@@ -10,7 +10,6 @@
       'px-5': true,
       'py-2.5': true,
       'text-center': true,
-      'me-2': true,
       'inline-flex': true,
       'items-center': true,
       'bg-blue-700 hover:bg-blue-800': !isLoading,
diff --git a/frontend/src/components/Dashboard.vue b/frontend/src/components/Dashboard.vue
index 0334406..fa77735 100644
--- a/frontend/src/components/Dashboard.vue
+++ b/frontend/src/components/Dashboard.vue
@@ -9,10 +9,8 @@ import Assistant from "./Assistant.vue";
   <Headbar></Headbar>
   <Sidebar>
   </Sidebar>
-  <article class="ml-64 mr-96 scroll-auto overflow-auto">
+  <article class="flex flex-row ml-44 mr-64 scroll-auto overflow-auto mt-14">
     <RouterView></RouterView>
   </article>
-  <div class="fixed top-0 right-0 w-1/5 border-gray-200 border-l">
-    <Assistant></Assistant>
-  </div>
+  <Assistant></Assistant>
 </template>
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index d6841e0..9fa3108 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
 	<aside id="logo-sidebar"
-		class="fixed top-0 left-0 z-30 w-64 min-h-screen overflow-y-auto pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0  "
+		class="fixed top-0 left-0 z-30 px-1 w-44 min-h-screen overflow-y-auto pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0  "
 		aria-label="Sidebar">
 		<div class="h-full px-3 pb-4 overflow-y-auto bg-white ">
 			<ul class="space-y-2 font-medium">
diff --git a/frontend/src/router/guards.ts b/frontend/src/router/guards.ts
index 9cc9f2e..fdb33be 100644
--- a/frontend/src/router/guards.ts
+++ b/frontend/src/router/guards.ts
@@ -2,6 +2,7 @@ import useUserStore from "@/composables/store/useUserStore";
 import type { NavigationGuard, Router } from "vue-router";
 import type { RouteMeta } from "../types/router";
 import { RoutePath } from "./constants";
+import useAlertStore from "@/composables/store/useAlertStore";
 
 export const authGuard: NavigationGuard = (to) => {
 	const userStore = useUserStore();
@@ -18,13 +19,17 @@ export const authGuard: NavigationGuard = (to) => {
 
 export const permissionGuard: NavigationGuard = (to) => {
 	const userStore = useUserStore();
+	const { showAlert } = useAlertStore();
 	const routeMeta: RouteMeta = to.meta;
 	if (routeMeta.hasPermission) {
 		const hasPermission = userStore.permissionCodes?.includes(
 			routeMeta.hasPermission,
 		);
 		if (!hasPermission) {
-			console.error(`您没有请求页面的相关权限：${to.path}`);
+			showAlert({
+				content: `没有访问页面所需的 ${routeMeta.hasPermission} 权限`,
+				level: "error",
+			});
 			return false;
 		}
 	}
@@ -32,11 +37,15 @@ export const permissionGuard: NavigationGuard = (to) => {
 
 export const roleGuard: NavigationGuard = (to) => {
 	const userStore = useUserStore();
+	const { showAlert } = useAlertStore();
 	const routeMeta: RouteMeta = to.meta;
 	if (routeMeta.hasRole) {
 		const hasRole = userStore.roleCodes?.includes(routeMeta.hasRole);
 		if (!hasRole) {
-			console.error(`您没有请求页面的相关角色：${to.path}`);
+			showAlert({
+				content: `没有访问页面所需的 ${routeMeta.hasRole} 角色`,
+				level: "error",
+			});
 			return false;
 		}
 	}
diff --git a/frontend/src/views/UserView.vue b/frontend/src/views/UserView.vue
index 1862304..6ba8cfd 100644
--- a/frontend/src/views/UserView.vue
+++ b/frontend/src/views/UserView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg mt-14">
+  <div class="px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg">
     <div class="mb-4 col-span-full">
       <Breadcrumbs :names="['用户管理']" />
       <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl ">用户管理</h1>