mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-09-13 07:28:37 +00:00
80 lines
44 KiB
HTML
80 lines
44 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US" dir="ltr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>历史记录面板 | tmagic-editor</title>
|
||
<meta name="description" content="页面可视化平台">
|
||
<meta name="generator" content="VitePress v2.0.0-alpha.19">
|
||
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/style.DKBr9vUi.css" as="style">
|
||
<link rel="preload stylesheet" href="/tmagic-editor/docs/vp-icons.css" as="style">
|
||
<script type="module" src="/tmagic-editor/docs/assets/chunks/metadata.d6fa2e11.js"></script>
|
||
<script type="module" src="/tmagic-editor/docs/assets/app.CIDr-OtY.js"></script>
|
||
<link rel="preload" href="/tmagic-editor/docs/assets/inter-roman-latin.BOE8-mWI.woff2" as="font" type="font/woff2" crossorigin="">
|
||
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/theme.E7rLMod-.js">
|
||
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/framework.BTDV-FQ9.js">
|
||
<link rel="modulepreload" href="/tmagic-editor/docs/assets/guide_advanced_history-list.md.BsGQ5RDi.lean.js">
|
||
<meta name="theme-color" content="#646cff">
|
||
<script id="check-dark-mode">(()=>{let e=localStorage.getItem(`vitepress-theme-appearance`)||`auto`,t=window.matchMedia(`(prefers-color-scheme: dark)`).matches;(!e||e===`auto`?t:e===`dark`)&&document.documentElement.classList.add(`dark`)})();</script>
|
||
<script id="check-mac-os">document.documentElement.classList.toggle(`mac`,/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||
</head>
|
||
<body>
|
||
<div id="app"><div class="Layout" data-v-60a4fda8><!--[--><!--]--><!--[--><span tabindex="-1" data-v-a371d961></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-a371d961>Skip to content</a><!--]--><!----><header class="VPNav" data-v-60a4fda8 data-v-43b0f54c><div class="VPNavBar has-sidebar top" data-v-43b0f54c data-v-776cbfea><div class="wrapper" data-v-776cbfea><div class="container" data-v-776cbfea><div class="title" data-v-776cbfea><div class="VPNavBarTitle has-sidebar" data-v-776cbfea data-v-4f71764b><a class="title" href="/tmagic-editor/docs/" data-v-4f71764b><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-852a0b98><!--]--><span data-v-4f71764b>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-776cbfea><div class="content-body" data-v-776cbfea><!--[--><!--]--><div class="VPNavBarSearch search" data-v-776cbfea data-v-e56aaf6f><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-e56aaf6f data-v-7a374445><span class="vpi-search" aria-hidden="true" data-v-7a374445></span><span class="text" data-v-7a374445>Search</span><span class="keys" aria-hidden="true" data-v-7a374445><kbd class="key-cmd" data-v-7a374445>⌘</kbd><kbd class="key-ctrl" data-v-7a374445>Ctrl</kbd><kbd data-v-7a374445>K</kbd></span></button><!----><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-776cbfea data-v-8a09b170><span id="main-nav-aria-label" class="visually-hidden" data-v-8a09b170> Main Navigation </span><ul class="list" data-v-8a09b170><!--[--><li data-v-8a09b170><a class="VPLink link VPNavBarMenuLink active" href="/tmagic-editor/docs/guide/" tabindex="0" data-v-8a09b170 data-v-812af69a><!--[--><span data-v-812af69a>文档</span><!--]--></a></li><li data-v-8a09b170><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" tabindex="0" data-v-8a09b170 data-v-812af69a><!--[--><span data-v-812af69a>Editor API</span><!--]--></a></li><li data-v-8a09b170><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/runtime-api/core/app.html" tabindex="0" data-v-8a09b170 data-v-812af69a><!--[--><span data-v-812af69a>Runtime API</span><!--]--></a></li><li data-v-8a09b170><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/form-config/fields/text.html" tabindex="0" data-v-8a09b170 data-v-812af69a><!--[--><span data-v-812af69a>表单配置</span><!--]--></a></li><li data-v-8a09b170><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/Tencent/tmagic-editor/releases" target="_blank" rel="noreferrer" tabindex="0" data-v-8a09b170 data-v-812af69a><!--[--><span data-v-812af69a>更新日志</span><!--]--></a></li><li data-v-8a09b170><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://tencent.github.io/tmagic-editor/playground/index.html" target="_blank" rel="noreferrer" tabindex="0" data-v-8a09b170 data-v-812af69a><!--[--><span data-v-812af69a>Playground</span><!--]--></a></li><!--]--></ul></nav><!----><div class="VPNavBarAppearance appearance" data-v-776cbfea data-v-74508d43><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-74508d43 data-v-99df29c8 data-v-f119851c><span class="check" data-v-f119851c><span class="icon" data-v-f119851c><!--[--><span class="vpi-sun sun" data-v-99df29c8></span><span class="vpi-moon moon" data-v-99df29c8></span><!--]--></span></span></button></div><ul class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-776cbfea data-v-7e2655ab data-v-59a498a9><!--[--><li class="item" data-v-59a498a9><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-59a498a9 data-v-00fbddfa><span class="vpi-social-github"></span></a></li><!--]--></ul><div class="VPFlyout VPNavBarExtra extra" data-v-776cbfea data-v-402401c4 data-v-94c5eb2e><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-94c5eb2e><span class="vpi-more-horizontal icon" data-v-94c5eb2e></span></button><div class="menu" data-v-94c5eb2e><div class="VPMenu" data-v-94c5eb2e data-v-8778dd73><!----><!--[--><!--[--><!----><div class="group" data-v-402401c4><div class="item appearance" data-v-402401c4><p class="label" data-v-402401c4>Appearance</p><div class="appearance-action" data-v-402401c4><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-402401c4 data-v-99df29c8 data-v-f119851c><span class="check" data-v-f119851c><span class="icon" data-v-f119851c><!--[--><span class="vpi-sun sun" data-v-99df29c8></span><span class="vpi-moon moon" data-v-99df29c8></span><!--]--></span></span></button></div></div></div><div class="group" data-v-402401c4><div class="item social-links" data-v-402401c4><ul class="VPSocialLinks social-links-list" data-v-402401c4 data-v-59a498a9><!--[--><li class="item" data-v-59a498a9><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-59a498a9 data-v-00fbddfa><span class="vpi-social-github"></span></a></li><!--]--></ul></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-776cbfea data-v-f3a533b5><span class="container" data-v-f3a533b5><span class="top" data-v-f3a533b5></span><span class="middle" data-v-f3a533b5></span><span class="bottom" data-v-f3a533b5></span></span></button></div></div></div></div><div class="divider" data-v-776cbfea><div class="divider-line" data-v-776cbfea></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-60a4fda8 data-v-3c5edcbb><div class="container" data-v-3c5edcbb><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-3c5edcbb><span class="vpi-align-left menu-icon" data-v-3c5edcbb></span><span class="menu-text" data-v-3c5edcbb>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-allow-mismatch="style" data-v-3c5edcbb data-v-f3e9b1b1><button data-v-f3e9b1b1>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-60a4fda8 data-v-befba6b7><div class="curtain" data-v-befba6b7></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-befba6b7><span class="visually-hidden" id="sidebar-aria-label" data-v-befba6b7> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-a3c028c0><section class="VPSidebarItem level-0" data-v-a3c028c0 data-v-b2cd6471><div class="item" role="button" tabindex="0" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><h2 class="text" data-v-b2cd6471>文档</h2><!----></div><ul class="items" data-v-b2cd6471><li data-v-b2cd6471><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/introduction.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>快速开始</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/runtime.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>RUNTIME</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/component.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>组件开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/conception.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>基础概念</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/publish.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>页面发布</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/editor-expand.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>编辑器扩展</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/migration.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>升级到1.5.x</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-a3c028c0><section class="VPSidebarItem level-0" data-v-a3c028c0 data-v-b2cd6471><div class="item" role="button" tabindex="0" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><h2 class="text" data-v-b2cd6471>进阶指南</h2><!----></div><ul class="items" data-v-b2cd6471><li data-v-b2cd6471><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/js-schema.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>JS Schema</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/layout.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>布局原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/page.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>页面渲染</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/coupling.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>联动原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/code-block.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>代码块</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/data-source.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>数据源</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/history-list.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>历史记录面板</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/tmagic-form.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>@tmagic/form</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/prop-form-validate.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>属性配置表单校验联动</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-a3c028c0><section class="VPSidebarItem level-0" data-v-a3c028c0 data-v-b2cd6471><div class="item" role="button" tabindex="0" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><h2 class="text" data-v-b2cd6471>教程</h2><!----></div><ul class="items" data-v-b2cd6471><li data-v-b2cd6471><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>写在前面</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/hello-world.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>1.Hello World</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/runtime.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>2.Runtime</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/render.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>3.DSL解析渲染</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-60a4fda8 data-v-5cafe042><div class="VPDoc has-sidebar has-aside" data-v-5cafe042 data-v-ecefb870><!--[--><!--]--><div class="container" data-v-ecefb870><div class="aside" data-v-ecefb870><div class="aside-curtain" data-v-ecefb870></div><div class="aside-container" data-v-ecefb870><div class="aside-content" data-v-ecefb870><div class="VPDocAside" data-v-ecefb870 data-v-ccaf1b72><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-ccaf1b72 data-v-2b1043b8><div class="content" data-v-2b1043b8><div class="outline-marker" data-v-2b1043b8></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-2b1043b8>On this page</div><ul class="VPDocOutlineItem root" data-v-2b1043b8 data-v-1b6389b6><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-ccaf1b72></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-ecefb870><div class="content-container" data-v-ecefb870><!--[--><!--]--><main class="main" data-v-ecefb870><div style="position:relative;" class="vp-doc _tmagic-editor_docs_guide_advanced_history-list" data-v-ecefb870><div><h1 id="历史记录面板" tabindex="-1">历史记录面板 <a class="header-anchor" href="#历史记录面板" aria-label="Permalink to “历史记录面板”"></a></h1><p>编辑器内置了一个可视化的「历史记录面板」，用于查看与回溯编辑过程中产生的所有操作。相比顶部菜单栏只能「撤销 / 重做」相邻一步，历史记录面板提供了对整条历史栈的全局视角：可以按页面、数据源、代码块分类浏览，点击任意一步直接跳转，查看每一步的前后差异，甚至像 <code>git revert</code> 一样单独回滚某一步而不破坏后续操作。</p><h2 id="开启面板" tabindex="-1">开启面板 <a class="header-anchor" href="#开启面板" aria-label="Permalink to “开启面板”"></a></h2><p>历史记录面板以一个内置菜单项 <code>'history-list'</code> 的形式提供，将它加入 <a href="/tmagic-editor/docs/api/editor/props.html#menu"><code>menu</code></a> 配置即可在顶部工具栏出现一个时钟图标，点击展开面板：</p><div class="language-html"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :menu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"menu"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> menu</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> left: [],</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> center: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'delete'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'undo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'redo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'history-list'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> right: [],</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="面板结构" tabindex="-1">面板结构 <a class="header-anchor" href="#面板结构" aria-label="Permalink to “面板结构”"></a></h2><p>面板分为三个 tab，分别对应三类可被历史记录追踪的对象，tab 标题后的数字为各自的分组数量：</p><table tabindex="0"><thead><tr><th>Tab</th><th>内容</th><th>跳转 API</th></tr></thead><tbody><tr><td>页面</td><td>当前活动页面的节点操作历史</td><td><code>editorService.gotoPageStep(cursor)</code></td></tr><tr><td>数据源</td><td>按 <code>dataSource.id</code> 分组的数据源变更历史</td><td><code>dataSourceService.goto(id, cursor)</code></td></tr><tr><td>代码块</td><td>按 <code>codeBlock.id</code> 分组的代码块变更历史</td><td><code>codeBlockService.goto(id, cursor)</code></td></tr></tbody></table><h3 id="相邻同目标自动合并" tabindex="-1">相邻同目标自动合并 <a class="header-anchor" href="#相邻同目标自动合并" aria-label="Permalink to “相邻同目标自动合并”"></a></h3><p>为了避免「连续微调同一个节点 / 数据源 / 代码块」时产生大量碎片化记录，面板会把<strong>相邻的、针对同一目标的连续 <code>update</code></strong> 自动合并成一个分组：</p><ul><li>页面 tab：连续修改同一节点（按节点 id 判定）的多步合并为一组，点击组头部可展开查看每一子步；</li><li>数据源 / 代码块 tab：相邻的连续 <code>update</code> 按目标 id 合并；<code>add</code> / <code>remove</code> 始终独立成组（语义上是一次性事件）。</li></ul><blockquote><p>合并仅作用于展示与交互，不改变底层 undo/redo 栈的真实结构。</p></blockquote><h2 id="交互能力" tabindex="-1">交互能力 <a class="header-anchor" href="#交互能力" aria-label="Permalink to “交互能力”"></a></h2><p>每个分组 / 步骤支持以下操作：</p><h3 id="_1-点击跳转" tabindex="-1">1. 点击跳转 <a class="header-anchor" href="#_1-点击跳转" aria-label="Permalink to “1. 点击跳转”"></a></h3><p>点击任意一条记录，编辑器会跳转到「应用至该步完成」的状态。其本质是把对应栈的游标（cursor）移动到 <code>step.index + 1</code>，由 service 层的 undo/redo 链路完成中间步骤的批量正向 / 反向应用。</p><h3 id="_2-回到初始状态" tabindex="-1">2. 回到初始状态 <a class="header-anchor" href="#_2-回到初始状态" aria-label="Permalink to “2. 回到初始状态”"></a></h3><p>每个 tab 列表底部提供「回到初始状态」入口，等价于把对应栈游标移到 <code>0</code>（所有真实步骤全部撤销）。</p><h3 id="_3-单步回滚-类-git-revert" tabindex="-1">3. 单步回滚（类 git revert） <a class="header-anchor" href="#_3-单步回滚-类-git-revert" aria-label="Permalink to “3. 单步回滚（类 git revert）”"></a></h3><p>对于历史中间的某一步，可以单独「回滚」它，而保留它之后的所有操作。该行为不会倒带游标，而是把目标步骤的修改<strong>反向应用为一次全新的操作</strong>并压入栈顶，因此不会破坏既有历史结构：</p><ul><li>页面：<code>editorService.revertPageStep(index)</code></li><li>数据源：<code>dataSourceService.revert(id, index)</code></li><li>代码块：<code>codeBlockService.revert(id, index)</code></li></ul><p>如果业务侧在执行操作时已通过 <code>*AndGetHistoryId</code> 拿到了该条记录的 uuid（见 <a href="/tmagic-editor/docs/api/editor/editorServiceMethods.html#历史记录-uuid-与-andgethistoryid">uuid 与 *AndGetHistoryId</a> 返回的 <code>historyIds</code>），也可以直接按 uuid 回滚（无需再关心 index / id，且 uuid 不会随栈内步骤增删而变化）：</p><ul><li>页面：<code>editorService.revertPageStepById(uuids)</code></li><li>数据源：<code>dataSourceService.revertById(uuids)</code></li><li>代码块：<code>codeBlockService.revertById(uuids)</code></li></ul><h4 id="复用面板的「交互式回滚-查看差异」流程" tabindex="-1">复用面板的「交互式回滚 / 查看差异」流程 <a class="header-anchor" href="#复用面板的「交互式回滚-查看差异」流程" aria-label="Permalink to “复用面板的「交互式回滚 / 查看差异」流程”"></a></h4><p>上面的 <code>revert*</code> 方法是<strong>静默</strong>的：它们直接执行反向应用，不做任何校验与二次确认。如果业务方想在自己的入口（自定义按钮、右键菜单等）里复用历史面板那一套<strong>完整交互流程</strong>——即「目标数据已删除的前置校验 + 失败提示」「可差异步骤弹差异确认弹窗 / 其余步骤弹普通二次确认框」「用户确认后才回滚」，以及「查看差异」弹窗——可以直接 import <code>useHistoryRevert</code>：</p><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useHistoryRevert } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@tmagic/editor'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// editorRef 为 <m-editor> 组件实例，其 expose 出的即各 service 集合（Services）</span></span>
|
||
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> onPageRevert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> onDataSourceRevert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> onCodeBlockRevert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> onPageDiff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> onDataSourceDiff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> onCodeBlockDiff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useHistoryRevert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({}, editorRef.value);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// 回滚：可差异步骤弹出差异确认弹窗、其余步骤弹普通二次确认框；用户点「确定」后回滚第 index 步，</span></span>
|
||
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// 命中前置校验或用户取消时不执行，返回 null</span></span>
|
||
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onPageRevert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(index);</span></span>
|
||
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onDataSourceRevert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(id, index);</span></span>
|
||
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onCodeBlockRevert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(id, index);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// 查看差异：可差异步骤弹出只读差异弹窗展示前后值差异，无可对比内容时不弹窗</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onPageDiff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(index);</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onDataSourceDiff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(id, index);</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onCodeBlockDiff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(id, index);</span></span></code></pre></div><p>回滚确认弹窗与查看差异弹窗均由 <code>useHistoryRevert</code> 内部<strong>按需动态挂载</strong> <code>HistoryDiffDialog</code> 实现，业务方无需自行挂载任何弹窗组件。第二个参数 <code>options</code> 可选：</p><table tabindex="0"><thead><tr><th>字段</th><th>必填</th><th>说明</th></tr></thead><tbody><tr><td><code>appContext</code></td><td>否</td><td>父级应用上下文，用于让动态挂载的差异确认弹窗继承全局组件 / 指令 / provide / 插件（Element Plus、<code>@tmagic/form</code> 字段组件等）。在组件 <code>setup</code> 中调用时会自动取当前组件的 <code>appContext</code>，无需手动传；仅当在组件 setup 之外调用时才需显式传入（如 <code>editorApp._context</code>）。</td></tr><tr><td><code>dialogWidth</code></td><td>否</td><td>内置页面 / 数据源 / 代码块的差异 / 回滚确认弹窗默认宽度（透传给 <code>TMagicDialog</code> 的 <code>width</code>），如 <code>'1200px'</code> / <code>'80%'</code>。缺省时使用弹窗内置默认宽度（<code>900px</code>）。业务自有历史可在 <code>viewDiff</code> / <code>confirmAndRevert</code> 调用时通过各自入参的 <code>width</code> 单独覆盖。</td></tr></tbody></table><blockquote><p>若只需要无确认、无校验的静默回滚，直接用上面的 <code>editorService.revertPageStep</code> 等即可，无需 <code>useHistoryRevert</code>。</p></blockquote><h3 id="_4-差异对比" tabindex="-1">4. 差异对比 <a class="header-anchor" href="#_4-差异对比" aria-label="Permalink to “4. 差异对比”"></a></h3><p>在前后值都存在的 <code>update</code> 步骤上提供「查看差异」入口，点击后弹出差异对话框。对话框支持两个维度的切换：</p><ul><li><strong>对比对象</strong><ul><li><code>与修改前对比</code>：该步骤修改前 vs 修改后（默认，体现这一步带来的变化）；</li><li><code>与当前对比</code>：该步骤修改后 vs 编辑器中的最新值（用于确认「这一步之后是否又被改动过」，当前值缺失时禁用）。</li></ul></li><li><strong>展示形态</strong><ul><li><code>表单对比</code>：以属性表单形式逐字段对比，可读性更好（基于 <a href="/tmagic-editor/docs/form-config/compare.html">表单对比</a> 能力）；</li><li><code>源码对比</code>：以 JSON 源码做整体 diff（基于 monaco diff 编辑器），可以看到表单未覆盖到的字段。</li></ul></li></ul><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>表单对比依赖 <code>@tmagic/form</code> 的对比模式（<code>isCompare</code> / <code>lastValues</code>）。对于 <code>event-select</code>、<code>code-select</code>、<code>code-select-col</code> 等由列表或嵌套子表单组成的复合字段，表单会逐项展示新增 / 删除 / 修改的高亮差异，并在对比模式下隐藏「添加 / 删除 / 编辑」等写操作按钮，仅保留只读展示。</p></div><h2 id="扩展自定义-tab" tabindex="-1">扩展自定义 tab <a class="header-anchor" href="#扩展自定义-tab" aria-label="Permalink to “扩展自定义 tab”"></a></h2><p>内置的三个 tab 之外，业务方可以通过 Editor 的 <a href="/tmagic-editor/docs/api/editor/props.html#historylistextratabs"><code>historyListExtraTabs</code></a> 在面板中追加自定义的历史 tab，追加在「页面 / 数据源 / 代码块」之后。适用于某个自定义模块维护自己的操作历史，需要在历史记录面板中独立展示与回滚的场景。</p><div class="language-html"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :menu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"menu"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :history-list-extra-tabs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"historyListExtraTabs"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { markRaw } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MyModuleHistoryTab </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './MyModuleHistoryTab.vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> historyListExtraTabs</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'my-module'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // label 支持字符串或函数，函数形式便于展示动态数量</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `我的模块 (${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getMyModuleHistory</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">().</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">})`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> component: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">markRaw</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MyModuleHistoryTab),</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> props: { foo: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'bar'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> listeners: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> goto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">cursor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(cursor),</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>每个扩展 tab 的字段说明：</p><table tabindex="0"><thead><tr><th>字段</th><th>必填</th><th>说明</th></tr></thead><tbody><tr><td><code>name</code></td><td>是</td><td>tab 唯一标识，作为内部 <code>TMagicTabs</code> 的 <code>name</code></td></tr><tr><td><code>label</code></td><td>是</td><td>tab 显示文案，支持字符串或返回字符串的函数（便于展示动态数量）</td></tr><tr><td><code>component</code></td><td>是</td><td>tab 内容区渲染的组件</td></tr><tr><td><code>props</code></td><td>否</td><td>传入内容组件的 props</td></tr><tr><td><code>listeners</code></td><td>否</td><td>内容组件的事件监听</td></tr></tbody></table><blockquote><p>内容组件内部可自行通过 <code>useServices()</code> 拿到 <code>historyService</code> 等服务，读取并回滚自定义模块自己维护的历史。</p></blockquote><h2 id="自定义对比判断" tabindex="-1">自定义对比判断 <a class="header-anchor" href="#自定义对比判断" aria-label="Permalink to “自定义对比判断”"></a></h2><p>差异对话框中的「表单对比」最终透传到 <code>MForm</code>。Editor 会把 <code>services</code> / <code>stage</code> provide 为 <code>FORM_CONTEXT_KEY</code>，对比表单自动继承；业务字段在 <code><m-editor></code> 外层再 provide 一层即可，详见 <a href="/tmagic-editor/docs/api/editor/props.html#表单业务上下文">表单业务上下文</a>。配置回调通过 <code>mForm.xxx</code> 读穿取用。</p><p>若某些字段语义上相等但结构不同（例如 <code>code-select</code> 字段中 <code>''</code> 与 <code>{ hookType: 'code', hookData: [] }</code> 应视为相等），可借助 <code>@tmagic/form</code> 的 <a href="/tmagic-editor/docs/api/form/form-props.html#showdiff"><code>showDiff</code></a> 自定义判断函数避免被误判为差异。</p><h2 id="相关-api" tabindex="-1">相关 API <a class="header-anchor" href="#相关-api" aria-label="Permalink to “相关 API”"></a></h2><p>历史面板的数据均来自 <code>historyService</code> 暴露的聚合方法，详见 <a href="/tmagic-editor/docs/api/editor/historyServiceMethods.html">historyService 方法</a>。</p></div></div></main><footer class="VPDocFooter" data-v-ecefb870 data-v-283d6eff><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-283d6eff><span class="visually-hidden" id="doc-footer-aria-label" data-v-283d6eff>Pager</span><div class="pager" data-v-283d6eff><a class="VPLink link pager-link prev" href="/tmagic-editor/docs/guide/advanced/data-source.html" data-v-283d6eff><!--[--><span class="desc" data-v-283d6eff>Previous page</span><span class="title" data-v-283d6eff>数据源</span><!--]--></a></div><div class="pager" data-v-283d6eff><a class="VPLink link pager-link next" href="/tmagic-editor/docs/guide/advanced/tmagic-form.html" data-v-283d6eff><!--[--><span class="desc" data-v-283d6eff>Next page</span><span class="title" data-v-283d6eff>@tmagic/form</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-60a4fda8 data-v-5376ca3c><div class="container" data-v-5376ca3c><p class="message" data-v-5376ca3c>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-5376ca3c>Copyright (C) 2025 Tencent.</p></div></footer><!--[--><!--]--></div></div>
|
||
|
||
|
||
</body>
|
||
</html> |