@tmagic/editor 1.1.6 → 1.2.0-beta.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.6",
+  "version": "1.2.0-beta.1",
   "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.1",
+    "@tmagic/form": "1.2.0-beta.1",
+    "@tmagic/schema": "1.2.0-beta.1",
+    "@tmagic/stage": "1.2.0-beta.1",
+    "@tmagic/utils": "1.2.0-beta.1",
     "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.1",
     "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 }">
+            <slot name="code-block-panel-tool" :id="id"></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/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,10 @@ 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 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 +59,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('m-fields-code-select', CodeSelect);
   },
 };

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"

package/src/layouts/sidebar/Sidebar.vue

@@ -22,6 +22,18 @@
       <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 }" v-if="item === 'code-block'">
+        <slot name="code-block-panel-tool" :id="id"></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>
@@ -41,7 +53,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<SideBarData>,
-      default: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer'] }),
+      default: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block'] }),
     },
   },
 

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 }" v-if="data === 'code-block' || config.slots?.codeBlockPanelTool">
+        <slot v-if="data === 'code-block'" name="code-block-panel-tool" :id="id"></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"
@@ -48,11 +66,12 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import { Coin, Files } from '@element-plus/icons-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';
 
@@ -89,6 +108,14 @@ export default defineComponent({
               component: LayerPanel,
               slots: {},
             };
+          case 'code-block':
+            return {
+              type: 'component',
+              icon: EditPen,
+              text: '代码编辑',
+              component: CodeBlockList,
+              slots: {},
+            };
           default:
             return undefined;
         }

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

@@ -0,0 +1,165 @@
+<template>
+  <el-dialog
+    v-model="isShowCodeBlockEditor"
+    :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">
+      <!-- 左侧列表 -->
+      <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,
+      content: value.content,
+    });
+  });
+  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>