eoss 0.1.0-alpha.23 → 0.1.0-alpha.25

package/packages/lowcode/src/util/source-parser.js

@@ -0,0 +1,461 @@
+/**
+ * Vue 单文件源码 → 低代码页面 JSON 解析器
+ * generateVueSource 的反向操作：源码解析失败会抛出带中文说明的 Error
+ */
+
+const VOID_TAGS = ['img', 'input', 'br', 'hr', 'meta', 'link'];
+
+/** EsButton → es-button（去掉转换产生的首部连字符） */
+function toKebabCase(name) {
+  return String(name)
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase()
+    .replace(/^-/, '');
+}
+
+/** 大括号配对定位：从 { 开始找到匹配的 }，忽略字符串内的括号 */
+function findBalanced(text, openIndex) {
+  let depth = 0;
+  let quote = '';
+  for (let i = openIndex; i < text.length; i++) {
+    const ch = text[i];
+    if (quote) {
+      if (ch === '\\') {
+        i++;
+      } else if (ch === quote) {
+        quote = '';
+      }
+      continue;
+    }
+    if (ch === '"' || ch === "'" || ch === '`') {
+      quote = ch;
+      continue;
+    }
+    if (ch === '{') {
+      depth++;
+    } else if (ch === '}') {
+      depth--;
+      if (depth === 0) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+
+/** 解析标签属性：支持单/双引号，返回 { name, value } 列表 */
+function parseAttrs(str) {
+  const attrs = [];
+  const re = /([^\s=/>]+)(?:\s*=\s*("([^"]*)"|'([^']*)'))?/g;
+  let match;
+  while ((match = re.exec(str))) {
+    if (!match[1]) {
+      continue;
+    }
+    const value =
+      match[3] !== undefined ? match[3] : match[4] !== undefined ? match[4] : null;
+    attrs.push({ name: match[1], value: value });
+  }
+  return attrs;
+}
+
+/** 属性列表 → 节点字段（attrs / props / directives / events / style） */
+function applyAttrs(node, attrs) {
+  attrs.forEach((attr) => {
+    const name = attr.name;
+    const value = attr.value === null ? true : attr.value;
+    if (name === 'data-id') {
+      //  节点 id 由生成器以 data-id 输出，回填后不作为属性
+      node.id = String(value);
+      return;
+    }
+    if (name === ':style') {
+      //  支持生成器输出的对象字面量形式
+      if (typeof value === 'string' && value.trim().charAt(0) === '{') {
+        try {
+          node.style = new Function('return (' + value + ');')();
+        } catch (e) {
+          throw new Error(':style 绑定不是合法的对象：' + value);
+        }
+      }
+      return;
+    }
+    if (name.charAt(0) === '@') {
+      node.events = node.events || {};
+      node.events[name.slice(1)] = value;
+      return;
+    }
+    if (name.charAt(0) === ':') {
+      node.props = node.props || {};
+      const key = name.slice(1);
+      const trimmed = String(value).trim();
+      //  数字/布尔直接还原类型，其它保留表达式字符串
+      if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
+        node.props[key] = Number(trimmed);
+      } else if (trimmed === 'true' || trimmed === 'false') {
+        node.props[key] = trimmed === 'true';
+      } else {
+        node.props[key] = String(value);
+      }
+      return;
+    }
+    //  Vue 指令（v-model / v-if / v-show 等）存入 directives，键不含 v- 前缀
+    if (name.startsWith('v-')) {
+      node.directives = node.directives || {};
+      node.directives[name.slice(2)] = value;
+      return;
+    }
+    //  普通 HTML 属性存入 attrs
+    node.attrs = node.attrs || {};
+    node.attrs[name] = value;
+  });
+}
+
+/**
+ * 兼容历史数据：把节点 props 中残留的 v- 指令迁移到 directives
+ * （早期版本曾把指令存入 props），迁移后键不含 v- 前缀，原地递归处理整棵节点树
+ * @param {Object} node 节点或页面对象
+ * @returns {Object} 同一个节点对象
+ */
+export function migrateDirectives(node) {
+  if (!node || typeof node !== 'object') {
+    return node;
+  }
+  if (node.props) {
+    Object.keys(node.props).forEach((key) => {
+      if (key.startsWith('v-')) {
+        const dirKey = key.slice(2);
+        node.directives = node.directives || {};
+        if (node.directives[dirKey] === undefined) {
+          node.directives[dirKey] = node.props[key];
+        }
+        delete node.props[key];
+      }
+    });
+  }
+  if (node.children && node.children.length) {
+    node.children.forEach((child) => migrateDirectives(child));
+  }
+  return node;
+}
+
+/** template 内容 → 节点树（根节点返回数组，一般只有一个根元素） */
+export function parseTemplateNodes(inner) {
+  const roots = [];
+  const stack = [];
+  //  开标签 / 闭标签 / 注释
+  const tagRe = /<\/([a-zA-Z][\w-]*)\s*>|<([a-zA-Z][\w-]*)((?:[^>"']|"[^"]*"|'[^']*')*)(\/?)>|<!--[\s\S]*?-->/g;
+  let last = 0;
+  let match;
+  while ((match = tagRe.exec(inner))) {
+    const text = inner.slice(last, match.index);
+    last = tagRe.lastIndex;
+    //  两个标签之间的文本：{{xxx}} 存为 text 指令，纯文本存为 description
+    const trimmedText = text.trim();
+    if (trimmedText && stack.length) {
+      const parent = stack[stack.length - 1];
+      //  检查是否包含 Vue 模板表达式 {{xxx}}
+      const vueExprMatch = trimmedText.match(/^\{\{([\s\S]*?)\}\}$/);
+      if (vueExprMatch) {
+        //  纯 Vue 表达式，转换为 text 指令
+        const expr = vueExprMatch[1].trim();
+        parent.directives = parent.directives || {};
+        parent.directives['text'] = expr;
+      } else {
+        //  纯文本存为 description，避免重新生成时被包上 {{}}
+        parent.description = trimmedText;
+      }
+    }
+    if (!match[1] && !match[2]) {
+      //  注释，跳过
+      continue;
+    }
+    if (match[1]) {
+      //  闭标签
+      const closing = match[1];
+      const top = stack[stack.length - 1];
+      if (!top || top.name !== closing) {
+        throw new Error('标签未正确闭合：</' + closing + '>');
+      }
+      stack.pop();
+      continue;
+    }
+    //  开标签
+    const node = {
+      name: match[2],
+      id: '',
+      description: ''
+    };
+    applyAttrs(node, parseAttrs(match[3]));
+    if (stack.length) {
+      const parent = stack[stack.length - 1];
+      parent.children = parent.children || [];
+      parent.children.push(node);
+    } else {
+      roots.push(node);
+    }
+    //  自闭合或空元素标签不入栈
+    if (!match[4] && VOID_TAGS.indexOf(match[2].toLowerCase()) === -1) {
+      stack.push(node);
+    }
+  }
+  if (stack.length) {
+    throw new Error('标签未正确闭合：<' + stack[stack.length - 1].name + '>');
+  }
+  return roots;
+}
+
+/** 给节点树回填 id（有 id 的保留，没有的按路径生成稳定 id） */
+let idSeed = 0;
+function assignIds(nodes) {
+  nodes.forEach((node) => {
+    if (!node.id) {
+      idSeed += 1;
+      node.id = 'node_' + idSeed;
+    }
+    if (node.children && node.children.length) {
+      assignIds(node.children);
+    }
+  });
+}
+
+/** 提取函数体并去掉统一缩进 */
+function extractBody(blockText, key) {
+  const re = new RegExp('(?:^|[,\\s{])' + key + '\\s*\\([^)]*\\)\\s*\\{');
+  const m = re.exec(blockText);
+  if (!m) {
+    return null;
+  }
+  const openIndex = blockText.indexOf('{', m.index + m[0].length - 1);
+  const closeIndex = findBalanced(blockText, openIndex);
+  if (closeIndex === -1) {
+    throw new Error(key + ' 的花括号未闭合');
+  }
+  let body = blockText.slice(openIndex + 1, closeIndex);
+  const lines = body.split('\n');
+  //  统计非空行的最小缩进，统一去掉
+  let minIndent = Infinity;
+  lines.forEach((line) => {
+    if (line.trim()) {
+      const indent = line.match(/^\s*/)[0].length;
+      if (indent < minIndent) {
+        minIndent = indent;
+      }
+    }
+  });
+  if (minIndent !== Infinity && minIndent > 0) {
+    body = lines
+      .map((line) => line.slice(minIndent))
+      .join('\n')
+      .replace(/^\n+|\n+$/g, '');
+  } else {
+    body = body.trim();
+  }
+  return { body: body };
+}
+
+/** 提取 methods / computed / watch 块 */
+function extractOption(script, name) {
+  const re = new RegExp('(?:^|[,\\s{])' + name + '\\s*:\\s*\\{');
+  const m = re.exec(script);
+  if (!m) {
+    return {};
+  }
+  const openIndex = script.indexOf('{', m.index + m[0].length - 1);
+  const closeIndex = findBalanced(script, openIndex);
+  if (closeIndex === -1) {
+    throw new Error(name + ' 块的花括号未闭合');
+  }
+  const blockText = script.slice(openIndex + 1, closeIndex);
+  //  按块内的顶层"键() {"或"键: "逐个提取
+  const result = {};
+  //  (行首缩进)(键)(函数形式或冒号)，缩进组从 ^ 开始取，避免函数体内部的语句被误认
+  const keyRe = /(^|[\n,])([ \t]*)([\w$]+)\s*(\([^)]*\)\s*\{|:)/g;
+  let keyMatch;
+  while ((keyMatch = keyRe.exec(blockText))) {
+    //  只认低缩进的顶层键，避免抓到函数体内部的变量
+    if (keyMatch[2].length > 4) {
+      continue;
+    }
+    const key = keyMatch[3];
+    if (keyMatch[4].charAt(0) === '(') {
+      //  函数形式：methods / computed getter / watch
+      if (name === 'computed') {
+        //  computed 生成时包了一层 return (function() {...})();
+        const inner = extractBody(blockText.slice(keyMatch.index), key);
+        result[key] = inner || { body: '' };
+        if (inner && inner.body.indexOf('return (function()') === 0) {
+          inner.body = inner.body
+            .replace(/^return \(function\(\) \{\n?/, '')
+            .replace(/\n?\s*\}\)\(\);?$/, '')
+            .replace(/^\s{2}/gm, '');
+        }
+      } else {
+        const hook = extractBody(blockText.slice(keyMatch.index), key);
+        if (hook) {
+          result[key] = hook;
+        }
+      }
+    } else {
+      //  值形式：从冒号后读到下一个顶层键之前
+      const start = keyMatch.index + keyMatch[0].length;
+      const next = keyRe.exec(blockText);
+      const end = next ? next.index : blockText.length;
+      const raw = blockText.slice(start, end).replace(/,\s*$/, '').trim();
+      try {
+        result[key] = new Function('return (' + raw + ');')();
+      } catch (e) {
+        throw new Error(name + '.' + key + ' 的值无法解析：' + raw);
+      }
+      if (next) {
+        keyRe.lastIndex = next.index;
+      }
+    }
+  }
+  return result;
+}
+
+/** 生命周期钩子 */
+function extractHook(script, name) {
+  return extractBody(script, name);
+}
+
+/** data() 还原为对象 */
+function extractData(script) {
+  const m = /data\s*\(\s*\)\s*\{/.exec(script);
+  if (!m) {
+    return {};
+  }
+  const returnMatch = /return\s*(\{|\[)/.exec(script.slice(m.index));
+  if (!returnMatch) {
+    return {};
+  }
+  const openIndex = m.index + returnMatch.index + returnMatch[0].length - 1;
+  const closeIndex = findBalanced(script, openIndex);
+  if (closeIndex === -1) {
+    throw new Error('data 返回值的花括号未闭合');
+  }
+  const raw = script.slice(openIndex, closeIndex + 1);
+  try {
+    return new Function('return (' + raw + ');')();
+  } catch (e) {
+    throw new Error('data 返回值不是合法对象字面量');
+  }
+}
+
+/** import 语句 + components 注册 → 页面 imports 数据 */
+function extractImports(script) {
+  //  收集所有 import 语句
+  const defaultImports = {}; // import X from 'path'
+
+  //  解析 default import: import X from 'path'
+  const defaultRe = /import\s+([\w$]+)\s+from\s+['"]([^'"]+)['"]/g;
+  let m;
+  while ((m = defaultRe.exec(script))) {
+    defaultImports[m[1]] = m[2];
+  }
+
+  //  合并为统一的 imports 数组（所有 import 都作为组件处理）
+  const result = [];
+
+  Object.keys(defaultImports).forEach((name) => {
+    result.push({
+      name: toKebabCase(name),
+      path: defaultImports[name]
+    });
+  });
+
+  return result;
+}
+
+/**
+ * 将 Vue 单文件源码解析为页面 JSON（generateVueSource 的逆操作）
+ * @param {string} source .vue 源码
+ * @param {Object} original 原页面对象，源码不涉及的业务字段
+ *   （pid/title/type/status/route 等）会从它身上保留，避免保存时丢失
+ * @returns {Object} 页面对象
+ * @throws {Error} 带中文说明的解析错误
+ */
+export function parseVueSource(source, original) {
+  idSeed = 0;
+  if (!source || !source.trim()) {
+    throw new Error('源码为空');
+  }
+  const templateMatch = /<template>([\s\S]*?)<\/template>/.exec(source);
+  if (!templateMatch) {
+    throw new Error('缺少 <template> 部分');
+  }
+  const scriptMatch = /<script>([\s\S]*?)<\/script>/.exec(source);
+  const script = scriptMatch ? scriptMatch[1] : '';
+
+  //  ---------- 结构树 ----------
+  const roots = parseTemplateNodes(templateMatch[1].trim());
+  if (!roots.length) {
+    throw new Error('template 里没有根元素');
+  }
+  if (roots.length > 1) {
+    throw new Error('template 只能有一个根元素');
+  }
+  const root = roots[0];
+  assignIds([root]);
+
+  //  ---------- script 各选项 ----------
+  const page = {
+    name: '',
+    imports: [],
+    props: extractOption(script, 'props'),
+    data: extractData(script),
+    computed: extractOption(script, 'computed'),
+    watch: extractOption(script, 'watch'),
+    methods: extractOption(script, 'methods'),
+    created: extractHook(script, 'created'),
+    mounted: extractHook(script, 'mounted'),
+    destroyed: extractHook(script, 'destroyed')
+  };
+  const nameMatch = /name\s*:\s*["']([^"']*)["']/.exec(script);
+  page.name = nameMatch ? nameMatch[1] : '';
+  page.imports = extractImports(script);
+
+  //  根节点字段合并进页面对象（根标签名不作为标签输出）
+  page.id = root.id;
+  page.attrs = root.attrs || {};
+  //  注意：不覆盖脚本级别的 props 和 directives
+  //  根节点的 props/directives 是模板属性，脚本级别的是组件选项定义
+  //  如果根节点有 props/directives，应该合并而不是覆盖
+  if (root.props && Object.keys(root.props).length > 0) {
+    page.props = { ...page.props, ...root.props };
+  }
+  if (root.directives && Object.keys(root.directives).length > 0) {
+    page.directives = { ...page.directives, ...root.directives };
+  }
+  page.style = root.style || {};
+  page.children = root.children || [];
+  page.description = root.description || '';
+
+  //  原页面上源码不涉及的字段原样保留（pid/title/type/status/route 等）
+  if (original && typeof original === 'object') {
+    Object.keys(original).forEach((key) => {
+      if (!(key in page)) {
+        page[key] = original[key];
+      }
+    });
+  }
+
+  //  清理空值，保持页面 JSON 干净
+  Object.keys(page).forEach((key) => {
+    const val = page[key];
+    if (val === null || val === undefined) {
+      delete page[key];
+    } else if (
+      typeof val === 'object' &&
+      !Array.isArray(val) &&
+      !Object.keys(val).length &&
+      ['props', 'data', 'computed', 'watch', 'methods', 'created', 'mounted', 'destroyed'].indexOf(key) !== -1
+    ) {
+      delete page[key];
+    } else if (key === 'imports' && !val.length) {
+      delete page[key];
+    }
+  });
+  return page;
+}

package/packages/lowcode/src/view.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="es-lowcode-view">
+    <Render v-if="rootNode" :node="rootNode" :page="resolvedPage" />
+  </div>
+</template>
+
+<script>
+import Render from './render.vue';
+import { migrateDirectives } from './util/source-parser';
+import { ajax } from 'eoss/src/utils/ajax';
+import { loading } from 'eoss/src/utils/util';
+import Message from 'eoss/packages/message';
+
+export default {
+  name: 'LowcodeView',
+
+  components: {
+    Render
+  },
+
+  props: {
+    /**
+     * 页面配置 JSON 对象或 JSON 字符串
+     * 与 url 二选一，json 优先
+     */
+    json: {
+      type: [Object, String],
+      default: null
+    },
+    /**
+     * 页面配置 JSON 的远程地址
+     * 组件会自动请求并解析
+     */
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      resolvedPage: null,
+      loadingInstance: null
+    };
+  },
+
+  computed: {
+    /**
+     * 构建根节点
+     * page 对象本身不是标签节点，需要包一层 div 作为根
+     */
+    rootNode() {
+      if (!this.resolvedPage) return null;
+      const root = {};
+      Object.keys(this.resolvedPage).forEach((key) => {
+        root[key] = this.resolvedPage[key];
+      });
+      root.name = 'div';
+      return root;
+    }
+  },
+
+  watch: {
+    json: {
+      handler(val) {
+        if (val) {
+          this.loadFromJson(val);
+        }
+      },
+      immediate: true
+    },
+    url: {
+      handler(val) {
+        if (val && !this.json) {
+          this.loadFromUrl(val);
+        }
+      },
+      immediate: true
+    }
+  },
+
+  created() {
+    if (this.json) {
+      this.loadFromJson(this.json);
+    } else if (this.url) {
+      this.loadFromUrl(this.url);
+    }
+  },
+
+  methods: {
+    /**
+     * 从 JSON 对象/字符串加载页面配置
+     * @param {Object|String} json
+     */
+    loadFromJson(json) {
+      try {
+        const page = typeof json === 'string' ? JSON.parse(json) : json;
+        this.resolvedPage = this.normalizePage(migrateDirectives(page));
+        this.$emit('loaded', this.resolvedPage);
+      } catch (e) {
+        Message.error('JSON 解析失败：' + e.message);
+        this.$emit('error', e.message);
+      }
+    },
+    /**
+     * 从远程 URL 加载页面配置
+     * @param {String} url
+     */
+    loadFromUrl(url) {
+      this.loadingInstance = loading('加载中...');
+      ajax({
+        url: url,
+        method: 'GET'
+      })
+        .then((res) => {
+          this.loadingInstance && this.loadingInstance.close();
+          this.loadingInstance = null;
+          if (res.rCode === 0 || res.code === 200) {
+            // 兼容两种响应格式
+            const pageData = res.data || res.results || res;
+            // 如果返回的是包含 content 字段的记录，解析 content
+            if (pageData.content) {
+              const content =
+                typeof pageData.content === 'string'
+                  ? JSON.parse(pageData.content)
+                  : pageData.content;
+              const page = { ...pageData, ...content };
+              delete page.content;
+              this.resolvedPage = this.normalizePage(migrateDirectives(page));
+            } else {
+              this.resolvedPage = this.normalizePage(
+                migrateDirectives(pageData)
+              );
+            }
+            this.$emit('loaded', this.resolvedPage);
+          } else {
+            Message.error(res.msg || '加载页面配置失败');
+            this.$emit('error', res.msg);
+          }
+        })
+        .catch((e) => {
+          this.loadingInstance && this.loadingInstance.close();
+          this.loadingInstance = null;
+          Message.error('网络请求失败：' + (e.message || e));
+          this.$emit('error', e);
+        });
+    },
+    /**
+     * 标准化页面对象（确保必要字段存在）
+     */
+    normalizePage(page) {
+      if (!page) return null;
+      return {
+        name: page.name || 'LowcodePage',
+        children: page.children || [],
+        props: page.props || {},
+        directives: page.directives || {},
+        data: page.data || {},
+        computed: page.computed || {},
+        methods: page.methods || {},
+        events: page.events || {},
+        style: page.style || {},
+        attrs: page.attrs || {},
+        components: page.components || [],
+        imports: page.imports || [],
+        css: page.css || [],
+        script: page.script || [],
+        created: page.created || null,
+        mounted: page.mounted || null,
+        destroyed: page.destroyed || null,
+        watch: page.watch || {},
+        inject: page.inject || null,
+        provide: page.provide || null,
+        template: page.template || null,
+        description: page.description || ''
+      };
+    }
+  }
+};
+</script>
+
+<style scoped>
+.es-lowcode-view {
+  width: 100%;
+  min-height: 100%;
+}
+</style>

package/packages/lowcode-view/index.js

@@ -0,0 +1,5 @@
+import LowcodeView from '../lowcode/src/view';
+
+LowcodeView.install = Vue => Vue.component(LowcodeView.name, LowcodeView);
+
+export default LowcodeView;

package/packages/process-config/index.js

@@ -0,0 +1,5 @@
+import ProcessConfig from './src/main';
+
+ProcessConfig.install = Vue => Vue.component(ProcessConfig.name, ProcessConfig);
+
+export default ProcessConfig;