[{"data":1,"prerenderedAt":587},["ShallowReactive",2],{"msfe-doc:\u002Fcustomization\u002Fsearch":3},{"id":4,"title":5,"body":6,"description":576,"extension":577,"keywords":578,"locale":580,"meta":581,"navigation":81,"order":65,"path":582,"section":583,"seo":584,"stem":585,"__hash__":586},"docs\u002Fcustomization\u002Fsearch.zh-CN.md","自定义搜索面板",{"type":7,"value":8,"toc":570},"minimark",[9,13,34,125,128,131,138,463,470,473,520,551,554,557,566],[10,11,12],"h2",{"id":12},"接入位置",[14,15,16,17,21,22,25,26,29,30,33],"p",{},"创建选项 ",[18,19,20],"code",{},"searchPanel"," 接受 ",[18,23,24],{},"ComponentViewRenderer\u003CSearchPanelProps>","。Vue 用 ",[18,27,28],{},"VueComponentViewRenderer(SearchPanel)","；与节点组件一样，",[18,31,32],{},"VueNodeViewHost"," 必须位于已有 Provider 树中。",[35,36,41],"pre",{"className":37,"code":38,"language":39,"meta":40,"style":40},"language-ts shiki shiki-themes github-light github-light github-dark","import { VueComponentViewRenderer } from '@quirekit\u002Fmsfe-vue'\nimport SearchPanel from '.\u002Fsearch-panel.vue'\n\nconst options = {\n  searchPanel: VueComponentViewRenderer(SearchPanel),\n  \u002F\u002F Provide markdown and extensions as in the Vue integration guide.\n}\n","ts","",[18,42,43,63,76,83,99,112,119],{"__ignoreMap":40},[44,45,48,52,56,59],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"sDD9d","import",[44,53,55],{"class":54},"sVPnS"," { VueComponentViewRenderer } ",[44,57,58],{"class":50},"from",[44,60,62],{"class":61},"s-HEn"," '@quirekit\u002Fmsfe-vue'\n",[44,64,66,68,71,73],{"class":46,"line":65},2,[44,67,51],{"class":50},[44,69,70],{"class":54}," SearchPanel ",[44,72,58],{"class":50},[44,74,75],{"class":61}," '.\u002Fsearch-panel.vue'\n",[44,77,79],{"class":46,"line":78},3,[44,80,82],{"emptyLinePlaceholder":81},true,"\n",[44,84,86,89,93,96],{"class":46,"line":85},4,[44,87,88],{"class":50},"const",[44,90,92],{"class":91},"sUNQB"," options",[44,94,95],{"class":50}," =",[44,97,98],{"class":54}," {\n",[44,100,102,105,109],{"class":46,"line":101},5,[44,103,104],{"class":54},"  searchPanel: ",[44,106,108],{"class":107},"sgQzM","VueComponentViewRenderer",[44,110,111],{"class":54},"(SearchPanel),\n",[44,113,115],{"class":46,"line":114},6,[44,116,118],{"class":117},"sqmzS","  \u002F\u002F Provide markdown and extensions as in the Vue integration guide.\n",[44,120,122],{"class":46,"line":121},7,[44,123,124],{"class":54},"}\n",[14,126,127],{},"原生搜索快捷键继续打开该面板。不要在宿主另建一份全文搜索索引，再通过 DOM 高亮覆盖正文。",[10,129,130],{"id":130},"最小可复制的面板",[14,132,133,134,137],{},"此片段使用 QuireKit 公共输入和按钮；放入 ",[18,135,136],{},"search-panel.vue","，按上方方式接入。",[35,139,143],{"className":140,"code":141,"language":142,"meta":40,"style":40},"language-vue shiki shiki-themes github-light github-light github-dark","\u003Cscript setup lang=\"ts\">\nimport type { SearchPanelProps } from '@quirekit\u002Fmsfe-core'\nimport { QuireInput, QuireButton } from '@quirekit\u002Fui\u002Fvue'\ndefineProps\u003C{ view: SearchPanelProps }>()\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003Cdiv class=\"flex flex-wrap items-center gap-2 p-qk-surface\">\n    \u003CQuireInput :model-value=\"view.query.search\" aria-label=\"查找\"\n      @update:model-value=\"value => view.setQuery({ search: value ?? '' })\" \u002F>\n    \u003CQuireButton :disabled=\"!view.valid || view.composing\"\n      @click=\"view.run('next')\">下一项\u003C\u002FQuireButton>\n    \u003CQuireButton variant=\"ghost\" @click=\"view.run('close')\">关闭\u003C\u002FQuireButton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[18,144,145,169,184,196,217,226,235,253,286,332,364,400,444,454],{"__ignoreMap":40},[44,146,147,150,154,157,160,163,166],{"class":46,"line":47},[44,148,149],{"class":54},"\u003C",[44,151,153],{"class":152},"su0ou","script",[44,155,156],{"class":107}," setup",[44,158,159],{"class":107}," lang",[44,161,162],{"class":54},"=",[44,164,165],{"class":61},"\"ts\"",[44,167,168],{"class":54},">\n",[44,170,171,173,176,179,181],{"class":46,"line":65},[44,172,51],{"class":50},[44,174,175],{"class":50}," type",[44,177,178],{"class":54}," { SearchPanelProps } ",[44,180,58],{"class":50},[44,182,183],{"class":61}," '@quirekit\u002Fmsfe-core'\n",[44,185,186,188,191,193],{"class":46,"line":78},[44,187,51],{"class":50},[44,189,190],{"class":54}," { QuireInput, QuireButton } ",[44,192,58],{"class":50},[44,194,195],{"class":61}," '@quirekit\u002Fui\u002Fvue'\n",[44,197,198,201,204,208,211,214],{"class":46,"line":85},[44,199,200],{"class":107},"defineProps",[44,202,203],{"class":54},"\u003C{ ",[44,205,207],{"class":206},"sde8i","view",[44,209,210],{"class":50},":",[44,212,213],{"class":107}," SearchPanelProps",[44,215,216],{"class":54}," }>()\n",[44,218,219,222,224],{"class":46,"line":101},[44,220,221],{"class":54},"\u003C\u002F",[44,223,153],{"class":152},[44,225,168],{"class":54},[44,227,228,230,233],{"class":46,"line":114},[44,229,149],{"class":54},[44,231,232],{"class":152},"template",[44,234,168],{"class":54},[44,236,237,240,243,246,248,251],{"class":46,"line":121},[44,238,239],{"class":54},"  \u003C",[44,241,242],{"class":152},"div",[44,244,245],{"class":107}," class",[44,247,162],{"class":54},[44,249,250],{"class":61},"\"flex flex-wrap items-center gap-2 p-qk-surface\"",[44,252,168],{"class":54},[44,254,256,259,262,265,268,270,273,276,278,281,283],{"class":46,"line":255},8,[44,257,258],{"class":54},"    \u003C",[44,260,261],{"class":152},"QuireInput",[44,263,264],{"class":54}," :",[44,266,267],{"class":107},"model-value",[44,269,162],{"class":54},[44,271,272],{"class":61},"\"",[44,274,275],{"class":54},"view.query.search",[44,277,272],{"class":61},[44,279,280],{"class":107}," aria-label",[44,282,162],{"class":54},[44,284,285],{"class":61},"\"查找\"\n",[44,287,289,292,295,297,299,301,303,306,309,312,315,318,321,324,327,329],{"class":46,"line":288},9,[44,290,291],{"class":54},"      @",[44,293,294],{"class":107},"update",[44,296,210],{"class":54},[44,298,267],{"class":107},[44,300,162],{"class":54},[44,302,272],{"class":61},[44,304,305],{"class":206},"value",[44,307,308],{"class":50}," =>",[44,310,311],{"class":54}," view.",[44,313,314],{"class":107},"setQuery",[44,316,317],{"class":54},"({ search: value ",[44,319,320],{"class":50},"??",[44,322,323],{"class":61}," ''",[44,325,326],{"class":54}," })",[44,328,272],{"class":61},[44,330,331],{"class":54}," \u002F>\n",[44,333,335,337,340,342,345,347,349,352,355,358,361],{"class":46,"line":334},10,[44,336,258],{"class":54},[44,338,339],{"class":152},"QuireButton",[44,341,264],{"class":54},[44,343,344],{"class":107},"disabled",[44,346,162],{"class":54},[44,348,272],{"class":61},[44,350,351],{"class":50},"!",[44,353,354],{"class":54},"view.valid ",[44,356,357],{"class":50},"||",[44,359,360],{"class":54}," view.composing",[44,362,363],{"class":61},"\"\n",[44,365,367,369,372,374,376,379,382,385,388,391,393,396,398],{"class":46,"line":366},11,[44,368,291],{"class":54},[44,370,371],{"class":107},"click",[44,373,162],{"class":54},[44,375,272],{"class":61},[44,377,378],{"class":54},"view.",[44,380,381],{"class":107},"run",[44,383,384],{"class":54},"(",[44,386,387],{"class":61},"'next'",[44,389,390],{"class":54},")",[44,392,272],{"class":61},[44,394,395],{"class":54},">下一项\u003C\u002F",[44,397,339],{"class":152},[44,399,168],{"class":54},[44,401,403,405,407,410,412,415,418,420,422,424,426,428,430,433,435,437,440,442],{"class":46,"line":402},12,[44,404,258],{"class":54},[44,406,339],{"class":152},[44,408,409],{"class":107}," variant",[44,411,162],{"class":54},[44,413,414],{"class":61},"\"ghost\"",[44,416,417],{"class":54}," @",[44,419,371],{"class":107},[44,421,162],{"class":54},[44,423,272],{"class":61},[44,425,378],{"class":54},[44,427,381],{"class":107},[44,429,384],{"class":54},[44,431,432],{"class":61},"'close'",[44,434,390],{"class":54},[44,436,272],{"class":61},[44,438,439],{"class":54},">关闭\u003C\u002F",[44,441,339],{"class":152},[44,443,168],{"class":54},[44,445,447,450,452],{"class":46,"line":446},13,[44,448,449],{"class":54},"  \u003C\u002F",[44,451,242],{"class":152},[44,453,168],{"class":54},[44,455,457,459,461],{"class":46,"line":456},14,[44,458,221],{"class":54},[44,460,232],{"class":152},[44,462,168],{"class":54},[14,464,465,466,469],{},"生产面板应按应用语言提供标签，必要时通过 ",[18,467,468],{},"view.phrase(key)"," 获取宿主 CodeMirror 文案。不要在中文模式直接展示固定英文提示。",[10,471,472],{"id":472},"字段和动作",[14,474,475,478,479,482,483,482,486,482,489,482,492,495,496,499,500,503,504,507,508,511,512,515,516,519],{},[18,476,477],{},"query"," 包含 ",[18,480,481],{},"search","、",[18,484,485],{},"replace",[18,487,488],{},"caseSensitive",[18,490,491],{},"regexp",[18,493,494],{},"wholeWord","。通过 ",[18,497,498],{},"setQuery(partial)"," 局部更新，不直接修改传入对象。",[18,501,502],{},"valid"," 判断非空查询是否可执行，包含正则有效性。",[18,505,506],{},"matches"," 给出命中计数：",[18,509,510],{},"total"," 为命中总数（最多统计 1000 个，超出时 ",[18,513,514],{},"limited"," 为真），",[18,517,518],{},"current"," 为主选区恰好覆盖的第几个命中，没有覆盖时为 0。",[14,521,522,21,525,482,528,482,531,482,534,482,536,482,539,542,543,546,547,550],{},[18,523,524],{},"run()",[18,526,527],{},"next",[18,529,530],{},"previous",[18,532,533],{},"all",[18,535,485],{},[18,537,538],{},"replaceAll",[18,540,541],{},"close","。替换控件在 ",[18,544,545],{},"readOnly"," 或 ",[18,548,549],{},"composing"," 时禁用；查找和复制仍可使用。动作返回布尔值，面板卸载后的过期动作不可继续写文档。",[10,552,553],{"id":553},"扩展为完整面板",[14,555,556],{},"增加替换输入、大小写\u002F全词\u002F正则开关及结果导航，都调用上述字段和动作。键盘提交在输入法组合结束后执行；面板关闭后由现有搜索生命周期恢复焦点。避免宿主的全局 Enter 处理器抢走输入框事件。",[14,558,559,560,565],{},"验证：无效正则、零结果、中文组合、替换后撤销、只读查找、打开时选区、关闭后焦点、窄屏和两种主题。精确协议见 ",[561,562,564],"a",{"href":563},"\u002Fapi\u002Frendering","渲染 API","。",[567,568,569],"style",{},"html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sqmzS, html code.shiki .sqmzS{--shiki-default:#6A737D;--shiki-light:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .su0ou, html code.shiki .su0ou{--shiki-default:#22863A;--shiki-light:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sde8i, html code.shiki .sde8i{--shiki-default:#E36209;--shiki-light:#E36209;--shiki-dark:#FFAB70}",{"title":40,"searchDepth":65,"depth":65,"links":571},[572,573,574,575],{"id":12,"depth":65,"text":12},{"id":130,"depth":65,"text":130},{"id":472,"depth":65,"text":472},{"id":553,"depth":65,"text":553},"替换搜索 UI，保留统一的查询、选中和替换事务。","md",[579,20,538,481],"SearchPanelProps","zh-CN",{},"\u002Fcustomization\u002Fsearch","UI 与主题",{"title":5,"description":576},"customization\u002Fsearch.zh-CN","FCYbGWN8MbAaeikOW36_FP-Mww1Dh1gsERNha8arL5c",1793046311421]