@tmagic/editor 1.1.6 → 1.2.0-beta.10

package/src/layouts/sidebar/Sidebar.vue

@@ -1,63 +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>
-    </tab-pane>
-  </el-tabs>
+        <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="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, 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="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'] }),
+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

@@ -0,0 +1,169 @@
+<template>
+  <TMagicDialog
+    v-model="isShowCodeBlockEditor"
+    class="code-editor-dialog"
+    :title="currentTitle"
+    :fullscreen="true"
+    :before-close="saveAndClose"
+    :append-to-body="true"
+  >
+    <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
+      <!-- 左侧列表 -->
+      <template #left v-if="mode === CodeEditorMode.LIST">
+        <TMagicTree
+          v-if="!isEmpty(state.codeList)"
+          class="side-tree"
+          node-key="id"
+          empty-text="暂无代码块"
+          :data="state.codeList"
+          :highlight-current="true"
+          :current-node-key="state.codeList[0].id"
+          @node-click="selectHandler"
+        >
+          <template #default="{ data }">
+            <div :id="data.id" class="list-container">
+              <div class="list-item">
+                <div class="code-name">{{ data.name }}（{{ data.id }}）</div>
+              </div>
+            </div>
+          </template>
+        </TMagicTree>
+      </template>
+      <!-- 右侧区域 -->
+      <template #center>
+        <div
+          v-if="!isEmpty(codeConfig)"
+          :class="[
+            mode === CodeEditorMode.LIST
+              ? 'm-editor-code-block-editor-panel-list-mode'
+              : 'm-editor-code-block-editor-panel',
+          ]"
+        >
+          <slot name="code-block-edit-panel-header" :id="id"></slot>
+          <TMagicCard shadow="never">
+            <template #header>
+              <div class="code-name-wrapper">
+                <div class="code-name-label">代码块名称</div>
+                <TMagicInput
+                  v-if="codeConfig"
+                  class="code-name-input"
+                  v-model="codeConfig.name"
+                  :disabled="!editable"
+                />
+              </div>
+            </template>
+            <div class="m-editor-wrapper">
+              <MagicCodeEditor
+                v-if="codeConfig"
+                ref="codeEditor"
+                class="m-editor-container"
+                :init-values="`${codeConfig.content}`"
+                @save="saveCode"
+                :options="{
+                  tabSize: 2,
+                  fontSize: 16,
+                  formatOnPaste: true,
+                  readOnly: !editable,
+                }"
+              ></MagicCodeEditor>
+              <div class="m-editor-content-bottom" v-if="editable">
+                <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>
+                <TMagicButton type="primary" class="button" @click="saveAndClose">关闭</TMagicButton>
+              </div>
+            </div>
+          </TMagicCard>
+        </div>
+      </template>
+    </Layout>
+  </TMagicDialog>
+</template>
+
+<script lang="ts" setup name="MEditorCodeBlockEditor">
+import { computed, inject, reactive, ref, watchEffect } from 'vue';
+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';
+
+const services = inject<Services>('services');
+
+const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>();
+const left = ref(200);
+const currentTitle = ref('');
+// 编辑器当前需展示的代码块内容
+const codeConfig = ref<CodeBlockContent | null>(null);
+// select选择的内容(ListState)
+const state = reactive<ListState>({
+  codeList: [],
+});
+
+// 是否展示代码编辑区
+const isShowCodeBlockEditor = computed(
+  () => (codeConfig.value && services?.codeBlockService.getCodeEditorShowStatus()) || false,
+);
+const mode = computed(() => services?.codeBlockService.getMode());
+const id = computed(() => services?.codeBlockService.getId() || '');
+const editable = computed(() => services?.codeBlockService.getEditStatus());
+// 当前选中组件绑定的代码块id数组
+const selectedIds = computed(() => services?.codeBlockService.getCombineIds() || []);
+
+watchEffect(async () => {
+  codeConfig.value = (await services?.codeBlockService.getCodeContentById(id.value)) || null;
+});
+
+watchEffect(async () => {
+  const codeDsl = (await services?.codeBlockService.getCodeDslByIds(selectedIds.value)) || null;
+  if (!codeDsl) return;
+  state.codeList = [];
+  forIn(codeDsl, (value: CodeBlockContent, key: string) => {
+    state.codeList.push({
+      id: key,
+      name: value.name,
+    });
+  });
+  currentTitle.value = state.codeList[0]?.name || '';
+});
+
+// 保存代码
+const saveCode = async (): Promise<boolean> => {
+  if (!codeEditor.value || !codeConfig.value || !editable.value) return true;
+
+  try {
+    // 代码内容
+    const codeContent = (codeEditor.value.getEditor() as monaco.editor.IStandaloneCodeEditor)?.getValue();
+    /* eslint no-eval: "off" */
+    codeConfig.value.content = eval(codeContent);
+  } catch (e: any) {
+    tMagicMessage.error(e.stack);
+    return false;
+  }
+  // 存入dsl
+  await services?.codeBlockService.setCodeDslById(id.value, {
+    name: codeConfig.value.name,
+    content: codeConfig.value.content,
+  });
+  tMagicMessage.success('代码保存成功');
+  return true;
+};
+
+// 保存并关闭
+const saveAndClose = async () => {
+  const saveRes = await saveCode();
+  if (saveRes) {
+    await services?.codeBlockService.setCodeEditorShowStatus(false);
+  }
+};
+
+const selectHandler = (data: CodeDslList) => {
+  services?.codeBlockService.setId(data.id);
+  currentTitle.value = data.name;
+};
+</script>

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

@@ -0,0 +1,267 @@
+<template>
+  <div class="m-editor-code-block-list">
+    <slot name="code-block-panel-header">
+      <div class="code-header-wrapper">
+        <TMagicInput
+          :class="[editable ? 'code-filter-input' : 'code-filter-input-no-btn']"
+          size="small"
+          placeholder="输入关键字进行过滤"
+          clearable
+          v-model="filterText"
+          @input="filterTextChangeHandler"
+        ></TMagicInput>
+        <TMagicButton class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
+          >新增</TMagicButton
+        >
+      </div>
+    </slot>
+
+    <!-- 代码块列表 -->
+    <TMagicTree
+      v-if="!isEmpty(state.codeList)"
+      ref="tree"
+      node-key="id"
+      empty-text="暂无代码块"
+      :data="state.codeList"
+      :highlight-current="true"
+      :filter-node-method="filterNode"
+      @node-click="toggleCombineRelation"
+    >
+      <template #default="{ data }">
+        <div :id="data.id" class="list-container">
+          <div class="list-item">
+            <div class="code-name">{{ data.name }}（{{ data.id }}）</div>
+            <!-- 右侧工具栏 -->
+            <div class="right-tool">
+              <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+                <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
+              </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>
+              </TMagicTooltip>
+              <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
+                <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
+              </TMagicTooltip>
+              <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
+            </div>
+          </div>
+          <!-- 展示代码块下绑定的组件 -->
+          <div
+            class="code-comp-map-wrapper"
+            v-if="data.showRelation && state.bindComps[data.id] && state.bindComps[data.id].length > 0"
+          >
+            <svg class="arrow-left" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
+              <path
+                fill="currentColor"
+                d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
+              ></path>
+            </svg>
+            <!-- todo 功能暂时隐藏 -->
+            <!-- <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
+            ></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 }}</TMagicButton
+            >
+          </div>
+        </div>
+      </template>
+    </TMagicTree>
+
+    <!-- 代码块编辑区 -->
+    <code-block-editor>
+      <template #code-block-edit-panel-header="{ id }">
+        <slot name="code-block-edit-panel-header" :id="id"></slot>
+      </template>
+    </code-block-editor>
+  </div>
+</template>
+
+<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 { forIn, isEmpty } from 'lodash-es';
+
+import { TMagicButton, TMagicInput, tMagicMessage, TMagicTooltip, TMagicTree } from '@tmagic/design';
+import { Id } from '@tmagic/schema';
+import StageCore from '@tmagic/stage';
+
+import Icon from '../../../components/Icon.vue';
+import type { CodeBlockContent, CodeRelation, Services } from '../../../type';
+import { CodeDeleteErrorType, CodeDslList, CodeEditorMode, ListRelationState } from '../../../type';
+
+import codeBlockEditor from './CodeBlockEditor.vue';
+
+const props = defineProps<{
+  customError?: (id: string, errorType: CodeDeleteErrorType) => any;
+}>();
+
+const services = inject<Services>('services');
+
+// 代码块列表
+const state = reactive<ListRelationState>({
+  codeList: [],
+  bindComps: {},
+});
+
+const editable = computed(() => services?.codeBlockService.getEditStatus());
+
+// 根据代码块ID获取其绑定的组件信息
+const getBindCompsByCodeId = (codeId: string, codeBlockContent: CodeBlockContent) => {
+  if (isEmpty(codeBlockContent) || isEmpty(codeBlockContent.comps)) {
+    state.bindComps[codeId] = [];
+    return;
+  }
+  const compsField = codeBlockContent.comps as CodeRelation;
+  const bindCompIds = Object.keys(compsField);
+  const bindCompsFiltered = bindCompIds.filter((compId) => !isEmpty(compsField[compId]));
+  const compsInfo = bindCompsFiltered.map((compId) => ({
+    id: compId,
+    name: getCompName(compId),
+  }));
+  state.bindComps[codeId] = compsInfo;
+};
+
+// 初始化代码块列表
+const initList = async () => {
+  const codeDsl = (await services?.codeBlockService.getCodeDsl()) || null;
+  if (!codeDsl) return;
+  state.codeList = [];
+  forIn(codeDsl, (value: CodeBlockContent, codeId: string) => {
+    getBindCompsByCodeId(codeId, value);
+    state.codeList.push({
+      id: codeId,
+      name: value.name,
+      codeBlockContent: value,
+      showRelation: true,
+    });
+  });
+};
+
+watch(
+  () => services?.codeBlockService.getCodeDsl(),
+  () => {
+    initList();
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+// 监听组件名称修改，更新到代码块列表
+watch(
+  () => services?.editorService.get('node'),
+  (curNode) => {
+    if (!curNode?.id) return;
+    forIn(state.bindComps, (bindCompInfo) => {
+      bindCompInfo.forEach((comp) => {
+        if (comp.id === curNode.id) {
+          comp.name = curNode.name;
+        }
+      });
+    });
+  },
+);
+
+// 新增代码块
+const createCodeBlock = async () => {
+  const { codeBlockService } = services || {};
+  if (!codeBlockService) {
+    tMagicMessage.error('新增代码块失败');
+    return;
+  }
+  const codeConfig: CodeBlockContent = {
+    name: '代码块',
+    content: `() => {\n  // place your code here\n}`,
+  };
+  await codeBlockService.setMode(CodeEditorMode.EDITOR);
+  const id = await codeBlockService.getUniqueId();
+  await codeBlockService.setCodeDslById(id, codeConfig);
+  codeBlockService.setCodeEditorContent(true, id);
+};
+
+// 编辑代码块
+const editCode = async (key: string) => {
+  await services?.codeBlockService.setMode(CodeEditorMode.EDITOR);
+  services?.codeBlockService.setCodeEditorContent(true, key);
+};
+
+// 删除代码块
+const deleteCode = (key: string) => {
+  const existBinds = !!(state.bindComps[key]?.length > 0);
+  const undeleteableList = services?.codeBlockService.getUndeletableList() || [];
+  if (!existBinds && !undeleteableList.includes(key)) {
+    // 无绑定关系，且不在不可删除列表中
+    services?.codeBlockService.deleteCodeDslByIds([key]);
+  } else {
+    if (typeof props.customError === 'function') {
+      props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
+    } else {
+      tMagicMessage.error('代码块删除失败');
+    }
+  }
+};
+
+const filterText = ref('');
+const tree = ref();
+
+const filterNode = (value: string, data: CodeDslList): boolean => {
+  if (!value) {
+    return true;
+  }
+  return `${data.name}${data.id}`.indexOf(value) !== -1;
+};
+
+const filterTextChangeHandler = (val: string) => {
+  tree.value?.filter(val);
+};
+
+// 展示/隐藏组件绑定关系
+const toggleCombineRelation = (data: CodeDslList) => {
+  const { id } = data;
+  const currentCode = state.codeList.find((item) => item.id === id);
+  if (!currentCode) return;
+  currentCode.showRelation = !currentCode?.showRelation;
+};
+
+// 获取组件名称展示到tag上
+const getCompName = (compId: Id): string => {
+  const node = services?.editorService.getNodeById(compId);
+  return node?.name || String(compId);
+};
+
+// todo 功能暂时隐藏
+// 解除绑定
+// const unbind = async (compId: Id, codeId: string) => {
+//   const res = await services?.codeBlockService.unbind(compId, codeId, codeHooks);
+//   if (res) {
+//     ElMessage.success('绑定关系解除成功');
+//   } else {
+//     ElMessage.error('绑定关系解除失败');
+//   }
+// };
+
+// 选中组件
+const selectComp = (compId: Id) => {
+  const stage = services?.editorService.get<StageCore | null>('stage');
+  services?.editorService.select(compId);
+  stage?.select(compId);
+};
+</script>

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>