@cicctencent/low-code-editor 0.0.0-stage → 1.1.9-beta.6

package/src/formily/MenuTable/useMenuTable.ts

@@ -0,0 +1,147 @@
+import { reactive, nextTick, ref, computed, watch } from 'vue';
+import type { FormInstance } from '@jt/jtui';
+import { ProjectMetaNavMenu } from '@cicctencent/low-code-core';
+interface IMenuForm extends Omit<ProjectMetaNavMenu, 'children'> {
+  content: 'pageId' | 'url';
+}
+export default function (props, emits) {
+  // 配置菜单的对话框配置
+  const editModalOptions = reactive({
+    title: '',
+    visible: false,
+    hasClose: false,
+    hasFooter: true,
+    width: '604px',
+  });
+  // 配置菜单的表单对象
+  const menuForm = reactive<IMenuForm>({
+    content: 'pageId',
+    name: '',
+    icon: '',
+    target: '_blank',
+    url: '',
+    pageId: 0,
+  });
+  const menuFormRef = ref<FormInstance>();
+  // 渲染在表格的菜单数组
+  const menuTree = ref<ProjectMetaNavMenu[]>([]);
+
+  // key为页面id value为页面名称
+  const pageNameMap = computed(() =>
+    props.project.pages.reduce(
+      (pre, cur) => ({ ...pre, [cur.id]: cur.title }),
+      {}
+    )
+  );
+
+  watch(
+    () => props.modelValue,
+    val => {
+      menuTree.value = val;
+    },
+    { deep: true, immediate: true }
+  );
+
+  // 当前点击行的菜单数据
+  let currentRow;
+
+  /* 处理菜单表格中的四个操作 */
+  const operateMenu = (
+    menuTree: ProjectMetaNavMenu[],
+    row: ProjectMetaNavMenu,
+    menu?: ProjectMetaNavMenu
+  ) => {
+    let stop = false;
+    for (const i in menuTree) {
+      if (menuTree[i] === row) {
+        if (editModalOptions.title === '添加同级') {
+          menuTree.splice(+i + 1, 0, menu);
+        } else if (editModalOptions.title === '添加下级') {
+          menuTree[i].children.push(menu);
+        } else if (editModalOptions.title === '') {
+          menuTree.splice(+i, 1);
+        } else {
+          menuTree[i] = { ...menu, children: menuTree[i].children };
+        }
+        stop = true;
+      } else if (menuTree[i].children.length) {
+        stop = operateMenu(menuTree[i].children, row, menu);
+      }
+      if (stop) break;
+    }
+    return stop;
+  };
+
+  /* 点击编辑对话框确认按钮触发 */
+  const confirm = () => {
+    const { name, icon, pageId, url, target, content } = menuForm;
+    const finalMenu = {
+      pageId: pageId
+        ? { name, icon, pageId, children: [] }
+        : { name, icon, children: [] },
+      url: { name, icon, url, target, children: [] },
+    };
+    operateMenu(menuTree.value, currentRow, finalMenu[content]);
+    emits('update:modelValue', menuTree.value);
+    editModalOptions.visible = false;
+    editModalOptions.title = '';
+    menuFormRef.value.resetFields();
+  };
+
+  /* 点击编辑对话框取消按钮触发 */
+  const cancel = () => {
+    editModalOptions.visible = false;
+    editModalOptions.title = '';
+    menuFormRef.value.resetFields();
+  };
+
+  // 点击表格添加同级按钮
+  const addPeer = (index, row) => {
+    editModalOptions.title = '添加同级';
+    editModalOptions.visible = true;
+    currentRow = row;
+  };
+  // 点击表格添加下级按钮
+  const addSubordinate = (index, row) => {
+    editModalOptions.title = '添加下级';
+    editModalOptions.visible = true;
+    currentRow = row;
+  };
+  // 点击表格编辑按钮
+  const handleEdit = (index, row) => {
+    editModalOptions.title = row.name;
+    editModalOptions.visible = true;
+    currentRow = row;
+    nextTick(() => {
+      menuForm.name = row.name;
+      menuForm.icon = row.icon;
+      if (row.url) {
+        menuForm.content = 'url';
+        menuForm.url = row.url;
+        menuForm.target = row.target;
+      } else if (row.pageId) {
+        menuForm.content = 'pageId';
+        menuForm.pageId = row.pageId;
+      }
+    });
+  };
+  // 点击表格删除按钮
+  const handleDelete = (index, row) => {
+    operateMenu(menuTree.value, row);
+    emits('update:modelValue', menuTree.value);
+  };
+
+  return {
+    editModalOptions,
+    menuForm,
+    menuFormRef,
+    menuTree,
+    pageNameMap,
+    confirm,
+    cancel,
+    addPeer,
+    addSubordinate,
+    handleEdit,
+    handleDelete,
+  };
+}

package/src/formily/NavTree/index.ts

@@ -0,0 +1,20 @@
+import { connect, mapProps } from '@formily/vue';
+import { transformComponent } from '@jt/formily';
+// @ts-ignore
+import JtNavTree from '../../NavTree/index.vue';
+
+export type JtNavTreeProps = typeof JtNavTree;
+
+const TransformJtNavTree = transformComponent<JtNavTreeProps>(JtNavTree, {
+  change: 'update:modelValue',
+});
+
+export const ActivityBar = connect(
+  TransformJtNavTree,
+  mapProps({
+    value: 'modelValue',
+    readOnly: 'readonly',
+  })
+);
+
+export default ActivityBar;

package/src/formily/SidebarPane/index.ts

@@ -0,0 +1,23 @@
+import { connect, mapProps } from '@formily/vue';
+import { transformComponent } from '@jt/formily';
+// @ts-ignore
+import JtSidebarPane from './index.vue';
+
+export type JtSidebarPaneProps = typeof JtSidebarPane;
+
+const TransformJtSidebarPane = transformComponent<JtSidebarPaneProps>(
+  JtSidebarPane,
+  {
+    change: 'update:modelValue',
+  }
+);
+
+export const ActivityBar = connect(
+  TransformJtSidebarPane,
+  mapProps({
+    value: 'modelValue',
+    readOnly: 'readonly',
+  })
+);
+
+export default ActivityBar;

package/src/formily/SidebarPane/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <div :class="['float-pane', currentType === 'float' ? 'visible' : '']">
+    <div class="titled-panel">
+      <template v-if="showHeader">
+        <button class="icon-float" @click="currentType = 'fixed'">
+          <svg
+            fill="currentColor"
+            preserveAspectRatio="xMidYMid meet"
+            width="16"
+            height="16"
+            viewBox="0 0 1024 1024"
+          >
+            <path
+              d="M160.256 816.64C116.224 872.448 102.4 921.6 102.4 921.6s49.152-13.824 104.96-57.856c22.016-17.408 128-112.64 200.704-174.08l-73.728-73.728c-61.44 72.704-157.184 178.688-174.08 200.704zM648.704 209.408L442.368 355.328l226.304 226.304 145.92-206.336 15.872 15.872c20.992 20.992 54.784 20.992 75.776 0s20.992-54.784 0-75.776l-197.12-197.12c-20.992-20.992-54.784-20.992-75.776 0-20.992 20.992-20.992 54.784 0 75.776l15.36 15.36zM247.808 334.848c-9.728 2.048-18.944 6.656-26.624 14.336-20.992 20.992-20.992 54.784 0 75.776l377.856 377.856c20.992 20.992 54.784 20.992 75.776 0 7.68-7.68 12.288-16.896 14.336-26.624L247.808 334.848z"
+            ></path>
+            <path
+              d="M840.704 879.104c-9.728 0-19.456-3.584-27.136-11.264L155.648 210.432c-14.848-14.848-14.848-39.424 0-54.272 14.848-14.848 39.424-14.848 54.272 0L867.84 814.08c14.848 14.848 14.848 39.424 0 54.272-7.168 7.168-16.896 10.752-27.136 10.752z"
+            ></path>
+          </svg>
+        </button>
+        <button class="icon-close" @click="currentType = 'none'">
+          <el-icon :size="16"><Close /></el-icon>
+        </button>
+        <div class="panel-title">
+          <span>{{ name }}</span>
+        </div>
+      </template>
+      <div class="panel-body" :style="{ top: showHeader ? '48px' : 0 }">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+  <div :class="['fixed-pane', currentType === 'fixed' ? 'visible' : '']">
+    <div class="titled-panel">
+      <template v-if="showHeader">
+        <button class="icon-fixed" @click="currentType = 'float'">
+          <svg
+            fill="currentColor"
+            preserveAspectRatio="xMidYMid meet"
+            width="16"
+            height="16"
+            viewBox="0 0 1024 1024"
+          >
+            <path
+              d="M750.848 28.928l245.248 242.944a66.048 66.048 0 1 1-93.184 93.184l-25.6-19.456-249.6 353.792 78.336 78.336a66.048 66.048 0 0 1-93.184 92.672l-460.8-464.64a66.048 66.048 0 0 1 93.184-93.184l76.8 78.336 354.048-249.856-18.176-18.944a66.048 66.048 0 1 1 93.184-93.184zM380.672 732.416l-91.904-90.88c-74.24 89.6-191.488 219.904-212.736 247.04a419.84 419.84 0 0 0-70.656 128 419.84 419.84 0 0 0 128-70.144c27.136-21.248 157.44-138.496 246.528-214.016z"
+            ></path>
+          </svg>
+        </button>
+        <button class="icon-close" @click="currentType = 'none'">
+          <el-icon :size="16"><Close /></el-icon>
+        </button>
+        <div class="panel-title">
+          <span>{{ name }}</span>
+        </div>
+      </template>
+      <div class="panel-body" :style="{ top: showHeader ? '48px' : 0 }">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// @ts-nocheck
+import { Close } from '@cicctencent/icons-vue';
+import { ref, watch, withDefaults, defineProps } from 'vue';
+const props = withDefaults(
+  defineProps<{
+    type: 'float' | 'fixed' | 'none';
+    name: string;
+    showHeader: boolean;
+  }>(),
+  {
+    type: 'float',
+    name: '默认标题',
+    showHeader: true,
+  }
+);
+const currentType = ref('');
+watch(
+  () => props.type,
+  val => {
+    currentType.value = val;
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.float-pane {
+  position: absolute;
+  width: 300px;
+  top: 0;
+  bottom: 0;
+  left: 46px;
+  z-index: 820;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 4px 6px 6px 0 rgba(31, 50, 88, 0.08);
+  background-color: #fff;
+  display: none;
+}
+.fixed-pane {
+  position: relative;
+  margin-left: 1px;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  height: 100%;
+  width: 300px;
+  flex-shrink: 0;
+  background-color: #fff;
+  display: none;
+}
+.float-pane .titled-panel,
+.fixed-pane .titled-panel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .icon-float,
+  .icon-fixed {
+    position: absolute;
+    right: 38px;
+    top: 14px;
+    height: auto;
+    z-index: 2;
+    background: transparent;
+    border-color: transparent;
+    border-radius: 0;
+    padding: 0;
+    height: 20px;
+    font-size: 14px;
+    border-width: 0;
+    cursor: pointer;
+  }
+  .icon-close {
+    position: absolute;
+    right: 16px;
+    top: 14px;
+    height: auto;
+    z-index: 2;
+    background: transparent;
+    border-color: transparent;
+    border-radius: 0;
+    padding: 0;
+    height: 20px;
+    font-size: 14px;
+    border-width: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .panel-title {
+    height: 48px;
+    font-size: 16px;
+    padding: 0 15px;
+    color: #0f1726;
+    font-weight: 700;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .panel-body {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: visible;
+    border-top: 1px solid rgba(31, 56, 88, 0.1);
+  }
+}
+.visible {
+  display: block;
+}
+</style>

package/src/formily/index.ts

@@ -0,0 +1,12 @@
+import MenuTable from './MenuTable';
+
+import DataBinding from './DataBinding';
+
+const formily: Record<string, any> = {
+    MenuTable,
+    DataBinding,
+};
+
+console.log('>>>formily', formily);
+
+export default formily;

package/src/index.ts

@@ -0,0 +1,29 @@
+
+import { App } from 'vue';
+import Editor from './editor.vue';
+import EditorDomain from './domain/EditorDomain';
+declare global {
+  interface Window {
+    JT_VERSION: Record<string, string>;
+  }
+}
+const EditorComponent = Editor as any;
+
+EditorComponent.install = (app: App) => {
+  app.component('VcEditor', Editor);
+};
+import formilyComponents from './formily';
+export default EditorComponent;
+
+import ComponentTreeFavorites from './components/ComponentTreeFavorites/index.vue'
+
+export { formilyComponents, Editor, EditorDomain, ComponentTreeFavorites };
+
+window.JT_VERSION = Object.assign(
+  {
+      '__rollup__name__@__rollup__version__': '__rollup__date__',
+  },
+  window.JT_VERSION
+);
+
+          

package/src/typings/vue-shim.d.ts

@@ -0,0 +1,13 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module "*.png" {
+  export default any;
+}
+
+declare module "*.svg" {
+  export default any;
+}

package/src/utils/base64.ts

@@ -0,0 +1,5 @@
+/** 提示图标 */
+export const tipIcon = 'data:image/webp;base64,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';
+
+/** 非图片图标 */
+export const notImageIcon = `data:image/webp;base64,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`

package/src/utils/index.ts

@@ -0,0 +1,57 @@
+export declare interface SelectItem {
+  label: string;
+  value: any;
+}
+
+type PlainObject<T = any> = { [key: string]: T };
+export const changeEnum2Array = (param: PlainObject): SelectItem[] => {
+  const arr: SelectItem[] = [];
+  let keys = Object.keys(param);
+  // 反向映射 值为数字
+  if (param[param[keys[0]]] !== undefined) {
+    keys = keys.slice(keys.length / 2);
+  }
+  keys.forEach((key) => {
+    arr.push({
+      label: key,
+      value: param[key],
+    });
+  });
+  return arr;
+};
+
+/**
+ *  style图片背景渲染
+ * @param img
+ * @returns
+ */
+export function imageStyle(img: string) {
+  return {
+    width: "100%",
+    height: "100%",
+    backgroundImage: `url(${img})`,
+    backgroundSize: "cover",
+  };
+}
+
+/**
+ *  过滤收藏
+ * @param tree 
+ * @param favorites 
+ * @returns 
+ */
+export function favoriteRebuild(tree, favorites) {
+  if (!tree) return tree;
+  const newTree = [];
+  for (const item of tree) {
+    if (item.list) {
+      item.list = favoriteRebuild(item.list, favorites);
+      if (item.list?.length) {
+        newTree.push(item);
+      }
+    } else if (favorites.includes(item.name)) {
+      newTree.push(item);
+    }
+  }
+  return newTree;
+};

package/test/case.ts

@@ -0,0 +1,67 @@
+export const case1 = [
+    {
+        title: "基础组件",
+        list: [
+            {
+                title: "普通容器",
+                list: [
+                    {
+                        title: "普通容器",
+                        icon: "https://jtcospublic.ciccten.com/low-code/files/4c27q5/snipaste_2022-08-01_10-40-301659321679266.png",
+                        name: "PlainContainer",
+                    },
+                    {
+                        title: "TAB(内容切换)",
+                        icon: "https://jtcospublic.ciccten.com/low-code/files/4c27q5/snipaste_2022-08-01_10-40-301659321679266.png",
+                        name: "TabContainer",
+                    }
+                ]
+            },
+            {
+                title: "图片",
+                list: [
+                    {
+                        title: "单图片",
+                        icon: "http://jtcospublic.ciccten.com/config-server/1632374118739563199/picture.png",
+                        name: "ComponentImage",
+                    }
+                ]
+            },
+            {
+                title: "富文本",
+                list: [
+                    {
+                        title: "富文本",
+                        icon: "http://jtcospublic.ciccten.com/config-server/1632374135943751700/rich-text.png",
+                        name: "ComponentRich",
+                    }
+                ]
+            },
+            {
+                title: "吸底按钮",
+                list: [
+                    {
+                        title: "吸底按钮",
+                        icon: "http:////jtcospublic.ciccten.com/config-server/1638512519326572833/bottom-potocol.png",
+                        name: "BottomButton",
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        title: "模块组件",
+        list: [
+            {
+                title: "纯文本",
+                list: [
+                    {
+                        title: "纯文本",
+                        icon: "http://jtcospublic.ciccten.com/config-server/1632374102992225549/text.png",
+                        name: "ComponentText",
+                    }
+                ]
+            }
+        ]
+    }
+]

package/test/utils/index.test.ts

@@ -0,0 +1,27 @@
+import { test, expect } from 'vitest'
+import { favoriteRebuild } from '../../src/utils/index'
+import { case1 } from '../case'
+test('adds 1 + 2 to equal 3', () => {
+    expect(1 + 2).toBe(3)
+})
+
+test('favoriteRebuild', () => {
+    const res = favoriteRebuild(case1, ['ComponentImage'])
+    expect(res).toEqual([
+        {
+            title: "基础组件",
+            list: [
+                {
+                    title: "图片",
+                    list: [
+                        {
+                            title: "单图片",
+                            icon: "http://jtcospublic.ciccten.com/config-server/1632374118739563199/picture.png",
+                            name: "ComponentImage",
+                        }
+                    ]
+                },
+            ]
+        },
+    ])
+})

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src/**/*.ts", "./src/*.ts", "./src/**/*.vue", "./src/*.vue"],
+  "exclude": ["./src/__tests__/*", "demo", "node_modules"],
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"]
+  }
+}