refactor(components): 移除废弃的Description组件并改用原生antd组件

移除已废弃的Description组件及其相关类型定义和hook，替换为直接使用antd原生Descriptions组件
更新user-reset-pwd-modal和user-info-modal使用新的实现方式

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

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

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

@@ -1,205 +0,0 @@
-<script lang="tsx">
-import type { CardSize } from 'antdv-next/es/card/Card';
-import type { DescriptionsProps } from 'antdv-next/es/descriptions';
-
-import type { CSSProperties, PropType, Slots } from 'vue';
-
-import type { DescInstance, DescItem, DescriptionProps } from './typing';
-
-import { computed, defineComponent, ref, toRefs, unref, useAttrs } from 'vue';
-
-import { Card, Descriptions } from 'antdv-next';
-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 },
-};
-
-/**
- * @deprecated 使用antd原生组件替代 下个版本将会移除
- */
-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

@@ -1,48 +0,0 @@
-import type { DescriptionsProps } from 'antdv-next/es/descriptions';
-import type { JSX } from 'vue/jsx-runtime';
-
-import type { CSSProperties, VNode } from 'vue';
-
-import type { Recordable } from '@vben/types';
-
-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>, delay?: boolean): void;
-}
-
-export type Register = (descInstance: DescInstance) => void;
-
-/**
- * @description:
- */
-export type UseDescReturnType = [Register, DescInstance];

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

@@ -1,47 +0,0 @@
-import type {
-  DescInstance,
-  DescriptionProps,
-  UseDescReturnType,
-} from './typing';
-
-import { getCurrentInstance, ref, unref } from 'vue';
-
-/**
- * @deprecated 使用antd原生组件替代 下个版本将会移除
- */
-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>,
-      delay = false,
-    ): void => {
-      if (!delay) {
-        unref(desc)?.setDescProps(descProps);
-        return;
-      }
-      // 奇怪的问题 在modal中需要setTimeout才会生效
-      setTimeout(() => unref(desc)?.setDescProps(descProps));
-    },
-  };
-
-  return [register, methods];
-}

apps/web-antd/src/views/system/user/user-info-modal.vue

@@ -1,4 +1,6 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import type { DescriptionsProps } from 'antdv-next';
+
 import type { User } from '#/api/system/user/model';
 
 import { computed, shallowRef } from 'vue';
@@ -12,7 +14,8 @@ import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
 import { findUserInfo } from '#/api/system/user';
-import { renderDict } from '#/utils/render';
+import { DictTag } from '#/components/dict';
+import { getDictOptions } from '#/utils/dict';
 
 dayjs.extend(duration);
 dayjs.extend(relativeTime);
@@ -83,70 +86,74 @@ const diffLoginTime = computed(() => {
   const diffText = dayjs.duration(diffSeconds, 'seconds').humanize();
   return diffText;
 });
+
+const statusOptions = getDictOptions(DictEnum.SYS_NORMAL_DISABLE);
+const items = computed<DescriptionsProps['items']>(() => {
+  if (!currentUser.value) {
+    return [];
+  }
+  const { userId, status } = currentUser.value;
+  return [
+    { label: 'userId', content: userId },
+    {
+      label: '用户状态',
+      content: <DictTag dicts={statusOptions} value={status} />,
+    },
+    { label: '用户信息', content: mixInfo.value },
+    { label: '手机号', content: currentUser.value.phonenumber || '-' },
+    { label: '邮箱', content: currentUser.value.email || '-' },
+    {
+      label: '岗位',
+      content: (
+        <div class="flex flex-wrap gap-0.5">
+          {currentUser.value.postNames.map((item) => (
+            <Tag key={item}>{item}</Tag>
+          ))}
+        </div>
+      ),
+    },
+    {
+      label: '权限',
+      content: (
+        <div class="flex flex-wrap gap-0.5">
+          {currentUser.value.roleNames.map((item) => (
+            <Tag key={item}>{item}</Tag>
+          ))}
+        </div>
+      ),
+    },
+    { label: '创建时间', content: currentUser.value.createTime },
+    { label: '上次登录IP', content: currentUser.value.loginIp || '-' },
+    { label: '上次登录时间', content: currentUser.value.loginDate || '-' },
+    {
+      label: '上次登录时间',
+      content: (
+        <>
+          <span>{currentUser.value.loginDate ?? '-'}</span>
+          <Tag
+            bordered={false}
+            class="ml-2"
+            color="processing"
+            v-if="diffLoginTime"
+          >
+            {diffLoginTime}前
+          </Tag>
+        </>
+      ),
+    },
+    { label: '备注', content: currentUser.value.remark || '-' },
+  ];
+});
 </script>
 
 <template>
   <BasicModal :footer="false" :fullscreen-button="false" title="用户信息">
-    <Descriptions v-if="currentUser" size="small" :column="1" bordered>
-      <Descriptions.Item label="userId">
-        {{ currentUser.userId }}
-      </Descriptions.Item>
-      <Descriptions.Item label="用户状态">
-        <component
-          :is="renderDict(currentUser.status, DictEnum.SYS_NORMAL_DISABLE)"
-        />
-      </Descriptions.Item>
-      <Descriptions.Item label="用户信息">
-        {{ mixInfo }}
-      </Descriptions.Item>
-      <Descriptions.Item label="手机号">
-        {{ currentUser.phonenumber || '-' }}
-      </Descriptions.Item>
-      <Descriptions.Item label="邮箱">
-        {{ currentUser.email || '-' }}
-      </Descriptions.Item>
-      <Descriptions.Item label="岗位">
-        <div
-          v-if="currentUser.postNames.length > 0"
-          class="flex flex-wrap gap-0.5"
-        >
-          <Tag v-for="item in currentUser.postNames" :key="item">
-            {{ item }}
-          </Tag>
-        </div>
-        <span v-else>-</span>
-      </Descriptions.Item>
-      <Descriptions.Item label="权限">
-        <div
-          v-if="currentUser.roleNames.length > 0"
-          class="flex flex-wrap gap-0.5"
-        >
-          <Tag v-for="item in currentUser.roleNames" :key="item">
-            {{ item }}
-          </Tag>
-        </div>
-        <span v-else>-</span>
-      </Descriptions.Item>
-      <Descriptions.Item label="创建时间">
-        {{ currentUser.createTime }}
-      </Descriptions.Item>
-      <Descriptions.Item label="上次登录IP">
-        {{ currentUser.loginIp ?? '-' }}
-      </Descriptions.Item>
-      <Descriptions.Item label="上次登录时间">
-        <span>{{ currentUser.loginDate ?? '-' }}</span>
-        <Tag
-          class="ml-2"
-          v-if="diffLoginTime"
-          :bordered="false"
-          color="processing"
-        >
-          {{ diffLoginTime }}前
-        </Tag>
-      </Descriptions.Item>
-      <Descriptions.Item label="备注">
-        {{ currentUser.remark ?? '-' }}
-      </Descriptions.Item>
-    </Descriptions>
+    <Descriptions
+      v-if="currentUser"
+      size="small"
+      :column="1"
+      bordered
+      :items="items"
+    />
   </BasicModal>
 </template>

apps/web-antd/src/views/system/user/user-reset-pwd-modal.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { DescriptionsProps } from 'antdv-next';
+
 import type { ResetPwdParam, User } from '#/api/system/user/model';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal, z } from '@vben/common-ui';
 
-import { Descriptions, DescriptionsItem } from 'antdv-next';
+import { Descriptions } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
 import { userResetPassword } from '#/api/system/user';
@@ -86,6 +88,17 @@ async function handleClosed() {
   await formApi.resetForm();
   currentUser.value = null;
 }
+
+const items = computed<DescriptionsProps['items']>(() => {
+  if (!currentUser.value) {
+    return [];
+  }
+  return [
+    { label: '用户ID', content: currentUser.value.userId },
+    { label: '用户名', content: currentUser.value.userName },
+    { label: '昵称', content: currentUser.value.nickName },
+  ];
+});
 </script>
 
 <template>
@@ -95,17 +108,7 @@ async function handleClosed() {
     title="重置密码"
   >
     <div class="flex flex-col gap-[12px]">
-      <Descriptions v-if="currentUser" size="small" :column="1" bordered>
-        <DescriptionsItem label="用户ID">
-          {{ currentUser.userId }}
-        </DescriptionsItem>
-        <DescriptionsItem label="用户名">
-          {{ currentUser.userName }}
-        </DescriptionsItem>
-        <DescriptionsItem label="昵称">
-          {{ currentUser.nickName }}
-        </DescriptionsItem>
-      </Descriptions>
+      <Descriptions size="small" :column="1" bordered :items="items" />
       <BasicForm />
     </div>
   </BasicModal>