Fix/video damage pic new version

common/changes/@visactor/vtable/fix-video_damage_pic_2026-02-06-10-37.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: video load fail damage icon\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}

common/changes/@visactor/vtable/fix-video_damage_pic_2026-02-07-02-46.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: image url not pass should call failCallback\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}

common/changes/@visactor/vtable/fix-video_damage_pic_2026-02-09-08-09.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: add image_damage_pic and video_damage_pic type icons register & fix video damage icon ratio\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}

docs/assets/api/en/icon/base-icon.md

@@ -65,6 +65,8 @@ enum IconFuncTypeEnum {
   dropDownState = 'dropDownState',
   play = 'play',
   damagePic = 'damagePic',
+  imageDamagePic = 'imageDamagePic',
+  videoDamagePic = 'videoDamagePic',
   expand = 'expand',
   collapse = 'collapse',
   drillDown = 'drillDown',

docs/assets/api/zh/icon/base-icon.md

@@ -65,6 +65,8 @@ enum IconFuncTypeEnum {
   dropDownState = 'dropDownState',
   play = 'play',
   damagePic = 'damagePic',
+  imageDamagePic = 'imageDamagePic',
+  videoDamagePic = 'videoDamagePic',
   expand = 'expand',
   collapse = 'collapse',
   drillDown = 'drillDown',

docs/assets/guide/en/custom_define/custom_icon.md

@@ -211,6 +211,8 @@ The list of resettable internal icons is as follows:
 | Fixed Columns                  | VTable. TYPES. IconFuncTypeEnum.frozen    | "frozen"         | Fixed Columns Function Icon, Fixed Status                           |
 | Fixed Columns                  | VTable. TYPES. IconFuncTypeEnum.frozen    | "frozenCurrent"  | Fixed Columns Function Icon, Frozen When Columns                    |
 | Image or video address invalid | VTable. TYPES. IconFuncTypeEnum.damagePic | "damage_pic"     | Multimedia resource parsing failed                                  |
+| Image image type parsing failed | VTable. TYPES. IconFuncTypeEnum.imageDamagePic | "image_damage_pic" | Image resource parsing failed |
+| Video video type parsing failed | VTable. TYPES. IconFuncTypeEnum.videoDamagePic | "video_damage_pic" | Video resource parsing failed |
 | Tree Structure Folding         | VTable. TYPES. IconFuncTypeEnum.collapse  | "collapse"       | Tree Structure Folded State                                         |
 | Tree Structure Expand          | VTable. TYPES. IconFuncTypeEnum.expand    | "expand"         | Tree Structure Expand State                                         |
 | Tree Structure Folding         | VTable. TYPES. IconFuncTypeEnum.collapse  | "collapse"       | Tree Structure Folded State                                         |

docs/assets/guide/zh/custom_define/custom_icon.md

@@ -211,6 +211,8 @@ VTable.register.icon('frozenCurrent', {
 | 固定列               | VTable.TYPES.IconFuncTypeEnum.frozen      | "frozen"         | 固定列功能图标 已固定状态                 |
 | 固定列               | VTable.TYPES.IconFuncTypeEnum.frozen      | "frozenCurrent"  | 固定列功能图标 被冻结当列                 |
 | 图片 or 视频地址失效 | VTable.TYPES.IconFuncTypeEnum.damagePic   | "damage_pic"     | 多媒体资源解析失败                        |
+|图片image类型解析失败 |VTable.TYPES.IconFuncTypeEnum.imageDamagePic   | "image_damage_pic"     | 图片资源解析失败                        |
+|视频video类型解析失败 |VTable.TYPES.IconFuncTypeEnum.videoDamagePic   | "video_damage_pic"     | 视频资源解析失败                        |
 | 树形结构折叠         | VTable.TYPES.IconFuncTypeEnum.collapse    | "collapse"       | 树形结构折叠状态                          |
 | 树形结构展开         | VTable.TYPES.IconFuncTypeEnum.expand      | "expand"         | 树形结构展开状态                          |
 | 树形结构折叠         | VTable.TYPES.IconFuncTypeEnum.collapse    | "collapse"       | 树形结构折叠状态                          |

packages/openinula-vtable/package.json

@@ -96,4 +96,4 @@
   "peerDependencies": {
     "openinula": "~0.1.2-SNAPSHOT"
   }
-}
+}

packages/react-vtable/package.json

@@ -104,4 +104,4 @@
     "@arco-design/web-react": "2.60.2",
     "@types/react-reconciler": "0.28.8"
   }
-}
+}

packages/vtable-calendar/package.json

@@ -87,4 +87,4 @@
     "@types/react-is": "^17.0.3",
     "rollup-plugin-node-resolve": "5.2.0"
   }
-}
+}

packages/vtable-editors/package.json

@@ -68,4 +68,4 @@
     "name": "VisActor",
     "url": "https://www.visactor.io/"
   }
-}
+}

packages/vtable-export/package.json

@@ -90,4 +90,4 @@
     "@types/react-is": "^17.0.3",
     "rollup-plugin-node-resolve": "5.2.0"
   }
-}
+}

packages/vtable-gantt/package.json

@@ -123,4 +123,4 @@
     "url": "https://github.com/VisActor/VTable.git",
     "directory": "packages/vtable-gantt"
   }
-}
+}

packages/vtable-plugins/package.json

@@ -108,4 +108,4 @@
     "rollup-plugin-node-resolve": "5.2.0",
     "@types/lodash": "4.14.182"
   }
-}
+}

packages/vtable-search/package.json

@@ -86,4 +86,4 @@
     "@types/react-is": "^17.0.3",
     "rollup-plugin-node-resolve": "5.2.0"
   }
-}
+}

packages/vtable/examples/icon/image-loadFail.ts

@@ -0,0 +1,126 @@
+/* eslint-disable max-len */
+import * as VTable from '../../src';
+const ListTable = VTable.ListTable;
+const CONTAINER_ID = 'vTable';
+import { bindDebugTool } from '../../src/scenegraph/debug-tool';
+
+export function createTable() {
+  // register icon
+  VTable.register.clearAll?.();
+  VTable.register.icon('image_damage_pic', {
+    type: 'svg',
+    svg: `<svg t="1669210412838" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5700" width="200" height="200"><path d="M420.559974 72.98601l-54.855 0 0 774.336c-52.455014-69.163008-121.619046-123.762995-201.120051-157.052006l0 61.968c85.838029 41.401958 156.537958 111.337984 201.120051 198.221005l0 0.208 54.855 0 0-13.047c0.005018-0.00297 0.010035-0.005018 0.01495-0.007987-0.005018-0.010035-0.010035-0.019968-0.01495-0.030003L420.559974 72.986zM658.264986 73.385984l0-0.4L603.41 72.985984l0 877.68 54.855 0L658.265 176.524c52.457984 69.178982 121.632051 123.790029 201.149952 157.078016l0-61.961C773.560013 230.238003 702.853018 160.287027 658.264986 73.385984z" p-id="5701"></path></svg>`,
+    width: 20, //其实指定的是svg图片绘制多大，实际占位是box，margin也是相对阴影范围指定的
+    height: 20,
+    funcType: VTable.TYPES.IconFuncTypeEnum.sort,
+    name: 'image_damage_pic',
+    positionType: VTable.TYPES.IconPosition.inlineFront,
+    marginLeft: 0,
+    marginRight: 0,
+    hover: {
+      width: 24,
+      height: 24,
+      bgColor: 'rgba(22,44,66,0.5)'
+    },
+    cursor: 'pointer'
+  });
+  VTable.register.icon('video_damage_pic', {
+    type: 'svg',
+    svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.4004 3C19.1675 3.00021 20.5996 4.43301 20.5996 6.2002V9.99805H19V8.2002C16 8.20019 5.99961 8.2002 4.59961 8.2002V17.4004C4.59982 18.2839 5.31667 19 6.2002 19H10.0752V20.5996H6.2002C4.43301 20.5996 3.00021 19.1675 3 17.4004V6.2002C3 4.43288 4.43288 3 6.2002 3H17.4004Z" fill="#89909D"/>
+<rect x="10.4391" y="1.77002" width="1.57141" height="7.75455" transform="rotate(30 10.4391 1.77002)" fill="#F5F5F5"/>
+<rect x="16.1362" y="1.77002" width="1.57141" height="7.75455" transform="rotate(30 16.1362 1.77002)" fill="#F5F5F5"/>
+<rect x="9.01111" y="18.9974" width="2.9856" height="1.60126" rx="0.800629" fill="#89909D"/>
+<rect x="20.5996" y="9.0144" width="2.9856" height="1.60126" rx="0.800629" transform="rotate(90 20.5996 9.0144)" fill="#89909D"/>
+<path d="M14.0118 12.3432C14.5273 12.6408 14.5273 13.3849 14.0118 13.6825L11.2737 15.2633C10.7582 15.5609 10.1139 15.1889 10.1139 14.5937L10.1139 11.432C10.1139 10.8368 10.7582 10.4648 11.2737 10.7624L14.0118 12.3432Z" fill="#89909D"/>
+<path d="M17.276 13.4425C19.3471 13.4425 21.026 15.1214 21.026 17.1925C21.0259 19.2635 19.347 20.9425 17.276 20.9425C15.2052 20.9423 13.5261 19.2634 13.526 17.1925C13.526 15.1216 15.2051 13.4427 17.276 13.4425ZM19.2643 15.2052C18.972 14.9129 18.497 14.9129 18.2047 15.2052L17.275 16.1349L16.3463 15.2052C16.054 14.9131 15.58 14.9131 15.2877 15.2052C14.9956 15.4975 14.9956 15.9715 15.2877 16.2638L16.2164 17.1935L15.2877 18.1222C14.9958 18.4144 14.9958 18.8885 15.2877 19.1808C15.58 19.4727 16.0541 19.4727 16.3463 19.1808L17.275 18.2521L18.2047 19.1808C18.497 19.473 18.971 19.4729 19.2633 19.1808C19.5554 18.8885 19.5555 18.4145 19.2633 18.1222L18.3336 17.1935L19.2633 16.2638C19.5555 15.9716 19.5561 15.4976 19.2643 15.2052Z" fill="#89909D"/>
+</svg>
+`,
+    width: 22,
+    height: 22,
+    name: 'video_damage_pic',
+    positionType: VTable.TYPES.IconPosition.right,
+    marginRight: 0,
+    funcType: VTable.TYPES.IconFuncTypeEnum.frozen,
+    hover: {
+      width: 22,
+      height: 22,
+      bgColor: 'rgba(101, 117, 168, 0.1)'
+    },
+    cursor: 'pointer'
+  });
+
+  const option: VTable.ListTableConstructorOptions = {
+    columns: [
+      {
+        field: '260115120130324',
+        title: 'url_without_feature',
+
+        cellType: 'link',
+        linkDetect: true,
+        linkJump: false
+      },
+
+      {
+        field: '260126115409121',
+        title: '视频展示',
+        cellType: 'video',
+        keepAspectRatio: true
+      },
+      {
+        field: '260126120531113',
+        title: '图片展示',
+        cellType: 'image',
+        keepAspectRatio: true
+      }
+    ],
+    records: [
+      {
+        '260104175901080': 'Meeseeks',
+        '260104175901129': 'NULL',
+        '260115120130324': 'https://baidu.com',
+        '260112162342618': 'ffdsagfjks \ngfgsa',
+        '260126120531113': 'ffdsagfjks \ngfgsa',
+        '260112162342767': 'zhangyu.rd',
+        '260113172146138': '仪表盘编辑',
+        '260113172146293': '1770350403',
+        '260104175901031': '1',
+        '260104215351023': '50'
+      },
+      {
+        '260104175901080': 'Meeseeks',
+        '260104175901129': 'NULL',
+        '260126120531113': 'https://google.com',
+        '260112162342767': 'zhangyu.rd',
+        '260113172146138': '仪表盘编辑',
+        '260113172146293': '1770350398',
+        '260104175901031': '1',
+        '260104215351023': '43'
+      },
+      {
+        '260104175901080': '视频架构-服务架构-稳定性',
+        '260104175901129': 'NULL',
+        '260126120531113': 'aaff',
+        '260112162342767': 'helanxin',
+        '260113172146138': '仪表盘查看',
+        '260113172146293': '1770360718',
+        '260104175901031': '1',
+        '260104215351023': '43'
+      }
+    ],
+    showHeader: true,
+    hover: {
+      highlightMode: 'row'
+    },
+    select: {
+      highlightMode: 'cell',
+      headerSelectMode: 'inline'
+    },
+    hash: '86fd7d435bfab447bf9850d2ce037810',
+    pixelRatio: 2
+  };
+  const instance = new ListTable(document.getElementById(CONTAINER_ID), option);
+
+  // 只为了方便控制太调试用，不要拷贝
+  window.tableInstance = instance;
+}

packages/vtable/examples/menu.ts

@@ -889,6 +889,10 @@ export const menus = [
         path: 'icon',
         name: 'icon-register'
       },
+      {
+        path: 'icon',
+        name: 'image-loadFail'
+      },
       {
         path: 'icon',
         name: 'icon-shape'

packages/vtable/package.json

@@ -133,4 +133,4 @@
     "url": "https://github.com/VisActor/VTable.git",
     "directory": "packages/vtable"
   }
-}
+}

packages/vtable/src/icons.ts

@@ -4,7 +4,6 @@
 import type { ColumnIconOption, ImageIcon, ITableThemeDefine, SvgIcon } from './ts-types';
 import { IconPosition, IconFuncTypeEnum } from './ts-types';
 import { extend } from './tools/helper';
-import { icons as plugins } from './icons';
 import { DrillDown, DrillUp } from './tools/global';
 let sort_color: string;
 let sort_color_opacity: string;
@@ -397,5 +396,5 @@ const builtins = {
 };
 export const icons: { [key: string]: ColumnIconOption } = {};
 export function get(): { [key: string]: ColumnIconOption } {
-  return extend(builtins, plugins);
+  return extend(builtins, icons);
 }

packages/vtable/src/scenegraph/group-creater/cell-type/image-cell.ts

@@ -7,7 +7,7 @@ import { calcKeepAspectRatioSize } from '../../utils/keep-aspect-ratio';
 import { calcStartPosition } from '../../utils/cell-pos';
 import type { Scenegraph } from '../../scenegraph';
 import { getProp, getFunctionalProp } from '../../utils/get-prop';
-import { isValid } from '@visactor/vutils';
+import { isBase64, isValid, isValidUrl } from '@visactor/vutils';
 import { getQuadProps } from '../../utils/padding';
 import { getCellBorderStrokeWidth } from '../../utils/cell-border-stroke-width';
 import type { BaseTableAPI } from '../../../ts-types/base-table';
@@ -157,7 +157,7 @@ export function createImageCellGroup(
     y: padding[0],
     width: width - padding[1] - padding[3] - iconWidth,
     height: height - padding[0] - padding[2],
-    image: value, //?? (regedIcons.damage_pic as any).svg,
+    image: value,
     cursor: 'pointer' as Cursor
   });
   image.name = 'image';
@@ -213,11 +213,24 @@ export function createImageCellGroup(
       };
     }
   }
+
   (image as any).failCallback = () => {
     const regedIcons = icons.get();
-    // image.setAttribute('image', (regedIcons.damage_pic as any).svg);
-    (image as any).image = (regedIcons.damage_pic as any).svg;
+    (image as any).image = regedIcons.image_damage_pic
+      ? (regedIcons.image_damage_pic as any).svg
+      : (regedIcons.damage_pic as any).svg;
   };
+
+  if (typeof value === 'string') {
+    if (!(value.startsWith('<svg') || isValidUrl(value) || value.includes('/') || isBase64(value))) {
+      //vrender-core 中的graphic.ts文件中有这个判断 导致无法进入failCallback，所以这里暂时这样处理了
+      //按fail情况处理
+      const regedIcons = icons.get();
+      (image as any).image = regedIcons.image_damage_pic
+        ? (regedIcons.image_damage_pic as any).svg
+        : (regedIcons.damage_pic as any).svg;
+    }
+  }
   cellGroup.appendChild(image);
 
   return cellGroup;
@@ -498,7 +511,7 @@ export function updateImageDxDy(
   }
 }
 
-function updateAutoSizingAndKeepAspectRatio(
+export function updateAutoSizingAndKeepAspectRatio(
   imageAutoSizing: boolean,
   keepAspectRatio: boolean,
   padding: [number, number, number, number],
@@ -571,7 +584,11 @@ function updateAutoSizingAndKeepAspectRatio(
   }
 }
 
-function isDamagePic(image: IImage) {
+export function isDamagePic(image: IImage) {
   const regedIcons = icons.get();
-  return image.attribute.image === (regedIcons.damage_pic as any).svg;
+  return (
+    image.attribute.image === (regedIcons.damage_pic as any).svg ||
+    (regedIcons.image_damage_pic && image.attribute.image === (regedIcons.image_damage_pic as any).svg) ||
+    (regedIcons.video_damage_pic && image.attribute.image === (regedIcons.video_damage_pic as any).svg)
+  );
 }