fix(description): ensure that props respond

README.md

@@ -148,15 +148,15 @@ Support modern browsers, not IE
 
 ## Maintainer
 
-[@Vben](https://github.com/anncwb)。
+[@Vben](https://github.com/anncwb)
 
 ## Donate
 
 If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!
 
 ![donate](https://anncwb.github.io/anncwb/images/sponsor.png)
 
-[Paypal Me](https://www.paypal.com/paypalme/cvvben)
+<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 
 ## Discord
 

README.zh-CN.md

@@ -156,7 +156,7 @@ yarn build
 
 ![donate](https://anncwb.github.io/anncwb/images/sponsor.png)
 
-[Paypal Me](https://www.paypal.com/paypalme/cvvben)
+<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 
 ## 交流
 

src/components/Description/index.ts

@@ -1,7 +1,7 @@
 // import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 // export const Description = createAsyncComponent(() => import('./src/index'));
 
-import Description from './src/index';
+import Description from './src/index.vue';
 
 export { Description };
 export * from './src/types';

src/components/Description/src/index.vue

@@ -0,0 +1,164 @@
+<script lang="tsx">
+  import type { DescOptions, DescInstance, DescItem } from './types';
+  import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
+  import type { CSSProperties } from 'vue';
+  import type { CollapseContainerOptions } from '/@/components/Container/index';
+
+  import { defineComponent, computed, ref, unref } from 'vue';
+  import { get } from 'lodash-es';
+  import { Descriptions } from 'ant-design-vue';
+  import { CollapseContainer } from '/@/components/Container/index';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import { isFunction } from '/@/utils/is';
+  import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { cloneDeep } from 'lodash-es';
+  import { deepMerge } from '/@/utils';
+
+  import descProps from './props';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+
+  export default defineComponent({
+    name: 'Description',
+    props: descProps,
+    emits: ['register'],
+    setup(props, { slots, emit }) {
+      const propsRef = ref<Partial<DescOptions> | null>(null);
+
+      const { prefixCls } = useDesign('description');
+      const attrs = useAttrs();
+
+      // Custom title component: get title
+      const getMergeProps = computed(() => {
+        return {
+          ...props,
+          ...(unref(propsRef) as Recordable),
+        } as DescOptions;
+      });
+
+      const getProps = computed(() => {
+        const opt = {
+          ...unref(getMergeProps),
+          title: undefined,
+        };
+        return opt as DescOptions;
+      });
+
+      /**
+       * @description: Whether to setting title
+       */
+      const useWrapper = computed(() => !!unref(getMergeProps).title);
+
+      /**
+       * @description: Get configuration Collapse
+       */
+      const getCollapseOptions = computed(
+        (): CollapseContainerOptions => {
+          return {
+            // Cannot be expanded by default
+            canExpand: false,
+            ...unref(getProps).collapseOptions,
+          };
+        }
+      );
+
+      const getDescriptionsProps = computed(() => {
+        return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;
+      });
+
+      /**
+       * @description:设置desc
+       */
+      function setDescProps(descProps: Partial<DescOptions>): void {
+        // Keep the last setDrawerProps
+        propsRef.value = { ...(unref(propsRef) as Recordable), ...descProps } as Recordable;
+      }
+
+      // Prevent line breaks
+      function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) {
+        if (!labelStyle && !labelMinWidth) {
+          return label;
+        }
+
+        const labelStyles: CSSProperties = {
+          ...labelStyle,
+
+          minWidth: `${labelMinWidth}px `,
+        };
+        return <div style={labelStyles}>{label}</div>;
+      }
+
+      function renderItem() {
+        const { schema, data } = unref(getProps);
+        return unref(schema)
+          .map((item) => {
+            const { render, field, span, show, contentMinWidth } = item;
+
+            if (show && isFunction(show) && !show(data)) {
+              return null;
+            }
+
+            const getContent = () => {
+              const _data = unref(getProps)?.data;
+              if (!_data) return null;
+              const getField = get(_data, field);
+              return isFunction(render) ? render(getField, _data) : getField ?? '';
+            };
+
+            const width = contentMinWidth;
+            return (
+              <Descriptions.Item label={renderLabel(item)} key={field} span={span}>
+                {() => {
+                  if (!contentMinWidth) {
+                    return getContent();
+                  }
+                  const style: CSSProperties = {
+                    minWidth: `${width}px`,
+                  };
+                  return <div style={style}>{getContent()}</div>;
+                }}
+              </Descriptions.Item>
+            );
+          })
+          .filter((item) => !!item);
+      }
+
+      const renderDesc = () => {
+        return (
+          <Descriptions class={`${prefixCls}`} {...(unref(getDescriptionsProps) as any)}>
+            {renderItem()}
+          </Descriptions>
+        );
+      };
+
+      const renderContainer = () => {
+        const content = props.useCollapse ? renderDesc() : <div>{renderDesc()}</div>;
+        // Reduce the dom level
+
+        if (!props.useCollapse) {
+          return content;
+        }
+
+        const { canExpand, helpMessage } = unref(getCollapseOptions);
+        const { title } = unref(getMergeProps);
+
+        return (
+          <CollapseContainer title={title} canExpan={canExpand} helpMessage={helpMessage}>
+            {{
+              default: () => content,
+              action: () => getSlot(slots, 'action'),
+            }}
+          </CollapseContainer>
+        );
+      };
+
+      const methods: DescInstance = {
+        setDescProps,
+      };
+
+      emit('register', methods);
+      return () => (unref(useWrapper) ? renderContainer() : renderDesc());
+    },
+  });
+</script>

src/components/Description/src/props.ts

@@ -1,24 +1,18 @@
 import type { PropType } from 'vue';
 import type { CollapseContainerOptions } from '/@/components/Container';
 import type { DescItem } from './types';
-
 import { propTypes } from '/@/utils/propTypes';
 export default {
   useCollapse: propTypes.bool.def(true),
-
   title: propTypes.string.def(''),
-
   size: propTypes.oneOf(['small', 'default', 'middle', undefined]).def('small'),
-
   bordered: propTypes.bool.def(true),
-
   column: {
     type: [Number, Object] as PropType<number | Recordable>,
     default: () => {
       return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
     },
   },
-
   collapseOptions: {
     type: Object as PropType<CollapseContainerOptions>,
     default: null,

src/components/Page/src/PageFooter.vue

@@ -17,6 +17,7 @@
 
   export default defineComponent({
     name: 'PageFooter',
+    inheritAttrs: false,
     setup() {
       const { prefixCls } = useDesign('page-footer');
       const { getCalcContentWidth } = useMenuSetting();

src/components/Page/src/PageWrapper.vue

@@ -37,6 +37,7 @@
   import { PageHeader } from 'ant-design-vue';
   export default defineComponent({
     name: 'PageWrapper',
+    inheritAttrs: false,
     components: { PageFooter, PageHeader },
     props: {
       dense: propTypes.bool,