@tmagic/editor 1.1.6 → 1.2.0-beta.10

package/src/layouts/AddPageBox.vue

@@ -3,7 +3,7 @@
     <div class="m-editor-empty-content">
       <div class="m-editor-empty-button" @click="clickHandler">
         <div>
-          <el-icon><plus /></el-icon>
+          <MIcon :icon="Plus"></MIcon>
         </div>
         <p>新增页面</p>
       </div>
@@ -11,33 +11,26 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, toRaw } from 'vue';
+<script lang="ts" setup name="MEditorAddPageBox">
+import { inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
+import MIcon from '../components/Icon.vue';
 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 name="MEditorCodeEditor">
+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/Framework.vue

@@ -10,7 +10,7 @@
       @save="saveCode"
     ></magic-code-editor>
 
-    <layout
+    <Layout
       v-else
       class="m-editor-content"
       left-class="m-editor-framework-left"
@@ -29,28 +29,29 @@
       <template #center>
         <slot v-if="pageLength > 0" name="workspace"></slot>
         <slot v-else name="empty">
-          <add-page-box></add-page-box>
+          <AddPageBox></AddPageBox>
         </slot>
       </template>
 
-      <template v-if="pageLength > 0" #right>
-        <el-scrollbar>
+      <template v-if="pageLength > 0 && nodes.length === 1" #right>
+        <TMagicScrollbar>
           <slot name="props-panel"></slot>
-        </el-scrollbar>
+        </TMagicScrollbar>
       </template>
-    </layout>
+    </Layout>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed, inject, ref, watchEffect } from 'vue';
+<script lang="ts" setup name="MEditorFramework">
+import { computed, inject, ref, watch } from 'vue';
 
+import { TMagicScrollbar } from '@tmagic/design';
 import type { MApp } from '@tmagic/schema';
 
+import Layout from '../components/Layout.vue';
 import { GetColumnWidth, Services } from '../type';
 
 import AddPageBox from './AddPageBox.vue';
-import Layout from './Layout.vue';
 
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
@@ -67,27 +68,65 @@ withDefaults(
 const { editorService, uiService } = inject<Services>('services') || {};
 
 const root = computed(() => editorService?.get<MApp>('root'));
+const nodes = computed(() => editorService?.get<Node[]>('nodes') || []);
 
 const pageLength = computed(() => editorService?.get<number>('pageLength') || 0);
 const showSrc = computed(() => uiService?.get<boolean>('showSrc'));
+
+const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
+const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
+
+const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
+const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
+
 const columnWidth = ref<Partial<GetColumnWidth>>({
-  left: DEFAULT_LEFT_COLUMN_WIDTH,
+  left: leftColumnWidthCacheData,
   center: 0,
-  right: 0,
-});
-uiService?.set('columnWidth', columnWidth.value);
-
-watchEffect(() => {
-  if (pageLength.value <= 0) {
-    columnWidth.value.right = undefined;
-    columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH;
-  } else {
-    columnWidth.value.right = columnWidth.value.right || DEFAULT_RIGHT_COLUMN_WIDTH;
-    columnWidth.value.center =
-      globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH;
-  }
+  right: RightColumnWidthCacheData,
 });
 
+watch(
+  pageLength,
+  (length) => {
+    const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
+
+    columnWidth.value.left = left;
+
+    if (length <= 0) {
+      columnWidth.value.right = undefined;
+      columnWidth.value.center = globalThis.document.body.clientWidth - left;
+    } else {
+      const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
+      columnWidth.value.right = right;
+      columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
+    }
+
+    uiService?.set('columnWidth', columnWidth);
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(
+  () => columnWidth.value.right,
+  (right) => {
+    if (typeof right === 'undefined') return;
+    globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
+  },
+);
+
+watch(
+  () => columnWidth.value.left,
+  (left) => {
+    globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
+  },
+);
+
+const columnWidthChange = (columnWidth: GetColumnWidth) => {
+  uiService?.set('columnWidth', columnWidth);
+};
+
 const saveCode = (value: string) => {
   try {
     // eslint-disable-next-line no-eval
@@ -96,21 +135,4 @@ const saveCode = (value: string) => {
     console.error(e);
   }
 };
-
-const COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorColumnWidthData';
-
-const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
-if (columnWidthCacheData) {
-  try {
-    const columnWidthCache = JSON.parse(columnWidthCacheData);
-    columnWidth.value = columnWidthCache;
-  } catch (e) {
-    console.error(e);
-  }
-}
-
-const columnWidthChange = (columnWidth: GetColumnWidth) => {
-  uiService?.set('columnWidth', columnWidth);
-  globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
-};
 </script>

package/src/layouts/NavMenu.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorNavMenu">
 import { computed, inject, markRaw } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 

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"
@@ -13,10 +13,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorPropsPanel">
 import { computed, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
-import { ElMessage } from 'element-plus';
 
+import { tMagicMessage } from '@tmagic/design';
 import type { FormValue, MForm } from '@tmagic/form';
 import type { MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
@@ -65,13 +65,8 @@ const submit = async () => {
     services?.editorService.update(values);
   } catch (e: any) {
     console.error(e);
-    ElMessage.closeAll();
-    ElMessage.error({
-      duration: 10000,
-      showClose: true,
-      message: e.message,
-      dangerouslyUseHTMLString: true,
-    });
+    tMagicMessage.closeAll();
+    tMagicMessage.error(e.message);
   }
 };
 

package/src/layouts/Resizer.vue

@@ -4,7 +4,7 @@
   </span>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorResizer">
 import { onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -1,19 +1,19 @@
 <template>
-  <el-scrollbar>
+  <TMagicScrollbar>
     <slot name="component-list-panel-header"></slot>
 
-    <el-collapse class="ui-component-panel" :model-value="collapseValue">
-      <el-input
-        prefix-icon="el-icon-search"
+    <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
+      <TMagicInput
         placeholder="输入关键字进行过滤"
         class="search-input"
         size="small"
         clearable
+        :prefix-icon="Search"
         v-model="searchText"
       />
       <template v-for="(group, index) in list">
-        <el-collapse-item v-if="group.items && group.items.length" :key="index" :name="index">
-          <template #title><i class="el-icon-s-grid"></i>{{ group.title }}</template>
+        <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
+          <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
           <div
             v-for="item in group.items"
             class="component-item"
@@ -27,21 +27,23 @@
             <slot name="component-list-item" :component="item">
               <MIcon :icon="item.icon"></MIcon>
 
-              <el-tooltip effect="dark" placement="bottom" :content="item.text">
+              <TMagicTooltip effect="dark" placement="bottom" :content="item.text">
                 <span>{{ item.text }}</span>
-              </el-tooltip>
+              </TMagicTooltip>
             </slot>
           </div>
-        </el-collapse-item>
+        </TMagicCollapseItem>
       </template>
-    </el-collapse>
-  </el-scrollbar>
+    </TMagicCollapse>
+  </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorComponentListPanel">
 import { computed, inject, ref } from 'vue';
+import { Grid, Search } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
+import { TMagicCollapse, TMagicCollapseItem, TMagicInput, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
 import type StageCore from '@tmagic/stage';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
@@ -62,7 +64,7 @@ const list = computed(() =>
 const collapseValue = computed(() =>
   Array(list.value?.length)
     .fill(1)
-    .map((x, i) => i),
+    .map((x, i) => `${i}`),
 );
 
 let timeout: NodeJS.Timeout | undefined;