@tmagic/editor 1.3.0-alpha.12 → 1.3.0-alpha.14

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

@@ -1,90 +1,69 @@
 <template>
-  <TMagicScrollbar class="m-editor-code-block-list m-editor-dep-list-panel">
-    <slot name="code-block-panel-header">
-      <div class="search-wrapper">
-        <SearchInput @search="filterTextChangeHandler"></SearchInput>
-        <TMagicButton class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
-          >新增</TMagicButton
-        >
-      </div>
-    </slot>
-
-    <!-- 代码块列表 -->
-    <TMagicTree
-      ref="tree"
-      class="magic-editor-layer-tree"
-      node-key="id"
-      empty-text="暂无代码块"
-      :default-expanded-keys="expandedKeys"
-      :expand-on-click-node="false"
-      :data="codeList"
-      :props="treeProps"
-      :highlight-current="true"
-      :filter-node-method="filterNode"
-      @node-click="clickHandler"
-    >
-      <template #default="{ data }">
-        <div :id="data.id" class="list-container">
-          <div class="list-item">
-            <CodeIcon v-if="data.type === 'code'" class="codeIcon"></CodeIcon>
-            <AppManageIcon v-if="data.type === 'node'" class="compIcon"></AppManageIcon>
-            <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
-              >{{ data.name }} ({{ data.id }})</span
-            >
-            <!-- 右侧工具栏 -->
-            <div class="right-tool" v-if="data.type === 'code'">
-              <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="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>
+  <TMagicTree
+    ref="tree"
+    class="magic-editor-layer-tree"
+    node-key="id"
+    empty-text="暂无代码块"
+    :default-expanded-keys="expandedKeys"
+    :expand-on-click-node="false"
+    :data="codeList"
+    :props="{
+      children: 'children',
+      label: 'name',
+      value: 'id',
+    }"
+    :highlight-current="true"
+    :filter-node-method="filterNode"
+    @node-click="clickHandler"
+  >
+    <template #default="{ data }">
+      <div :id="data.id" class="list-container">
+        <div class="list-item">
+          <CodeIcon v-if="data.type === 'code'" class="codeIcon"></CodeIcon>
+          <AppManageIcon v-if="data.type === 'node'" class="compIcon"></AppManageIcon>
+          <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
+            >{{ data.name }} ({{ data.id }})</span
+          >
+          <!-- 右侧工具栏 -->
+          <div class="right-tool" v-if="data.type === 'code'">
+            <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+              <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(data.id)"></Icon>
+            </TMagicTooltip>
+            <TMagicTooltip v-if="editable" effect="dark" content="删除" placement="bottom">
+              <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>
-      </template>
-    </TMagicTree>
-
-    <!-- 代码块编辑区 -->
-    <CodeBlockEditor v-if="isShowCodeBlockEditor" :paramsColConfig="paramsColConfig">
-      <template #code-block-edit-panel-header="{ id }">
-        <slot name="code-block-edit-panel-header" :id="id"></slot>
-      </template>
-    </CodeBlockEditor>
-  </TMagicScrollbar>
+      </div>
+    </template>
+  </TMagicTree>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
-import { TMagicButton, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
-import { ColumnConfig } from '@tmagic/form';
-import { CodeBlockContent, Id } from '@tmagic/schema';
+import { tMagicMessage, tMagicMessageBox, TMagicTooltip, TMagicTree } from '@tmagic/design';
+import type { Id } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
-import SearchInput from '@editor/components/SearchInput.vue';
 import AppManageIcon from '@editor/icons/AppManageIcon.vue';
 import CodeIcon from '@editor/icons/CodeIcon.vue';
 import { CodeDeleteErrorType, CodeDslItem, Services } from '@editor/type';
 
-import CodeBlockEditor from './CodeBlockEditor.vue';
-
 defineOptions({
   name: 'MEditorCodeBlockList',
 });
 
 const props = defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
-  paramsColConfig?: ColumnConfig;
 }>();
 
-const treeProps = {
-  children: 'children',
-  label: 'name',
-  value: 'id',
-};
+const emit = defineEmits<{
+  edit: [id: string];
+  remove: [id: string];
+}>();
 
 const { codeBlockService, depService, editorService } = inject<Services>('services') || {};
 
@@ -107,58 +86,10 @@ const codeList = computed(() =>
     };
   }),
 );
-
 // 默认展开组件层级的节点
 const expandedKeys = computed(() => codeList.value.map((item) => item.id));
-
 const editable = computed(() => codeBlockService?.getEditStatus());
 
-// 是否展示代码编辑区
-const isShowCodeBlockEditor = computed(() => codeBlockService?.getCodeEditorShowStatus() || false);
-
-// 新增代码块
-const createCodeBlock = async () => {
-  if (!codeBlockService) {
-    tMagicMessage.error('新增代码块失败');
-    return;
-  }
-
-  const codeConfig: CodeBlockContent = {
-    name: '代码块',
-    content: `({app, params}) => {\n  // place your code here\n}`,
-    params: [],
-  };
-
-  const id = await codeBlockService.getUniqueId();
-
-  await codeBlockService.setCodeDslById(id, codeConfig);
-  codeBlockService.setCodeEditorContent(true, id);
-};
-
-// 编辑代码块
-const editCode = async (key: Id) => {
-  codeBlockService?.setCodeEditorContent(true, key);
-};
-
-// 删除代码块
-const deleteCode = (key: Id) => {
-  const currentCode = codeList.value.find((codeItem) => codeItem.id === key);
-  const existBinds = Boolean(currentCode?.children.length);
-  const undeleteableList = codeBlockService?.getUndeletableList() || [];
-  if (!existBinds && !undeleteableList.includes(key)) {
-    // 无绑定关系，且不在不可删除列表中
-    codeBlockService?.deleteCodeDslByIds([key]);
-  } else {
-    if (typeof props.customError === 'function') {
-      props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
-    } else {
-      tMagicMessage.error('代码块删除失败');
-    }
-  }
-};
-
-const tree = ref<InstanceType<typeof TMagicTree>>();
-
 const filterNode = (value: string, data: CodeDslItem): boolean => {
   if (!value) {
     return true;
@@ -166,10 +97,6 @@ const filterNode = (value: string, data: CodeDslItem): boolean => {
   return `${data.name}${data.id}`.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1;
 };
 
-const filterTextChangeHandler = (val: string) => {
-  tree.value?.filter(val);
-};
-
 // 选中组件
 const selectComp = (compId: Id) => {
   const stage = editorService?.get('stage');
@@ -184,4 +111,39 @@ const clickHandler = (data: any, node: any) => {
     selectComp(node.parent.data.id);
   }
 };
+
+// 编辑代码块
+const editCode = (id: string) => {
+  emit('edit', id);
+};
+
+const deleteCode = async (id: string) => {
+  const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
+  const existBinds = Boolean(currentCode?.children.length);
+  const undeleteableList = codeBlockService?.getUndeletableList() || [];
+  if (!existBinds && !undeleteableList.includes(id)) {
+    await tMagicMessageBox.confirm('确定删除该代码块吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+
+    // 无绑定关系，且不在不可删除列表中
+    emit('remove', id);
+  } else {
+    if (typeof props.customError === 'function') {
+      props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
+    } else {
+      tMagicMessage.error('代码块删除失败');
+    }
+  }
+};
+
+const tree = ref<InstanceType<typeof TMagicTree>>();
+
+defineExpose({
+  filter(val: string) {
+    tree.value?.filter(val);
+  },
+});
 </script>

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

@@ -0,0 +1,64 @@
+<template>
+  <TMagicScrollbar class="m-editor-code-block-list m-editor-dep-list-panel">
+    <slot name="code-block-panel-header">
+      <div class="search-wrapper">
+        <SearchInput @search="filterTextChangeHandler"></SearchInput>
+        <TMagicButton v-if="editable" class="create-code-button" type="primary" size="small" @click="createCodeBlock"
+          >新增</TMagicButton
+        >
+      </div>
+    </slot>
+
+    <!-- 代码块列表 -->
+    <CodeBlockList
+      ref="codeBlockList"
+      :custom-error="customError"
+      @edit="editCode"
+      @remove="deleteCode"
+    ></CodeBlockList>
+
+    <!-- 代码块编辑区 -->
+    <CodeBlockEditor
+      v-if="codeConfig"
+      ref="codeBlockEditor"
+      :disabled="!editable"
+      :content="codeConfig"
+      @submit="submitCodeBlockHandler"
+    ></CodeBlockEditor>
+  </TMagicScrollbar>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
+
+import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
+import type { Id } from '@tmagic/schema';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import SearchInput from '@editor/components/SearchInput.vue';
+import type { CodeDeleteErrorType, Services } from '@editor/type';
+import { useCodeBlockEdit } from '@editor/utils/use-code-block-edit';
+
+import CodeBlockList from './CodeBlockList.vue';
+
+defineOptions({
+  name: 'MEditorCodeBlockListPanel',
+});
+
+defineProps<{
+  customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
+}>();
+
+const { codeBlockService } = inject<Services>('services') || {};
+
+const editable = computed(() => codeBlockService?.getEditStatus());
+
+const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
+  useCodeBlockEdit(codeBlockService);
+
+const codeBlockList = ref<InstanceType<typeof CodeBlockList>>();
+
+const filterTextChangeHandler = (val: string) => {
+  codeBlockList.value?.filter(val);
+};
+</script>

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -1,29 +1,23 @@
 <template>
-  <TMagicDrawer
-    v-model="visible"
+  <MFormDrawer
+    ref="fomDrawer"
+    label-width="80px"
     :title="title"
-    :close-on-press-escape="true"
-    :append-to-body="true"
-    :show-close="true"
-    :close-on-click-modal="true"
-    :size="size"
-  >
-    <MForm ref="form" :config="dataSourceConfig" :init-values="initValues" @change="changeHandler"></MForm>
-
-    <template #footer>
-      <div>
-        <TMagicButton type="primary" @click="submitHandler">确定</TMagicButton>
-        <TMagicButton @click="hide">关闭</TMagicButton>
-      </div>
-    </template>
-  </TMagicDrawer>
+    :width="size"
+    :config="dataSourceConfig"
+    :values="initValues"
+    :disabled="disabled"
+    @change="changeHandler"
+    @submit="submitHandler"
+    @error="errorHandler"
+  ></MFormDrawer>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, ref, watchEffect } from 'vue';
 
-import { TMagicButton, TMagicDrawer, tMagicMessage } from '@tmagic/design';
-import { MForm } from '@tmagic/form';
+import { tMagicMessage } from '@tmagic/design';
+import { MFormDrawer } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
@@ -34,6 +28,7 @@ defineOptions({
 const props = defineProps<{
   title?: string;
   values: any;
+  disabled: boolean;
 }>();
 
 const type = ref('base');
@@ -46,7 +41,7 @@ const size = computed(() => globalThis.document.body.clientWidth - (services?.ui
 
 const dataSourceConfig = computed(() => services?.dataSourceService.getFormConfig(type.value) || []);
 
-const form = ref<InstanceType<typeof MForm>>();
+const fomDrawer = ref<InstanceType<typeof MFormDrawer>>();
 
 const initValues = ref({});
 
@@ -63,26 +58,21 @@ const changeHandler = (value: Record<string, any>) => {
   initValues.value = value;
 };
 
-const submitHandler = async () => {
-  try {
-    const values = await form.value?.submitForm();
-    emit('submit', values);
-  } catch (error: any) {
-    tMagicMessage.error(error.message);
-  }
+const submitHandler = (values: any) => {
+  emit('submit', values);
 };
 
-const visible = ref(false);
-
-const hide = () => {
-  visible.value = false;
+const errorHandler = (error: any) => {
+  tMagicMessage.error(error.message);
 };
 
 defineExpose({
   show() {
-    visible.value = true;
+    fomDrawer.value?.show();
   },
 
-  hide,
+  hide() {
+    fomDrawer.value?.hide();
+  },
 });
 </script>

package/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -0,0 +1,111 @@
+<template>
+  <TMagicTree
+    ref="tree"
+    class="magic-editor-layer-tree"
+    node-key="id"
+    empty-text="暂无代码块"
+    default-expand-all
+    :expand-on-click-node="false"
+    :data="list"
+    :highlight-current="true"
+    @node-click="clickHandler"
+  >
+    <template #default="{ data }">
+      <div :id="data.id" class="list-container">
+        <div class="list-item">
+          <Icon v-if="data.type === 'code'" class="codeIcon" :icon="Coin"></Icon>
+          <Icon v-if="data.type === 'node'" class="compIcon" :icon="Aim"></Icon>
+          <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
+            >{{ data.name }}（{{ data.id }}）</span
+          >
+          <!-- 右侧工具栏 -->
+          <div class="right-tool" v-if="data.type === 'code'">
+            <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+              <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editHandler(`${data.id}`)"></Icon>
+            </TMagicTooltip>
+            <TMagicTooltip v-if="editable" effect="dark" content="删除" placement="bottom">
+              <Icon :icon="Close" class="edit-icon" @click.stop="removeHandler(`${data.id}`)"></Icon>
+            </TMagicTooltip>
+            <slot name="data-source-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
+          </div>
+        </div>
+      </div>
+    </template>
+  </TMagicTree>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+import { Aim, Close, Coin, Edit, View } from '@element-plus/icons-vue';
+
+import { tMagicMessageBox, TMagicTooltip, TMagicTree } from '@tmagic/design';
+import { Id } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorDataSourceList',
+});
+
+const emit = defineEmits<{
+  edit: [id: string];
+  remove: [id: string];
+}>();
+
+const { depService, editorService, dataSourceService } = inject<Services>('services') || {};
+
+const editable = computed(() => dataSourceService?.get('editable') ?? true);
+
+const list = computed(() =>
+  Object.values(depService?.targets['data-source'] || {}).map((target) => ({
+    id: target.id,
+    name: target.name,
+    type: 'code',
+    children: Object.entries(target.deps).map(([id, dep]) => ({
+      name: dep.name,
+      type: 'node',
+      id,
+      children: dep.keys.map((key) => ({ name: key, id: key, type: 'key' })),
+    })),
+  })),
+);
+
+const editHandler = (id: string) => {
+  emit('edit', id);
+};
+
+const removeHandler = async (id: string) => {
+  await tMagicMessageBox.confirm('确定删除?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+
+  emit('remove', id);
+};
+
+// 选中组件
+const selectComp = (compId: Id) => {
+  const stage = editorService?.get('stage');
+  editorService?.select(compId);
+  stage?.select(compId);
+};
+
+const clickHandler = (data: any, node: any) => {
+  if (data.type === 'node') {
+    selectComp(data.id);
+  } else if (data.type === 'key') {
+    selectComp(node.parent.data.id);
+  }
+};
+
+const tree = ref<InstanceType<typeof TMagicTree>>();
+
+defineExpose({
+  filter(val: string) {
+    debugger;
+    tree.value?.filter(val);
+  },
+});
+</script>

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -2,46 +2,15 @@
   <TMagicScrollbar class="data-source-list-panel m-editor-dep-list-panel">
     <div class="search-wrapper">
       <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <TMagicButton type="primary" size="small" @click="addHandler">新增</TMagicButton>
+      <TMagicButton v-if="editable" type="primary" size="small" @click="addHandler">新增</TMagicButton>
     </div>
 
     <!-- 数据源列表 -->
-    <TMagicTree
-      ref="tree"
-      class="magic-editor-layer-tree"
-      node-key="id"
-      empty-text="暂无代码块"
-      default-expand-all
-      :expand-on-click-node="false"
-      :data="list"
-      :highlight-current="true"
-      @node-click="clickHandler"
-    >
-      <template #default="{ data }">
-        <div :id="data.id" class="list-container">
-          <div class="list-item">
-            <Icon v-if="data.type === 'code'" class="codeIcon" :icon="Coin"></Icon>
-            <Icon v-if="data.type === 'node'" class="compIcon" :icon="Aim"></Icon>
-            <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
-              >{{ data.name }}（{{ data.id }}）</span
-            >
-            <!-- 右侧工具栏 -->
-            <div class="right-tool" v-if="data.type === 'code'">
-              <TMagicTooltip effect="dark" content="编辑" placement="bottom">
-                <Icon class="edit-icon" :icon="Edit" @click.stop="editHandler(`${data.id}`)"></Icon>
-              </TMagicTooltip>
-              <TMagicTooltip effect="dark" content="删除" placement="bottom">
-                <Icon :icon="Close" class="edit-icon" @click.stop="removeHandler(`${data.id}`)"></Icon>
-              </TMagicTooltip>
-              <slot name="data-source-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
-            </div>
-          </div>
-        </div>
-      </template>
-    </TMagicTree>
+    <DataSourceList @edit="editHandler" @remove="removeHandler"></DataSourceList>
 
     <DataSourceConfigPanel
       ref="editDialog"
+      :disabled="!editable"
       :values="dataSourceValues"
       :title="typeof dataSourceValues.id !== 'undefined' ? `编辑${dataSourceValues.title}` : '新增'"
       @submit="submitDataSourceHandler"
@@ -51,42 +20,28 @@
 
 <script setup lang="ts" name="MEditorDataSourceListPanel">
 import { computed, inject, ref } from 'vue';
-import { Aim, Close, Coin, Edit } from '@element-plus/icons-vue';
 
-import { TMagicButton, tMagicMessageBox, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
-import { DataSourceSchema, Id } from '@tmagic/schema';
+import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
+import type { DataSourceSchema } from '@tmagic/schema';
 
-import Icon from '@editor/components/Icon.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import type { Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
+import DataSourceList from './DataSourceList.vue';
 
 defineOptions({
   name: 'MEditorDataSourceListPanel',
 });
 
-const services = inject<Partial<Services>>('services', {});
-const { dataSourceService, depService, editorService } = inject<Services>('services') || {};
-
-const list = computed(() =>
-  Object.values(depService?.targets['data-source'] || {}).map((target) => ({
-    id: target.id,
-    name: target.name,
-    type: 'code',
-    children: Object.entries(target.deps).map(([id, dep]) => ({
-      name: dep.name,
-      type: 'node',
-      id,
-      children: dep.keys.map((key) => ({ name: key, id: key, type: 'key' })),
-    })),
-  })),
-);
+const { dataSourceService } = inject<Services>('services') || {};
 
 const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
 
 const dataSourceValues = ref<Record<string, any>>({});
 
+const editable = computed(() => dataSourceService?.get('editable') ?? true);
+
 const addHandler = () => {
   if (!editDialog.value) return;
 
@@ -96,7 +51,7 @@ const addHandler = () => {
 };
 
 const editHandler = (id: string) => {
-  if (!editDialog.value || !services) return;
+  if (!editDialog.value) return;
 
   dataSourceValues.value = {
     ...dataSourceService?.getDataSourceById(id),
@@ -105,19 +60,11 @@ const editHandler = (id: string) => {
   editDialog.value.show();
 };
 
-const removeHandler = async (id: string) => {
-  await tMagicMessageBox.confirm('确定删除?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
-
+const removeHandler = (id: string) => {
   dataSourceService?.remove(id);
 };
 
 const submitDataSourceHandler = (value: DataSourceSchema) => {
-  if (!services) return;
-
   if (value.id) {
     dataSourceService?.update(value);
   } else {
@@ -127,24 +74,9 @@ const submitDataSourceHandler = (value: DataSourceSchema) => {
   editDialog.value?.hide();
 };
 
-const tree = ref<InstanceType<typeof TMagicTree>>();
+const dataSourceList = ref<InstanceType<typeof DataSourceList>>();
 
 const filterTextChangeHandler = (val: string) => {
-  tree.value?.filter(val);
-};
-
-// 选中组件
-const selectComp = (compId: Id) => {
-  const stage = editorService?.get('stage');
-  editorService?.select(compId);
-  stage?.select(compId);
-};
-
-const clickHandler = (data: any, node: any) => {
-  if (data.type === 'node') {
-    selectComp(data.id);
-  } else if (data.type === 'key') {
-    selectComp(node.parent.data.id);
-  }
+  dataSourceList.value?.filter(val);
 };
 </script>