@ibiz-template/vue3-components 0.7.41-alpha.122 → 0.7.41-alpha.124

package/lib/control/tree-grid/tree-grid.cjs

@@ -112,6 +112,32 @@ const TreeGridControl = /* @__PURE__ */ vue.defineComponent({
       semanticClass,
       semanticStyle
     } = vue3Util.useSemanticNode(c);
+    const childClass = [{
+      class: semanticClass("body.row"),
+      selector: ".el-table__row"
+    }, {
+      class: semanticClass("header.row"),
+      selector: ".el-table__header tr"
+    }, {
+      class: semanticClass("body.cell"),
+      selector: ".el-table__body .el-table__cell"
+    }, {
+      class: semanticClass("header.cell"),
+      selector: ".el-table__header .el-table__cell"
+    }];
+    const childStyle = [{
+      class: semanticStyle("body.row"),
+      selector: ".el-table__row"
+    }, {
+      class: semanticStyle("header.row"),
+      selector: ".el-table__header tr"
+    }, {
+      class: semanticStyle("body.cell"),
+      selector: ".el-table__body .el-table__cell"
+    }, {
+      class: semanticStyle("header.cell"),
+      selector: ".el-table__header .el-table__cell"
+    }];
     const {
       tableRef,
       onRowClick,
@@ -283,6 +309,8 @@ const TreeGridControl = /* @__PURE__ */ vue.defineComponent({
       semanticClass,
       semanticStyle,
       pageSemantic,
+      childClass,
+      childStyle,
       loadData,
       onRowClick,
       renderColumn,
@@ -317,7 +345,7 @@ const TreeGridControl = /* @__PURE__ */ vue.defineComponent({
       }, {
         default: () => {
           var _a;
-          return [this.c.state.isLoaded && vue.createVNode(vue.resolveComponent("el-table"), vue.mergeProps({
+          return [this.c.state.isLoaded && vue.withDirectives(vue.createVNode(vue.resolveComponent("el-table"), vue.mergeProps({
             "lazy": true,
             "border": true,
             "ref": "tableRef",
@@ -338,32 +366,8 @@ const TreeGridControl = /* @__PURE__ */ vue.defineComponent({
             "onSelectionChange": this.onSelectionChange,
             "highlight-current-row": state.singleSelect,
             "onExpandChange": (row, expanded) => this.c.expandChange(row, expanded),
-            "row-class-name": (event) => {
-              return [this.handleRowClassName(event), this.semanticClass("body.row", {
-                event
-              })].join(" ");
-            },
-            "header-row-class-name": (...args) => this.semanticClass("header.row", {
-              args
-            }),
-            "row-style": (...args) => this.semanticStyle("body.row", {
-              args
-            }),
-            "header-row-style": (...args) => this.semanticStyle("header.row", {
-              args
-            }),
-            "cell-class-name": (...args) => this.semanticClass("body.cell", {
-              args
-            }),
-            "header-cell-class-name": (data) => {
-              return [this.handleHeaderCellClassName(data), this.semanticClass("header.cell", {
-                event: data
-              })].join(" ");
-            },
-            "cell-style": (...args) => this.semanticStyle("body.cell", {
-              args
-            }),
-            "header-cell-style": this.semanticStyle("header.cell"),
+            "row-class-name": this.handleRowClassName,
+            "header-cell-class-name": this.handleHeaderCellClassName,
             "tree-props": {
               children: "children",
               hasChildren: "hasChildren"
@@ -387,7 +391,7 @@ const TreeGridControl = /* @__PURE__ */ vue.defineComponent({
             append: () => {
               return this.renderPopover();
             }
-          }), enablePagingBar && vue.createVNode(vue.resolveComponent("iBizPagination"), {
+          }), [[vue.resolveDirective("child-class"), this.childClass], [vue.resolveDirective("child-style"), this.childStyle]]), enablePagingBar && vue.createVNode(vue.resolveComponent("iBizPagination"), {
             "class": this.semanticClass("pagination"),
             "style": this.semanticStyle("pagination"),
             "semantic": this.pageSemantic,

package/lib/control/tree-grid-ex/tree-grid-ex.cjs

@@ -63,6 +63,32 @@ const TreeGridExControl = /* @__PURE__ */ vue.defineComponent({
       semanticClass,
       semanticStyle
     } = vue3Util.useSemanticNode(c);
+    const childClass = [{
+      class: semanticClass("body.row"),
+      selector: ".el-table__row"
+    }, {
+      class: semanticClass("header.row"),
+      selector: ".el-table__header tr"
+    }, {
+      class: semanticClass("body.cell"),
+      selector: ".el-table__body .el-table__cell"
+    }, {
+      class: semanticClass("header.cell"),
+      selector: ".el-table__header .el-table__cell"
+    }];
+    const childStyle = [{
+      class: semanticStyle("body.row"),
+      selector: ".el-table__row"
+    }, {
+      class: semanticStyle("header.row"),
+      selector: ".el-table__header tr"
+    }, {
+      class: semanticStyle("body.cell"),
+      selector: ".el-table__body .el-table__cell"
+    }, {
+      class: semanticStyle("header.cell"),
+      selector: ".el-table__header .el-table__cell"
+    }];
     const renderNoData = () => {
       const {
         isLoaded
@@ -215,6 +241,8 @@ const TreeGridExControl = /* @__PURE__ */ vue.defineComponent({
       tableRefreshKey,
       semanticClass,
       semanticStyle,
+      childClass,
+      childStyle,
       loadData,
       onRowClick,
       renderNoData,
@@ -295,7 +323,7 @@ const TreeGridExControl = /* @__PURE__ */ vue.defineComponent({
         "class": [this.ns.b(), this.semanticClass("root")],
         "style": this.semanticStyle("root")
       }, {
-        default: () => [this.c.state.isLoaded && vue.createVNode(vue.resolveComponent("el-table"), vue.mergeProps({
+        default: () => [this.c.state.isLoaded && vue.withDirectives(vue.createVNode(vue.resolveComponent("el-table"), vue.mergeProps({
           "ref": "tableRef",
           "key": this.tableRefreshKey,
           "class": [this.ns.e("table"), this.semanticClass("content")],
@@ -310,30 +338,7 @@ const TreeGridExControl = /* @__PURE__ */ vue.defineComponent({
           "lazy": true,
           "onRowClick": this.onRowClick,
           "onExpandChange": this.onExpandChange,
-          "row-class-name": (event) => {
-            return [this.handleRowClassName(event), this.semanticClass("body.row", {
-              event
-            })].join(" ");
-          },
-          "header-row-class-name": (...args) => this.semanticClass("header.row", {
-            args
-          }),
-          "row-style": (...args) => this.semanticStyle("body.row", {
-            args
-          }),
-          "header-row-style": (...args) => this.semanticStyle("header.row", {
-            args
-          }),
-          "cell-class-name": (...args) => this.semanticClass("body.cell", {
-            args
-          }),
-          "header-cell-class-name": (...args) => this.semanticClass("header.cell", {
-            args
-          }),
-          "cell-style": (...args) => this.semanticStyle("body.cell", {
-            args
-          }),
-          "header-cell-style": this.semanticStyle("header.cell"),
+          "row-class-name": this.handleRowClassName,
           "load": this.loadData
         }, renderAttrs(this.c.model, {
           ...this.c.getEventArgs()
@@ -347,7 +352,7 @@ const TreeGridExControl = /* @__PURE__ */ vue.defineComponent({
           append: () => {
             return this.renderPopover();
           }
-        })]
+        }), [[vue.resolveDirective("child-class"), this.childClass], [vue.resolveDirective("child-style"), this.childStyle]])]
       })]
     });
   }

package/lib/editor/autocomplete/autocomplete-editor.controller.cjs

@@ -90,9 +90,8 @@ class AutoCompleteEditorController extends runtime.EditorController {
               }
             );
           }
-          if (this.deACMode.itemSysPFPluginId) {
+          if (this.deACMode)
             this.acItemProvider = await runtime.getAcItemProvider(this.deACMode);
-          }
         }
       }
     }

package/lib/editor/data-picker/picker-editor.controller.cjs

@@ -188,9 +188,8 @@ class PickerEditorController extends runtime.EditorController {
               }
             );
           }
-          if (this.deACMode.itemSysPFPluginId) {
+          if (this.deACMode)
             this.acItemProvider = await runtime.getAcItemProvider(this.deACMode);
-          }
         }
       }
     }

package/lib/editor/list-box/list-box-picker-editor.controller.cjs

@@ -66,11 +66,8 @@ class ListBoxPickerEditorController extends runtime.EditorController {
           this.model.appDataEntityId,
           this.context.srfappid
         );
-        if (this.deACMode) {
-          if (this.deACMode.itemSysPFPluginId) {
-            this.acItemProvider = await runtime.getAcItemProvider(this.deACMode);
-          }
-        }
+        if (this.deACMode)
+          this.acItemProvider = await runtime.getAcItemProvider(this.deACMode);
       }
     }
   }

package/lib/editor/map-picker/map-picker-editor.controller.cjs

@@ -24,7 +24,7 @@ class MapPickerEditorController extends runtime.EditorController {
      * @type {string}
      * @memberof MapPickerEditorController
      */
-    __publicField(this, "markerIcon", "".concat(ibiz.env.assetsUrl, "/images/poi-marker-default.png"));
+    __publicField(this, "markerIcon", ibiz.config.imageAssets.poiMarker);
     /**
      * @description 默认中心点坐标
      * @memberof MapPickerEditorController

package/lib/editor/text-box/input/input.cjs

@@ -410,7 +410,7 @@ const IBizInput = /* @__PURE__ */ vue.defineComponent({
       "title": ibiz.i18n.t("editor.textBox.openAiChat"),
       "onClick": this.onClick
     }, [vue.createVNode("ion-icon", {
-      "src": "./assets/images/svg/chat.svg"
+      "src": ibiz.config.imageAssets.chat
     }, null)]) : null]);
   }
 });

package/lib/panel-component/auth-userinfo/auth-userinfo.cjs

@@ -92,7 +92,7 @@ const AuthUserinfo = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createVNode(vue.resolveComponent("el-avatar"), {
         "class": [this.ns.b("avatar"), this.semanticClass("avatar")],
         "style": this.semanticStyle("avatar"),
-        "src": "./assets/images/user-avatar.png"
+        "src": ibiz.config.imageAssets.userAvatar
       }, null), vue.createVNode("div", {
         "class": [this.ns.b("name"), this.ns.is("collapse", this.isCollapse), this.semanticClass("name")],
         "style": this.semanticStyle("name")

package/lib/panel-component/global-search/global-search.controller.cjs

@@ -181,10 +181,7 @@ class GlobalSearchController extends runtime.PanelItemController {
           func.appId
         );
         if (deACMode) {
-          let acItemProvider;
-          if (deACMode.itemSysPFPluginId) {
-            acItemProvider = await runtime.getAcItemProvider(deACMode);
-          }
+          const acItemProvider = await runtime.getAcItemProvider(deACMode);
           this.state.items.push({
             deACMode,
             acItemProvider,

package/lib/panel-component/user-action/user-action.cjs

@@ -35,13 +35,13 @@ const UserAction = /* @__PURE__ */ vue.defineComponent({
     } = vue3Util.useSemanticNode(props.controller);
     const imgConfig = {
       SETTING: {
-        imagePath: "svg/setting.svg"
+        imagePath: ibiz.config.imageAssets.setting
       },
       HELPER: {
-        imagePath: "svg/helper.svg"
+        imagePath: ibiz.config.imageAssets.helper
       },
       CUSTOM: {
-        imagePath: "svg/custom-workbench.svg"
+        imagePath: ibiz.config.imageAssets.customWorkbench
       }
     };
     let sysImage = props.modelData.sysImage;

package/lib/panel-component/user-message/user-message.cjs

@@ -45,7 +45,7 @@ const UserMessage = /* @__PURE__ */ vue.defineComponent({
     noticeController.internalMessage.provider = new internalMessageDefault_provider.InternalMessageDefaultProvider();
     const currentTab = vue.ref("notification");
     const sysImage = props.modelData.sysImage || {
-      imagePath: "svg/message.svg"
+      imagePath: ibiz.config.imageAssets.message
     };
     const popoverRef = vue.ref();
     const hiddenPopover = () => {

package/lib/util/ai-chat-util/ai-chat-util.cjs

@@ -182,6 +182,11 @@ class AIChatUtil {
     } else {
       chatOptions.chunkEntity = ibiz.config.common.aiChunkEntity;
     }
+    if (editorParams.topiccaptioncomputedmode) {
+      chatOptions.captionComputedMode = editorParams.topiccaptioncomputedmode;
+    } else {
+      chatOptions.captionComputedMode = ibiz.config.common.aiChatTopicCaptionComputedMode;
+    }
     chatOptions.fetchAgentList = (query) => {
       return this.getAIAgentList(context, { ...params, query }, editorParams);
     };
@@ -769,6 +774,12 @@ class AIChatUtil {
     } else {
       chatOptions.chunkEntity = ibiz.config.common.aiChunkEntity;
     }
+    if (params.hasOwnProperty("topiccaptioncomputedmode")) {
+      chatOptions.captionComputedMode = params.topiccaptioncomputedmode;
+      delete params.topiccaptioncomputedmode;
+    } else {
+      chatOptions.captionComputedMode = ibiz.config.common.aiChatTopicCaptionComputedMode;
+    }
     chatOptions.fetchAgentList = (query) => {
       return this.getAIAgentList(context, { ...params, query });
     };

package/lib/view/403-view/403-view.cjs

@@ -31,7 +31,7 @@ const View403 = /* @__PURE__ */ vue.defineComponent({
       "class": [this.ns.b(), this.ns.is("top", this.isTop)]
     }, [vue.createVNode("img", {
       "class": this.ns.b("img"),
-      "src": "".concat(ibiz.env.assetsUrl, "/images/403.png")
+      "src": ibiz.config.imageAssets.noPermission
     }, null), vue.createVNode("div", {
       "class": this.ns.b("text")
     }, [vue.createVNode("div", {

package/lib/view/404-view/404-view.cjs

@@ -31,7 +31,7 @@ const View404 = /* @__PURE__ */ vue.defineComponent({
       "class": [this.ns.b(), this.ns.is("top", this.isTop)]
     }, [vue.createVNode("img", {
       "class": this.ns.b("img"),
-      "src": "".concat(ibiz.env.assetsUrl, "/images/404.png")
+      "src": ibiz.config.imageAssets.noFind
     }, null), vue.createVNode("div", {
       "class": this.ns.b("text")
     }, [vue.createVNode("div", {

package/lib/view/login-view/login-view.cjs

@@ -116,7 +116,6 @@ const LoginView = /* @__PURE__ */ vue.defineComponent({
           const loginViewConfig = await ibiz.hub.config.view.get("AppLoginView");
           if (loginViewConfig) {
             loginView.value = loginViewConfig;
-            hasLoginView.value = true;
           }
         } catch (err) {
           ibiz.log.warn(err);
@@ -143,14 +142,14 @@ const LoginView = /* @__PURE__ */ vue.defineComponent({
         }, [vue.createVNode("header", {
           "class": ns.b("box-header")
         }, [vue.createVNode("img", {
-          "src": "./assets/images/login-header.png"
+          "src": ibiz.config.imageAssets.loginHeader
         }, null), vue.createVNode("span", {
           "class": ns.b("box-header-title")
         }, [appTitle])]), vue.createVNode("main", {
           "class": ns.b("box-main")
         }, [vue.createVNode("img", {
           "class": ns.be("box-main", "avatar"),
-          "src": "./assets/images/login-avatar.png"
+          "src": ibiz.config.imageAssets.loginAvatar
         }, null), vue.createVNode("div", {
           "class": ns.b("box-main-content")
         }, [vue.createVNode(vue.resolveComponent("el-form"), {

package/lib/view/share-view/share-view.cjs

@@ -64,7 +64,7 @@ const ShareView = /* @__PURE__ */ vue.defineComponent({
     }, [vue.createVNode("header", {
       "class": this.ns.b("box-header")
     }, [vue.createVNode("img", {
-      "src": "./assets/images/login-header.png"
+      "src": ibiz.config.imageAssets.loginHeader
     }, null), vue.createVNode("div", {
       "class": this.ns.b("box-header-title")
     }, [vue.createVNode("div", null, [this.shareUser.userName]), ibiz.i18n.t("view.shareView.inviting")])]), vue.createVNode("main", {

package/lib/view/unauthorized-view/unauthorized-view.cjs

@@ -43,7 +43,7 @@ const UnauthorizedView = /* @__PURE__ */ vue.defineComponent({
           "class": ns.b()
         }, [vue.createVNode("img", {
           "class": ns.e("img"),
-          "src": "".concat(ibiz.env.assetsUrl, "/images/404.png")
+          "src": ibiz.config.imageAssets.noFind
         }, null), vue.createVNode("div", {
           "class": ns.e("tips")
         }, [ibiz.i18n.t("view.noResourcesView.noResourcePrompt"), vue.createVNode("br", null, null), ibiz.i18n.t("view.noResourcesView.noExistPrompt", {

package/lib/web-app/guard/auth-guard/auth-guard.cjs

@@ -270,7 +270,9 @@ class AuthGuard {
     const uiThemes = app.model.appUIThemes || [];
     if (uiThemes.length > 0) {
       const colorThemes = uiThemes.filter((uiTheme) => {
-        return uiTheme.themeParams && uiTheme.themeParams["icon-theme"] !== "true";
+        var _a;
+        const isIconTheme = ((_a = uiTheme.themeParams) == null ? void 0 : _a["icon-theme"]) === "true";
+        return !isIconTheme && Boolean(uiTheme.cssStyle || uiTheme.themeParams);
       });
       if (colorThemes.length > 0) {
         for (let index = 0; index < colorThemes.length; index++) {

package/lib/web-app/guard/auth-guard/dyna-auth-guard.cjs

@@ -11,6 +11,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+const PREDEFINED_THEMES = ["light", "dark", "blue"];
 class DynaAuthGuard extends authGuard.AuthGuard {
   constructor() {
     super(...arguments);
@@ -43,10 +44,15 @@ class DynaAuthGuard extends authGuard.AuthGuard {
       const module = await import('@ibiz-template/web-theme');
       const theme = module.default || module;
       vue3Util.AppHooks.useComponent.callSync(null, theme);
-      if (ibiz.config.theme)
+      if (ibiz.config.theme && PREDEFINED_THEMES.includes(ibiz.config.theme)) {
         ibiz.util.theme.setTheme(ibiz.config.theme);
+      }
       if (appModel.appUIThemes) {
         await this.loadTheme();
+        const themeTags = appModel.appUIThemes.map((uiTheme) => uiTheme.themeTag).filter((tag) => !!tag);
+        if (ibiz.config.theme && (PREDEFINED_THEMES.includes(ibiz.config.theme) || themeTags.includes(ibiz.config.theme))) {
+          ibiz.util.theme.setTheme(ibiz.config.theme);
+        }
       }
       if (app.model.title) {
         ibiz.util.setBrowserTitle("");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/vue3-components",
-  "version": "0.7.41-alpha.122",
+  "version": "0.7.41-alpha.124",
   "description": "web端组件库(vue3)",
   "main": "lib/index.cjs",
   "module": "es/index.mjs",
@@ -31,16 +31,16 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@floating-ui/dom": "^1.5.3",
-    "@ibiz-template-plugin/ai-chat": "^0.0.94",
+    "@ibiz-template-plugin/ai-chat": "^0.0.95",
     "@ibiz-template-plugin/gantt": "0.1.8-alpha.468",
     "@ibiz-template-plugin/bi-report": "0.0.32",
     "@ibiz-template-plugin/data-view": "0.0.8",
     "@ibiz-template/core": "0.7.41-alpha.119",
     "@ibiz-template/devtool": "0.0.16",
-    "@ibiz-template/model-helper": "0.7.41-alpha.127",
-    "@ibiz-template/runtime": "0.7.41-alpha.127",
+    "@ibiz-template/model-helper": "0.7.41-alpha.130",
+    "@ibiz-template/runtime": "0.7.41-alpha.130",
     "@ibiz-template/theme": "0.7.39",
-    "@ibiz-template/vue3-util": "0.7.41-alpha.127",
+    "@ibiz-template/vue3-util": "0.7.41-alpha.130",
     "@ibiz-template/web-theme": "3.16.0",
     "@ibiz/model-core": "^0.1.89",
     "@imengyu/vue3-context-menu": "^1.3.5",

package/src/common/data-import/data-import.tsx

@@ -171,7 +171,7 @@ export const DataImport = defineComponent({
           <div class={this.ns.b('upload')} onClick={this.selectFile}>
             <img
               class={this.ns.be('upload', 'img')}
-              src='./assets/images/icon-import.svg'
+              src={ibiz.config.imageAssets.iconImport}
             ></img>
             <span class={this.ns.be('upload', 'text')}>
               {ibiz.i18n.t('component.dataImport.clickToUpload')}

package/src/control/chart/chart.tsx

@@ -76,6 +76,46 @@ const ChartControl = defineComponent({
     const drillDetailRef = ref(); // 数据反查框
     let tempParams: IData; // 点击的图表回调事件参数
 
+    // 子类类名透传
+    const childClass = [
+      {
+        class: `${ns.em('grid', 'body-row')} ${semanticClass('table.body.row')}`,
+        selector: '.el-table__row',
+      },
+      {
+        class: `${ns.em('grid', 'header-row')} ${semanticClass('table.header.row')}`,
+        selector: '.el-table__header tr',
+      },
+      {
+        class: `${ns.em('grid', 'body-cell')} ${semanticClass('table.body.cell')}`,
+        selector: '.el-table__body .el-table__cell',
+      },
+      {
+        class: `${ns.em('grid', 'header-cell')} ${semanticClass('table.header.cell')}`,
+        selector: '.el-table__header .el-table__cell',
+      },
+    ];
+
+    // 子类样式透传
+    const childStyle = [
+      {
+        class: semanticStyle('table.body.row'),
+        selector: '.el-table__row',
+      },
+      {
+        class: semanticStyle('table.header.row'),
+        selector: '.el-table__header tr',
+      },
+      {
+        class: semanticStyle('table.body.cell'),
+        selector: '.el-table__body .el-table__cell',
+      },
+      {
+        class: semanticStyle('table.header.cell'),
+        selector: '.el-table__header .el-table__cell',
+      },
+    ];
+
     // 本地数据模式
     const initSimpleData = (): void => {
       if (!props.data) {
@@ -248,42 +288,8 @@ const ChartControl = defineComponent({
           style={{ width: '100%' }}
           max-height={maxHeight.value}
           span-method={c.spanMethod.bind(c)}
-          header-row-style={(...args: IData[]) =>
-            semanticStyle('table.header.row', args)
-          }
-          header-row-class-name={(...args: IData[]) => {
-            return [
-              ns.em('grid', 'header-row'),
-              semanticClass('table.header.row', args),
-            ].join(' ');
-          }}
-          header-cell-style={(...args: IData[]) =>
-            semanticStyle('table.header.cell', args)
-          }
-          header-cell-class-name={(...args: IData[]) => {
-            return [
-              ns.em('grid', 'header-cell'),
-              semanticClass('table.header.cell', args),
-            ].join(' ');
-          }}
-          row-style={(...args: IData[]) =>
-            semanticStyle('table.body.row', args)
-          }
-          row-class-name={(...args: IData[]) => {
-            return [
-              ns.em('grid', 'body-row'),
-              semanticClass('table.body.row', args),
-            ].join(' ');
-          }}
-          cell-style={(...args: IData[]) =>
-            semanticStyle('table.body.cell', args)
-          }
-          cell-class-name={(...args: IData[]) => {
-            return [
-              ns.em('grid', 'body-cell'),
-              semanticClass('table.body.cell', args),
-            ].join(' ');
-          }}
+          v-child-class={childClass}
+          v-child-style={childStyle}
         >
           {c.state.gridHeaders.map((column: IData) => {
             return (

package/src/control/data-view/data-view.tsx

@@ -30,10 +30,12 @@ import {
   IControlProvider,
   IMDControlGroupState,
   DataViewControlController,
+  getMDCtrlItemProvider,
 } from '@ibiz-template/runtime';
 import { createUUID } from 'qx-util';
 import draggable from 'vuedraggable';
 import { usePagination } from '../../util';
+import { useDataViewSkeleton } from './data-view.util';
 import './data-view.scss';
 
 export const DataViewControl = defineComponent({
@@ -353,6 +355,17 @@ export const DataViewControl = defineComponent({
 
     // 绘制卡片
     const renderCard = (item: IData): VNode => {
+      // 多数据部件项绘制器
+      const provider = getMDCtrlItemProvider(c.model);
+      if (provider)
+        return h(resolveComponent(provider.component), {
+          data: item,
+          controller: c,
+          onClick: (event: MouseEvent): Promise<void> =>
+            onRowClick(item, event),
+          onDblclick: (event: MouseEvent): Promise<void> =>
+            onDbRowClick(item, event),
+        });
       const itemStyle = ns.cssVarBlock({
         'item-bg-color': `${item.bgcolor || ''}`,
         'text-color': `${item.fontcolor || ''}`,
@@ -781,6 +794,12 @@ export const DataViewControl = defineComponent({
 
     // 单行高度
     const ITEM_HEIGHT: number = 24;
+
+    // 骨架屏：按容器宽度计算单行最大卡片数
+    const { setSkeletonContentRef, calcSkeletonCount } = useDataViewSkeleton({
+      model: c.model,
+    });
+
     // 计算骨架屏行数
     const calcSkeletonRows = (): number => {
       const { cardHeight } = c.model;
@@ -850,25 +869,23 @@ export const DataViewControl = defineComponent({
     // 绘制分组骨架屏
     const renderGroupSkeleton = (): VNode => {
       return (
-        <div class={ns.b('skeleton')}>
+        <div class={[ns.e('content'), ns.b('group-content')]}>
           {Array.from({ length: 3 }, () => (
-            <div class={ns.b('skeleton-group')}>
-              <div class={ns.be('skeleton-group', 'header')}>
+            <div class={ns.be('group-content', 'item')}>
+              <div class={ns.be('group-content', 'item-header')}>
                 <el-skeleton animated rows={1}>
                   {{
                     template: () => (
-                      <el-skeleton-item variant='rect' style='width: 15%' />
+                      <el-skeleton-item
+                        variant='rect'
+                        style='width: 15%;height: 24px;'
+                      />
                     ),
                   }}
                 </el-skeleton>
               </div>
-              <div
-                class={[
-                  ns.be('skeleton', 'content'),
-                  ns.be('skeleton-group', 'content'),
-                ]}
-              >
-                {renderSkeletonCardLayout(3)}
+              <div ref={setSkeletonContentRef}>
+                {renderSkeletonCardLayout(calcSkeletonCount(3))}
               </div>
             </div>
           ))}
@@ -881,10 +898,10 @@ export const DataViewControl = defineComponent({
       if (c.state.enableGroup) {
         return renderGroupSkeleton();
       }
-      const count = c.state.size || 6;
+      const count = c.state.size || calcSkeletonCount(6);
       return (
-        <div class={ns.b('skeleton')}>
-          <div class={ns.be('skeleton', 'content')}>
+        <div class={ns.e('content')}>
+          <div ref={setSkeletonContentRef}>
             {renderSkeletonCardLayout(Math.min(count, 20))}
           </div>
         </div>
@@ -996,7 +1013,7 @@ export const DataViewControl = defineComponent({
       const provider = c.view.providers[id];
       return h(resolveComponent(provider?.component || 'IBizControlShell'), {
         class: [ns.e('searchbar'), semanticClass('searchbar')],
-        style: semanticStyle(searchbar),
+        style: semanticStyle('searchbar'),
         context: c.view.context,
         params: c.view.params,
         modelData: searchbar,