refactor(styles): 提取布局 mixin，派生主题色，消除硬编码与魔法数字

- 新增 _mixins.scss，统一 app-main / sidebar-scroll 高度计算
- _theme.scss 引入 SCSS 颜色令牌，menu-hover 改用 color-mix() 自动派生
- _variables.scss 新增 $sidebar-toggle-height 替代魔法数字 50px
- LeftLayout / TopLayout / MixLayout 中重复 calc 替换为 mixin 调用
- 修复 apifox / internal-doc demo 页面 tags-view 高度错误（34px→40px）
- 添加主题变量契约注释，方便后续新增主题

src/layouts/LeftLayout.vue

@@ -45,6 +45,8 @@ const appStore = useAppStore();
 </script>
 
 <style lang="scss" scoped>
+@use "@/styles/base/mixins" as *;
+
 .layout {
   &__sidebar {
     position: fixed;
@@ -69,7 +71,7 @@ const appStore = useAppStore();
 
       &.has-logo {
         .el-scrollbar {
-          height: calc(100vh - $navbar-height);
+          @include sidebar-scroll-height-with-logo;
         }
       }
 
@@ -131,7 +133,7 @@ const appStore = useAppStore();
 
 .hasTagsView {
   :deep(.app-main) {
-    height: calc(100vh - $navbar-height - $tags-view-height) !important;
+    @include app-main-height-with-tags;
   }
 }
 </style>

src/layouts/MixLayout.vue

@@ -229,6 +229,8 @@ watch(
 </script>
 
 <style lang="scss" scoped>
+@use "@/styles/base/mixins" as *;
+
 .layout {
   &__header {
     position: sticky;
@@ -297,8 +299,8 @@ watch(
   }
 
   &__container {
+    @include app-main-height;
     display: flex;
-    height: calc(100vh - $navbar-height);
     padding-top: 0;
 
     .layout__sidebar--left {
@@ -314,7 +316,7 @@ watch(
       }
 
       :deep(.el-scrollbar) {
-        height: calc(100vh - $navbar-height - 50px);
+        @include sidebar-scroll-height-with-toggle;
       }
 
       :deep(.el-menu) {
@@ -329,8 +331,8 @@ watch(
         align-items: center;
         justify-content: center;
         width: 100%;
-        height: 50px;
-        line-height: 50px;
+        height: $sidebar-toggle-height;
+        line-height: $sidebar-toggle-height;
         background-color: var(--menu-background);
         box-shadow: 0 0 6px -2px var(--el-color-primary);
       }
@@ -368,7 +370,7 @@ watch(
 
 :deep(.hasTagsView) {
   .app-main {
-    height: calc(100vh - $navbar-height - $tags-view-height) !important;
+    @include app-main-height-with-tags;
   }
 }
 </style>

src/layouts/TopLayout.vue

@@ -49,6 +49,8 @@ const isLogoCollapsed = computed(() => width.value < 768);
 </script>
 
 <style lang="scss" scoped>
+@use "@/styles/base/mixins" as *;
+
 .layout {
   &__header {
     position: sticky;
@@ -143,14 +145,14 @@ const isLogoCollapsed = computed(() => width.value < 768);
   }
 
   &__main {
-    height: calc(100vh - $navbar-height);
+    @include app-main-height;
     overflow-y: auto;
   }
 }
 
 .hasTagsView {
   :deep(.app-main) {
-    height: calc(100vh - $navbar-height - $tags-view-height) !important;
+    @include app-main-height-with-tags;
   }
 }
 </style>