@tmagic/editor 1.1.6 → 1.2.0-beta.2

package/src/layouts/sidebar/LayerMenu.vue

@@ -2,8 +2,8 @@
   <content-menu :menu-data="menuData" ref="menu" style="overflow: initial"></content-menu>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, markRaw, ref } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, markRaw, ref } from 'vue';
 import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
@@ -11,105 +11,100 @@ import { NodeType } from '@tmagic/schema';
 import ContentMenu from '../../components/ContentMenu.vue';
 import type { ComponentGroup, MenuButton, MenuComponent, Services } from '../../type';
 
-export default defineComponent({
-  components: { ContentMenu },
+const services = inject<Services>('services');
+const menu = ref<InstanceType<typeof ContentMenu>>();
+const node = computed(() => services?.editorService.get('node'));
+const isRoot = computed(() => node.value?.type === NodeType.ROOT);
+const isPage = computed(() => node.value?.type === NodeType.PAGE);
+const componentList = computed(() => services?.componentListService.getList() || []);
 
-  setup() {
-    const services = inject<Services>('services');
-    const menu = ref<InstanceType<typeof ContentMenu>>();
-    const node = computed(() => services?.editorService.get('node'));
-    const isRoot = computed(() => node.value?.type === NodeType.ROOT);
-    const isPage = computed(() => node.value?.type === NodeType.PAGE);
-    const componentList = computed(() => services?.componentListService.getList() || []);
+const layerContentMenu = inject<(MenuComponent | MenuButton)[]>('layerContentMenu', []);
 
-    const layerContentMenu = inject<(MenuComponent | MenuButton)[]>('layerContentMenu', []);
+const createMenuItems = (group: ComponentGroup): MenuButton[] =>
+  group.items.map((component) => ({
+    text: component.text,
+    type: 'button',
+    icon: component.icon,
+    handler: () => {
+      services?.editorService.add({
+        name: component.text,
+        type: component.type,
+        ...(component.data || {}),
+      });
+    },
+  }));
 
-    const createMenuItems = (group: ComponentGroup): MenuButton[] =>
-      group.items.map((component) => ({
-        text: component.text,
+const getSubMenuData = computed<MenuButton[]>(() => {
+  if (node.value?.type === 'tabs') {
+    return [
+      {
+        text: '标签页',
         type: 'button',
-        icon: component.icon,
+        icon: Files,
         handler: () => {
           services?.editorService.add({
-            name: component.text,
-            type: component.type,
-            ...(component.data || {}),
+            type: 'tab-pane',
           });
         },
-      }));
+      },
+    ];
+  }
+  if (node.value?.items) {
+    return (
+      componentList.value.reduce(
+        (subMenuData: MenuButton[], group: ComponentGroup, index) =>
+          subMenuData.concat(
+            createMenuItems(group),
+            index < componentList.value.length - 1
+              ? [
+                  {
+                    type: 'divider',
+                    direction: 'horizontal',
+                  },
+                ]
+              : [],
+          ),
+        [],
+      ) || []
+    );
+  }
+  return [];
+});
 
-    const getSubMenuData = computed<MenuButton[]>(() => {
-      if (node.value?.type === 'tabs') {
-        return [
-          {
-            text: '标签页',
-            type: 'button',
-            icon: Files,
-            handler: () => {
-              services?.editorService.add({
-                type: 'tab-pane',
-              });
-            },
-          },
-        ];
-      }
-      if (node.value?.items) {
-        return (
-          componentList.value.reduce(
-            (subMenuData: MenuButton[], group: ComponentGroup, index) =>
-              subMenuData.concat(
-                createMenuItems(group),
-                index < componentList.value.length - 1
-                  ? [
-                      {
-                        type: 'divider',
-                        direction: 'horizontal',
-                      },
-                    ]
-                  : [],
-              ),
-            [],
-          ) || []
-        );
-      }
-      return [];
-    });
+const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
+  {
+    type: 'button',
+    text: '新增',
+    icon: markRaw(Plus),
+    display: () => node.value?.items,
+    items: getSubMenuData.value,
+  },
+  {
+    type: 'button',
+    text: '复制',
+    icon: markRaw(DocumentCopy),
+    display: () => !isRoot.value,
+    handler: () => {
+      node.value && services?.editorService.copy(node.value);
+    },
+  },
+  {
+    type: 'button',
+    text: '删除',
+    icon: markRaw(Delete),
+    display: () => !isRoot.value && !isPage.value,
+    handler: () => {
+      node.value && services?.editorService.remove(node.value);
+    },
+  },
+  ...layerContentMenu,
+]);
 
-    return {
-      menu,
-      menuData: computed<(MenuButton | MenuComponent)[]>(() => [
-        {
-          type: 'button',
-          text: '新增',
-          icon: markRaw(Plus),
-          display: () => node.value?.items,
-          items: getSubMenuData.value,
-        },
-        {
-          type: 'button',
-          text: '复制',
-          icon: markRaw(DocumentCopy),
-          display: () => !isRoot.value,
-          handler: () => {
-            node.value && services?.editorService.copy(node.value);
-          },
-        },
-        {
-          type: 'button',
-          text: '删除',
-          icon: markRaw(Delete),
-          display: () => !isRoot.value && !isPage.value,
-          handler: () => {
-            node.value && services?.editorService.remove(node.value);
-          },
-        },
-        ...layerContentMenu,
-      ]),
+const show = (e: MouseEvent) => {
+  menu.value?.show(e);
+};
 
-      show(e: MouseEvent) {
-        menu.value?.show(e);
-      },
-    };
-  },
+defineExpose({
+  show,
 });
 </script>

package/src/layouts/sidebar/Sidebar.vue

@@ -22,42 +22,48 @@
       <template #component-list-item="{ component }" v-if="item === 'component-list'">
         <slot name="component-list-item" :component="component"></slot>
       </template>
+
+      <template #code-block-panel-header v-if="item === 'code-block'">
+        <slot name="code-block-panel-header"></slot>
+      </template>
+
+      <template #code-block-panel-tool="{ id, data }" v-if="item === 'code-block'">
+        <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
+      </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>
 
-<script lang="ts">
-import { defineComponent, PropType, ref, watch } from 'vue';
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
 
 import { SideBarData } from '../../type';
 
 import TabPane from './TabPane.vue';
 
-export default defineComponent({
-  components: { TabPane },
-
-  name: 'm-sidebar',
-
-  props: {
-    data: {
-      type: Object as PropType<SideBarData>,
-      default: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer'] }),
-    },
+const props = withDefaults(
+  defineProps<{
+    data?: SideBarData;
+  }>(),
+  {
+    data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block'] }),
   },
+);
 
-  setup(props) {
-    const activeTabName = ref(props.data?.status);
+const activeTabName = ref(props.data?.status);
 
-    watch(
-      () => props.data?.status,
-      (status) => {
-        activeTabName.value = status || '0';
-      },
-    );
-
-    return {
-      activeTabName,
-    };
+watch(
+  () => props.data.status,
+  (status) => {
+    activeTabName.value = status || '0';
   },
+);
+
+defineExpose({
+  activeTabName,
 });
 </script>

package/src/layouts/sidebar/TabPane.vue

@@ -30,6 +30,24 @@
         <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
       </template>
 
+      <template #code-block-panel-header v-if="data === 'code-block' || config.slots?.codeBlockPanelHeader">
+        <slot v-if="data === '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="data === 'code-block' || config.slots?.codeBlockPanelTool">
+        <slot v-if="data === '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="data === 'code-block' || config.slots?.codeBlockEditPanelHeader"
+      >
+        <slot v-if="data === '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="data === 'layer' || config.slots?.layerNodeContent"
@@ -46,54 +64,53 @@
   </el-tab-pane>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import { Coin, Files } from '@element-plus/icons-vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { Coin, EditPen, Files } from '@element-plus/icons-vue';
 
 import MIcon from '../../components/Icon.vue';
 import { SideComponent, SideItem } from '../../type';
 
+import CodeBlockList from './code-block/CodeBlockList.vue';
 import ComponentListPanel from './ComponentListPanel.vue';
 import LayerPanel from './LayerPanel.vue';
 
-export default defineComponent({
-  components: { MIcon },
-
-  props: {
-    data: {
-      type: [Object, String] as PropType<SideItem>,
-    },
-  },
+const props = defineProps<{
+  data?: SideItem;
+}>();
 
-  setup(props) {
-    return {
-      config: computed<SideComponent | undefined>(() => {
-        if (typeof props.data !== 'string') {
-          return props.data;
-        }
+const config = computed<SideComponent | undefined>(() => {
+  if (typeof props.data !== 'string') {
+    return props.data;
+  }
 
-        switch (props.data) {
-          case 'component-list':
-            return {
-              type: 'component',
-              icon: Coin,
-              text: '组件',
-              component: ComponentListPanel,
-              slots: {},
-            };
-          case 'layer':
-            return {
-              type: 'component',
-              icon: Files,
-              text: '已选组件',
-              component: LayerPanel,
-              slots: {},
-            };
-          default:
-            return undefined;
-        }
-      }),
-    };
-  },
+  switch (props.data) {
+    case 'component-list':
+      return {
+        type: 'component',
+        icon: Coin,
+        text: '组件',
+        component: ComponentListPanel,
+        slots: {},
+      };
+    case 'layer':
+      return {
+        type: 'component',
+        icon: Files,
+        text: '已选组件',
+        component: LayerPanel,
+        slots: {},
+      };
+    case 'code-block':
+      return {
+        type: 'component',
+        icon: EditPen,
+        text: '代码编辑',
+        component: CodeBlockList,
+        slots: {},
+      };
+    default:
+      return undefined;
+  }
 });
 </script>

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

@@ -0,0 +1,164 @@
+<template>
+  <el-dialog
+    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">
+        <el-tree
+          v-if="!isEmpty(state.codeList)"
+          ref="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"
+        >
+          <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>
+        </el-tree>
+      </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>
+          <el-card 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" />
+              </div>
+            </template>
+            <div class="m-editor-wrapper">
+              <magic-code-editor
+                v-if="codeConfig"
+                ref="codeEditor"
+                class="m-editor-container"
+                :init-values="`${codeConfig.content}`"
+                @save="saveCode"
+                :options="{
+                  tabSize: 2,
+                  fontSize: 16,
+                  formatOnPaste: true,
+                  readOnly: !editable,
+                }"
+              ></magic-code-editor>
+              <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>
+              </div>
+              <div class="m-editor-content-bottom" v-else>
+                <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
+              </div>
+            </div>
+          </el-card>
+        </div>
+      </template>
+    </layout>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+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 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');
+
+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) {
+    ElMessage.error(e.stack);
+    return false;
+  }
+  // 存入dsl
+  await services?.codeBlockService.setCodeDslById(id.value, {
+    name: codeConfig.value.name,
+    content: codeConfig.value.content,
+  });
+  ElMessage.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>