style(layout): 优化布局组件的模板代码格式

统一布局组件的模板缩进与换行规范，提升代码可读性，未修改业务逻辑。

WonderQ-Admin-UI-Vue/src/components/layout/Sidebar.vue

@@ -61,36 +61,24 @@ function closeSidebar() {
 </script>
 
 <template>
-  <div
+  <div v-if="isVisible" :class="[
-    v-if="isVisible"
+    'sidebar-shell',
-    :class="[
+    `sidebar-shell--${props.navigationType}`,
-      'sidebar-shell',
+    { 'sidebar-shell--mobile': isMobile, 'sidebar-shell--collapsed': collapsedMenu },
-      `sidebar-shell--${props.navigationType}`,
+  ]">
-      { 'sidebar-shell--mobile': isMobile, 'sidebar-shell--collapsed': collapsedMenu },
+    <button v-if="isMobile && layout.sidebarOpened" type="button" class="sidebar-overlay" aria-label="关闭侧边栏"
-    ]"
+      @click="closeSidebar" />
-  >
-    <button
-      v-if="isMobile && layout.sidebarOpened"
-      type="button"
-      class="sidebar-overlay"
-      aria-label="关闭侧边栏"
-      @click="closeSidebar"
-    />
 
-    <aside
+    <aside :class="[
-      :class="[
+      'sidebar-drawer',
-        'sidebar-drawer',
+      isDark ? 'sidebar-drawer--dark' : 'sidebar-drawer--light',
-        isDark ? 'sidebar-drawer--dark' : 'sidebar-drawer--light',
+      {
-        {
+        'sidebar-drawer--mobile': isMobile,
-          'sidebar-drawer--mobile': isMobile,
+        'sidebar-drawer--open': isMobile && layout.sidebarOpened,
-          'sidebar-drawer--open': isMobile && layout.sidebarOpened,
+        'sidebar-drawer--collapsed': collapsedMenu,
-          'sidebar-drawer--collapsed': collapsedMenu,
+      },
-        },
+    ]" :style="sidebarStyle" :inert="isMobile && !layout.sidebarOpened"
-      ]"
+      :aria-hidden="isMobile && !layout.sidebarOpened ? 'true' : undefined">
-      :style="sidebarStyle"
-      :inert="isMobile && !layout.sidebarOpened"
-      :aria-hidden="isMobile && !layout.sidebarOpened ? 'true' : undefined"
-    >
       <div v-if="showLogo" class="sidebar-logo" :class="{ 'sidebar-logo--collapsed': collapsedMenu }">
         <div class="sidebar-logo__mark" aria-hidden="true">WQ</div>
         <div v-if="!collapsedMenu" class="sidebar-logo__copy">
@@ -100,27 +88,12 @@ function closeSidebar() {
       </div>
 
       <el-scrollbar class="sidebar-scrollbar">
-        <el-menu
+        <el-menu :default-active="activePath" :collapse="collapsedMenu" :collapse-transition="false"
-          :default-active="activePath"
+          :collapse-tooltip="true" :unique-opened="true" :router="true" :background-color="menuBackgroundColor"
-          :collapse="collapsedMenu"
+          :text-color="menuTextColor" :active-text-color="menuActiveTextColor" class="sidebar-menu"
-          :collapse-transition="false"
+          @select="handleMenuSelect">
-          :collapse-tooltip="true"
+          <SidebarItem v-for="menu in menus" :key="menu.id" :menu="menu" base-path="" :collapsed="collapsedMenu"
-          :unique-opened="true"
+            :navigation-type="props.navigationType" />
-          :router="true"
-          :background-color="menuBackgroundColor"
-          :text-color="menuTextColor"
-          :active-text-color="menuActiveTextColor"
-          class="sidebar-menu"
-          @select="handleMenuSelect"
-        >
-          <SidebarItem
-            v-for="menu in menus"
-            :key="menu.id"
-            :menu="menu"
-            base-path=""
-            :collapsed="collapsedMenu"
-            :navigation-type="props.navigationType"
-          />
         </el-menu>
       </el-scrollbar>
     </aside>

WonderQ-Admin-UI-Vue/src/components/layout/SidebarItem.vue

@@ -35,12 +35,8 @@ const childBasePath = computed(() => resolvedPath.value || props.basePath || "/"
 </script>
 
 <template>
-  <el-sub-menu
+  <el-sub-menu v-if="menu.type === 'directory' && visibleChildren.length > 0" :index="resolvedPath || menu.id"
-    v-if="menu.type === 'directory' && visibleChildren.length > 0"
+    :aria-label="menu.name" :class="['sidebar-item', `sidebar-item--${navigationType}`]">
-    :index="resolvedPath || menu.id"
-    :aria-label="menu.name"
-    :class="['sidebar-item', `sidebar-item--${navigationType}`]"
-  >
     <template #title>
       <el-tooltip :content="menu.name" :disabled="!collapsed" placement="right">
         <span class="sidebar-item__content">
@@ -49,22 +45,12 @@ const childBasePath = computed(() => resolvedPath.value || props.basePath || "/"
         </span>
       </el-tooltip>
     </template>
-    <SidebarItem
+    <SidebarItem v-for="child in visibleChildren" :key="child.id" :menu="child" :base-path="childBasePath"
-      v-for="child in visibleChildren"
+      :collapsed="collapsed" :navigation-type="navigationType" />
-      :key="child.id"
-      :menu="child"
-      :base-path="childBasePath"
-      :collapsed="collapsed"
-      :navigation-type="navigationType"
-    />
   </el-sub-menu>
 
-  <el-menu-item
+  <el-menu-item v-else-if="menu.type === 'page' && resolvedPath" :index="resolvedPath" :aria-label="menu.name"
-    v-else-if="menu.type === 'page' && resolvedPath"
+    :class="['sidebar-item', `sidebar-item--${navigationType}`]">
-    :index="resolvedPath"
-    :aria-label="menu.name"
-    :class="['sidebar-item', `sidebar-item--${navigationType}`]"
-  >
     <el-tooltip :content="menu.name" :disabled="!collapsed" placement="right">
       <span class="sidebar-item__content">
         <LayoutIcon :name="getMenuIconName(menu)" :title="collapsed ? menu.name : undefined" size="18" />

WonderQ-Admin-UI-Vue/src/components/layout/TopMenu.vue

@@ -24,21 +24,9 @@ const isVisible = computed(() => navigationType.value === "top" || navigationTyp
 
 <template>
   <nav v-if="isVisible" class="top-menu" aria-label="顶部导航">
-    <el-menu
+    <el-menu mode="horizontal" :default-active="activePath" :router="true" :unique-opened="true" class="top-menu__bar">
-      mode="horizontal"
+      <SidebarItem v-for="menu in menus" :key="menu.id" :menu="menu" base-path="" :collapsed="false"
-      :default-active="activePath"
+        :navigation-type="navigationType" />
-      :router="true"
-      :unique-opened="true"
-      class="top-menu__bar"
-    >
-      <SidebarItem
-        v-for="menu in menus"
-        :key="menu.id"
-        :menu="menu"
-        base-path=""
-        :collapsed="false"
-        :navigation-type="navigationType"
-      />
     </el-menu>
   </nav>
 </template>