!83 feat: 新增 antd 模式的代码生成示例

Merge pull request !83 from puhui999/dev-tmp

apps/web-antd/src/components/content-wrap/content-wrap.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue';
+
+import { Card } from 'ant-design-vue';
+
+defineOptions({ name: 'ContentWrap' });
+
+withDefaults(
+  defineProps<{
+    bodyStyle?: CSSProperties;
+    title?: string;
+  }>(),
+  {
+    bodyStyle: () => ({ padding: '10px' }),
+    title: '',
+  },
+);
+</script>
+
+<template>
+  <Card :body-style="bodyStyle" :title="title" class="mb-4">
+    <slot></slot>
+  </Card>
+</template>

apps/web-antd/src/components/content-wrap/index.ts

@@ -0,0 +1 @@
+export { default as ContentWrap } from './content-wrap.vue';

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

@@ -0,0 +1,71 @@
+<script lang="tsx">
+import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
+import type { DescriptionsProps } from 'ant-design-vue';
+import type { PropType } from 'vue';
+
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+
+import { defineComponent } from 'vue';
+
+/** 对 Descriptions 进行二次封装 */
+const Description = defineComponent({
+  name: 'Descriptions',
+  props: {
+    data: {
+      type: Object as PropType<Record<string, any>>,
+      default: () => ({}),
+    },
+    schema: {
+      type: Array as PropType<DescriptionItemSchema[]>,
+      default: () => [],
+    },
+    // Descriptions 原生 props
+    componentProps: {
+      type: Object as PropType<DescriptionsProps>,
+      default: () => ({}),
+    },
+  },
+
+  setup(props: DescriptionsOptions) {
+    /** 过滤掉不需要展示的 */
+    const shouldShowItem = (item: DescriptionItemSchema) => {
+      if (item.hidden === undefined) return true;
+      return typeof item.hidden === 'function' ? !item.hidden(props.data) : !item.hidden;
+    };
+    /** 渲染内容 */
+    const renderContent = (item: DescriptionItemSchema) => {
+      if (item.content) {
+        return typeof item.content === 'function' ? item.content(props.data) : item.content;
+      }
+      return item.field ? props.data?.[item.field] : null;
+    };
+
+    return () => (
+      <Descriptions
+        {...props}
+        bordered={props.componentProps?.bordered}
+        colon={props.componentProps?.colon}
+        column={props.componentProps?.column}
+        extra={props.componentProps?.extra}
+        layout={props.componentProps?.layout}
+        size={props.componentProps?.size}
+        title={props.componentProps?.title}
+      >
+        {props.schema?.filter(shouldShowItem).map((item) => (
+          <DescriptionsItem
+            contentStyle={item.contentStyle}
+            key={item.field || String(item.label)}
+            label={item.label}
+            labelStyle={item.labelStyle}
+            span={item.span}
+          >
+            {renderContent(item)}
+          </DescriptionsItem>
+        ))}
+      </Descriptions>
+    );
+  },
+});
+
+export default Description;
+</script>

apps/web-antd/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-antd/src/components/description/typing.ts

@@ -0,0 +1,18 @@
+import type { DescriptionsProps } from 'ant-design-vue';
+import type { CSSProperties, VNode } from 'vue';
+
+export interface DescriptionItemSchema {
+  label: string | VNode; // 内容的描述
+  field?: string; // 对应 data 中的字段名
+  content?: ((data: any) => string | VNode) | string | VNode; // 自定义需要展示的内容，比如说 dict-tag
+  span?: number; // 包含列的数量
+  labelStyle?: CSSProperties; // 自定义标签样式
+  contentStyle?: CSSProperties; // 自定义内容样式
+  hidden?: ((data: any) => boolean) | boolean; // 是否显示
+}
+
+export interface DescriptionsOptions {
+  data?: Record<string, any>; // 数据
+  schema?: DescriptionItemSchema[]; // 描述项配置
+  componentProps?: DescriptionsProps; // antd Descriptions 组件参数
+}

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

@@ -0,0 +1,70 @@
+import type { DescriptionsOptions } from './typing';
+
+import { defineComponent, h, isReactive, reactive, watch } from 'vue';
+
+import { Description } from './index';
+
+/** 描述列表 api 定义 */
+class DescriptionApi {
+  private state = reactive<Record<string, any>>({});
+
+  constructor(options: DescriptionsOptions) {
+    this.state = { ...options };
+  }
+
+  getState(): DescriptionsOptions {
+    return this.state as DescriptionsOptions;
+  }
+
+  setState(newState: Partial<DescriptionsOptions>) {
+    this.state = { ...this.state, ...newState };
+  }
+}
+
+export type ExtendedDescriptionApi = DescriptionApi;
+
+export function useDescription(options: DescriptionsOptions) {
+  const IS_REACTIVE = isReactive(options);
+  const api = new DescriptionApi(options);
+  // 扩展API
+  const extendedApi: ExtendedDescriptionApi = api as never;
+  const Desc = defineComponent({
+    name: 'UseDescription',
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+      // 合并props和attrs到state
+      api.setState({ ...attrs });
+
+      return () =>
+        h(
+          Description,
+          {
+            ...api.getState(),
+            ...attrs,
+          },
+          slots,
+        );
+    },
+  });
+
+  // 响应式支持
+  if (IS_REACTIVE) {
+    watch(
+      () => options.schema,
+      (newSchema) => {
+        api.setState({ schema: newSchema });
+      },
+      { immediate: true, deep: true },
+    );
+
+    watch(
+      () => options.data,
+      (newData) => {
+        api.setState({ data: newData });
+      },
+      { immediate: true, deep: true },
+    );
+  }
+
+  return [Desc, extendedApi] as const;
+}