@lcap/nasl 3.7.3-beta.1 → 3.8.0-beta.2

package/src/generator/genBundleFiles.ts

@@ -1,5 +1,4 @@
 import * as JSON5 from 'json5';
-import * as UglifyJS from 'uglify-js-export';
 import * as utils from '../utils';
 import { config as globalConfig } from '../config'
 
@@ -12,12 +11,18 @@ import { compileComponent } from './compileComponent';
 import { genMetaData } from './genMetaData';
 import { integrateMicroApp } from './microApp';
 import type { Asset } from './release-body/internal';
+// @ts-ignore FIXME wudengke 类型在构建前找不到的问题
+import { compileNASLToReactDist } from '@lcap/nasl-unified-frontend-generator';
 
 export interface Route {
   path?: string;
   component?: RawOptions; // ExtendedVue<Vue, unknown, unknown, unknown, Record<never, any>>;
   children?: Array<Route>;
   redirect?: string;
+  lazyPath?: string;
+  meta?: {
+    [key: string]: any;
+  }
 }
 
 interface Config {
@@ -38,6 +43,7 @@ interface Config {
   devDnsAddr: string;
   miniEnable: boolean;
   isPreviewFe?: boolean;
+  framework?: "vue" | "react";
   previewVersion?: string;
   assets: Array<Asset>;
   assetsMap: Map<string, Asset>;
@@ -90,6 +96,108 @@ function genComponetCode(component: RawOptions) {
   })()`;
 }
 
+// 生成导入组件代码
+function genImportComponetCode(componentPath: string) {
+  return `() => importComponent('${componentPath}')`;
+}
+
+// 生成导出组件代码
+function genExportComponetCode(component: RawOptions) {
+  return `var componentOptions = ${component.script ? `(function(){\n${component.script.trim().replace(/export default |module\.exports +=/, 'return ')}\n})()` : '{}'
+  };
+  Object.assign(componentOptions, {
+      template: \`${component.template.replace(/[`$]/g, (m) => `\\${m}`)}\`,
+  });
+  return componentOptions;`;
+}
+
+// 获取文件路径
+// name 或者 文件 至少有一个必填
+const getCompletePath = (name: string, fileContent: string) => {
+  let fileName = '';
+  if (name) {
+    fileName += `${name}.`;
+  }
+  if (fileContent) {
+    fileName += `${genHash(fileContent)}.`;
+  }
+  fileName += `min.js`;
+
+  return fileName;
+};
+
+
+function genRouterFileContent(routes: Route[], defaultRoute: string) {
+  function routeToString(route: Route): string {
+    let content = `{
+        path: '${route.path}',\n`;
+    if (route?.lazyPath) {
+      const routeLazyPath = route.lazyPath;
+      content += `lazyPath: '${routeLazyPath}',\n`;
+      content += `component: ${genImportComponetCode(route.lazyPath)},\n`;
+    }
+    if (route?.meta) {
+      content += `meta: ${stringifyMetaData(route.meta)},`;
+    }
+    if (route?.children?.length) {
+      content += `children: [
+            ${route.children.map(routeToString).join(',\n')}
+        ],\n`;
+    }
+    if (route?.redirect) {
+      content += `redirect: '${route?.redirect}',\n`;
+    }
+    content += '}';
+    return content;
+  }
+  // 生成路由配置
+  let routesStr = `const routers = [`;
+  routes.forEach((route) => {
+    routesStr += `${routeToString(route)},\n`;
+  });
+  if (defaultRoute) {
+    routesStr += `{
+          path: '*',
+          redirect: '${defaultRoute}',
+      }\n`;
+  }
+  routesStr += `];
+  return routers;`;
+  return routesStr;
+}
+
+// 生成路由文件
+function genRouteFiles(routes: Route[], defaultRoute: string) {
+  // 生成路由文件列表
+  const routeFiles: any[] = [];
+  function routeToFile(route: Route) {
+    console.log(route, 'route');
+    if (route?.component?.script) {
+      const content = genExportComponetCode(route.component);
+      const lazyPath = getCompletePath(null, content);
+      route.lazyPath = lazyPath;
+      routeFiles.push({
+        name: lazyPath,
+        content,
+      });
+    }
+    if (route?.children?.length) {
+      route.children.map(routeToFile);
+    }
+  }
+  routes.forEach((route) => {
+    routeToFile(route);
+  });
+
+  let routerPath = getCompletePath('router', null);
+
+  routeFiles.push({
+    name: routerPath,
+    isRouterFile: true,
+    content: genRouterFileContent(routes, defaultRoute),
+  });
+  return routeFiles;
+}
 export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
   // 获取端类型
   const frontendType = frontend.getAncestor('FrontendType') as FrontendType;
@@ -147,6 +255,22 @@ export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
     config?.debug && clearBreakpoints(app);
   }
 
+  const getBundleFileName = () => {
+    if (config.isPreviewFe && config.previewVersion) {
+      return `mockBundle-${config.previewVersion}`;
+    } else {
+      return 'bundle';
+    }
+  };
+  let baseUrl = `${config.STATIC_URL}/${config.tenant}/${app.id}/${config.env}`;
+  let { basePath } = frontend;
+
+  if (config.isExport as any) {
+    baseUrl = '';
+    // basePath = '';
+  }
+  let completePath = `${baseUrl}${basePath || ''}/`;
+
   /**
    * vue.config.js page options
    */
@@ -186,6 +310,7 @@ export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
       path: routePath,
       component: compileComponent(componentMap[view.id]),
       children: [],
+      meta: view.getRouteMeta(),
     };
     const viewChildren = view.children;
     if (Array.isArray(viewChildren) && viewChildren.length) {
@@ -196,7 +321,7 @@ export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
         if (subView.isIndex) {
           route.children.push({
             path: '',
-            redirect: `'${subView.name}'`,
+            redirect: subView.name,
           });
         }
       }
@@ -221,14 +346,14 @@ export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
     if (view.isIndex) {
       routes.push({
         path: frontend.prefixPath ? frontend.prefixPath : '/',
-        redirect: `'${frontend.prefixPath}/${view.name}'`,
+        redirect: `${frontend.prefixPath}/${view.name}`,
       });
     }
   });
   if (frontend.prefixPath) {
     routes.push({
       path: '/',
-      redirect: `'${frontend.prefixPath}'`,
+      redirect: frontend.prefixPath,
     });
   }
   const authResourcePathMap: any = {};
@@ -255,35 +380,16 @@ export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
     });
   }
   const authResourcePaths: string[] = Object.keys(authResourcePathMap);
-  function routeToString(route: Route): string {
-    let content = `{
-            path: '${route.path}',\n`;
-    if (route?.component?.script) {
-      content += `component: ${genComponetCode(route.component)},\n`;
-    }
-    if (route?.children?.length) {
-      content += `children: [
-                ${route.children.map(routeToString).join(',\n')}
-            ],\n`;
-    }
-    if (route?.redirect) {
-      content += `redirect: ${route?.redirect},\n`;
-    }
-    content += '}';
-    return content;
-  }
 
-  let routesStr = '[';
-  routes.forEach((route) => {
-    routesStr += `${routeToString(route)},\n`;
-  });
-  if (defaultRoute) {
-    routesStr += `{
-            path: '*',
-            redirect: '${defaultRoute}',
-        }\n`;
-  }
-  routesStr += ']';
+  const routerFiles = genRouteFiles(routes, defaultRoute);
+  routerFiles.forEach(item => {
+    item.name = completePath + item.name;
+    // 在路由文件上存入端的信息，后续页面维度发布时候做标识
+    if (item.isRouterFile) {
+      item.frontendName = frontend.name;
+      item.baseUrl = baseUrl;
+    }
+  })
 
   let fileI18nInfo: any = {
     enabled: false,
@@ -373,11 +479,12 @@ export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
   );
   const metaData = genMetaData(app, frontend, config);
   const metaDataStr = stringifyMetaData(metaData);
-  
-  const assetsInfo = app.genAllAssetsInfo(STATIC_URL, frontend.type);
+
+  const assetsInfo = app.genAllAssetsInfo(STATIC_URL, frontend.type, frontendType.frameworkKind);
   const customNames = JSON5.stringify(assetsInfo.custom.names);
 
-  let content = `(function(){
+
+  let content = `(async function(){
         `;
   if (frontend.globalScaleEnabled) {
     content += `{
@@ -464,8 +571,81 @@ export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
   content += `
         var platformConfig = ${platformConfig};
         var metaData = ${metaDataStr};
-        var routes = ${routesStr};
 
+        var getCompletePath = (path) => {
+          return '${completePath}' + path;
+        }
+
+        // 低版本
+        function importXMLHttpRequestComponent (scriptUrl) {
+          return new Promise(function(resolve, reject) {
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', scriptUrl, true);
+            xhr.onreadystatechange = function() {
+              if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                  var scriptContent = xhr.responseText;
+                  try {
+                    var func = new Function(scriptContent);
+                    var result = func();
+                    resolve(result);
+                  } catch (error) {
+                    reject(error);
+                  }
+                } else {
+                  reject(new Error('Failed to fetch script'));
+                }
+              }
+            };
+            xhr.send();
+          });
+        };
+        function importFetchComponent(scriptUrl) {
+          return fetch(scriptUrl)
+            .then(function(response) {
+              if (!response.ok) {
+                throw new Error('Network response was not ok');
+              }
+              return response.text();
+            }).then(function(scriptText) {
+              var func = new Function(scriptText);
+              var result = func();
+              return result;
+            })
+            .catch(error => {
+              console.error('Error loading script:', error);
+            });
+        }
+        window.importComponent = (scriptUrl) => {
+          scriptUrl = getCompletePath(scriptUrl);
+          // 浏览器支持fetch，直接使用fetch
+          if (window.fetch) {
+            return importFetchComponent(scriptUrl);
+          }
+          return importXMLHttpRequestComponent(scriptUrl);
+        }
+
+        var routes = await importComponent('${getCompletePath('router', null)}?t=' + Date.now());
+      `;
+      // 按页面维度发布先不考虑鉴权，页面维度新增的页面都算是不鉴权的数组中
+      // 只有完全页面维度新增的才会进入到这个数组中
+      if (config.env === 'dev') {
+        content += `
+          function iterateRouters(routers, parentPath = '') {
+            routers.forEach(function(route) {
+              var fullPath = parentPath + route.path;
+              if (fullPath === '*') return;
+              if (!(platformConfig.authResourcePaths.includes(fullPath) || platformConfig.baseResourcePaths.includes(fullPath))) {
+                platformConfig.baseResourcePaths.push(fullPath);
+              }
+              if (route.children) {
+                iterateRouters(route.children, fullPath + '/');
+              }
+            });
+          }
+          iterateRouters(routes);`;
+      }
+      content += `
         window.createLcapApp = () => {
             appVM = window.cloudAdminDesigner.init(platformConfig.appConfig, platformConfig, routes, metaData);
             ${compRegStr}
@@ -478,7 +658,7 @@ export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
 
             return window.appVM = appVM;
         };
-        window.createLcapApp();`
+        window.createLcapApp();`;
   if (frontend.globalScaleEnabled) {
     content += `
       // 同步逻辑仅在 iframe 内部执行
@@ -629,21 +809,67 @@ export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
          `;
     content += str;
   }
-  const getBundleFileName = ()=> {
-    if (config.isPreviewFe && config.previewVersion) {
-      return `mockBundle-${config.previewVersion}`
-    }
-    return 'bundle'
-  }
-  let baseUrl = `${config.USER_STATIC_URL}/${config.tenant}/${app.id}/${config.env}`;
-  const { basePath } = frontend;
+  let annoDep = app?.dependencies?.filter(dep=>dep?.annotations?.length>0)
+  annoDep?.map(dep=>{
+    dep?.annotations?.filter(anno=>anno.applyTo.includes('ViewElement'))
+    .map(anno=>{
+      let depName = dep.name;
+      let annoName =anno.name;
+      let annoStr= `
+      const ${annoName} = {
+        async handle(el, binding, vnode, oldVnode) {
+          if(window.Vue.prototype.$library && window.Vue.prototype.$library['${depName}']){
+              window.Vue.prototype.$library['${depName}'].${annoName}(el, binding, vnode, oldVnode)
+          }
+        },
+        bind(el, binding, vnode, oldVnode) {
+            ${annoName}.handle(el, binding, vnode, oldVnode);
+        },
+        update(el, binding, vnode, oldVnode) {
+            ${annoName}.handle(el, binding, vnode, oldVnode);
+        },
+      };
+      window.Vue.directive('${annoName}', ${annoName});`
+      content += annoStr;
+    })
+  })
+  let hasViewElementAnno = annoDep?.filter(dep=>dep?.annotations?.filter(anno=>anno.applyTo.includes('ViewElement'))?.length>0)?.length>0
+  if(hasViewElementAnno){
+    const fetchAnnoData = `
+    function fetchAnnoData() {
+      return new Promise(async (resolve, reject) => {
+        if (window.annotationAllData) {
+              resolve(window.annotationAllData);
+          } else {
+              let urlEntity = '/api/system/annotation/entityAll'
+              let urlLogic = '/api/system/annotation/logicAll'
+              Promise.all([
+                  fetch(urlEntity).then(response => response.json()),
+                  fetch(urlLogic).then(response => response.json())
+              ])
+                  .then(([entityAll, logicAll]) => {
+                      window.annotationAllData = {
+                          entityAll,
+                          logicAll
+                      };
+                      resolve(window.annotationAllData);
+                  }).catch(err => {
+                      console.log('err: ', err);
+                  })
+          }
+      });
+    };
+    fetchAnnoData();
+    `
+    content += fetchAnnoData;
 
-  if ((config.isExport) as any){
-      baseUrl = '';
-      // basePath = '';
   }
 
-  const bundleMinPath = `${baseUrl}${basePath || ''}/${getBundleFileName()}.${genHash(content)}.min.js`;
+
+
+  console.time('genHash')
+  let bundleMinPath = completePath + getCompletePath(getBundleFileName(), content);
+  console.timeEnd('genHash');
 
   const otherJsList = (frontend as any)?.appletsConfig?.enable ? ['//res.wx.qq.com/open/js/jweixin-1.3.2.js'] : [];
 
@@ -653,7 +879,6 @@ export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
     otherJsList.push(`${STATIC_URL}/packages/@lcap/breakpoint-client@1.0.0/dist/index.js?time=${Date.now()}`);
   }
   let jsAssetsList = assetsInfo.basic.js.concat(assetsInfo.custom.js, otherJsList).concat([bundleMinPath])
-
   let cssAssetsList = assetsInfo.basic.css.concat(assetsInfo.custom.css)
   if(config.isPreviewFe){
     const changeToRelativePath =(str:any)=>{
@@ -774,7 +999,7 @@ export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
   // 导出源码才处理
   if (config.isExport && Array.isArray(assets) && assets.length) {
     const assetsMap = config.assetsMap;
-    const regex = new RegExp(assets.map((asset) => asset.fileUrl?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join("|"), "g");
+    const regex = new RegExp(assets.map((asset) => asset.fileUrl?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|'), 'g');
     content = content.replace(regex, (url) => {
       const asset = assetsMap.get(url);
       if (asset) {
@@ -796,29 +1021,19 @@ export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
       return url;
     });
   }
-  let minifyObj = { code: '' };
-  // 开发环境加上sourceMap
-  if (config.env === 'dev') {
-    minifyObj.code = content;
-  } else {
-    minifyObj = UglifyJS.minify(content, {
-      compress: {
-        // @ts-ignore
-        awaits: false,
-      },
-    });
-  }
+
   const outputs = [
     {
       name: bundleMinPath,
-      content: minifyObj.code,
+      content,
     },
     {
       name: basePath ? `${baseUrl}${basePath}/client.js` : `${baseUrl}/client.js`,
       content: assetsContent,
     },
+    ...routerFiles,
   ];
-
+  console.log('outputs', outputs)
   return outputs;
 }
 
@@ -827,10 +1042,135 @@ export async function genFrontendBundleFiles(app: App, frontends: Array<Frontend
 
   // 这里逐个处理并且中间还要等待，是为了腾出时间给主线程做垃圾回收
   for (const frontend of frontends) {
-    const data = await genBundleFiles(app, frontend, config);
-    result.push(...data);
-    await utils.delay(1000);
+    if(frontend.frameworkKind === 'react'){
+      const files: {path: string, content: string}[] = await compileNASLToReactDist(app, frontend, config);
+      result.push(
+        ...files.map((x) => {
+          return { name: x.path, content: x.content };
+        })
+      );
+    }else{
+      const data = await genBundleFiles(app, frontend, config);
+      result.push(...data);
+      await utils.delay(1000);
+    }
   }
 
   return result;
 }
+
+
+export function getOneFiles(options: { view: View; action: string; cacheRouterData: any }) {
+  const { view, action, cacheRouterData } = options;
+  const routesStr = cacheRouterData.content;
+  const func = new Function(routesStr);
+  const cacheRouters = func();
+  const frontend = view.frontend;
+  /**
+   * 几种情况
+   * 1.完全新增了页面从顶层到下面都是新的页面， 发顶层 （仅自己 和 ）
+   * 2.完全新增了页面从顶层到下面都是新的页面， 发中间某层
+   * 3.完全新增了页面从顶层到下面都是新的页面， 发底层
+   * 4.替换中间的单页
+   */
+  // 传递当前节点过来，需要找到顶层节点，然后在下面路由表中查找
+
+  function changeItem(view: View) {
+    const viewOption = view.toVueOptions();
+    const isRootView = view.parentNode.concept !== 'View';
+    // 路由地址
+    const viewName = view.name;
+    let routePath = viewName;
+    if (isRootView) {
+      routePath = `${frontend.prefixPath}/${viewName}`;
+    }
+    const route: Route = {
+      path: routePath,
+      component: compileComponent(viewOption),
+      children: [],
+      meta: view.getRouteMeta(),
+    };
+    return route;
+  }
+  let currentView: any = view;
+  let currentRoute: Route = null;
+  while (currentView?.concept === 'View') {
+    if (currentRoute) {
+      const child = currentRoute;
+      currentRoute = changeItem(currentView);
+      currentRoute.children.push(child);
+    } else {
+      // 当前点击发布的节点，也就是树的最后一层
+      currentRoute = changeItem(currentView);
+      if (action === 'all') {
+        // 生成子页面所有内容
+        function traverseChildren(currentView: View, currentRoute: Route) {
+          currentView.children.forEach((childView: View) => {
+            const childRoute = changeItem(childView);
+            currentRoute.children.push(childRoute);
+            traverseChildren(childView, childRoute);
+          });
+        }
+        traverseChildren(currentView, currentRoute);
+      }
+      // 如果当前发布的节点没有子集，那么将子集置空，后续在合并中遇到null，就表示真的没有子集，会直接把缓存的子路径置空
+      if (!currentView.children.length) {
+        currentRoute.children = null;
+      }
+    }
+    currentView = currentView.parentNode;
+  }
+  console.log(currentRoute);
+
+  function addOrUpdateRoute(routes: Route[], newRoute: Route) {
+    const existingRoute = routes.find((route) => route.path === newRoute.path);
+
+    if (existingRoute) {
+      // 如果找到了现有路由，更新 component 和 meta
+      existingRoute.component = newRoute.component;
+      existingRoute.meta = newRoute.meta;
+
+      // 递归合并子路由
+      if (newRoute.children) {
+        existingRoute.children = existingRoute.children || [];
+        newRoute.children?.forEach((newChild) => {
+          addOrUpdateRoute(existingRoute.children, newChild);
+        });
+      } else {
+        existingRoute.children = [];
+      }
+    } else {
+      // 如果没有找到，直接推入新路由
+      routes.unshift(newRoute);
+    }
+  }
+  function coverUpdateRoute(routes: Route[], newRoute: Route) {
+    const findIndex = routes.findIndex((route) => route.path === newRoute.path);
+    if (findIndex !== -1) {
+      // 如果找到了现有路由，就删除掉 后面新推入
+      routes.splice(findIndex, 1);
+    }
+    // 直接推入新路由
+    routes.unshift(newRoute);
+  }
+  if (action === 'all') {
+    coverUpdateRoute(cacheRouters, currentRoute);
+  } else {
+    addOrUpdateRoute(cacheRouters, currentRoute);
+  }
+  console.log(cacheRouters, 111);
+  const routerFiles = genRouteFiles(cacheRouters, null);
+  const completePath = `${cacheRouterData.baseUrl}${frontend.basePath || ''}/`;
+  const outputs = routerFiles;
+  routerFiles.forEach((item) => {
+    item.name = completePath + item.name;
+    // 在路由文件上存入端的信息，后续页面维度发布时候做标识
+    if (item.isRouterFile) {
+      item.frontendName = cacheRouterData.frontendName;
+      item.baseUrl = cacheRouterData.baseUrl;
+      item.ideVersion = cacheRouterData.ideVersion;
+    }
+  });
+  console.log('outputs: ', outputs);
+  return outputs;
+}

package/src/generator/genMetaData.ts

@@ -8,6 +8,7 @@ import {
   uiStructures,
   collectionStructures,
   configurationEnums,
+  processV2Enums,
   interfaceStructures,
   processStructures,
   processV2Structures,
@@ -98,6 +99,8 @@ export function genMetaData(app: App, frontend: Frontend, config: any) {
 
   // 内置国际化枚举
   enums.push(...configurationEnums)
+  // 内置流程枚举
+  enums.push(...processV2Enums)
   app.interfaces.forEach(it=>{
     it && interfaces.push(it as Interface);
   })

package/src/generator/release-body/body.ts

@@ -57,6 +57,7 @@ async function getNaslAnnotatedJSON(app: App, opt: InternalReleaseData) {
     //   console.info(NaslAnnotatedJSON, '标注后的nasl');
     // }
   } catch (err) {
+    console.error(err);
     throw new Error('代码标注失败，请稍后重试！或刷新后重试！');
   }
   // 如果是发布，就排除 views，导出源码就不排除