@hr-components-dev/cli 1.1.5 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hr-components-dev/cli",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -32,9 +32,7 @@
     "vite.config.ts",
     "index.html",
     "tsconfig.build.json",
-    "!**/*.ts",
-    "!**/*.tsx",
-    "!scripts/**/*.ts",
+    "!src/scripts/**/*.ts",
     "!**/*.test.js",
     "!**/*.spec.js"
   ],

package/src/amis/components/hr-editor/index.ts

@@ -0,0 +1,126 @@
+import type { FormControlProps } from 'amis';
+import _ from 'lodash';
+
+/**
+ * 表单校验 组件 FormItem
+ * @param props
+ * @returns
+//  */
+const EditorComponent = (_p: amis.AmisComponentPropsType) => {
+  const throttledSuccessMessage = _.throttle(() =>
+    _p.amisUI.toast.success('hr-editor 代码校验完成!')
+    , 3000);
+  // 修改节流函数，接受错误对象作为参数
+  const throttledFailedMessage = _.throttle((o: any, title: string) => {
+    _p.amisUI.toast.error(
+      `${o.startLineNumber}行${o.startColumn}列,【${o.owner}】错误`,
+      {
+        body: `错误: ${o.message}\n\n${title}\n${o.label}`,
+        timeout: 5000,
+        position: "top-right"
+      });
+  }, 1000);
+  const $EditorList: any = {};
+  const $MonacoList: any = {};
+
+  return (p: FormControlProps) => {
+    const [errors, setError] = _p.react.useState<any>([]);
+    const [name, setName] = _p.react.useState<any>(p.name);
+    const [label, setLabel] = _p.react.useState<any>(p.label);
+    const [editorOncahnge, setEditorOnchange] = _p.react.useState<any>(false);
+
+    const get_peditor = () => $EditorList[name];
+    const get_pmonaco = () => $MonacoList[name];
+
+    _p.amislib.addRule(
+      `Validat-${p.name}`, // 校验名
+      (_values: any, _value: string) => {
+        // 查找value对应的key
+
+        // 校验函数，values 是表单里所有表单项的值，可用于做联合校验；value 是当前表单项的值
+        const markers: Array<any> = get_pmonaco()?.editor?.getModelMarkers({ resource: get_peditor().getModel().uri })
+          .filter((marker: { severity: any }) => marker.severity === get_pmonaco().MarkerSeverity.Error);
+        setError(markers);
+        return markers?.length === 0;
+      },
+      `语法共有${errors?.length}处错误,例: ${errors?.at(0)?.message ?? ''} ,请检查` // 出错时的报错信息
+    );
+
+    _p.react.useEffect(() => {
+      if (errors?.length > 0) {
+        errors?.forEach((o: any, _i: number) => {
+          // 调用节流函数时传递错误对象参数
+          throttledFailedMessage({ ...o, label }, `共:${errors.length}处`);
+        });
+      } else {
+        throttledSuccessMessage();
+      }
+    }, [errors]);
+
+    return p.render(
+      'body',
+      {
+        required: true,
+        allowFullscreen: true,
+        disabled: false,
+        language: 'json',
+        autoParseJSON: true,
+        options: {
+          automaticLayout: true,
+          disableLayerHinting: true,
+          formatOnPaste: true,
+          minimap: {
+            enabled: true
+          },
+          renderFinalNewline: true,
+          lineNumbersMinChars: 1, // 行号最小宽度
+          glyphMargin: true, // 显示glyph margin
+          renderLineHighlight: 'all',
+          renderSideBySide: true,
+          scrollBeyondLastLine: false,
+          selectOnLineNumbers: true,
+          theme: 'vs',
+          wordWrapBreakAfterCharacters: ',',
+          wordWrapBreakBeforeCharacters: ',',
+          // 新增配置项
+          fontSize: 19,
+          fontFamily: '微软雅黑',
+          cursorStyle: 'line', // 光标样式: 'line', 'block', 'underline'
+          cursorBlinking: 'smooth', // 光标闪烁: 'blink', 'smooth', 'phase', 'expand', 'solid'
+          cursorSmoothCaretAnimation: true // 平滑插入动画
+        },
+        ...p.$schema,
+        editorDidMount: (editor: any, monaco: any) => {
+          setEditorOnchange(true);
+          const changeListener = editor.onDidChangeModelContent(() => {
+            setLabel(`字段: ${p.label.split(' ').slice(0, 2).join(' ')}`);
+            setName(p.name);
+          });
+          $EditorList[p.name!] = editor;
+          $MonacoList[p.name!] = monaco;
+
+          // eslint-disable-next-line no-bitwise
+          editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+            editor.trigger('keyboard', 'editor.action.formatDocument');
+          });
+
+          return () => {
+            changeListener.dispose();
+            // 清除残留的节流调用
+            throttledSuccessMessage.cancel();
+            throttledFailedMessage.cancel();
+          };
+        },
+        validateOnChange: editorOncahnge,
+        validations: {
+          [`Validat-${p.name}`]: true
+        },
+        type: 'editor'
+      },
+      {
+        // props: p
+      }
+    );
+  };
+};
+export default EditorComponent;

package/src/amis/components/hr-form-editor/index.ts

@@ -0,0 +1,53 @@
+import type { FormControlProps } from 'amis';
+
+
+
+/**
+ * 表单校验 组件 FormItem
+ * @param props
+ * @returns
+//  */
+const EditorFormItemComponent = (_p: amis.AmisComponentPropsType) => {
+  const { useRef } = _p.react;
+  return (p: FormControlProps) => {
+    const _dom: any = useRef(null);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { name, type, label, ...other } = p.$schema;
+    return p.render(
+      'body',
+      {
+        type: 'button',
+        label,
+        actionType: 'dialog',
+        dialog: {
+          onEvent: {
+            // confirm: {
+            //   actions: [
+            //     {
+            //       actionType: 'custom',
+            //       script: (_ctx: any, _act: any, e: { parentDefault: () => void }) => {
+            //         e.parentDefault();
+            //       }
+            //     }
+            //   ]
+            // }
+          },
+          title: "编辑器",
+          size: 'full',
+          body: {
+            type: 'hr-editor',
+            onChange: p.onChange,
+            onBulkChange: p.onBulkChange,
+            name: p.name,
+            ...other
+          }
+        }
+      },
+      {
+        // props: p
+      }
+    );
+  };
+};
+
+export default EditorFormItemComponent;

package/src/amis/components/utils/evalScope.ts

@@ -0,0 +1,141 @@
+import type { AxiosResponse } from 'axios';
+import dayjs from 'dayjs';
+import _ from 'lodash';
+import consola from 'consola';
+import { disAutoConnect, autoConnect, hiprint } from '@sv-print/hiprint';
+import type { IScopedContext } from 'amis';
+import { loadAmisSDK } from '@maita/amis-tools';
+import axios from 'axios';
+disAutoConnect();
+
+
+
+
+
+/**
+ * 动态执行给定的作用域表达式，并返回处理后的上下文和数据。
+ *
+ * @param scope - 要执行的动态表达式字符串。
+ * @returns 包含 `context` 和 `data` 的对象。如果 `scope` 为空，则返回空对象。
+ */
+export const evalFc = async (
+  scopeStr: string,
+  instance?: IScopedContext & amis.TypeEmbed
+): Promise<{
+  data?: Record<string, string | number | boolean | null | undefined>;
+  context?: Record<string, any>;
+}> => {
+  const getAmis = async () => {
+    if (!window.amisRequire) await loadAmisSDK();
+    return new Promise((res, rej) => {
+      try {
+        window.amisRequire(['amis-ui', 'amis', 'amis-formula', 'react', 'amis-core'], (...args: any[]) => {
+          const [ui, lib, formula, react, core] = args;
+          res({ ui, lib, formula, react, core });
+        });
+      } catch (error) {
+        consola.error('amisRequire 加载失败，部分功能可能无法使用', error);
+        rej(error);
+      }
+    });
+  };
+
+  const eval2 = (express: string) => {
+    // eslint-disable-next-line no-new-func
+    return new Function('instance', '_', 'axios', 'hiprint', 'hiprintConnect', 'dayjs', 'amis', `return ${express}`);
+  };
+  const dynamicCode = eval2(`(${scopeStr})`)(
+    instance,
+    _,
+    axios,
+    hiprint.PrintTemplate,
+    autoConnect,
+    dayjs,
+    await getAmis()
+  );
+
+  const Scope: {
+    data?: Record<string, string | number | boolean | null | undefined>;
+    context?: Record<string, any>;
+  } = {
+    context: dynamicCode.context,
+    data: dynamicCode.data
+  };
+
+  return Scope;
+};
+
+/**
+ * 递归转换数组Schema类型的$字符串表达式
+ * @param orgobj 含$字符串的Schema表达式的对象
+ * @param args Title ,entity,user 参数
+ * @returns 计算后的对象
+ */
+export function ConvertSchemaMarkToJSON<T>(orgobj: Record<string, any>, scope: any): T {
+  const eval2 = (express: string) => {
+    // eslint-disable-next-line no-new-func
+    return new Function('scope', `return ${express.replace('{{', '').replace('}}', '')}`);
+  };
+
+  /**
+   * 递归处理对象
+   * @param obj 当前处理的对象
+   * @returns 处理后的对象
+   */
+  const getObject = (obj: Record<string, any> | string): any => {
+    // 处理对象
+    const targetObj: Record<string, any> = {};
+    if (typeof obj === 'number') {
+      return obj;
+    } else if (typeof obj === 'string') {
+      if (/{{.*}}/.test(obj)) obj = eval2(obj)(scope);
+      return obj;
+    }
+
+    for (const key in obj) {
+      if (Object.hasOwn(obj, key)) {
+        const value = obj[key];
+        // 递归处理对象或数组
+        if (Array.isArray(value)) {
+          targetObj[key] = value.map(item => getObject(item));
+        } else if (typeof value === 'object') {
+          targetObj[key] = getObject(value);
+        }
+        // 处理包含 {{}} 的字符串
+        else if (typeof value === 'string' && /{{.*}}/.test(value)) {
+          targetObj[key] = eval2(value)(scope);
+        } else targetObj[key] = value;
+      }
+    }
+    return targetObj;
+  };
+  return getObject(orgobj);
+}
+
+/**
+ * 封装response数据为一个文件下载
+ * @param response - Axios 响应对象
+ * @returns 如果服务端返回的是一个blob 则返回一个文件下载
+ */
+export const responeToDownLoad = (response: AxiosResponse<any>) => {
+  let filename = '文件打包.zip';
+  const contentDisposition = response.headers['content-disposition'] || response.headers['Content-Disposition'];
+  // 解析 Content-Disposition 头以获取文件名
+  if (contentDisposition) {
+    const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+    if (filenameMatch && filenameMatch[1]) {
+      filename = decodeURIComponent(filenameMatch[1].replace(/['"]/g, ''));
+    }
+  }
+
+  const downloadUrl = window.URL.createObjectURL(new Blob([response.data as unknown as BlobPart]));
+  const link = document.createElement('a');
+  link.style.display = 'none';
+  link.href = downloadUrl;
+  link.setAttribute('download', filename); // 设置下载的文件名
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  window.URL.revokeObjectURL(downloadUrl);
+  return { msg: '下载成功', status: 0, data: {} }; // 不进行 Amis 渲染
+};

package/src/amis/components/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './registerAmisComponent';
+export * from './setupAmisConfig';
+export * from './evalScope';
+

package/src/amis/components/utils/registerAmisComponent.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+
+/**
+ * 注册amis 自定义组件
+ * @param amislib amisReauire amis库
+ * @param react amisReauire react库
+ */
+export const registerAmisComponent = (p: amis.AmisComponentPropsType) => {
+    const registerComponent = (
+        name: string,
+        hook: (props: amis.AmisComponentPropsType) => React.ComponentType<any>,
+        isFormItem: boolean = false
+    ) => {
+        if (!p.amislib.getFormItemByName(name.toLocaleLowerCase())) {
+            const state = isFormItem
+                ? p.amislib.FormItem({ type: name.toLocaleLowerCase() })(hook(p)) // 注册 formitem 组件
+                : p.amislib.Renderer({ type: name.toLocaleLowerCase() })(hook(p)); // 注册 renderer 组件
+            return state;
+        }
+        return p.amislib.getRendererByName(name.toLocaleLowerCase());
+    };
+
+    return registerComponent;
+};
+
+export default registerAmisComponent;
+

package/src/amis/components/utils/setupAmisConfig.ts

@@ -0,0 +1,25 @@
+import { MaitaGlobalConfig, loadAmisSDK } from '@maita/amis-tools';
+
+/** 设置Amis配置 */
+export const setupAmisConfig = () => {
+  const _cf = new MaitaGlobalConfig();
+  (async () => {
+    // 定义的通用window方法，供amis设计器使用
+    const newJsFunc = {
+      /**
+       * 浏览器动态列缓存
+       *
+       * @param ctx amis context上下文
+       * @param event amis event事件
+       * @param clear 是否清除 默认false
+       */
+      // dynimicColumnCache: (_ctx: any, _event: any, _clear: boolean = false) => {},
+      // dynimicColumnSave: (_ctx: any, _event: any, _clear: boolean = false) => {}
+    };
+    // if (!window.amisRequire) {
+    //   await loadAmisSDK();
+    // }
+
+    Object.assign((window as any).__JSFunc, newJsFunc);
+  })();
+};

package/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import './style.css'
+// import '../src/assets/@fortawesome/fontawesome-free/css/all.min.css';
+import App from './App.vue'
+
+createApp(App).mount('#app')