|
@@ -1,5 +1,5 @@
|
|
import React, { useState } from 'react';
|
|
import React, { useState } from 'react';
|
|
-import { Space } from 'antd';
|
|
|
|
|
|
+import { Flex } from 'antd';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import { useSelector } from 'react-redux';
|
|
import { useSelector } from 'react-redux';
|
|
import {
|
|
import {
|
|
@@ -217,91 +217,139 @@ const BusinessZone: React.FC<BusinessZoneProps> = ({ onMenuClick }) => {
|
|
setFloatingMenuVisible(!floatingMenuVisible);
|
|
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 (
|
|
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={{
|
|
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>
|
|
);
|
|
);
|
|
};
|
|
};
|
|
|
|
|