@tmagic/editor 1.1.6 → 1.2.0-beta.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.6",
+  "version": "1.2.0-beta.2",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,11 +45,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.1.6",
-    "@tmagic/form": "1.1.6",
-    "@tmagic/schema": "1.1.6",
-    "@tmagic/stage": "1.1.6",
-    "@tmagic/utils": "1.1.6",
+    "@tmagic/core": "1.2.0-beta.2",
+    "@tmagic/form": "1.2.0-beta.2",
+    "@tmagic/schema": "1.2.0-beta.2",
+    "@tmagic/stage": "1.2.0-beta.2",
+    "@tmagic/utils": "1.2.0-beta.2",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.17",
@@ -62,7 +62,7 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.1.6",
+    "@tmagic/form": "1.2.0-beta.2",
     "element-plus": "^2.2.17",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"

package/src/Editor.vue

@@ -22,6 +22,18 @@
           <template #component-list-item="{ component }">
             <slot name="component-list-item" :component="component"></slot>
           </template>
+
+          <template #code-block-panel-header>
+            <slot name="code-block-panel-header"></slot>
+          </template>
+
+          <template #code-block-panel-tool="{ id, data }">
+            <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
+          </template>
+
+          <template #code-block-edit-panel-header="{ id }">
+            <slot name="code-block-edit-panel-header" :id="id"></slot>
+          </template>
         </sidebar>
       </slot>
     </template>
@@ -65,6 +77,7 @@ import NavMenu from './layouts/NavMenu.vue';
 import PropsPanel from './layouts/PropsPanel.vue';
 import Sidebar from './layouts/sidebar/Sidebar.vue';
 import Workspace from './layouts/workspace/Workspace.vue';
+import codeBlockService from './services/codeBlock';
 import componentListService from './services/componentList';
 import editorService from './services/editor';
 import eventsService from './services/events';
@@ -216,7 +229,9 @@ export default defineComponent({
     // 初始值变化，重新设置节点信息
     watch(
       () => props.modelValue,
-      (modelValue) => editorService.set('root', modelValue),
+      (modelValue) => {
+        editorService.set('root', modelValue);
+      },
       {
         immediate: true,
       },
@@ -288,6 +303,7 @@ export default defineComponent({
       uiService.destroy();
       componentListService.destroy();
       storageService.destroy();
+      codeBlockService.destroy();
     });
 
     const services: Services = {
@@ -298,6 +314,7 @@ export default defineComponent({
       editorService,
       uiService,
       storageService,
+      codeBlockService,
     };
 
     provide('services', services);

package/src/fields/Code.vue

@@ -3,6 +3,7 @@
     :style="`height: ${height}`"
     :init-values="model[name]"
     :language="language"
+    :options="config.options"
     @save="save"
   ></magic-code-editor>
 </template>
@@ -17,12 +18,14 @@ const props = defineProps<{
   name: string;
   config: {
     language?: string;
+    options?: Object;
+    height?: string;
   };
   prop: string;
 }>();
 
 const language = computed(() => props.config.language || 'javascript');
-const height = computed(() => `${document.body.clientHeight - 168}px`);
+const height = computed(() => props.config.height || `${document.body.clientHeight - 168}px`);
 
 const save = (v: string) => {
   props.model[props.name] = v;

package/src/fields/CodeLink.vue

@@ -12,6 +12,7 @@ const props = defineProps<{
     name: string;
     text?: string;
     formTitle?: string;
+    codeOptions?: Object;
   };
   model: any;
   name: string;
@@ -20,17 +21,24 @@ const props = defineProps<{
 
 const emit = defineEmits(['change']);
 
-const formConfig = computed(() => ({
-  ...props.config,
-  text: '',
-  type: 'link',
-  form: [
-    {
-      name: props.name,
-      type: 'vs-code',
-    },
-  ],
-}));
+const formConfig = computed(() => {
+  const { codeOptions, ...config } = props.config;
+  return {
+    ...config,
+    text: '',
+    type: 'link',
+    form: [
+      {
+        name: props.name,
+        type: 'vs-code',
+        options: {
+          tabSize: 2,
+          ...(codeOptions || {}),
+        },
+      },
+    ],
+  };
+});
 
 const modelValue = reactive<{ form: Record<string, string> }>({
   form: {

package/src/fields/CodeSelect.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="m-fields-code-select" :key="fieldKey">
+    <el-card shadow="never">
+      <template #header>
+        <m-fields-select
+          :config="selectConfig"
+          :model="model"
+          :prop="prop"
+          :name="name"
+          :size="size"
+          @change="changeHandler"
+        ></m-fields-select>
+      </template>
+      <div class="tool-bar">
+        <el-tooltip class="tool-item" effect="dark" content="查看代码块" placement="top">
+          <svg
+            @click="viewHandler"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+            width="15px"
+            height="15px"
+            data-v-65a7fb6c=""
+          >
+            <path
+              fill="currentColor"
+              d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
+            ></path>
+          </svg>
+        </el-tooltip>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
+import { ElMessage } from 'element-plus';
+import { cloneDeep, map, xor } from 'lodash-es';
+
+import { SelectConfig } from '@tmagic/form';
+
+import type { Services } from '../type';
+import { CodeEditorMode, CodeSelectOp } from '../type';
+const services = inject<Services>('services');
+
+const emit = defineEmits(['change']);
+
+const props = defineProps<{
+  config: {
+    selectConfig?: SelectConfig;
+  };
+  model: any;
+  prop: string;
+  name: string;
+  size: string;
+}>();
+
+const selectConfig = computed(() => {
+  const defaultConfig = {
+    multiple: true,
+    options: async () => {
+      const codeDsl = await services?.codeBlockService.getCodeDsl();
+      if (codeDsl) {
+        return map(codeDsl, (value, key) => ({
+          text: `${value.name}（${key}）`,
+          label: `${value.name}（${key}）`,
+          value: key,
+        }));
+      }
+      return [];
+    },
+  };
+  return {
+    ...defaultConfig,
+    ...props.config.selectConfig,
+  };
+});
+const fieldKey = ref('');
+const multiple = ref(true);
+const combineIds = ref<string[]>([]);
+let lastTagSnapshot = cloneDeep(props.model[props.name]) || [];
+
+watchEffect(async () => {
+  const combineNames = await Promise.all(
+    combineIds.value.map(async (id) => {
+      const { name = '' } = (await services?.codeBlockService.getCodeContentById(id)) || {};
+      return name;
+    }),
+  );
+  fieldKey.value = combineNames.join('-');
+});
+
+const changeHandler = async (value: any) => {
+  let codeIds = value;
+  if (typeof value === 'string') {
+    multiple.value = false;
+    lastTagSnapshot = [lastTagSnapshot];
+    codeIds = value ? [value] : [];
+  }
+  await setCombineRelation(codeIds);
+  emit('change', value);
+};
+
+// 同步绑定关系
+const setCombineRelation = async (codeIds: string[]) => {
+  // 组件id
+  const { id = '' } = services?.editorService.get('node') || {};
+
+  // 兼容单选
+  let opFlag = CodeSelectOp.CHANGE;
+  let diffValues = codeIds;
+  if (multiple.value) {
+    opFlag = codeIds.length < lastTagSnapshot.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
+    diffValues = xor(codeIds, lastTagSnapshot) as string[];
+  }
+
+  // 记录绑定关系
+  await services?.codeBlockService.setCombineRelation(id, diffValues, opFlag, props.prop);
+  lastTagSnapshot = codeIds;
+  await setCombineIds(codeIds);
+};
+
+// 记录当前已被绑定的代码块，为查看弹窗的展示内容
+const setCombineIds = async (codeIds: string[]) => {
+  combineIds.value = codeIds;
+  await services?.codeBlockService.setCombineIds(codeIds);
+};
+
+const viewHandler = async () => {
+  if (props.model[props.name].length === 0) {
+    ElMessage.error('请先绑定代码块');
+    return;
+  }
+  // 记录当前已被绑定的代码块，为查看弹窗的展示内容
+  await setCombineIds(props.model[props.name]);
+  await services?.codeBlockService.setMode(CodeEditorMode.LIST);
+  services?.codeBlockService.setCodeEditorContent(true, combineIds.value[0]);
+};
+</script>

package/src/index.ts

@@ -19,6 +19,7 @@ import { App } from 'vue';
 
 import Code from './fields/Code.vue';
 import CodeLink from './fields/CodeLink.vue';
+import CodeSelect from './fields/CodeSelect.vue';
 import uiSelect from './fields/UISelect.vue';
 import CodeEditor from './layouts/CodeEditor.vue';
 import { setConfig } from './utils/config';
@@ -38,8 +39,11 @@ export { default as historyService } from './services/history';
 export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
 export { default as uiService } from './services/ui';
+export { default as codeBlockService } from './services/codeBlock';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
 export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
+export { default as CodeSelect } from './fields/CodeSelect.vue';
+export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
@@ -56,11 +60,11 @@ export default {
     // eslint-disable-next-line no-param-reassign
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
-
     app.component(Editor.name, Editor);
     app.component('m-fields-ui-select', uiSelect);
     app.component('m-fields-code-link', CodeLink);
     app.component('m-fields-vs-code', Code);
-    app.component(CodeEditor.name, CodeEditor);
+    app.component('magic-code-editor', CodeEditor);
+    app.component('m-fields-code-select', CodeSelect);
   },
 };

package/src/layouts/AddPageBox.vue

@@ -11,8 +11,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, toRaw } from 'vue';
+<script lang="ts" setup>
+import { inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
@@ -20,24 +20,16 @@ import { NodeType } from '@tmagic/schema';
 import type { Services } from '../type';
 import { generatePageNameByApp } from '../utils';
 
-export default defineComponent({
-  components: { Plus },
+const services = inject<Services>('services');
 
-  setup() {
-    const services = inject<Services>('services');
+const clickHandler = () => {
+  const { editorService } = services || {};
 
-    return {
-      clickHandler() {
-        const { editorService } = services || {};
+  if (!editorService) return;
 
-        if (!editorService) return;
-
-        editorService.add({
-          type: NodeType.PAGE,
-          name: generatePageNameByApp(toRaw(editorService.get('root'))),
-        });
-      },
-    };
-  },
-});
+  editorService.add({
+    type: NodeType.PAGE,
+    name: generatePageNameByApp(toRaw(editorService.get('root'))),
+  });
+};
 </script>

package/src/layouts/CodeEditor.vue

@@ -2,12 +2,35 @@
   <div ref="codeEditor" class="magic-code-editor"></div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
+const props = withDefaults(
+  defineProps<{
+    initValues?: string | Object;
+    modifiedValues?: string | Object;
+    type?: string;
+    language?: string;
+    options?: {
+      [key: string]: any;
+    };
+    autoSave?: boolean;
+  }>(),
+  {
+    type: '',
+    autoSave: true,
+    language: 'javascript',
+    options: () => ({
+      tabSize: 2,
+    }),
+  },
+);
+
+const emit = defineEmits(['initd', 'save']);
+
 const toString = (v: string | any, language: string): string => {
   let value = '';
   if (typeof v !== 'string') {
@@ -24,148 +47,111 @@ const toString = (v: string | any, language: string): string => {
   return value;
 };
 
-export default defineComponent({
-  name: 'magic-code-editor',
+let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
+let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
 
-  props: {
-    initValues: {
-      type: [String, Object],
-    },
+const values = ref('');
+const loading = ref(false);
+const codeEditor = ref<HTMLDivElement>();
 
-    modifiedValues: {
-      type: [String, Object],
-    },
+const resizeObserver = new globalThis.ResizeObserver(
+  throttle((): void => {
+    vsEditor?.layout();
+    vsDiffEditor?.layout();
+  }, 300),
+);
 
-    type: {
-      type: String,
-      default: () => '',
-    },
+const setEditorValue = (v: string | any, m: string | any) => {
+  values.value = toString(v, props.language);
 
-    language: {
-      type: String,
-      default: () => 'javascript',
-    },
+  if (props.type === 'diff') {
+    const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
+    const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
 
-    options: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  emits: ['initd', 'save'],
+    return vsDiffEditor?.setModel({
+      original: originalModel,
+      modified: modifiedModel,
+    });
+  }
 
-  setup(props, { emit }) {
-    let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
-    let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
+  return vsEditor?.setValue(values.value);
+};
 
-    const values = ref('');
-    const loading = ref(false);
-    const codeEditor = ref<HTMLDivElement>();
+const getEditorValue = () =>
+  props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
 
-    const resizeObserver = new globalThis.ResizeObserver(
-      throttle((): void => {
-        vsEditor?.layout();
-        vsDiffEditor?.layout();
-      }, 300),
-    );
+const init = async () => {
+  if (!codeEditor.value) return;
 
-    const setEditorValue = (v: string | any, m: string | any) => {
-      values.value = toString(v, props.language);
+  const options = {
+    value: values.value,
+    language: props.language,
+    theme: 'vs-dark',
+    ...props.options,
+  };
 
-      if (props.type === 'diff') {
-        const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
-        const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
+  if (props.type === 'diff') {
+    vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
+  } else {
+    vsEditor = monaco.editor.create(codeEditor.value, options);
+  }
 
-        return vsDiffEditor?.setModel({
-          original: originalModel,
-          modified: modifiedModel,
-        });
-      }
+  setEditorValue(props.initValues, props.modifiedValues);
 
-      return vsEditor?.setValue(values.value);
-    };
+  loading.value = false;
 
-    const getEditorValue = () =>
-      props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
+  emit('initd', vsEditor);
 
-    const init = async () => {
-      if (!codeEditor.value) return;
+  codeEditor.value.addEventListener('keydown', (e) => {
+    if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
+      e.preventDefault();
+      e.stopPropagation();
+      emit('save', getEditorValue());
+    }
+  });
 
-      const options = {
-        value: values.value,
-        language: props.language,
-        theme: 'vs-dark',
-        ...props.options,
-      };
+  if (props.type !== 'diff' && props.autoSave) {
+    vsEditor?.onDidBlurEditorWidget(() => {
+      emit('save', getEditorValue());
+    });
+  }
 
-      if (props.type === 'diff') {
-        vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
-      } else {
-        vsEditor = monaco.editor.create(codeEditor.value, options);
-      }
+  resizeObserver.observe(codeEditor.value);
+};
 
+watch(
+  () => props.initValues,
+  (v, preV) => {
+    if (v !== preV) {
       setEditorValue(props.initValues, props.modifiedValues);
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
 
-      loading.value = false;
-
-      emit('initd', vsEditor);
-
-      codeEditor.value.addEventListener('keydown', (e) => {
-        if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
-          e.preventDefault();
-          e.stopPropagation();
-          emit('save', getEditorValue());
-        }
-      });
-
-      if (props.type !== 'diff') {
-        vsEditor?.onDidBlurEditorWidget(() => {
-          emit('save', getEditorValue());
-        });
-      }
-
-      resizeObserver.observe(codeEditor.value);
-    };
-
-    watch(
-      () => props.initValues,
-      (v, preV) => {
-        if (v !== preV) {
-          setEditorValue(props.initValues, props.modifiedValues);
-        }
-      },
-      {
-        deep: true,
-        immediate: true,
-      },
-    );
-
-    onMounted(async () => {
-      loading.value = true;
-
-      init();
-    });
+onMounted(async () => {
+  loading.value = true;
 
-    onUnmounted(() => {
-      resizeObserver.disconnect();
-    });
+  init();
+});
 
-    return {
-      values,
-      loading,
-      codeEditor,
+onUnmounted(() => {
+  resizeObserver.disconnect();
+});
 
-      getEditor() {
-        return vsEditor || vsDiffEditor;
-      },
+defineExpose({
+  getEditor() {
+    return vsEditor || vsDiffEditor;
+  },
 
-      setEditorValue,
+  setEditorValue,
 
-      focus() {
-        vsEditor?.focus();
-        vsDiffEditor?.focus();
-      },
-    };
+  focus() {
+    vsEditor?.focus();
+    vsDiffEditor?.focus();
   },
 });
 </script>

package/src/layouts/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="el">
+  <div ref="el" class="m-editor-layout">
     <template v-if="typeof props.left !== 'undefined'">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>

package/src/layouts/PropsPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="`m-editor-props-panel">
+  <div class="m-editor-props-panel">
     <slot name="props-panel-header"></slot>
     <m-form
       ref="configForm"