feat(page-wrapper): added pageWrapper component

.vscode/settings.json

@@ -12,6 +12,7 @@
   "editor.cursorSmoothCaretAnimation": true,
   "editor.detectIndentation": false,
   "diffEditor.ignoreTrimWhitespace": false,
+  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
   "editor.formatOnPaste": true,
   "editor.formatOnSave": true,
   "editor.suggestSelection": "first",
@@ -108,18 +109,22 @@
   // ===========================================
   // ================ Eslint ===================
   // ===========================================
-  "eslint.enable": true,
+  // "eslint.enable": true,
+  "eslint.alwaysShowStatus": true,
   "eslint.options": {
     // 配置
-    "plugins": [
-      "html",
-      "vue",
-      "javascript",
-      "jsx",
-      "typescript"
-    ]
-  },
-  "eslint.autoFixOnSave": true,
+    "plugins": ["html", "vue", "javascript", "jsx", "typescript"],
+    "extensions": [".js", ".jsx", ".ts", ".tsx", ".vue"]
+  },
+  "eslint.validate": [
+    "javascript",
+    "typescript",
+    "reacttypescript",
+    "reactjavascript",
+    "html",
+    "vue"
+  ],
+  // "eslint.autoFixOnSave": true,
   // ===========================================
   // ================ Vetur ====================
   // ===========================================
@@ -181,19 +186,12 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "i18n-ally.localesPaths": [
-    "src/locales/lang",
-  ],
+  "i18n-ally.localesPaths": ["src/locales/lang"],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.sortKeys": true,
   "i18n-ally.namespace": true,
   "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
-  "i18n-ally.enabledParsers": [
-    "ts"
-  ],
+  "i18n-ally.enabledParsers": ["ts"],
   "i18n-ally.sourceLanguage": "zh",
-  "i18n-ally.enabledFrameworks": [
-    "vue",
-    "react"
-  ]
-}
+  "i18n-ally.enabledFrameworks": ["vue", "react"]
+}

CHANGELOG.zh_CN.md

@@ -5,6 +5,7 @@
 - 新增`mixSideTrigger`配置。用于配置左侧混合模式菜单打开方式。可选`hover`,默认`click`
 - 新增`mixSideFixed`配置。用于固定左侧混合模式菜单
 - modal 组件新增`height`和`min-height`属性
+- 新增`PageWrapper`组件。并应用于示例页面
 
 ### 🐛 Bug Fixes
 

src/components/Form/src/hooks/useFormContext.ts

@@ -1,4 +1,4 @@
-import { InjectionKey } from 'vue';
+import type { InjectionKey } from 'vue';
 import { createContext, useContext } from '/@/hooks/core/useContext';
 
 export interface FormContextProps {

src/components/Page/index.ts

@@ -1,2 +1,4 @@
 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 export const PageFooter = createAsyncComponent(() => import('./src/PageFooter.vue'));
+
+export { default as PageWrapper } from './src/PageWrapper.vue';

src/components/Page/src/PageFooter.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="app-footer" :style="{ width: getCalcContentWidth }">
-    <div class="app-footer__left">
+  <div :class="prefixCls" :style="{ width: getCalcContentWidth }">
+    <div :class="`${prefixCls}__left`">
       <slot name="left" />
     </div>
-    <div class="app-footer__right">
+    <slot />
+    <div :class="`${prefixCls}__right`">
       <slot name="right" />
     </div>
   </div>
@@ -12,19 +13,21 @@
   import { defineComponent } from 'vue';
 
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
 
   export default defineComponent({
     name: 'PageFooter',
     setup() {
+      const { prefixCls } = useDesign('page-footer');
       const { getCalcContentWidth } = useMenuSetting();
-      return { getCalcContentWidth };
+      return { prefixCls, getCalcContentWidth };
     },
   });
 </script>
 <style lang="less" scoped>
-  @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-page-footer';
 
-  .app-footer {
+  .@{prefix-cls} {
     position: fixed;
     right: 0;
     bottom: 0;

src/components/Page/src/PageWrapper.vue

@@ -0,0 +1,153 @@
+<template>
+  <div :class="getClass">
+    <PageHeader :ghost="ghost" v-bind="$attrs" ref="headerRef">
+      <template #default>
+        <template v-if="content">
+          {{ content }}
+        </template>
+        <slot name="headerContent" v-else />
+      </template>
+      <template #[item]="data" v-for="item in getHeaderSlots">
+        <slot :name="item" v-bind="data" />
+      </template>
+    </PageHeader>
+    <div :class="[`${prefixCls}-content`, $attrs.contentClass]" :style="getContentStyle">
+      <slot />
+    </div>
+    <PageFooter v-if="getShowFooter" ref="footerRef">
+      <template #left>
+        <slot name="leftFooter" />
+      </template>
+      <template #right>
+        <slot name="rightFooter" />
+      </template>
+    </PageFooter>
+  </div>
+</template>
+<script lang="ts">
+  import type { CSSProperties, PropType } from 'vue';
+
+  import { defineComponent, computed, watch, nextTick, ref, unref } from 'vue';
+  import PageFooter from './PageFooter.vue';
+  import { usePageContext } from '/@/hooks/component/usePageContext';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
+  import { omit } from 'lodash-es';
+  import { PageHeader } from 'ant-design-vue';
+  export default defineComponent({
+    name: 'PageWrapper',
+    components: { PageFooter, PageHeader },
+    props: {
+      dense: propTypes.bool,
+      ghost: propTypes.bool,
+      content: propTypes.string,
+      contentStyle: {
+        type: Object as PropType<CSSProperties>,
+      },
+      contentBackgrond: propTypes.bool,
+      contentFullHeight: propTypes.bool,
+    },
+    setup(props, { slots }) {
+      const headerRef = ref<ComponentRef>(null);
+      const footerRef = ref<ComponentRef>(null);
+      const { prefixCls } = useDesign('page-wrapper');
+      const { contentHeight, setPageHeight, pageHeight } = usePageContext();
+
+      const getClass = computed(() => {
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--dense`]: props.dense,
+          },
+        ];
+      });
+
+      const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);
+
+      const getHeaderSlots = computed(() => {
+        return Object.keys(omit(slots, 'default', 'leftFooter', 'rightFooter', 'headerContent'));
+      });
+
+      const getContentStyle = computed(
+        (): CSSProperties => {
+          const { contentBackgrond, contentFullHeight, contentStyle } = props;
+          const bg = contentBackgrond ? { backgroundColor: '#fff' } : {};
+          if (!contentFullHeight) {
+            return { ...bg, ...contentStyle };
+          }
+          return {
+            ...bg,
+            ...contentStyle,
+            minHeight: `${unref(pageHeight)}px`,
+          };
+        }
+      );
+
+      watch(
+        () => contentHeight?.value,
+        (height) => {
+          if (!props.contentFullHeight) {
+            return;
+          }
+          nextTick(() => {
+            const footer = unref(footerRef);
+            const header = unref(headerRef);
+            let footetHeight = 0;
+            const footerEl = footer?.$el;
+            if (footerEl) {
+              footetHeight += footerEl?.offsetHeight ?? 0;
+            }
+            let headerHeight = 0;
+            const headerEl = header?.$el;
+            if (headerEl) {
+              headerHeight += headerEl?.offsetHeight ?? 0;
+            }
+            setPageHeight?.(height - footetHeight - headerHeight);
+          });
+        },
+        {
+          immediate: true,
+        }
+      );
+
+      return {
+        getContentStyle,
+        footerRef,
+        headerRef,
+        getClass,
+        getHeaderSlots,
+        prefixCls,
+        getShowFooter,
+        pageHeight,
+        omit,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-page-wrapper';
+
+  .@{prefix-cls} {
+    position: relative;
+
+    .ant-page-header {
+      padding: 12px 16px;
+
+      &:empty {
+        padding: 0;
+      }
+    }
+
+    &-content {
+      // padding: 12px;
+      margin: 16px;
+    }
+
+    &--dense {
+      .@{prefix-cls}-content {
+        margin: 0;
+      }
+    }
+  }
+</style>

src/components/Table/src/hooks/useDataSource.ts

@@ -7,7 +7,7 @@ import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 
 import { buildUUID } from '/@/utils/uuid';
 import { isFunction, isBoolean } from '/@/utils/is';
-import { get } from 'lodash-es';
+import { get, cloneDeep } from 'lodash-es';
 
 import { FETCH_SETTING, ROW_KEY, PAGE_SIZE } from '../const';
 
@@ -114,14 +114,16 @@ export function useDataSource(
 
       if (firstItem && lastItem) {
         if (!firstItem[ROW_KEY] || !lastItem[ROW_KEY]) {
-          unref(dataSourceRef).forEach((item) => {
+          const data = cloneDeep(unref(dataSourceRef));
+          data.forEach((item) => {
             if (!item[ROW_KEY]) {
               item[ROW_KEY] = buildUUID();
             }
             if (item.children && item.children.length) {
               setTableKey(item.children);
             }
           });
+          dataSourceRef.value = data;
         }
       }
     }

src/components/Upload/index.ts

@@ -1,2 +1,4 @@
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-export const BasicUpload = createAsyncComponent(() => import('./src/BasicUpload.vue'));
+// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+// export const BasicUpload = createAsyncComponent(() => import('./src/BasicUpload.vue'));
+
+export { default as BasicUpload } from './src/BasicUpload.vue';

src/hooks/component/usePageContext.ts

@@ -0,0 +1,20 @@
+import type { InjectionKey, ComputedRef, Ref } from 'vue';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+import {} from 'vue';
+
+export interface PageContextProps {
+  contentHeight: ComputedRef<number>;
+  pageHeight: Ref<number>;
+  setPageHeight: (height: number) => Promise<void>;
+}
+
+const key: InjectionKey<PageContextProps> = Symbol();
+
+export function createPageContext(context: PageContextProps) {
+  return createContext<PageContextProps>(context, key, { native: true });
+}
+
+export function usePageContext() {
+  return useContext<PageContextProps>(key);
+}

src/hooks/core/useContext.ts

@@ -11,6 +11,7 @@ import {
 export interface CreateContextOptions {
   readonly?: boolean;
   createProvider?: boolean;
+  native?: boolean;
 }
 
 type ShallowUnwrap<T> = {
@@ -22,11 +23,11 @@ export function createContext<T>(
   key: InjectionKey<T> = Symbol(),
   options: CreateContextOptions = {}
 ) {
-  const { readonly = true, createProvider = false } = options;
+  const { readonly = true, createProvider = false, native = false } = options;
 
   const state = reactive(context);
   const provideData = readonly ? defineReadonly(state) : state;
-  !createProvider && provide(key, provideData);
+  !createProvider && provide(key, native ? context : provideData);
 
   const Provider = createProvider
     ? defineComponent({
@@ -42,12 +43,12 @@ export function createContext<T>(
   return { Provider, state };
 }
 
-export const useContext = <T>(
-  key: InjectionKey<T> = Symbol(),
-  defaultValue?: any,
-  readonly = false
-): ShallowUnwrap<T> => {
-  const state = inject(key, defaultValue || {});
+export function useContext<T>(key: InjectionKey<T>, native?: boolean): T;
+export function useContext<T>(key: InjectionKey<T>, defaultValue?: any, native?: boolean): T;
 
-  return readonly ? defineReadonly(state) : state;
-};
+export function useContext<T>(
+  key: InjectionKey<T> = Symbol(),
+  defaultValue?: any
+): ShallowUnwrap<T> {
+  return inject(key, defaultValue || {});
+}

src/layouts/default/content/index.vue

@@ -19,6 +19,7 @@
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
   import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
   import PageLayout from '/@/layouts/page/index';
+  import { useContentViewHeight } from './useContentViewHeight';
   import { Loading } from '/@/components/Loading';
 
   export default defineComponent({
@@ -28,6 +29,8 @@
       const { prefixCls } = useDesign('layout-content');
       const { getOpenPageLoading } = useTransitionSetting();
       const { getLayoutContentMode, getPageLoading } = useRootSetting();
+
+      useContentViewHeight();
       return {
         prefixCls,
         getOpenPageLoading,