first commit

src/layouts/Basic.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { useAppStore } from '@/stores';
+import { useResponsive } from '@/hooks';
+
+const appStore = useAppStore();
+const router = useRouter();
+
+useResponsive(true);
+const navbarHeight = `60px`;
+const navbar = computed(() => appStore.navbar);
+const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
+const hideMenu = computed(() => appStore.hideMenu);
+
+const menuWidth = computed(() => {
+  return appStore.menuCollapse ? 48 : appStore.menuWidth;
+});
+const collapsed = computed(() => {
+  return appStore.menuCollapse;
+});
+const paddingStyle = computed(() => {
+  const paddingLeft = renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {};
+  const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
+  return { ...paddingLeft, ...paddingTop };
+});
+const setCollapsed = (val: boolean) => {
+  appStore.updateSettings({ menuCollapse: val });
+};
+
+const drawerVisible = ref(false);
+const drawerCancel = () => {
+  drawerVisible.value = false;
+};
+provide('toggleDrawerMenu', () => {
+  drawerVisible.value = !drawerVisible.value;
+});
+</script>
+
+<template>
+  <a-layout :class="['layout', { mobile: appStore.hideMenu }]">
+    <div v-if="navbar" class="layout-navbar">
+      <base-navbar />
+    </div>
+    <a-layout>
+      <a-layout>
+        <a-layout-sider
+          v-if="renderMenu"
+          v-show="!hideMenu"
+          class="layout-sider"
+          breakpoint="xl"
+          :collapsed="collapsed"
+          :width="menuWidth"
+          :style="{ paddingTop: navbar ? '60px' : '' }"
+          collapsible
+          hide-trigger
+          @collapse="setCollapsed"
+        >
+          <div class="menu-wrapper">
+            <base-menu />
+          </div>
+        </a-layout-sider>
+        <a-drawer
+          v-if="hideMenu"
+          :visible="drawerVisible"
+          placement="left"
+          :footer="false"
+          mask-closable
+          :closable="false"
+          @cancel="drawerCancel"
+        >
+          <base-menu />
+        </a-drawer>
+        <a-layout class="layout-content" :style="paddingStyle">
+          <base-tab-bar v-if="appStore.tabBar" />
+          <a-layout-content class="px-5">
+            <base-breadcrumb />
+            <layout-page />
+          </a-layout-content>
+        </a-layout>
+      </a-layout>
+    </a-layout>
+  </a-layout>
+</template>
+
+<style scoped lang="less">
+@nav-size-height: 60px;
+@layout-max-width: 1100px;
+
+.layout {
+  width: 100%;
+  height: 100%;
+}
+.layout-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100%;
+  height: @nav-size-height;
+}
+.layout-sider {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  height: 100%;
+  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: -1px;
+    display: block;
+    width: 1px;
+    height: 100%;
+    background-color: var(--color-border);
+    content: '';
+  }
+  > :deep(.arco-layout-sider-children) {
+    overflow-y: hidden;
+  }
+}
+.menu-wrapper {
+  height: 100%;
+  overflow: auto;
+  overflow-x: hidden;
+
+  :deep(.arco-menu) {
+    ::-webkit-scrollbar {
+      width: 12px;
+      height: 4px;
+    }
+    ::-webkit-scrollbar-thumb {
+      border: 4px solid transparent;
+      background-clip: padding-box;
+      border-radius: 7px;
+      background-color: var(--color-text-4);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-text-3);
+    }
+  }
+}
+.layout-content {
+  min-width: 1366px;
+  min-height: 100vh;
+  overflow-y: hidden;
+  background-color: var(--color-fill-2);
+  transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+</style>