fix: 初始化

packages/lowcode/src/views/preview/helper.ts

@@ -0,0 +1,99 @@
+import { getSchemaById as getSchemaFromServer } from '../../api/page';
+import pkgJson from './packages.json';
+import _projectSchema from './projectSchema.json';
+import { buildComponents } from '@crami/lowcode-utils';
+import { isNull, isUndefined } from 'lodash-es';
+import { evaluate } from '@studio/formula';
+
+export const getSchemaById = async (params: {
+  pageId: string;
+  projectCode: string;
+  appCode: string;
+}) => {
+  const packages = pkgJson;
+  let projectSchema: any = await getSchemaFromServer(params);
+  if (!projectSchema.data) {
+    projectSchema = _projectSchema;
+  } else {
+    projectSchema = projectSchema.data;
+  }
+  const { componentsMap: componentsMapArray, componentsTree } = projectSchema as any;
+  const componentsMap: any = {};
+  componentsMapArray.forEach((component: any) => {
+    componentsMap[component.componentName] = component;
+  });
+
+  const libraryMap = {};
+  packages.forEach(({ package: _package, library }) => {
+    libraryMap[_package] = library;
+  });
+  const components = buildComponents(libraryMap, componentsMap);
+  return { schema: componentsTree[0], components };
+};
+export interface ParamItem {
+  key: string;
+  label: string;
+  valueType: string;
+  required?: boolean;
+}
+
+export function normalizePageParams(
+  pageParams: { [key: string]: any },
+  pageParamsConfig: Array<ParamItem>,
+  formularData: any,
+) {
+  let newParams = {};
+  if (pageParamsConfig && pageParamsConfig.length > 0) {
+    newParams = pageParamsConfig.reduce((params: { [key: string]: any }, curItem: ParamItem) => {
+      const { valueType, key } = curItem;
+      const value = pageParams[key];
+      if (isUndefined(value)) {
+        return params;
+      }
+      if (valueType === 'object' || valueType === 'array') {
+        try {
+          params[key] = JSON.parse(value);
+        } catch (error) {
+          console.warn(`json解析异常，数据 \n ${value}`);
+        }
+      } else if (valueType === 'formular') {
+        // 执行公式
+        if (!isNull(value)) {
+          const result = evalFormula(value, formularData);
+          if (!isUndefined(result)) {
+            params[key] = result;
+          }
+        }
+      } else {
+        params[key] = value;
+      }
+      return params;
+    }, {});
+  }
+  return newParams;
+}
+
+/**
+ * 执行公式
+ * @param expression 公式
+ * @param data 变量值对象
+ * @returns 执行结果
+ */
+export function evalFormula(expression: string, data?: object) {
+  const curData = data || {};
+  let result;
+  try {
+    result = evaluate(expression, curData, {
+      evalMode: true, // evalMode 为 true 时，不用 ${} 包裹也可以执行，
+      allowFilter: false,
+    });
+  } catch (e) {
+    console.warn(
+      '[evalFormula]表达式执行异常，当前表达式: ',
+      expression,
+      '，当前上下文数据: ',
+      data,
+    );
+  }
+  return result;
+}

packages/lowcode/src/views/preview/index.ts

@@ -0,0 +1,3 @@
+import Preview from './preview';
+import PreviewOnly from './previewOnly';
+export { Preview, PreviewOnly };

packages/lowcode/src/views/preview/packages.json

@@ -0,0 +1,94 @@
+[
+  {
+    "package": "loadsh",
+    "version": "0.0.4",
+    "urls": ["./cdn/npm/loadsh@0.0.4/lodash.min.js"],
+    "library": "_"
+  },
+  {
+    "package": "xlsx",
+    "version": "0.18.5",
+    "urls": ["./cdn/npm/xlsx@0.18.5/dist/xlsx.full.min.js"],
+    "library": "XLSX"
+  },
+  {
+    "package": "vue",
+    "version": "3.2.37",
+    "urls": ["./cdn/npm/vue@3.2.37/dist/vue.global.js"],
+    "editUrls": ["./cdn/npm/vue@3.2.37/dist/vue.global.js"],
+    "library": "Vue"
+  },
+  {
+    "package": "vue-i18n",
+    "version": "9.2.2",
+    "urls": ["./cdn/npm/vue-i18n@9.2.2/dist/vue-i18n.global.js"],
+    "editUrls": ["./cdn/npm/vue-i18n@9.2.2/dist/vue-i18n.global.js"],
+    "library": "VueI18n"
+  },
+  {
+    "package": "@vueuse/shared",
+    "version": "8.9.4",
+    "urls": ["./cdn/npm/@vueuse/shared@8.9.4/index.iife.min.js"],
+    "library": "VueUseShared"
+  },
+  {
+    "package": "@vueuse/core",
+    "version": "8.9.4",
+    "urls": ["./cdn/npm/@vueuse/core@8.9.4/index.iife.min.js"],
+    "library": "VueUse"
+  },
+  {
+    "package": "dayjs",
+    "version": "1.11.4",
+    "urls": ["./cdn/npm/dayjs@1.11.4/dayjs.min.js"],
+    "library": "dayjs"
+  },
+  {
+    "package": "ant-design-vue",
+    "version": "3.2.10",
+    "urls": [
+      "./cdn/npm/ant-design-vue@3.2.10/dist/antd.min.js",
+      "./cdn/npm/ant-design-vue@3.2.10/dist/antd.min.css"
+    ],
+    "library": "antd"
+  },
+  {
+    "package": "@surely-vue/table",
+    "version": "2.4.3",
+    "urls": [
+      "./cdn/npm/@surely-vue/table@2.4.7/dist/index.min.js",
+      "./cdn/npm/@surely-vue/table@2.4.7/dist/index.min.css"
+    ],
+    "library": "STable"
+  },
+  {
+    "package": "echarts",
+    "version": "5.3.3",
+    "urls": ["./cdn/npm/echarts@5.3.3/dist/echarts.min.js"],
+    "library": "echarts"
+  },
+  {
+    "package": "@crami/ui",
+    "version": "2.0.162",
+    "urls": ["./cdn/crami/crami-ui/crami-monorepo.umd.js", "./cdn/crami/crami-ui/style.css"],
+    "library": "cramiUI"
+  },
+  {
+    "package": "@crami/bui-platform",
+    "version": "2.0.259",
+    "urls": ["./cdn/crami/platform/crami-bui-monorepo.umd.js"],
+    "library": "CramiBUIPlatform"
+  },
+  {
+    "package": "@crami/bui",
+    "version": "2.0.331",
+    "urls": ["./cdn/crami/crami-bui/crami-bui-monorepo.umd.js", "./cdn/crami/crami-bui/style.css"],
+    "library": "CramiBui"
+  },
+  {
+    "package": "@crami/lowcode-materials",
+    "version": "0.0.0",
+    "urls": ["./cdn/crami/crami-lc/view.js", "./cdn/crami/crami-lc/view.css"],
+    "library": "CramiLcUi"
+  }
+]

packages/lowcode/src/views/preview/preview.css

@@ -0,0 +1,5 @@
+.lowcode-plugin-sample-preview,
+.lowcode-plugin-sample-preview-content {
+  /* height: calc(100vh - 256px); */
+  height: auto;
+}

packages/lowcode/src/views/preview/preview.tsx

@@ -0,0 +1,96 @@
+import { defineComponent, onMounted, reactive, h, createVNode, render } from 'vue';
+import VueRenderer from '@crami/lowcode-vue-renderer';
+import { Spin } from '@crami/ui';
+import './preview.css';
+import ModalPage from '../../components/modal-page';
+import { useRoute } from 'vue-router';
+import { getSchemaById, normalizePageParams } from './helper';
+import { previewProps } from './props';
+import type { MenuRouteMeta } from 'pro-vip/src/router/typing';
+
+export default defineComponent({
+  name: 'editor-preview',
+  props: previewProps,
+  setup(props) {
+    const data = reactive<any>({});
+
+    // 获取token
+    let tokenStr = '';
+    const hostToken = localStorage.getItem('token');
+    const clientToken = localStorage.getItem('access_token');
+    if (hostToken) {
+      tokenStr = JSON.parse(hostToken)?.token || '';
+    } else if (clientToken) {
+      tokenStr = clientToken;
+    }
+    const userToken = `Bearer ${tokenStr}`;
+
+    // 获取当前路由
+    const route = useRoute();
+    const { projectCode, appCode } = route.meta as Required<MenuRouteMeta>;
+    console.log('routermeta', route.meta);
+
+    onMounted(async () => {
+      const CramiLcUi = await import('@crami/lowcode-materials');
+      const _W = window as any;
+      _W.CramiLcUi = CramiLcUi;
+
+      // 获取schema
+      if (props.pageId) {
+        Object.assign(
+          data,
+          await getSchemaById({
+            pageId: props.pageId,
+            projectCode,
+            appCode,
+          }),
+        );
+      }
+    });
+
+    return () => {
+      const { schema, components } = data;
+
+      // 定义一个弹窗方法
+      async function openModal(params: any) {
+        const vnode = createVNode(ModalPage, {
+          params,
+          components,
+          routeMeta: route.meta,
+          userToken,
+          key: Math.random(),
+        });
+        render(vnode, document.body);
+        vnode.component?.ctx?.open();
+      }
+
+      if (!schema || !components) {
+        return h(Spin);
+      }
+
+      // 处理页面传参
+      const _pageParams = route.meta.pageParams
+        ? JSON.parse(route.meta.pageParams as string)
+        : props.pageParams;
+      const formularData = {
+        projectCode,
+        appCode,
+      };
+      const pageParams = normalizePageParams(_pageParams, schema.pageParamsConfig, formularData);
+
+      return h('div', { class: 'lowcode-plugin-sample-preview' }, [
+        h(VueRenderer, {
+          scope: {
+            openModal,
+            routeMeta: route.meta,
+            userToken,
+            pageParams: pageParams,
+          },
+          class: 'lowcode-plugin-sample-preview-content',
+          schema,
+          components,
+        }),
+      ]);
+    };
+  },
+});

packages/lowcode/src/views/preview/previewOnly.tsx

@@ -0,0 +1,60 @@
+import { defineComponent, onMounted, reactive, toRefs, h, createVNode, render, inject } from 'vue';
+import VueRenderer from '@crami/lowcode-vue-renderer';
+import { Spin } from '@crami/ui';
+import './preview.css';
+import ModalPage from '@/components/modal-page';
+import { useRoute } from 'vue-router';
+import { getSchemaById, normalizePageParams } from './helper';
+import { previewProps } from './props';
+
+export default defineComponent({
+  name: 'EditorPreviewOnly',
+  props: previewProps,
+  mounted() {},
+  setup(props) {
+    const data = reactive<any>({});
+    const { pageId } = toRefs(props);
+    const projectCode = inject('projectCode', { value: '' });
+    const appCode = inject('appCode', { value: '' });
+    onMounted(async () => {
+      if (pageId.value) {
+        Object.assign(data, await getSchemaById(pageId.value, projectCode.value, appCode.value));
+      }
+    });
+    const route = useRoute();
+    const token: any = JSON.parse(localStorage.getItem('token') || '');
+    const userToken = `Bearer ${token?.token || ''}`;
+
+    return () => {
+      const { schema, components } = data;
+      if (!schema || !components) {
+        return h(Spin);
+      }
+
+      async function openModal(params: any) {
+        const vnode = createVNode(ModalPage, {
+          params,
+          components,
+          routeMeta: route.meta,
+          userToken,
+        });
+        render(vnode, document.body);
+        vnode.component.ctx.open();
+      }
+      const pageParams = normalizePageParams(props.pageParams, schema.pageParamsConfig);
+      return h('div', { class: 'lowcode-plugin-sample-preview' }, [
+        h(VueRenderer, {
+          scope: {
+            openModal,
+            routeMeta: route.meta,
+            userToken,
+            pageParams: pageParams,
+          },
+          class: 'lowcode-plugin-sample-preview-content',
+          schema,
+          components,
+        }),
+      ]);
+    };
+  },
+});

packages/lowcode/src/views/preview/projectSchema.json

@@ -0,0 +1,99 @@
+{
+  "version": "1.0.0",
+  "componentsMap": [
+    {
+      "package": "@crami/lowcode-materials",
+      "version": "0.0.0",
+      "exportName": "CramiCol",
+      "destructuring": true,
+      "componentName": "CramiCol"
+    },
+    {
+      "package": "@crami/lowcode-materials",
+      "version": "0.0.0",
+      "exportName": "CramiRow",
+      "destructuring": true,
+      "componentName": "CramiRow"
+    },
+    {
+      "package": "@crami/lowcode-materials",
+      "version": "0.0.0",
+      "exportName": "CramiRowColContainer",
+      "destructuring": true,
+      "componentName": "CramiRowColContainer"
+    },
+    {
+      "package": "@crami/lowcode-materials",
+      "version": "0.0.0",
+      "exportName": "CramiBlockCell",
+      "destructuring": true,
+      "componentName": "CramiBlockCell"
+    },
+    {
+      "package": "@crami/lowcode-materials",
+      "version": "0.0.0",
+      "exportName": "CramiTabPanel",
+      "destructuring": true,
+      "componentName": "CramiTabPanel"
+    },
+    {
+      "package": "@crami/lowcode-materials",
+      "version": "0.0.0",
+      "exportName": "CramiTabs",
+      "destructuring": true,
+      "componentName": "CramiTabs"
+    },
+    {
+      "package": "@crami/lowcode-materials",
+      "version": "0.0.0",
+      "exportName": "CramiBlock",
+      "destructuring": true,
+      "componentName": "CramiBlock"
+    },
+    {
+      "package": "@crami/lowcode-materials",
+      "version": "0.0.0",
+      "exportName": "CramiPage",
+      "destructuring": true,
+      "componentName": "CramiPage"
+    },
+    { "devMode": "lowCode", "componentName": "Page" }
+  ],
+  "componentsTree": [
+    {
+      "componentName": "Page",
+      "id": "node_ocl7spc2i41",
+      "props": { "ref": "node_ocl7spc2i41" },
+      "fileName": "/",
+      "state": {
+        "text": { "type": "JSExpression", "value": "\"outer\"" },
+        "isShowDialog": { "type": "JSExpression", "value": "false" },
+        "info": {
+          "type": "JSExpression",
+          "value": "{\n  \"info\": \"\",\n  \"user\": {\n    \"username\": \"\",\n    \"password\": \"\"\n  }\n}"
+        }
+      },
+      "dataSource": { "list": [] },
+      "css": "body, html {background: rgba(0, 0, 0, 0);}",
+      "lifeCycles": {
+        "mounted": {
+          "type": "JSFunction",
+          "value": "function mounted() {\n  console.log('did mount');\n}"
+        },
+        "unmounted": {
+          "type": "JSFunction",
+          "value": "function unmounted() {\n  console.log('will unmount');\n}"
+        }
+      },
+      "methods": {},
+      "hidden": false,
+      "title": "页面",
+      "isLocked": false,
+      "condition": true,
+      "conditionGroup": "",
+      "utils": [],
+      "children": []
+    }
+  ],
+  "i18n": {}
+}

packages/lowcode/src/views/preview/props.ts

@@ -0,0 +1,12 @@
+import type { PropType } from 'vue';
+
+export const previewProps = {
+  pageId: {
+    type: String,
+    default: '',
+  },
+  pageParams: {
+    type: Object as PropType<Array<{ [propsKey: string]: any }>>,
+    default: () => ({}),
+  },
+};