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

统一布局组件的模板缩进与换行规范，提升代码可读性，未修改业务逻辑。
2026-08-26 23:28:18 +08:00
parent fbf2c772a8 4d332df9e9
commit 994d07cfca
3 changed files with 32 additions and 85 deletions
--- a/WonderQ-Admin-UI-Vue/src/components/layout/Sidebar.vue
+++ b/WonderQ-Admin-UI-Vue/src/components/layout/Sidebar.vue
@@ -61,36 +61,24 @@ function closeSidebar() {
 </script>

 <template>
-  <div
-    v-if="isVisible"
-    :class="[
-      'sidebar-shell',
-      `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"
-    />
+  <div v-if="isVisible" :class="[
+    'sidebar-shell',
+    `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" />

-    <aside
-      :class="[
-        'sidebar-drawer',
-        isDark ? 'sidebar-drawer--dark' : 'sidebar-drawer--light',
-        {
-          'sidebar-drawer--mobile': isMobile,
-          'sidebar-drawer--open': isMobile && layout.sidebarOpened,
-          'sidebar-drawer--collapsed': collapsedMenu,
-        },
-      ]"
-      :style="sidebarStyle"
-      :inert="isMobile && !layout.sidebarOpened"
-      :aria-hidden="isMobile && !layout.sidebarOpened ? 'true' : undefined"
-    >
+    <aside :class="[
+      'sidebar-drawer',
+      isDark ? 'sidebar-drawer--dark' : 'sidebar-drawer--light',
+      {
+        'sidebar-drawer--mobile': isMobile,
+        'sidebar-drawer--open': isMobile && layout.sidebarOpened,
+        'sidebar-drawer--collapsed': collapsedMenu,
+      },
+    ]" :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
-          :default-active="activePath"
-          :collapse="collapsedMenu"
-          :collapse-transition="false"
-          :collapse-tooltip="true"
-          :unique-opened="true"
-          :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 :default-active="activePath" :collapse="collapsedMenu" :collapse-transition="false"
+          :collapse-tooltip="true" :unique-opened="true" :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>
--- a/WonderQ-Admin-UI-Vue/src/components/layout/SidebarItem.vue
+++ b/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
-    v-if="menu.type === 'directory' && visibleChildren.length > 0"
-    :index="resolvedPath || menu.id"
-    :aria-label="menu.name"
-    :class="['sidebar-item', `sidebar-item--${navigationType}`]"
-  >
+  <el-sub-menu v-if="menu.type === 'directory' && visibleChildren.length > 0" :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
-      v-for="child in visibleChildren"
-      :key="child.id"
-      :menu="child"
-      :base-path="childBasePath"
-      :collapsed="collapsed"
-      :navigation-type="navigationType"
-    />
+    <SidebarItem v-for="child in visibleChildren" :key="child.id" :menu="child" :base-path="childBasePath"
+      :collapsed="collapsed" :navigation-type="navigationType" />
  </el-sub-menu>

-  <el-menu-item
-    v-else-if="menu.type === 'page' && resolvedPath"
-    :index="resolvedPath"
-    :aria-label="menu.name"
-    :class="['sidebar-item', `sidebar-item--${navigationType}`]"
-  >
+  <el-menu-item v-else-if="menu.type === 'page' && resolvedPath" :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" />
--- a/WonderQ-Admin-UI-Vue/src/components/layout/TopMenu.vue
+++ b/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
-      mode="horizontal"
-      :default-active="activePath"
-      :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 mode="horizontal" :default-active="activePath" :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>