feat: 中心布局

src/layout/components/Footer/index.vue

@@ -1,6 +1,6 @@
 <template>
   <a-layout-footer class="footer">
-    <div class="footer_title">dc admin by 兔子先森</div>
+    <div class="footer_title">dc-admin by 兔子先森</div>
   </a-layout-footer>
 </template>
 
@@ -8,7 +8,7 @@
 
 <style lang="scss" scoped>
 .footer {
-  height: 40px;
+  height: 30px;
   box-sizing: border-box;
   border-top: $border-1 solid $color-border-1;
   display: flex;

src/layout/components/Main/index.vue

@@ -1,12 +1,23 @@
 <template>
-  <a-layout-content class="content">Content</a-layout-content>
+  <a-layout-content class="content">
+    <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
+      <div style="height: 2000px; background: #eee"></div>
+    </a-scrollbar>
+  </a-layout-content>
 </template>
 
 <script setup lang="ts"></script>
 
 <style lang="scss" scoped>
 .content {
+  height: calc(100vh - 60px - 30px); // 动态切类名-去掉footer
+}
+.scrollbar {
   height: 100%;
-  box-shadow: $border-no-1;
+}
+// 修改左侧滚动条宽度
+:deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
+  width: 4px;
+  margin-left: 8px;
 }
 </style>

src/style/global-theme.scss

@@ -1,4 +1,4 @@
-/* global css variable */
+/* global css theme */
 
 $margin: 14px; // 盒子间距
 $padding: 16px; // 盒子和内容的间距

src/style/index.scss

@@ -1,4 +1,4 @@
-@import "./variable.scss";
+@import "./global-theme.scss";
 
 * {
   margin: 0;

vite.config.ts

@@ -8,7 +8,7 @@ import Components from "unplugin-vue-components/vite";
 import { ArcoResolver } from "unplugin-vue-components/resolvers";
 import { vitePluginForArco } from "@arco-plugins/vite-vue";
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
-const variablePath = normalizePath(path.normalize("./src/style/variable.scss"));
+const themePath = normalizePath(path.normalize("./src/style/global-theme.scss"));
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -71,7 +71,8 @@ export default defineConfig(({ mode }) => {
       preprocessorOptions: {
         scss: {
           // additionalData的内容会在每个scss文件的开头自动注入
-          additionalData: `@import "${variablePath}";`
+          additionalData: `@import "${themePath}";
+          `
         }
       }
     },