本文摘要
针对泛微 ecode 开发中难以定位页面组件的问题，介绍了一套 PC 端组件全局检索高亮方案。借助全局开关和目标页面路径限定生效范围，监控指定组件并安全序列化打印其属性，同时在页面右下角添加搜索框，匹配到的组件会闪烁高亮，方便开发者快速确认组件名称、来源以及能否复写。
📌
该文章由丸子引导AI辅助制作生成，如有改进意见，欢迎评论区留言。
A.引言
😠
找个组件！是真难！ 这个是不是ecode支持的组件？ 我能不能复写？
阿西吧，所以，有了[泛微ecode] PC端页面ecode组件全局检索高亮!!!!!
这个项目应该叫“喵的，你到底是哪个组件”
B.实现全局检索的技术方案
全局开关的设定
首先，我们需要设定一个全局开关enable，以便在不需要此功能时，可以轻松地关闭它。
目标页面路径的确定
通过targetPath变量指定要进行检索的页面路径，这样我们的检索功能就会局限于特定的页面，避免对其他页面产生影响。
组件闪烁效果的实现
实现一个flashElement函数，用于使符合条件的组件产生闪烁效果，以达到高亮闪烁提示。
Props序列化处理
在JavaScript中，直接序列化对象可能会因为循环引用等问题抛出异常。因此，我们实现了一个safeStringify函数，用于安全地序列化对象，同时处理了日期、函数和未定义值的特殊情况。
组件监控与信息打印
我们通过componentsToMonitor数组定义了需要监控的组件列表，并为每个组件设置了一个钩子函数，用于在组件的属性发生变化时执行特定的操作。这里的操作包括检查路径、过滤重复的组件、打印找到的组件信息等。
搜索框的添加与功能实现
在页面的右下角动态添加一个搜索框，用户可以通过输入关键词来搜索组件信息。搜索结果会在控制台中打印出来，并对匹配的组件进行高亮显示。
C.代码拿去
register.js文件代码
const enable = true; // 全局开关const targetPath = '#/main/cube/search?customid=77';//修改这里为要检查的页面pathconst foundComponents = [];let searchBoxAdded = false;let searchBox;
// Props序列化function safeStringify(obj) { console.log('objJSON化开始:', obj); const seen = new WeakSet();
try { return JSON.stringify(obj, (key, value) => { if (value instanceof Date) { return value.toISOString(); } if (typeof value === "object" && value !== null) { if (seen.has(value)) { return '[Circular]'; } seen.add(value); } else if (typeof value === "function") { return `[Function: ${value.name || 'anonymous'}]`; } else if (typeof value === "undefined") { return '[Undefined]'; } return value; }); } catch (error) { console.error('Error during object serialization:', error.message); return '{}'; // 或者返回一个错误信息的JSON字符串 }}
// 组件闪烁function flashElement(selector, isClassName) { let elements; if (isClassName) { // 如果提供的是classname，直接使用classname查找元素 elements = document.querySelectorAll(`.${selector}`); } else { // 如果提供的是ecId，使用属性选择器查找元素 elements = document.querySelectorAll(`[ecid^='${selector}']`); }
elements.forEach((element) => { element.classList.add('flash-highlight'); // 确保闪烁结束后移除类，避免影响后续样式 setTimeout(() => { element.classList.remove('flash-highlight'); }, 3000); // 根据闪烁次数和持续时间调整，这里是3秒后（1秒闪烁动画，共3次） });}
const componentsToMonitor = [{ "Name": "WeaAutoGraph", "CName": "签章", "Group": "comMobx" }, { "Name": "WeaForm", "CName": "表单", "Group": "comMobx" }, { "Name": "WeaLogView", "CName": "日志查看", "Group": "comMobx" }, { "Name": "WeaMessageCenter", "CName": "消息中心", "Group": "comMobx" }, { "Name": "WeaSwitch", "CName": "WeaSwitch", "Group": "comMobx" }, { "Name": "WeaTableMobx", "CName": "分页列表组件", "Group": "comMobx" }, { "Name": "WeaIconfont", "CName": "图标", "Group": "ecCom" }, { "Name": "FixedColumns", "CName": "表格固定列", "Group": "ecCom" }, { "Name": "WeaAlertPage", "CName": "空白页", "Group": "ecCom" }, { "Name": "WeaAppCenter", "CName": "应用中心", "Group": "ecCom" }, { "Name": "WeaAudio", "CName": "语音", "Group": "ecCom" }, { "Name": "WeaAuth", "CName": "添加权限", "Group": "ecCom" }, { "Name": "WeaAvatar", "CName": "头像组件", "Group": "ecCom" }, { "Name": "WeaBrowser", "CName": "浏览按钮", "Group": "ecCom" }, { "Name": "WeaCascader", "CName": "级联组件", "Group": "ecCom" }, { "Name": "WeaCheckbox", "CName": "选择框", "Group": "ecCom" }, { "Name": "WeaCodeMirror", "CName": "代码编辑", "Group": "ecCom" }, { "Name": "WeaCollect", "CName": "添加收藏", "Group": "ecCom" }, { "Name": "WeaColorPicker", "CName": "颜色选择", "Group": "ecCom" }, { "Name": "WeaCron", "CName": "生成表达式", "Group": "ecCom" }, { "Name": "WeaDateGroup", "CName": "日期组合", "Group": "ecCom" }, { "Name": "WeaDatePicker", "CName": "日期", "Group": "ecCom" }, { "Name": "WeaDateSwitch", "CName": "时段切换", "Group": "ecCom" }, { "Name": "WeaDialog", "CName": "弹框", "Group": "ecCom" }, { "Name": "WeaDragChoose", "CName": "拖动选择", "Group": "ecCom" }, { "Name": "WeaDraggable", "CName": "拖拽", "Group": "ecCom" }, { "Name": "WeaDropdown", "CName": "下拉", "Group": "ecCom" }, { "Name": "WeaEchart", "CName": "图表", "Group": "ecCom" }, { "Name": "WeaEcodeUpload", "CName": "上传至云商店", "Group": "ecCom" }, { "Name": "WeaError", "CName": "错误提示", "Group": "ecCom" }, { "Name": "WeaFieldTemplateSelect", "CName": "模板字段选择", "Group": "ecCom" }, { "Name": "WeaFormItem", "CName": "表单布局", "Group": "ecCom" }, { "Name": "WeaHelpfulTip", "CName": "帮助提示", "Group": "ecCom" }, { "Name": "WeaImageCropper", "CName": "图片编辑", "Group": "ecCom" }, { "Name": "WeaInput", "CName": "单行文本", "Group": "ecCom" }, { "Name": "WeaInputNumber", "CName": "数字输入框", "Group": "ecCom" }, { "Name": "WeaInputSearch", "CName": "输入框（带放大镜)", "Group": "ecCom" }, { "Name": "WeaIntro", "CName": "页面引导", "Group": "ecCom" }, { "Name": "WeaLeftRightLayout", "CName": "左右布局", "Group": "ecCom" }, { "Name": "WeaLeftTree", "CName": "左侧树", "Group": "ecCom" }, { "Name": "WeaLoadingGlobal", "CName": "全局遮罩loading", "Group": "ecCom" }, { "Name": "WeaLocaleProvider", "CName": "多语言", "Group": "ecCom" }, { "Name": "WeaMap", "CName": "地图", "Group": "ecCom" }, { "Name": "WeaMind", "CName": "思维导图", "Group": "ecCom" }, { "Name": "WeaMoreButton", "CName": "更多按钮", "Group": "ecCom" }, { "Name": "WeaNewScroll", "CName": "新滚动条", "Group": "ecCom" }, { "Name": "WeaNewScrollPagination", "CName": "滚动翻页", "Group": "ecCom" }, { "Name": "WeaOrgTree", "CName": "组织树", "Group": "ecCom" }, { "Name": "WeaPeriod", "CName": "时间段选择", "Group": "ecCom" }, { "Name": "WeaPopoverHrm", "CName": "人力卡片", "Group": "ecCom" }, { "Name": "WeaProgress", "CName": "进度条", "Group": "ecCom" }, { "Name": "WeaQRCode", "CName": "二维码", "Group": "ecCom" }, { "Name": "WeaRadioGroup", "CName": "条件组", "Group": "ecCom" }, { "Name": "WeaRangePicker", "CName": "日期区间", "Group": "ecCom" }, { "Name": "WeaRate", "CName": "评分", "Group": "ecCom" }, { "Name": "WeaReport", "CName": "报表型列表", "Group": "ecCom" }, { "Name": "WeaReportCard", "CName": "报表卡片", "Group": "ecCom" }, { "Name": "WeaReportGroup", "CName": "报表组", "Group": "ecCom" }, { "Name": "WeaReportInfo", "CName": "报表开发说明", "Group": "ecCom" }, { "Name": "WeaReqTop", "CName": "顶部（表单）", "Group": "ecCom" }, { "Name": "WeaRichText", "CName": "富文本编辑器", "Group": "ecCom" }, { "Name": "WeaRightMenu", "CName": "右键菜单", "Group": "ecCom" }, { "Name": "WeaScope", "CName": "数值范围", "Group": "ecCom" }, { "Name": "WeaSearchGroup", "CName": "搜索面板", "Group": "ecCom" }, { "Name": "WeaSearchInput", "CName": "热词联想搜索框", "Group": "ecCom" }, { "Name": "WeaSearchPanel", "CName": "高级搜索面板", "Group": "ecCom" }, { "Name": "WeaSelect", "CName": "下拉框", "Group": "ecCom" }, { "Name": "WeaSelectGroup", "CName": "一级联动", "Group": "ecCom" }, { "Name": "WeaShare", "CName": "分享", "Group": "ecCom" }, { "Name": "WeaSignature", "CName": "批注", "Group": "ecCom" }, { "Name": "WeaSlideModal", "CName": "滑块", "Group": "ecCom" }, { "Name": "WeaSortable", "CName": "列表拖拽", "Group": "ecCom" }, { "Name": "WeaSteps", "CName": "步骤条", "Group": "ecCom" }, { "Name": "WeaStepsMenus", "CName": "自定义菜单条", "Group": "ecCom" }, { "Name": "WeaTab", "CName": "页签", "Group": "ecCom" }, { "Name": "WeaTable", "CName": "表格", "Group": "ecCom" }, { "Name": "WeaTableEdit", "CName": "迁移至 WeaTableEditable", "Group": "ecCom" }, { "Name": "WeaTableEditable", "CName": "可编辑列表", "Group": "ecCom" }, { "Name": "WeaTag", "CName": "标签", "Group": "ecCom" }, { "Name": "WeaTagGroup", "CName": "标签组", "Group": "ecCom" }, { "Name": "WeaTextarea", "CName": "多行文本", "Group": "ecCom" }, { "Name": "WeaTimePicker", "CName": "时间", "Group": "ecCom" }, { "Name": "WeaTimeRangePicker", "CName": "时间区间", "Group": "ecCom" }, { "Name": "WeaTools_storage", "CName": "本地缓存", "Group": "ecCom" }, { "Name": "WeaTools_fetch", "CName": "异步请求", "Group": "ecCom" }, { "Name": "WeaTools_error", "CName": "异常处理", "Group": "ecCom" }, { "Name": "WeaTools_getComponent", "CName": "按钮选择(redux版)", "Group": "ecCom" }, { "Name": "WeaTools_Base64", "CName": "base64编码", "Group": "ecCom" }, { "Name": "WeaTools_math", "CName": "math", "Group": "ecCom" }, { "Name": "WeaTools_downloadFile", "CName": "文件下载", "Group": "ecCom" }, { "Name": "WeaTools_eventRegister", "CName": "事件队列", "Group": "ecCom" }, { "Name": "WeaTools_dialog", "CName": "创建react组件", "Group": "ecCom" }, { "Name": "WeaTools_messageCenter", "CName": "消息中心", "Group": "ecCom" }, { "Name": "WeaTools_watermark", "CName": "水印", "Group": "ecCom" }, { "Name": "WeaTools_sendMag", "CName": "发消息", "Group": "ecCom" }, { "Name": "WeaTools_getEmAudioOrVideo", "CName": "调用em音视频方法", "Group": "ecCom" }, { "Name": "WeaTools_ding", "CName": "ding", "Group": "ecCom" }, { "Name": "WeaTools_viewer", "CName": "图片预览", "Group": "ecCom" }, { "Name": "WeaTools_unloadhook", "CName": "页面跳转提示", "Group": "ecCom" }, { "Name": "WeaTop", "CName": "顶部", "Group": "ecCom" }, { "Name": "WeaTransfer", "CName": "穿梭框", "Group": "ecCom" }, { "Name": "WeaTree", "CName": "树", "Group": "ecCom" }, { "Name": "WeaUpload", "CName": "上传", "Group": "ecCom" }, { "Name": "WeaVideo", "CName": "视频播放", "Group": "ecCom" }, { "Name": "WeaYear", "CName": "年视图", "Group": "ecCom" }, { "Name": "WeaZmage", "CName": "图片缩放", "Group": "ecCom" }, { "Name": "Affix", "CName": "固钉", "Group": "antd" }, { "Name": "Alert", "CName": "警告提示", "Group": "antd" }, { "Name": "Badge", "CName": "徽标数", "Group": "antd" }, { "Name": "Breadcrumb", "CName": "面包屑", "Group": "antd" }, { "Name": "Button", "CName": "按钮", "Group": "antd" }, { "Name": "Calendar", "CName": "日历", "Group": "antd" }, { "Name": "Card", "CName": "卡片", "Group": "antd" }, { "Name": "Carousel", "CName": "走马灯", "Group": "antd" }, { "Name": "Cascader", "CName": "级联选择", "Group": "antd" }, { "Name": "Checkbox", "CName": "多选框", "Group": "antd" }, { "Name": "Collapse", "CName": "折叠面板", "Group": "antd" }, { "Name": "Dropdown", "CName": "下拉菜单", "Group": "antd" }, { "Name": "Icon", "CName": "图标", "Group": "antd" }, { "Name": "InputNumber", "CName": "数字输入框", "Group": "antd" }, { "Name": "Input", "CName": "输入框", "Group": "antd" }, { "Name": "Layout", "CName": "栅格", "Group": "antd" }, { "Name": "Menu", "CName": "导航菜单", "Group": "antd" }, { "Name": "Message", "CName": "全局提示", "Group": "antd" }, { "Name": "Modal", "CName": "对话框", "Group": "antd" }, { "Name": "Notification", "CName": "通知提醒框", "Group": "antd" }, { "Name": "Pagination", "CName": "分页", "Group": "antd" }, { "Name": "Popconfirm", "CName": "气泡确认框", "Group": "antd" }, { "Name": "Popover", "CName": "气泡卡片", "Group": "antd" }, { "Name": "Progress", "CName": "进度条", "Group": "antd" }, { "Name": "QueueAnim", "CName": "进出场动画", "Group": "antd" }, { "Name": "Radio", "CName": "单选框", "Group": "antd" }, { "Name": "Rate", "CName": "评分", "Group": "antd" }, { "Name": "Select", "CName": "选择器", "Group": "antd" }, { "Name": "Slider", "CName": "滑动输入条", "Group": "antd" }, { "Name": "Spin", "CName": "加载中", "Group": "antd" }, { "Name": "Steps", "CName": "步骤条", "Group": "antd" }, { "Name": "Switch", "CName": "开关", "Group": "antd" }, { "Name": "Table", "CName": "表格", "Group": "antd" }, { "Name": "Tabs", "CName": "标签页", "Group": "antd" }, { "Name": "Tag", "CName": "标签", "Group": "antd" }, { "Name": "TimePicker", "CName": "时间选择框", "Group": "antd" }, { "Name": "Timeline", "CName": "时间轴", "Group": "antd" }, { "Name": "Tooltip", "CName": "文字提示", "Group": "antd" }, { "Name": "Transfer", "CName": "穿梭框", "Group": "antd" }, { "Name": "TreeSelect", "CName": "树选择", "Group": "antd" }, { "Name": "Tree", "CName": "树形控件", "Group": "antd" }, { "Name": "Upload", "CName": "上传", "Group": "antd" }];
componentsToMonitor.forEach(component => { ecodeSDK.overwritePropsFnQueueMapSet(component.Name, { fn: (newProps, Name) => { // 如果 enable 变量为 false，则直接返回 if (!enable) return;
// 检查路径 const { hash } = window.location; if (!hash.startsWith(targetPath)) return;
// 如果已经存在具有相同 ecId 的组件，则忽略 if (foundComponents.some(item => item.Name === Name && item.ecId === newProps.ecId && item.className === newProps.className)) { // console.log(`忽略相同的组件：${Name}`); return; }
// 打印找到的组件名称(Name) console.log(`找到了组件：${Name}！`);
// 使用safeStringify console.log(safeStringify(newProps));
// 存储组件信息 const componentInfo = { Group: component.Group, Name: Name, CName: component.CName, Props: newProps, ecId: newProps.ecId, className: newProps.className, PropsJS: safeStringify(newProps) };
// 添加到已找到的组件数组 foundComponents.push(componentInfo);
// 打印已找到的组件列表 console.log(foundComponents);
// 在页面的右下角增加搜索框，用于搜索匹配componentInfo中的PropsJS，如果存在搜索框，则不继续添加 if (!searchBoxAdded) { console.log("Creating searchBox..."); const searchBox = document.createElement('input'); searchBox.type = 'text'; searchBox.placeholder = '请输入要搜索的组件信息'; searchBox.style.position = 'fixed'; searchBox.style.bottom = '10px'; searchBox.style.right = '10px'; searchBox.style.width = '200px'; searchBox.style.padding = '5px'; searchBox.style.zIndex = '10000';
// 将搜索框添加到页面中 document.body.appendChild(searchBox);
// 设置 searchBoxAdded 为 true，表示搜索框已添加 searchBoxAdded = true;
// 添加失去焦点事件监听器 searchBox.addEventListener('blur', () => { const searchTerm = searchBox.value.toLowerCase(); let found = false; // 用于标记是否找到了组件
// 遍历已找到的组件数组，根据PropsJS中的信息进行模糊匹配，如果存在匹配，则在页面中显示组件的所有componentInfo信息 foundComponents.forEach((component) => { if (component.PropsJS.toLowerCase().includes(searchTerm)) { console.log(`找到了组件：${component.Name}！`); console.log(component); found = true;
// 检查componentInfo中是否存在classname且不为空 if (component.classname && component.classname.trim() !== '') { flashElement(component.classname, true); } else if (component.ecId && component.ecId.trim() !== '') { // 如果没有classname，则使用ecId flashElement(component.ecId, false); } } }); // 如果没有找到组件，则显示相应提示 if (!found) { console.log('没有找到匹配的组件。'); } }); } // console.log(searchBox); }, });});flashElmStyle.css文件代码
@keyframes flashAnimation { 0%, 100% { outline: none; } 50% { outline: 3px solid yellow; } /* 你可以根据需要调整颜色和样式 */}
.flash-highlight { animation: flashAnimation 2s ease-in-out 6; /* 持续时间1秒，闪烁3次 */ font-weight: bold; /* 使文本更加粗体以增加可见性 */}😉好了，用吧，记得帮我优化一下~
如果你想适配移动端，或者这个可以帮到你
2024年3月20日 17:12:56发布增加移动端js，找我要移动端的还不少，丸子基本不用移动端，但是之前写过了（我只写了一半，移动端这个是半成品）~拿去改改用吧
const enable = true; // 全局开关const foundComponents = []; // 用于存储找到的组件的数组let searchBoxAdded = false; //判断搜索框是否存在let searchBox; // 定义searchBox
// Props序列化function safeStringify(obj) { console.log('objJSON化开始:', obj); const seen = new WeakSet();
try { return JSON.stringify(obj, (key, value) => { if (value instanceof Date) { return value.toISOString(); } if (typeof value === "object" && value !== null) { if (seen.has(value)) { return '[Circular]'; } seen.add(value); } else if (typeof value === "function") { return `[Function: ${value.name || 'anonymous'}]`; } else if (typeof value === "undefined") { return '[Undefined]'; } return value; }); } catch (error) { console.error('Error during object serialization:', error.message); return '{}'; // 或者返回一个错误信息的JSON字符串 }}
// 组件闪烁function flashElement(selector, isClassName) { let elements; if (isClassName) { // 如果提供的是classname，直接使用classname查找元素 elements = document.querySelectorAll(`.${selector}`); } else { // 如果提供的是ecId，使用属性选择器查找元素 elements = document.querySelectorAll(`[ecid^='${selector}']`); }
elements.forEach((element) => { element.classList.add('flash-highlight'); // 确保闪烁结束后移除类，避免影响后续样式 setTimeout(() => { element.classList.remove('flash-highlight'); }, 3000); // 根据闪烁次数和持续时间调整，这里是3秒后（1秒闪烁动画，共3次） });}
const componentsToMonitor = [ { "Name": "AtSomeone", "CName": "at组件", "Group": "Page" }, { "Name": "BrowserCIty", "CName": "城市浏览按钮", "Group": "Page" }, { "Name": "BrowserHrmCondition", "CName": "人力资源条件", "Group": "Page" }, { "Name": "BrowserHrm", "CName": "人力资源浏览按钮", "Group": "Page" }, { "Name": "Browser", "CName": "浏览按钮", "Group": "Page" }, { "Name": "BusinessTrip", "CName": "出差明细组件", "Group": "Page" }, { "Name": "CKRichText", "CName": "CK富文本", "Group": "Page" }, { "Name": "CKTextarea", "CName": "CK多行文本", "Group": "Page" }, { "Name": "Comment", "CName": "评论组件", "Group": "Page" }, { "Name": "DocumentTitle", "CName": "文档标题", "Group": "Page" }, { "Name": "FloatingTouch", "CName": "悬浮按钮", "Group": "Page" }, { "Name": "Form", "CName": "简易表单", "Group": "Page" }, { "Name": "ListAdvanced", "CName": "高级列表", "Group": "Page" }, { "Name": "ListEditable", "CName": "可编辑列表", "Group": "Page" }, { "Name": "ListPage", "CName": "普通列表", "Group": "Page" }, { "Name": "ListViewPage", "CName": "长列表", "Group": "Page" }, { "Name": "MapPage", "CName": "地图", "Group": "Page" }, { "Name": "Reply", "CName": "回复组件", "Group": "Page" }, { "Name": "RouteLayout", "CName": "路由层", "Group": "Page" }, { "Name": "SearchAdvanced", "CName": "高级搜索", "Group": "Page" }, { "Name": "SearchPage", "CName": "搜索历史", "Group": "Page" }, { "Name": "SelectLinkage", "CName": "下拉联动", "Group": "Page" }, { "Name": "SelectPage", "CName": "切页选择框", "Group": "Page" }, { "Name": "ShareAuth", "CName": "共享权限", "Group": "Page" }, { "Name": "Share", "CName": "分享", "Group": "Page" }, { "Name": "Signature", "CName": "签批", "Group": "Page" }, { "Name": "StickyPage", "CName": "类吸顶", "Group": "Page" }, { "Name": "TabPage", "CName": "Tab 页", "Group": "Page" }, { "Name": "TreePage", "CName": "树", "Group": "Page" }, { "Name": "Upload", "CName": "上传", "Group": "Page" }, { "Name": "Audio", "CName": "音频组件", "Group": "New" }, { "Name": "Audio", "CName": "音频组件", "Group": "New" }, { "Name": "Avatar", "CName": "头像组件", "Group": "New" }, { "Name": "Bubble", "CName": "气泡", "Group": "New" }, { "Name": "ButtonSelect", "CName": "选择按钮", "Group": "New" }, { "Name": "ColorPicker", "CName": "颜色选择器", "Group": "New" }, { "Name": "CustomNew", "CName": "完全自定义组件2", "Group": "New" }, { "Name": "Custom", "CName": "完全自定义组件", "Group": "New" }, { "Name": "DateSwitch", "CName": "时段切换组件", "Group": "New" }, { "Name": "Echarts", "CName": "图表", "Group": "New" }, { "Name": "FilePicker", "CName": "文件选择器", "Group": "New" }, { "Name": "InputEncrypt", "CName": "加密组件", "Group": "New" }, { "Name": "InputInterval", "CName": "Input区间", "Group": "New" }, { "Name": "Period", "CName": "时间段选择", "Group": "New" }, { "Name": "PhotoSwipe", "CName": "相册浏览", "Group": "New" }, { "Name": "PhotoView", "CName": "图片预览", "Group": "New" }, { "Name": "Qrcode", "CName": "二维码", "Group": "New" }, { "Name": "Rate", "CName": "评分", "Group": "New" }, { "Name": "Schedule", "CName": "日程", "Group": "New" }, { "Name": "Select", "CName": "选择器", "Group": "New" }, { "Name": "Table", "CName": "表格", "Group": "New" }, { "Name": "TimeRangePicker", "CName": "时间区间选择", "Group": "New" }, { "Name": "Timeline", "CName": "时间轴", "Group": "New" }, { "Name": "Tools", "CName": "工具库", "Group": "New" }, { "Name": "Tree", "CName": "树", "Group": "New" }, { "Name": "Video", "CName": "视频", "Group": "New" }, { "Name": "VoiceToText", "CName": "语音转文字", "Group": "New" }, { "Name": "Flex", "CName": "Flex布局", "Group": "Layout" }, { "Name": "WhiteSpace", "CName": "上下留白", "Group": "Layout" }, { "Name": "WingBlank", "CName": "两翼留白", "Group": "Layout" }, { "Name": "Drawer", "CName": "抽屉", "Group": "Navigation" }, { "Name": "Menu", "CName": "菜单", "Group": "Navigation" }, { "Name": "NavBar", "CName": "导航栏", "Group": "Navigation" }, { "Name": "Pagination", "CName": "分页器", "Group": "Navigation" }, { "Name": "Popover", "CName": "气泡", "Group": "Navigation" }, { "Name": "SegmentedControl", "CName": "分段器", "Group": "Navigation" }, { "Name": "TabBar", "CName": "标签栏", "Group": "Navigation" }, { "Name": "Tabs", "CName": "标签页", "Group": "Navigation" }, { "Name": "Button", "CName": "按钮", "Group": "Data Entry" }, { "Name": "Calendar", "CName": "日历", "Group": "Data Entry" }, { "Name": "Checkbox", "CName": "复选框", "Group": "Data Entry" }, { "Name": "DatePickerView", "CName": "选择器", "Group": "Data Entry" }, { "Name": "DatePicker", "CName": "日期选择", "Group": "Data Entry" }, { "Name": "InputItem", "CName": "文本输入", "Group": "Data Entry" }, { "Name": "PickerView", "CName": "选择器", "Group": "Data Entry" }, { "Name": "Picker", "CName": "选择器", "Group": "Data Entry" }, { "Name": "Radio", "CName": "单选框", "Group": "Data Entry" }, { "Name": "Range", "CName": "区域选择", "Group": "Data Entry" }, { "Name": "SearchBar", "CName": "搜索栏", "Group": "Data Entry" }, { "Name": "Slider", "CName": "滑动输入条", "Group": "Data Entry" }, { "Name": "Stepper", "CName": "步进器", "Group": "Data Entry" }, { "Name": "Switch", "CName": "滑动开关", "Group": "Data Entry" }, { "Name": "TextareaItem", "CName": "多行输入", "Group": "Data Entry" }, { "Name": "Accordion", "CName": "手风琴", "Group": "Data Display" }, { "Name": "Badge", "CName": "徽标数", "Group": "Data Display" }, { "Name": "Card", "CName": "卡片", "Group": "Data Display" }, { "Name": "Carousel", "CName": "走马灯", "Group": "Data Display" }, { "Name": "Grid", "CName": "宫格", "Group": "Data Display" }, { "Name": "Icon", "CName": "图标", "Group": "Data Display" }, { "Name": "List", "CName": "列表", "Group": "Data Display" }, { "Name": "NoticeBar", "CName": "通告栏", "Group": "Data Display" }, { "Name": "Steps", "CName": "步骤条", "Group": "Data Display" }, { "Name": "Tag", "CName": "标签", "Group": "Data Display" }, { "Name": "ActionSheet", "CName": "动作面板", "Group": "Feedback" }, { "Name": "Modal", "CName": "对话框", "Group": "Feedback" }, { "Name": "Progress", "CName": "进度条", "Group": "Feedback" }, { "Name": "Toast", "CName": "轻提示", "Group": "Feedback" }, { "Name": "PullToRefresh", "CName": "拉动刷新", "Group": "Gesture" }, { "Name": "SwipeAction", "CName": "滑动操作", "Group": "Gesture" }, { "Name": "ListView", "CName": "长列表", "Group": "Combination" }, { "Name": "Result", "CName": "结果页", "Group": "Combination" }];
componentsToMonitor.forEach(component => { ecodeSDK.overwriteMobilePropsFnQueueMapSet(component.Name, { fn: (newProps, Name) => { // 如果 enable 变量为 false，则直接返回 if (!enable) return;
// 检查路径 const { hash } = window.location; if (!hash.startsWith('#/req?requestid=89929')) return;
// // 如果已经存在具有相同 ecId 的组件，则忽略 // if (foundComponents.some(item => item.Name === Name && item.ecId === newProps.ecId && item.className === newProps.className)) { // // console.log(`忽略相同的组件：${Name}`); // return; // }
// 打印找到的组件名称(Name) console.log(`找到了组件：${Name}！`);
// 使用safeStringify console.log(safeStringify(newProps));
// 存储组件信息 const componentInfo = { Group: component.Group, Name: Name, CName: component.CName, Props: newProps, ecId: newProps.ecId, className: newProps.className, PropsJS: safeStringify(newProps) };
// 添加到已找到的组件数组 foundComponents.push(componentInfo);
// 打印已找到的组件列表 console.log(foundComponents);
// 在页面的右下角增加搜索框，用于搜索匹配componentInfo中的PropsJS，如果存在搜索框，则不继续添加 if (!searchBoxAdded) { console.log("Creating searchBox..."); const searchBox = document.createElement('input'); searchBox.type = 'text'; searchBox.placeholder = '请输入要搜索的组件信息'; searchBox.style.position = 'fixed'; searchBox.style.bottom = '10px'; searchBox.style.right = '10px'; searchBox.style.width = '200px'; searchBox.style.padding = '5px'; searchBox.style.zIndex = '10000';
// 将搜索框添加到页面中 document.body.appendChild(searchBox);
// 设置 searchBoxAdded 为 true，表示搜索框已添加 searchBoxAdded = true;
// 添加失去焦点事件监听器 searchBox.addEventListener('blur', () => { const searchTerm = searchBox.value.toLowerCase(); let found = false; // 用于标记是否找到了组件
// 遍历已找到的组件数组，根据PropsJS中的信息进行模糊匹配，如果存在匹配，则在页面中显示组件的所有componentInfo信息 foundComponents.forEach((component) => { if (component.PropsJS.toLowerCase().includes(searchTerm)) { console.log(`找到了组件：${component.Name}！`); console.log(component); found = true;
// 检查componentInfo中是否存在classname且不为空 if (component.classname && component.classname.trim() !== '') { flashElement(component.classname, true); } else if (component.ecId && component.ecId.trim() !== '') { // 如果没有classname，则使用ecId flashElement(component.ecId, false); } } }); // 如果没有找到组件，则显示相应提示 if (!found) { console.log('没有找到匹配的组件。'); } }); } // console.log(searchBox); }, });});