@tmagic/editor 1.8.0-beta.12 → 1.8.0-beta.14

package/package.json

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

package/src/Editor.vue

@@ -4,6 +4,7 @@
     :page-bar-sort-options="pageBarSortOptions"
     :page-filter-function="pageFilterFunction"
     :hide-sidebar="hideSidebar"
+    :theme="theme"
   >
     <template #header>
       <slot name="header"></slot>
@@ -135,9 +136,10 @@
 <script lang="ts" setup>
 import { EventEmitter } from 'events';
 
-import { provide, ref } from 'vue';
+import { computed, provide, ref } from 'vue';
 
 import type { MApp } from '@tmagic/core';
+import { M_THEME_KEY } from '@tmagic/design';
 
 import Framework from './layouts/Framework.vue';
 import TMagicNavMenu from './layouts/NavMenu.vue';
@@ -241,6 +243,15 @@ provide(ENABLE_PROPS_FORM_VALIDATE, props.enablePropsFormValidate ?? false);
  * 与 PropsPanel 通过 `:extend-state` 显式传入的方式保持等价。
  */
 provide('extendFormState', props.extendFormState);
+
+// 用 computed 包一层再 provide，否则传下去的是 provide 那一刻的值快照，
+// props.isLargeStageContainer 后续变化不会同步到子孙（如 @tmagic/design/ColorPicker）。
+// 子孙侧 `inject<ComputedRef<boolean>>('isLargeStageContainer', computed(() => false))`
+// 用 `.value` 或模板自动解包读取即可拿到最新值。
+provide(
+  'isLargeStageContainer',
+  computed(() => props.isLargeStageContainer),
+);
 /**
  * 提供 PropsPanel 主属性表单的 formState getter，供历史差异弹窗复用，
  * 让 CompareForm 与 PropsPanel 的 filterFunction 上下文保持一致。
@@ -256,6 +267,16 @@ provide('historyListExtraTabs', props.historyListExtraTabs);
 
 provide<EventBus>('eventBus', new EventEmitter());
 
+/**
+ * 把当前主题以响应式 ref 形式 provide 给后代，供包含 `Teleport` 的组件
+ * （如 `TMagicPopover` / `FloatingBox` / `ContentMenu`）在传送目标上挂 `m-theme--<theme>`
+ * 类，让主题级 CSS 变量在 portal 节点上也能命中。详见 `@tmagic/design/theme.ts`。
+ */
+provide(
+  M_THEME_KEY,
+  computed(() => props.theme ?? ''),
+);
+
 const propsPanelMountedHandler = (e: InstanceType<typeof FormPanel>) => {
   propsPanelRef.value = e;
   emit('props-panel-mounted', e);

package/src/components/CompareForm.vue

@@ -19,107 +19,36 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, provide, type Ref, ref, type ShallowRef, useTemplateRef, watch, watchEffect } from 'vue';
+import { computed, type Ref, type ShallowRef } from 'vue';
 import { isEqual } from 'lodash-es';
 
-import { type CodeBlockContent, type DataSourceSchema, HookType, type MNode } from '@tmagic/core';
-import { type FieldSize } from '@tmagic/design';
-import { type FormConfig, type FormState, type FormValue, MForm } from '@tmagic/form';
+import { type CodeBlockContent, HookType } from '@tmagic/core';
+import { type FormConfig, type FormValue, MForm } from '@tmagic/form';
 
-import type { CompareCategory, CompareFormLoadConfig, Services } from '@editor/type';
-import { getCodeBlockFormConfig } from '@editor/utils/code-block';
+import { useCompareForm } from '@editor/hooks/use-compare-form';
+import type { CompareFormBaseProps } from '@editor/type';
 
 defineOptions({
   name: 'MEditorCompareForm',
 });
 
 const props = withDefaults(
-  defineProps<{
-    /** 当前值（修改后的值） */
-    value: Partial<MNode> | Partial<DataSourceSchema> | Partial<CodeBlockContent> | Record<string, any>;
-    /** 用于对比的旧值（修改前的值） */
-    lastValue?: Partial<MNode> | Partial<DataSourceSchema> | Partial<CodeBlockContent> | Record<string, any>;
-    /**
-     * 类型说明：
-     * - `category` 为 `node` 时，`type` 为节点组件的类型，例如 'text'、'button'、'page'、'container' 等
-     * - `category` 为 `data-source` 时，`type` 为数据源类型，例如 'base'、'http'
-     * - `category` 为 `code-block` 时，`type` 可不传
-     */
-    type?: string;
-    /** 表单配置类别，决定从哪里取 FormConfig */
-    category?: CompareCategory;
-    /** 数据源代码块场景下的数据源类型（base/http），用于代码块表单中"执行时机"展示 */
-    dataSourceType?: string;
-    labelWidth?: string;
-    /**
-     * 外层容器高度。设置后表单内容超出时会在 CompareForm 内部出现滚动条，
-     * 避免 dialog / 面板使用方需要自行处理滚动。可传任意 CSS 长度，例如 `60vh` / `400px` / `100%`。
-     */
-    height?: string;
-    /**
-     * 用户自定义注入到 MForm.formState 的扩展字段，与 Editor 顶层的 `extendFormState`、
-     * PropsPanel 的 `extend-state` 语义一致。表单 item 的 `display` / `disabled` 等
-     * filterFunction 经常依赖这里注入的字段（如 stage、自定义业务上下文等），
-     * 因此在差异对比场景下也需要透传，避免出现 `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[];
-    /**
-     * 表单内组件的尺寸（透传给 MForm 的 `size`），可选 'large' | 'default' | 'small'。
-     * 缺省时使用 MForm 内置默认尺寸。
-     */
-    size?: FieldSize;
-    /**
-     * 自定义 FormConfig 加载逻辑。传入后将接管内置的按 `category`(node/data-source/code-block)
-     * 取配置逻辑，调用方可根据业务自行返回（或异步返回）表单配置。可通过
-     * `ctx.defaultLoadConfig()` 复用默认结果再做二次加工。返回的 config 直接用于对比展示。
-     */
-    loadConfig?: CompareFormLoadConfig;
-    /** 编辑器服务集合，由调用方传入（不再通过 inject('services') 获取）。 */
-    services?: Services;
-  }>(),
+  defineProps<
+    CompareFormBaseProps & {
+      /** 用于对比的旧值（修改前的值） */
+      lastValue?: CompareFormBaseProps['value'];
+      /** 需要走 self diff 的字段类型（例如 mod-cond）。 */
+      selfDiffFieldTypes?: string[];
+    }
+  >(),
   {
     category: 'node',
     labelWidth: '120px',
-    extendState: (state: FormState) => state,
   },
 );
 
-provide('services', props.services);
-
-const config = ref<FormConfig>([]);
-
-/** vs-code 编辑器的 monaco 配置项，沿用 Editor 顶层 provide('codeOptions', ...) 的注入。 */
-const codeOptions = inject<Record<string, any>>('codeOptions', {});
-
-/** 将代码块的 content 字段统一成字符串，便于在表单/对比中展示 */
-const normalizeCodeBlockValue = (
-  v: Partial<CodeBlockContent> | Record<string, any> | undefined,
-): Record<string, any> => {
-  if (!v) return {};
-  const next: Record<string, any> = { ...v };
-  if (next.content && typeof next.content !== 'string') {
-    try {
-      next.content = next.content.toString();
-    } catch {
-      next.content = '';
-    }
-  }
-  return next;
-};
-
-const currentValues = computed<FormValue>(() => {
-  if (props.category === 'code-block') {
-    return normalizeCodeBlockValue(props.value as Partial<CodeBlockContent>);
-  }
-  return (props.value || {}) as FormValue;
-});
+const { config, currentValues, wrapperStyle, mergedExtendState, loadConfig, formRef, normalizeCodeBlockValue } =
+  useCompareForm(props);
 
 const lastValuesProcessed = computed<FormValue>(() => {
   if (props.category === 'code-block') {
@@ -128,18 +57,6 @@ const lastValuesProcessed = computed<FormValue>(() => {
   return (props.lastValue || {}) as FormValue;
 });
 
-/**
- * 外层包裹层的样式：当传入 `height` 时启用固定高度 + 内部滚动，
- * 这样滚动条会出现在 CompareForm 内部，避免父容器（如 Dialog）自身也产生滚动。
- */
-const wrapperStyle = computed(() => {
-  if (!props.height) return undefined;
-  return {
-    height: props.height,
-    overflow: 'auto',
-  } as Record<string, string>;
-});
-
 /**
  * `code-select` 字段在历史数据中存在两种"语义为空"的形态：
  * - 字符串 `''`（旧数据 / 用户从未配置过钩子）；
@@ -168,110 +85,6 @@ const showDiff = ({ curValue, lastValue, config }: { curValue: any; lastValue: a
   return !isEqual(curValue, lastValue);
 };
 
-const removeStyleDisplayConfig = (formConfig: FormConfig): FormConfig =>
-  formConfig.map((item) => {
-    if (!('type' in item)) return item;
-    if (item?.type !== 'tab' || !Array.isArray(item.items)) return item;
-
-    return {
-      ...item,
-      items: item.items.map((tabPane) => {
-        if (tabPane?.title !== '样式' || !Array.isArray(tabPane.items)) return tabPane;
-
-        return {
-          ...tabPane,
-          display: true,
-        };
-      }),
-    };
-  });
-
-const mergedExtendState = (state: FormState) => {
-  return props.extendState(props.baseFormState || state);
-};
-
-/**
- * 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
- * 作为 ctx.defaultLoadConfig 透传给自定义 `loadConfig`，方便复用与二次加工。
- */
-const defaultLoadConfig = async (): Promise<FormConfig> => {
-  if (!props.services) {
-    return [];
-  }
-
-  switch (props.category) {
-    case 'node': {
-      if (!props.type) {
-        return [];
-      }
-      return removeStyleDisplayConfig(
-        await props.services.propsService.getPropsConfig(props.type, { node: props.value as unknown as MNode }),
-      );
-    }
-    case 'data-source': {
-      const config = props.services.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({
-        paramColConfig: props.services.codeBlockService.getParamsColConfig(),
-        // 通过传入 dataSourceType 间接表达"是数据源代码块"——在对比场景下 props.dataSourceType
-        // 由调用方按 step 上下文显式传入，未传则视为普通代码块，「执行时机」字段隐藏。
-        isDataSource: () => Boolean(props.dataSourceType),
-        dataSourceType: () => props.dataSourceType,
-        codeOptions,
-        // 对比模式只读，不需要校验/语法检查
-        editable: false,
-      });
-    }
-    default:
-      return [];
-  }
-};
-
-const loadConfig = async () => {
-  if (props.loadConfig) {
-    config.value = await props.loadConfig({
-      category: props.category,
-      type: props.type,
-      dataSourceType: props.dataSourceType,
-      defaultLoadConfig,
-    });
-    return;
-  }
-
-  config.value = await defaultLoadConfig();
-};
-
-watch(
-  [() => props.category, () => props.type, () => props.dataSourceType, () => props.loadConfig],
-  () => {
-    loadConfig();
-  },
-  { immediate: true },
-);
-
-const formRef = useTemplateRef<InstanceType<typeof MForm>>('form');
-
-/**
- * 把 services / stage 注入 MForm 的 formState，避免 propsService 注入的表单配置中
- * 形如 `display: ({ services }) => services.uiService.get(...)` 的 filterFunction
- * 在执行时拿不到 `formState.services` 而报错。
- *
- * 与 props-panel/FormPanel.vue 中的注入方式保持一致：
- * - services：整个 useServices() 返回的服务集合；
- * - stage：当前 editorService.get('stage') 的最新值。
- */
-watchEffect(() => {
-  if (formRef.value && props.services) {
-    formRef.value.formState.stage = props.services.editorService.get('stage');
-    formRef.value.formState.services = props.services;
-  }
-});
-
 defineExpose<{
   form: ShallowRef<InstanceType<typeof MForm> | null>;
   config: Ref<FormConfig>;

package/src/components/ContentMenu.vue

@@ -2,8 +2,8 @@
   <transition name="fade">
     <div
       v-show="visible"
-      class="magic-editor-content-menu"
       ref="menu"
+      :class="['magic-editor-content-menu', themeClass]"
       :style="menuStyle"
       @mouseenter="mouseenterHandler()"
       @contextmenu.prevent
@@ -39,7 +39,7 @@
 <script lang="ts" setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, type Ref, ref, useTemplateRef } from 'vue';
 
-import { useZIndex } from '@tmagic/design';
+import { useThemeClass, useZIndex } from '@tmagic/design';
 
 import { MenuButton, MenuComponent } from '@editor/type';
 
@@ -73,6 +73,14 @@ const menuEl = useTemplateRef<HTMLDivElement>('menu');
 const buttonRefs = useTemplateRef<InstanceType<typeof ToolButton>[]>('buttons');
 const subMenuRef = useTemplateRef<any>('subMenu');
 const visible = ref(false);
+
+/**
+ * 主题修饰类（来自最近的 `<MEditor>` / `<MForm>` 祖先 provide）。
+ * - 顶层 `ContentMenu` 渲染在编辑器子树中，加上去是冗余但无害；
+ * - 子菜单（递归 `<content-menu :is-sub-menu="true">` 被 `<teleport to="body">` 送到 body）
+ *   不在编辑器子树中，必须显式挂上主题类，主题级 CSS 变量才能命中。
+ */
+const themeClass = useThemeClass();
 const subMenuData: Ref<(MenuButton | MenuComponent)[]> = ref<(MenuButton | MenuComponent)[]>([]);
 const zIndex = useZIndex();
 const curZIndex = ref<number>(0);

package/src/components/FloatingBox.vue

@@ -2,7 +2,7 @@
   <Teleport to="body" v-if="visible">
     <div
       ref="target"
-      class="m-editor-float-box"
+      :class="['m-editor-float-box', themeClass]"
       v-bind="$attrs"
       :style="{ ...style, zIndex: curZIndex }"
       @mousedown="nextZIndex"
@@ -27,7 +27,7 @@ import { computed, type CSSProperties, nextTick, onBeforeUnmount, provide, ref,
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
-import { TMagicButton, useZIndex } from '@tmagic/design';
+import { TMagicButton, useThemeClass, useZIndex } from '@tmagic/design';
 
 import MIcon from '@editor/components/Icon.vue';
 
@@ -62,6 +62,12 @@ const props = withDefaults(
 const targetEl = useTemplateRef<HTMLDivElement>('target');
 const titleEl = useTemplateRef<HTMLDivElement>('title');
 
+/**
+ * 主题修饰类（来自最近的 `<MEditor>` / `<MForm>` 祖先 provide）。
+ * 挂在 `Teleport` 出去的浮动面板根节点上，让主题级 CSS 变量在 portal 节点上也能命中。
+ */
+const themeClass = useThemeClass();
+
 const zIndex = useZIndex();
 const curZIndex = ref<number>(0);
 

package/src/components/ViewForm.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="m-editor-view-form-wrapper" :style="wrapperStyle">
+    <MForm
+      v-if="config.length"
+      ref="form"
+      class="m-editor-view-form"
+      :config="config"
+      :init-values="currentValues"
+      :disabled="disabled"
+      :label-width="labelWidth"
+      :extend-state="mergedExtendState"
+      :size="size"
+    ></MForm>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type Ref, type ShallowRef } from 'vue';
+
+import { type FormConfig, MForm } from '@tmagic/form';
+
+import { useCompareForm } from '@editor/hooks/use-compare-form';
+import type { CompareFormBaseProps } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorViewForm',
+});
+
+const props = withDefaults(
+  defineProps<
+    CompareFormBaseProps & {
+      /** 是否禁用表单（默认只读展示）。 */
+      disabled?: boolean;
+    }
+  >(),
+  {
+    category: 'node',
+    labelWidth: '120px',
+    disabled: true,
+    // extendState 的默认值由 useCompareForm 内部兜底（props.extendState ?? ...），此处无需重复提供
+  },
+);
+
+const { config, currentValues, wrapperStyle, mergedExtendState, loadConfig, formRef } = useCompareForm(props);
+
+defineExpose<{
+  form: ShallowRef<InstanceType<typeof MForm> | null>;
+  config: Ref<FormConfig>;
+  reload: () => Promise<void>;
+}>({
+  form: formRef,
+  config,
+  reload: loadConfig,
+});
+</script>

package/src/editorProps.ts

@@ -35,6 +35,10 @@ import type {
 export const ENABLE_PROPS_FORM_VALIDATE: InjectionKey<boolean> = Symbol('enablePropsFormValidate');
 
 export interface EditorProps {
+  /** 是否是大屏模拟器容器，大屏容器时，左侧属性面板会扩展为两列（正常3列），颜色表单不扩展两列等 */
+  isLargeStageContainer?: boolean;
+
+  theme?: string;
   /** 页面初始值 */
   modelValue?: MApp;
   /** 左侧面板中的组件类型列表 */

package/src/fields/CodeSelect.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="m-fields-code-select" :class="config.className">
-    <TMagicCard>
+    <TMagicCard :flat="config.flat">
       <MContainer
         :config="codeConfig"
         :size="size"
+        class="code-select-content"
         :prop="prop"
         :disabled="disabled"
         :is-compare="isCompareMode"
@@ -12,16 +13,20 @@
         @change="changeHandler"
       >
       </MContainer>
+      <TMagicButton class="create-button fullWidth" :icon="Plus" :size="size" :disabled="disabled" @click="newHandler()"
+        >添加{{ config.text }}</TMagicButton
+      >
     </TMagicCard>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
 import { isEmpty } from 'lodash-es';
 
 import { HookCodeType, HookType } from '@tmagic/core';
-import { TMagicCard } from '@tmagic/design';
+import { TMagicButton, TMagicCard } from '@tmagic/design';
 import type { CodeSelectConfig, ContainerChangeEventData, FieldProps, GroupListConfig } from '@tmagic/form';
 import { MContainer } from '@tmagic/form';
 
@@ -53,12 +58,23 @@ const props = withDefaults(defineProps<FieldProps<CodeSelectConfig>>(), {});
  * 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
  */
 const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
-
+const newHandler = () => {
+  const defaultCode = {
+    codeType: HookCodeType.CODE,
+    codeId: '',
+  };
+  const name = props.config.name || '';
+  const hookData = props.model[name]?.hookData || [];
+  emit('change', defaultCode, {
+    modifyKey: `hookData.${hookData.length}`,
+  });
+};
 const codeConfig = computed<GroupListConfig>(() => ({
   type: 'group-list',
   name: 'hookData',
   enableToggleMode: false,
   expandAll: true,
+  addable: () => false,
   title: (mForm, { model, index }: any) => {
     if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
       if (Array.isArray(model.codeId)) {
@@ -81,49 +97,44 @@ const codeConfig = computed<GroupListConfig>(() => ({
 
     return model.codeId || index;
   },
+  titlePrefix: props.config.name === undefined ? undefined : String(props.config.name),
   items: [
     {
-      type: 'row',
-      items: [
-        {
-          type: 'select',
-          name: 'codeType',
-          span: 6,
-          options: [
-            { value: HookCodeType.CODE, text: '代码块' },
-            { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
-          ],
-          rules: [{ typeMatch: true, trigger: 'change' }],
-          defaultValue: HookCodeType.CODE,
-          onChange: (_mForm, v: HookCodeType, { setModel }) => {
-            if (v === HookCodeType.DATA_SOURCE_METHOD) {
-              setModel('codeId', []);
-            } else {
-              setModel('codeId', '');
-            }
-
-            return v;
-          },
-        },
-        {
-          type: 'code-select-col',
-          name: 'codeId',
-          span: 18,
-          labelWidth: 0,
-          display: (_mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
-          notEditable: () => !codeBlockService.getEditStatus(),
-          rules: [{ typeMatch: true, trigger: 'change' }],
-        },
-        {
-          type: 'data-source-method-select',
-          name: 'codeId',
-          span: 18,
-          labelWidth: 0,
-          display: (_mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
-          notEditable: () => !dataSourceService.get('editable'),
-          rules: [{ typeMatch: true, trigger: 'change' }],
-        },
+      text: '代码类型',
+      type: 'select',
+      name: 'codeType',
+      labelPosition: 'right',
+      rules: [{ typeMatch: true, trigger: 'change' }],
+      options: [
+        { value: HookCodeType.CODE, text: '代码块' },
+        { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
       ],
+      defaultValue: HookCodeType.CODE,
+      onChange: (_mForm, v: HookCodeType, { setModel }) => {
+        if (v === HookCodeType.DATA_SOURCE_METHOD) {
+          setModel('codeId', []);
+        } else {
+          setModel('codeId', '');
+        }
+        return v;
+      },
+    },
+    {
+      type: 'code-select-col',
+      name: 'codeId',
+      text: '代码块',
+      rules: [{ typeMatch: true, trigger: 'change' }],
+
+      display: (_mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
+      notEditable: () => !codeBlockService.getEditStatus(),
+    },
+    {
+      type: 'data-source-method-select',
+      name: 'codeId',
+      text: '数据源字段',
+      rules: [{ typeMatch: true, trigger: 'change' }],
+      display: (_mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
+      notEditable: () => !dataSourceService.get('editable'),
     },
   ],
 }));

package/src/fields/CodeSelectCol.vue

@@ -147,6 +147,7 @@ const selectConfig: SelectConfig = {
   type: 'select',
   name: props.name,
   disabled: props.disabled,
+  text: props.config.text,
   options: () => {
     if (codeDsl.value) {
       return map(codeDsl.value, (value, key) => ({

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -1,7 +1,12 @@
 <template>
-  <div class="m-fields-data-source-field-select">
+  <div
+    class="m-fields-data-source-field-select"
+    :class="{
+      [`data-source-field-${type}`]: !isSelectValid,
+    }"
+  >
     <FieldSelect
-      v-if="!disabledDataSource && (showDataSourceFieldSelect || !config.fieldConfig)"
+      v-if="isSelectValid"
       :model-value="model[name]"
       :disabled="disabled"
       :size="size"
@@ -37,15 +42,14 @@
         :size="size"
         :disabled="disabled"
         @click="onToggleDataSourceFieldSelectHandler"
-        ><MIcon :icon="Coin"></MIcon
-      ></TMagicButton>
+        ><MIcon :icon="dataSourceIcon"></MIcon>
+      </TMagicButton>
     </TMagicTooltip>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, ref, resolveComponent, watch } from 'vue';
-import { Coin } from '@element-plus/icons-vue';
 
 import { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
@@ -61,6 +65,8 @@ import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, removeDataSourceFieldPrefix } f
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
 
+import dataSourceIcon from '../../icons/DatasourceIcon.vue';
+
 import FieldSelect from './FieldSelect.vue';
 
 defineOptions({
@@ -75,6 +81,9 @@ const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(
 
 const showDataSourceFieldSelect = ref(false);
 
+const isSelectValid = computed(
+  () => !disabledDataSource.value && (showDataSourceFieldSelect.value || !props.config.fieldConfig),
+);
 watch(
   () => props.model[props.name],
   (value) => {