✨ feat: 添加迷你播放器

src/components/agent/AgentCard/index.tsx

@@ -10,12 +10,13 @@ import { useStyles } from './style';
 interface Props {
   actions?: React.ReactNode[];
   agent?: Agent;
+  extra?: React.ReactNode;
 }
 
 export default (props: Props) => {
   const { styles, theme } = useStyles();
 
-  const { actions = [], agent } = props;
+  const { actions = [], agent, extra } = props;
   const { meta } = agent || {};
   const { avatar, name, description, homepage } = meta || {};
 
@@ -36,9 +37,12 @@ export default (props: Props) => {
         </Tag>
       </div>
       <div className={styles.desc}>{description}</div>
-      <div className={styles.actions}>
-        <Space>{actions}</Space>
-      </div>
+      {actions ? (
+        <div className={styles.actions}>
+          <Space>{actions}</Space>
+        </div>
+      ) : null}
+      {extra}
     </Center>
   );
 };

src/features/AudioPlayer/MiniPlayer/index.tsx

@@ -0,0 +1,56 @@
+import { Avatar } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import React from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Control from '@/features/AudioPlayer/Control';
+import { useDanceStore } from '@/store/dance';
+
+const useStyles = createStyles(({ css }) => ({
+  spin: css`
+    @keyframes rotate-animation {
+      from {
+        transform: rotate(0deg);
+      }
+
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    animation: rotate-animation 20s linear infinite;
+  `,
+}));
+
+export { useStyles };
+
+interface Props {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default (props: Props) => {
+  const { style, className } = props;
+  const { styles } = useStyles();
+  const [isPlaying, togglePlayPause, playlist, currentPlay] = useDanceStore((s) => [
+    s.isPlaying,
+    s.togglePlayPause,
+    s.playlist,
+    s.currentPlay,
+  ]);
+
+  return playlist.length ? (
+    <Flexbox horizontal gap={8}>
+      <Avatar
+        className={classNames(isPlaying ? styles.spin : '', className)}
+        style={style}
+        shape="circle"
+        size={42}
+        onClick={togglePlayPause}
+        src={currentPlay?.cover}
+      />
+      <Control />
+    </Flexbox>
+  ) : null;
+};

src/features/ChatHeader/index.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AgentMeta from '@/components/agent/AgentMeta';
-import PlayControl from '@/features/Actions/PlayControl';
 import Video from '@/features/Actions/Video';
 import Voice from '@/features/Actions/Voice';
 import { sessionSelectors, useSessionStore } from '@/store/session';
@@ -20,7 +19,6 @@ const Header = () => {
       <Space>
         <Voice key={'voice'} />
         <Video key={'video'} />
-        <PlayControl key="play" />
       </Space>
     </Flexbox>
   );

src/features/ChatInfo/index.tsx

@@ -7,6 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import AgentCard from '@/components/agent/AgentCard';
 import { SIDEBAR_WIDTH } from '@/constants/common';
+import MiniPlayer from '@/features/AudioPlayer/MiniPlayer';
 import { sessionSelectors, useSessionStore } from '@/store/session';
 
 import Operations from './Operations';
@@ -35,7 +36,14 @@ const Header = () => {
       mode={'fixed'}
       placement={'right'}
     >
-      <AgentCard agent={currentAgent} />
+      <AgentCard
+        agent={currentAgent}
+        extra={
+          <Flexbox>
+            <MiniPlayer />
+          </Flexbox>
+        }
+      />
       <Flexbox gap={8} style={{ padding: 8 }}>
         <Operations />
       </Flexbox>