fix(navigation): adjust width of navigation area buttons, remove horizontal scrollbar from container and make button width responsive to navigation area width

src/components/IconButton.tsx

@@ -2,7 +2,7 @@ import React, { cloneElement, isValidElement } from 'react';
 import { Button, ButtonProps } from 'antd';
 import classNames from 'classnames';
 
-type IconPlace = 'top' | 'bottom' | 'left' | 'right';
+type IconPlace = 'top' | 'bottom' | 'left' | 'right' | '';
 type IconSize = 'small' | 'middle' | 'large' | number;
 
 export interface IconButtonProps extends Omit<ButtonProps, 'icon'> {
@@ -43,7 +43,7 @@ export const IconButton: React.FC<IconButtonProps> = ({
     }
   >(icon)
     ? cloneElement(icon, {
-        className: classNames(icon.props.className, 'shrink-0', {
+        className: classNames(icon.props.className, {
           'opacity-50 grayscale': disabled, // 方案 A
         }),
         style: {

src/layouts/BasicLayout.tsx

@@ -143,7 +143,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
           className="xxl:h-[90vh] xl:h-[90vh] lg:h-[90vh] md:h-[90vh] sm:h-[90vh] xs:h-[90vh]"
         >
           {/* 导航区域 */}
-          <Col xl={2} lg={2} md={0} sm={0} xs={0}>
+          <Col xl={2} lg={2} md={0} sm={0} xs={0} className="h-full">
             <NavMenu onMenuClick={handleMenuClick} />
           </Col>
           {/* 内容区域 */}

src/layouts/BusinessZone.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Space } from 'antd';
+import { Flex } from 'antd';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import {
@@ -217,91 +217,139 @@ const BusinessZone: React.FC<BusinessZoneProps> = ({ onMenuClick }) => {
     setFloatingMenuVisible(!floatingMenuVisible);
   };
 
+  const buttonClassNameGenerator = (
+    itemkey: string,
+    currentkey: string
+  ): string => {
+    const originalName =
+      'w-full max-w-full whitespace-nowrap overflow-hidden text-ellipsis min-w-0 truncate';
+    if (itemkey === currentkey) {
+      return originalName + ' border border-red-500 ';
+    }
+    return originalName;
+  };
+
   return (
-    <div
-      style={{ width: '100%', overflow: 'hidden', position: 'relative' }}
-      className="grid grid-rows-[1fr] h-0 flex-grow"
-    >
-      <div className="overflow-y-auto">
-        <Space direction="vertical">
-          {items.map((item) =>
-            item.type === 'divider' ? (
-              <hr
-                key="divider"
+    // <div
+
+    //   className="grid grid-rows-[1fr]  flex-grow h-0 overflow-y-auto"
+    // >
+
+    <Flex vertical className=" min-h-0 overflow-y-auto flex-grow px-1">
+      {items.map((item) =>
+        item.type === 'divider' ? (
+          <hr
+            key="divider"
+            style={{
+              width: '100%',
+              borderTop: '1px solid #f0f0f0',
+              margin: '8px 0',
+            }}
+          />
+        ) : (
+          <>
+            <IconButton
+              data-testid={item.key}
+              onClick={
+                item.key === 'patient_management'
+                  ? handlePatientManagementClick
+                  : () => onMenuClick?.(item.key ?? 'error')
+              }
+              iconSize={56}
+              iconPlace="left"
+              icon={
+                <Icon
+                  module="module-common"
+                  name={item.icon ?? ''}
+                  userId="user-A"
+                  theme="default"
+                  size="2x"
+                  state="normal"
+                />
+              }
+              style={{
+                //flex: 1,
+                minWidth: 0,
+                overflow: 'hidden', // 超出隐藏
+                textOverflow: 'ellipsis', // 超出用省略号
+                whiteSpace: 'nowrap', // 不换行
+                padding: '0px',
+                minHeight: '1.5rem',
+              }}
+              className={buttonClassNameGenerator(
+                item.key as string,
+                currentKey
+              )}
+              disabled={item.disabled}
+            >
+              <span
                 style={{
-                  width: '100%',
-                  borderTop: '1px solid #f0f0f0',
-                  margin: '8px 0',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  display: 'block', // 或 inline-block
+                  flex: 1, // 占据剩余空间并允许收缩
+                  minWidth: 0, // 再次确保可以收缩
                 }}
-              />
-            ) : (
-              <div
-                key={item.key}
-                data-testid={item.key}
-                className={
-                  item.key === currentKey ? 'border border-red-500' : ''
-                }
               >
-                <IconButton
-                  data-testid={item.key}
-                  onClick={
-                    item.key === 'patient_management'
-                      ? handlePatientManagementClick
-                      : () => onMenuClick?.(item.key ?? 'error')
-                  }
-                  iconSize={56}
-                  icon={
-                    <Icon
-                      module="module-common"
-                      name={item.icon ?? ''}
-                      userId="user-A"
-                      theme="default"
-                      size="2x"
-                      state="normal"
-                    />
-                  }
-                  style={{ padding: '0px' }}
-                  disabled={item.disabled}
-                >
-                  {item.label}
-                </IconButton>
-                {item.key === 'patient_management' && floatingMenuVisible && (
-                  <Space direction="vertical" style={{ marginLeft: 20 }}>
-                    {item.children?.map((child) => (
-                      <IconButton
-                        data-testid={child.key}
-                        iconSize={56}
-                        icon={
-                          <Icon
-                            module="module-common"
-                            name={item.icon ?? ''}
-                            userId="user-A"
-                            theme="default"
-                            size="2x"
-                            state="normal"
-                          />
-                        }
-                        key={child.key}
-                        onClick={() => onMenuClick?.(child.key)}
-                        className={
-                          child.key === currentKey
-                            ? 'border border-red-500'
-                            : ''
-                        }
-                        style={{ padding: '0px' }}
-                        disabled={item.disabled}
-                      >
-                        {child.label}
-                      </IconButton>
-                    ))}
-                  </Space>
-                )}
-              </div>
-            )
-          )}
-        </Space>
-      </div>
-    </div>
+                {item.label}
+              </span>
+            </IconButton>
+
+            {item.key === 'patient_management' && floatingMenuVisible && (
+              <Flex vertical className="px-1">
+                {item.children?.map((child) => (
+                  <IconButton
+                    data-testid={child.key}
+                    iconSize={56}
+                    icon={
+                      <Icon
+                        module="module-common"
+                        name={item.icon ?? ''}
+                        userId="user-A"
+                        theme="default"
+                        size="2x"
+                        state="normal"
+                      />
+                    }
+                    key={child.key}
+                    onClick={() => onMenuClick?.(child.key)}
+                    className={buttonClassNameGenerator(
+                      item.key as string,
+                      currentKey
+                    )}
+                    style={{
+                      //flex: 1,
+                      minWidth: 0,
+                      overflow: 'hidden', // 超出隐藏
+                      textOverflow: 'ellipsis', // 超出用省略号
+                      whiteSpace: 'nowrap', // 不换行
+                      padding: '0px',
+                    }}
+                    disabled={item.disabled}
+                  >
+                    <span
+                      style={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        display: 'block', // 或 inline-block
+                        flex: 1, // 占据剩余空间并允许收缩
+                        minWidth: 0, // 再次确保可以收缩
+                      }}
+                    >
+                      {child.label}
+                    </span>
+                  </IconButton>
+                ))}
+              </Flex>
+            )}
+          </>
+        )
+      )}
+    </Flex>
+
+    // </div>
   );
 };
 

src/layouts/NavMenu.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from 'react';
 import BusinessZone from './BusinessZone';
 import SystemZone from './SystemZone';
+import { Flex } from 'antd';
 
 interface NavMenuProps {
   onMenuClick?: (key: string) => void;
@@ -14,10 +15,17 @@ const NavMenu: React.FC<NavMenuProps> = ({ onMenuClick }) => {
   };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+    // <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+    <Flex vertical className="h-full">
+      {/* <div
+        style={{ width: '100%' }}
+        className="grid grid-rows-[1fr] h-0 flex-grow overflow-y-auto"
+      > */}
       <BusinessZone onMenuClick={onClick} />
+      {/* </div> */}
       <SystemZone ref={systemZoneRef} onMenuClick={onClick} />
-    </div>
+    </Flex>
+    // </div>
   );
 };