AI辅助制作标识
该文章由丸子引导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';//修改这里为要检查的页面path
const 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);
},
});
});[泛微ecode] 开发辅助-ecode组件全局检索 by https://oneszhang.com/archives/64.html
[...]这个页面的数据字段下拉框，竟然不能通过Select或WeaSelect组件复写！！！一开始我做这个需求的时候，还感觉很简单，喵的，不就是个下拉框嘛，分分钟！令我没想到的是，怎么查也没查到组件名。。。。最终还是靠我的泛微 ecode 开发辅助 - ecode 组件全局检索发现竟然用的非标准Select组件，而是，一整个Table组件！！！再看Table组件，好家伙，这个组件没有存值！好好好，改DOM[...]
奇怪，我尝试了，使用在流程里面，我确定是方法已经触发了，但并没有高亮效果，以及没有搜索框
我再看了下代码，再改了下，发现流程确实可以用了，但有些小问题，我的日期选择器的组件，并没有成功高亮，反而变成了上传附件高亮了。原来使用方法是使用搜索来查找，我以为是点击xxxx，控制台提出组件名称@(吐舌)
哇哈哈哈哈，是滴，搜索高亮
点击自动提出组件名称有点高端了，不好做逻辑判断，没做那种方式