签入版本

2026-09-11 11:39:07 +08:00
commit c381201858
928 changed files with 116443 additions and 0 deletions
@@ -0,0 +1,2 @@
+export { default as PageWrapper } from './src/PageWrapper.vue';
+export { default as PageFooter } from './src/PageFooter.vue';
@@ -0,0 +1,42 @@
+<template>
+  <el-card
+    shadow="never"
+    :body-style="{ padding: '0', width: '100%' }"
+    class="border-none page-wrapper-footer"
+    :class="{ 'dark-bg': getDarkTheme }"
+  >
+    <div class="flex items-center w-full">
+      <div class="flex-1 page-wrapper-footer-left"><slot name="left"></slot></div>
+      <div class="page-wrapper-footer-right"><slot name="right"></slot></div>
+    </div>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+
+  const { getDarkTheme } = useDesignSetting();
+</script>
+
+<style lang="scss" scoped>
+  .page-wrapper-footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: 15px 24px;
+    // box-shadow: -3px 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.08),
+    //   -3px 5px 12px 4px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: width 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    background: #fff;
+    border-radius: 0;
+  }
+
+  .dark-bg {
+    background: rgb(24, 24, 28);
+  }
+</style>
@@ -0,0 +1,63 @@
+<template>
+  <div class="page-wrapper" :class="{ 'footer-space': showFooter && getShowFooter }">
+    <div class="mb-3.5 n-layout-page-header" v-if="title || content || $slots.headerContent">
+      <el-card shadow="never" class="border-none">
+        <template #header>
+          <div class="header-title">{{ title }}</div>
+        </template>
+        {{ content }}
+        <slot name="headerContent"></slot>
+      </el-card>
+    </div>
+    <div class="page-wrapper-content" :style="contentStyle" :class="contentClass">
+      <slot></slot>
+    </div>
+    <PageFooter v-if="showFooter && getShowFooter" :style="getFooterWidth">
+      <template #left>
+        <slot name="leftFooter"></slot>
+      </template>
+      <template #right>
+        <slot name="rightFooter"></slot>
+      </template>
+    </PageFooter>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, useSlots } from 'vue';
+  import { basicProps } from './wrapperProps';
+  import PageFooter from './PageFooter.vue';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+
+  const slots = useSlots();
+  defineProps({ ...basicProps });
+
+  const { getMenuSetting } = useProjectSetting();
+
+  const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);
+
+  const getFooterWidth = computed(() => {
+    const { menuWidth, minMenuWidth, collapsed } = getMenuSetting.value;
+    const wh = collapsed ? minMenuWidth : menuWidth;
+    return {
+      width: `calc(100% - ${wh}px)`,
+    };
+  });
+</script>
+
+<style lang="scss" scoped>
+  .page-wrapper {
+    .mb-4 {
+      margin-bottom: 1rem;
+    }
+    .header-title {
+      font-weight: 700;
+      font-size: 16px;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .footer-space {
+    padding-bottom: 64px;
+  }
+</style>
@@ -0,0 +1,27 @@
+export const basicProps = {
+  //pageHeader title
+  title: {
+    type: String,
+    default: '',
+  },
+  //pageHeader Content 内容
+  content: {
+    type: String,
+    default: '',
+  },
+  //主体区域样式
+  contentStyle: {
+    type: Object,
+    default: () => {},
+  },
+  //主体区域 class
+  contentClass: {
+    type: String,
+    default: '',
+  },
+  //是否显示底部区域 class
+  showFooter: {
+    type: Boolean,
+    default: true,
+  },
+};