@tmagic/editor 1.2.0-beta.1 → 1.2.0-beta.11

package/src/layouts/sidebar/Sidebar.vue

@@ -1,75 +1,155 @@
 <template>
-  <el-tabs
+  <TMagicTabs
     v-if="data.type === 'tabs' && data.items.length"
     class="m-editor-sidebar"
     v-model="activeTabName"
     type="card"
     tab-position="left"
   >
-    <tab-pane v-for="(item, index) in data.items" :key="index" :data="item">
-      <template #layer-panel-header v-if="item === 'layer'">
-        <slot name="layer-panel-header"></slot>
+    <component :is="uiComponent.component" v-for="(config, index) in sideBarItems" :key="index" :name="config.text">
+      <template #label>
+        <div :key="config.text">
+          <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
+          <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
+        </div>
       </template>
 
-      <template #layer-node-content="{ node, data }" v-if="item === 'layer'">
-        <slot name="layer-node-content" :data="data" :node="node"></slot>
-      </template>
+      <component v-if="config" :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
+        <template
+          #component-list-panel-header
+          v-if="config.$key === 'component-list' || config.slots?.componentListPanelHeader"
+        >
+          <slot v-if="config.$key === 'component-list'" name="component-list-panel-header"></slot>
+          <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
+        </template>
 
-      <template #component-list-panel-header v-if="item === 'component-list'">
-        <slot name="component-list-panel-header"></slot>
-      </template>
+        <template
+          #component-list-item="{ component }"
+          v-if="config.$key === 'component-list' || config.slots?.componentListItem"
+        >
+          <slot v-if="config.$key === 'component-list'" name="component-list-item" :component="component"></slot>
+          <component
+            v-else-if="config.slots?.componentListItem"
+            :is="config.slots.componentListItem"
+            :component="component"
+          />
+        </template>
 
-      <template #component-list-item="{ component }" v-if="item === 'component-list'">
-        <slot name="component-list-item" :component="component"></slot>
-      </template>
+        <template #layer-panel-header v-if="config.$key === 'layer' || config.slots?.layerPanelHeader">
+          <slot v-if="config.$key === 'layer'" name="layer-panel-header"></slot>
+          <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
+        </template>
 
-      <template #code-block-panel-header v-if="item === 'code-block'">
-        <slot name="code-block-panel-header"></slot>
-      </template>
+        <template #code-block-panel-header v-if="config.$key === 'code-block' || config.slots?.codeBlockPanelHeader">
+          <slot v-if="config.$key === 'code-block'" name="code-block-panel-header"></slot>
+          <component v-else-if="config.slots?.codeBlockPanelHeader" :is="config.slots.codeBlockPanelHeader" />
+        </template>
 
-      <template #code-block-panel-tool="{ id }" v-if="item === 'code-block'">
-        <slot name="code-block-panel-tool" :id="id"></slot>
-      </template>
+        <template
+          #code-block-panel-tool="{ id, data }"
+          v-if="config.$key === 'code-block' || config.slots?.codeBlockPanelTool"
+        >
+          <slot v-if="config.$key === 'code-block'" name="code-block-panel-tool" :id="id" :data="data"></slot>
+          <component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
+        </template>
 
-      <template #code-block-edit-panel-header="{ id }" v-if="item === 'code-block'">
-        <slot name="code-block-edit-panel-header" :id="id"></slot>
-      </template>
-    </tab-pane>
-  </el-tabs>
+        <template
+          #code-block-edit-panel-header="{ id }"
+          v-if="config.$key === 'code-block' || config.slots?.codeBlockEditPanelHeader"
+        >
+          <slot v-if="config.$key === 'code-block'" name="code-block-edit-panel-header" :id="id"></slot>
+          <component v-else-if="config.slots?.codeBlockEditPanelHeader" :is="config.slots.codeBlockEditPanelHeader" />
+        </template>
+
+        <template
+          #layer-node-content="{ data: nodeData, node }"
+          v-if="config.$key === 'layer' || config.slots?.layerNodeContent"
+        >
+          <slot v-if="config.$key === 'layer'" name="layer-node-content" :data="nodeData" :node="node"></slot>
+          <component
+            v-else-if="config.slots?.layerNodeContent"
+            :is="config.slots.layerNodeContent"
+            :data="nodeData"
+            :node="node"
+          />
+        </template>
+      </component>
+    </component>
+  </TMagicTabs>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, ref, watch } from 'vue';
+<script lang="ts" setup name="MEditorSidebar">
+import { computed, ref, watch } from 'vue';
+import { Coin, EditPen, Files } from '@element-plus/icons-vue';
+
+import { getConfig, TMagicTabs } from '@tmagic/design';
 
+import MIcon from '../../components/Icon.vue';
+import type { MenuButton, MenuComponent, SideComponent, SideItem } from '../../type';
 import { SideBarData } from '../../type';
 
-import TabPane from './TabPane.vue';
+import CodeBlockList from './code-block/CodeBlockList.vue';
+import ComponentListPanel from './ComponentListPanel.vue';
+import LayerPanel from './LayerPanel.vue';
 
-export default defineComponent({
-  components: { TabPane },
+const props = withDefaults(
+  defineProps<{
+    data?: SideBarData;
+    layerContentMenu: (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block'] }),
+  },
+);
+
+const uiComponent = getConfig('components').tabPane;
 
-  name: 'm-sidebar',
+const activeTabName = ref(props.data?.status);
 
-  props: {
-    data: {
-      type: Object as PropType<SideBarData>,
-      default: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block'] }),
+const getItemConfig = (data: SideItem): SideComponent => {
+  const map: Record<string, SideComponent> = {
+    'component-list': {
+      $key: 'component-list',
+      type: 'component',
+      icon: Coin,
+      text: '组件',
+      component: ComponentListPanel,
+      slots: {},
     },
-  },
+    layer: {
+      $key: 'layer',
+      type: 'component',
+      icon: Files,
+      text: '已选组件',
+      props: {
+        layerContentMenu: props.layerContentMenu,
+      },
+      component: LayerPanel,
+      slots: {},
+    },
+    'code-block': {
+      $key: 'code-block',
+      type: 'component',
+      icon: EditPen,
+      text: '代码编辑',
+      component: CodeBlockList,
+      slots: {},
+    },
+  };
 
-  setup(props) {
-    const activeTabName = ref(props.data?.status);
+  return typeof data === 'string' ? map[data] : data;
+};
 
-    watch(
-      () => props.data?.status,
-      (status) => {
-        activeTabName.value = status || '0';
-      },
-    );
+const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
 
-    return {
-      activeTabName,
-    };
+watch(
+  () => props.data.status,
+  (status) => {
+    activeTabName.value = status || '0';
   },
+);
+
+defineExpose({
+  activeTabName,
 });
 </script>

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

@@ -1,25 +1,24 @@
 <template>
-  <el-dialog
+  <TMagicDialog
     v-model="isShowCodeBlockEditor"
+    class="code-editor-dialog"
     :title="currentTitle"
     :fullscreen="true"
     :before-close="saveAndClose"
     :append-to-body="true"
-    custom-class="code-editor-dialog"
   >
-    <layout v-model:left="left" :min-left="45" class="code-editor-layout">
+    <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
       <!-- 左侧列表 -->
       <template #left v-if="mode === CodeEditorMode.LIST">
-        <el-tree
+        <TMagicTree
           v-if="!isEmpty(state.codeList)"
-          ref="tree"
+          class="side-tree"
           node-key="id"
           empty-text="暂无代码块"
           :data="state.codeList"
           :highlight-current="true"
-          @node-click="selectHandler"
           :current-node-key="state.codeList[0].id"
-          class="side-tree"
+          @node-click="selectHandler"
         >
           <template #default="{ data }">
             <div :id="data.id" class="list-container">
@@ -28,7 +27,7 @@
               </div>
             </div>
           </template>
-        </el-tree>
+        </TMagicTree>
       </template>
       <!-- 右侧区域 -->
       <template #center>
@@ -41,15 +40,20 @@
           ]"
         >
           <slot name="code-block-edit-panel-header" :id="id"></slot>
-          <el-card shadow="never">
+          <TMagicCard shadow="never">
             <template #header>
               <div class="code-name-wrapper">
                 <div class="code-name-label">代码块名称</div>
-                <el-input v-if="codeConfig" class="code-name-input" v-model="codeConfig.name" :disabled="!editable" />
+                <TMagicInput
+                  v-if="codeConfig"
+                  class="code-name-input"
+                  v-model="codeConfig.name"
+                  :disabled="!editable"
+                />
               </div>
             </template>
             <div class="m-editor-wrapper">
-              <magic-code-editor
+              <MagicCodeEditor
                 v-if="codeConfig"
                 ref="codeEditor"
                 class="m-editor-container"
@@ -61,32 +65,33 @@
                   formatOnPaste: true,
                   readOnly: !editable,
                 }"
-              ></magic-code-editor>
+              ></MagicCodeEditor>
               <div class="m-editor-content-bottom" v-if="editable">
-                <el-button type="primary" class="button" @click="saveCode">保存</el-button>
-                <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
+                <TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton>
+                <TMagicButton type="primary" class="button" @click="saveAndClose">关闭</TMagicButton>
               </div>
               <div class="m-editor-content-bottom" v-else>
-                <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
+                <TMagicButton type="primary" class="button" @click="saveAndClose">关闭</TMagicButton>
               </div>
             </div>
-          </el-card>
+          </TMagicCard>
         </div>
       </template>
-    </layout>
-  </el-dialog>
+    </Layout>
+  </TMagicDialog>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeBlockEditor">
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
-import { ElMessage } from 'element-plus';
 import { forIn, isEmpty } from 'lodash-es';
 import type * as monaco from 'monaco-editor';
 
+import { TMagicButton, TMagicCard, TMagicDialog, TMagicInput, tMagicMessage, TMagicTree } from '@tmagic/design';
+
+import Layout from '../../../components/Layout.vue';
 import type { CodeBlockContent, CodeDslList, ListState, Services } from '../../../type';
 import { CodeEditorMode } from '../../../type';
 import MagicCodeEditor from '../../CodeEditor.vue';
-import Layout from '../../Layout.vue';
 
 const services = inject<Services>('services');
 
@@ -122,7 +127,6 @@ watchEffect(async () => {
     state.codeList.push({
       id: key,
       name: value.name,
-      content: value.content,
     });
   });
   currentTitle.value = state.codeList[0]?.name || '';
@@ -138,7 +142,7 @@ const saveCode = async (): Promise<boolean> => {
     /* eslint no-eval: "off" */
     codeConfig.value.content = eval(codeContent);
   } catch (e: any) {
-    ElMessage.error(e.stack);
+    tMagicMessage.error(e.stack);
     return false;
   }
   // 存入dsl
@@ -146,7 +150,7 @@ const saveCode = async (): Promise<boolean> => {
     name: codeConfig.value.name,
     content: codeConfig.value.content,
   });
-  ElMessage.success('代码保存成功');
+  tMagicMessage.success('代码保存成功');
   return true;
 };
 

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

@@ -2,22 +2,22 @@
   <div class="m-editor-code-block-list">
     <slot name="code-block-panel-header">
       <div class="code-header-wrapper">
-        <el-input
+        <TMagicInput
           :class="[editable ? 'code-filter-input' : 'code-filter-input-no-btn']"
           size="small"
           placeholder="输入关键字进行过滤"
           clearable
           v-model="filterText"
           @input="filterTextChangeHandler"
-        ></el-input>
-        <el-button class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
-          >新增</el-button
+        ></TMagicInput>
+        <TMagicButton class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
+          >新增</TMagicButton
         >
       </div>
     </slot>
 
     <!-- 代码块列表 -->
-    <el-tree
+    <TMagicTree
       v-if="!isEmpty(state.codeList)"
       ref="tree"
       node-key="id"
@@ -33,21 +33,21 @@
             <div class="code-name">{{ data.name }}（{{ data.id }}）</div>
             <!-- 右侧工具栏 -->
             <div class="right-tool">
-              <el-tooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+              <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
                 <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
-              </el-tooltip>
-              <el-tooltip
+              </TMagicTooltip>
+              <TMagicTooltip
                 effect="dark"
                 content="查看绑定关系"
                 placement="bottom"
                 v-if="state.bindComps[data.id] && state.bindComps[data.id].length > 0"
               >
                 <Icon :icon="Link" class="edit-icon" @click.stop="toggleCombineRelation(data)"></Icon>
-              </el-tooltip>
-              <el-tooltip effect="dark" content="删除" placement="bottom" v-if="editable">
+              </TMagicTooltip>
+              <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
                 <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
-              </el-tooltip>
-              <slot name="code-block-panel-tool" :id="data.id"></slot>
+              </TMagicTooltip>
+              <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
             </div>
           </div>
           <!-- 展示代码块下绑定的组件 -->
@@ -62,27 +62,27 @@
               ></path>
             </svg>
             <!-- todo 功能暂时隐藏 -->
-            <!-- <el-button
+            <!-- <TMagicButton
               v-for="(comp, index) in state.bindComps[data.id]"
               :key="index"
               class="code-comp"
               size="small"
               :plain="true"
               >{{ comp.name }}<Icon :icon="Close" class="comp-delete-icon" @click.stop="unbind(comp.id, data.id)"></Icon
-            ></el-button> -->
-            <el-button
+            ></TMagicButton> -->
+            <TMagicButton
               v-for="(comp, index) in state.bindComps[data.id]"
               :key="index"
               class="code-comp"
               size="small"
               :plain="true"
               @click.stop="selectComp(comp.id)"
-              >{{ comp.name }}</el-button
+              >{{ comp.name }}</TMagicButton
             >
           </div>
         </div>
       </template>
-    </el-tree>
+    </TMagicTree>
 
     <!-- 代码块编辑区 -->
     <code-block-editor>
@@ -93,12 +93,12 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeBlockList">
 import { computed, inject, reactive, ref, watch } from 'vue';
 import { Close, Edit, Link, View } from '@element-plus/icons-vue';
-import { ElMessage } from 'element-plus';
 import { forIn, isEmpty } from 'lodash-es';
 
+import { TMagicButton, TMagicInput, tMagicMessage, TMagicTooltip, TMagicTree } from '@tmagic/design';
 import { Id } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 
@@ -148,7 +148,7 @@ const initList = async () => {
     state.codeList.push({
       id: codeId,
       name: value.name,
-      content: value.content,
+      codeBlockContent: value,
       showRelation: true,
     });
   });
@@ -184,7 +184,7 @@ watch(
 const createCodeBlock = async () => {
   const { codeBlockService } = services || {};
   if (!codeBlockService) {
-    ElMessage.error('新增代码块失败');
+    tMagicMessage.error('新增代码块失败');
     return;
   }
   const codeConfig: CodeBlockContent = {
@@ -214,7 +214,7 @@ const deleteCode = (key: string) => {
     if (typeof props.customError === 'function') {
       props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
     } else {
-      ElMessage.error('代码块删除失败');
+      tMagicMessage.error('代码块删除失败');
     }
   }
 };

package/src/layouts/workspace/Breadcrumb.vue

@@ -0,0 +1,32 @@
+<template>
+  <div v-if="nodes.length === 1" class="m-editor-breadcrumb">
+    <template v-for="(item, index) in path" :key="item.id">
+      <TMagicButton text :disabled="item.id === node?.id" @click="select(item)">{{ item.name }}</TMagicButton
+      ><span v-if="index < path.length - 1">/</span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts" name="MEditorBreadcrumb">
+import { computed, inject } from 'vue';
+
+import { TMagicButton } from '@tmagic/design';
+import type { MApp, MNode } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
+import { getNodePath } from '@tmagic/utils';
+
+import type { Services } from '../../type';
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const node = computed(() => editorService?.get<MNode>('node'));
+const nodes = computed(() => editorService?.get<MNode[]>('nodes') || []);
+const root = computed(() => editorService?.get<MApp>('root'));
+const path = computed(() => getNodePath(node.value?.id || '', root.value?.items || []));
+
+const select = async (node: MNode) => {
+  await editorService?.select(node);
+  editorService?.get<StageCore>('stage')?.select(node.id);
+};
+</script>

package/src/layouts/workspace/PageBar.vue

@@ -9,47 +9,48 @@
     >
       <div class="m-editor-page-bar-title">
         <slot name="page-bar-title" :page="item">
-          <el-tooltip effect="dark" placement="top-start" :content="item.name">
+          <TMagicTooltip effect="dark" placement="top-start" :content="item.name">
             <span>{{ item.name || item.id }}</span>
-          </el-tooltip>
+          </TMagicTooltip>
         </slot>
       </div>
 
-      <el-popover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+      <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
         <div>
           <slot name="page-bar-popover" :page="item">
-            <tool-button
+            <ToolButton
               :data="{
                 type: 'button',
                 text: '复制',
                 icon: DocumentCopy,
                 handler: () => copy(item),
               }"
-            ></tool-button>
-            <tool-button
+            ></ToolButton>
+            <ToolButton
               :data="{
                 type: 'button',
                 text: '删除',
                 icon: Delete,
                 handler: () => remove(item),
               }"
-            ></tool-button>
+            ></ToolButton>
           </slot>
         </div>
         <template #reference>
-          <el-icon class="m-editor-page-bar-menu-icon">
+          <TMagicIcon class="m-editor-page-bar-menu-icon">
             <CaretBottom></CaretBottom>
-          </el-icon>
+          </TMagicIcon>
         </template>
-      </el-popover>
+      </TMagicPopover>
     </div>
   </PageBarScrollContainer>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorPageBar">
 import { computed, inject } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
+import { TMagicIcon, TMagicPopover, TMagicTooltip } from '@tmagic/design';
 import type { MApp, MPage } from '@tmagic/schema';
 
 import ToolButton from '../../components/ToolButton.vue';

package/src/layouts/workspace/PageBarScrollContainer.vue

@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MEditorPageBarScrollContainer">
 import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
 

package/src/layouts/workspace/Stage.vue

@@ -1,5 +1,5 @@
 <template>
-  <scroll-viewer
+  <ScrollViewer
     class="m-editor-stage"
     ref="stageWrap"
     :width="stageRect?.width"
@@ -7,6 +7,10 @@
     :wrap-width="stageContainerRect?.width"
     :wrap-height="stageContainerRect?.height"
     :zoom="zoom"
+    :correction-scroll-size="{
+      width: 60,
+      height: 50,
+    }"
   >
     <div
       class="m-editor-stage-container"
@@ -16,13 +20,13 @@
       @drop="dropHandler"
       @dragover="dragoverHandler"
     ></div>
-    <teleport to="body">
-      <viewer-menu ref="menu" :is-multi-select="isMultiSelect"></viewer-menu>
-    </teleport>
-  </scroll-viewer>
+    <Teleport to="body">
+      <ViewerMenu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></ViewerMenu>
+    </Teleport>
+  </ScrollViewer>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorStage">
 import { computed, inject, markRaw, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
@@ -30,11 +34,15 @@ import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
 import ScrollViewer from '../../components/ScrollViewer.vue';
-import { Layout, Services, StageOptions, StageRect } from '../../type';
+import { Layout, MenuButton, MenuComponent, Services, StageOptions, StageRect } from '../../type';
 import { useStage } from '../../utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
 
+defineProps<{
+  stageContentMenu: (MenuButton | MenuComponent)[];
+}>();
+
 let stage: StageCore | null = null;
 let runtime: Runtime | null = null;