zhujiamin 发布系统代码 [TrainSys，网页端]

app_Web/package.json

@@ -13,13 +13,13 @@
   "dependencies": {
     "@floating-ui/dom": "^1.0.11",
     "@ibiz-template/command": "^0.0.1-beta.50",
-    "@ibiz-template/controller": "^0.0.1-beta.103",
-    "@ibiz-template/core": "^0.0.1-beta.103",
-    "@ibiz-template/model": "^0.0.1-beta.103",
-    "@ibiz-template/runtime": "^0.0.1-beta.103",
-    "@ibiz-template/service": "^0.0.1-beta.103",
-    "@ibiz-template/theme": "^0.0.1-beta.103",
-    "@ibiz-template/vue-util": "^0.0.1-beta.103",
+    "@ibiz-template/controller": "^0.0.1-beta.104",
+    "@ibiz-template/core": "^0.0.1-beta.104",
+    "@ibiz-template/model": "^0.0.1-beta.104",
+    "@ibiz-template/runtime": "^0.0.1-beta.104",
+    "@ibiz-template/service": "^0.0.1-beta.104",
+    "@ibiz-template/theme": "^0.0.1-beta.104",
+    "@ibiz-template/vue-util": "^0.0.1-beta.104",
     "@ibiz/dynamic-model-api": "^2.1.24",
     "@riophae/vue-treeselect": "^0.4.0",
     "dayjs": "^1.11.7",

app_Web/src/components/layout/app-layout/app-layout.tsx

@@ -6,11 +6,18 @@ import '@ibiz-template/theme/style/components/layout/app-layout/app-layout.scss'
 
 function renderLogo(ns: Namespace, model: IndexViewModel) {
   return (
-    <div class={ns.e('logo')}>
+    <div class={[ns.e('logo'), model.source?.mainMenuAlign?.toLowerCase()]}>
       {model.appIconPath ? (
         <img class={ns.e('logo-img')} src={model.appIconPath}></img>
       ) : null}
-      <div class={ns.e('logo-caption')}>{model.caption}</div>
+      <div
+        class={[
+          ns.e('logo-caption'),
+          model.source?.mainMenuAlign?.toLowerCase(),
+        ]}
+      >
+        {model.caption}
+      </div>
     </div>
   );
 }
@@ -58,52 +65,76 @@ export const AppLayout = defineComponent({
           this.ns.is('tab', this.isShowTabPageExp),
         ]}
       >
-        <i-sider
-          hide-trigger
-          class={[
-            this.ns.b('nav'),
-            this.ns.is('collapse', this.collapseChange),
-          ]}
-          value={this.collapseChange}
-        >
-          {renderLogo(this.ns, this.model)}
-          {this.$slots.menu}
-        </i-sider>
-        <i-layout class={[this.ns.b('content')]}>
-          <i-header class={this.ns.b('header')}>
-            <div class={this.ns.be('header', 'left')}>
-              {renderLogo(this.ns, this.model)}
-              <div class={this.ns.be('header', 'collapse-icon')}>
-                {!this.collapseChange ? (
-                  <ion-icon
-                    src={'./assets/img/menu-fold.svg'}
-                    on-click={() => this.collapseMenus()}
-                  />
-                ) : (
-                  <ion-icon
-                    src={'./assets/img/menu-unfold.svg'}
-                    on-click={() => this.collapseMenus()}
-                  />
-                )}
+        {this.model.source.mainMenuAlign === 'CENTER' && this.$slots.menu}
+        {this.model.source.mainMenuAlign !== 'CENTER' && (
+          <i-sider
+            hide-trigger
+            class={[
+              this.ns.b('nav'),
+              this.ns.is('collapse', this.collapseChange),
+              this.model.source?.mainMenuAlign?.toLowerCase(),
+            ]}
+            value={this.collapseChange}
+          >
+            {renderLogo(this.ns, this.model)}
+            {this.$slots.menu}
+          </i-sider>
+        )}
+        {this.model.source.mainMenuAlign === 'CENTER' && (
+          <i-layout class={[this.ns.b('content')]}>
+            <i-header
+              class={[
+                this.ns.b('header'),
+                this.model.source?.mainMenuAlign?.toLowerCase(),
+              ]}
+            >
+              <div class={this.ns.be('header', 'left')}>
+                {renderLogo(this.ns, this.model)}
+              </div>
+            </i-header>
+            <i-content class={this.ns.be('content', 'main')}>
+              {this.$slots.tabPageExp}
+              {this.$slots.default}
+            </i-content>
+          </i-layout>
+        )}
+        {this.model.source.mainMenuAlign !== 'CENTER' && (
+          <i-layout class={[this.ns.b('content')]}>
+            <i-header class={this.ns.b('header')}>
+              <div class={this.ns.be('header', 'left')}>
+                {renderLogo(this.ns, this.model)}
+                <div class={this.ns.be('header', 'collapse-icon')}>
+                  {!this.collapseChange ? (
+                    <ion-icon
+                      src={'./assets/img/menu-fold.svg'}
+                      on-click={() => this.collapseMenus()}
+                    />
+                  ) : (
+                    <ion-icon
+                      src={'./assets/img/menu-unfold.svg'}
+                      on-click={() => this.collapseMenus()}
+                    />
+                  )}
+                </div>
+                {this.model.source.mainMenuAlign === 'TOP' ? (
+                  <i-menu
+                    class={this.ns.be('header', 'menu')}
+                    mode='horizontal'
+                    active-name='1'
+                  ></i-menu>
+                ) : null}
+              </div>
+              <div class={this.ns.be('header', 'right')}>
+                <app-user />
               </div>
-              {this.model.source.mainMenuAlign === 'TOP' ? (
-                <i-menu
-                  class={this.ns.be('header', 'menu')}
-                  mode='horizontal'
-                  active-name='1'
-                ></i-menu>
-              ) : null}
-            </div>
-            <div class={this.ns.be('header', 'right')}>
-              <app-user />
-            </div>
-          </i-header>
-          <i-content class={this.ns.be('content', 'main')}>
-            {this.$slots.tabPageExp}
-            {this.$slots.default}
-          </i-content>
-          {/* <i-footer class={this.ns.b('footer')}>Footer</i-footer> */}
-        </i-layout>
+            </i-header>
+            <i-content class={this.ns.be('content', 'main')}>
+              {this.$slots.tabPageExp}
+              {this.$slots.default}
+            </i-content>
+            {/* <i-footer class={this.ns.b('footer')}>Footer</i-footer> */}
+          </i-layout>
+        )}
       </i-layout>
     ) : null;
   },

app_Web/src/components/widgets/app-menu/app-menu.tsx

@@ -3,6 +3,7 @@ import {
   AppMenuModel,
   AppMenuItemModel,
   IPSAppMenuItem,
+  IPSAppIndexView,
 } from '@ibiz-template/model';
 import {
   useAppMenuController,
@@ -94,6 +95,72 @@ function renderMenuItem(
   );
 }
 
+/**
+ * 绘制中间菜单项
+ * @author fzh
+ * @date 2022-08-29 14:08:20
+ * @param {IData} menu
+ * @returns {*}
+ */
+function renderCenterChildren(
+  menu: IData,
+  ns: Namespace,
+  c: AppMenuController,
+  counterData: IData,
+  click: Function,
+) {
+  return (
+    <div class={ns.e('cchildren')} onClick={() => click(menu.key)}>
+      <app-icon class={ns.e('cchildrenIcon')} icon={menu.image}></app-icon>
+      <div class={ns.em('cchildren', 'title')}>
+        <span>{menu.label}</span>
+      </div>
+      {typeof counterData[menu.counterId] === 'number' ? (
+        <i-badge
+          class={ns.e('counter')}
+          count={counterData[menu.counterId]}
+        ></i-badge>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * 绘制中间菜单分组
+ * @author fzh
+ * @date 2022-08-29 14:08:20
+ * @param {IData} menu
+ * @returns {*}
+ */
+function renderCenterMenuItem(
+  menu: IData,
+  ns: Namespace,
+  c: AppMenuController,
+  counterData: IData,
+  click: Function,
+) {
+  if (!c.menuItemsState[menu.key].visible) {
+    return;
+  }
+  return (
+    <div class={ns.e('cmenu')}>
+      <div class={ns.em('cmenu', 'title')}>{menu.label}</div>
+      {typeof counterData[menu.counterId] === 'number' ? (
+        <i-badge
+          class={ns.e('counter')}
+          count={counterData[menu.counterId]}
+        ></i-badge>
+      ) : null}
+      <div class={ns.e('cmenucontent')}>
+        {menu.children?.length > 0 &&
+          menu.children.map((item: IData) => {
+            return renderCenterChildren(item, ns, c, counterData, click);
+          })}
+      </div>
+    </div>
+  );
+}
+
 /**
  * 绘制收缩分组菜单项
  * @param {IData} menu
@@ -209,6 +276,7 @@ export const AppMenu = defineComponent({
     context: { type: Object as PropType<IContext>, required: true },
     collapseChange: Boolean,
     currentPath: String,
+    menuModel: { type: Object as PropType<IPSAppIndexView>, required: true },
   },
   setup(props, { emit }) {
     const { proxy } = getCurrentInstance()!;
@@ -224,6 +292,8 @@ export const AppMenu = defineComponent({
     let counter: AppCounter | null = null;
     const counterData = ref<IData>({});
 
+    const menuDirection = props.menuModel.mainMenuAlign;
+
     c.nerve.self.evt.on('created', () => {
       menus.value = getMenus(c.model.items);
     });
@@ -352,9 +422,33 @@ export const AppMenu = defineComponent({
       counter?.destroy();
     });
 
-    return { menus, c, onClick, ns, defaultActive, defaultOpens, counterData };
+    return {
+      menus,
+      c,
+      onClick,
+      ns,
+      defaultActive,
+      defaultOpens,
+      counterData,
+      menuDirection,
+    };
   },
   render() {
+    if (this.menuDirection === 'CENTER') {
+      return (
+        <div class={[this.ns.b(), this.menuDirection?.toLowerCase()]}>
+          {this.menus.map(item => {
+            return renderCenterMenuItem(
+              item,
+              this.ns,
+              this.c,
+              this.counterData,
+              this.onClick,
+            );
+          })}
+        </div>
+      );
+    }
     return (
       <i-menu
         ref={'menu'}

app_Web/src/views/index-view/index-view.vue

@@ -166,6 +166,7 @@ const collapseChange = (collapse: boolean) => {
   <AppLayout
     :is-complete="c.complete"
     :model="c.model"
+    :class="c.model?.source?.mainMenuAlign?.toLowerCase()"
     :is-show-tab-page-exp="isShowTabPageExp"
     @onCollapseChange="collapseChange"
   >
@@ -177,6 +178,7 @@ const collapseChange = (collapse: boolean) => {
         :model-data="c.model.appMenu"
         :context="c.context"
         :collapse-change="c.collapseChange"
+        :menu-model="c.model?.source"
         @menuRouteChange="onMenuRouteChange"
       ></app-menu>
       <tab-page-exp