feat: 新增管理端demo代码

feat: 补充遗漏的文件

fix: 移除license

magic-admin/web/src/use/use-comp.ts

@@ -0,0 +1,28 @@
+/*
+ * Tencent is pleased to support the open source community by making MagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import MAside from '@src/components/aside.vue';
+import MHeader from '@src/components/header.vue';
+
+const components: any[] = [MAside, MHeader];
+
+export default (app: any) => {
+  components.forEach((comp: any) => {
+    app.component(comp?.name, comp);
+  });
+};

magic-admin/web/src/use/use-menu.ts

@@ -0,0 +1,68 @@
+/*
+ * Tencent is pleased to support the open source community by making MagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// 编辑器顶部菜单栏
+
+import { ArrowLeft, Document, Finished } from '@element-plus/icons';
+
+import { MenuBarData } from '@tmagic/editor';
+
+import ActInfoDrawer from '@src/components/act-info-drawer.vue';
+import PublishPageList from '@src/components/publish-page-list.vue';
+import router from '@src/router';
+import { commitHandler } from '@src/use/use-publish';
+
+export const topMenu = (): MenuBarData => ({
+  left: [
+    {
+      type: 'button',
+      text: '返回',
+      icon: ArrowLeft,
+      handler: (): void => {
+        if (router) {
+          router.push('/');
+        }
+      },
+    },
+  ],
+  center: ['delete', 'undo', 'redo', 'zoom-in', 'zoom-out'],
+  right: [
+    {
+      type: 'button',
+      text: '保存',
+      icon: Finished,
+      handler: (): void => {
+        commitHandler();
+      },
+    },
+    {
+      type: 'component',
+      component: PublishPageList,
+    },
+    {
+      type: 'component',
+      component: ActInfoDrawer,
+    },
+    {
+      type: 'button',
+      icon: Document,
+      text: '源码',
+      handler: (service) => service?.uiService.set('showSrc', !service?.uiService.get('showSrc')),
+    },
+  ],
+});

magic-admin/web/src/use/use-publish.ts

@@ -0,0 +1,127 @@
+/*
+ * Tencent is pleased to support the open source community by making MagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { computed } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import { editorService } from '@tmagic/editor';
+
+import actApi from '@src/api/act';
+import publishApi from '@src/api/publish';
+import magicStore from '@src/store/index';
+import type { ActInfo, EditorInfo, PageInfo } from '@src/typings';
+import { serializeConfig } from '@src/util/utils';
+
+let actInfoSave: ActInfo;
+let pagesSave: EditorInfo;
+// 根据活动id查询活动并初始化为编辑器所需格式
+export const initConfigByActId = async ({ actId }: { actId: number }) => {
+  const res = await actApi.getAct({ id: Number(actId) });
+  if (res.ret !== 0) {
+    ElMessage.error(res.msg || '活动查询失败！');
+    return;
+  }
+  const { pages, ...actInfo } = res.data;
+  const pageItems: any[] = [];
+  pages?.forEach((page: PageInfo) => {
+    if (page.srcCode) {
+      // 可能包含组件自定义添加的code代码，并非纯粹的json对象
+      /* eslint-disable-next-line */
+      page.srcCode = eval(`(${page.srcCode})`);
+      pageItems.push(page.srcCode.items[0]);
+    } else {
+      pageItems.push({
+        id: page.id,
+        type: 'page',
+        name: page.pageTitle,
+        title: page.pageTitle,
+        style: {
+          height: 728,
+          width: 375,
+        },
+        items: [],
+      });
+    }
+  });
+  const uiConfigs = {
+    type: 'app',
+    id: actInfo.actId,
+    items: pageItems,
+    abTest: actInfo.abTest || [],
+  };
+  magicStore.set('actInfo', actInfo);
+  magicStore.set('pages', pages);
+  magicStore.set('uiConfigs', uiConfigs);
+  magicStore.set('editorDefaultSelected', pageItems[0]?.id);
+};
+// 编辑器保存方法
+export const commitHandler = async () => {
+  const actInfo = computed(() => magicStore.get('actInfo') as unknown as ActInfo);
+  // 从magic-editor root 拿到最新的页面信息
+  const root = computed(() => editorService.get('root'));
+  console.log('从magic-editor root 拿到最新的页面信息: ', root);
+  const rootInfo = root.value as unknown as EditorInfo;
+  const rootInfoString = serializeConfig(rootInfo);
+  const res = await publishApi.saveActInfo({
+    data: {
+      actInfo: actInfo.value,
+      rootInfo: rootInfoString,
+    },
+  });
+  if (res.ret === 0) {
+    ElMessage.success({
+      message: res.msg,
+      type: 'success',
+      onClose: () => initConfigByActId({ actId: actInfo.value.actId }),
+    });
+  } else {
+    ElMessage.error(res.msg);
+  }
+};
+
+// 编辑器发布方法
+const saveAndContinue = async (step: string) => {
+  try {
+    await ElMessageBox.confirm(`有修改未保存，是否先保存再${step}`, '提示', {
+      confirmButtonText: `保存并${step}`,
+      cancelButtonText: step,
+      type: 'warning',
+    });
+    await commitHandler();
+  } catch (err) {
+    console.error(err);
+  }
+};
+const isSaved = () => {
+  const actInfo = computed<ActInfo>(() => magicStore.get('actInfo'));
+  if (actInfo.value === actInfoSave || !actInfoSave) {
+    const root = computed(() => editorService.get('root'));
+    const newPages = root.value;
+    if (pagesSave === newPages || !pagesSave) {
+      return true;
+    }
+  }
+  return false;
+};
+export const publishHandler = async () => {
+  if (!isSaved()) {
+    await saveAndContinue('发布');
+    return true;
+  }
+  return true;
+};

magic-admin/web/src/use/use-status.ts

@@ -0,0 +1,23 @@
+/*
+ * Tencent is pleased to support the open source community by making MagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const status = {
+  actStatus: ['修改中', '部分已发布', '已发布'],
+  pageStatus: ['修改中', '已发布'],
+  statusTagType: ['info', '', 'success'],
+};