@tmagic/editor 1.2.0-beta.9 → 1.2.1

package/src/layouts/sidebar/Sidebar.vue

@@ -6,58 +6,142 @@
     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, data }" v-if="item === 'code-block'">
-        <slot name="code-block-panel-tool" :id="id" :data="data"></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>
+        <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" setup>
-import { 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 { TMagicTabs } from '@tmagic/design';
+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';
 
 const props = withDefaults(
   defineProps<{
     data?: SideBarData;
+    layerContentMenu: (MenuButton | MenuComponent)[];
   }>(),
   {
     data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block'] }),
   },
 );
 
+const uiComponent = getConfig('components').tabPane;
+
 const activeTabName = ref(props.data?.status);
 
+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: {},
+    },
+  };
+
+  return typeof data === 'string' ? map[data] : data;
+};
+
+const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
+
 watch(
   () => props.data.status,
   (status) => {

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

@@ -1,101 +1,54 @@
 <template>
   <TMagicDialog
-    v-model="isShowCodeBlockEditor"
+    :model-value="true"
     class="code-editor-dialog"
     :title="currentTitle"
     :fullscreen="true"
-    :before-close="saveAndClose"
+    :close-on-press-escape="false"
     :append-to-body="true"
+    :show-close="false"
   >
-    <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>
+    <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
       <!-- 右侧区域 -->
       <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',
-          ]"
-        >
+        <div v-if="!isEmpty(codeConfig)" class="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">
-              <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">
-                <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>
+          <FunctionEditor
+            v-if="codeConfig"
+            :id="id"
+            :name="codeConfig.name"
+            :content="codeConfig.content"
+            :paramsColConfig="paramsColConfig"
+            :editable="!!editable"
+            :autoSaveDraft="true"
+            :codeOptions="codeOptions"
+          ></FunctionEditor>
         </div>
       </template>
-    </layout>
+    </Layout>
   </TMagicDialog>
 </template>
 
-<script lang="ts" setup>
+<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 { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
-import { TMagicButton, TMagicCard, TMagicDialog, TMagicInput, tMagicMessage, TMagicTree } from '@tmagic/design';
+import { TMagicDialog } from '@tmagic/design';
+import { ColumnConfig } from '@tmagic/form';
+import { CodeBlockContent } from '@tmagic/schema';
 
-import type { CodeBlockContent, CodeDslList, ListState, Services } from '../../../type';
-import { CodeEditorMode } from '../../../type';
-import MagicCodeEditor from '../../CodeEditor.vue';
-import Layout from '../../Layout.vue';
+import FunctionEditor from '../../../components/FunctionEditor.vue';
+import Layout from '../../../components/Layout.vue';
+import type { ListState, Services } from '../../../type';
+import { serializeConfig } from '../../../utils/editor';
 
 const services = inject<Services>('services');
+const codeOptions = inject('codeOptions', {});
+
+defineProps<{
+  paramsColConfig?: ColumnConfig;
+}>();
 
-const codeEditor = ref<InstanceType<typeof MagicCodeEditor>>();
 const left = ref(200);
 const currentTitle = ref('');
 // 编辑器当前需展示的代码块内容
@@ -105,18 +58,15 @@ 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;
+  codeConfig.value = cloneDeep(await services?.codeBlockService.getCodeContentById(id.value)) || null;
+  if (!codeConfig.value) return;
+  codeConfig.value.content = serializeConfig(codeConfig.value.content);
 });
 
 watchEffect(async () => {
@@ -131,39 +81,4 @@ watchEffect(async () => {
   });
   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>