feat: 常用布局

src/components.d.ts

@@ -5,23 +5,24 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module "vue" {
+declare module 'vue' {
   export interface GlobalComponents {
-    BarcodeDraw: (typeof import("./components/barcode-draw/index.vue"))["default"];
+    BarcodeDraw: typeof import('./components/barcode-draw/index.vue')['default']
-    CodeView: (typeof import("./components/code-view/index.vue"))["default"];
+    CodeView: typeof import('./components/code-view/index.vue')['default']
-    ExternalLinkPage: (typeof import("./components/external-link-page/index.vue"))["default"];
+    ExternalLinkPage: typeof import('./components/external-link-page/index.vue')['default']
-    FillPage: (typeof import("./components/fill-page/index.vue"))["default"];
+    FillPage: (typeof import("./components/fill-page/index.vue"))["default"]
-    InternalLinkPage: (typeof import("./components/internal-link-page/index.vue"))["default"];
+    FullScreen: typeof import('./components/full-screen/index.vue')['default']
-    LangProvider: (typeof import("./components/lang-provider/index.vue"))["default"];
+    InternalLinkPage: typeof import('./components/internal-link-page/index.vue')['default']
-    MainTransition: (typeof import("./components/main-transition/index.vue"))["default"];
+    LangProvider: typeof import('./components/lang-provider/index.vue')['default']
-    PinyinPro: (typeof import("./components/pinyin-pro/index.vue"))["default"];
+    MainTransition: typeof import('./components/main-transition/index.vue')['default']
-    QrcodeDraw: (typeof import("./components/qrcode-draw/index.vue"))["default"];
+    PinyinPro: typeof import('./components/pinyin-pro/index.vue')['default']
-    RecorderPcm: (typeof import("./components/recorder-pcm/index.vue"))["default"];
+    QrcodeDraw: typeof import('./components/qrcode-draw/index.vue')['default']
-    RouterLink: (typeof import("vue-router"))["RouterLink"];
+    RecorderPcm: typeof import('./components/recorder-pcm/index.vue')['default']
-    RouterView: (typeof import("vue-router"))["RouterView"];
+    RouterLink: typeof import('vue-router')['RouterLink']
-    SelectIcon: (typeof import("./components/select-icon/index.vue"))["default"];
+    RouterView: typeof import('vue-router')['RouterView']
-    SvgAndIcon: (typeof import("./components/svg-and-icon/index.vue"))["default"];
+    SelectIcon: typeof import('./components/select-icon/index.vue')['default']
-    SvgIcon: (typeof import("./components/svg-icon/index.vue"))["default"];
+    SvgAndIcon: typeof import('./components/svg-and-icon/index.vue')['default']
-    VerifyCode: (typeof import("./components/verify-code/index.vue"))["default"];
+    SvgIcon: typeof import('./components/svg-icon/index.vue')['default']
+    VerifyCode: typeof import('./components/verify-code/index.vue')['default']
   }
 }

src/components/fill-page/index.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="fill-page-size" :style="{ height: viewportHeight }">
-    <slot></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useThemeConfig } from "@/store/modules/theme-config";
-const themeStore = useThemeConfig();
-let { isTabs, isFooter } = storeToRefs(themeStore);
-// footer: 30px
-// tabs: 40px
-// head: 60px
-const viewportHeight = computed(() => {
-  // 有tabs、有footer
-  if (isTabs.value && isFooter.value) {
-    return `calc(100vh - 60px - 30px - 40px)`;
-  } else if (!isTabs.value && isFooter.value) {
-    // 无tabs，有footer
-    return `calc(100vh - 60px - 30px)`;
-  } else if (isTabs.value && !isFooter.value) {
-    // 有tabs，无footer
-    return `calc(100vh - 60px - 40px)`;
-  } else {
-    // 无tabs、无footer，直接减去顶部head
-    return `calc(100vh - 60px)`;
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.fill-page-size {
-  box-sizing: border-box;
-
-  // box-shadow: $shadow-border-1;
-}
-</style>

src/components/full-screen/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="snow-page">
+    <div class="external-link-page">
+      <div class="external-link-inner-page">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.external-link-page {
+  box-sizing: border-box;
+  height: 100%;
+  .external-link-inner-page {
+    height: 100%;
+    overflow: hidden;
+    background: $color-bg-1;
+  }
+}
+</style>

src/lang/modules/enUS.ts

@@ -111,6 +111,7 @@ export default {
     ["tree-tools"]: "tree-tools",
     ["file-tools"]: "file-tools",
     ["verify-tools"]: "verify tools",
+    ["common-layouts"]: "common layouts",
     ["test"]: "test"
   }
 };

src/lang/modules/zhCN.ts

@@ -111,6 +111,7 @@ export default {
     ["tree-tools"]: "树处理工具类",
     ["file-tools"]: "文件工具类",
     ["verify-tools"]: "校验工具类",
+    ["common-layouts"]: "常用布局",
     ["test"]: "测试"
   }
 };

src/mock/_data/system_menu.ts

@@ -653,6 +653,27 @@ export const systemMenu = [
     },
     children: null
   },
+  {
+    id: "0614",
+    parentId: "06",
+    path: "/component/common-layouts",
+    name: "common-layouts",
+    component: "component/common-layouts/index",
+    meta: {
+      title: "common-layouts",
+      hide: false,
+      disable: false,
+      keepAlive: true,
+      affix: false,
+      link: "",
+      iframe: false,
+      roles: ["admin"],
+      icon: "icon-menu",
+      sort: 14,
+      type: 2
+    },
+    children: null
+  },
   {
     id: "07",
     parentId: "0",

src/views/component/common-layouts/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <full-screen>
+    <a-layout class="layout">
+      <a-layout-sider class="layout-sider" :collapsed-width="12" :collapsed="collapsed">
+        <div class="packup-btn" @click="collapsed = !collapsed">
+          <icon-left v-if="!collapsed" />
+          <icon-right v-else />
+        </div>
+        <div v-show="!collapsed">sider</div>
+      </a-layout-sider>
+      <a-layout-content>Content</a-layout-content>
+    </a-layout>
+  </full-screen>
+</template>
+
+<script setup lang="ts">
+const collapsed = ref<boolean>(false);
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  height: 100%;
+  box-shadow: $shadow-border-1;
+  .layout-sider {
+    position: relative;
+    border-right: 1px solid cyan;
+    .packup-btn {
+      position: absolute;
+      top: 50%;
+      right: calc(-24px / 2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      background: $color-bg-white;
+      border-radius: 50%;
+      box-shadow: inset 0 0 0 1px $color-border-2;
+      transform: translateY(-50%);
+      transition: all 0.1s;
+      &:hover {
+        transform: translateY(-50%) scale(1.1);
+      }
+    }
+  }
+}
+:deep(.arco-layout-sider-light) {
+  box-shadow: unset;
+}
+</style>