@ibiz-template/vue3-components 0.7.41-alpha.37 → 0.7.41-alpha.38

package/es/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.mjs

@@ -3,6 +3,7 @@ import { useNamespace, useUIStore, getEditorEmits, getMarkDownProps } from '@ibi
 import { createUUID } from 'qx-util';
 import Cherry from 'cherry-markdown';
 import './ibiz-markdown-editor.css';
+import { initCustomMenu } from './custom-menu.mjs';
 
 "use strict";
 const IBizMarkDown = /* @__PURE__ */ defineComponent({
@@ -12,12 +13,13 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
   setup(props, {
     emit
   }) {
-    var _a, _b;
+    var _a, _b, _c;
     const ns = useNamespace("markdown");
     const c = props.controller;
     const currentVal = ref("");
     let editor = null;
     const id = createUUID();
+    const [AIMenu] = initCustomMenu(c);
     const uploadHeaders = ibiz.util.file.getUploadHeaders();
     const headers = ref({
       ...uploadHeaders
@@ -28,6 +30,12 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
       UIStore
     } = useUIStore();
     const theme = ref(customTheme || UIStore.theme);
+    const isEditing = ref(false);
+    let showmode = "default";
+    if (c && ((_c = c.editorParams) == null ? void 0 : _c.showmode)) {
+      showmode = c.editorParams.showmode;
+    }
+    const isFullScreen = ref(false);
     const defaultModel = ref("editOnly");
     let resizeObserver = null;
     let lastMarkDownWidth = 0;
@@ -91,7 +99,7 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
     };
     const setCherryContent = (val) => {
       isIgnoreChange = true;
-      editor == null ? void 0 : editor.setMarkdown(val, false);
+      editor == null ? void 0 : editor.setMarkdown(val, true);
     };
     watch(() => props.value, (newVal, oldVal) => {
       if (newVal !== oldVal) {
@@ -111,6 +119,9 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
       }
     });
     const afterChange = (_e) => {
+      if (showmode === "manual") {
+        return;
+      }
       emit("change", getCherryContent(), c == null ? void 0 : c.model.id, isIgnoreChange);
       isIgnoreChange = false;
     };
@@ -190,8 +201,10 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
       if (editor && markDownBox.value) {
         if (isFullscreen()) {
           closeFullscreen();
+          isFullScreen.value = false;
         } else {
           openFullscreen();
+          isFullScreen.value = true;
         }
       }
     };
@@ -200,15 +213,20 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
       if (_e.key === "Escape") {
         if (isFullscreen()) {
           closeFullscreen();
+          isFullScreen.value = false;
         }
       }
     };
     const editorInit = () => {
-      if (props.disabled || props.readonly) {
+      if (props.disabled || props.readonly || showmode === "manual") {
         defaultModel.value = "previewOnly";
       }
       nextTick(() => {
         var _a2;
+        const bubble = ["bold", "italic", "underline", "strikethrough", "sub", "sup", "|", "size", "color"];
+        if (c.editorParams.ac && c.deACMode) {
+          bubble.unshift("AI");
+        }
         editor = new Cherry({
           id,
           value: currentVal.value,
@@ -245,10 +263,28 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
             toolbar: ["bold", "italic", "underline", "strikethrough", "|", "color", "header", "|", "list", "image", {
               insert: ["link", "hr", "br", "code", "formula", "toc", "table", "line-table", "bar-table"]
             }, "settings", "togglePreview"],
-            bubble: ["bold", "italic", "underline", "strikethrough", "sub", "sup", "|", "size", "color"],
+            bubble,
             float: ["h1", "h2", "h3", "|", "checklist", "quote", "quickTable", "code"],
-            customMenu: [],
-            sidebar: []
+            customMenu: {
+              AI: AIMenu
+            },
+            // 定义侧边栏，默认为空
+            sidebar: ["theme", "copy"],
+            // 定义顶部右侧工具栏，默认为空
+            toolbarRight: [],
+            // 目录
+            toc: {
+              updateLocationHash: false,
+              // 要不要更新URL的hash
+              defaultModel: "pure",
+              // pure: 精简模式/缩略模式，只有一排小点； full: 完整模式，会展示所有标题
+              showAutoNumber: true,
+              // 是否显示自增序号
+              position: "absolute",
+              // 悬浮目录的悬浮方式。当滚动条在cherry内部时，用absolute；当滚动条在cherry外部时，用fixed
+              cssText: ""
+              // 自定义样式
+            }
           },
           callback: {
             afterChange,
@@ -274,6 +310,7 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
         span.appendChild(createCherryIcon("fullscreen"));
         const parentElement = props.disabled ? editor.editor.options.editorDom.parentElement : (_a2 = editor.editor.options.editorDom.parentElement) == null ? void 0 : _a2.querySelector(".cherry-toolbar>.toolbar-right");
         parentElement == null ? void 0 : parentElement.appendChild(span);
+        c.setMDEditor(editor);
       });
     };
     watch(() => UIStore.theme, (newVal) => {
@@ -310,15 +347,70 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
         resizeObserver.observe(markDownBox.value);
       }
     };
+    const onEnableEdit = () => {
+      isEditing.value = true;
+      defaultModel.value = "editOnly";
+      editor == null ? void 0 : editor.switchModel(defaultModel.value);
+    };
+    const onResetEditState = () => {
+      isEditing.value = false;
+      defaultModel.value = "previewOnly";
+      editor == null ? void 0 : editor.switchModel(defaultModel.value);
+    };
+    const onEditCancel = () => {
+      setCherryContent(currentVal.value);
+      onResetEditState();
+    };
+    const onEditConfirm = () => {
+      emit("change", getCherryContent(), c == null ? void 0 : c.model.id, isIgnoreChange);
+      isIgnoreChange = false;
+      onResetEditState();
+    };
+    const renderHeader = () => {
+      if (showmode === "manual" && !isEditing.value) {
+        return createVNode("div", {
+          "class": [ns.e("header"), ns.is("fullscreen", isFullScreen.value)]
+        }, [!props.disabled && !props.readonly && createVNode("div", {
+          "class": ns.em("header", "edit"),
+          "onClick": onEnableEdit,
+          "title": ibiz.i18n.t("editor.markdown.edit")
+        }, [createVNode("i", {
+          "class": "fa fa-edit",
+          "aria-hidden": "true"
+        }, null)]), createVNode("div", {
+          "class": ns.em("header", "full"),
+          "onClick": onSwitchFullscreen
+        }, [isFullScreen.value ? createVNode("i", {
+          "class": "fa fa-compress",
+          "aria-hidden": "true",
+          "title": ibiz.i18n.t("editor.html.reduce")
+        }, null) : createVNode("i", {
+          "class": "fa fa-expand",
+          "aria-hidden": "true",
+          "title": ibiz.i18n.t("editor.common.fullscreen")
+        }, null)])]);
+      }
+    };
+    const renderFooter = () => {
+      if (showmode === "manual" && isEditing.value && !props.disabled && !props.readonly) {
+        return createVNode("div", {
+          "class": [ns.e("footer"), ns.is("fullscreen", isFullScreen.value)]
+        }, [createVNode("div", {
+          "class": ns.em("footer", "cancel"),
+          "onClick": onEditCancel
+        }, [ibiz.i18n.t("editor.common.cancel")]), createVNode("div", {
+          "class": ns.em("footer", "save"),
+          "onClick": onEditConfirm
+        }, [ibiz.i18n.t("editor.common.confirm")])]);
+      }
+    };
     onMounted(() => {
-      var _a2;
       editorInit();
       calcMarkDownStyle();
-      (_a2 = markDownBox.value) == null ? void 0 : _a2.addEventListener("keydown", handleKeyDown.bind(this));
+      document.addEventListener("keydown", handleKeyDown.bind(this));
     });
     onBeforeUnmount(() => {
-      var _a2;
-      (_a2 = markDownBox.value) == null ? void 0 : _a2.removeEventListener("keydown", handleKeyDown.bind(this));
+      document.removeEventListener("keydown", handleKeyDown.bind(this));
     });
     onUnmounted(() => {
       editor = null;
@@ -336,16 +428,20 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
       theme,
       defaultModel,
       cssVars,
+      isEditing,
+      showmode,
       getCherryHtml,
       getCherryContent,
-      setCherryContent
+      setCherryContent,
+      renderHeader,
+      renderFooter
     };
   },
   render() {
     return createVNode("div", {
       "ref": "markDownBox",
-      "class": [this.ns.b(), this.ns.is("disabled", this.disabled)]
-    }, [createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("disabled", this.disabled), this.ns.is("manual", this.showmode === "manual"), this.ns.is("editing", this.isEditing)]
+    }, [this.renderHeader(), this.renderFooter(), createVNode("div", {
       "id": this.id,
       "style": this.cssVars,
       "class": this.ns.b("cherry")

package/es/editor/markdown/markdown-editor.controller.mjs

@@ -1,5 +1,5 @@
 import { RuntimeModelError } from '@ibiz-template/core';
-import { EditorController, getDeACMode } from '@ibiz-template/runtime';
+import { EditorController, getDeACMode, UIActionUtil } from '@ibiz-template/runtime';
 
 "use strict";
 var __defProp = Object.defineProperty;
@@ -75,6 +75,20 @@ class MarkDownEditorController extends EditorController {
      * @type {boolean}
      */
     __publicField(this, "chatCompletion", false);
+    /**
+     * 编辑器实例
+     *
+     * @type {IData}
+     * @memberof MarkDownEditorController
+     */
+    __publicField(this, "mdeditor", null);
+    /**
+     * 选区位置缓存
+     *
+     * @type {(IData | null)}
+     * @memberof MarkDownEditorController
+     */
+    __publicField(this, "selectionAreaPosition", null);
   }
   async onInit() {
     await super.onInit();
@@ -141,6 +155,104 @@ class MarkDownEditorController extends EditorController {
       }
     }
   }
+  /**
+   * 设置编辑器实例
+   *
+   * @param {IData} mdeditor
+   * @memberof MarkDownEditorController
+   */
+  setMDEditor(mdeditor) {
+    this.mdeditor = mdeditor;
+  }
+  /**
+   * 设置保存当前选区位置
+   *
+   * @param {IData} start
+   * @param {IData} end
+   * @memberof MarkDownEditorController
+   */
+  setCursorPos(start, end) {
+    this.selectionAreaPosition = { start, end };
+  }
+  /**
+   * 获取选中文本
+   *
+   * @return {*}  {string}
+   * @memberof MarkDownEditorController
+   */
+  getSelectionText() {
+    var _a;
+    return (_a = this.mdeditor) == null ? void 0 : _a.editor.editor.getSelection();
+  }
+  /**
+   * 插入文本
+   *
+   * @param {string} text
+   * @memberof MarkDownEditorController
+   */
+  insertText(text) {
+    var _a;
+    (_a = this.mdeditor) == null ? void 0 : _a.insert(text);
+  }
+  /**
+   * 替换选中文本
+   *
+   * @param {string} text
+   * @memberof MarkDownEditorController
+   */
+  replaceSelectionText(text) {
+    var _a;
+    (_a = this.mdeditor) == null ? void 0 : _a.editor.editor.replaceSelection(text);
+  }
+  /**
+   * 恢复选区
+   *
+   * @memberof MarkDownEditorController
+   */
+  restoreSelection() {
+    var _a, _b, _c;
+    (_c = this.mdeditor) == null ? void 0 : _c.editor.editor.setSelection(
+      (_a = this.selectionAreaPosition) == null ? void 0 : _a.start,
+      (_b = this.selectionAreaPosition) == null ? void 0 : _b.end
+    );
+  }
+  /**
+   * 获取内联AI参数
+   *
+   * @return {*}  {IData}
+   * @memberof MarkDownEditorController
+   */
+  getInLineAiChatOptions() {
+    var _a;
+    const editorRect = (_a = this.mdeditor) == null ? void 0 : _a.wrapperDom.getBoundingClientRect();
+    return {
+      left: editorRect == null ? void 0 : editorRect.left,
+      top: editorRect == null ? void 0 : editorRect.top,
+      width: editorRect == null ? void 0 : editorRect.width
+    };
+  }
+  /**
+   *  执行内联AIUI操作
+   *
+   * @param {string} _uiAction
+   * @param {string} _appId
+   * @return {*}  {Promise<void>}
+   * @memberof MarkDownEditorController
+   */
+  async doInLineAIUIAction(uiActionId, appId) {
+    const eventArgs = this.ctrl.getEventArgs();
+    eventArgs.params.editor = this;
+    if (this.editorParams.srfaiappendcurdata && this.editorParams.srfaiappendcurdata === "true") {
+      eventArgs.context.srfaiappendcurdata = true;
+    }
+    await UIActionUtil.exec(
+      uiActionId,
+      {
+        ...eventArgs
+      },
+      appId
+    );
+  }
 }
 
 export { MarkDownEditorController };

package/es/index.mjs

@@ -180,6 +180,7 @@ export { FullscreenUtil } from './util/fullscreen/fullscreen-util.mjs';
 export { useFocusByEnter } from './util/keydown-util/keydown-util.mjs';
 export { calcAiToolbarItemsByAc } from './util/ai-util/ai-util.mjs';
 export { convertBtnType } from './util/button-util/button-util.mjs';
+export { InLineAIUtil } from './util/inline-ai-util/inline-ai-util.mjs';
 export { parseHtml } from './util/wang-editor-util/wang-editor-util.mjs';
 export { ArrowLeftBold, ArrowRightBold } from './util/icon/icon.mjs';
 export { AuthGuard } from './web-app/guard/auth-guard/auth-guard.mjs';

package/es/locale/en/index.mjs

@@ -621,7 +621,11 @@ var index = {
       }
     },
     code: {
-      readOnlyPrompt: "Currently in read-only mode, not editable"
+      readOnlyPrompt: "Currently in read-only mode, not editable",
+      noEditorArea: "Editor content area not found",
+      noSelStart: "No start position of current selection",
+      noEditorRect: "No editor DOM node position info",
+      noSelCoords: "No scroll coordinates of selection"
     },
     dateRange: {
       rangeSeparator: "To"
@@ -657,7 +661,8 @@ var index = {
     },
     markdown: {
       uploadJsonFormatErr: "The configuration of uploadparams did not follow the standard JSON format",
-      exportJsonFormatErr: "The configuration of exportparams did not follow the standard JSON format"
+      exportJsonFormatErr: "The configuration of exportparams did not follow the standard JSON format",
+      edit: "Edit"
     },
     notSupportedEditor: {
       unsupportedType: "Unsupported editor types - {editorType}"
@@ -830,6 +835,14 @@ var index = {
     appModal: {
       prev: "Previous record",
       next: "Next record"
+    },
+    inlineAiUtil: {
+      regenerate: "Regenerate",
+      insertText: "Insert Text",
+      replaceText: "Replace Text",
+      copyText: "Copy Text",
+      info: "The content is generated by AI, please carefully discern.",
+      stopEdit: "Terminate editing"
     }
   },
   // runTime

package/es/locale/zh-CN/index.mjs

@@ -617,7 +617,11 @@ var index = {
       }
     },
     code: {
-      readOnlyPrompt: "\u5F53\u524D\u4E3A\u53EA\u8BFB\u6A21\u5F0F\uFF0C\u4E0D\u53EF\u7F16\u8F91"
+      readOnlyPrompt: "\u5F53\u524D\u4E3A\u53EA\u8BFB\u6A21\u5F0F\uFF0C\u4E0D\u53EF\u7F16\u8F91",
+      noEditorArea: "\u672A\u627E\u5230\u7F16\u8F91\u5668\u5185\u5BB9\u533A\u57DF",
+      noSelStart: "\u672A\u83B7\u53D6\u5230\u5F53\u524D\u9009\u4E2D\u533A\u57DF\u7684\u8D77\u59CB\u4F4D\u7F6E",
+      noEditorRect: "\u672A\u83B7\u53D6\u5230\u7F16\u8F91\u5668DOM\u8282\u70B9\u7684\u4F4D\u7F6E\u4FE1\u606F",
+      noSelCoords: "\u672A\u8BA1\u7B97\u51FA\u9009\u4E2D\u4F4D\u7F6E\u7684\u6EDA\u52A8\u53EF\u89C6\u5750\u6807"
     },
     dateRange: {
       rangeSeparator: "\u81F3"
@@ -653,7 +657,8 @@ var index = {
     },
     markdown: {
       uploadJsonFormatErr: "\u914D\u7F6Euploadparams\u6CA1\u6709\u6309\u6807\u51C6JSON\u683C\u5F0F",
-      exportJsonFormatErr: "\u914D\u7F6Eexportparams\u6CA1\u6709\u6309\u6807\u51C6JSON\u683C\u5F0F"
+      exportJsonFormatErr: "\u914D\u7F6Eexportparams\u6CA1\u6709\u6309\u6807\u51C6JSON\u683C\u5F0F",
+      edit: "\u7F16\u8F91"
     },
     notSupportedEditor: {
       unsupportedType: "\u672A\u652F\u6301\u7684\u7F16\u8F91\u5668\u7C7B\u578B - {type}"
@@ -826,6 +831,14 @@ var index = {
     appModal: {
       prev: "\u4E0A\u4E00\u4E2A\u8BB0\u5F55",
       next: "\u4E0B\u4E00\u4E2A\u8BB0\u5F55"
+    },
+    inlineAiUtil: {
+      regenerate: "\u91CD\u65B0\u751F\u6210",
+      insertText: "\u63D2\u5165\u6587\u672C",
+      replaceText: "\u66FF\u6362\u6587\u672C",
+      copyText: "\u590D\u5236\u6587\u672C",
+      info: "\u5185\u5BB9\u7531 AI \u751F\u6210\uFF0C\u8BF7\u4ED4\u7EC6\u7504\u522B\u3002",
+      stopEdit: "\u7EC8\u6B62\u7F16\u8F91"
     }
   },
   // runTime

package/es/util/ai-util/ai-util.mjs

@@ -5,10 +5,11 @@ function calcAiToolbarItemsByAc(deACMode) {
   const footerToolbarItems = [];
   const questionToolbarItems = [];
   const functionToolbarItems = [];
+  const inlineToolbarItems = [];
   const otherToolbarItems = [];
   (_b = (_a = deACMode.deuiactionGroup) == null ? void 0 : _a.uiactionGroupDetails) == null ? void 0 : _b.forEach(
     (item) => {
-      var _a2, _b2, _c, _d, _e, _f;
+      var _a2, _b2, _c, _d, _e, _f, _g, _h;
       const toolbarItem = {
         appId: item.appId,
         id: item.uiactionId,
@@ -31,6 +32,8 @@ function calcAiToolbarItemsByAc(deACMode) {
         questionToolbarItems.push(toolbarItem);
       } else if ((_f = item.uiactionId) == null ? void 0 : _f.startsWith("function_")) {
         functionToolbarItems.push(toolbarItem);
+      } else if (((_g = item.uiactionId) == null ? void 0 : _g.startsWith("inline")) || item.refUIActionGroup && ((_h = item.refUIActionGroup.id) == null ? void 0 : _h.startsWith("inline"))) {
+        inlineToolbarItems.push(toolbarItem);
       } else {
         otherToolbarItems.push(toolbarItem);
       }
@@ -41,7 +44,8 @@ function calcAiToolbarItemsByAc(deACMode) {
     footerToolbarItems,
     questionToolbarItems,
     otherToolbarItems,
-    functionToolbarItems
+    functionToolbarItems,
+    inlineToolbarItems
   };
 }
 

package/es/util/app-util/app-util.mjs

@@ -1,6 +1,6 @@
 import { getDeACMode, calcDeCodeNameById, UIActionUtil, SysUIActionTag, ConfigService } from '@ibiz-template/runtime';
 import { createUUID } from 'qx-util';
-import { IBizContext } from '@ibiz-template/core';
+import { StringUtil, IBizContext } from '@ibiz-template/core';
 import { route2routePath, useUIStore, routePath2string } from '@ibiz-template/vue3-util';
 import { calcAiToolbarItemsByAc } from '../ai-util/ai-util.mjs';
 
@@ -184,6 +184,42 @@ class AppUtil {
     }
     return true;
   }
+  /**
+   * 计算AI扩展参数
+   *
+   * @private
+   * @param {IData} params
+   * @return {*}  {IData}
+   */
+  computeAiExParams(context, params, data) {
+    const exParams = {};
+    if (params.hasOwnProperty("autoquestion")) {
+      exParams.autoQuestion = params.autoquestion !== "false";
+      delete params.autoquestion;
+    }
+    if (params.hasOwnProperty("openmode")) {
+      exParams.openMode = params.openmode;
+      delete params.openmode;
+    }
+    if (params.hasOwnProperty("autoclose")) {
+      try {
+        exParams.autoClose = JSON.parse(params.autoclose);
+        delete params.autoclose;
+      } catch (error) {
+        ibiz.log.error(error);
+      }
+    }
+    if (params.hasOwnProperty("srfaiappendcurcontent")) {
+      exParams.appendCurContent = StringUtil.fill(
+        params.srfaiappendcurcontent,
+        context,
+        params,
+        data
+      );
+      delete params.srfaiappendcurcontent;
+    }
+    return exParams;
+  }
   /**
    * 打开AI聊天
    *
@@ -201,6 +237,7 @@ class AppUtil {
       appDEACModeId,
       appDataEntityId
     } = chartParams;
+    const exParams = this.computeAiExParams(context, params, data);
     const deACMode = await getDeACMode(
       appDEACModeId,
       appDataEntityId,
@@ -449,7 +486,9 @@ class AppUtil {
               }
             }
             return result;
-          }
+          },
+          // 扩展参数
+          ...exParams
         }
       });
     });

package/es/util/index.mjs

@@ -15,5 +15,6 @@ export { useFocusByEnter } from './keydown-util/keydown-util.mjs';
 export { calcAiToolbarItemsByAc } from './ai-util/ai-util.mjs';
 export { convertBtnType } from './button-util/button-util.mjs';
 export { ArrowLeftBold, ArrowRightBold } from './icon/icon.mjs';
+export { InLineAIUtil } from './inline-ai-util/inline-ai-util.mjs';
 
 "use strict";