+
+ );
+ },
+});
diff --git a/packages/view-design/src/components/view-design-structure-tree/view-design-structure-tree.scss b/packages/view-design/src/components/view-design-structure-tree/view-design-structure-tree.scss
new file mode 100644
index 0000000000000000000000000000000000000000..02e0dd6d1e7b113d691db2f7e9442e985d3a19c9
--- /dev/null
+++ b/packages/view-design/src/components/view-design-structure-tree/view-design-structure-tree.scss
@@ -0,0 +1,35 @@
+/* stylelint-disable selector-class-pattern */
+@include b(view-design-structure-tree) {
+ width: 100%;
+ height: 100%;
+ background: rgba(var(#{getCssVarName(grey, 0)}), 1);
+}
+
+@include b(view-design-structure-tree-search) {
+ padding: 2px 10px 2px 0;
+ margin-left: 8px;
+
+ > .el-input {
+ --el-input-height: 26px;
+
+ .el-input__inner::placeholder {
+ font-size: 12px;
+ }
+ }
+}
+
+@include b(view-design-structure-tree-header) {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 12px 0 28px;
+ font-size: 12px;
+ line-height: 28px;
+
+ @include e(action) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ }
+}
diff --git a/packages/view-design/src/components/view-design-structure-tree/view-design-structure-tree.tsx b/packages/view-design/src/components/view-design-structure-tree/view-design-structure-tree.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e3e70bb1a70c063cfd4edfaab163bb5771300a10
--- /dev/null
+++ b/packages/view-design/src/components/view-design-structure-tree/view-design-structure-tree.tsx
@@ -0,0 +1,87 @@
+import { defineComponent, ref } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './view-design-structure-tree.scss';
+
+export default defineComponent({
+ name: 'IBizViewDesignStructureTree',
+ setup() {
+ const ns = useNamespace('view-design-structure-tree');
+
+ // 搜索值
+ const searchValue = ref('');
+
+ return {
+ ns,
+ searchValue,
+ };
+ },
+ render() {
+ return (
+
+
+
+
+ this.expand()}
+ >
+
+
+ this.collapse()}
+ >
+
+
+ (this.isShowSearch = true)}
+ >
+
+
+
+ {{
+ prefix: () => {
+ return
+
+
+
+ {this.groups.map(group => {
+ if (!this.activeGroups.includes(group.codeName!)) {
+ return;
+ }
+ return (
+
+ {{
+ title: () => {
+ return (
+
+ );
+ })}
+
+
+
+ {group.caption}
+
+ );
+ },
+ default: () => {
+ return group.deformDetails?.map(item => {
+ if (this.searchValue) {
+ const regExp = this.searchValue.trim().toLowerCase();
+ const text = item.caption?.toLowerCase();
+ if (text && text.indexOf(regExp) === -1) {
+ return;
+ }
+ }
+ return (
+
+
+ );
+ });
+ },
+ }}
+
+
+
+ {this.renderIcon(item.sysImage?.imagePath)}
+
+
+ {item.caption || ''}
+
+
+
+ );
+ },
+});
diff --git a/packages/view-design/src/global.ts b/packages/view-design/src/global.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0fa10431b9670ddb5003e3e2fafbf06ce1dfd368
--- /dev/null
+++ b/packages/view-design/src/global.ts
@@ -0,0 +1,7 @@
+// 文件路径: [插件项目的根目录]/src/global.ts
+
+import { PluginStaticResource } from '@ibiz-template/runtime';
+
+const resource = new PluginStaticResource(import.meta.url);
+
+export { resource };
diff --git a/packages/view-design/src/index.ts b/packages/view-design/src/index.ts
index b17714e6dce268bfc55bd5ae098115ddabdba84a..a35de14952cc3d530f28b20c54751850f5ad9f76 100644
--- a/packages/view-design/src/index.ts
+++ b/packages/view-design/src/index.ts
@@ -3,10 +3,14 @@
import { App } from 'vue';
import Views from './views';
import Services from './service';
+import PanelItems from './panel-items';
+import Components from './components';
export default {
install(app: App) {
app.use(Views);
app.use(Services);
+ app.use(PanelItems);
+ app.use(Components);
},
};
diff --git a/packages/view-design/src/panel-items/index.ts b/packages/view-design/src/panel-items/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bd679f7c165d9d98dd4d565acb4a3925590fe61a
--- /dev/null
+++ b/packages/view-design/src/panel-items/index.ts
@@ -0,0 +1,10 @@
+import { App } from 'vue';
+import ViewDesignMaterialTree from './view-design-material-tree';
+import ViewDesignMaterialTab from './view-design-material-tab';
+
+export default {
+ install(app: App): void {
+ app.use(ViewDesignMaterialTree);
+ app.use(ViewDesignMaterialTab);
+ },
+};
diff --git a/packages/view-design/src/panel-items/view-design-material-tab/index.ts b/packages/view-design/src/panel-items/view-design-material-tab/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a02be406e0a834ba669b56506f8035a68b9f0e85
--- /dev/null
+++ b/packages/view-design/src/panel-items/view-design-material-tab/index.ts
@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import ViewDesignMaterialTab from './view-design-material-tab';
+import { ViewDesignMaterialTabProvider } from './view-design-material-tab.provider';
+
+export default {
+ install(app: App) {
+ // 注册组件
+ app.component('IBizViewDesignMaterialTab', ViewDesignMaterialTab);
+ registerPanelItemProvider(
+ 'RAWITEM_VIEW_DESIGN_MATERIAL_TAB',
+ () => new ViewDesignMaterialTabProvider(),
+ );
+ },
+};
diff --git a/packages/view-design/src/panel-items/view-design-material-tab/view-design-material-tab.controller.ts b/packages/view-design/src/panel-items/view-design-material-tab/view-design-material-tab.controller.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bc3da886c8daa9e73a59b2d623549e7363523fb8
--- /dev/null
+++ b/packages/view-design/src/panel-items/view-design-material-tab/view-design-material-tab.controller.ts
@@ -0,0 +1,174 @@
+import {
+ PanelItemController,
+ calcLayoutHeightWidth,
+ getControl,
+} from '@ibiz-template/runtime';
+import {
+ IDEEditForm,
+ IDEFormGroupPanel,
+ IDEFormPage,
+ IDEFormTabPanel,
+} from '@ibiz/model-core';
+import { ViewDesignMaterialTabState } from './view-design-material-tab.state';
+import { ViewDesignMaterialTreeController } from '../view-design-material-tree/view-design-material-tree.controller';
+
+export class ViewDesignMaterialTabController extends PanelItemController {
+ declare state: ViewDesignMaterialTabState;
+
+ protected createState(): ViewDesignMaterialTabState {
+ return new ViewDesignMaterialTabState(this.parent?.state);
+ }
+
+ get materialForm(): IDEEditForm {
+ return getControl(this.panel.view.model, 'material') as IDEEditForm;
+ }
+
+ get viewDesignMaterialTree(): ViewDesignMaterialTreeController | undefined {
+ return this.panel.panelItems
+ .view_design_material_tree as ViewDesignMaterialTreeController;
+ }
+
+ protected async onInit(): Promise
+
+ {{
+ prefix: () => {
+ return
+
+
+
+ 布局结构
+
+
+
+
+
+
+ this.controller.onSelect(value)}
+ >
+ {this.controller.state.pageItems.map(page => {
+ if (page.id === 'controls') {
+ return (
+ {
+ this.controller.onSelect('$multiple');
+ const result = this.controller.state.menuItems.every(item =>
+ this.controller.state.activeItems.includes(item.id),
+ );
+ if (!result) {
+ this.controller.onSelect('$all');
+ }
+ }}
+ >
+ {{
+ title: () => {
+ return (
+
+ {{
+ title: () => {
+ return (
+
+ );
+ },
+ default: () => {
+ return [
+
+
+
+ ,
+
+
+
+ ,
+ ];
+ },
+ }}
+ ,
+
+ this.controller.state.activeItems.includes(
+ item.id,
+ ),
+ ) && this.ns.bm('menu-item', 'active'),
+ ]}
+ >
+
+
+ ,
+ this.controller.state.menuItems.map(item => {
+ return (
+
+
+
+
+ );
+ }),
+
+
+
+ ,
+ ];
+ },
+ }}
+
+ );
+ }
+
+ return (
+
+
+ );
+ })}
+
+
+ );
+ },
+});
diff --git a/packages/view-design/src/panel-items/view-design-material-tree/index.ts b/packages/view-design/src/panel-items/view-design-material-tree/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..002c2a8fbcbee1e4331d4441da5aeee452b04507
--- /dev/null
+++ b/packages/view-design/src/panel-items/view-design-material-tree/index.ts
@@ -0,0 +1,15 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import ViewDesignMaterialTree from './view-design-material-tree';
+import { ViewDesignMaterialTreeProvider } from './view-design-material-tree.provider';
+
+export default {
+ install(app: App): void {
+ // 注册组件
+ app.component('IBizViewDesignMaterialTree', ViewDesignMaterialTree);
+ registerPanelItemProvider(
+ 'RAWITEM_VIEW_DESIGN_MATERIAL_TREE',
+ () => new ViewDesignMaterialTreeProvider(),
+ );
+ },
+};
diff --git a/packages/view-design/src/panel-items/view-design-material-tree/view-design-material-tree.controller.state.ts b/packages/view-design/src/panel-items/view-design-material-tree/view-design-material-tree.controller.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..61973f5a8719011e25103e5f519c157a7974a45d
--- /dev/null
+++ b/packages/view-design/src/panel-items/view-design-material-tree/view-design-material-tree.controller.state.ts
@@ -0,0 +1,30 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+
+export class ViewDesignMaterialTreeState extends PanelItemState {
+ /**
+ * 布局模式
+ *
+ * @author zhanghengfeng
+ * @date 2024-09-25 20:09:52
+ * @type {('multiple' | 'single')}
+ */
+ columnMode: 'multiple' | 'single' = 'multiple';
+
+ /**
+ * 激活分组
+ *
+ * @author zhanghengfeng
+ * @date 2024-09-25 20:09:02
+ * @type {string[]}
+ */
+ activeGroups: string[] = [];
+
+ /**
+ * 激活分页
+ *
+ * @author zhanghengfeng
+ * @date 2024-09-25 20:09:15
+ * @type {string}
+ */
+ activePage: string = '';
+}
diff --git a/packages/view-design/src/panel-items/view-design-material-tree/view-design-material-tree.controller.ts b/packages/view-design/src/panel-items/view-design-material-tree/view-design-material-tree.controller.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e748fde8f0d9795049f944b9e8e85618cd70327b
--- /dev/null
+++ b/packages/view-design/src/panel-items/view-design-material-tree/view-design-material-tree.controller.ts
@@ -0,0 +1,73 @@
+import { PanelItemController, getControl } from '@ibiz-template/runtime';
+import {
+ IDEEditForm,
+ IDEFormGroupPanel,
+ IDEFormPage,
+ IDEFormTabPanel,
+} from '@ibiz/model-core';
+import { clone } from 'ramda';
+import { ViewDesignMaterialTreeState } from './view-design-material-tree.controller.state';
+
+export class ViewDesignMaterialTreeController extends PanelItemController {
+ declare state: ViewDesignMaterialTreeState;
+
+ protected createState(): ViewDesignMaterialTreeState {
+ return new ViewDesignMaterialTreeState(this.parent?.state);
+ }
+
+ get materialForm(): IDEEditForm {
+ return getControl(this.panel.view.model, 'material') as IDEEditForm;
+ }
+
+ /**
+ * 素材分组
+ *
+ * @author zhanghengfeng
+ * @date 2024-09-25 20:09:44
+ * @type {IDEFormGroupPanel[]}
+ */
+ materialGroups: IDEFormGroupPanel[] = [];
+
+ protected async onInit(): Promise
+
+ );
+ },
+ default: () => {
+ return [
+
+ })
+
+
+
+ {renderSelectIcon()}
+
+
+ {renderSelectIcon()}
+
+
+
+
+ {page.text}
+
+
+ {{
+ top: () => {
+ return (
+
+
+ );
+ }
+ return (
+
+
+ );
+ },
+ }}
+
+ {this.controller.panel.view?.state?.caption || ''}
+
+
+
+ );
+ },
+});