fix(style): simple audio player

src/components/audio-player/simple-audio.tsx

@@ -1,7 +1,7 @@
 import { formatTime } from '@/utils/index';
 import { DeleteOutlined, DownloadOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Dropdown, Slider, Tooltip, type MenuProps } from 'antd';
+import { Button, Dropdown, Slider, type MenuProps } from 'antd';
 import { createStyles } from 'antd-style';
 import { round } from 'lodash';
 import React, {
@@ -11,6 +11,8 @@ import React, {
   useImperativeHandle,
   useMemo
 } from 'react';
+import styled from 'styled-components';
+import AutoTooltip from '../auto-tooltip';
 import IconFont from '../icon-font';
 
 type ActionItem = 'download' | 'delete' | 'speed';
@@ -28,13 +30,28 @@ interface AudioPlayerProps {
   onDelete?: () => void;
 }
 
+const SliderWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  .ant-slider {
+    flex: 1;
+  }
+  .time {
+    color: var(--ant-color-text-tertiary);
+  }
+`;
+
 const useStyles = createStyles(({ css, token }) => {
   // @ts-ignore
   const isDarkMode = token.darkMode as boolean;
   return {
     wrapper: css`
       position: relative;
-      min-width: 300px;
+      min-width: 320px;
+      width: 320px;
       height: 54px;
       display: flex;
       align-items: center;
@@ -45,13 +62,20 @@ const useStyles = createStyles(({ css, token }) => {
         : '#F1F3F4'};
       border-radius: 28px;
       .inner {
+        width: 100%;
         display: flex;
         align-items: center;
         justify-content: flex-start;
         flex: 1;
-        gap: 10px;
+        gap: 8px;
         .slider {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
           flex: 1;
+          .ant-slider {
+            margin: 0;
+          }
           &:hover {
             .ant-slider-handle {
               opacity: 1;
@@ -82,6 +106,10 @@ const useStyles = createStyles(({ css, token }) => {
 
 const sliderStyles = {
   rail: {
+    borderRadius: '4px',
+    backgroundColor: 'var(--ant-color-fill-secondary)'
+  },
+  track: {
     borderRadius: '4px',
     backgroundColor: 'var(--ant-color-bg-spotlight)'
   }
@@ -322,33 +350,36 @@ const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
           icon={
             !playOn ? (
               <IconFont
-                type="icon-play"
+                type="icon-playcircle-fill"
                 style={{ fontSize: '22px' }}
               ></IconFont>
             ) : (
               <IconFont
-                type="icon-pause"
+                type="icon-stopcircle-fill"
                 style={{ fontSize: '22px' }}
               ></IconFont>
             )
           }
         ></Button>
-        <Tooltip title={name}>
+
-          <span className="time current">
-            {formatTime(audioState.currentTime)} /{' '}
-            {formatTime(audioState.duration)}
-          </span>
-        </Tooltip>
         <div className="slider">
-          <Slider
+          <div className="flex-center flex-between file-name">
-            tooltip={{ open: false }}
+            <AutoTooltip ghost maxWidth={220}>
-            min={0}
+              <span>{name}</span>
-            step={1}
+            </AutoTooltip>
-            styles={sliderStyles}
+          </div>
-            max={audioState.duration}
+          <SliderWrapper>
-            value={audioState.currentTime}
+            <span className="time">{formatTime(audioState.currentTime)}</span>
-            onChange={handleCurrentChange}
+            <Slider
-          />
+              tooltip={{ open: false }}
+              min={0}
+              step={1}
+              styles={sliderStyles}
+              max={audioState.duration}
+              value={audioState.currentTime}
+              onChange={handleCurrentChange}
+            />
+          </SliderWrapper>
         </div>
         <Dropdown menu={{ items }} trigger={['click']}>
           <Button

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_gxrotg9r0p.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_njee9tsv0mp.js'
 });
 
 export default IconFont;

src/pages/llmodels/components/deploy-modal.tsx

@@ -196,7 +196,7 @@ const AddModal: FC<AddModalProps> = (props) => {
       const currentModelId = updateRequestModelId();
       setEvaluteState(EvaluateProccess.file);
 
-      const evaluateRes = await handleEvaluateOnChange?.({
+      const evaluateRes = await handleOnValuesChangeBefore?.({
         changedValues: {},
         allValues: form.current?.form?.getFieldsValue?.(),
         source: props.source

src/pages/playground/components/message-input.tsx

@@ -519,7 +519,7 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
               <SimpleAudio
                 url={message.audio?.[0].data?.url}
                 name={message.audio?.[0].data?.name}
-                height={54}
+                height={50}
                 onDelete={handleDeleteAudio}
               ></SimpleAudio>
             </AudioWrapper>

src/pages/playground/components/multiple-chat/message-body.tsx

@@ -219,7 +219,7 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
                   url={data.audio?.[0]?.data.url}
                   name={data.audio?.[0]?.data.name}
                   actions={[]}
-                  height={54}
+                  height={50}
                 ></SimpleAudio>
               </AudioWrapper>
             )}
@@ -250,7 +250,7 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
                   url={data.audio?.[0]?.data.url}
                   name={data.audio?.[0]?.data.name}
                   onDelete={handleDeleteAudio}
-                  height={54}
+                  height={50}
                 ></SimpleAudio>
               </AudioWrapper>
             )}