feat(projects): 创建自定义布局组件SoybeanLayout

.eslintrc.js

@@ -121,6 +121,11 @@ module.exports = {
             group: 'internal',
             position: 'before'
           },
+          {
+            pattern: '@/**',
+            group: 'internal',
+            position: 'before'
+          },
           {
             pattern: '@/interface',
             group: 'internal',

src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './custom';
 export * from './svg';
+export * from './custom';
 export * from './common';
 export * from './business';

src/layouts/Layout/index.vue

@@ -1,11 +1,80 @@
 <template>
-  <basic-layout>
+  <soybean-layout :mode="mode" :fixed-header-and-tab="fixed" :fixed-footer="fixedFooter" :sider-collapse="collapse">
+    <template #header>
+      <div class="flex justify-end h-full bg-red-600">
+        <h3 class="text-white">Header</h3>
+      </div>
+    </template>
+    <template #tab>
+      <div class="h-full bg-green-600"></div>
+    </template>
+    <template #sider>
+      <div class="w-full h-full bg-gray-200">
+        <n-space :vertical="true" align="center" class="pt-24px">
+          <n-button type="primary" @click="toggle">折叠</n-button>
+          <div>
+            <span class="pr-12px">固定头部和标签</span>
+            <n-switch v-model:value="fixed" />
+          </div>
+          <div>
+            <span class="pr-12px">固定底部</span>
+            <n-switch v-model:value="fixedFooter" />
+          </div>
+          <div>
+            <span class="pr-12px">vertical布局</span>
+            <n-radio-group v-model:value="mode">
+              <n-radio v-for="item in radios" :key="item.value" :value="item.value">
+                {{ item.label }}
+              </n-radio>
+            </n-radio-group>
+          </div>
+        </n-space>
+      </div>
+    </template>
     <global-content />
-  </basic-layout>
+    <template #footer>
+      <div class="h-full bg-blue-400">
+        <h3>footer</h3>
+      </div>
+    </template>
+  </soybean-layout>
 </template>
 
 <script setup lang="ts">
+import { ref, watch } from 'vue';
+import { NSpace, NButton, NSwitch, NRadioGroup, NRadio } from 'naive-ui';
+import { useElementSize } from '@vueuse/core';
+import { useBoolean } from '@/hooks';
+import { SoybeanLayout } from '@/package';
 import { GlobalContent } from '../common';
-import { BasicLayout } from './components';
+
+type LayoutMode = 'vertical' | 'horizontal';
+
+interface ModeRadio {
+  value: LayoutMode;
+  label: string;
+}
+
+const { width } = useElementSize(document.documentElement);
+const { bool: collapse, toggle } = useBoolean();
+
+const minWidthOfLayout = 1200;
+
+const fixed = ref(true);
+const fixedFooter = ref(true);
+const mode = ref<LayoutMode>('vertical');
+
+const radios: ModeRadio[] = [
+  { value: 'vertical', label: 'vertical' },
+  { value: 'horizontal', label: 'horizontal' }
+];
+
+watch(width, newValue => {
+  if (newValue < minWidthOfLayout) {
+    document.documentElement.style.overflowX = 'auto';
+  } else {
+    document.documentElement.style.overflowX = 'hidden';
+  }
+});
 </script>
 <style scoped></style>

src/package/SoybeanLayout/components/LayoutContent.vue

@@ -0,0 +1,41 @@
+<template>
+  <main class="soybean-layout__main" :style="style">
+    <slot></slot>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  /** 顶部内边距 */
+  paddingTop?: number;
+  /** 底部内边距 */
+  paddingBottom?: number;
+  /** 左侧内边距 */
+  paddingLeft?: number;
+  /** 动画过渡时间 */
+  transitionDuration?: number;
+  /** 动画过渡时间 */
+  transitionTimingFunction?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  transitionDuration: 300,
+  transitionTimingFunction: 'ease-in-out'
+});
+
+const style = computed(() => {
+  const { paddingTop, paddingBottom, paddingLeft, transitionDuration, transitionTimingFunction } = props;
+  return `padding-top: ${paddingTop}px;padding-bottom: ${paddingBottom}px;padding-left: ${paddingLeft}px;transition-duration: ${transitionDuration}ms;transition-timing-function: ${transitionTimingFunction};`;
+});
+</script>
+<style scoped>
+.soybean-layout__main {
+  flex-grow: 1;
+  transition-property: padding-left;
+}
+</style>

src/package/SoybeanLayout/components/LayoutFooter.vue

@@ -0,0 +1,51 @@
+<template>
+  <header class="soybean-layout__footer" :style="style">
+    <slot></slot>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  /** 开启fixed布局 */
+  fixed?: boolean;
+  /** fixed布局的层级 */
+  zIndex?: number;
+  /** 最小宽度 */
+  minWidth?: number;
+  /** 高度 */
+  height?: number;
+  /** 左侧内边距 */
+  paddingLeft?: number;
+  /** 动画过渡时间 */
+  transitionDuration?: number;
+  /** 动画过渡时间 */
+  transitionTimingFunction?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fixed: true,
+  zIndex: 999,
+  minWidth: 1200,
+  height: 56,
+  paddingLeft: 0,
+  transitionDuration: 300,
+  transitionTimingFunction: 'ease-in-out'
+});
+
+const style = computed(() => {
+  const { fixed, zIndex, minWidth, height, paddingLeft, transitionDuration, transitionTimingFunction } = props;
+  const position = fixed ? 'fixed' : 'static';
+  return `position: ${position};z-index: ${zIndex};min-width: ${minWidth}px;height: ${height}px;padding-left: ${paddingLeft}px;transition-duration: ${transitionDuration}ms;transition-timing-function: ${transitionTimingFunction};`;
+});
+</script>
+<style scoped>
+.soybean-layout__footer {
+  left: 0;
+  bottom: 0;
+  flex-shrink: 0;
+  width: 100%;
+  transition-property: padding-left;
+}
+</style>

src/package/SoybeanLayout/components/LayoutHeader.vue

@@ -0,0 +1,51 @@
+<template>
+  <header class="soybean-layout__header" :style="style">
+    <slot></slot>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  /** 开启fixed布局 */
+  fixed?: boolean;
+  /** fixed布局的层级 */
+  zIndex?: number;
+  /** 最小宽度 */
+  minWidth?: number;
+  /** 高度 */
+  height?: number;
+  /** 左侧内边距 */
+  paddingLeft?: number;
+  /** 动画过渡时间 */
+  transitionDuration?: number;
+  /** 动画过渡时间 */
+  transitionTimingFunction?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fixed: true,
+  zIndex: 1001,
+  minWidth: 1200,
+  height: 56,
+  paddingLeft: 0,
+  transitionDuration: 300,
+  transitionTimingFunction: 'ease-in-out'
+});
+
+const style = computed(() => {
+  const { fixed, zIndex, minWidth, height, paddingLeft, transitionDuration, transitionTimingFunction } = props;
+  const position = fixed ? 'fixed' : 'static';
+  return `position: ${position};z-index: ${zIndex};min-width: ${minWidth}px;height: ${height}px;padding-left: ${paddingLeft}px;transition-duration: ${transitionDuration}ms;transition-timing-function: ${transitionTimingFunction};`;
+});
+</script>
+<style scoped>
+.soybean-layout__header {
+  left: 0;
+  top: 0;
+  flex-shrink: 0;
+  width: 100%;
+  transition-property: padding-left;
+}
+</style>

src/package/SoybeanLayout/components/LayoutSider.vue

@@ -0,0 +1,44 @@
+<template>
+  <aside class="soybean-layout__sider" :style="style">
+    <slot></slot>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  /** fixed布局的层级 */
+  zIndex?: number;
+  /** 宽度 */
+  width?: number;
+  /** 顶部内边距 */
+  paddingTop?: number;
+  /** 动画过渡时间 */
+  transitionDuration?: number;
+  /** 动画过渡时间 */
+  transitionTimingFunction?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  zIndex: 1002,
+  width: 200,
+  paddingTop: 0,
+  transitionDuration: 300,
+  transitionTimingFunction: 'ease-in-out'
+});
+
+const style = computed(() => {
+  const { zIndex, width, paddingTop, transitionDuration, transitionTimingFunction } = props;
+  return `z-index: ${zIndex};width: ${width}px;padding-top: ${paddingTop}px;transition-duration: ${transitionDuration}ms;transition-timing-function: ${transitionTimingFunction};`;
+});
+</script>
+<style scoped>
+.soybean-layout__sider {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  transition-property: all;
+}
+</style>