优化管理页面单板块布局

将管理页面调整为主内容区加右侧窄目录的设置页布局，优化当前项高亮与响应式展示。

frontend/src/views/Dashboard/Dashboard.vue

@@ -173,11 +173,6 @@ const { activeSection, activeLabel, sections, selectSection } = useDashboardNavi
     </div>
 
     <div class="dashboard-workspace">
-      <DashboardNavigation
-        :active-section="activeSection"
-        :sections="sections"
-        @select="selectSection"
-      />
       <div
         :key="activeSection"
         class="dashboard-content"
@@ -510,6 +505,11 @@ const { activeSection, activeLabel, sections, selectSection } = useDashboardNavi
     </section>
 
       </div>
+      <DashboardNavigation
+        :active-section="activeSection"
+        :sections="sections"
+        @select="selectSection"
+      />
     </div>
 
     <SettingsModal v-if="showSettings" :state="dashboard" />

frontend/src/views/Dashboard/DashboardLayout.css

@@ -49,12 +49,14 @@
 
 .dashboard-workspace {
   display: grid;
-  grid-template-columns: 208px minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) clamp(176px, 20%, 220px);
+  grid-template-areas: "main submenu";
   gap: 18px;
   min-height: 0;
 }
 
 .dashboard-content {
+  grid-area: main;
   min-width: 0;
   min-height: 0;
   overflow: auto;
@@ -140,7 +142,7 @@
 
 @media (max-width: 1100px) {
   .dashboard-workspace {
-    grid-template-columns: 180px minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr) 180px;
     gap: 14px;
   }
 
@@ -190,6 +192,9 @@
 
   .dashboard-workspace {
     grid-template-columns: 1fr;
+    grid-template-areas:
+      "main"
+      "submenu";
   }
 
   .dashboard-content {

frontend/src/views/Dashboard/DashboardNavigation.css

@@ -1,20 +1,22 @@
 .dashboard-navigation {
+  grid-area: submenu;
+  position: sticky;
+  top: 0;
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 2px;
   min-height: 0;
   overflow-y: auto;
-  padding: 22px 12px 14px;
+  padding: 2px 0 2px 12px;
-  border: 1px solid #e2e8f2;
+  border-left: 1px solid #e2e8f2;
-  border-radius: 18px;
+  background: transparent;
-  background: #fff;
 }
 
 .navigation-heading {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 0 10px 18px;
+  padding: 2px 8px 14px;
 }
 
 .navigation-heading div {
@@ -24,7 +26,7 @@
 
 .navigation-heading strong {
   color: #263752;
-  font-size: 19px;
+  font-size: 15px;
 }
 
 .navigation-heading span,
@@ -35,16 +37,17 @@
 }
 
 .navigation-group {
-  margin: 14px 12px 4px;
+  margin: 14px 8px 4px;
 }
 
 .navigation-item {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 11px;
   width: 100%;
-  min-height: 43px;
+  min-height: 36px;
-  padding: 10px 12px;
+  padding: 7px 10px;
   border: 1px solid transparent;
   border-radius: 10px;
   background: transparent;
@@ -61,12 +64,23 @@
 }
 
 .navigation-item.active {
-  border-color: #dce6f6;
+  border-color: transparent;
   background: #edf3fc;
   color: #315aaa;
   font-weight: 700;
 }
 
+.navigation-item.active::before {
+  content: "";
+  position: absolute;
+  top: 9px;
+  bottom: 9px;
+  left: -13px;
+  width: 3px;
+  border-radius: 3px;
+  background: currentColor;
+}
+
 .navigation-item:focus-visible {
   outline: 2px solid #315aaa;
   outline-offset: 2px;
@@ -91,16 +105,20 @@
 }
 
 .navigation-footer {
-  margin: auto 12px 0;
+  margin: auto 8px 0;
-  padding-top: 28px;
+  padding-top: 22px;
 }
 
 @media (max-width: 760px) {
   .dashboard-navigation {
+    position: static;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 6px;
-    padding: 10px;
+    padding: 12px;
+    border: 1px solid #e2e8f2;
+    border-radius: 14px;
+    background: #fff;
     overflow: visible;
   }