优化页面显示效果

2026-03-14 05:33:42 +08:00 · 2025-06-04 11:49:47 +08:00
parent 07e590dc2d
commit 54201aa0f0
4 changed files with 104 additions and 40 deletions
--- a/frontend/src/components/Assistant.vue
+++ b/frontend/src/components/Assistant.vue
@@ -24,11 +24,11 @@
 							{{
 							commandContentMap[chatElement.command!]
 							}}</button>
-						<InputButton
+						<InputButton size="md"
 							bgColor="bg-red-700 hover:bg-red-800 focus:ring-red-300 text-white focus:ring-4 focus:outline-none"
 							:content="commandContentMap[chatElement.command!]" :handleSubmit="handleDeleteUserClick"
 							v-if="chatElement.command === 'DELETE_USER'" />
-						<InputButton
+						<InputButton size="md"
 							bgColor="bg-red-700 hover:bg-red-800 focus:ring-red-300 text-white focus:ring-4 focus:outline-none"
 							:content="commandContentMap[chatElement.command!]" :handleSubmit="handleDeleteDepartmentClick"
 							v-if="chatElement.command === 'DELETE_DEPARTMENT'" />
--- a/frontend/src/components/Dashboard.vue
+++ b/frontend/src/components/Dashboard.vue
@@ -1,7 +1,6 @@
 <template>
-  <Headbar :changeAssistantVisible="changeAssistantVisible"></Headbar>
-  <Sidebar>
-  </Sidebar>
+  <Headbar :changeAssistantVisible="changeAssistantVisible" :onSidebarToggle="toggleSidebar"></Headbar>
+  <Sidebar ref="sidebarRef" @menu-click="handleMenuClick"></Sidebar>
  <div class="flex flex-row h-[calc(100vh-3.5rem)] mt-14">
    <article class="flex-1 sm:ml-44 overflow-y-auto">
      <RouterView></RouterView>
@@ -12,15 +11,28 @@
 </template>

 <script setup lang="ts">
+import { ref } from "vue";
 import { RouterView } from "vue-router";
+import Assistant from "./Assistant.vue";
 import Headbar from "./Headbar.vue";
 import Sidebar from "./Sidebar.vue";
-import Assistant from "./Assistant.vue";
-import { ref } from "vue";

 const isAssistantVisible = ref(false);
+const sidebarRef = ref();

 const changeAssistantVisible = () => {
 	isAssistantVisible.value = !isAssistantVisible.value;
 };
+
+const toggleSidebar = () => {
+	if (sidebarRef.value) {
+		sidebarRef.value.toggleSidebar();
+	}
+};
+
+const handleMenuClick = () => {
+	if (sidebarRef.value) {
+		sidebarRef.value.closeSidebar();
+	}
+};
 </script>
--- a/frontend/src/components/Headbar.vue
+++ b/frontend/src/components/Headbar.vue
@@ -1,10 +1,9 @@
 <template>
-  <nav class="fixed top-0 z-1 w-full bg-white border-b border-gray-200">
+  <nav class="fixed top-0 w-full bg-white border-b border-gray-200 z-50">
    <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">
-          <button id="sidebar-toggle-btn" data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar"
-            aria-controls="logo-sidebar" type="button"
+          <button type="button" @click="handleSidebarToggle"
            class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200">
            <span class="sr-only">Open sidebar</span>
            <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
@@ -101,28 +100,34 @@ 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;
+const props = defineProps<{
+  changeAssistantVisible: () => void;
+  onSidebarToggle: () => void;
 }>();

-onMounted(() => {
-	initFlowbite();
-	const $dropdownUser = document.getElementById("dropdown-user");
-	const $dropdownButton = document.getElementById("dropdown-button");
-	userDropDownMenu.value = new Dropdown(
-		$dropdownUser,
-		$dropdownButton,
-		{},
-		{ id: "dropdownMenu", override: true },
-	);
-});
+const handleSidebarToggle = () => {
+  props.onSidebarToggle();
+};
+
+const userDropDownMenu = ref<DropdownInterface>();
+
 const { user } = useUserStore();
 const { signOut } = useUserAuth();
 const router = useRouter();
 const handleLogoutClick = () => {
-	signOut();
-	router.push(RoutePath.LOGIN);
+  signOut();
+  router.push(RoutePath.LOGIN);
 };
+
+onMounted(() => {
+  initFlowbite();
+  const $dropdownUser = document.getElementById("dropdown-user");
+  const $dropdownButton = document.getElementById("dropdown-button");
+  userDropDownMenu.value = new Dropdown(
+    $dropdownUser,
+    $dropdownButton,
+    {},
+    { id: "dropdownMenu", override: true },
+  );
+});
 </script>
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -1,24 +1,29 @@
 <template>
 	<aside id="logo-sidebar"
-		class="fixed top-0 left-0 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" tabindex="-1">
-		<div class="h-full px-3 pb-4 overflow-y-auto bg-white ">
+		class="fixed top-0 left-0 px-1 w-44 min-h-screen overflow-y-auto pt-20 transform transition-transform duration-300 ease-in-out bg-white border-r border-gray-200"
+		:class="[
+			isDrawerVisible ? 'translate-x-0' : '-translate-x-full sm:translate-x-0',
+			isDrawerVisible ? 'z-40' : ''
+		]" aria-label="Sidebar">
+		<div class="h-full px-3 pb-4 overflow-y-auto bg-white">
 			<ul class="space-y-2 font-medium">
 				<li v-for="item in menuItems" :key="item.path">
 					<RouterLink :to="item.path"
-						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) }">
+						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) }" @click="handleMenuClick">
 						<component :is="item.icon"
-							class="shrink-0 text-gray-500 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>
 			</ul>
 		</div>
 	</aside>
-	<!-- 添加遮罩层 -->
-	<div id="drawer-backdrop" :class="isDrawerVisible ? 'block' : 'hidden'"
-		class="bg-gray-900 bg-opacity-50 fixed inset-0 z-50 sm:hidden" @click="closeSidebar">
+
+	<!-- 遮罩层 -->
+	<div class="fixed inset-0 bg-gray-900/50 transition-all duration-300 sm:hidden z-30" :class="[
+			isDrawerVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'
+		]" @click="closeSidebar">
 	</div>
 </template>

@@ -38,6 +43,31 @@ import SettingsIcon from "./icons/SettingsIcon.vue";
 import UsersIcon from "./icons/UsersIcon.vue";

 const isDrawerVisible = ref(false);
+const emit = defineEmits(['menu-click']);
+
+// 菜单点击处理
+const handleMenuClick = () => {
+	emit('menu-click');
+};
+
+const toggleSidebar = () => {
+	isDrawerVisible.value = !isDrawerVisible.value;
+};
+
+const openSidebar = () => {
+	isDrawerVisible.value = true;
+};
+
+const closeSidebar = () => {
+	isDrawerVisible.value = false;
+};
+
+defineExpose({
+	toggleSidebar,
+	openSidebar,
+	closeSidebar,
+	isDrawerVisible
+});

 // 菜单配置
 const menuItems = [
@@ -89,11 +119,28 @@ const isActive = (path: string) => {
 	return route.path === path;
 };

-const closeSidebar = () => {
-	isDrawerVisible.value = false;
-};
-
 onMounted(() => {
 	initFlowbite();
 });
 </script>
+
+<style scoped>
+.invisible {
+	visibility: hidden;
+}
+
+.visible {
+	visibility: visible;
+}
+
+/* 添加移动端样式 */
+@media (max-width: 640px) {
+	.translate-x-0 {
+		transform: translateX(0);
+	}
+
+	.-translate-x-full {
+		transform: translateX(-100%);
+	}
+}
+</style>