@tmagic/editor 1.8.0-beta.7 → 1.8.0-beta.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.7",
+  "version": "1.8.0-beta.9",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/form": "1.8.0-beta.7",
-    "@tmagic/design": "1.8.0-beta.7",
-    "@tmagic/table": "1.8.0-beta.7",
-    "@tmagic/utils": "1.8.0-beta.7",
-    "@tmagic/stage": "1.8.0-beta.7"
+    "@tmagic/design": "1.8.0-beta.9",
+    "@tmagic/form": "1.8.0-beta.9",
+    "@tmagic/stage": "1.8.0-beta.9",
+    "@tmagic/table": "1.8.0-beta.9",
+    "@tmagic/utils": "1.8.0-beta.9"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -75,8 +75,8 @@
     "monaco-editor": "^0.55.1 ",
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
-    "vue": "^3.5.34",
-    "@tmagic/core": "1.8.0-beta.7"
+    "vue": "^3.5.38",
+    "@tmagic/core": "1.8.0-beta.9"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -135,7 +135,7 @@
 <script lang="ts" setup>
 import { EventEmitter } from 'events';
 
-import { provide } from 'vue';
+import { provide, ref } from 'vue';
 
 import type { MApp } from '@tmagic/core';
 
@@ -227,6 +227,8 @@ const stageOptions: StageOptions = {
 
 stageOverlayService.set('stageOptions', stageOptions);
 
+const propsPanelRef = ref<InstanceType<typeof FormPanel> | null>(null);
+
 provide('services', services);
 
 provide('codeOptions', props.codeOptions);
@@ -237,6 +239,11 @@ provide('stageOptions', stageOptions);
  * 与 PropsPanel 通过 `:extend-state` 显式传入的方式保持等价。
  */
 provide('extendFormState', props.extendFormState);
+/**
+ * 提供 PropsPanel 主属性表单的 formState getter，供历史差异弹窗复用，
+ * 让 CompareForm 与 PropsPanel 的 filterFunction 上下文保持一致。
+ */
+provide('getPropsPanelFormState', () => propsPanelRef.value?.configForm?.formState);
 
 /**
  * 把历史记录面板的自定义扩展 tab 提供给深层的 HistoryListPanel（它挂在 NavMenu 中，
@@ -248,9 +255,11 @@ provide('historyListExtraTabs', props.historyListExtraTabs);
 provide<EventBus>('eventBus', new EventEmitter());
 
 const propsPanelMountedHandler = (e: InstanceType<typeof FormPanel>) => {
+  propsPanelRef.value = e;
   emit('props-panel-mounted', e);
 };
 const propsPanelUnmountedHandler = () => {
+  propsPanelRef.value = null;
   emit('props-panel-unmounted');
 };
 

package/src/components/CompareForm.vue

@@ -10,21 +10,22 @@
       :is-compare="true"
       :disabled="true"
       :label-width="labelWidth"
-      :extend-state="extendState"
+      :extend-state="mergedExtendState"
       :show-diff="showDiff"
+      :self-diff-field-types="selfDiffFieldTypes"
     ></MForm>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, type Ref, ref, type ShallowRef, useTemplateRef, watch, watchEffect } from 'vue';
+import { computed, inject, provide, type Ref, ref, type ShallowRef, useTemplateRef, watch, watchEffect } from 'vue';
 import { isEqual } from 'lodash-es';
 
 import { type CodeBlockContent, type DataSourceSchema, HookType, type MNode } from '@tmagic/core';
 import { type FormConfig, type FormState, type FormValue, MForm } from '@tmagic/form';
 
 import { useServices } from '@editor/hooks/use-services';
-import type { CompareCategory, CompareFormLoadConfig } from '@editor/type';
+import type { CompareCategory, CompareFormLoadConfig, Services } from '@editor/type';
 import { getCodeBlockFormConfig } from '@editor/utils/code-block';
 
 defineOptions({
@@ -61,21 +62,33 @@ const props = withDefaults(
      * 因此在差异对比场景下也需要透传，避免出现 `formState.xxx is undefined` 的运行时错误。
      */
     extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+    /**
+     * 外部透传的基础 formState（通常来自 PropsPanel 主属性表单）。
+     * CompareForm 会提取其中的扩展字段覆盖到自己的 formState，保证 filterFunction 上下文一致。
+     */
+    baseFormState?: FormState;
+    /** 需要走 self diff 的字段类型（例如 mod-cond）。 */
+    selfDiffFieldTypes?: string[];
     /**
      * 自定义 FormConfig 加载逻辑。传入后将接管内置的按 `category`(node/data-source/code-block)
      * 取配置逻辑，调用方可根据业务自行返回（或异步返回）表单配置。可通过
      * `ctx.defaultLoadConfig()` 复用默认结果再做二次加工。返回的 config 直接用于对比展示。
      */
     loadConfig?: CompareFormLoadConfig;
+    /** 编辑器服务集合，由调用方传入（不再通过 inject('services') 获取）。 */
+    services: Services;
   }>(),
   {
     category: 'node',
     labelWidth: '120px',
+    services: () => useServices(),
+    extendState: (state: FormState) => state,
   },
 );
 
-const { propsService, dataSourceService, codeBlockService, editorService } = useServices();
-const services = useServices();
+const { propsService, dataSourceService, codeBlockService, editorService } = props.services;
+
+provide('services', props.services);
 
 const config = ref<FormConfig>([]);
 
@@ -170,6 +183,10 @@ const removeStyleDisplayConfig = (formConfig: FormConfig): FormConfig =>
     };
   });
 
+const mergedExtendState = (state: FormState) => {
+  return props.extendState(props.baseFormState || state);
+};
+
 /**
  * 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
  * 作为 ctx.defaultLoadConfig 透传给自定义 `loadConfig`，方便复用与二次加工。
@@ -185,7 +202,11 @@ const defaultLoadConfig = async (): Promise<FormConfig> => {
       );
     }
     case 'data-source': {
-      return dataSourceService.getFormConfig(props.type || 'base');
+      const config = dataSourceService.getFormConfig(props.type || 'base');
+      // 数据源表单外层 tab 的「数据定义」项 status 为 'fields'，tab-pane name 随之为 'fields'。
+      // 未显式设置 active 时，Tabs 默认取 '0'，与 'fields' 不匹配会导致打开弹窗时无默认激活项，
+      // 这里与 DataSourceConfigPanel 保持一致，默认激活「数据定义」tab。
+      return config.map((item) => ('type' in item && item.type === 'tab' ? { ...item, active: 'fields' } : item));
     }
     case 'code-block': {
       return getCodeBlockFormConfig({
@@ -242,7 +263,7 @@ const stage = computed(() => editorService.get('stage'));
 watchEffect(() => {
   if (formRef.value) {
     formRef.value.formState.stage = stage.value;
-    formRef.value.formState.services = services;
+    formRef.value.formState.services = props.services;
   }
 });
 

package/src/fields/DataSourceInput.vue

@@ -30,10 +30,10 @@
     <template #suffix>
       <Icon :icon="Coin" />
     </template>
-    <template #default="{ item }">
+    <template #default="slotProps">
       <div style="display: flex; flex-direction: column; line-height: 1.2em">
-        <div>{{ item.text }}</div>
-        <span style="font-size: 10px; color: rgba(0, 0, 0, 0.6)">{{ item.value }}</span>
+        <div>{{ slotProps?.item?.text || '' }}</div>
+        <span style="font-size: 10px; color: rgba(0, 0, 0, 0.6)">{{ slotProps?.item?.value || '' }}</span>
       </div>
     </template>
   </component>

package/src/index.ts

@@ -44,6 +44,8 @@ export { default as stageOverlayService } from './services/stageOverlay';
 export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
 export { default as depService } from './services/dep';
+export { default as componentListService } from './services/componentList';
+export { default as keybindingService } from './services/keybinding';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
 export { default as LayerPanel } from './layouts/sidebar/layer/LayerPanel.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';
@@ -74,6 +76,8 @@ export { default as CompareForm } from './components/CompareForm.vue';
 export { default as HistoryListBucket } from './layouts/history-list/Bucket.vue';
 export { default as HistoryListBucketTab } from './layouts/history-list/BucketTab.vue';
 export { default as HistoryDiffDialog } from './layouts/history-list/HistoryDiffDialog.vue';
+export { confirmHistoryAction } from './layouts/history-list/composables';
+export { useHistoryRevert } from './layouts/history-list/useHistoryRevert';
 export { default as FloatingBox } from './components/FloatingBox.vue';
 export { default as Tree } from './components/Tree.vue';
 export { default as TreeNode } from './components/TreeNode.vue';

package/src/layouts/NavMenu.vue

@@ -90,7 +90,7 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
         className: 'undo',
         icon: markRaw(Back),
         tooltip: `后退(${ctrl}+z)`,
-        disabled: () => !historyService.state.canUndo,
+        disabled: () => !historyService.canUndo('page', editorService.get('page')?.id),
         handler: () => editorService.undo(),
       });
       break;
@@ -100,7 +100,7 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
         className: 'redo',
         icon: markRaw(Right),
         tooltip: `前进(${ctrl}+Shift+z)`,
-        disabled: () => !historyService.state.canRedo,
+        disabled: () => !historyService.canRedo('page', editorService.get('page')?.id),
         handler: () => editorService.redo(),
       });
       break;

package/src/layouts/history-list/GroupRow.vue

@@ -49,6 +49,13 @@
         >{{ sourceLabel(group.source) }}</span
       >
 
+      <span
+        v-if="!merged && group.operator"
+        class="m-editor-history-list-item-operator"
+        :title="`操作人：${group.operator}`"
+        >{{ group.operator }}</span
+      >
+
       <span
         v-if="!merged && group.time"
         class="m-editor-history-list-item-time"
@@ -103,6 +110,9 @@
           :title="`操作途径：${sourceLabel(s.source)}`"
           >{{ sourceLabel(s.source) }}</span
         >
+        <span v-if="s.operator" class="m-editor-history-list-item-operator" :title="`操作人：${s.operator}`">{{
+          s.operator
+        }}</span>
         <span v-if="s.time" class="m-editor-history-list-item-time" :title="s.timeTitle || s.time">{{ s.time }}</span>
       </li>
     </ul>

package/src/layouts/history-list/HistoryDiffDialog.vue

@@ -43,9 +43,11 @@
         :data-source-type="payload.dataSourceType"
         :value="rightValue"
         :last-value="leftValue"
+        :base-form-state="compareFormState"
         :extend-state="extendState"
         :load-config="loadConfig"
         :self-diff-field-types="selfDiffFieldTypes"
+        :services="props.services"
         height="70vh"
       />
 
@@ -79,8 +81,9 @@ import { TMagicButton, TMagicDialog, TMagicRadioButton, TMagicRadioGroup, TMagic
 import type { FormState } from '@tmagic/form';
 
 import CompareForm from '@editor/components/CompareForm.vue';
+import { useServices } from '@editor/hooks/use-services';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
-import type { CompareCategory, CompareFormLoadConfig, DiffDialogPayload } from '@editor/type';
+import type { CompareCategory, CompareFormLoadConfig, DiffDialogPayload, Services } from '@editor/type';
 
 defineOptions({
   name: 'MEditorHistoryDiffDialog',
@@ -88,6 +91,8 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
+    /** 编辑器服务集合，由调用方传入（不再通过 inject('services') 获取）。 */
+    services: Services;
     /**
      * 来自 Editor 顶层的 `extendFormState`，用于扩展 MForm.formState。
      * 透传给 CompareForm，从而让差异对比时表单 item 中依赖业务上下文的
@@ -103,8 +108,10 @@ const props = withDefaults(
     isConfirm?: boolean;
     onConfirm?: () => void;
     selfDiffFieldTypes?: string[];
+    compareFormState?: FormState;
   }>(),
   {
+    services: () => useServices(),
     width: '900px',
   },
 );