perf: 表格组件预览字段拆分

mock/table/index.mock.ts

@@ -66,6 +66,7 @@ for (let i = 0; i < count; i++) {
       importance: '@integer(1, 3)',
       display_time: '@datetime',
       pageviews: '@integer(300, 5000)',
+      image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)'),
       children: [
         {
           id: toAnyString(),
@@ -76,6 +77,7 @@ for (let i = 0; i < count; i++) {
           importance: '@integer(1, 3)',
           display_time: '@datetime',
           pageviews: '@integer(300, 5000)',
+          image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)'),
           children: [
             {
               id: toAnyString(),
@@ -85,7 +87,8 @@ for (let i = 0; i < count; i++) {
               content: baseContent,
               importance: '@integer(1, 3)',
               display_time: '@datetime',
-              pageviews: '@integer(300, 5000)'
+              pageviews: '@integer(300, 5000)',
+              image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)')
             },
             {
               id: toAnyString(),
@@ -95,7 +98,8 @@ for (let i = 0; i < count; i++) {
               content: baseContent,
               importance: '@integer(1, 3)',
               display_time: '@datetime',
-              pageviews: '@integer(300, 5000)'
+              pageviews: '@integer(300, 5000)',
+              image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)')
             }
           ]
         },
@@ -107,7 +111,8 @@ for (let i = 0; i < count; i++) {
           content: baseContent,
           importance: '@integer(1, 3)',
           display_time: '@datetime',
-          pageviews: '@integer(300, 5000)'
+          pageviews: '@integer(300, 5000)',
+          image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)')
         },
         {
           id: toAnyString(),
@@ -117,7 +122,8 @@ for (let i = 0; i < count; i++) {
           content: baseContent,
           importance: '@integer(1, 3)',
           display_time: '@datetime',
-          pageviews: '@integer(300, 5000)'
+          pageviews: '@integer(300, 5000)',
+          image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)')
         },
         {
           id: toAnyString(),
@@ -127,7 +133,8 @@ for (let i = 0; i < count; i++) {
           content: baseContent,
           importance: '@integer(1, 3)',
           display_time: '@datetime',
-          pageviews: '@integer(300, 5000)'
+          pageviews: '@integer(300, 5000)',
+          image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)')
         }
       ]
       // image_uri

src/components/Table/src/Table.vue

@@ -17,7 +17,6 @@ import { set, get } from 'lodash-es'
 import { CSSProperties } from 'vue'
 import { getSlot } from '@/utils/tsxHelper'
 import TableActions from './components/TableActions.vue'
-import { isImgPath } from '@/utils/is'
 import { createVideoViewer } from '@/components/VideoPlayer'
 import { Icon } from '@/components/Icon'
 import { BaseButton } from '@/components/Button'
@@ -59,8 +58,13 @@ export default defineComponent({
       type: Array as PropType<Recordable[]>,
       default: () => []
     },
-    // 是否自动预览
+    // 图片自动预览字段数组
-    preview: {
+    imagePreview: {
+      type: Array as PropType<string[]>,
+      default: () => []
+    },
+    // 视频自动预览字段数组
+    videoPreview: {
       type: Array as PropType<string[]>,
       default: () => []
     },
@@ -339,7 +343,8 @@ export default defineComponent({
     })
 
     const renderTreeTableColumn = (columnsChildren: TableColumn[]) => {
-      const { align, headerAlign, showOverflowTooltip, preview } = unref(getProps)
+      const { align, headerAlign, showOverflowTooltip, imagePreview, videoPreview } =
+        unref(getProps)
       return columnsChildren.map((v) => {
         if (v.hidden) return null
         const props = { ...v } as any
@@ -350,10 +355,10 @@ export default defineComponent({
         const slots = {
           default: (...args: any[]) => {
             const data = args[0]
-            let isImageUrl = false
+            let isPreview = false
-            if (preview.length) {
+            isPreview =
-              isImageUrl = preview.some((item) => (item as string) === v.field)
+              imagePreview.some((item) => (item as string) === v.field) ||
-            }
+              videoPreview.some((item) => (item as string) === v.field)
 
             return children && children.length
               ? renderTreeTableColumn(children)
@@ -361,8 +366,8 @@ export default defineComponent({
                 ? props.slots.default(...args)
                 : v?.formatter
                   ? v?.formatter?.(data.row, data.column, get(data.row, v.field), data.$index)
-                  : isImageUrl
+                  : isPreview
-                    ? renderPreview(get(data.row, v.field))
+                    ? renderPreview(get(data.row, v.field), v.field)
                     : get(data.row, v.field)
           }
         }
@@ -384,10 +389,11 @@ export default defineComponent({
       })
     }
 
-    const renderPreview = (url: string) => {
+    const renderPreview = (url: string, field: string) => {
+      const { imagePreview, videoPreview } = unref(getProps)
       return (
         <div class="flex items-center">
-          {isImgPath(url) ? (
+          {imagePreview.includes(field) ? (
             <ElImage
               src={url}
               fit="cover"
@@ -396,7 +402,7 @@ export default defineComponent({
               preview-src-list={[url]}
               preview-teleported
             />
-          ) : (
+          ) : videoPreview.includes(field) ? (
             <BaseButton
               type="primary"
               icon={<Icon icon="ep:video-play" />}
@@ -408,7 +414,7 @@ export default defineComponent({
             >
               预览
             </BaseButton>
-          )}
+          ) : null}
         </div>
       )
     }
@@ -423,7 +429,8 @@ export default defineComponent({
         headerAlign,
         showOverflowTooltip,
         reserveSelection,
-        preview
+        imagePreview,
+        videoPreview
       } = unref(getProps)
 
       return (columnsChildren || columns).map((v) => {
@@ -463,10 +470,10 @@ export default defineComponent({
             default: (...args: any[]) => {
               const data = args[0]
 
-              let isImageUrl = false
+              let isPreview = false
-              if (preview.length) {
+              isPreview =
-                isImageUrl = preview.some((item) => (item as string) === v.field)
+                imagePreview.some((item) => (item as string) === v.field) ||
-              }
+                videoPreview.some((item) => (item as string) === v.field)
 
               return children && children.length
                 ? renderTreeTableColumn(children)
@@ -474,8 +481,8 @@ export default defineComponent({
                   ? props.slots.default(...args)
                   : v?.formatter
                     ? v?.formatter?.(data.row, data.column, get(data.row, v.field), data.$index)
-                    : isImageUrl
+                    : isPreview
-                      ? renderPreview(get(data.row, v.field))
+                      ? renderPreview(get(data.row, v.field), v.field)
                       : get(data.row, v.field)
             }
           }

src/utils/is.ts

@@ -106,9 +106,6 @@ export const isDark = (): boolean => {
 
 // 是否是图片链接
 export const isImgPath = (path: string): boolean => {
-  if (path.includes('picsum.photos') || path.includes('loremflickr.com')) {
-    return true
-  }
   return /(https?:\/\/|data:image\/).*?\.(png|jpg|jpeg|gif|svg|webp|ico)/gi.test(path)
 }
 

src/views/Components/Table/TableImagePreview.vue

@@ -77,6 +77,11 @@ getTableList()
 
 <template>
   <ContentWrap :title="t('router.PicturePreview')">
-    <Table :columns="columns" :data="tableDataList" :loading="loading" :preview="['image_uri']" />
+    <Table
+      :columns="columns"
+      :data="tableDataList"
+      :loading="loading"
+      :image-preview="['image_uri']"
+    />
   </ContentWrap>
 </template>

src/views/Components/Table/TableVideoPreview.vue

@@ -65,7 +65,7 @@ getTableList()
       :columns="columns"
       :data="tableDataList"
       :loading="loading"
-      :preview="['image_uri', 'video_uri']"
+      :video-preview="['image_uri', 'video_uri']"
     />
   </ContentWrap>
 </template>