✨ feat: 调整音乐播放器样式

src/features/Actions/Dance.tsx

@@ -12,7 +12,7 @@ export default () => {
       onClick={() => {
         openPanel('dance');
       }}
-      title={'歌舞唱见'}
+      title={'音乐与舞蹈控制'}
     />
   );
 };

src/features/AudioPlayer/PlayList/index.tsx

@@ -42,6 +42,7 @@ const PlayList = (props: PlayListProps) => {
       }}
       title="播放列表"
       width={SIDEBAR_WIDTH}
+      getContainer={false}
     >
       <List dataSource={playlist} renderItem={(item) => <PlayItem item={item} />} size="small" />
     </Drawer>

src/features/AudioPlayer/PlayList/style.ts

@@ -1,9 +1,10 @@
 import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
-    background-color: transparent !important;
-    backdrop-filter: blur(10px) !important;
+    background-color: ${rgba(token.colorBgLayout, 0.8)} !important;
+    backdrop-filter: saturate(180%) blur(10px);
     border-left: 1px solid ${token.colorBorder};
   `,
   body: css`

src/features/AudioPlayer/index.tsx

@@ -1,10 +1,12 @@
-import { Avatar } from '@lobehub/ui';
+import { ActionIcon, Avatar } from '@lobehub/ui';
 import { Typography } from 'antd';
 import classNames from 'classnames';
+import { ListMusic } from 'lucide-react';
 import React, { memo, useEffect, useRef, useState } from 'react';
 
 import Control from '@/features/AudioPlayer/Control';
 import Duration from '@/features/AudioPlayer/Duration';
+import PlayList from '@/features/AudioPlayer/PlayList';
 import Volume from '@/features/AudioPlayer/Volume';
 import { DanceStore, useDanceStore } from '@/store/dance';
 import { useViewerStore } from '@/store/viewer';
@@ -28,6 +30,7 @@ function Player(props: PlayerProps) {
   const { style, className } = props;
   const ref = useRef<HTMLAudioElement>(null);
   const [volume, setVolume] = useState(0.2);
+  const [open, setOpen] = useState(false);
   const [duration, setDuration] = useState(0);
   const [currentProgress, setCurrentProgress] = useState(0);
   const { nextDance, currentPlay, isPlaying } = useDanceStore(danceSelectors);
@@ -52,6 +55,7 @@ function Player(props: PlayerProps) {
 
   return (
     <div className={classNames(styles.container, className)} style={style}>
+      <PlayList onClose={() => setOpen(false)} open={open} />
       <audio
         onCanPlay={(e) => {
           e.currentTarget.volume = volume;
@@ -83,6 +87,7 @@ function Player(props: PlayerProps) {
             </Typography.Text>
             <Control />
             <div className={styles.right}>
+              <ActionIcon icon={ListMusic} onClick={() => setOpen(true)} title={'播放列表'} />
               <Volume audioRef={ref} setVolume={setVolume} volume={volume} />
             </div>
           </div>

src/features/AudioPlayer/style.ts

@@ -30,6 +30,7 @@ const useStyles = createStyles(({ token, css }) => ({
   `,
   right: css`
     display: flex;
+    gap: ${token.marginXS}px;
     align-items: center;
   `,
   spin: css`

src/features/ChatInfo/Operations/index.tsx

@@ -1,18 +1,33 @@
-import { ListMusic, Music, SquarePen } from 'lucide-react';
-import React, { memo, useState } from 'react';
+import { ExclamationCircleFilled } from '@ant-design/icons';
+import { Modal } from 'antd';
+import { Eraser, Music, SquarePen } from 'lucide-react';
+import React, { memo } from 'react';
 
-import PlayList from '@/features/AudioPlayer/PlayList';
 import { useConfigStore } from '@/store/config';
+import { useSessionStore } from '@/store/session';
 
 import Item from './Item';
 
+const { confirm } = Modal;
+
 export interface MyListProps {
   mobile?: boolean;
 }
 
 const Operations = memo<MyListProps>(({ mobile }) => {
   const [openPanel] = useConfigStore((s) => [s.openPanel]);
-  const [open, setOpen] = useState(false);
+  const [clearHistory] = useSessionStore((s) => [s.clearHistory]);
+  // return (
+  //   <Popconfirm
+  //     cancelText="取消"
+  //     description="该操作不可逆，请谨慎操作"
+  //     okText="确定"
+  //     onConfirm={clearHistory}
+  //     title="
+  //   >
+  //     <ActionIcon icon={Eraser} title="清除上下文" />
+  //   </Popconfirm>
+  // );
 
   const items = [
     {
@@ -30,17 +45,26 @@ const Operations = memo<MyListProps>(({ mobile }) => {
       },
     },
     {
-      icon: ListMusic,
-      label: '当前播放列表',
+      icon: Eraser,
+      label: '清除上下文',
       onClick: () => {
-        setOpen(true);
+        confirm({
+          title: '确定删除历史消息？',
+          icon: <ExclamationCircleFilled />,
+          content: '该操作不可逆，请谨慎操作',
+          okText: '确定',
+          cancelText: '取消',
+          onOk() {
+            clearHistory();
+          },
+          onCancel() {},
+        });
       },
     },
   ];
 
   return (
     <>
-      <PlayList onClose={() => setOpen(false)} open={open} />
       {items.map(({ icon, label, onClick }) => (
         <Item hoverable={!mobile} icon={icon} label={label} key={label} onClick={onClick} />
       ))}

src/features/ChatInfo/index.tsx

@@ -7,7 +7,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import AgentCard from '@/components/agent/AgentCard';
 import { SIDEBAR_WIDTH } from '@/constants/common';
-import History from '@/features/Actions/History';
 import Token from '@/features/Actions/Token';
 import { sessionSelectors, useSessionStore } from '@/store/session';
 
@@ -37,10 +36,7 @@ const Header = () => {
       mode={'fixed'}
       placement={'right'}
     >
-      <AgentCard
-        agent={currentAgent}
-        actions={[<Token key="token" />, <History key="history" />]}
-      />
+      <AgentCard agent={currentAgent} actions={[<Token key="token" />]} />
       <Flexbox gap={8} style={{ padding: 8 }}>
         <Operations />
       </Flexbox>

src/panels/DancePanel/index.tsx

@@ -30,7 +30,7 @@ const DancePanel = (props: DancePanelProps) => {
       className={className}
       panelKey="dance"
       style={style}
-      title="歌舞唱见"
+      title="音乐与舞蹈控制"
       extra={<Segmented options={options} size="small" value={tab} onChange={setTab} />}
       footer={
         <Flexbox style={{ padding: 8 }} flex={1}>