feat: 新增表格视频预览

mock/role/index.ts

@@ -151,6 +151,14 @@ const adminList = [
             meta: {
               title: 'router.PicturePreview'
             }
+          },
+          {
+            path: 'table-video-preview',
+            component: 'views/Components/Table/TableVideoPreview',
+            name: 'TableVideoPreview',
+            meta: {
+              title: 'router.tableVideoPreview'
+            }
           }
           // {
           //   path: 'ref-table',
@@ -650,6 +658,7 @@ const testList: string[] = [
   '/components/table/use-table',
   '/components/table/tree-table',
   '/components/table/table-image-preview',
+  '/components/table/table-video-preview',
   '/components/table/ref-table',
   '/components/editor-demo',
   '/components/editor-demo/editor',

mock/table/index.ts

@@ -47,7 +47,9 @@ for (let i = 0; i < count; i++) {
       importance: '@integer(1, 3)',
       display_time: '@datetime',
       pageviews: '@integer(100, 500)',
-      image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)')
+      image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)'),
+      video_uri:
+        '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4'
     })
   )
 }

src/components/Table/src/Table.vue

@@ -15,6 +15,8 @@ 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 { VideoPlayer } from '@/components/VideoPlayer'
 
 export default defineComponent({
   name: 'Table',
@@ -359,14 +361,18 @@ export default defineComponent({
     const renderPreview = (url: string) => {
       return (
         <div class="flex items-center">
-          <ElImage
+          {isImgPath(url) ? (
-            src={url}
+            <ElImage
-            fit="cover"
+              src={url}
-            class="w-[100%] h-100px"
+              fit="cover"
-            lazy
+              class="w-[100%]"
-            preview-src-list={[url]}
+              lazy
-            preview-teleported
+              preview-src-list={[url]}
-          />
+              preview-teleported
+            />
+          ) : (
+            <VideoPlayer url={url} class="w-full h-full" />
+          )}
         </div>
       )
     }

src/locales/en.ts

@@ -179,7 +179,9 @@ export default {
     request: 'Request',
     waterfall: 'Waterfall',
     imageCropping: 'Image cropping',
-    videoPlayer: 'Video player'
+    videoPlayer: 'Video player',
+    // 表格视频预览
+    tableVideoPreview: 'Table video preview'
   },
   permission: {
     hasPermission: 'Please set the operation permission value'
@@ -454,7 +456,8 @@ export default {
     fixedHeaderOrAuto: 'Fixed header or auto',
     getSelections: 'Get selections',
     preview: 'Preview',
-    showOrHiddenSortable: 'Show or hidden sortable'
+    showOrHiddenSortable: 'Show or hidden sortable',
+    videoPreview: 'Video preview'
   },
   richText: {
     richText: 'Rich text',

src/locales/zh-CN.ts

@@ -177,7 +177,8 @@ export default {
     request: '请求',
     waterfall: '瀑布流',
     imageCropping: '图片裁剪',
-    videoPlayer: '视频播放器'
+    videoPlayer: '视频播放器',
+    tableVideoPreview: '表格视频预览'
   },
   permission: {
     hasPermission: '请设置操作权限值'
@@ -447,7 +448,8 @@ export default {
     fixedHeaderOrAuto: '固定头部/自动',
     getSelections: '获取多选数据',
     preview: '封面',
-    showOrHiddenSortable: '显示/隐藏排序'
+    showOrHiddenSortable: '显示/隐藏排序',
+    videoPreview: '视频预览'
   },
   richText: {
     richText: '富文本',

src/router/index.ts

@@ -200,6 +200,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
             meta: {
               title: t('router.PicturePreview')
             }
+          },
+          {
+            path: 'table-video-preview',
+            component: () => import('@/views/Components/Table/TableVideoPreview.vue'),
+            name: 'TableVideoPreview',
+            meta: {
+              title: t('router.tableVideoPreview')
+            }
           }
         ]
       },

src/views/Components/Table/TableVideoPreview.vue

@@ -0,0 +1,72 @@
+<script setup lang="tsx">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Table, TableColumn } from '@/components/Table'
+import { getTableListApi } from '@/api/table'
+import { TableData } from '@/api/table/types'
+import { ref } from 'vue'
+
+interface Params {
+  pageIndex?: number
+  pageSize?: number
+}
+
+const { t } = useI18n()
+
+const columns: TableColumn[] = [
+  {
+    field: 'title',
+    label: t('tableDemo.title')
+  },
+  {
+    field: 'video_uri',
+    label: t('tableDemo.videoPreview'),
+    width: 400
+  },
+  {
+    field: 'author',
+    label: t('tableDemo.author')
+  },
+  {
+    field: 'display_time',
+    label: t('tableDemo.displayTime')
+  },
+  {
+    field: 'pageviews',
+    label: t('tableDemo.pageviews')
+  }
+]
+
+const loading = ref(true)
+
+let tableDataList = ref<TableData[]>([])
+
+const getTableList = async (params?: Params) => {
+  const res = await getTableListApi(
+    params || {
+      pageIndex: 1,
+      pageSize: 10
+    }
+  )
+    .catch(() => {})
+    .finally(() => {
+      loading.value = false
+    })
+  if (res) {
+    tableDataList.value = res.data.list
+  }
+}
+
+getTableList()
+</script>
+
+<template>
+  <ContentWrap :title="t('router.PicturePreview')">
+    <Table
+      :columns="columns"
+      :data="tableDataList"
+      :loading="loading"
+      :preview="['image_uri', 'video_uri']"
+    />
+  </ContentWrap>
+</template>