chore: release vue-container/react-runtime-help/reate-iterator-conatiner

CHANGELOG.md

@@ -1,3 +1,21 @@
+## [1.6.1](https://github.com/Tencent/tmagic-editor/compare/v1.6.0...v1.6.1) (2025-10-14)
+
+
+### Bug Fixes
+
+* **core:** 异步加载数据源时，数据源事件配置失效 ([1031595](https://github.com/Tencent/tmagic-editor/commit/1031595a976b33f8e5e3a71d8c00944d4777beb1))
+* **form:** text与同行元素不对齐问题 ([cae11dc](https://github.com/Tencent/tmagic-editor/commit/cae11dce1290b9ea314c07daee30f1eb6f400681))
+* 组件声明周期函数配置中配置数据源自有方法生效 ([e400175](https://github.com/Tencent/tmagic-editor/commit/e400175ffe89ab3105e50d2ffcd702d9d2a12970))
+
+
+### Features
+
+* **data-source, editor, schema, react-runtime-help, vue-components:** 新增条件成立时隐藏的配置功能 ([51f95ae](https://github.com/Tencent/tmagic-editor/commit/51f95aef6f649851222e09e7234648f4985d1ad8))
+* **data-source:** 数据源数据变化事件监听响应支持立即执行 ([849b561](https://github.com/Tencent/tmagic-editor/commit/849b561933d74bcc68f75f15d67e0d252c5a8468))
+* **editor:** 属性配置中的样式面板样式优化 ([81aa8f1](https://github.com/Tencent/tmagic-editor/commit/81aa8f151d765bf08d2f88c334ff7c58b38aab56))
+
+
+
 # [1.6.0](https://github.com/Tencent/tmagic-editor/compare/v1.6.0-beta.6...v1.6.0) (2025-08-27)
 
 

package.json

@@ -1,9 +1,9 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "tmagic",
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@10.11.1",
+  "packageManager": "pnpm@10.18.2",
   "scripts": {
     "bootstrap": "pnpm i && pnpm build",
     "clean:top": "rimraf */**/dist */**/types */dist coverage dwt* temp packages/cli/lib",
@@ -47,15 +47,15 @@
     "@types/node": "24.0.10",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vitest/coverage-v8": "^2.1.9",
-    "@vue/compiler-sfc": "^3.5.13",
+    "@vue/compiler-sfc": "catalog:",
     "c8": "^7.14.0",
     "commitizen": "^4.3.1",
     "conventional-changelog-cli": "^5.0.0",
     "cosmiconfig": "^8.3.6",
     "cz-conventional-changelog": "^3.3.0",
-    "element-plus": "^2.9.11",
+    "element-plus": "^2.11.4",
     "enquirer": "^2.4.1",
-    "eslint": "^9.34.0",
+    "eslint": "^9.37.0",
     "execa": "^4.1.0",
     "highlight.js": "^11.11.1",
     "husky": "^9.1.7",
@@ -76,7 +76,7 @@
     "vitepress": "^1.6.4",
     "vitest": "^3.2.4",
     "vue": "catalog:",
-    "vue-tsc": "^3.0.6"
+    "vue-tsc": "^3.1.1"
   },
   "config": {
     "commitizen": {

packages/cli/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/cli",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

packages/core/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/core",
   "type": "module",
   "main": "dist/tmagic-core.umd.cjs",

packages/core/src/App.ts

@@ -167,8 +167,13 @@ class App extends EventEmitter {
     this.setPage(pageId);
 
     if (this.dataSourceManager) {
-      const dataSourceList = Array.from(this.dataSourceManager.dataSourceMap.values());
+      if (this.dataSourceManager.isAllDataSourceRegistered()) {
-      this.eventHelper?.bindDataSourceEvents(dataSourceList);
+        this.eventHelper?.bindDataSourceEvents();
+      } else {
+        this.dataSourceManager.once('registered-all', () => {
+          this.eventHelper?.bindDataSourceEvents();
+        });
+      }
     }
   }
 
@@ -259,15 +264,15 @@ class App extends EventEmitter {
    * @param eventConfig 代码动作的配置
    * @returns void
    */
-  public async runCode(codeId: Id, params: Record<string, any>, args: any[], flowState?: FlowState) {
+  public async runCode(codeId: Id, params: Record<string, any>, args: any[], flowState?: FlowState, node?: Node) {
     if (!codeId || isEmpty(this.codeDsl)) return;
     const content = this.codeDsl?.[codeId]?.content;
     if (typeof content === 'function') {
       try {
-        await content({ app: this, params, eventParams: args, flowState });
+        await content({ app: this, params, eventParams: args, flowState, node });
       } catch (e: any) {
         if (this.errorHandler) {
-          this.errorHandler(e, undefined, { type: 'run-code', codeId, params, eventParams: args, flowState });
+          this.errorHandler(e, undefined, { type: 'run-code', codeId, params, eventParams: args, flowState, node });
         } else {
           throw e;
         }
@@ -281,6 +286,7 @@ class App extends EventEmitter {
     params: Record<string, any>,
     args: any[],
     flowState?: FlowState,
+    node?: Node,
   ) {
     if (!dsId || !methodName) return;
 
@@ -293,13 +299,13 @@ class App extends EventEmitter {
 
       const method = methods.find((item) => item.name === methodName);
       if (method && typeof method.content === 'function') {
-        await method.content({ app: this, params, dataSource, eventParams: args, flowState });
+        await method.content({ app: this, params, dataSource, eventParams: args, flowState, node });
       } else if (typeof dataSource[methodName] === 'function') {
         await dataSource[methodName]();
       }
     } catch (e: any) {
       if (this.errorHandler) {
-        this.errorHandler(e, dataSource, { type: 'data-source-method', params, eventParams: args, flowState });
+        this.errorHandler(e, dataSource, { type: 'data-source-method', params, eventParams: args, flowState, node });
       } else {
         throw e;
       }

packages/core/src/EventHelper.ts

@@ -113,21 +113,23 @@ export default class EventHelper extends EventEmitter {
   }
 
   public removeNodeEvents() {
-    Array.from(this.nodeEventList.keys()).forEach((handler) => {
+    for (const handler of Array.from(this.nodeEventList.keys())) {
       const name = this.nodeEventList.get(handler);
       name && this.off(name, handler);
-    });
+    }
 
     this.nodeEventList.clear();
   }
 
-  public bindDataSourceEvents(dataSourceList: DataSource[]) {
+  public bindDataSourceEvents() {
+    const dataSourceList = Array.from(this.app.dataSourceManager?.dataSourceMap.values() || []);
+
     this.removeDataSourceEvents(dataSourceList);
 
-    dataSourceList.forEach((dataSource) => {
+    for (const dataSource of dataSourceList) {
       const dataSourceEvent = this.dataSourceEventList.get(dataSource.id) ?? new Map<string, (args: any) => void>();
 
-      (dataSource.schema.events || []).forEach((event) => {
+      for (const event of dataSource.schema.events || []) {
         const [prefix, ...path] = event.name?.split('.') || [];
         if (!prefix) return;
         const handler = (...args: any[]) => {
@@ -141,9 +143,9 @@ export default class EventHelper extends EventEmitter {
           // 数据源自定义事件
           dataSource.on(prefix, handler);
         }
-      });
+      }
       this.dataSourceEventList.set(dataSource.id, dataSourceEvent);
-    });
+    }
   }
 
   public removeDataSourceEvents(dataSourceList: DataSource[]) {
@@ -152,20 +154,20 @@ export default class EventHelper extends EventEmitter {
     }
 
     // 先清掉之前注册的事件，重新注册
-    dataSourceList.forEach((dataSource) => {
+    for (const dataSource of dataSourceList) {
       const dataSourceEvent = this.dataSourceEventList.get(dataSource.id)!;
 
       if (!dataSourceEvent) return;
 
-      Array.from(dataSourceEvent.keys()).forEach((eventName) => {
+      for (const eventName of Array.from(dataSourceEvent.keys())) {
         const [prefix, ...path] = eventName.split('.');
         if (prefix === DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX) {
           dataSource.offDataChange(path.join('.'), dataSourceEvent.get(eventName)!);
         } else {
           dataSource.off(prefix, dataSourceEvent.get(eventName)!);
         }
-      });
+      }
-    });
+    }
 
     this.dataSourceEventList.clear();
   }

packages/core/src/Node.ts

@@ -18,7 +18,6 @@
 
 import { EventEmitter } from 'events';
 
-import { DataSource } from '@tmagic/data-source';
 import type { EventConfig, MNode } from '@tmagic/schema';
 import { HookCodeType, HookType, NODE_DISABLE_CODE_BLOCK_KEY } from '@tmagic/schema';
 
@@ -141,23 +140,10 @@ class Node extends EventEmitter {
     for (const item of hookData.hookData) {
       const { codeType = HookCodeType.CODE, codeId, params: itemParams = {} } = item;
 
-      let functionContent: ((...args: any[]) => any) | string | undefined;
+      if (codeType === HookCodeType.CODE && typeof codeId === 'string') {
-      const functionParams: { app: TMagicApp; node: Node; params: Record<string, any>; dataSource?: DataSource } = {
+        await this.app.runCode(codeId, params || itemParams, [], undefined, this);
-        app: this.app,
-        node: this,
-        params: params || itemParams,
-      };
-
-      if (codeType === HookCodeType.CODE && typeof codeId === 'string' && this.app.codeDsl?.[codeId]) {
-        functionContent = this.app.codeDsl[codeId].content;
       } else if (codeType === HookCodeType.DATA_SOURCE_METHOD && Array.isArray(codeId) && codeId.length > 1) {
-        const dataSource = this.app.dataSourceManager?.get(codeId[0]);
+        await this.app.runDataSourceMethod(codeId[0], codeId[1], params || itemParams, [], undefined, this);
-        functionContent = dataSource?.methods.find((method) => method.name === codeId[1])?.content;
-        functionParams.dataSource = dataSource;
-      }
-
-      if (functionContent && typeof functionContent === 'function') {
-        await functionContent(functionParams);
       }
     }
   }

packages/data-source/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/data-source",
   "type": "module",
   "main": "dist/tmagic-data-source.umd.cjs",

packages/data-source/src/DataSourceManager.ts

@@ -22,7 +22,13 @@ import EventEmitter from 'events';
 import { cloneDeep } from 'lodash-es';
 
 import type { DataSourceSchema, default as TMagicApp, DisplayCond, Id, MNode } from '@tmagic/core';
-import { compiledNode, getDefaultValueFromFields, NODE_CONDS_KEY, NODE_DISABLE_DATA_SOURCE_KEY } from '@tmagic/core';
+import {
+  compiledNode,
+  getDefaultValueFromFields,
+  NODE_CONDS_KEY,
+  NODE_CONDS_RESULT_KEY,
+  NODE_DISABLE_DATA_SOURCE_KEY,
+} from '@tmagic/core';
 
 import { SimpleObservedData } from './observed-data/SimpleObservedData';
 import { DataSource, HttpDataSource } from './data-sources';
@@ -238,8 +244,9 @@ class DataSourceManager extends EventEmitter {
         Array.isArray(items) && deep ? items.map((item) => this.compiledNode(item, sourceId, deep)) : items;
     }
 
-    if (node.condResult === false) return newNode;
+    if (node.condResult === false || (typeof node.condResult === 'undefined' && node[NODE_CONDS_RESULT_KEY])) {
-    if (node.visible === false) return newNode;
+      return newNode;
+    }
 
     // 编译函数这里作为参数，方便后续支持自定义编译
     return compiledNode(
@@ -255,11 +262,24 @@ class DataSourceManager extends EventEmitter {
    * @param {{ [NODE_CONDS_KEY]?: DisplayCond[] }} node 显示条件组配置
    * @returns {boolean} 是否显示
    */
-  public compliedConds(node: { [NODE_CONDS_KEY]?: DisplayCond[]; [NODE_DISABLE_DATA_SOURCE_KEY]?: boolean }) {
+  public compliedConds(
+    node: {
+      [NODE_CONDS_KEY]?: DisplayCond[];
+      [NODE_CONDS_RESULT_KEY]?: boolean;
+      [NODE_DISABLE_DATA_SOURCE_KEY]?: boolean;
+    },
+    data = this.data,
+  ) {
     if (node[NODE_DISABLE_DATA_SOURCE_KEY]) {
       return true;
     }
-    return compliedConditions(node, this.data);
+
+    const result = compliedConditions(node, data);
+
+    if (!node[NODE_CONDS_RESULT_KEY]) {
+      return result;
+    }
+    return !result;
   }
 
   /**
@@ -271,7 +291,11 @@ class DataSourceManager extends EventEmitter {
    */
   public compliedIteratorItemConds(
     itemData: any,
-    node: { [NODE_CONDS_KEY]?: DisplayCond[] },
+    node: {
+      [NODE_CONDS_KEY]?: DisplayCond[];
+      [NODE_CONDS_RESULT_KEY]?: boolean;
+      [NODE_DISABLE_DATA_SOURCE_KEY]?: boolean;
+    },
     dataSourceField: string[] = [],
   ) {
     const [dsId, ...keys] = dataSourceField;
@@ -279,7 +303,7 @@ class DataSourceManager extends EventEmitter {
     if (!ds) return true;
 
     const ctxData = createIteratorContentData(itemData, ds.id, keys, this.data);
-    return compliedConditions(node, ctxData);
+    return this.compliedConds(node, ctxData);
   }
 
   public compliedIteratorItems(itemData: any, nodes: MNode[], dataSourceField: string[] = []): MNode[] {

packages/data-source/src/observed-data/DeepObservedData.ts

@@ -23,9 +23,9 @@ export class DeepObservedData extends ObservedData {
   update = (data: any, path?: string) => {
     this.state?.update(path ?? '', data);
   };
-  on = (path: string, callback: (newVal: any) => void) => {
+  on = (path: string, callback: (newVal: any) => void, options?: { immediate?: boolean }) => {
     // subscribe 会立即执行一次，ignoreFirstCall 会忽略第一次执行
-    const unsubscribe = this.state!.subscribe(path, ignoreFirstCall(callback));
+    const unsubscribe = this.state!.subscribe(path, options?.immediate ? callback : ignoreFirstCall(callback));
 
     // 把取消监听的函数保存下来，供 off 时调用
     const pathSubscribers = this.subscribers.get(path) ?? new Map<Function, () => void>();

packages/data-source/src/observed-data/ObservedData.ts

@@ -1,7 +1,7 @@
 export abstract class ObservedData {
   abstract update(data: any, path?: string): void;
 
-  abstract on(path: string, callback: (newVal: any) => void): void;
+  abstract on(path: string, callback: (newVal: any) => void, options?: { immediate?: boolean }): void;
 
   abstract off(path: string, callback: (newVal: any) => void): void;
 

packages/data-source/src/observed-data/SimpleObservedData.ts

@@ -32,7 +32,10 @@ export class SimpleObservedData extends ObservedData {
     this.event.emit('', changeEvent);
   }
 
-  on(path: string, callback: (newVal: any) => void): void {
+  on(path: string, callback: (newVal: any) => void, options?: { immediate?: boolean }): void {
+    if (options?.immediate) {
+      callback(this.getData(path));
+    }
     this.event.on(path, callback);
   }
 

packages/dep/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/dep",
   "type": "module",
   "main": "dist/tmagic-dep.umd.cjs",

packages/design/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/design",
   "type": "module",
   "sideEffects": [

packages/editor/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [

packages/editor/src/fields/DataSourceFieldSelect/Index.vue

@@ -32,7 +32,6 @@
       content="选择数据源"
     >
       <TMagicButton
-        style="margin-left: 5px"
         :type="showDataSourceFieldSelect ? 'primary' : 'default'"
         :size="size"
         @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"

packages/editor/src/fields/StyleSetter/Index.vue

@@ -1,14 +1,19 @@
 <template>
-  <div class="m-fields-style-setter">
+  <TMagicCollapse class="m-fields-style-setter" :model-value="collapseValue">
-    <TMagicCollapse :model-value="collapseValue">
+    <template v-for="(item, index) in list" :key="index">
-      <template v-for="(item, index) in list" :key="index">
+      <TMagicCollapseItem :name="`${index}`">
-        <TMagicCollapseItem :name="`${index}`">
+        <template #title><MIcon :icon="Grid"></MIcon>{{ item.title }}</template>
-          <template #title><MIcon :icon="Grid"></MIcon>{{ item.title }}</template>
+        <component
-          <component v-if="item.component" :is="item.component" :values="model[name]" @change="change"></component>
+          v-if="item.component"
-        </TMagicCollapseItem>
+          :is="item.component"
-      </template>
+          :values="model[name]"
-    </TMagicCollapse>
+          :size="size"
-  </div>
+          :disabled="disabled"
+          @change="change"
+        ></component>
+      </TMagicCollapseItem>
+    </template>
+  </TMagicCollapse>
 </template>
 
 <script setup lang="ts">

packages/editor/src/fields/StyleSetter/components/BackgroundPosition.vue

@@ -6,13 +6,21 @@
         :key="index"
         link
         :class="model[name] === item.value && 'btn-active'"
+        :disabled="disabled"
         @click="changeHandler(item.value)"
       >
         <div :class="['position-icon', item.class, model[name] === item.value && 'active']"></div>
       </TMagicButton>
     </div>
     <div class="custom-value">
-      <TMagicInput v-model="model[name]" size="small" placeholder="自定义背景位置" clearable @change="changeHandler">
+      <TMagicInput
+        v-model="model[name]"
+        placeholder="自定义背景位置"
+        clearable
+        :size="size"
+        :disabled="disabled"
+        @change="changeHandler"
+      >
       </TMagicInput>
     </div>
   </div>

packages/editor/src/fields/StyleSetter/components/Border.vue

@@ -30,7 +30,7 @@
       </div>
     </div>
     <div class="border-value-container">
-      <MContainer :config="config" :model="model" @change="change"></MContainer>
+      <MContainer :config="config" :model="model" :size="size" :disabled="disabled" @change="change"></MContainer>
     </div>
   </div>
 </template>
@@ -67,7 +67,6 @@ const config = computed(() => ({
     {
       name: `border${direction.value}Style`,
       text: '边框样式',
-
       labelWidth: '68px',
       type: 'data-source-field-select',
       fieldConfig: {
@@ -90,6 +89,8 @@ const emit = defineEmits<{
 withDefaults(
   defineProps<{
     model: FormValue;
+    disabled?: boolean;
+    size?: 'large' | 'default' | 'small';
   }>(),
   {},
 );

packages/editor/src/fields/StyleSetter/components/Box.vue

@@ -5,9 +5,10 @@
       <span class="next-input">
         <input
           v-model="model[item.name]"
-          :title="model[item.name]"
-          @change="change($event, item.name)"
           placeholder="0"
+          :title="model[item.name]"
+          :disabled="disabled"
+          @change="change($event, item.name)"
         />
       </span>
     </div>
@@ -60,6 +61,8 @@ const emit = defineEmits<{
 
 withDefaults(
   defineProps<{
+    disabled?: boolean;
+    size?: 'large' | 'default' | 'small';
     model: FormValue;
   }>(),
   {},

packages/editor/src/fields/StyleSetter/components/Position.vue

@@ -4,9 +4,10 @@
       <span class="next-input">
         <input
           v-model="model[item.name]"
-          :title="model[item.name]"
-          @change="change($event, item.name)"
           placeholder="0"
+          :title="model[item.name]"
+          :disabled="disabled"
+          @change="change($event, item.name)"
         />
       </span>
     </div>
@@ -42,6 +43,8 @@ const emit = defineEmits<{
 withDefaults(
   defineProps<{
     model: FormValue;
+    disabled?: boolean;
+    size?: 'large' | 'default' | 'small';
   }>(),
   {},
 );

packages/editor/src/fields/StyleSetter/pro/Background.vue

@@ -1,5 +1,5 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
 </template>
 
 <script lang="ts" setup>
@@ -11,7 +11,11 @@ import type { StyleSchema } from '@tmagic/schema';
 import BackgroundPosition from '../components/BackgroundPosition.vue';
 import { BackgroundNoRepeat, BackgroundRepeat, BackgroundRepeatX, BackgroundRepeatY } from '../icons/background-repeat';
 
-defineProps<{ values: Partial<StyleSchema> }>();
+defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];

packages/editor/src/fields/StyleSetter/pro/Border.vue

@@ -1,6 +1,6 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
-  <Border :model="values" @change="change"></Border>
+  <Border :model="values" :size="size" :disabled="disabled" @change="change"></Border>
 </template>
 
 <script lang="ts" setup>
@@ -9,7 +9,11 @@ import type { StyleSchema } from '@tmagic/schema';
 
 import Border from '../components/Border.vue';
 
-defineProps<{ values: Partial<StyleSchema> }>();
+defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];

packages/editor/src/fields/StyleSetter/pro/Font.vue

@@ -1,5 +1,5 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
 </template>
 
 <script lang="ts" setup>
@@ -10,7 +10,11 @@ import type { StyleSchema } from '@tmagic/schema';
 
 import { AlignCenter, AlignLeft, AlignRight } from '../icons/text-align';
 
-defineProps<{ values: Partial<StyleSchema> }>();
+defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];

packages/editor/src/fields/StyleSetter/pro/Layout.vue

@@ -1,6 +1,12 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
-  <Box v-show="!['fixed', 'absolute'].includes(values.position)" :model="values" @change="change"></Box>
+  <Box
+    v-show="!['fixed', 'absolute'].includes(values.position)"
+    :model="values"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+  ></Box>
 </template>
 
 <script lang="ts" setup>
@@ -28,6 +34,8 @@ import {
 
 defineProps<{
   values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{

packages/editor/src/fields/StyleSetter/pro/Position.vue

@@ -1,12 +1,16 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
 </template>
 
 <script lang="ts" setup>
 import { ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
-const props = defineProps<{ values: Partial<StyleSchema> }>();
+const props = defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
 
 const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];

packages/editor/src/layouts/page-bar/PageList.vue

@@ -11,19 +11,21 @@
       :width="160"
       :destroy-on-close="true"
     >
-      <div>
+      <div class="page-bar-popover-wrapper">
-        <slot name="page-list-popover" :list="list">
+        <div class="page-bar-popover-inner">
-          <ToolButton
+          <slot name="page-list-popover" :list="list">
-            v-for="(item, index) in list"
+            <ToolButton
-            :data="{
+              v-for="(item, index) in list"
-              type: 'button',
+              :data="{
-              text: item.devconfig?.tabName || item.name || item.id,
+                type: 'button',
-              className: item.id === page?.id ? 'active' : '',
+                text: item.devconfig?.tabName || item.name || item.id,
-              handler: () => switchPage(item.id),
+                className: item.id === page?.id ? 'active' : '',
-            }"
+                handler: () => switchPage(item.id),
-            :key="index"
+              }"
-          ></ToolButton>
+              :key="index"
-        </slot>
+            ></ToolButton>
+          </slot>
+        </div>
       </div>
       <template #reference>
         <TMagicIcon class="m-editor-page-list-menu-icon">

packages/editor/src/theme/component-list-panel.scss

@@ -11,6 +11,17 @@
         border-bottom: 1px solid $border-color;
         margin-bottom: 10px;
       }
+
+      > .el-collapse-item__header {
+        padding: 0 10px;
+        box-sizing: border-box;
+      }
+    }
+
+    .el-collapse-item__title {
+      display: flex;
+      align-items: center;
+      gap: 3px;
     }
 
     .el-collapse-item__header,

packages/editor/src/theme/data-source-field-select.scss

@@ -13,4 +13,8 @@
       flex: 2;
     }
   }
+  .tmagic-design-button {
+    margin-left: 5px;
+    padding: 5px 8px;
+  }
 }

packages/editor/src/theme/page-bar.scss

@@ -92,6 +92,11 @@
     padding: 4px 0;
   }
 
+  .page-bar-popover-wrapper {
+    max-height: calc(100vh - $page-bar-height - 20px);
+    overflow: auto;
+  }
+
   .menu-item {
     cursor: pointer;
     transition: all 0.2s ease 0s;

packages/editor/src/theme/props-panel.scss

@@ -72,11 +72,6 @@
       align-items: center;
       border-bottom: 2px solid $border-color;
     }
-
-    .tmagic-design-form {
-      padding-right: 10px;
-      padding-left: 10px;
-    }
   }
 
   .m-editor-props-panel-src-icon {

packages/editor/src/theme/style-setter/index.scss

@@ -8,12 +8,25 @@
   .tmagic-design-collapse-item {
     > .el-collapse-item__header {
       background-color: #f2f3f7;
-      height: 36px;
+      height: 26px;
-      padding: 10px;
+      min-height: 26px;
+      line-height: 26px;
+      padding: 0 20px;
+      box-sizing: border-box;
     }
 
     .el-collapse-item__wrap {
-      padding: 0 10px;
+      padding: 10px 20px;
+    }
+
+    .el-collapse-item__title {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+    }
+
+    .el-collapse-item__content {
+      padding: 0;
     }
   }
 }

packages/editor/src/utils/props.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
@@ -17,7 +16,12 @@
  * limitations under the License.
  */
 
-import { NODE_CONDS_KEY, NODE_DISABLE_CODE_BLOCK_KEY, NODE_DISABLE_DATA_SOURCE_KEY } from '@tmagic/core';
+import {
+  NODE_CONDS_KEY,
+  NODE_CONDS_RESULT_KEY,
+  NODE_DISABLE_CODE_BLOCK_KEY,
+  NODE_DISABLE_DATA_SOURCE_KEY,
+} from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
 import type { FormConfig, FormState, TabConfig, TabPaneConfig } from '@tmagic/form';
 
@@ -163,8 +167,20 @@ export const advancedTabConfig: TabPaneConfig = {
 
 export const displayTabConfig: TabPaneConfig = {
   title: '显示条件',
-  display: (_vm: FormState, { model }: any) => model.type !== 'page',
+  display: (_state: FormState, { model }: any) => model.type !== 'page',
   items: [
+    {
+      name: NODE_CONDS_RESULT_KEY,
+      type: 'select',
+      text: '条件成立时',
+      defaultValue: false,
+      options: [
+        { text: '显示', value: false },
+        { text: '隐藏', value: true },
+      ],
+      extra: (_state, { model }) =>
+        `条件成立时${model[NODE_CONDS_RESULT_KEY] ? '隐藏' : '显示'}，不成立时${model[NODE_CONDS_RESULT_KEY] ? '显示' : '隐藏'}；<br />同一条件组内的所有条件配置同时成立时表示该条件组成立，任意一个条件组成立时表示条件成立(条件组内为且的关系，条件组间为或的关系)；<br />条件为空时表示成立；`,
+    },
     {
       type: 'display-conds',
       name: NODE_CONDS_KEY,

packages/element-plus-adapter/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/element-plus-adapter",
   "type": "module",
   "main": "dist/tmagic-element-plus-adapter.umd.cjs",

packages/form-schema/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/form-schema",
   "type": "module",
   "main": "dist/tmagic-form-schema.umd.cjs",

packages/form/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [

packages/form/src/fields/RadioGroup.vue

@@ -9,12 +9,12 @@
     >
       <TMagicTooltip v-if="option.tooltip" placement="top-start" :content="option.tooltip">
         <div>
-          <TMagicIcon v-if="option.icon" :size="'16'"><component :is="option.icon"></component></TMagicIcon>
+          <TMagicIcon v-if="option.icon" :size="iconSize"><component :is="option.icon"></component></TMagicIcon>
           <span>{{ option.text }}</span>
         </div>
       </TMagicTooltip>
       <div v-else>
-        <TMagicIcon v-if="option.icon" :size="'16'"><component :is="option.icon"></component></TMagicIcon>
+        <TMagicIcon v-if="option.icon" :size="iconSize"><component :is="option.icon"></component></TMagicIcon>
         <span>{{ option.text }}</span>
       </div>
     </component>
@@ -49,4 +49,14 @@ const clickHandler = (item: any) => {
 };
 
 useAddField(props.prop);
+
+const iconSize = computed(() => {
+  if (props.size === 'small') {
+    return '12';
+  }
+  if (props.size === 'large') {
+    return '16';
+  }
+  return '14';
+});
 </script>

packages/form/src/fields/Text.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%">
+  <div class="m-fields-text">
     <TMagicInput
       v-model="model[name]"
       ref="input"

packages/form/src/theme/text.scss

@@ -1,3 +1,9 @@
+.m-fields-text {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
 .m-form-validate__warning {
   color: var(--el-color-warning);
   font-size: 12px;

packages/schema/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/schema",
   "type": "module",
   "main": "dist/tmagic-schema.umd.cjs",

packages/schema/src/index.ts

@@ -47,6 +47,8 @@ export enum NodeType {
 }
 
 export const NODE_CONDS_KEY = 'displayConds';
+export const NODE_CONDS_RESULT_KEY = 'displayCondsResultReverse';
+
 export const NODE_DISABLE_DATA_SOURCE_KEY = '_tmagic_node_disabled_data_source';
 export const NODE_DISABLE_CODE_BLOCK_KEY = '_tmagic_node_disabled_code_block';
 
@@ -130,6 +132,7 @@ export interface MComponent {
   /** 组件根Dom的style */
   style?: StyleSchema;
   [NODE_CONDS_KEY]?: DisplayCond[];
+  [NODE_CONDS_RESULT_KEY]?: boolean;
   [key: string]: any;
 }
 

packages/stage/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/stage",
   "type": "module",
   "main": "dist/tmagic-stage.umd.cjs",

packages/table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/table",
   "type": "module",
   "sideEffects": [

packages/tdesign-vue-next-adapter/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/tdesign-vue-next-adapter",
   "type": "module",
   "main": "dist/tmagic-tdesign-vue-next-adapter.umd.cjs",

packages/utils/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.6.1",
   "name": "@tmagic/utils",
   "type": "module",
   "main": "dist/tmagic-utils.umd.cjs",

playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tmagic-playground",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "type": "module",
   "private": true,
   "scripts": {
@@ -12,11 +12,11 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
-    "@tmagic/core": "1.6.0",
+    "@tmagic/core": "1.6.1",
-    "@tmagic/editor": "1.6.0",
+    "@tmagic/editor": "1.6.1",
-    "@tmagic/element-plus-adapter": "1.6.0",
+    "@tmagic/element-plus-adapter": "1.6.1",
     "@tmagic/tmagic-form-runtime": "1.1.3",
-    "element-plus": "^2.11.1",
+    "element-plus": "^2.11.4",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.52.2",
     "serialize-javascript": "^6.0.2",
@@ -31,7 +31,7 @@
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitejs/plugin-vue-jsx": "^5.1.0",
     "@vue/compiler-sfc": "catalog:",
-    "sass": "^1.91.0",
+    "lightningcss": "^1.30.2",
     "terser": "^5.43.1",
     "typescript": "catalog:",
     "unplugin-auto-import": "^20.0.0",

playground/vite.config.ts

@@ -116,5 +116,6 @@ export default defineConfig({
 
   build: {
     sourcemap: true,
+    cssMinify: 'lightningcss'
   },
 });

pnpm-workspace.yaml

@@ -7,8 +7,8 @@ packages:
   - 'eslint-config'
 
 catalog:
-  vue: ^3.5.20
+  vue: ^3.5.22
-  '@vue/compiler-sfc': ^3.5.20
+  '@vue/compiler-sfc': ^3.5.22
-  vite: ^7.1.3
+  vite: ^7.1.9
-  typescript: "^5.9.2"
+  typescript: "^5.9.3"
   

react-components/iterator-container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0",
+  "version": "0.1.1",
   "name": "@tmagic/react-iterator-container",
   "type": "module",
   "main": "src/index.ts",

react-components/iterator-container/src/IteratorContainer.tsx

@@ -56,11 +56,10 @@ const IteratorContainer: React.FC<IteratorContainerProps> = ({
 
   const MagicUiComp = app?.resolveComponent('container');
 
-  const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(
+  const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(id || config.id || '', {
-    id || config.id || '',
     iteratorContainerId,
     iteratorIndex,
-  );
+  });
 
   iteratorContainerNode?.resetNodes();
 

runtime/react-runtime-help/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "0.2.1",
   "name": "@tmagic/react-runtime-help",
   "type": "module",
   "sideEffects": false,

runtime/react-runtime-help/src/hooks/use-app.ts

@@ -20,7 +20,7 @@ import { useContext, useEffect, useState } from 'react';
 
 import type TMagicApp from '@tmagic/core';
 import type { Id, MNodeInstance, Node as TMagicNode } from '@tmagic/core';
-import { isDslNode } from '@tmagic/core';
+import { isDslNode, NODE_CONDS_RESULT_KEY } from '@tmagic/core';
 
 import AppContent from '../AppContent';
 
@@ -96,8 +96,13 @@ export const useApp = ({ methods = {}, config, iteratorContainerId, iteratorInde
   }
 
   const display = <T extends MNodeInstance>(config: T) => {
-    if (config.visible === false) return false;
+    if (
-    if (config.condResult === false) return false;
+      config.visible === false ||
+      config.condResult === false ||
+      (typeof config.condResult === 'undefined' && config[NODE_CONDS_RESULT_KEY])
+    ) {
+      return false;
+    }
 
     const displayCfg = config.display;
 

runtime/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-react",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "type": "module",
   "private": true,
   "engines": {
@@ -16,16 +16,16 @@
     "build:playground": "node scripts/build.mjs --type=playground"
   },
   "dependencies": {
-    "@tmagic/core": "1.6.0",
+    "@tmagic/core": "1.6.1",
     "@tmagic/react-runtime-help": "0.2.0",
-    "@tmagic/stage": "1.6.0",
+    "@tmagic/stage": "1.6.1",
     "axios": "^1.11.0",
     "qrcode": "^1.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@tmagic/cli": "1.6.0",
+    "@tmagic/cli": "1.6.1",
     "@types/fs-extra": "^11.0.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

runtime/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-vue",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "type": "module",
   "private": true,
   "engines": {
@@ -16,14 +16,14 @@
     "build:playground": "node scripts/build.mjs --type=playground"
   },
   "dependencies": {
-    "@tmagic/core": "1.6.0",
+    "@tmagic/core": "1.6.1",
-    "@tmagic/stage": "1.6.0",
+    "@tmagic/stage": "1.6.1",
     "@tmagic/vue-runtime-help": "^1.2.0",
     "axios": "^1.11.0",
     "vue": "catalog:"
   },
   "devDependencies": {
-    "@tmagic/cli": "1.6.0",
+    "@tmagic/cli": "1.6.1",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^24.0.10",
     "@vitejs/plugin-legacy": "^7.2.1",
@@ -32,10 +32,10 @@
     "@vue/compiler-sfc": "catalog:",
     "fs-extra": "^11.3.1",
     "minimist": "^1.2.8",
+    "lightningcss": "^1.30.2",
     "rimraf": "^3.0.2",
     "rollup": "4.44.1",
     "rollup-plugin-external-globals": "^0.13.0",
-    "sass": "^1.91.0",
     "terser": "^5.43.1",
     "typescript": "catalog:",
     "vite": "catalog:"

runtime/vue/vite.config.ts

@@ -66,6 +66,7 @@ export default defineConfig({
   },
 
   build: {
+    cssMinify: 'lightningcss',
     rollupOptions: {
       input: {
         page: path.resolve(__dirname, './page/index.html'),

vue-components/container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0",
+  "version": "1.2.1",
   "name": "@tmagic/vue-container",
   "type": "module",
   "main": "src/index.ts",

vue-components/container/src/Component.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, inject, type PropType, provide } from 'vue-demi';
 
 import type TMagicApp from '@tmagic/core';
-import { Id, IS_DSL_NODE_KEY, MComponent } from '@tmagic/core';
+import { Id, IS_DSL_NODE_KEY, MComponent, NODE_CONDS_RESULT_KEY } from '@tmagic/core';
 import { useComponent, useComponentStatus, useNode, type UserRenderFunction } from '@tmagic/vue-runtime-help';
 
 export default defineComponent({
@@ -56,10 +56,13 @@ export default defineComponent({
     const { style, className } = componentStatusStore;
 
     return () => {
-      if (props.config.visible === false) return null;
+      if (
-      if (props.config.condResult === false) return null;
+        props.config.visible === false ||
-
+        props.config.condResult === false ||
-      if (typeof props.config.display === 'function' && props.config.display({ app, node }) === false) {
+        // 没有配置条件时，不会编译出condResult，所以这里是undefined
+        (typeof props.config.condResult === 'undefined' && props.config[NODE_CONDS_RESULT_KEY]) ||
+        (typeof props.config.display === 'function' && props.config.display({ app, node }) === false)
+      ) {
         return null;
       }