From 634dfafca76ad2238e0488970205d232225baa87 Mon Sep 17 00:00:00 2001
From: WANGFan <15871339963@163.com>
Date: Thu, 3 Jul 2025 23:46:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B8=B8=E7=94=A8=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                          | 35 +++++++-------
 src/components/fill-page/index.vue           | 38 ---------------
 src/components/full-screen/index.vue         | 23 +++++++++
 src/lang/modules/enUS.ts                     |  1 +
 src/lang/modules/zhCN.ts                     |  1 +
 src/mock/_data/system_menu.ts                | 21 ++++++++
 src/views/component/common-layouts/index.vue | 50 ++++++++++++++++++++
 7 files changed, 114 insertions(+), 55 deletions(-)
 delete mode 100644 src/components/fill-page/index.vue
 create mode 100644 src/components/full-screen/index.vue
 create mode 100644 src/views/component/common-layouts/index.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 3f5d4b3..1222932 100644
--- a/src/components.d.ts
+++ b/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"];
-    CodeView: (typeof import("./components/code-view/index.vue"))["default"];
-    ExternalLinkPage: (typeof import("./components/external-link-page/index.vue"))["default"];
-    FillPage: (typeof import("./components/fill-page/index.vue"))["default"];
-    InternalLinkPage: (typeof import("./components/internal-link-page/index.vue"))["default"];
-    LangProvider: (typeof import("./components/lang-provider/index.vue"))["default"];
-    MainTransition: (typeof import("./components/main-transition/index.vue"))["default"];
-    PinyinPro: (typeof import("./components/pinyin-pro/index.vue"))["default"];
-    QrcodeDraw: (typeof import("./components/qrcode-draw/index.vue"))["default"];
-    RecorderPcm: (typeof import("./components/recorder-pcm/index.vue"))["default"];
-    RouterLink: (typeof import("vue-router"))["RouterLink"];
-    RouterView: (typeof import("vue-router"))["RouterView"];
-    SelectIcon: (typeof import("./components/select-icon/index.vue"))["default"];
-    SvgAndIcon: (typeof import("./components/svg-and-icon/index.vue"))["default"];
-    SvgIcon: (typeof import("./components/svg-icon/index.vue"))["default"];
-    VerifyCode: (typeof import("./components/verify-code/index.vue"))["default"];
+    BarcodeDraw: typeof import('./components/barcode-draw/index.vue')['default']
+    CodeView: typeof import('./components/code-view/index.vue')['default']
+    ExternalLinkPage: typeof import('./components/external-link-page/index.vue')['default']
+    FillPage: (typeof import("./components/fill-page/index.vue"))["default"]
+    FullScreen: typeof import('./components/full-screen/index.vue')['default']
+    InternalLinkPage: typeof import('./components/internal-link-page/index.vue')['default']
+    LangProvider: typeof import('./components/lang-provider/index.vue')['default']
+    MainTransition: typeof import('./components/main-transition/index.vue')['default']
+    PinyinPro: typeof import('./components/pinyin-pro/index.vue')['default']
+    QrcodeDraw: typeof import('./components/qrcode-draw/index.vue')['default']
+    RecorderPcm: typeof import('./components/recorder-pcm/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SelectIcon: typeof import('./components/select-icon/index.vue')['default']
+    SvgAndIcon: typeof import('./components/svg-and-icon/index.vue')['default']
+    SvgIcon: typeof import('./components/svg-icon/index.vue')['default']
+    VerifyCode: typeof import('./components/verify-code/index.vue')['default']
   }
 }
diff --git a/src/components/fill-page/index.vue b/src/components/fill-page/index.vue
deleted file mode 100644
index eb71311..0000000
--- a/src/components/fill-page/index.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/full-screen/index.vue b/src/components/full-screen/index.vue
new file mode 100644
index 0000000..36d87e7
--- /dev/null
+++ b/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>
diff --git a/src/lang/modules/enUS.ts b/src/lang/modules/enUS.ts
index 6fdd4a2..ab74211 100644
--- a/src/lang/modules/enUS.ts
+++ b/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"
   }
 };
diff --git a/src/lang/modules/zhCN.ts b/src/lang/modules/zhCN.ts
index e3dca8a..583af54 100644
--- a/src/lang/modules/zhCN.ts
+++ b/src/lang/modules/zhCN.ts
@@ -111,6 +111,7 @@ export default {
     ["tree-tools"]: "树处理工具类",
     ["file-tools"]: "文件工具类",
     ["verify-tools"]: "校验工具类",
+    ["common-layouts"]: "常用布局",
     ["test"]: "测试"
   }
 };
diff --git a/src/mock/_data/system_menu.ts b/src/mock/_data/system_menu.ts
index 2b4fa7a..750cd2a 100644
--- a/src/mock/_data/system_menu.ts
+++ b/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",
diff --git a/src/views/component/common-layouts/index.vue b/src/views/component/common-layouts/index.vue
new file mode 100644
index 0000000..64b8967
--- /dev/null
+++ b/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>