feat: description组件 & 重构缓存监控

apps/web-antd/src/components/description/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from '#/utils';
+
+import description from './src/description.vue';
+
+export * from './src/typing';
+export { useDescription } from './src/useDescription';
+export const Description = withInstall(description);

apps/web-antd/src/components/description/src/description.vue

@@ -0,0 +1,210 @@
+<script lang="tsx">
+import type { CardSize } from 'ant-design-vue/es/card/Card';
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
+
+import type { DescInstance, DescItem, DescriptionProps } from './typing';
+
+import {
+  computed,
+  type CSSProperties,
+  defineComponent,
+  type PropType,
+  ref,
+  type Slots,
+  toRefs,
+  unref,
+  useAttrs,
+} from 'vue';
+
+import { Card, Descriptions } from 'ant-design-vue';
+import { get, isFunction } from 'lodash-es';
+
+const props = {
+  bordered: { default: true, type: Boolean },
+  column: {
+    default: () => {
+      return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
+    },
+    type: [Number, Object],
+  },
+  data: { type: Object },
+  schema: {
+    default: () => [],
+    type: Array as PropType<DescItem[]>,
+  },
+  size: {
+    default: 'small',
+    type: String,
+    validator: (v: string) =>
+      ['default', 'middle', 'small', undefined].includes(v),
+  },
+  title: { default: '', type: String },
+  useCollapse: { default: true, type: Boolean },
+};
+
+export default defineComponent({
+  emits: ['register'],
+  // eslint-disable-next-line vue/order-in-components
+  name: 'Description',
+  // eslint-disable-next-line vue/order-in-components
+  props,
+  setup(props, { emit, slots }) {
+    const propsRef = ref<null | Partial<DescriptionProps>>(null);
+
+    const prefixCls = 'description';
+    const attrs = useAttrs();
+
+    // Custom title component: get title
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        ...(unref(propsRef) as any),
+      } as DescriptionProps;
+    });
+
+    const getProps = computed(() => {
+      const opt = {
+        ...unref(getMergeProps),
+        title: undefined,
+      };
+      return opt as DescriptionProps;
+    });
+
+    /**
+     * @description: Whether to setting title
+     */
+    const useWrapper = computed(() => !!unref(getMergeProps).title);
+
+    const getDescriptionsProps = computed(() => {
+      return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;
+    });
+
+    /**
+     * @description:设置desc
+     */
+    function setDescProps(descProps: Partial<DescriptionProps>): void {
+      // Keep the last setDrawerProps
+      propsRef.value = {
+        ...(unref(propsRef) as Record<string, any>),
+        ...descProps,
+      } as Record<string, any>;
+    }
+
+    // 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 { data, schema } = unref(getProps);
+      return unref(schema)
+        .map((item) => {
+          const { contentMinWidth, field, render, show, span } = 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);
+            // eslint-disable-next-line no-prototype-builtins
+            if (getField && !toRefs(_data).hasOwnProperty(field)) {
+              return isFunction(render) ? render!('', _data) : '';
+            }
+            return isFunction(render)
+              ? render!(getField, _data)
+              : (getField ?? '');
+          };
+
+          const width = contentMinWidth;
+          return (
+            <Descriptions.Item
+              key={field}
+              label={renderLabel(item)}
+              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);
+
+      function getSlot(slots: Slots, slot = 'default', data?: any) {
+        if (!slots || !Reflect.has(slots, slot)) {
+          return null;
+        }
+        if (!isFunction(slots[slot])) {
+          console.error(`${slot} is not a function!`);
+          return null;
+        }
+        const slotFn = slots[slot];
+        if (!slotFn) return null;
+        const params = { ...data };
+        return slotFn(params);
+      }
+
+      return (
+        <Card size={props.size as CardSize} title={title}>
+          {{
+            default: () => content,
+            extra: () => getSlot(slots, 'extra'),
+          }}
+        </Card>
+      );
+    };
+
+    const methods: DescInstance = {
+      setDescProps,
+    };
+
+    emit('register', methods);
+    return () => (unref(useWrapper) ? renderContainer() : renderDesc());
+  },
+});
+</script>

apps/web-antd/src/components/description/src/typing.ts

@@ -0,0 +1,47 @@
+import type { Recordable } from '@vben/types';
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
+import type { JSX } from 'vue/jsx-runtime';
+
+import type { CSSProperties, VNode } from 'vue';
+
+export interface DescItem {
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  labelStyle?: CSSProperties;
+  field: string;
+  label: JSX.Element | string | VNode;
+  // Merge column
+  span?: number;
+  show?: (...arg: any) => boolean;
+  // render
+  render?: (
+    val: any,
+    data: Recordable<any>,
+  ) => Element | JSX.Element | number | string | undefined | VNode;
+}
+
+export interface DescriptionProps extends DescriptionsProps {
+  // Whether to include the collapse component
+  useCollapse?: boolean;
+  /**
+   * item configuration
+   * @type DescItem
+   */
+  schema: DescItem[];
+  /**
+   * 数据
+   * @type object
+   */
+  data: Recordable<any>;
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>): void;
+}
+
+export type Register = (descInstance: DescInstance) => void;
+
+/**
+ * @description:
+ */
+export type UseDescReturnType = [Register, DescInstance];

apps/web-antd/src/components/description/src/useDescription.ts

@@ -0,0 +1,36 @@
+import type {
+  DescInstance,
+  DescriptionProps,
+  UseDescReturnType,
+} from './typing';
+
+import { getCurrentInstance, ref, unref } from 'vue';
+
+export function useDescription(
+  props?: Partial<DescriptionProps>,
+): UseDescReturnType {
+  if (!getCurrentInstance()) {
+    throw new Error(
+      'useDescription() can only be used inside setup() or functional components!',
+    );
+  }
+  const desc = ref<DescInstance | null>(null);
+  const loaded = ref(false);
+
+  function register(instance: DescInstance) {
+    if (unref(loaded) && import.meta.env.PROD) {
+      return;
+    }
+    desc.value = instance;
+    props && instance.setDescProps(props);
+    loaded.value = true;
+  }
+
+  const methods: DescInstance = {
+    setDescProps: (descProps: Partial<DescriptionProps>): void => {
+      unref(desc)?.setDescProps(descProps);
+    },
+  };
+
+  return [register, methods];
+}