@icos-desktop/react-components 2.2.15 → 2.3.0

package/dist/icos-desktop.d.ts

@@ -1,9 +1,5 @@
 import React, { ReactNode } from 'react';
 import { ButtonProps, SelectProps, TableProps, TreeSelectProps, ModalProps, CascaderProps } from '@xirang/design-antd';
-import { ContextMenuKey as ContextMenuKey$2 } from '@/components/BookTable/BookTable.types';
-import { ContextMenuKey as ContextMenuKey$3 } from '@/components/SenseTable/SenseTable.types';
-import { VideoPlayerProps as VideoPlayerProps$1 } from '@/components/VideoPlayer';
-import { IcosDesktopType } from '@/global';
 
 interface BookDetailProps {
     /**
@@ -195,7 +191,7 @@ interface BookSelectProps extends SelectProps {
 
 declare const BookSelect: React.FC<BookSelectProps>;
 
-type ContextMenuKey$1 = 'create' | 'tagConfig' | 'show' | 'delete' | 'attribute' | 'export' | 'share';
+type ContextMenuKey$3 = 'create' | 'tagConfig' | 'show' | 'delete' | 'attribute' | 'export' | 'share';
 interface BookTableProps extends TableProps {
     /**
      * 表头配置
@@ -233,7 +229,7 @@ interface BookTableProps extends TableProps {
     /**
      * 台账功能
      */
-    contextMenuConfig?: ContextMenuKey$1[];
+    contextMenuConfig?: ContextMenuKey$3[];
     /**
      * 双击台账
      * @param record
@@ -707,6 +703,17 @@ interface SenseFormRef {
 
 declare const SenseForm: React.ForwardRefExoticComponent<SenseFormProps & React.RefAttributes<SenseFormRef>>;
 
+type ContextMenuKey$2 =
+  | 'create'
+  | 'tagConfig'
+  | 'show'
+  | 'delete'
+  | 'attribute'
+  | 'export'
+  | 'share';
+
+type ContextMenuKey$1 = 'show' | 'edit' | 'cut' | 'copy' | 'delete';
+
 interface CustomButtonConfig extends ButtonProps {
     title: string;
 }
@@ -778,7 +785,7 @@ interface SenseFullTableProps {
     /**
      * 实体记录功能，可选项：`show` 查看, `edit` 编辑, `cut` 剪切, `copy` 复制, `delete` 删除
      */
-    senseContextMenuConfig?: ContextMenuKey$3[];
+    senseContextMenuConfig?: ContextMenuKey$1[];
     /**
      * 扩展列参数，目前仅支持实体列表
      */
@@ -1448,7 +1455,19 @@ type TagTreeSelectProps = TreeSelectProps;
 
 declare const TagTreeSelect: React.FC<TagTreeSelectProps>;
 
-interface VideoControlProps extends VideoPlayerProps$1 {
+interface VideoControlProps {
+    /**
+     * 实体唯一编码，用于视频控制
+     */
+    senseGlobalCode?: string;
+    /**
+     * 视频通道 id
+     */
+    channelId?: string;
+    /**
+     * 视频源类型
+     */
+    videoStreamSource?: 'cityeyes' | 'hikvision' | 'custom';
     /**
      * 禁用云台控制
      */
@@ -1461,6 +1480,10 @@ interface VideoControlProps extends VideoPlayerProps$1 {
      * 操作按钮边框颜色
      */
     operateIconBorderColor?: string;
+    /**
+     * 可注入的播放器节点（用于打破循环依赖）
+     */
+    player?: React.ReactNode;
 }
 
 declare const VideoControl: (props: VideoControlProps) => React.JSX.Element;
@@ -1523,6 +1546,180 @@ declare const CcosVideoPlayer: {
     settings: ComponentPrototype;
 };
 
+// ------ settings ------
+// 属性描述
+interface ComponentPropType {
+  // 属性的名称
+  name: string;
+  // 属性的标题
+  title: string;
+  // 如果是对象属性，这里声明子属性列表
+  props?: ComponentPropType[];
+  // 属性的选项
+  options?: any[];
+  // 属性的文档地址
+  docs?: string;
+  // 如果没提供 initValue, 是否自动初始化值，默认值 false
+  autoInitValue?: boolean;
+  // 组件的内置默认值
+  defaultValue?: any;
+  // 是否禁用变量设置器，默认值 false
+  disableVariableSetter?: boolean;
+  // 动态设置属性，覆盖已有的 prop 对象
+  getProp?: (form) => any;
+  // 动态设置属性，覆盖已有的 setterProps 对象
+  getSetterProps?: (form) => any;
+  // 动态设置表单项是否展示
+  getVisible?: (form) => boolean;
+  // 属性的分组
+  group?: 'basic' | 'event' | 'style' | 'advanced';
+  // 首次拖拽后用来初始化组件的属性值
+  initValue?: any;
+  // 属性的占位符
+  placeholder?: string;
+  // 属性的设置器
+  setter?: SetterType;
+  // 设置器的属性设置
+  setterProps?: any;
+  // 属性的提示
+  tips?: string;
+}
+
+// 设置器枚举
+type SetterType =
+  // 接收值类型: number
+  // 说明和示例: 数字值设置器
+  | 'numberSetter'
+  // 接收值类型: string
+  // 说明和示例: 文本值设置器
+  | 'textSetter'
+  // 接收值类型: boolean
+  // 说明和示例: true或false
+  | 'boolSetter'
+  // 接收值类型: string
+  // 说明和示例: 单选列表，多选一
+  | 'choiceSetter'
+  // 接收值类型: string
+  // 说明和示例: 下拉选择器，多选一
+  | 'selectSetter'
+  // 接收值类型: object[]
+  // 说明和示例:   [{ key, label, ...}, ...]
+  | 'actionListSetter'
+  // 接收值类型: object[]
+  // 说明和示例: 表格列设置器[{ key, dataIndex, title, ... }, ...]
+  | 'columnSetter'
+  // 接收值类型: string
+  // 说明和示例: 日期值设置器
+  | 'dateSetter'
+  // 接收值类型: string[]
+  // 说明和示例: 日期范围设置器
+  | 'dateRangeSetter'
+  // 接收值类型: string
+  // 说明和示例: 时间值设置器
+  | 'timeSetter'
+  // 接收值类型: string[]
+  // 说明和示例: 时间范围设置器
+  | 'timeRangeSetter'
+  // 接收值类型: object
+  // 说明和示例: 枚举对象{ key1, key2, key3 }
+  | 'enumSetter'
+  // 接收值类型: object[]
+  // 说明和示例: 通用的对象列表设置器,[{ key }, ...]
+  | 'listSetter'
+  // 接收值类型: object[]
+  // 说明和示例: 选项列表设置器,[{ label, value }, ...]
+  | 'optionSetter'
+  // 接收值类型: string
+  // 说明和示例: 路由设置器
+  | 'routerSetter'
+  // 接收值类型: code
+  // 说明和示例: 通用的代码片段设置器
+  | 'codeSetter'
+  // 接收值类型: code
+  // 说明和示例: 事件监听函数设置器,() => {}
+  | 'eventSetter'
+  // 接收值类型: code
+  // 说明和示例: JSON 表达式设置器,{ "foo": "foo" }
+  | 'jsonSetter'
+  // 接收值类型: code
+  // 说明和示例: JSX 设置器,<div>block</div>
+  | 'jsxSetter'
+  // 接收值类型: code
+  // 说明和示例: render props 设置器,() => <div></div>
+  | 'renderPropsSetter'
+  // 接收值类型: code
+  // 说明和示例: 表格单元格设置器
+  | 'tableCellSetter'
+  // 接收值类型: code
+  // 说明和示例: 表格展开设置器
+  | 'tableExpandableSetter'
+  // 接收值类型: string
+  // 说明和示例: 颜色选择器
+  | 'colorSetter';
+
+// 规则
+interface ComponentDndRulesType {
+  // 当前组件 是否可以被拖拽
+  canDrag?: () => boolean;
+  // 当前节点 是否可以拖拽到目标节点中
+  canDrop?: (targetName) => boolean;
+  // 进来的节点 是否可以落进来，仅适用于容器节点
+  canMoveIn?: (incomingName) => boolean;
+  // 被拖拽的节点 是否可以被拖离当前节点，仅适用于容器节点
+  canMoveOut?: (outgoingName) => boolean;
+  // 子节点的容器选择器，用于快速定位子节点容器，适合组件存在多个可搭建区域时使用
+  childrenContainerSelector?: string;
+}
+
+// ------ icos desktop ------
+// window._ICOS_DESKTOP_
+interface IcosDesktopType {
+  // 知识体系编码映射
+  ksCodeMap?: EntityAPI.KsCodeMap;
+  // 实体分类列表
+  entityClassList?: EntityAPI.EntityClassItem[];
+  // 接口前缀
+  apiPrefix?: string;
+}
+
+// ------ global ------
+declare global {
+  // 单个组件描述
+  interface ComponentPrototype {
+    // 组件的名称
+    name: string;
+    // 组件的标题
+    title: string;
+    // 组件的包名，或引入路径
+    package: string;
+    // 组件的描述信息
+    description?: string;
+    // 组件的文档地址
+    docs?: string;
+    // 组件的图标，图片地址或 iconfont 图标名
+    icon?: string;
+    // 组件的导出类型
+    exportType: 'defaultExport' | 'namedExport';
+    // 是否有子组件，默认值 false
+    hasChildren?: boolean;
+    // 子组件内容，适合编组的组件
+    childrenNames?: string[];
+    // 组件的类型，默认值 block
+    type?: 'page' | 'container' | 'placeholder' | 'element' | 'snippet' | 'block';
+    // 组件的属性描述
+    props?: ComponentPropType[];
+    // 组件的相关引入
+    relatedImports?: string[];
+    // 组件的规则
+    rules?: ComponentDndRulesType;
+  }
+
+  interface Window {
+    _ICOS_DESKTOP_?: IcosDesktopType;
+    _ICOS_DESKTOP_VERSION_?: string;
+  }
+}
+
 type Config = Pick<IcosDesktopType, 'apiPrefix'>;
 declare const setCconfig: (config: Config) => void;
 

package/dist/icos-desktop.js

@@ -7548,57 +7548,10 @@ styleInject(css_248z$m);
 
 var VideoControl = function (props) {
     var _a;
-    var libsPath = props.libsPath, url = props.url, senseGlobalCode = props.senseGlobalCode, channelId = props.channelId, videoPlayerType = props.videoPlayerType, videoStreamSource = props.videoStreamSource, disabled = props.disabled, operationIconColor = props.operationIconColor, operateIconBorderColor = props.operateIconBorderColor;
+    var senseGlobalCode = props.senseGlobalCode, channelId = props.channelId, videoStreamSource = props.videoStreamSource, disabled = props.disabled, operationIconColor = props.operationIconColor, operateIconBorderColor = props.operateIconBorderColor, player = props.player;
     var _b = message.useMessage(), messageApi = _b[0], contextHolder = _b[1];
     // 云台速度
     var _c = useState(40), speed = _c[0], setSpeed = _c[1];
-    /**
-     * TODO：复制自 VideoPlayer，逻辑待抽离
-     * 视频播放器需要参数 url 和 videoPlayerType
-     * 指定 url 时直接使用 url，还需指定 videoPlayerType
-     * 指定 channelId 和 videoStreamSource 时，通过接口获取 url，还需指定 videoPlayerType
-     * 指定 senseGlobalCode 时，通过接口获取 url 和 videoPlayerType
-     */
-    var data = useRequest(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var _url, res, _url;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    if (url) {
-                        return [2 /*return*/, { url: url, senseGlobalCode: senseGlobalCode, channelId: channelId, videoPlayerType: videoPlayerType, videoStreamSource: videoStreamSource }];
-                    }
-                    if (!(channelId && videoStreamSource)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, getRealtimeVideoUrl({ channelId: channelId, videoStreamSource: videoStreamSource, streamType: 0 })];
-                case 1:
-                    _url = _b.sent();
-                    return [2 /*return*/, { url: _url, senseGlobalCode: senseGlobalCode, channelId: channelId, videoPlayerType: videoPlayerType, videoStreamSource: videoStreamSource }];
-                case 2:
-                    if (!senseGlobalCode) return [3 /*break*/, 5];
-                    return [4 /*yield*/, getEntityContentConfig({ senseGlobalCode: senseGlobalCode })];
-                case 3:
-                    res = _b.sent();
-                    if (!((_a = res === null || res === void 0 ? void 0 : res.videoDataConfig) === null || _a === void 0 ? void 0 : _a.channelId)) return [3 /*break*/, 5];
-                    return [4 /*yield*/, getRealtimeVideoUrl({
-                            channelId: res.videoDataConfig.channelId,
-                            videoStreamSource: res.videoDataConfig.videoStreamSource,
-                            streamType: 0,
-                        })];
-                case 4:
-                    _url = _b.sent();
-                    return [2 /*return*/, {
-                            url: _url,
-                            senseGlobalCode: senseGlobalCode,
-                            channelId: res.videoDataConfig.channelId,
-                            videoPlayerType: res.videoDataConfig.videoPlayerType,
-                            videoStreamSource: res.videoDataConfig.videoStreamSource,
-                        }];
-                case 5: return [2 /*return*/];
-            }
-        });
-    }); }, {
-        refreshDeps: [url, senseGlobalCode, channelId, videoPlayerType, videoStreamSource],
-    }).data;
     // 操作云台
     var handleControl = function (command) { return __awaiter(void 0, void 0, void 0, function () {
         var res;
@@ -7629,8 +7582,7 @@ var VideoControl = function (props) {
         document.documentElement.style.setProperty('--video-control-operate-icon-border-color', typeof operateIconBorderColor !== 'undefined' ? operateIconBorderColor : '#18C7F2');
     });
     return (React__default.createElement("div", { className: styles$m.container },
-        React__default.createElement("div", { className: styles$m.player },
-            React__default.createElement(VideoPlayer, __assign({ libsPath: libsPath }, data))),
+        React__default.createElement("div", { className: styles$m.player }, player),
         React__default.createElement(SvgLine$1, null),
         React__default.createElement("div", { className: classNames(styles$m.control, (_a = {}, _a[styles$m['control-disabled']] = disabled, _a)) },
             React__default.createElement("div", { className: styles$m.title }, "\u4E91\u53F0\u64CD\u63A7"),
@@ -7669,16 +7621,6 @@ var VideoControl = function (props) {
         contextHolder));
 };
 
-var css_248z$l = "";
-var styles$l = {};
-styleInject(css_248z$l);
-
-var Control = function (props) {
-    var open = props.open, onCancel = props.onCancel;
-    return (React__default.createElement(Modal$1, { width: 800, open: open, title: "\u4E91\u53F0\u63A7\u5236", onCancel: onCancel, cancelText: "\u5173\u95ED", okButtonProps: { style: { display: 'none' } }, className: styles$l.container, destroyOnHidden: true },
-        React__default.createElement(VideoControl, __assign({}, omit(props, ['open', 'onCancel'])))));
-};
-
 var Cityeyes = function (_a) {
     var url = _a.url, libPath = _a.libPath;
     var status = useExternal(libPath, { type: 'js' });
@@ -7746,6 +7688,16 @@ var Player = function (props) {
     }
 };
 
+var css_248z$l = "";
+var styles$l = {};
+styleInject(css_248z$l);
+
+var Control = function (props) {
+    var open = props.open, onCancel = props.onCancel;
+    return (React__default.createElement(Modal$1, { width: 800, open: open, title: "\u4E91\u53F0\u63A7\u5236", onCancel: onCancel, cancelText: "\u5173\u95ED", okButtonProps: { style: { display: 'none' } }, className: styles$l.container, destroyOnHidden: true },
+        React__default.createElement(VideoControl, __assign({}, omit(props, ['open', 'onCancel']), { player: React__default.createElement(Player, { libsPath: props.libsPath, videoPlayerType: props.videoPlayerType, url: props.url, width: 800, height: 450 }) }))));
+};
+
 var css_248z$k = ".VideoPlayer-module_container__Afx8w {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.VideoPlayer-module_container__Afx8w * {\n  box-sizing: border-box;\n}\n.VideoPlayer-module_container__Afx8w .VideoPlayer-module_control__BUSKK {\n  position: absolute;\n  top: 16px;\n  right: 8px;\n  z-index: 999;\n  display: flex;\n  column-gap: 4px;\n  padding: 4px 12px;\n  font-size: 16px;\n  font-weight: 400;\n  color: #fff;\n  cursor: pointer;\n  background: linear-gradient(0deg, rgba(0, 255, 255, 0.3) 0%, rgba(0, 255, 255, 0.3) 100%), rgba(0, 43, 102, 0.4);\n  border: 1px solid rgba(0, 255, 255, 0.6);\n  border-radius: 2px;\n  backdrop-filter: blur(2px);\n}\n";
 var styles$k = {"container":"VideoPlayer-module_container__Afx8w","control":"VideoPlayer-module_control__BUSKK"};
 styleInject(css_248z$k);
@@ -7816,7 +7768,7 @@ var VideoPlayer = function (props) {
         data.ptzControl ? (React__default.createElement("div", { className: styles$k.control, onClick: handleOpenControl },
             React__default.createElement(FullscreenOutlined, null),
             React__default.createElement("span", null, "\u8BBE\u5907\u63A7\u5236"))) : null,
-        data.ptzControl ? (React__default.createElement(Control, __assign({ open: openControl, onCancel: handleCloseControl, libsPath: libsPath }, data))) : null));
+        data.ptzControl ? (React__default.createElement(Control, __assign({ open: openControl, onCancel: handleCloseControl }, props, data))) : null));
 };
 
 var css_248z$j = ":root {\n  --sense-detail-card-name-color: rgba(255, 255, 255, 0.85);\n  --sense-detail-card-value-color: #fff;\n  --sense-detail-card-border-color: #00ffff;\n  --sense-detail-card-bg-color: rgba(60, 240, 225, 0.08);\n}\n.index-module_box__ujhJl {\n  width: 100%;\n  background: var(--sense-detail-card-bg-color);\n}\n.index-module_box__ujhJl .index-module_line__u3Sw7 {\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  width: 100%;\n  height: 100px;\n}\n.index-module_box__ujhJl .index-module_line__u3Sw7:not(:last-child)::after {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  height: 1px;\n  content: '';\n}\n.index-module_box__ujhJl .index-module_line__u3Sw7 .index-module_item__2v6a8 {\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  row-gap: 8px;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 8px;\n  overflow: hidden;\n  text-align: center;\n}\n.index-module_box__ujhJl .index-module_line__u3Sw7 .index-module_item__2v6a8:not(:last-child)::after {\n  position: absolute;\n  top: 8px;\n  right: 0;\n  width: 1px;\n  height: 84px;\n  content: '';\n  background: var(--sense-detail-card-border-color);\n}\n.index-module_box__ujhJl .index-module_line__u3Sw7 .index-module_item__2v6a8 .index-module_value__9m0Bs {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-family: JDZhengHT;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 32px;\n  color: var(--sense-detail-card-value-color);\n  white-space: nowrap;\n}\n.index-module_box__ujhJl .index-module_line__u3Sw7 .index-module_item__2v6a8 .index-module_name__nW5zz {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 350;\n  line-height: 16px;\n  color: var(--sense-detail-card-name-color);\n  white-space: nowrap;\n}\n";
@@ -12995,11 +12947,11 @@ var CcosVideoPlayer = function (props) {
 CcosVideoPlayer.settings = settings$1;
 
 try {
-    window._ICOS_DESKTOP_VERSION_ = JSON.parse('{"version":"2.2.15","branch":"remotes/origin/release_v2.2.0","buildDate":"2025-09-04 17:18:35"}');
+    window._ICOS_DESKTOP_VERSION_ = JSON.parse('{"version":"2.3.0","branch":"release_v2.2.0","buildDate":"2025-10-21 10:21:06"}');
 }
 catch (err) {
     console.warn(err);
-    window._ICOS_DESKTOP_VERSION_ = '{"version":"2.2.15","branch":"remotes/origin/release_v2.2.0","buildDate":"2025-09-04 17:18:35"}';
+    window._ICOS_DESKTOP_VERSION_ = '{"version":"2.3.0","branch":"release_v2.2.0","buildDate":"2025-10-21 10:21:06"}';
 }
 
 export { BookDetail, BookGroupImport, BookGroupTable, BookImport, BookInfo, BookSelect, BookTable, CcosBookDetail, CcosImportTable, CcosSenseContentTable, CcosSenseCreate, CcosSenseDetail, CcosSenseEdit, CcosSenseFullTable, CcosSenseManager, CcosSenseSearch, CcosSenseTree, CcosSenseView, CcosTagConfig, CcosVideoControl, CcosVideoPlayer, EntityClassFilter, EntityClassTreeSelect, ImportTable, Modal, OrgTreeSelect, PersonSelector, ProTable$1 as ProTable, RegionCascader, RegionTreeSelect, RelationGraph, SenseContentTable, SenseCreate, SenseDetail, SenseEdit, SenseForm, SenseFullTable, SenseInfo, SenseManager, SenseSearch, SenseTable, SenseTree, SenseView, TagConfig, TagTreeSelect, VideoControl, VideoPlayer, setCconfig as config };