@tmagic/editor 1.4.3 → 1.4.4

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -36,7 +36,7 @@ import type { Id } from '@tmagic/schema';
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
-import type { CodeBlockListPanelSlots, CodeDeleteErrorType, Services } from '@editor/type';
+import type { CodeBlockListPanelSlots, CodeDeleteErrorType, EventBus, Services } from '@editor/type';
 
 import CodeBlockList from './CodeBlockList.vue';
 
@@ -50,6 +50,7 @@ defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
 }>();
 
+const eventBus = inject<EventBus>('eventBus');
 const { codeBlockService } = inject<Services>('services') || {};
 
 const editable = computed(() => codeBlockService?.getEditStatus());
@@ -62,4 +63,8 @@ const codeBlockList = ref<InstanceType<typeof CodeBlockList>>();
 const filterTextChangeHandler = (val: string) => {
   codeBlockList.value?.filter(val);
 };
+
+eventBus?.on('edit-code', (id: string) => {
+  editCode(id);
+});
 </script>

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -46,7 +46,7 @@ import { TMagicButton, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
 import SearchInput from '@editor/components/SearchInput.vue';
 import ToolButton from '@editor/components/ToolButton.vue';
 import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
-import type { DataSourceListSlots, Services } from '@editor/type';
+import type { DataSourceListSlots, EventBus, Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 import DataSourceList from './DataSourceList.vue';
@@ -57,6 +57,7 @@ defineOptions({
   name: 'MEditorDataSourceListPanel',
 });
 
+const eventBus = inject<EventBus>('eventBus');
 const { dataSourceService } = inject<Services>('services') || {};
 
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
@@ -98,4 +99,8 @@ const dataSourceList = ref<InstanceType<typeof DataSourceList>>();
 const filterTextChangeHandler = (val: string) => {
   dataSourceList.value?.filter(val);
 };
+
+eventBus?.on('edit-data-source', (id: string) => {
+  editHandler(id);
+});
 </script>

package/src/services/ui.ts

@@ -48,6 +48,7 @@ const state = reactive<UiState>({
   propsPanelSize: 'small',
   showAddPageButton: true,
   hideSlideBar: false,
+  sideBarItems: [],
   navMenuRect: {
     left: 0,
     top: 0,

package/src/theme/data-source-field.scss

@@ -0,0 +1,12 @@
+.m-fields-data-source-select,
+.m-fields-data-source-field-select,
+.m-fields-data-source-method-select .data-source-method-select-container,
+.m-fields-code-select-col .code-select-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  .m-fields-select-action-button {
+    margin-left: 5px;
+  }
+}

package/src/theme/props-panel.scss

@@ -1,5 +1,5 @@
 .m-editor-props-panel {
-  padding: 0 10px;
+  padding: 0 10px 50px 10px;
 
   .m-editor-props-panel-src-icon {
     position: absolute;

package/src/theme/theme.scss

@@ -24,3 +24,4 @@
 @import "./tree.scss";
 @import "./floating-box.scss";
 @import "./page-fragment-select.scss";
+@import "./data-source-field.scss";

package/src/type.ts

@@ -17,6 +17,7 @@
  */
 
 import type { Component } from 'vue';
+import type EventEmitter from 'events';
 import type { PascalCasedProperties } from 'type-fest';
 
 import type { ChildConfig, ColumnConfig, FilterFunction, FormConfig, FormItem, Input } from '@tmagic/form';
@@ -238,6 +239,8 @@ export interface UiState {
   showAddPageButton: boolean;
   /** 是否隐藏侧边栏 */
   hideSlideBar: boolean;
+  /** 侧边栏面板配置 */
+  sideBarItems: SideComponent[];
 
   // navMenu 的宽高
   navMenuRect: {
@@ -370,8 +373,10 @@ export interface MenuBarData {
 export interface SideComponent extends MenuComponent {
   /** 显示文案 */
   text: string;
+  /** tab样式 */
+  tabStyle?: string | Record<string, any>;
   /** vue组件或url */
-  icon: Component<{}, {}, any>;
+  icon?: any;
   /** slide 唯一标识 key */
   $key: string;
 
@@ -384,12 +389,19 @@ export interface SideComponent extends MenuComponent {
   };
 }
 
+export enum SideItemKey {
+  COMPONENT_LIST = 'component-list',
+  LAYER = 'layer',
+  CODE_BLOCK = 'code-block',
+  DATA_SOURCE = 'data-source',
+}
+
 /**
  * component-list: 组件列表
  * layer: 已选组件树
  * code-block: 代码块
  */
-export type SideItem = 'component-list' | 'layer' | 'code-block' | 'data-source' | SideComponent;
+export type SideItem = `${SideItemKey}` | SideComponent;
 
 /** 工具栏 */
 export interface SideBarData {
@@ -621,6 +633,8 @@ export interface DataSourceSelect extends FormItem, Input {
    * value: 要编译（数据源data）
    * */
   value?: 'id' | 'value';
+  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
+  notEditable?: boolean | FilterFunction;
 }
 
 export interface DataSourceMethodSelectConfig extends FormItem {
@@ -640,6 +654,8 @@ export interface DataSourceFieldSelectConfig extends FormItem {
   checkStrictly?: boolean;
   dataSourceFieldType?: DataSourceFieldType[];
   fieldConfig?: ChildConfig;
+  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
+  notEditable?: boolean | FilterFunction;
 }
 
 /** 可新增的数据源类型选项 */
@@ -714,3 +730,16 @@ export type SyncHookPlugin<
   C extends Record<T[number], (...args: any) => any>,
 > = AddPrefixToObject<PascalCasedProperties<SyncBeforeHook<T, C>>, 'before'> &
   AddPrefixToObject<PascalCasedProperties<SyncAfterHook<T, C>>, 'after'>;
+
+export interface EventBusEvent {
+  'edit-data-source': [id: string];
+  'edit-code': [id: string];
+}
+
+export interface EventBus extends EventEmitter {
+  on<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void,
+  ): this;
+  emit<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(eventName: Name, ...args: Param): boolean;
+}

package/types/components/ContentMenu.vue.d.ts

@@ -1,6 +1,6 @@
 import { MenuButton, MenuComponent } from '../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    menuData?: (MenuButton | MenuComponent)[] | undefined;
+    menuData?: (MenuComponent | MenuButton)[] | undefined;
     isSubMenu?: boolean | undefined;
     active?: string | number | undefined;
     autoHide?: boolean | undefined;
@@ -29,7 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hide: () => void;
     mouseenter: () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    menuData?: (MenuButton | MenuComponent)[] | undefined;
+    menuData?: (MenuComponent | MenuButton)[] | undefined;
     isSubMenu?: boolean | undefined;
     active?: string | number | undefined;
     autoHide?: boolean | undefined;
@@ -42,7 +42,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onShow?: (() => any) | undefined;
     onHide?: (() => any) | undefined;
 }, {
-    menuData: (MenuButton | MenuComponent)[];
+    menuData: (MenuComponent | MenuButton)[];
     isSubMenu: boolean;
     autoHide: boolean;
 }, {}>, {

package/types/components/ToolButton.vue.d.ts

@@ -1,6 +1,6 @@
 import type { MenuButton, MenuComponent } from '../type';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    data?: MenuButton | MenuComponent | undefined;
+    data?: MenuComponent | MenuButton | undefined;
     eventType?: "mousedown" | "click" | "mouseup" | undefined;
 }>, {
     data: () => {
@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     };
     eventType: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    data?: MenuButton | MenuComponent | undefined;
+    data?: MenuComponent | MenuButton | undefined;
     eventType?: "mousedown" | "click" | "mouseup" | undefined;
 }>, {
     data: () => {

package/types/editorProps.d.ts

@@ -70,6 +70,8 @@ export interface EditorProps {
     disabledPageFragment?: boolean;
     /** 禁用双击在浮层中单独编辑选中组件 */
     disabledStageOverlay?: boolean;
+    /** 禁用属性配置面板右下角显示源码的按钮 */
+    disabledShowSrc?: boolean;
     /** 中间工作区域中画布渲染的内容 */
     render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
     /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */
@@ -90,6 +92,7 @@ export declare const defaultEditorProps: {
     containerHighlightClassName: string;
     containerHighlightDuration: number;
     containerHighlightType: ContainerHighlightType;
+    disabledShowSrc: boolean;
     componentGroupList: () => never[];
     datasourceList: () => never[];
     menu: () => {

package/types/layouts/PropsPanel.vue.d.ts

@@ -1,6 +1,7 @@
 import type { FormState, FormValue } from '@tmagic/form';
 import type { PropsPanelSlots } from '../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    disabledShowSrc?: boolean | undefined;
     extendState?: ((state: FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined;
 }>, {
     configForm: import("vue").Ref<import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
@@ -259,6 +260,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "submit-error": (...args: any[]) => void;
     "form-error": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    disabledShowSrc?: boolean | undefined;
     extendState?: ((state: FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined;
 }>>> & {
     onMounted?: ((...args: any[]) => any) | undefined;

package/types/layouts/sidebar/Sidebar.vue.d.ts

@@ -1,25 +1,25 @@
-import { type MenuButton, type MenuComponent, type SideBarData } from '../../type';
+import { type MenuButton, type MenuComponent, type SideBarData, SideItemKey } from '../../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     data: SideBarData;
-    layerContentMenu: (MenuButton | MenuComponent)[];
-    customContentMenu?: ((menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]) | undefined;
+    layerContentMenu: (MenuComponent | MenuButton)[];
+    customContentMenu?: ((menus: (MenuComponent | MenuButton)[], type: string) => (MenuComponent | MenuButton)[]) | undefined;
 }>, {
     data: () => {
         type: string;
         status: string;
-        items: string[];
+        items: SideItemKey[];
     };
 }>, {
     activeTabName: import("vue").Ref<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     data: SideBarData;
-    layerContentMenu: (MenuButton | MenuComponent)[];
-    customContentMenu?: ((menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]) | undefined;
+    layerContentMenu: (MenuComponent | MenuButton)[];
+    customContentMenu?: ((menus: (MenuComponent | MenuButton)[], type: string) => (MenuComponent | MenuButton)[]) | undefined;
 }>, {
     data: () => {
         type: string;
         status: string;
-        items: string[];
+        items: SideItemKey[];
     };
 }>>>, {
     data: SideBarData;

package/types/layouts/sidebar/layer/LayerMenu.vue.d.ts

@@ -4,7 +4,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     customContentMenu?: ((menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]) | undefined;
 }>, {
     layerContentMenu: () => never[];
-    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => (MenuButton | MenuComponent)[];
+    customContentMenu: (menus: (MenuComponent | MenuButton)[]) => (MenuComponent | MenuButton)[];
 }>, {
     show: (e: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     customContentMenu?: ((menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]) | undefined;
 }>, {
     layerContentMenu: () => never[];
-    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => (MenuButton | MenuComponent)[];
+    customContentMenu: (menus: (MenuComponent | MenuButton)[]) => (MenuComponent | MenuButton)[];
 }>>> & {
     "onCollapse-all"?: (() => any) | undefined;
 }, {

package/types/layouts/sidebar/layer/LayerPanel.vue.d.ts

@@ -1,10 +1,10 @@
 import { LayerPanelSlots, MenuButton, MenuComponent } from '../../../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
-    layerContentMenu: (MenuButton | MenuComponent)[];
-    customContentMenu?: ((menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]) | undefined;
+    layerContentMenu: (MenuComponent | MenuButton)[];
+    customContentMenu?: ((menus: (MenuComponent | MenuButton)[], type: string) => (MenuComponent | MenuButton)[]) | undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
-    layerContentMenu: (MenuButton | MenuComponent)[];
-    customContentMenu?: ((menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]) | undefined;
+    layerContentMenu: (MenuComponent | MenuButton)[];
+    customContentMenu?: ((menus: (MenuComponent | MenuButton)[], type: string) => (MenuComponent | MenuButton)[]) | undefined;
 }>>>, {}, {}>, Readonly<LayerPanelSlots> & LayerPanelSlots>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/types/layouts/sidebar/layer/use-click.d.ts

@@ -4,13 +4,13 @@ import { LayerNodeStatus, Services, TreeNodeData } from '../../../type';
 export declare const useClick: (services: Services | undefined, isCtrlKeyDown: Ref<boolean>, nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>) => {
     menu: Ref<import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
         layerContentMenu: {
-            type: import("vue").PropType<(import("../../../type").MenuButton | import("../../../type").MenuComponent)[]>;
+            type: import("vue").PropType<(import("../../../type").MenuComponent | import("../../../type").MenuButton)[]>;
             required: true;
             default: () => never[];
         };
         customContentMenu: {
-            type: import("vue").PropType<(menus: (import("../../../type").MenuButton | import("../../../type").MenuComponent)[], type: string) => (import("../../../type").MenuButton | import("../../../type").MenuComponent)[]>;
-            default: (menus: (import("../../../type").MenuButton | import("../../../type").MenuComponent)[]) => (import("../../../type").MenuButton | import("../../../type").MenuComponent)[];
+            type: import("vue").PropType<(menus: (import("../../../type").MenuComponent | import("../../../type").MenuButton)[], type: string) => (import("../../../type").MenuComponent | import("../../../type").MenuButton)[]>;
+            default: (menus: (import("../../../type").MenuComponent | import("../../../type").MenuButton)[]) => (import("../../../type").MenuComponent | import("../../../type").MenuButton)[];
         };
     }>> & {
         "onCollapse-all"?: (() => any) | undefined;
@@ -20,19 +20,19 @@ export declare const useClick: (services: Services | undefined, isCtrlKeyDown: R
         "collapse-all": () => void;
     }, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         layerContentMenu: {
-            type: import("vue").PropType<(import("../../../type").MenuButton | import("../../../type").MenuComponent)[]>;
+            type: import("vue").PropType<(import("../../../type").MenuComponent | import("../../../type").MenuButton)[]>;
             required: true;
             default: () => never[];
         };
         customContentMenu: {
-            type: import("vue").PropType<(menus: (import("../../../type").MenuButton | import("../../../type").MenuComponent)[], type: string) => (import("../../../type").MenuButton | import("../../../type").MenuComponent)[]>;
-            default: (menus: (import("../../../type").MenuButton | import("../../../type").MenuComponent)[]) => (import("../../../type").MenuButton | import("../../../type").MenuComponent)[];
+            type: import("vue").PropType<(menus: (import("../../../type").MenuComponent | import("../../../type").MenuButton)[], type: string) => (import("../../../type").MenuComponent | import("../../../type").MenuButton)[]>;
+            default: (menus: (import("../../../type").MenuComponent | import("../../../type").MenuButton)[]) => (import("../../../type").MenuComponent | import("../../../type").MenuButton)[];
         };
     }>> & {
         "onCollapse-all"?: (() => any) | undefined;
     }, {
-        layerContentMenu: (import("../../../type").MenuButton | import("../../../type").MenuComponent)[];
-        customContentMenu: (menus: (import("../../../type").MenuButton | import("../../../type").MenuComponent)[], type: string) => (import("../../../type").MenuButton | import("../../../type").MenuComponent)[];
+        layerContentMenu: (import("../../../type").MenuComponent | import("../../../type").MenuButton)[];
+        customContentMenu: (menus: (import("../../../type").MenuComponent | import("../../../type").MenuButton)[], type: string) => (import("../../../type").MenuComponent | import("../../../type").MenuButton)[];
     }, true, {}, {}, {
         P: {};
         B: {};
@@ -42,21 +42,21 @@ export declare const useClick: (services: Services | undefined, isCtrlKeyDown: R
         Defaults: {};
     }, Readonly<import("vue").ExtractPropTypes<{
         layerContentMenu: {
-            type: import("vue").PropType<(import("../../../type").MenuButton | import("../../../type").MenuComponent)[]>;
+            type: import("vue").PropType<(import("../../../type").MenuComponent | import("../../../type").MenuButton)[]>;
             required: true;
             default: () => never[];
         };
         customContentMenu: {
-            type: import("vue").PropType<(menus: (import("../../../type").MenuButton | import("../../../type").MenuComponent)[], type: string) => (import("../../../type").MenuButton | import("../../../type").MenuComponent)[]>;
-            default: (menus: (import("../../../type").MenuButton | import("../../../type").MenuComponent)[]) => (import("../../../type").MenuButton | import("../../../type").MenuComponent)[];
+            type: import("vue").PropType<(menus: (import("../../../type").MenuComponent | import("../../../type").MenuButton)[], type: string) => (import("../../../type").MenuComponent | import("../../../type").MenuButton)[]>;
+            default: (menus: (import("../../../type").MenuComponent | import("../../../type").MenuButton)[]) => (import("../../../type").MenuComponent | import("../../../type").MenuButton)[];
         };
     }>> & {
         "onCollapse-all"?: (() => any) | undefined;
     }, {
         show: (e: MouseEvent) => void;
     }, {}, {}, {}, {
-        layerContentMenu: (import("../../../type").MenuButton | import("../../../type").MenuComponent)[];
-        customContentMenu: (menus: (import("../../../type").MenuButton | import("../../../type").MenuComponent)[], type: string) => (import("../../../type").MenuButton | import("../../../type").MenuComponent)[];
+        layerContentMenu: (import("../../../type").MenuComponent | import("../../../type").MenuButton)[];
+        customContentMenu: (menus: (import("../../../type").MenuComponent | import("../../../type").MenuButton)[], type: string) => (import("../../../type").MenuComponent | import("../../../type").MenuButton)[];
     }> | undefined>;
     nodeClickHandler: (event: MouseEvent, data: TreeNodeData) => void;
     nodeContentMenuHandler(event: MouseEvent, data: TreeNodeData): void;

package/types/layouts/workspace/Workspace.vue.d.ts

@@ -1,14 +1,14 @@
 import type { MenuButton, MenuComponent, WorkspaceSlots } from '../../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    stageContentMenu: (MenuButton | MenuComponent)[];
+    stageContentMenu: (MenuComponent | MenuButton)[];
     disabledStageOverlay?: boolean | undefined;
-    customContentMenu?: ((menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]) | undefined;
+    customContentMenu?: ((menus: (MenuComponent | MenuButton)[], type: string) => (MenuComponent | MenuButton)[]) | undefined;
 }>, {
     disabledStageOverlay: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    stageContentMenu: (MenuButton | MenuComponent)[];
+    stageContentMenu: (MenuComponent | MenuButton)[];
     disabledStageOverlay?: boolean | undefined;
-    customContentMenu?: ((menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]) | undefined;
+    customContentMenu?: ((menus: (MenuComponent | MenuButton)[], type: string) => (MenuComponent | MenuButton)[]) | undefined;
 }>, {
     disabledStageOverlay: boolean;
 }>>>, {

package/types/layouts/workspace/viewer/ViewerMenu.vue.d.ts

@@ -6,7 +6,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     isMultiSelect: boolean;
     stageContentMenu: () => never[];
-    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => (MenuButton | MenuComponent)[];
+    customContentMenu: (menus: (MenuComponent | MenuButton)[]) => (MenuComponent | MenuButton)[];
 }>, {
     show: (e: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     isMultiSelect: boolean;
     stageContentMenu: () => never[];
-    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => (MenuButton | MenuComponent)[];
+    customContentMenu: (menus: (MenuComponent | MenuButton)[]) => (MenuComponent | MenuButton)[];
 }>>>, {
     stageContentMenu: (MenuButton | MenuComponent)[];
     customContentMenu: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];

package/types/services/ui.d.ts

@@ -31,6 +31,24 @@ declare class Ui extends BaseService {
         propsPanelSize: "small" | "large" | "default";
         showAddPageButton: boolean;
         hideSlideBar: boolean;
+        sideBarItems: {
+            [x: string]: any;
+            text: string;
+            tabStyle?: string | Record<string, any> | undefined;
+            icon?: any;
+            $key: string;
+            boxComponentConfig?: {
+                component?: any;
+                props?: Record<string, any> | undefined;
+            } | undefined;
+            type: "component";
+            component: any;
+            props?: Record<string, any> | undefined;
+            listeners?: Record<string, Function> | undefined;
+            slots?: Record<string, any> | undefined;
+            className?: string | undefined;
+            display?: boolean | ((data?: import("../type").Services | undefined) => boolean | Promise<boolean>) | undefined;
+        }[];
         navMenuRect: {
             left: number;
             top: number;

package/types/type.d.ts

@@ -1,4 +1,6 @@
+/// <reference types="node" />
 import type { Component } from 'vue';
+import type EventEmitter from 'events';
 import type { PascalCasedProperties } from 'type-fest';
 import type { ChildConfig, ColumnConfig, FilterFunction, FormConfig, FormItem, Input } from '@tmagic/form';
 import type { CodeBlockContent, CodeBlockDSL, DataSourceFieldType, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
@@ -194,6 +196,8 @@ export interface UiState {
     showAddPageButton: boolean;
     /** 是否隐藏侧边栏 */
     hideSlideBar: boolean;
+    /** 侧边栏面板配置 */
+    sideBarItems: SideComponent[];
     navMenuRect: {
         left: number;
         top: number;
@@ -302,8 +306,10 @@ export interface MenuBarData {
 export interface SideComponent extends MenuComponent {
     /** 显示文案 */
     text: string;
+    /** tab样式 */
+    tabStyle?: string | Record<string, any>;
     /** vue组件或url */
-    icon: Component<{}, {}, any>;
+    icon?: any;
     /** slide 唯一标识 key */
     $key: string;
     /** 组件扩展参数 */
@@ -314,12 +320,18 @@ export interface SideComponent extends MenuComponent {
         props?: Record<string, any>;
     };
 }
+export declare enum SideItemKey {
+    COMPONENT_LIST = "component-list",
+    LAYER = "layer",
+    CODE_BLOCK = "code-block",
+    DATA_SOURCE = "data-source"
+}
 /**
  * component-list: 组件列表
  * layer: 已选组件树
  * code-block: 代码块
  */
-export type SideItem = 'component-list' | 'layer' | 'code-block' | 'data-source' | SideComponent;
+export type SideItem = `${SideItemKey}` | SideComponent;
 /** 工具栏 */
 export interface SideBarData {
     /** 容器类型 */
@@ -524,6 +536,8 @@ export interface DataSourceSelect extends FormItem, Input {
      * value: 要编译（数据源data）
      * */
     value?: 'id' | 'value';
+    /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
+    notEditable?: boolean | FilterFunction;
 }
 export interface DataSourceMethodSelectConfig extends FormItem {
     type: 'data-source-method-select';
@@ -541,6 +555,8 @@ export interface DataSourceFieldSelectConfig extends FormItem {
     checkStrictly?: boolean;
     dataSourceFieldType?: DataSourceFieldType[];
     fieldConfig?: ChildConfig;
+    /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
+    notEditable?: boolean | FilterFunction;
 }
 /** 可新增的数据源类型选项 */
 export interface DatasourceTypeOption {
@@ -592,3 +608,11 @@ export type AddPrefixToObject<T, P extends string> = {
 };
 export type AsyncHookPlugin<T extends Array<string>, C extends Record<T[number], (...args: any) => any>> = AddPrefixToObject<PascalCasedProperties<AsyncBeforeHook<T, C>>, 'before'> & AddPrefixToObject<PascalCasedProperties<AsyncAfterHook<T, C>>, 'after'>;
 export type SyncHookPlugin<T extends Array<string>, C extends Record<T[number], (...args: any) => any>> = AddPrefixToObject<PascalCasedProperties<SyncBeforeHook<T, C>>, 'before'> & AddPrefixToObject<PascalCasedProperties<SyncAfterHook<T, C>>, 'after'>;
+export interface EventBusEvent {
+    'edit-data-source': [id: string];
+    'edit-code': [id: string];
+}
+export interface EventBus extends EventEmitter {
+    on<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(eventName: Name, listener: (...args: Param) => void): this;
+    emit<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(eventName: Name, ...args: Param): boolean;
+}