fix page css

2026-03-18 16:13:44 +08:00 · 2025-06-04 10:23:19 +08:00
parent ad5b20d3c5
commit 34e0d3d8e7
16 changed files with 88 additions and 30 deletions
--- a/frontend/src/components/Assistant.vue
+++ b/frontend/src/components/Assistant.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="h-[calc(100vh-3.5rem)] flex flex-col box-border p-3 overflow-y-auto md:w-80 w-full overflow-x-hidden border-gray-200 border-l"
+		class="h-[calc(100vh-3.5rem)] flex flex-col box-border p-3 overflow-y-auto w-full lg:w-80 xl:w-96 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"
@@ -26,11 +26,11 @@
 							}}</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"
+							: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"
+							:content="commandContentMap[chatElement.command!]" :handleSubmit="handleDeleteDepartmentClick"
 							v-if="chatElement.command === 'DELETE_DEPARTMENT'" />
 					</div>
 				</div>
@@ -82,8 +82,15 @@
 </template>

 <script setup lang="ts">
+import InputButton from "@/components/InputButton.vue";
+import UserDeleteModal from "@/components/PopupModal.vue";
+import DepartmentDeleteModal from "@/components/PopupModal.vue";
 import LoadingIcon from "@/components/icons/LoadingIcon.vue";
+import { useAiAction } from "@/composables/ai/useAiAction";
+import { useDepartmentQuery } from "@/composables/department/useDepartmentQuery";
+import { useDepartmentUpsert } from "@/composables/department/useDepartmentUpsert";
 import useAlertStore from "@/composables/store/useAlertStore";
+import type { DepartmentUpsertModel } from "@/types/department";
 import DOMPurify from "dompurify";
 import { Modal, type ModalInterface, initFlowbite } from "flowbite";
 import { marked } from "marked";
@@ -96,13 +103,6 @@ import { useAiChat } from "../composables/ai/useAiChat";
 import useUserStore from "../composables/store/useUserStore";
 import { useUserUpsert } from "../composables/user/useUserUpsert";
 import type { UserUpsertSubmitModel } from "../types/user";
-import { useDepartmentQuery } from "@/composables/department/useDepartmentQuery";
-import { useDepartmentUpsert } from "@/composables/department/useDepartmentUpsert";
-import type { DepartmentUpsertModel } from "@/types/department";
-import UserDeleteModal from "@/components/PopupModal.vue";
-import { useAiAction } from "@/composables/ai/useAiAction";
-import DepartmentDeleteModal from "@/components/PopupModal.vue";
-import InputButton from "@/components/InputButton.vue";

 const { messages, chat, isLoading, cancel, searchAction, executeAction } = useAiChat();
 const { user } = useUserStore();
--- a/frontend/src/components/Headbar.vue
+++ b/frontend/src/components/Headbar.vue
@@ -15,6 +15,7 @@
            </svg>
          </button>
          <a href="https://github.com/ccmjga/zhilu-admin" target="_blank" class="flex items-center ms-2 md:me-24">
+            <img class="me-3" src="/logo.svg" alt="logo">
            <span class="self-center text-lg sm:text-xl md:text-2xl font-semibold whitespace-nowrap">知路后台管理</span>
          </a>
        </div>
@@ -33,16 +34,16 @@
          </a>
          <span class="flex space-x-2 sm:space-x-3">
            <button class="cursor-pointer p-1" @click="changeAssistantVisible">
-              <AiChatIcon class="w-7 h-7 text-gray-600 sm:w-5 sm:h-5" />
+              <AiChatIcon />
            </button>
          </span>

          <div class="flex items-center ms-2 sm:ms-3">
            <div>
              <button type="button" id="dropdown-button"
-                class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 " aria-expanded="false"
-                data-dropdown-toggle="dropdown-user">
-                <span class="sr-only">Open user menu</span>
+                class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 cursor-pointer"
+                aria-expanded="false" data-dropdown-toggle="dropdown-user">
+                <span class="sr-only">打开用户菜单</span>
                <img class="w-8 h-8 rounded-full" src="/java.svg" alt="user photo">
              </button>
            </div>
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -9,7 +9,7 @@
 						class="flex items-center p-2 gap-x-2 text-gray-900 rounded-lg  hover:bg-gray-100  group"
 						:class="{ 'bg-gray-100 ': isActive(item.path) }">
 						<component :is="item.icon"
-							class="shrink-0 text-gray-700 transition duration-75  group-hover:text-gray-900 " />
+							class="shrink-0 text-gray-500 transition duration-75  group-hover:text-gray-900 " />
 						<span>{{ item.title }}</span>
 					</RouterLink>
 				</li>
--- a/frontend/src/components/UserUpsertModal.vue
+++ b/frontend/src/components/UserUpsertModal.vue
@@ -1,6 +1,6 @@
 <template>
 	<!-- Main modal -->
-	<div id="user-upsert-modal" tabindex="-1" aria-hidden="true"
+	<div tabindex="-1" aria-hidden="true"
 		class="bg-gray-900/50 hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
 		<div class="relative p-4 w-full max-w-xs sm:max-w-sm md:max-w-md max-h-full">
 			<!-- Modal content -->
--- a/frontend/src/components/icons/AiChatIcon.vue
+++ b/frontend/src/components/icons/AiChatIcon.vue
@@ -1,6 +1,6 @@
 <template>
-  <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">
+  <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" />
@@ -10,6 +10,12 @@
  </svg>
 </template>

+<script setup lang="ts">
+const { size = 'w-6 h-6' } = defineProps<{
+  size?: string;
+}>();
+</script>
+
 <style scoped>
 .ai-breath {
  animation: ai-breath 1.8s infinite ease-in-out;
--- a/frontend/src/components/icons/DepartmentIcon.vue
+++ b/frontend/src/components/icons/DepartmentIcon.vue
@@ -1,6 +1,5 @@
 <template>
-  <svg class="text-gray-800 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
-    viewBox="0 0 24 24">
+  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
      d="M3 15v3c0 .5523.44772 1 1 1h4v-4m-5 0v-4m0 4h5m-5-4V6c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v1.98935M3 11h5v4m9.4708 4.1718-.8696-1.4388-2.8164-.235-2.573-4.2573 1.4873-2.8362 1.4441 2.3893c.3865.6396 1.2183.8447 1.8579.4582.6396-.3866.8447-1.2184.4582-1.858l-1.444-2.38925h3.1353l2.6101 4.27715-1.0713 2.5847.8695 1.4388" />
  </svg>
--- a/frontend/src/components/icons/PositionIcon.vue
+++ b/frontend/src/components/icons/PositionIcon.vue
@@ -1,6 +1,5 @@
 <template>
-  <svg class="w-6 h-6 text-gray-800 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-    fill="none" viewBox="0 0 24 24">
+  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
      d="M14.6144 7.19994c.3479.48981.5999 1.15357.5999 1.80006 0 1.6569-1.3432 3-3 3-1.6569 0-3.00004-1.3431-3.00004-3 0-.67539.22319-1.29865.59983-1.80006M6.21426 6v4m0-4 6.00004-3 6 3-6 2-2.40021-.80006M6.21426 6l3.59983 1.19994M6.21426 19.8013v-2.1525c0-1.6825 1.27251-3.3075 2.95093-3.6488l3.04911 2.9345 3-2.9441c1.7026.3193 3 1.9596 3 3.6584v2.1525c0 .6312-.5373 1.1429-1.2 1.1429H7.41426c-.66274 0-1.2-.5117-1.2-1.1429Z" />
  </svg>
--- a/frontend/src/components/icons/SchedulerIcon.vue
+++ b/frontend/src/components/icons/SchedulerIcon.vue
@@ -1,6 +1,5 @@
 <template>
-  <svg class="w-6 h-6 text-gray-800 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-    fill="none" viewBox="0 0 24 24">
+  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
      d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
  </svg>