chore(ui): optimize transition animation

Author: xiejay97

packages/ui/src/components/accordion/Accordion.tsx

@@ -130,14 +130,14 @@ export function DAccordion<ID extends DId, T extends DAccordionItem<ID>>(props:
         return (
           <div
             key={itemId}
-            className={getClassName(`${dPrefix}accordion__container`, {
-              [`${dPrefix}accordion__container--last`]: index === dList.length - 1,
+            className={getClassName(`${dPrefix}accordion__item`, {
+              [`${dPrefix}accordion__item--last`]: index === dList.length - 1,
             })}
           >
             <div
               id={buttonId}
-              className={getClassName(`${dPrefix}accordion__button`, {
-                [`${dPrefix}accordion__button--arrow-left`]: itemArrow === 'left',
+              className={getClassName(`${dPrefix}accordion__item-button`, {
+                [`${dPrefix}accordion__item-button--arrow-left`]: itemArrow === 'left',
                 'is-disabled': itemDisabled,
               })}
               tabIndex={itemDisabled ? -1 : 0}
@@ -189,8 +189,8 @@ export function DAccordion<ID extends DId, T extends DAccordionItem<ID>>(props:
                 }
               }}
             >
-              <div className={`${dPrefix}accordion__title`}>{itemTitle}</div>
-              {itemArrow && <DownOutlined className={`${dPrefix}accordion__arrow`} dRotate={iconRotate} />}
+              <div className={`${dPrefix}accordion__item-title`}>{itemTitle}</div>
+              {itemArrow && <DownOutlined className={`${dPrefix}accordion__item-arrow`} dRotate={iconRotate} />}
             </div>
             <DCollapseTransition
               dSize={0}
@@ -222,7 +222,7 @@ export function DAccordion<ID extends DId, T extends DAccordionItem<ID>>(props:
                 <div
                   ref={ref}
                   id={regionId}
-                  className={`${dPrefix}accordion__region`}
+                  className={`${dPrefix}accordion__item-region`}
                   style={collapseStyle}
                   role="region"
                   aria-labelledby={getButtonId(itemId)}

packages/ui/src/components/avatar/demos/3.LoadError.md

@@ -19,8 +19,8 @@ import { DAvatar } from '@react-devui/ui';
 export default function Demo() {
   return (
     <>
-      <DAvatar dImg={{ src: 'avatar.png', alt: 'avatar' }} dIcon={<UserOutlined />}></DAvatar>
-      <DAvatar dImg={{ src: 'avatar.png', alt: 'avatar' }} dText="U"></DAvatar>
+      <DAvatar dImg={{ src: '/error-path/avatar.png', alt: 'avatar' }} dIcon={<UserOutlined />}></DAvatar>
+      <DAvatar dImg={{ src: '/error-path/avatar.png', alt: 'avatar' }} dText="U"></DAvatar>
     </>
   );
 }

packages/ui/src/components/card/Card.tsx

@@ -51,7 +51,7 @@ export const DCard: {
                 ...action.props,
                 className: getClassName(action.props.className, `${dPrefix}card__action`),
               })}
-              {index !== dActions.length - 1 && <DSeparator dVertical></DSeparator>}
+              {index !== dActions.length - 1 && <DSeparator style={{ margin: 8 }} dVertical></DSeparator>}
             </>
           ))}
         </div>

packages/ui/src/components/dropdown/Dropdown.tsx

@@ -11,6 +11,7 @@ import { registerComponentMate, TTANSITION_DURING_POPUP } from '../../utils';
 import { DFocusVisible } from '../_focus-visible';
 import { DPopup, useNestedPopup } from '../_popup';
 import { DTransition } from '../_transition';
+import { DSeparator } from '../separator';
 import { DGroup } from './Group';
 import { DItem } from './Item';
 import { DSub } from './Sub';
@@ -26,6 +27,7 @@ export interface DDropdownItem<ID extends DId> {
   type: 'item' | 'group' | 'sub';
   icon?: React.ReactNode;
   disabled?: boolean;
+  separator?: boolean;
 }
 
 export interface DDropdownProps<ID extends DId, T extends DDropdownItem<ID> & { children?: T[] }>
@@ -188,7 +190,15 @@ function Dropdown<ID extends DId, T extends DDropdownItem<ID> & { children?: T[]
   const nodes = (() => {
     const getNodes = (arr: T[], level: number, subParents: T[]): JSX.Element[] =>
       arr.map((item) => {
-        const { id: itemId, label: itemLabel, type: itemType, icon: itemIcon, disabled: itemDisabled, children } = item;
+        const {
+          id: itemId,
+          label: itemLabel,
+          type: itemType,
+          icon: itemIcon,
+          disabled: itemDisabled,
+          separator: itemSeparator,
+          children,
+        } = item;
 
         const newSubParents = itemType === 'sub' ? subParents.concat([item]) : subParents;
         const id = getItemId(itemId);
@@ -347,6 +357,7 @@ function Dropdown<ID extends DId, T extends DDropdownItem<ID> & { children?: T[]
                 {itemLabel}
               </DSub>
             )}
+            {itemSeparator && <DSeparator style={{ margin: '2px 0' }} />}
           </React.Fragment>
         );
       });

packages/ui/src/components/menu/Item.tsx

@@ -67,11 +67,7 @@ export function DItem(props: DItemProps): JSX.Element | null {
       >
         <div style={{ backgroundColor: dLevel === 0 ? 'transparent' : undefined }}></div>
       </div>
-      {checkNodeExist(dIcon) && (
-        <div className={`${dPrefix}menu__item-icon-wrapper`}>
-          <div className={`${dPrefix}menu__item-icon`}>{dIcon}</div>
-        </div>
-      )}
+      {checkNodeExist(dIcon) && <div className={`${dPrefix}menu__item-icon`}>{dIcon}</div>}
       <div className={`${dPrefix}menu__item-content`}>{children}</div>
     </li>
   );