From 0f24a53cec4a1a8593db8ebc6742758c39192568 Mon Sep 17 00:00:00 2001
From: zhf <1204297681@qq.com>
Date: Tue, 26 Aug 2025 14:54:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BA=94=E7=94=A8=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=EF=BC=88=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F=EF=BC=89=E8=AF=86?=
 =?UTF-8?q?=E5=88=AB=E5=88=86=E7=BB=84=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  1 +
 .../app-menu-list-view.scss                   | 15 +++
 .../app-menu-list-view/app-menu-list-view.tsx | 97 +++++++++++--------
 3 files changed, 73 insertions(+), 40 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 516d2bed..49cc4fa1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 ### Added
 
 - 更新密码框支持明文，暗文切换功能
+- 应用菜单（列表样式）识别分组配置
 
 ### Change
 
diff --git a/src/control/app-menu-list-view/app-menu-list-view.scss b/src/control/app-menu-list-view/app-menu-list-view.scss
index 4bf638c4..2c5695ec 100644
--- a/src/control/app-menu-list-view/app-menu-list-view.scss
+++ b/src/control/app-menu-list-view/app-menu-list-view.scss
@@ -16,6 +16,10 @@ $control-appmenu: (list-view-icon-size: getCssVar(font-size, header-4),
   --van-cell-horizontal-padding: #{rem(12px)};
   --van-cell-active-color: transparent;
   --van-cell-right-icon-color: var(--van-gray-6);
+  --van-cell-group-title-color: #{getCssVar(color, text, 2)};
+  --van-cell-group-title-padding: #{rem(8px)} #{rem(16px)};
+  --van-cell-group-title-font-size: #{getCssVar(font-size, regular)};
+  --van-cell-group-title-line-height: var(--van-cell-line-height);
 
   border-radius: getCssVar(border-radius, small);
 
@@ -47,4 +51,15 @@ $control-appmenu: (list-view-icon-size: getCssVar(font-size, header-4),
     }
 
   }
+
+  .van-cell-group__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background: getCssVar(color, bg, 0);
+  }
+
+  .van-hairline--top-bottom::after {
+    border: none;
+  }
 }
\ No newline at end of file
diff --git a/src/control/app-menu-list-view/app-menu-list-view.tsx b/src/control/app-menu-list-view/app-menu-list-view.tsx
index 371e6f23..13d12bc6 100644
--- a/src/control/app-menu-list-view/app-menu-list-view.tsx
+++ b/src/control/app-menu-list-view/app-menu-list-view.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, PropType } from 'vue';
-import { IAppMenu } from '@ibiz/model-core';
+import { IAppMenu, IAppMenuItem } from '@ibiz/model-core';
 import { AppMenuController, IControlProvider } from '@ibiz-template/runtime';
 import { prepareControl, useControlController } from '@ibiz-template/vue3-util';
 import './app-menu-list-view.scss';
@@ -25,53 +25,70 @@ export const AppMenuListViewControl = defineComponent({
   render() {
     const { model } = this.c;
     const { controlStyle } = model;
+    const renderMenuItem = (item: IAppMenuItem) => {
+      if (item.hidden === true) {
+        return null;
+      }
+      let renderItem = null;
+      switch (item.itemType) {
+        case 'MENUITEM':
+          if (item.appMenuItems?.length) {
+            renderItem = (
+              <van-cell-group class={this.ns.b('group')} title={item.caption}>
+                {item.appMenuItems.map(child => {
+                  return renderMenuItem(child);
+                })}
+              </van-cell-group>
+            );
+          } else {
+            renderItem = (
+              <van-cell
+                class={[this.ns.b('item')]}
+                is-link
+                center
+                clickable
+                title={item.caption}
+                onClick={async (event: MouseEvent) => {
+                  try {
+                    await this.c.onClickMenuItem(item.id!, event, false);
+                  } catch (error) {
+                    ibiz.log.error(error);
+                  }
+                }}
+              >
+                {{
+                  icon: () => {
+                    return (
+                      item.sysImage && (
+                        <div class={this.ns.b('icon')}>
+                          <iBizIcon icon={item.sysImage}></iBizIcon>
+                        </div>
+                      )
+                    );
+                  },
+                }}
+              </van-cell>
+            );
+          }
+          break;
+        case 'SEPERATOR':
+          renderItem = <van-divider />;
+          break;
+        default:
+          break;
+      }
+      return renderItem;
+    };
     return (
       <van-list
         class={[
           this.ns.b(),
-          this.ns.b(controlStyle!.toLowerCase()),
+          this.ns.b(controlStyle?.toLowerCase()),
           this.ns.m(this.modelData.id),
         ]}
       >
         {model?.appMenuItems?.map(item => {
-          if (item.hidden === true) {
-            return null;
-          }
-          let renderItem = null;
-          switch (item.itemType) {
-            case 'MENUITEM':
-              renderItem = (
-                <van-cell
-                  class={[this.ns.b('item')]}
-                  is-link
-                  center
-                  clickable
-                  title={item.caption}
-                  onClick={(event: MouseEvent) =>
-                    this.c.onClickMenuItem(item.id!, event, false)
-                  }
-                >
-                  {{
-                    icon: () => {
-                      return (
-                        item.sysImage && (
-                          <div class={this.ns.b('icon')}>
-                            <iBizIcon icon={item.sysImage}></iBizIcon>
-                          </div>
-                        )
-                      );
-                    },
-                  }}
-                </van-cell>
-              );
-              break;
-            case 'SEPERATOR':
-              renderItem = <van-divider />;
-              break;
-            default:
-              break;
-          }
-          return renderItem;
+          return renderMenuItem(item);
         })}
       </van-list>
     );
-- 
Gitee