Browse Source

feat(navigation): add dynamic highlight for buttons based on business flow

Implement functionality to update navigation buttons' appearance according to current business flow
Add red border styling as temporary highlight effect for active buttons
dengdx 1 day ago
parent
commit
680950f801
2 changed files with 11 additions and 3 deletions
  1. 7 2
      src/layouts/BusinessZone.tsx
  2. 4 1
      src/pages/security/components/MeButton.tsx

+ 7 - 2
src/layouts/BusinessZone.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import React, { useState, useEffect, useRef } from 'react';
 import { Space } from 'antd';
 import { Space } from 'antd';
 import { FormattedMessage } from 'react-intl';
 import { FormattedMessage } from 'react-intl';
+import { useSelector } from 'react-redux';
 import {
 import {
   AlertOutlined,
   AlertOutlined,
   AppstoreOutlined,
   AppstoreOutlined,
@@ -15,6 +16,7 @@ interface BusinessZoneProps {
 }
 }
 
 
 const BusinessZone: React.FC<BusinessZoneProps> = ({ onMenuClick }) => {
 const BusinessZone: React.FC<BusinessZoneProps> = ({ onMenuClick }) => {
+  const currentKey = useSelector((state: any) => state.BusinessFlow.currentKey);
   const items = [
   const items = [
     {
     {
       key: 'patient_management',
       key: 'patient_management',
@@ -174,7 +176,7 @@ const BusinessZone: React.FC<BusinessZoneProps> = ({ onMenuClick }) => {
                 }}
                 }}
               />
               />
             ) : (
             ) : (
-              <div key={item.key}>
+              <div key={item.key} data-testid={item.key} className={item.key === currentKey ? 'border border-red-500' : ''}>
                 <MeButton
                 <MeButton
                   icon={item.icon}
                   icon={item.icon}
                   onClick={
                   onClick={
@@ -185,12 +187,15 @@ const BusinessZone: React.FC<BusinessZoneProps> = ({ onMenuClick }) => {
                   username={item.label}
                   username={item.label}
                 />
                 />
                 {item.key === 'patient_management' && floatingMenuVisible && (
                 {item.key === 'patient_management' && floatingMenuVisible && (
-                  <Space direction="vertical" style={{ marginLeft: 20 }}>
+                  <Space direction="vertical" style={{ marginLeft: 20 }}
+                    >
                     {item.children?.map((child) => (
                     {item.children?.map((child) => (
                       <MeButton
                       <MeButton
+                        data-testid={child.key}
                         key={child.key}
                         key={child.key}
                         onClick={() => onMenuClick?.(child.key)}
                         onClick={() => onMenuClick?.(child.key)}
                         username={child.label}
                         username={child.label}
+                        className={child.key === currentKey ? 'border border-red-500' : ''}
                       />
                       />
                     ))}
                     ))}
                   </Space>
                   </Space>

+ 4 - 1
src/pages/security/components/MeButton.tsx

@@ -7,6 +7,7 @@ interface MeButtonProps extends AvatarProps {
   avatarUrl?: string;
   avatarUrl?: string;
   username?: React.ReactNode;
   username?: React.ReactNode;
   icon?: React.ReactNode;
   icon?: React.ReactNode;
+  "data-testid"?:string;
 }
 }
 /**
 /**
  * 没有传递isLogin时,当作普通按钮使用
  * 没有传递isLogin时,当作普通按钮使用
@@ -33,11 +34,13 @@ const MeButton: React.FC<MeButtonProps> = ({
       style={{
       style={{
         display: 'flex',
         display: 'flex',
         alignItems: 'center',
         alignItems: 'center',
-        border: 'none',
+        // border: 'none',
         background: 'none',
         background: 'none',
         padding: 0,
         padding: 0,
         cursor: 'pointer',
         cursor: 'pointer',
       }}
       }}
+      className={props.className}
+      data-testid={props['data-testid']}
     >
     >
       {isLogin ? (
       {isLogin ? (
         <Avatar
         <Avatar