增加侧边栏折叠图标

src/layouts/MainLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="shell">
-    <aside class="sidebar">
+    <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
       <div class="sidebar-brand">
         <div class="brand-mark">
           <img src="@/assets/logo.jpg" alt="logo" class="brand-img" />
@@ -38,7 +38,15 @@
 
     <div class="main">
       <header class="topbar">
+        <div class="topbar-left">
+          <button class="collapse-btn" type="button" :title="sidebarCollapsed ? '展开侧边栏' : '收起侧边栏'"
+            @click="toggleSidebar">
+            <el-icon :size="18">
+              <component :is="sidebarCollapsed ? Expand : Fold" />
+            </el-icon>
+          </button>
           <span class="page-title">{{ route.meta?.title || '工单管理' }}</span>
+        </div>
         <el-dropdown trigger="click">
           <div class="user-chip">
             <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
@@ -64,8 +72,9 @@
 </template>
 
 <script setup>
-import { reactive, onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import { Fold, Expand } from "@element-plus/icons-vue";
 import { resetRouter } from "@/router";
 import { userApi } from "@/api/ticket";
 
@@ -73,6 +82,12 @@ const router = useRouter();
 const route = useRoute();
 const user = reactive({ name: "..." });
 
+// 侧边栏折叠状态
+const sidebarCollapsed = ref(false);
+const toggleSidebar = () => {
+  sidebarCollapsed.value = !sidebarCollapsed.value;
+};
+
 onMounted(() => {
   const saved = localStorage.getItem("user_info") || sessionStorage.getItem("user_info");
   if (saved) user.name = JSON.parse(saved).username || "用户";
@@ -107,6 +122,27 @@ const handleLogout = async () => {
   flex-direction: column;
   user-select: none;
   position: relative;
+  overflow: hidden;
+  transition: width 0.25s ease;
+}
+
+.sidebar.collapsed {
+  width: 0;
+  border-right: none;
+}
+
+.sidebar.collapsed .sidebar-brand,
+.sidebar.collapsed .nav,
+.sidebar.collapsed .sidebar-foot {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sidebar-brand,
+.nav,
+.sidebar-foot {
+  transition: opacity 0.15s ease;
+  white-space: nowrap;
 }
 
 .sidebar::after {
@@ -265,6 +301,36 @@ const handleLogout = async () => {
   z-index: 5;
 }
 
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+/* 侧边栏折叠按钮 */
+.collapse-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: none;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, transform 0.15s;
+}
+
+.collapse-btn:hover {
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+
+.collapse-btn:active {
+  transform: scale(0.92);
+}
+
 .page-title {
   font-size: 16px;
   font-weight: 600;