@ibiz-template/vue3-components 0.7.41-alpha.140 → 0.7.41-alpha.142

package/src/common/html-doc-preview/html-doc-preview.scss

@@ -0,0 +1,9 @@
+@include b(html-doc-preview) {
+  width: 100%;
+
+  @include e(iframe) {
+    display: block;
+    width: 100%;
+    border: none;
+  }
+}

package/src/common/html-doc-preview/html-doc-preview.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { computed, defineComponent, PropType, ref, watch } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { IControlController, IViewController } from '@ibiz-template/runtime';
+import './html-doc-preview.scss';
+
+export const IBizHtmlDocPreview = defineComponent({
+  name: 'IBizHtmlDocPreview',
+  props: {
+    // html值，完整HTML文档内容
+    value: String,
+    enableScript: {
+      type: Boolean,
+      default: true,
+    },
+    ctrl: { type: Object as PropType<IControlController>, required: false },
+    view: { type: Object as PropType<IViewController>, required: false },
+  },
+  setup(props) {
+    const ns = useNamespace('html-doc-preview');
+
+    // iframe高度，undefined时使用默认高度
+    const iframeHeight = ref<number>();
+
+    // 默认禁止脚本执行仅渲染样式与结构；开启脚本后为同源+脚本
+    const sandbox = computed(() => {
+      if (props.enableScript) {
+        return 'allow-same-origin allow-scripts';
+      }
+      return 'allow-same-origin';
+    });
+
+    // 读取iframe内容实际高度撑开外层
+    const calcHeight = (e: Event) => {
+      const iframe = e.target as HTMLIFrameElement;
+      const doc = iframe.contentDocument;
+      const contentWindow = iframe.contentWindow;
+      if (contentWindow) {
+        (contentWindow as IData).ctrl = props.ctrl;
+        (contentWindow as IData).view = props.view;
+      }
+      if (doc && doc.body) {
+        let h = doc.body.scrollHeight;
+        if (h > doc.documentElement.scrollHeight) {
+          h = doc.body.scrollHeight;
+        }
+        iframeHeight.value = h;
+      }
+    };
+
+    watch(
+      () => props.value,
+      newVal => {
+        // srcDoc变化会触发iframe重新加载，加载完成后calcHeight重算高度
+        if (!newVal) {
+          iframeHeight.value = undefined;
+        }
+      },
+    );
+
+    return { ns, iframeHeight, sandbox, calcHeight };
+  },
+  render() {
+    return (
+      <div class={[this.ns.b()]}>
+        <iframe
+          class={this.ns.e('iframe')}
+          srcdoc={this.value}
+          sandbox={this.sandbox}
+          style={
+            this.iframeHeight ? { height: `${this.iframeHeight}px` } : undefined
+          }
+          onLoad={this.calcHeight}
+        />
+      </div>
+    );
+  },
+});

package/src/common/index.ts

@@ -13,6 +13,7 @@ import { IBizActionToolbar } from './action-toolbar/action-toolbar';
 import { IBizCol } from './col/col';
 import { IBizRow } from './row/row';
 import { IBizRawItem } from './rawitem/rawitem';
+import { IBizHtmlDocPreview } from './html-doc-preview/html-doc-preview';
 import { IBizNoData } from './no-data/no-data';
 import { IBizSplit } from './split/split';
 import { IBizSplitTrigger } from './split-trigger/split-trigger';
@@ -74,6 +75,7 @@ export const IBizCommonComponents = {
     v.component(IBizViewShell.name, IBizViewShell);
     v.component(IBizControlShell.name, IBizControlShell);
     v.component(IBizRawItem.name, IBizRawItem);
+    v.component(IBizHtmlDocPreview.name, IBizHtmlDocPreview);
     v.component(IBizCodeList.name, IBizCodeList);
     v.component(IBizNoData.name, IBizNoData);
     v.component(IBizSplit.name, IBizSplit);

package/src/common/rawitem/rawitem.tsx

@@ -74,6 +74,7 @@ export const IBizRawItem = defineComponent({
     },
     chunkView: { type: String, required: false },
     chunkEntity: { type: String, required: false },
+    enableHtmlDoc: { type: Boolean, required: false },
     ctrl: { type: Object as PropType<IControlController>, required: false },
     view: { type: Object as PropType<IViewController>, required: false },
     data: { type: Object as PropType<IData>, required: false },
@@ -409,6 +410,17 @@ export const IBizRawItem = defineComponent({
         );
       }
       if (this.rawItemType === 'HTML') {
+        if (this.enableHtmlDoc) {
+          return (
+            <iBizHtmlDocPreview
+              class={[this.ns.e('paragraph'), this.semantic.html.class]}
+              style={this.semantic.html.style}
+              value={this.rawItemText}
+              view={this.view}
+              ctrl={this.ctrl}
+            ></iBizHtmlDocPreview>
+          );
+        }
         return (
           <div
             class={[this.ns.e('paragraph'), this.semantic.html.class]}

package/src/control/form/form-detail/form-rawitem/form-rawitem.tsx

@@ -15,6 +15,10 @@ export const FormRawItem = defineComponent({
       type: FormRawItemController,
       required: true,
     },
+    attrs: {
+      type: Object as PropType<IData>,
+      required: false,
+    },
   },
   setup(props) {
     const ns = useNamespace('form-raw-item');
@@ -249,7 +253,10 @@ export const FormRawItem = defineComponent({
         style={this.semanticStyle(`rawitem`, { rawitem: this.controller })}
         rawItem={this.modelData}
         content={this.content}
+        ctrl={this.controller.form}
+        view={this.controller.form.view}
         onClick={(event: MouseEvent) => this.controller.onClick(event)}
+        {...this.attrs}
       ></iBizRawItem>
     );
   },

package/src/editor/ai-chat/embed-ai-chat/embed-ai-chat.tsx

@@ -120,6 +120,7 @@ export const IBizEmbedAIChat = defineComponent({
         resourceOptions,
         containerOptions: {
           container: aiChatElementRef.value,
+          compWrapperId: editorParams.compwrapperid || 'DEFAULT',
         },
         topicOptions: {
           appid: ibiz.env.appId,

package/src/editor/raw/ibiz-raw/ibiz-raw.tsx

@@ -17,6 +17,7 @@ import './ibiz-raw.scss';
  * @editorparams {name:template,parameterType:string,description:配置的handlerBars模板内容，用于将组件输入参数中的value值解析并转换为HTML内容，实现动态内容的渲染}
  * @editorparams {"name":"chunkview","parameterType":"string", "description":"切片视图，用于定义打开目标切片视图"}
  * @editorparams {"name":"chunkentity","parameterType":"string", "description":"切片实体，用于打开切片视图数据主键key"}
+ * @editorparams {"name":"enablehtmldoc","parameterType":"boolean", "description":"是否启用html文档绘制模式，即使用iframe的srcdoc绘制html内容"}
  * @ignoreprops autoFocus | overflowMode
  * @ignoreemits change | blur | focus | enter | infoTextChange
  */
@@ -38,6 +39,8 @@ export const IBizRaw = defineComponent({
 
     const chunkView = c.editorParams.chunkview;
     const chunkEntity = c.editorParams.chunkentity;
+    // 启用html文档模式，使用iframe渲染
+    const enableHtmlDoc = c.toBoolean(c.editorParams.enablehtmldoc);
 
     // 类型
     let type = 'TEXT';
@@ -117,6 +120,7 @@ export const IBizRaw = defineComponent({
       template,
       chunkView,
       chunkEntity,
+      enableHtmlDoc,
       enableOverFlow,
       semanticClass,
       semanticStyle,
@@ -143,6 +147,7 @@ export const IBizRaw = defineComponent({
             content={this.content}
             chunkView={this.chunkView}
             chunkEntity={this.chunkEntity}
+            enableHtmlDoc={this.enableHtmlDoc}
             context={this.controller.context}
             ctrl={this.controller.ctrl}
             view={this.controller.view}

package/src/panel-component/index.ts

@@ -17,6 +17,7 @@ import {
   IBizPanelContainerTabs,
   IBizPanelCtrlViewPageCaption,
   IBizAuthWxmpQrcode,
+  IBizPanelSimpleList,
 } from '@ibiz-template/vue3-util';
 import IBizAuthUserinfo from './auth-userinfo';
 import IBizNavPosIndex from './nav-pos-index';
@@ -140,6 +141,7 @@ export const IBizPanelComponents = {
     v.use(IBizPanelContainerImage);
     v.use(IBizSearchFormButtons);
     v.use(IBizPanelItemRender);
+    v.use(IBizPanelSimpleList);
     v.use(IBizViewMessage);
     v.use(IBizPanelStaticCarousel);
     v.use(IBizTeleportPlaceholder);

package/src/util/ai-chat-util/ai-chat-util.ts

@@ -110,6 +110,12 @@ export class AIChatUtil implements IApiAIChatUtil {
         ibiz.log.error(error);
       }
     }
+    // 组件外层容器id,用于隔离不同位置的组件界面状态
+    if (editorParams.compwrapperid) {
+      containerOptions.compWrapperId = editorParams.compwrapperid;
+    } else {
+      containerOptions.compWrapperId = 'DEFAULT';
+    }
 
     // 会话参数
     const topicOptions: IData = {};
@@ -301,6 +307,16 @@ export class AIChatUtil implements IApiAIChatUtil {
       chatOptions.placeholder = ibiz.config.common.aiInputPlaceholder;
     }
 
+    // AI会话消息分页数量
+    if (editorParams.srfaichatmessagepagesize) {
+      chatOptions.chatMessagePageSize = Number(
+        editorParams.srfaichatmessagepagesize,
+      );
+    } else {
+      chatOptions.chatMessagePageSize =
+        ibiz.config.common.aiChatMessagePageSize;
+    }
+
     // 智能体选项(由内部获取，优化打开速度)
     chatOptions.fetchAgentList = (args: IParams = {}) => {
       const { query, agentid } = args;
@@ -883,6 +899,13 @@ export class AIChatUtil implements IApiAIChatUtil {
         ibiz.log.error(error);
       }
     }
+    // 组件外层容器id,用于隔离不同位置的组件界面状态
+    if (params.hasOwnProperty('compwrapperid')) {
+      containerOptions.compWrapperId = params.compwrapperid;
+      delete params.compwrapperid;
+    } else {
+      containerOptions.compWrapperId = 'DEFAULT';
+    }
 
     // 会话参数
     const topicOptions: IData = {};
@@ -1104,6 +1127,15 @@ export class AIChatUtil implements IApiAIChatUtil {
       chatOptions.placeholder = ibiz.config.common.aiInputPlaceholder;
     }
 
+    // AI会话消息分页数量
+    if (params.hasOwnProperty('srfaichatmessagepagesize')) {
+      chatOptions.chatMessagePageSize = Number(params.srfaichatmessagepagesize);
+      delete params.srfaichatmessagepagesize;
+    } else {
+      chatOptions.chatMessagePageSize =
+        ibiz.config.common.aiChatMessagePageSize;
+    }
+
     // 智能体选项(由内部获取，优化打开速度)
     chatOptions.fetchAgentList = (args: IParams = {}) => {
       const { query, agentid } = args;

package/src/view-engine/mpickup-view-engine.ts

@@ -1,4 +1,3 @@
-import { RuntimeModelError } from '@ibiz-template/core';
 import {
   ViewController,
   SysUIActionTag,
@@ -6,7 +5,9 @@ import {
   IMPickupViewState,
   IMPickupViewEvent,
   IApiMPickupViewCall,
+  getControlsByView,
 } from '@ibiz-template/runtime';
+import { PanelSimpleListController } from '@ibiz-template/vue3-util';
 import { IAppDEPickupView } from '@ibiz/model-core';
 import { PickupViewEngine } from './pickup-view.engine';
 
@@ -41,8 +42,12 @@ export class MPickupViewEngine extends PickupViewEngine {
    * @readonly
    * @memberof MPickupViewEngine
    */
-  get simpleList(): IListController {
-    return this.view.getController('simplelist') as IListController;
+  get simpleList(): IListController | PanelSimpleListController {
+    const list = this.view.getController('simplelist') as IListController;
+    if (list) {
+      return list;
+    }
+    return this.view.layoutPanel?.panelItems.simplelist;
   }
 
   /**
@@ -55,24 +60,25 @@ export class MPickupViewEngine extends PickupViewEngine {
    */
   async onCreated(): Promise<void> {
     await super.onCreated();
-    if (!this.view.providers.simplelist) {
-      throw new RuntimeModelError(
-        this.view.model,
-        ibiz.i18n.t('viewEngine.missingConfigErr'),
-      );
-    }
 
-    const { childNames } = this.view;
-    childNames.push('simplelist');
-    if (!this.view.slotProps.simplelist) {
-      this.view.slotProps.simplelist = {};
+    // 存在simplelist部件，设置列表部件参数
+    const controls = getControlsByView(this.view.model);
+    const simpleListControl = controls.find(
+      control => control.name === 'simplelist',
+    );
+    if (simpleListControl) {
+      const { childNames } = this.view;
+      childNames.push('simplelist');
+      if (!this.view.slotProps.simplelist) {
+        this.view.slotProps.simplelist = {};
+      }
+      this.view.slotProps.simplelist.mdctrlActiveMode = 2;
+      this.view.slotProps.simplelist.isSimple = true;
+      this.view.slotProps.simplelist.singleSelect = false;
     }
     if (!this.view.slotProps.pickupviewpanel) {
       this.view.slotProps.pickupviewpanel = {};
     }
-    this.view.slotProps.simplelist.mdctrlActiveMode = 2;
-    this.view.slotProps.simplelist.isSimple = true;
-    this.view.slotProps.simplelist.singleSelect = false;
     this.view.slotProps.pickupviewpanel.singleSelect = false;
     if (this.view.params.checkstrictly) {
       this.checkStrictly =