tmagic-editor/docs/guide/advanced/history-list.html
2026-06-25 10:23:46 +00:00

80 lines
58 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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.17">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/style.BuEOY8n1.css" as="style">
<link rel="preload stylesheet" href="/tmagic-editor/docs/vp-icons.css" as="style">
<script type="module" src="/tmagic-editor/docs/assets/app.DChgYJ8f.js"></script>
<link rel="preload" href="/tmagic-editor/docs/assets/inter-roman-latin.Cy4MYw_J.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/theme.DlXl19z9.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/framework.DRScawWW.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/guide_advanced_history-list.md.DG5H89iI.lean.js">
<meta name="theme-color" content="#646cff">
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a: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-d84d18b9><!--[--><!--]--><!--[--><span tabindex="-1" data-v-4b64956f></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-4b64956f>Skip to content</a><!--]--><!----><header class="VPNav" data-v-d84d18b9 data-v-04cd9f45><div class="VPNavBar has-sidebar top" data-v-04cd9f45 data-v-98204f52><div class="wrapper" data-v-98204f52><div class="container" data-v-98204f52><div class="title" data-v-98204f52><div class="VPNavBarTitle has-sidebar" data-v-98204f52 data-v-a5e0ba12><a class="title" href="/tmagic-editor/docs/" data-v-a5e0ba12><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-afa82b87><!--]--><span data-v-a5e0ba12>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-98204f52><div class="content-body" data-v-98204f52><!--[--><!--]--><div class="VPNavBarSearch search" data-v-98204f52 data-v-974eff7a><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-974eff7a data-v-73422b9f><span class="vpi-search" aria-hidden="true" data-v-73422b9f></span><span class="text" data-v-73422b9f>Search</span><span class="keys" aria-hidden="true" data-v-73422b9f><kbd class="key-cmd" data-v-73422b9f></kbd><kbd class="key-ctrl" data-v-73422b9f>Ctrl</kbd><kbd data-v-73422b9f>K</kbd></span></button><!----><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-98204f52 data-v-b5e47e6a><span id="main-nav-aria-label" class="visually-hidden" data-v-b5e47e6a> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/tmagic-editor/docs/guide/" tabindex="0" data-v-b5e47e6a data-v-e5c7d2e3><!--[--><span data-v-e5c7d2e3>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" tabindex="0" data-v-b5e47e6a data-v-e5c7d2e3><!--[--><span data-v-e5c7d2e3>Editor API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/runtime-api/core/app.html" tabindex="0" data-v-b5e47e6a data-v-e5c7d2e3><!--[--><span data-v-e5c7d2e3>Runtime API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/form-config/fields/text.html" tabindex="0" data-v-b5e47e6a data-v-e5c7d2e3><!--[--><span data-v-e5c7d2e3>表单配置</span><!--]--></a><!--]--><!--[--><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-b5e47e6a data-v-e5c7d2e3><!--[--><span data-v-e5c7d2e3>更新日志</span><!--]--></a><!--]--><!--[--><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-b5e47e6a data-v-e5c7d2e3><!--[--><span data-v-e5c7d2e3>Playground</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-98204f52 data-v-2f8c374a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-2f8c374a data-v-769da6cc data-v-98daf1c8><span class="check" data-v-98daf1c8><span class="icon" data-v-98daf1c8><!--[--><span class="vpi-sun sun" data-v-769da6cc></span><span class="vpi-moon moon" data-v-769da6cc></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-98204f52 data-v-16712142 data-v-7b918527><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-7b918527 data-v-a672d564><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-98204f52 data-v-356d8703 data-v-41493e0d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-41493e0d><span class="vpi-more-horizontal icon" data-v-41493e0d></span></button><div class="menu" data-v-41493e0d><div class="VPMenu" data-v-41493e0d data-v-bec84aa1><!----><!--[--><!--[--><!----><div class="group" data-v-356d8703><div class="item appearance" data-v-356d8703><p class="label" data-v-356d8703>Appearance</p><div class="appearance-action" data-v-356d8703><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-356d8703 data-v-769da6cc data-v-98daf1c8><span class="check" data-v-98daf1c8><span class="icon" data-v-98daf1c8><!--[--><span class="vpi-sun sun" data-v-769da6cc></span><span class="vpi-moon moon" data-v-769da6cc></span><!--]--></span></span></button></div></div></div><div class="group" data-v-356d8703><div class="item social-links" data-v-356d8703><div class="VPSocialLinks social-links-list" data-v-356d8703 data-v-7b918527><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-7b918527 data-v-a672d564><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-98204f52 data-v-475b1ff1><span class="container" data-v-475b1ff1><span class="top" data-v-475b1ff1></span><span class="middle" data-v-475b1ff1></span><span class="bottom" data-v-475b1ff1></span></span></button></div></div></div></div><div class="divider" data-v-98204f52><div class="divider-line" data-v-98204f52></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-d84d18b9 data-v-dbba7b63><div class="container" data-v-dbba7b63><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-dbba7b63><span class="vpi-align-left menu-icon" data-v-dbba7b63></span><span class="menu-text" data-v-dbba7b63>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-dbba7b63 data-v-016843db><button data-v-016843db>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-d84d18b9 data-v-c36ceaeb><div class="curtain" data-v-c36ceaeb></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-c36ceaeb><span class="visually-hidden" id="sidebar-aria-label" data-v-c36ceaeb> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-ca1a6d76><section class="VPSidebarItem level-0" data-v-ca1a6d76 data-v-0848dd37><div class="item" role="button" tabindex="0" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><h2 class="text" data-v-0848dd37>文档</h2><!----></div><div class="items" data-v-0848dd37><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/introduction.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>快速开始</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/runtime.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>RUNTIME</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/component.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>组件开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/conception.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>基础概念</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/publish.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>页面发布</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/editor-expand.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>编辑器扩展</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/migration.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>升级到1.5.x</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-ca1a6d76><section class="VPSidebarItem level-0 has-active" data-v-ca1a6d76 data-v-0848dd37><div class="item" role="button" tabindex="0" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><h2 class="text" data-v-0848dd37>进阶指南</h2><!----></div><div class="items" data-v-0848dd37><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/js-schema.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>JS Schema</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/layout.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>布局原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/page.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>页面渲染</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/coupling.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>联动原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/code-block.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>代码块</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/data-source.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>数据源</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/history-list.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>历史记录面板</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/tmagic-form.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>@tmagic/form</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-ca1a6d76><section class="VPSidebarItem level-0" data-v-ca1a6d76 data-v-0848dd37><div class="item" role="button" tabindex="0" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><h2 class="text" data-v-0848dd37>教程</h2><!----></div><div class="items" data-v-0848dd37><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>写在前面</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/hello-world.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>1.Hello World</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/runtime.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>2.Runtime</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0848dd37 data-v-0848dd37><div class="item" data-v-0848dd37><div class="indicator" data-v-0848dd37></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/render.html" data-v-0848dd37><!--[--><p class="text" data-v-0848dd37>3.DSL解析渲染</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-d84d18b9 data-v-a267f7c7><div class="VPDoc has-sidebar has-aside" data-v-a267f7c7 data-v-154870fd><!--[--><!--]--><div class="container" data-v-154870fd><div class="aside" data-v-154870fd><div class="aside-curtain" data-v-154870fd></div><div class="aside-container" data-v-154870fd><div class="aside-content" data-v-154870fd><div class="VPDocAside" data-v-154870fd data-v-23ce0ef1><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-23ce0ef1 data-v-26c56095><div class="content" data-v-26c56095><div class="outline-marker" data-v-26c56095></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-26c56095>On this page</div><ul class="VPDocOutlineItem root" data-v-26c56095 data-v-96d7f3c2><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-23ce0ef1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-154870fd><div class="content-container" data-v-154870fd><!--[--><!--]--><main class="main" data-v-154870fd><div style="position:relative;" class="vp-doc _tmagic-editor_docs_guide_advanced_history-list" data-v-154870fd><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>&#39;history-list&#39;</code> 的形式提供,将它加入 <a href="/tmagic-editor/docs/api/editor/props.html#menu"><code>menu</code></a> 配置即可在顶部工具栏出现一个时钟图标,点击展开面板:</p><div class="language-html"><button title="Copy Code" 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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--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;">&quot;menu&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> menu</span><span style="--shiki-light:#D73A49;--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;">&#39;delete&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;undo&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;redo&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;history-list&#39;</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;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</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" 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:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useHistoryRevert } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/editor&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// editorRef 为 &lt;m-editor&gt; 组件实例,其 expose 出的即各 service 集合Services</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--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:#D73A49;--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:#6A737D;--shiki-dark:#6A737D;">// 回滚:可差异步骤弹出差异确认弹窗、其余步骤弹普通二次确认框;用户点「确定」后回滚第 index 步,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 命中前置校验或用户取消时不执行,返回 null</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--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:#D73A49;--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:#D73A49;--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:#6A737D;--shiki-dark:#6A737D;">// 查看差异:可差异步骤弹出只读差异弹窗展示前后值差异,无可对比内容时不弹窗</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>extendState</code></td><td></td><td>透传给差异确认弹窗的 <code>extendState</code>(同 Editor 的 <a href="#自定义对比判断"><code>extendFormState</code></a>),使对比表单中依赖业务上下文的 <code>display</code> / <code>disabled</code><code>filterFunction</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" 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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--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;">&quot;menu&quot;</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;">&quot;historyListExtraTabs&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { markRaw } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MyModuleHistoryTab </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./MyModuleHistoryTab.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> historyListExtraTabs</span><span style="--shiki-light:#D73A49;--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;">&#39;my-module&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 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:#D73A49;--shiki-dark:#F97583;">=&gt;</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;">&#39;bar&#39;</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:#E36209;--shiki-dark:#FFAB70;">cursor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</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;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</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>extendFormState</code> 让对比表单拿到完整业务上下文,从而让依赖上下文的 <code>display</code> / <code>disabled</code><code>filterFunction</code> 正常工作。</p><p>若某些字段语义上相等但结构不同(例如 <code>code-select</code> 字段中 <code>&#39;&#39;</code><code>{ hookType: &#39;code&#39;, 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-154870fd data-v-9aa88903><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-9aa88903><span class="visually-hidden" id="doc-footer-aria-label" data-v-9aa88903>Pager</span><div class="pager" data-v-9aa88903><a class="VPLink link pager-link prev" href="/tmagic-editor/docs/guide/advanced/data-source.html" data-v-9aa88903><!--[--><span class="desc" data-v-9aa88903>Previous page</span><span class="title" data-v-9aa88903>数据源</span><!--]--></a></div><div class="pager" data-v-9aa88903><a class="VPLink link pager-link next" href="/tmagic-editor/docs/guide/advanced/tmagic-form.html" data-v-9aa88903><!--[--><span class="desc" data-v-9aa88903>Next page</span><span class="title" data-v-9aa88903>@tmagic/form</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-d84d18b9 data-v-216d1bad><div class="container" data-v-216d1bad><p class="message" data-v-216d1bad>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-216d1bad>Copyright (C) 2025 Tencent.</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_editor_codeblockservicemethods.md\":\"j4dVHCGH\",\"api_editor_componentlistservicemethods.md\":\"NxJJ7jSN\",\"api_editor_datasourceservicemethods.md\":\"Cwx54HG-\",\"api_editor_editorserviceevents.md\":\"hznVLbbd\",\"api_editor_editorservicemethods.md\":\"DQM7LO-B\",\"api_editor_events.md\":\"CK-db6wl\",\"api_editor_eventsservicemethods.md\":\"DgT5USLv\",\"api_editor_historyserviceevents.md\":\"CFMnNblB\",\"api_editor_historyservicemethods.md\":\"D36JHUSZ\",\"api_editor_props.md\":\"BpFDudl-\",\"api_editor_propsserviceevents.md\":\"D0dwju-4\",\"api_editor_propsservicemethods.md\":\"DUyAi5co\",\"api_editor_slots.md\":\"DJqaZ_Ge\",\"api_editor_storageservicemethods.md\":\"CB0C9avr\",\"api_editor_uiserviceevents.md\":\"ExlprVtC\",\"api_editor_uiservicemethods.md\":\"De_fweRS\",\"api_form_form-dialog-events.md\":\"D6XTQ524\",\"api_form_form-dialog-methods.md\":\"Ueuf0c0d\",\"api_form_form-dialog-props.md\":\"Cml-Eqa0\",\"api_form_form-events.md\":\"DG4UpuVr\",\"api_form_form-methods.md\":\"Cd2u7iXt\",\"api_form_form-props.md\":\"CueJnMKv\",\"api_form_submit-form.md\":\"BfvHmJFP\",\"api_stage_coreevents.md\":\"DUyZ-b1s\",\"api_stage_coremethods.md\":\"CCiStN-K\",\"api_table_events.md\":\"D0jrNXi5\",\"api_table_methods.md\":\"BMQLD8Ia\",\"api_table_props.md\":\"Dz6QPlwr\",\"form-config_compare.md\":\"BWiQVKe8\",\"form-config_editor-fields_code-link.md\":\"DTwutJ77\",\"form-config_editor-fields_code-select-col.md\":\"jLTv4GM0\",\"form-config_editor-fields_code-select.md\":\"BYqocUgu\",\"form-config_editor-fields_code.md\":\"Au1f-DNG\",\"form-config_editor-fields_cond-op-select.md\":\"Bs2Yo7ZB\",\"form-config_editor-fields_data-source-field-select.md\":\"9hF5_-aD\",\"form-config_editor-fields_data-source-fields.md\":\"DySelL1w\",\"form-config_editor-fields_data-source-input.md\":\"Dje_r8vk\",\"form-config_editor-fields_data-source-method-select.md\":\"CRWJ97X0\",\"form-config_editor-fields_data-source-methods.md\":\"VMcsUuIm\",\"form-config_editor-fields_data-source-mocks.md\":\"DZu5Ixkb\",\"form-config_editor-fields_data-source-select.md\":\"Dx1QWM6q\",\"form-config_editor-fields_display-conds.md\":\"CYpYuR1J\",\"form-config_editor-fields_event-select.md\":\"DLHp-Vmi\",\"form-config_editor-fields_key-value.md\":\"BjB6X9qa\",\"form-config_editor-fields_page-fragment-select.md\":\"wvSVyv0a\",\"form-config_editor-fields_ui-select.md\":\"5lxwceR1\",\"form-config_fields_cascader.md\":\"BqaR_jJk\",\"form-config_fields_checkbox.md\":\"B3H9tDTv\",\"form-config_fields_color-picker.md\":\"BfKhuQ2V\",\"form-config_fields_date-picker.md\":\"DX4YW5cD\",\"form-config_fields_daterange-picker.md\":\"CQx7_7o0\",\"form-config_fields_datetime-picker.md\":\"BifHCHfQ\",\"form-config_fields_display.md\":\"C1mZcdPm\",\"form-config_fields_dynamic-field.md\":\"DJ-cs012\",\"form-config_fields_hidden.md\":\"Bne9Uir9\",\"form-config_fields_link.md\":\"Bx2F9oyx\",\"form-config_fields_number-range.md\":\"CKp78RUr\",\"form-config_fields_number.md\":\"D5bNUfXk\",\"form-config_fields_radio.md\":\"CApc-YRl\",\"form-config_fields_select.md\":\"6co_ozfc\",\"form-config_fields_switch.md\":\"nutxDuJ1\",\"form-config_fields_text.md\":\"BnY1GBJk\",\"form-config_fields_textarea.md\":\"DEFuwkuE\",\"form-config_fields_time-picker.md\":\"pwvE5Apr\",\"form-config_fields_timerange-picker.md\":\"WH5XqYvi\",\"form-config_layout.md\":\"CfbeUtDN\",\"form-config_relate.md\":\"BOq8cCWc\",\"guide_advanced_code-block.md\":\"BRqBOl1x\",\"guide_advanced_coupling.md\":\"BlqRETb5\",\"guide_advanced_data-source.md\":\"DwDLaCo2\",\"guide_advanced_history-list.md\":\"DG5H89iI\",\"guide_advanced_js-schema.md\":\"CVtu2aDq\",\"guide_advanced_layout.md\":\"BPHaakQH\",\"guide_advanced_page.md\":\"Bq5ur5ZK\",\"guide_advanced_tmagic-form.md\":\"pI-LesMe\",\"guide_component.md\":\"B0oMaoQH\",\"guide_conception.md\":\"Bk0z--Tx\",\"guide_editor-expand.md\":\"kURJwp1-\",\"guide_index.md\":\"Cs-1gaGv\",\"guide_introduction.md\":\"CbOBap0m\",\"guide_migration.md\":\"D7i0kyJT\",\"guide_publish.md\":\"CobEKm-2\",\"guide_runtime.md\":\"B8894cSC\",\"guide_tutorial_hello-world.md\":\"CdYVqNSu\",\"guide_tutorial_index.md\":\"Ca5QBUUf\",\"guide_tutorial_render.md\":\"C5eTNnhW\",\"guide_tutorial_runtime.md\":\"_r_5RwDT\",\"index.md\":\"DFLiGMfT\",\"runtime-api_core_app.md\":\"4d5_XHQc\",\"runtime-api_core_devtoolapi.md\":\"2ECqsdl6\",\"runtime-api_core_env.md\":\"CV_zSdgZ\",\"runtime-api_core_eventhelper.md\":\"DMQnqJ7Y\",\"runtime-api_core_flowstate.md\":\"CRQBKc_7\",\"runtime-api_core_iteratorcontainer.md\":\"9UCetu3n\",\"runtime-api_core_node.md\":\"FX3DSVeV\",\"runtime-api_core_page.md\":\"F0Kx4TDo\",\"runtime-api_core_utils.md\":\"CU9eOiU-\",\"runtime-api_data-source_datasource.md\":\"DP7MB7U8\",\"runtime-api_data-source_datasourcemanager.md\":\"Dca7MeRy\",\"runtime-api_data-source_httpdatasource.md\":\"CznGnva6\",\"runtime-api_data-source_observeddata.md\":\"CZE0bwLB\",\"runtime-api_data-source_utils.md\":\"CZqbuBtE\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"tmagic-editor\",\"description\":\"页面可视化平台\",\"base\":\"/tmagic-editor/docs/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"./favicon.png\",\"search\":{\"provider\":\"local\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/Tencent/tmagic-editor\"}],\"footer\":{\"message\":\"Powered by 腾讯视频会员平台技术中心\",\"copyright\":\"Copyright (C) 2025 Tencent.\"},\"nav\":[{\"text\":\"文档\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"Editor API\",\"link\":\"/api/editor/props\",\"activeMatch\":\"/api/\"},{\"text\":\"Runtime API\",\"link\":\"/runtime-api/core/app\",\"activeMatch\":\"/runtime-api/\"},{\"text\":\"表单配置\",\"link\":\"/form-config/fields/text\",\"activeMatch\":\"/form-config/\"},{\"text\":\"更新日志\",\"link\":\"https://github.com/Tencent/tmagic-editor/releases\"},{\"text\":\"Playground\",\"link\":\"https://tencent.github.io/tmagic-editor/playground/index.html\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"文档\",\"items\":[{\"text\":\"介绍\",\"link\":\"/guide/introduction.md\"},{\"text\":\"快速开始\",\"link\":\"/guide/\"},{\"text\":\"RUNTIME\",\"link\":\"/guide/runtime.md\"},{\"text\":\"组件开发\",\"link\":\"/guide/component.md\"},{\"text\":\"基础概念\",\"link\":\"/guide/conception.md\"},{\"text\":\"页面发布\",\"link\":\"/guide/publish.md\"},{\"text\":\"编辑器扩展\",\"link\":\"/guide/editor-expand.md\"},{\"text\":\"升级到1.5.x\",\"link\":\"/guide/migration.md\"}]},{\"text\":\"进阶指南\",\"items\":[{\"text\":\"JS Schema\",\"link\":\"/guide/advanced/js-schema.md\"},{\"text\":\"布局原理\",\"link\":\"/guide/advanced/layout.md\"},{\"text\":\"页面渲染\",\"link\":\"/guide/advanced/page.md\"},{\"text\":\"联动原理\",\"link\":\"/guide/advanced/coupling.md\"},{\"text\":\"代码块\",\"link\":\"/guide/advanced/code-block.md\"},{\"text\":\"数据源\",\"link\":\"/guide/advanced/data-source.md\"},{\"text\":\"历史记录面板\",\"link\":\"/guide/advanced/history-list.md\"},{\"text\":\"@tmagic/form\",\"link\":\"/guide/advanced/tmagic-form.md\"}]},{\"text\":\"教程\",\"items\":[{\"text\":\"写在前面\",\"link\":\"/guide/tutorial/\"},{\"text\":\"1.Hello World\",\"link\":\"/guide/tutorial/hello-world.md\"},{\"text\":\"2.Runtime\",\"link\":\"/guide/tutorial/runtime.md\"},{\"text\":\"3.DSL解析渲染\",\"link\":\"/guide/tutorial/render.md\"}]}],\"/api/\":[{\"text\":\"编辑器\",\"items\":[{\"text\":\"Editor组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/editor/props.md\"},{\"text\":\"slots\",\"link\":\"/api/editor/slots.md\"},{\"text\":\"events\",\"link\":\"/api/editor/events.md\"}]},{\"text\":\"editorService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/editorServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/editorServiceEvents.md\"}]},{\"text\":\"propsService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/propsServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/propsServiceEvents.md\"}]},{\"text\":\"historyService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/historyServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/historyServiceEvents.md\"}]},{\"text\":\"eventsService\",\"link\":\"/api/editor/eventsServiceMethods.md\"},{\"text\":\"uiService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/uiServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/uiServiceEvents.md\"}]},{\"text\":\"codeBlockService\",\"link\":\"/api/editor/codeBlockServiceMethods.md\"},{\"text\":\"componentListService\",\"link\":\"/api/editor/componentListServiceMethods.md\"},{\"text\":\"storageService\",\"link\":\"/api/editor/storageServiceMethods.md\"}]},{\"text\":\"表单\",\"items\":[{\"text\":\"Form组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/form/form-props\"},{\"text\":\"methods\",\"link\":\"/api/form/form-methods\"},{\"text\":\"events\",\"link\":\"/api/form/form-events\"}]},{\"text\":\"FormDialog组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/form/form-dialog-props\"},{\"text\":\"methods\",\"link\":\"/api/form/form-dialog-methods\"},{\"text\":\"events\",\"link\":\"/api/form/form-dialog-events\"}]},{\"text\":\"工具函数\",\"items\":[{\"text\":\"submitForm\",\"link\":\"/api/form/submit-form\"}]}]},{\"text\":\"表格\",\"items\":[{\"text\":\"Table组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/table/props\"},{\"text\":\"methods\",\"link\":\"/api/table/methods\"},{\"text\":\"events\",\"link\":\"/api/table/events\"}]}]},{\"text\":\"stage\",\"items\":[{\"text\":\"StageCore\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/stage/coreMethods\"},{\"text\":\"事件\",\"link\":\"/api/stage/coreEvents\"}]}]}],\"/form-config/\":[{\"text\":\"基础配置\",\"items\":[{\"text\":\"Input输入框\",\"link\":\"/form-config/fields/text.md\"},{\"text\":\"Textarea文本域\",\"link\":\"/form-config/fields/textarea.md\"},{\"text\":\"InputNumber计数器\",\"link\":\"/form-config/fields/number.md\"},{\"text\":\"NumberRange数字范围\",\"link\":\"/form-config/fields/number-range.md\"},{\"text\":\"Display只读文本\",\"link\":\"/form-config/fields/display.md\"},{\"text\":\"Hidden隐藏域\",\"link\":\"/form-config/fields/hidden.md\"},{\"text\":\"Link链接\",\"link\":\"/form-config/fields/link.md\"},{\"text\":\"Checkbox多选框\",\"link\":\"/form-config/fields/checkbox.md\"},{\"text\":\"Radio单选框\",\"link\":\"/form-config/fields/radio.md\"},{\"text\":\"Switch开关\",\"link\":\"/form-config/fields/switch.md\"},{\"text\":\"Select选择器\",\"link\":\"/form-config/fields/select.md\"},{\"text\":\"Cascader级联选择器\",\"link\":\"/form-config/fields/cascader.md\"},{\"text\":\"ColorPicker颜色选择器\",\"link\":\"/form-config/fields/color-picker.md\"},{\"text\":\"DatePick日期选择器\",\"link\":\"/form-config/fields/date-picker.md\"},{\"text\":\"DateRangePick日期范围选择器\",\"link\":\"/form-config/fields/daterange-picker.md\"},{\"text\":\"DatetimePick日期时间选择器\",\"link\":\"/form-config/fields/datetime-picker.md\"},{\"text\":\"TimePick时间选择器\",\"link\":\"/form-config/fields/time-picker.md\"},{\"text\":\"TimeRangePick时间范围选择器\",\"link\":\"/form-config/fields/timerange-picker.md\"},{\"text\":\"DynamicField动态表单\",\"link\":\"/form-config/fields/dynamic-field.md\"}]},{\"text\":\"编辑器中可用配置\",\"items\":[{\"text\":\"Code代码编辑器\",\"link\":\"/form-config/editor-fields/code.md\"},{\"text\":\"CodeLink代码链接\",\"link\":\"/form-config/editor-fields/code-link.md\"},{\"text\":\"CodeSelect代码块选择器\",\"link\":\"/form-config/editor-fields/code-select.md\"},{\"text\":\"CodeSelectCol代码块选择列\",\"link\":\"/form-config/editor-fields/code-select-col.md\"},{\"text\":\"DataSourceSelect数据源选择器\",\"link\":\"/form-config/editor-fields/data-source-select.md\"},{\"text\":\"DataSourceFieldSelect数据源字段选择器\",\"link\":\"/form-config/editor-fields/data-source-field-select.md\"},{\"text\":\"DataSourceMethodSelect数据源方法选择器\",\"link\":\"/form-config/editor-fields/data-source-method-select.md\"},{\"text\":\"DataSourceFields数据源字段配置\",\"link\":\"/form-config/editor-fields/data-source-fields.md\"},{\"text\":\"DataSourceInput数据源输入框\",\"link\":\"/form-config/editor-fields/data-source-input.md\"},{\"text\":\"DataSourceMethods数据源方法配置\",\"link\":\"/form-config/editor-fields/data-source-methods.md\"},{\"text\":\"DataSourceMocks数据源Mock配置\",\"link\":\"/form-config/editor-fields/data-source-mocks.md\"},{\"text\":\"UISelect组件选择器\",\"link\":\"/form-config/editor-fields/ui-select.md\"},{\"text\":\"KeyValue键值对\",\"link\":\"/form-config/editor-fields/key-value.md\"},{\"text\":\"PageFragmentSelect页面片选择器\",\"link\":\"/form-config/editor-fields/page-fragment-select.md\"},{\"text\":\"EventSelect事件选择器\",\"link\":\"/form-config/editor-fields/event-select.md\"},{\"text\":\"DisplayConds显示条件配置\",\"link\":\"/form-config/editor-fields/display-conds.md\"},{\"text\":\"CondOpSelect条件操作选择器\",\"link\":\"/form-config/editor-fields/cond-op-select.md\"}]},{\"text\":\"布局配置\",\"items\":[{\"text\":\"布局\",\"link\":\"/form-config/layout.md\"}]},{\"text\":\"联动配置\",\"items\":[{\"text\":\"联动\",\"link\":\"/form-config/relate.md\"}]},{\"text\":\"表单对比\",\"items\":[{\"text\":\"表单对比\",\"link\":\"/form-config/compare.md\"}]}],\"/runtime-api/\":[{\"text\":\"@tmagic/core\",\"items\":[{\"text\":\"App\",\"link\":\"/runtime-api/core/app\"},{\"text\":\"Node\",\"link\":\"/runtime-api/core/node\"},{\"text\":\"Page\",\"link\":\"/runtime-api/core/page\"},{\"text\":\"EventHelper\",\"link\":\"/runtime-api/core/eventHelper\"},{\"text\":\"Env\",\"link\":\"/runtime-api/core/env\"},{\"text\":\"IteratorContainer\",\"link\":\"/runtime-api/core/iteratorContainer\"},{\"text\":\"FlowState\",\"link\":\"/runtime-api/core/flowState\"},{\"text\":\"DevtoolApi\",\"link\":\"/runtime-api/core/devtoolApi\"},{\"text\":\"工具函数\",\"link\":\"/runtime-api/core/utils\"}]},{\"text\":\"@tmagic/data-source\",\"items\":[{\"text\":\"DataSourceManager\",\"link\":\"/runtime-api/data-source/dataSourceManager\"},{\"text\":\"DataSource\",\"link\":\"/runtime-api/data-source/dataSource\"},{\"text\":\"HttpDataSource\",\"link\":\"/runtime-api/data-source/httpDataSource\"},{\"text\":\"观察者数据类\",\"link\":\"/runtime-api/data-source/observedData\"},{\"text\":\"工具函数\",\"link\":\"/runtime-api/data-source/utils\"}]}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false,\"additionalConfig\":{}}");</script>
</body>
</html>