[{"data":1,"prerenderedAt":340},["ShallowReactive",2],{"text-diagram-doc:\u002Fguide\u002Fvue":3},{"id":4,"title":5,"body":6,"description":329,"extension":330,"keywords":331,"locale":332,"meta":333,"navigation":334,"order":323,"path":335,"section":336,"seo":337,"stem":338,"__hash__":339},"docs\u002Fguide\u002Fvue.zh-CN.md","嵌入 Vue 工作台",{"type":7,"value":8,"toc":321},"minimark",[9,17,21,40,78,81,96,155,162,166,169,272,285,289,314],[10,11,12,16],"p",{},[13,14,15],"code",{},"TextDiagramEditor"," 负责编辑草稿、预览、下载和提出保存请求。应用负责当前文档、持久化以及是否接受修改。工作台不直接写入你的编辑器或服务器。",[18,19,20],"h2",{"id":20},"样式与主题",[10,22,23,24,27,28,31,32,35,36,39],{},"从 ",[13,25,26],{},"@quirekit\u002Ftext-diagram-editor\u002Fvue"," 导入组件，同时导入 ",[13,29,30],{},"@quirekit\u002Ftext-diagram-editor\u002Fstyles.css","。界面控件还需要 ",[13,33,34],{},"@quirekit\u002Funocss-preset"," 的生成样式，以及 ",[13,37,38],{},"@quirekit\u002Fui\u002Fvue"," 的主题、语言和图标 Provider。",[10,41,42,43,50,51,54,55,58,59,62,63,62,66,69,70,73,74,77],{},"按",[44,45,49],"a",{"href":46,"rel":47},"http:\u002F\u002F127.0.0.1:3200\u002Fcomponents\u002Fgetting-started",[48],"nofollow","设计系统开始使用","配置 ",[13,52,53],{},"defineQuireKitUnoConfig","、UnoCSS Vite 插件和 ",[13,56,57],{},"virtual:uno.css","；本地预览中的设计站使用固定端口 3200。将 ",[13,60,61],{},"QuireThemeProvider","、",[13,64,65],{},"QuireLocaleProvider",[13,67,68],{},"QuireIconProvider"," 放在应用根，图标使用 ",[13,71,72],{},"@quirekit\u002Fui"," 的 ",[13,75,76],{},"quireIconRegistry","。本站已经由共享外壳配置这些 Provider。",[18,79,80],{"id":80},"完整可运行接入",[10,82,83,84,87,88,91,92,95],{},"先看 ",[13,85,86],{},"workspace\u002Feditor.vue","：它在挂载后提供 ",[13,89,90],{},"ownerDocument","，从宿主取得 ",[13,93,94],{},"request","，再把两者交给工作台。点击保存后，宿主决定是否接受修改。",[97,98,99,112],"table",{},[100,101,102],"thead",{},[103,104,105,109],"tr",{},[106,107,108],"th",{},"文件",[106,110,111],{},"要修改什么时查看",[113,114,115,125,135,145],"tbody",{},[103,116,117,122],{},[118,119,120],"td",{},[13,121,86],{},[118,123,124],{},"组件挂载、保存与取消后的页面行为",[103,126,127,132],{},[118,128,129],{},[13,130,131],{},"recipes\u002Fsession.ts",[118,133,134],{},"当前对象、版本比较和本地存储",[103,136,137,142],{},[118,138,139],{},[13,140,141],{},"shared\u002Flocale.ts",[118,143,144],{},"示例界面文案",[103,146,147,152],{},[118,148,149],{},[13,150,151],{},"shared\u002Ftypes.ts",[118,153,154],{},"宿主共享类型",[10,156,157,158,161],{},"示例使用浏览器本地存储；替换 ",[13,159,160],{},"persist"," 回调可接到自己的同步本地事务。源码页签一次查阅一个文件。",[163,164],"docs-demo",{"name":165},"workspace\u002Feditor",[18,167,168],{"id":168},"组件合同",[97,170,171,181],{},[100,172,173],{},[103,174,175,178],{},[106,176,177],{},"属性 \u002F 事件",[106,179,180],{},"用途",[113,182,183,203,212,222,232,249,262],{},[103,184,185,189],{},[118,186,187],{},[13,188,94],{},[118,190,191,192,195,196,199,200],{},"必填，包含基线 ",[13,193,194],{},"document","、同步 ",[13,197,198],{},"commit"," 和 ",[13,201,202],{},"release",[103,204,205,209],{},[118,206,207],{},[13,208,90],{},[118,210,211],{},"必填，挂载后的浏览器 Document",[103,213,214,219],{},[118,215,216],{},[13,217,218],{},"locale",[118,220,221],{},"控件与新模板的语言；默认中文，支持英文",[103,223,224,229],{},[118,225,226],{},[13,227,228],{},"languages",[118,230,231],{},"可选，仅开放已安装的语言；省略时为三种语言",[103,233,234,239],{},[118,235,236],{},[13,237,238],{},"titleEditable",[118,240,241,242,245,246],{},"需要标题输入时显式设为 ",[13,243,244],{},"true","；Markdown 宿主可设为 ",[13,247,248],{},"false",[103,250,251,256],{},[118,252,253],{},[13,254,255],{},"saved",[118,257,258,259,261],{},"宿主返回 ",[13,260,255],{}," 后触发，应用刷新基线或关闭工作区",[103,263,264,269],{},[118,265,266],{},[13,267,268],{},"cancel",[118,270,271],{},"用户取消，应用释放请求并决定下一步",[10,273,274,277,278,281,282,284],{},[13,275,276],{},"request.document"," 在组件创建时作为基线。切换到另一对象或接受保存后，先释放旧请求，再用新的 ",[13,279,280],{},"key"," 挂载组件。不要仅替换 ",[13,283,94],{}," 期待当前草稿自动重置。",[18,286,288],{"id":287},"释放与-ssr","释放与 SSR",[10,290,291,292,295,296,298,299,302,303,306,307,310,311,313],{},"内嵌组件不会替应用释放宿主目标；在取消、重建或卸载时调用 ",[13,293,294],{},"request.release()","。组件自身会释放预览和 CodeMirror。",[13,297,90],{}," 在 ",[13,300,301],{},"onMounted"," 后赋值；Nuxt 通过 ",[13,304,305],{},"ClientOnly"," 或 ",[13,308,309],{},".client.vue"," 页面边界挂载工作台，服务端不访问 ",[13,312,194],{},"。",[10,315,316,317,313],{},"源码和预览必须一起提交，完整合同见",[44,318,320],{"href":319},"\u002Fguide\u002Fpersistence","保存与恢复",{"title":322,"searchDepth":323,"depth":323,"links":324},"",2,[325,326,327,328],{"id":20,"depth":323,"text":20},{"id":80,"depth":323,"text":80},{"id":168,"depth":323,"text":168},{"id":287,"depth":323,"text":288},"在自己的 Vue 页面中嵌入共享工作台，明确样式、宿主请求和提交生命周期。","md",null,"zh-CN",{},true,"\u002Fguide\u002Fvue","接入指南",{"title":5,"description":329},"guide\u002Fvue.zh-CN","GxxPG_rR1qLjeGPeON6ClnMxSFahGKWiikHVLEIb-P8",1793045389730]