feat: ele use desc comp

apps/web-ele/src/views/system/social/user/data.ts

@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemSocialUserApi } from '#/api/system/social/user';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -8,6 +7,8 @@ import { h } from 'vue';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { ElImage } from 'element-plus';
+
 import { DictTag } from '#/components/dict-tag';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -111,10 +112,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'type',
       label: '社交平台',
-      content: (data: SystemSocialUserApi.SocialUser) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SOCIAL_TYPE,
-          value: data?.type,
+          value: val,
         });
       },
     },
@@ -125,16 +126,13 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'avatar',
       label: '用户头像',
-      // TODO @芋艿：使用 antd 的 Image 组件
-      content: (data: SystemSocialUserApi.SocialUser) => {
-        if (data?.avatar) {
-          return h('img', {
-            src: data.avatar,
-            style: 'width: 30px; height: 30px; cursor: pointer;',
-            onClick: () => {
-              // 可以添加图片预览功能
-              window.open(data.avatar, '_blank');
-            },
+      render: (val) => {
+        if (val) {
+          return h(ElImage, {
+            src: val,
+            previewSrcList: [val],
+            class: 'w-10 h-10 cursor-pointer',
+            previewTeleported: true,
           });
         }
         return '无';