perf: 优化控制器的配色方案, 增强控制器状态辨识度

client/web/src/components/IconBtn.tsx

@@ -21,6 +21,7 @@ interface IconBtnProps extends Omit<ButtonProps, 'shape'> {
   iconClassName?: string;
   shape?: IconBtnShapeType;
   title?: string;
+  active?: boolean;
 }
 export const IconBtn: React.FC<IconBtnProps> = React.memo(
   ({ icon, iconClassName, title, className, ...props }) => {
@@ -32,13 +33,18 @@ export const IconBtn: React.FC<IconBtnProps> = React.memo(
       </span>
     );
 
+    // 默认情况下的背景颜色
+    const normalBg = props.active
+      ? 'bg-black bg-opacity-60'
+      : 'bg-black bg-opacity-20 hover:bg-opacity-60';
+
     const btnEl = (
       <Button
         className={clsx(
           'border-0 text-white text-opacity-80 hover:text-opacity-100',
           props.danger
             ? 'bg-red-600 bg-opacity-80 hover:bg-opacity-100'
-            : 'bg-black bg-opacity-20 hover:bg-opacity-60',
+            : normalBg,
           className
         )}
         {...props}

client/web/tailchat.d.ts

@@ -390,6 +390,8 @@ declare module '@capital/component' {
     shape?: 'circle' | 'square';
     title?: string;
     danger?: boolean;
+    active?: boolean;
+    disabled?: boolean;
     onClick?: React.MouseEventHandler<HTMLElement>;
   }>;
 

server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/Controls.tsx

@@ -52,6 +52,7 @@ export const Controls: React.FC<{
       <IconBtn
         icon={mediaPerm.video ? 'mdi:video' : 'mdi:video-off'}
         title={mediaPerm.video ? '关闭摄像头' : '开启摄像头'}
+        active={mediaPerm.video}
         disabled={!ready}
         size="large"
         onClick={() => mute('video')}
@@ -60,6 +61,7 @@ export const Controls: React.FC<{
       <IconBtn
         icon={mediaPerm.audio ? 'mdi:microphone' : 'mdi:microphone-off'}
         title={mediaPerm.audio ? '关闭麦克风' : '开启麦克风'}
+        active={mediaPerm.audio}
         disabled={!ready}
         size="large"
         onClick={() => mute('audio')}

server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/types/tailchat.d.ts

@@ -390,6 +390,8 @@ declare module '@capital/component' {
     shape?: 'circle' | 'square';
     title?: string;
     danger?: boolean;
+    active?: boolean;
+    disabled?: boolean;
     onClick?: React.MouseEventHandler<HTMLElement>;
   }>;