Playground

本页渲染的是真实库组件(dist UMD + 本地 vendor,无任何 CDN/后端),每张卡片下方实时输出 Criteria 节点

使用提示:推荐通过本地静态服务器访问本页(仓库根目录运行 python -m http.server 5180,浏览器打开 http://localhost:5180/website/playground.html); 双击文件(file://)离线打开同样可用。AI 演示为白名单 Mock(模拟 300~600ms 延迟):只有卡片上标注的词条会得到"AI 响应"; 白名单外的模糊输入会报"大模型识别失败"——这是有意设计的降级演示路径,不是故障; 输入 网络错误 则演示另一类错误"调用失败"(请求本身失败,如断网/超时/5xx)。
本地预解析优先:无歧义简单表达式(如 5>55~10大于5)由组件内置规则本地直接解析,根本不会发给 Mock(提示"规则解析完成");只有模糊自然语言才会真正调用 AI 适配器。时间计算的"规则 → 对话"回填同样为本地确定性转换,不调 AI。

智能选项smart_option

多选 + distinct_scan:数据库选项正常显示,配置补充项置灰显示;点选为精确(蓝),回车输入自定义为模糊(橙)。

试试:点击输入框点选部门;或输入 总部 回车添加自定义模糊值;已选标签展示在搜索框下方并带计数。
部门

选项内值精确(eq/in),自定义值模糊(like),混选为 mixed。详细配置与代码 →

单选智能选项smart_option_single

输入框内容即当前值:下拉点选填入输入框按精确 eq 输出;手动输入即 LIKE 值;输入框右侧小标记区分"精确 / LIKE"。与 smart_option 同协议,仅 UI 为单选。

试试:点击输入框点选"王芳"(填入输入框,标"精确",输出 eq);点 × 清空后输入 (标"LIKE",输出 like);再点选其他选项替换;手动改动已选值会变 LIKE。
直属上级

eq(点选)/ like(输入文本)单值输出,空值输出 null。详细配置与代码 →

智能文本text_input

输入关键词,防抖 500ms 后由 Mock 联想完整句子,前端截取上下文片段并高亮关键词;点击片段上屏,仍可修改。

试试输入:张伟(看"…研发部张伟获得优秀员工…"片段高亮效果)/ 张伟明
姓名

恒为 like;片段为前端截取(前 3 字 + 关键词 + 后 6 字),上屏只是填入文字。详细配置与代码 →

智能时间计算 · 年精度time_calc · year

dateType=year:年龄 ⇄ 出生年份,日历为年份选择器,日期值格式 YYYY。

试试输入:大于10岁(本地规则解析)/ 10岁以上(走 Mock AI)/ 中青年(识别失败演示)/ 网络错误(调用失败演示)
{{ ageModeY === 'direct' ? '出生年份' : '年龄' }}
{{ errors.ageYear }}

三模式共享日期值;行标签随 mode-change 切换双标签。详细配置与代码 →

智能时间计算 · 年月精度time_calc · month

dateType=month(默认):年龄 ⇄ 出生年月,日历为月份选择器,日期值格式 YYYY-MM。

试试输入:5~10(本地规则解析)/ 10岁以下(走 Mock AI)/ 快退休了(识别失败演示)/ 网络错误(调用失败演示)
{{ ageModeM === 'direct' ? '出生年月' : '年龄' }}
{{ errors.ageMonth }}

面板日历/数值双向联动,算符符号点击循环。详细配置与代码 →

智能时间计算 · 年月日精度time_calc · date

dateType=date:年龄 ⇄ 出生日期,日历为日期选择器,日期值格式 YYYY-MM-DD;严格算符边界平移到"日"。

试试输入:30(裸数字本地解析)/ 正好10岁(走 Mock AI)/ 年轻人(识别失败演示)/ 网络错误(调用失败演示)
{{ ageModeD === 'direct' ? '出生日期' : '年龄' }}
{{ errors.ageDate }}

gt/lt 严格算符边界再平移一个精度单位(日)。详细配置与代码 →

智能数值计算number_calc

规则模式(算符 + 数值)/ AI 对话模式两选一;面板"当前:"行算符可点击循环、数值可编辑。

试试:面板左上角切到 AI 对话模式,输入 80分以上(走 Mock AI)/ 大于80(本地规则解析)/ 很高(识别失败演示)/ 网络错误(调用失败演示)
绩效分
{{ errors.perf }}

between 输出 { start, end },其余算符输出单个数值。详细配置与代码 →

布尔开关boolean_switch

三态开关:点击切换 在职/离职;双击重置为"未设置"(不参与筛选)。

试试:点击开关切换;双击开关区域重置为未设置。
在职状态

输出标签字符串(在职 / 离职),未设置输出 null。详细配置与代码 →

精确ID输入id_input

单个标识码输入,固定 eq 精确匹配,输入即生效。

试试输入:E100231(任意工号文本均可,无后端依赖)
工号

仅单值 eq:不支持多值(in),不支持模糊(like)。详细配置与代码 →