init

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

@@ -0,0 +1,169 @@
+<script lang="tsx">
+import type { CSSProperties, PropType, Slots } from 'vue';
+
+import type { DescriptionItemSchema, DescriptionProps } from './typing';
+
+import { computed, defineComponent, ref, unref, useAttrs } from 'vue';
+
+import { get, getNestedValue, isFunction } from '@vben/utils';
+
+import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
+
+const props = {
+  border: { 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<DescriptionItemSchema[]>,
+  },
+  size: {
+    default: 'default',
+    type: String,
+    validator: (v: string) =>
+      ['default', 'middle', 'small', undefined].includes(v),
+  },
+  title: { default: '', type: String },
+  direction: { default: 'horizontal', type: String },
+};
+
+function getSlot(slots: Slots, slot: string, 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;
+  return slotFn({ data });
+}
+
+export default defineComponent({
+  name: 'Description',
+  props,
+  setup(props, { slots }) {
+    const propsRef = ref<null | Partial<DescriptionProps>>(null);
+
+    const prefixCls = 'description';
+    const attrs = useAttrs();
+
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        ...(unref(propsRef) as any),
+      } as DescriptionProps;
+    });
+
+    const getProps = computed(() => {
+      const opt = {
+        ...unref(getMergeProps),
+      };
+      return opt as DescriptionProps;
+    });
+
+    const getDescriptionsProps = computed(() => {
+      return { ...unref(attrs), ...unref(getProps) } as DescriptionProps;
+    });
+
+    // 防止换行
+    function renderLabel({
+      label,
+      labelMinWidth,
+      labelStyle,
+    }: DescriptionItemSchema) {
+      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;
+          }
+
+          function getContent() {
+            const _data = unref(getProps)?.data;
+            if (!_data) {
+              return null;
+            }
+            const getField = field.includes('.')
+              ? (getNestedValue(_data, field) ?? get(_data, field))
+              : get(_data, field);
+            // if (
+            //   getField &&
+            //   !Object.prototype.hasOwnProperty.call(toRefs(_data), field)
+            // ) {
+            //   return isFunction(render) ? render('', _data) : (getField ?? '');
+            // }
+            return isFunction(render)
+              ? render(getField, _data)
+              : (getField ?? '');
+          }
+
+          const width = contentMinWidth;
+          return (
+            <ElDescriptionsItem key={field} span={span}>
+              {{
+                label: () => {
+                  return renderLabel(item);
+                },
+                default: () => {
+                  if (item.slot) {
+                    return getSlot(slots, item.slot, data);
+                  }
+                  if (!contentMinWidth) {
+                    return getContent();
+                  }
+                  const style: CSSProperties = {
+                    minWidth: `${width}px`,
+                  };
+                  return <div style={style}>{getContent()}</div>;
+                },
+              }}
+            </ElDescriptionsItem>
+          );
+        })
+        .filter((item) => !!item);
+    }
+
+    function renderDesc() {
+      const extraSlot = getSlot(slots, 'extra');
+      const slotsObj: any = {
+        default: () => renderItem(),
+      };
+      if (extraSlot) {
+        slotsObj.extra = () => extraSlot;
+      }
+      return (
+        <ElDescriptions
+          class={`${prefixCls}`}
+          title={unref(getMergeProps).title}
+          {...(unref(getDescriptionsProps) as any)}
+        >
+          {slotsObj}
+        </ElDescriptions>
+      );
+    }
+
+    return () => renderDesc();
+  },
+});
+</script>

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

@@ -0,0 +1,3 @@
+export { default as Description } from './description.vue';
+export * from './typing';
+export { useDescription } from './use-description';

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

@@ -0,0 +1,30 @@
+import type { DescriptionProps as ElDescriptionProps } from 'element-plus';
+import type { JSX } from 'vue/jsx-runtime';
+
+import type { CSSProperties, VNode } from 'vue';
+
+import type { Recordable } from '@vben/types';
+
+export interface DescriptionItemSchema {
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  labelStyle?: CSSProperties; // 自定义标签样式
+  field: string; // 对应 data 中的字段名
+  label: JSX.Element | string | VNode; // 内容的描述
+  span?: number; // 包含列的数量
+  show?: (...arg: any) => boolean; // 是否显示
+  slot?: string; // 插槽名称
+  render?: (
+    val: any,
+    data?: Recordable<any>,
+  ) => Element | JSX.Element | number | string | undefined | VNode; // 自定义需要展示的内容
+}
+
+export interface DescriptionProps extends ElDescriptionProps {
+  schema: DescriptionItemSchema[]; // 描述项配置
+  data: Recordable<any>; // 数据
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>): void;
+}

apps/web-ele/src/components/description/use-description.ts

@@ -0,0 +1,31 @@
+import type { Component } from 'vue';
+
+import type { DescInstance, DescriptionProps } from './typing';
+
+import { h, reactive } from 'vue';
+
+import Description from './description.vue';
+
+export function useDescription(options?: Partial<DescriptionProps>) {
+  const propsState = reactive<Partial<DescriptionProps>>(options || {});
+
+  const api: DescInstance = {
+    setDescProps: (descProps: Partial<DescriptionProps>): void => {
+      Object.assign(propsState, descProps);
+    },
+  };
+
+  // 创建一个包装组件，将 propsState 合并到 props 中
+  const DescriptionWrapper: Component = {
+    name: 'UseDescription',
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+      return () => {
+        // @ts-ignore - 避免类型实例化过深
+        return h(Description, { ...propsState, ...attrs }, slots);
+      };
+    },
+  };
+
+  return [DescriptionWrapper, api] as const;
+}