feat(platform): status-dot support wave animation

Author: xiejay97

packages/platform/src/app/components/status-dot/StatusDot.tsx

@@ -3,6 +3,7 @@ import { getClassName } from '@react-devui/utils';
 export interface AppStatusDotProps extends React.HTMLAttributes<HTMLDivElement> {
   aTheme?: 'primary' | 'success' | 'warning' | 'danger';
   aColor?: string;
+  aWave?: boolean;
   aSize?: string | number;
 }
 
@@ -11,6 +12,7 @@ export function AppStatusDot(props: AppStatusDotProps): JSX.Element | null {
     children,
     aTheme,
     aColor,
+    aWave = false,
     aSize,
 
     ...restProps
@@ -21,6 +23,7 @@ export function AppStatusDot(props: AppStatusDotProps): JSX.Element | null {
       {...restProps}
       className={getClassName(restProps.className, 'app-status-dot', {
         [`t-${aTheme}`]: aTheme,
+        'app-status-dot--wave': aWave,
       })}
       style={{
         ...restProps.style,

packages/platform/src/app/routes/list/standard-table/StandardTable.tsx

@@ -311,7 +311,10 @@ export default function StandardTable(): JSX.Element | null {
                         <DTable.Td>{data.model}</DTable.Td>
                         <DTable.Td>{data.price}</DTable.Td>
                         <DTable.Td dNowrap>
-                          <AppStatusDot aTheme={data.status === 0 ? 'success' : data.status === 1 ? 'warning' : 'danger'}>
+                          <AppStatusDot
+                            aTheme={data.status === 0 ? 'success' : data.status === 1 ? 'warning' : 'danger'}
+                            aWave={data.status === 2}
+                          >
                             {data.status === 0 ? 'Normal' : data.status === 1 ? 'Failure' : 'Alarm'}
                           </AppStatusDot>
                         </DTable.Td>

packages/platform/src/styles/components/status-dot.scss

@@ -1,4 +1,18 @@
+@keyframes status-dot-wave {
+  0% {
+    opacity: 0.5;
+    transform: scale(0.8);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(2.4);
+  }
+}
+
 @include b(status-dot) {
+  --app-status-dot-color: var(--#{$rd-prefix}tag-background-color-fill);
+
   display: inline-flex;
   gap: 0 8px;
   align-items: center;
@@ -10,10 +24,24 @@
     }
   }
 
+  @include m(wave) {
+    @include e(dot) {
+      &::after {
+        position: absolute;
+        inset: 0;
+        content: '';
+        border: 1px solid var(--app-status-dot-color);
+        border-radius: 50%;
+        animation: status-dot-wave 1.2s ease-in-out infinite;
+      }
+    }
+  }
+
   @include e(dot) {
+    position: relative;
     width: 6px;
     height: 6px;
-    background-color: var(--app-status-dot-color, var(--#{$rd-prefix}tag-background-color-fill));
+    background-color: var(--app-status-dot-color);
     border-radius: 50%;
   }
 }