歌曲详情前

src/apis/album.ts

@@ -0,0 +1,14 @@
+import { request } from "@/utils"
+export const albumAddapi = (data: any) => {
+  return request.post('/album/add', data)
+}
+
+export const albumQueryapi = (id: number) => {
+  return request.get('/album/list', { params: { id: id } })
+}
+export const getSongListApi = (data: any) => {
+  return request.post(`/song/list`, data)
+}
+export const albumdetailapi = (id: number) => {
+  return request.get('/album/listDetail', { params: { id: id } })
+}

src/apis/song.ts

@@ -0,0 +1,8 @@
+import { request } from "@/utils"
+export const songAddapi = (data: any) => {
+  return request.post('/song/add', data)
+}
+
+export const songQueryapi = () => {
+  return request.get('/song/list')
+}

src/apis/wsongs.ts

@@ -0,0 +1,8 @@
+import { request } from '../utils/request'
+
+export const getAlbumListApi = (data: any) => {
+  return request.post(`/album/list`, data)
+}
+export const getAlbumDetailApi = (id: number) => {
+  return request(`/album/listDetail`, { params: { id } })
+}

src/pages/layout/pages/musician/MusicianDashboardPage/index.css

@@ -1,6 +1,6 @@
 .MusicianDashboardPage {
   width: 980px;
-  min-height: 100vh;
+  min-height: 90vh;
   margin: 0 auto;
   display: flex;
 }

src/pages/layout/pages/musician/MusicianDashboardPage/index.less

@@ -1,6 +1,6 @@
 .MusicianDashboardPage {
   width: 980px;
-  min-height: 100vh;
+  min-height: 90vh;
   margin: 0 auto;
   display: flex;
   .Menu_content {

src/pages/layout/pages/musician/MusicianDashboardPage/works/songup/index.css

@@ -3,7 +3,7 @@
   width: 730px;
   padding: 10px;
 }
-.upload_page .ant-upload-list-item-container {
+.upload_page .upload-container .ant-upload-list-item-container {
   width: 1000px !important;
 }
 .upload_page .lyrics-container {

src/pages/layout/pages/musician/MusicianDashboardPage/works/songup/index.less

@@ -3,29 +3,31 @@
     height: 150px;
     width: 730px;
     padding: 10px;
-  }
 
-  .ant-upload-list-item-container {
-    width: 1000px !important;
+    .ant-upload-list-item-container {
+      width: 1000px !important;
+    }
   }
 
+
+
   .lyrics-container {
     margin-top: 10px;
-    
+
     .play-controls {
       display: flex;
       align-items: center;
       margin-bottom: 10px;
-      
+
       .time-display {
         margin-left: 10px;
         font-size: 12px;
         color: #666;
-        
+
         &.playing {
           color: #1890ff;
         }
-        
+
         &.paused {
           color: #52c41a;
         }

src/pages/layout/pages/musician/MusicianDashboardPage/works/songup/index.tsx

@@ -1,14 +1,16 @@
 import './index.css'
 import { useSearchParams } from 'react-router-dom'
-import { PlayCircleOutlined, UploadOutlined } from '@ant-design/icons'
-import { message, Upload, Radio, Input, Select, Button, Form } from 'antd'
+import { PlayCircleOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons'
+import { message, Upload, Radio, Input, Select, Button, Form, Modal } from 'antd'
 import { uploadFile } from '@/apis/upload'
 import type { UploadChangeParam } from 'antd/es/upload'
 import { useEffect, useState, useRef } from 'react'
 import type { RcFile } from 'antd/es/upload'
 import { getArtinfo } from '@/utils/artlist'
 import calculateMD5 from '@/utils/calculateMD5'
-
+import { albumAddapi, albumQueryapi } from '@/apis/album'
+import { songAddapi } from '@/apis/song'
+import { useNavigate } from 'react-router-dom';
 const Songup = () => {
   const [searchParams] = useSearchParams()
   const type = searchParams.get('type')
@@ -20,6 +22,7 @@ const Songup = () => {
   const [duration, setDuration] = useState(0)
   const [audioUrl, setAudioUrl] = useState<string | null>(null)
   const [form] = Form.useForm()
+  const [createAlbumForm] = Form.useForm()
   const artinfo = getArtinfo()
   const audioRef = useRef<HTMLAudioElement | null>(null)
   const [lyrics, setLyrics] = useState<string>('') // 存储带时间戳的歌词（输入框和预览区共用）
@@ -29,6 +32,25 @@ const Songup = () => {
   const [isLyricsFocused, setIsLyricsFocused] = useState(false)
   const lyricsTextareaRef = useRef<HTMLTextAreaElement>(null)
 
+  // 专辑相关状态
+  const [workType, setWorkType] = useState<'single' | 'album'>('single')
+  const [albums, setAlbums] = useState<{ id: number, name: string }[]>([])
+  const [selectedAlbum, setSelectedAlbum] = useState<number | null>(null)
+  const [isCreateAlbumModalVisible, setIsCreateAlbumModalVisible] = useState(false)
+
+  const [coverUrl, setCoverUrl] = useState<string>(''); // 添加此状态
+  const [coverUploadStatus, setCoverUploadStatus] = useState<'idle' | 'uploading' | 'done' | 'error'>('idle');
+
+  const [songCoverUrl, setSongCoverUrl] = useState<string>('');
+  const [songCoverUploadStatus, setSongCoverUploadStatus] = useState<'idle' | 'uploading' | 'done' | 'error'>('idle');
+
+  // 添加一个状态来跟踪是否付费
+  const [isPaid, setIsPaid] = useState<number>(0);
+  const navigate = useNavigate();
+
+
+  const [submitLoading, setSubmitLoading] = useState(false);
+  
   // 文件上传处理
   const customUploadAvatar = async (options: any) => {
     const { file, onSuccess, onError, onProgress, data } = options
@@ -41,7 +63,16 @@ const Songup = () => {
       onError(error)
     }
   }
-
+  const customUploadWithoutMD5 = async (options: any) => {
+    const { file, onSuccess, onError, onProgress, data } = options
+    try {
+      // 直接上传文件，不计算 MD5
+      const res = await uploadFile(data, file, '', onProgress)
+      onSuccess(res, file)
+    } catch (error) {
+      onError(error)
+    }
+  }
   // 上传状态变化处理
   const handleAvatarChange = (info: UploadChangeParam) => {
     setFileList(info.fileList)
@@ -50,32 +81,77 @@ const Songup = () => {
     }
   }
 
-  // 表单提交处理
   const handleSubmit = () => {
-    form.validateFields().then((values) => {
-      const submitData = {
-        ...values,
-        lyrics: lyrics // 提交带时间戳的歌词
+    if (submitLoading) return;
+    form.validateFields().then(async (values) => {
+      try {
+        setSubmitLoading(true); // 在开始提交时设置加载状态
+        // 获取音频文件时长
+        let duration = 0;
+        if (audioRef.current) {
+          duration = Math.floor(audioRef.current.duration);
+        }
+        let actualAudioUrl = '';
+        if (fileList[0]?.response?.data) {
+          actualAudioUrl = fileList[0].response.data; // 使用服务器返回的 URL
+        } else {
+          messageApi.error('未能获取到有效的音频文件地址');
+          setSubmitLoading(false); // 恢复状态
+          return;
+        }
+        const submitData = {
+          ...values,
+          lyrics: lyrics,
+          workType: workType,
+          artistId: artinfo.id,
+          fileUrl: actualAudioUrl,
+          coverUrl: songCoverUrl || coverUrl || '',
+          duration: duration,
+          releaseTime: new Date().toISOString().split('T')[0],
+          ...(workType === 'album' && selectedAlbum && { albumId: selectedAlbum }),
+          isPaid: values.isPaid !== undefined ? values.isPaid : 0,
+          price: values.isPaid === 1 && values.price ? Number(values.price) : 0
+        };
+
+        console.log('提交数据:', submitData);
+        // 调用歌曲上传API
+        const res = await songAddapi(submitData);
+        if (res.code === 200) {
+          messageApi.success({
+            content: '歌曲上传成功',
+            duration: 2,
+          });
+
+          // 延迟跳转，让用户看到成功消息
+          setTimeout(() => {
+            setSubmitLoading(false); // 在跳转前恢复按钮状态
+            navigate('/musician/works/wsongs');
+          }, 2000);
+        } else {
+          messageApi.error(res.message || '提交失败');
+          setSubmitLoading(false); // 恢复状态
+        }
+      } catch (error) {
+        console.error('提交失败:', error);
+        messageApi.error('提交失败');
+        setSubmitLoading(false); // 恢复状态
       }
-      console.log('提交数据:', submitData)
     }).catch((errorInfo) => {
-      console.log('验证失败:', errorInfo)
-    })
-  }
+      console.log('验证失败:', errorInfo);
+      setSubmitLoading(false); // 验证失败也恢复状态
+    });
+  };
 
   // 音频播放控制
   const handlePlayPause = () => {
     if (!audioRef.current) return;
-
     try {
       const newIsPlaying = !isPlaying;
-
       if (newIsPlaying) {
         audioRef.current.play();
       } else {
         audioRef.current.pause();
       }
-
       setTimeout(() => {
         setIsPlaying(newIsPlaying);
       }, 0);
@@ -112,7 +188,6 @@ const Songup = () => {
   const handleLyricsKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey && isLyricsFocused) {
       e.preventDefault();
-
       const textarea = e.target as HTMLTextAreaElement;
       const currentValue = textarea.value;
       const lines = currentValue.split('\n');
@@ -156,7 +231,8 @@ const Songup = () => {
       setIsRecordingLyrics(true);
       setHasStartedRecording(true);
     }
-  };
+  }
+
   // 处理歌词输入变化
   const handleLyricsChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setLyrics(e.target.value);
@@ -185,6 +261,45 @@ const Songup = () => {
     }
   };
 
+  const handleCreateAlbum = async (values: any) => {
+    try {
+      const submitValues = {
+        ...values,
+        coverUrl: coverUrl || values.cover_url,
+        artistId: artinfo.id
+      };
+      const res = await albumAddapi(submitValues)
+      console.log(res);
+
+      // 重新获取专辑列表
+      try {
+        const albumlist = await albumQueryapi(artinfo.id);
+        setAlbums(albumlist.data);
+      } catch (error) {
+        console.error('获取专辑列表失败:', error);
+        messageApi.error('获取专辑列表失败');
+      }
+      setIsCreateAlbumModalVisible(false);
+      createAlbumForm.resetFields();
+      messageApi.success('专辑创建成功');
+      setCoverUrl(''); // 重置封面URL
+    } catch (error) {
+      console.error('创建专辑失败:', error);
+      messageApi.error('专辑创建失败');
+    }
+  };
+
+  // 处理是否付费的变更
+  const handleIsPaidChange = (e: any) => {
+    const value = e.target.value;
+    setIsPaid(value);
+
+    // 如果选择免费，清空价格字段
+    if (value === 0) {
+      form.setFieldsValue({ price: undefined });
+    }
+  };
+
   // 全局键盘事件处理
   useEffect(() => {
     const handleGlobalKeyDown = (e: KeyboardEvent) => {
@@ -241,12 +356,58 @@ const Songup = () => {
       }
     };
   }, [uploadedFile]);
+  // 修复 useEffect 中的专辑查询
+  useEffect(() => {
+    if (workType === 'album') {
+      const fetchAlbums = async () => {
+        try {
+          const albumlist = await albumQueryapi(artinfo.id);
+          setAlbums(albumlist.data);
+        } catch (error) {
+          console.error('获取专辑列表失败:', error);
+          messageApi.error('获取专辑列表失败');
+        }
+      };
+      fetchAlbums();
+    }
+  }, [workType]);
 
   return (
     <div className='upload_page'>
       {contextHolder}
-      <h2>上传单曲</h2>
+      <h2>{workType === 'single' ? '上传单曲' : '上传专辑歌曲'}</h2>
       <p>当前选择的类型: {type}</p>
+
+      {/* 作品类型选择 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Radio.Group
+          value={workType}
+          onChange={(e) => setWorkType(e.target.value)}
+        >
+          <Radio.Button value="single">单曲</Radio.Button>
+          <Radio.Button value="album">专辑</Radio.Button>
+        </Radio.Group>
+      </div>
+
+      {/* 专辑选择 */}
+      {workType === 'album' && (
+        <div style={{ marginBottom: '20px', display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <Select
+            style={{ width: '300px' }}
+            placeholder="请选择专辑"
+            value={selectedAlbum}
+            onChange={(value) => setSelectedAlbum(value)}
+            options={albums.map(album => ({
+              label: album.name,
+              value: album.id
+            }))}
+          />
+          <Button type="primary" onClick={() => setIsCreateAlbumModalVisible(true)}>
+            新建专辑
+          </Button>
+        </div>
+      )}
+
       <div className="upload-container">
         <Upload
           customRequest={customUploadAvatar}
@@ -276,20 +437,61 @@ const Songup = () => {
       </div>
 
       {fileList.length > 0 && uploadedFile && (
+
         <Form
           form={form}
           layout="vertical"
           style={{ maxWidth: '720px', margin: '0 auto' }}
           initialValues={{
-            songName: uploadedFile?.name,
+            songName: uploadedFile?.name.replace(/\.[^/.]+$/, ""),
             singerName: artinfo.artistName,
             version: 'studio',
             songType: 'original',
             lyricist: artinfo.artistName,
             composer: artinfo.artistName,
-            arranger: artinfo.artistName
+            arranger: artinfo.artistName,
+            language: 'chinese',
+            isPaid: 0,
+            price: undefined
           }}
         >
+          {/* 歌曲封面上传 */}
+          <Form.Item label="歌曲封面">
+            <Upload
+              customRequest={customUploadWithoutMD5}
+              data={'MUSIC_COVERS'}
+              listType="picture-card"
+              maxCount={1}
+              accept=".jpg,.jpeg,.png"
+              noStyle
+              onChange={(info) => {
+                if (info.file.status === 'uploading') {
+                  setSongCoverUploadStatus('uploading');
+                  setSongCoverUrl('');
+                }
+                if (info.file.status === 'done') {
+                  if (info.file.response?.data) {
+                    const url = info.file.response.data;
+                    setSongCoverUrl(url);
+                    setSongCoverUploadStatus('done');
+                    messageApi.success('封面上传成功');
+                  } else {
+                    messageApi.error('封面上传失败');
+                    setSongCoverUploadStatus('error');
+                  }
+                } else if (info.file.status === 'error') {
+                  setSongCoverUploadStatus('error');
+                  setSongCoverUrl('');
+                  messageApi.error('封面上传失败');
+                }
+              }}
+            >
+              <div>
+                <PlusOutlined />
+                <div style={{ marginTop: 8 }}>上传歌曲封面</div>
+              </div>
+            </Upload>
+          </Form.Item>
           {/* 歌曲类型 */}
           <Form.Item
             label="歌曲类型"
@@ -387,6 +589,45 @@ const Songup = () => {
             </Select>
           </Form.Item>
 
+          {/* 是否付费 - 修改后的部分 */}
+          <Form.Item
+            label="是否付费"
+            name="isPaid"
+            initialValue={0}
+          >
+            <Radio.Group onChange={handleIsPaidChange}>
+              <Radio value={0}>免费</Radio>
+              <Radio value={1}>付费</Radio>
+            </Radio.Group>
+          </Form.Item>
+
+          <Form.Item
+            label="单曲价格"
+            name="price"
+            rules={[
+              {
+                required: isPaid === 1,
+                message: '请输入价格'
+              },
+              {
+                validator: (_, value) => {
+                  if (isPaid === 1 && (!value || value <= 0)) {
+                    return Promise.reject('请输入大于0的价格');
+                  }
+                  return Promise.resolve();
+                }
+              }
+            ]}
+          >
+            <Input
+              type="number"
+              min={0.01}
+              step={0.01}
+              placeholder={isPaid === 1 ? "请输入价格" : "免费歌曲无需输入价格"}
+              disabled={isPaid !== 1}
+            />
+          </Form.Item>
+
           {/* 作词 */}
           <Form.Item
             label="作词"
@@ -505,12 +746,116 @@ const Songup = () => {
 
           {/* 提交按钮 */}
           <Form.Item>
-            <Button type="primary" htmlType="submit" onClick={handleSubmit}>
+            <Button type="primary" htmlType="submit"
+              onClick={handleSubmit}
+              loading={submitLoading} // 显示加载状态
+              disabled={submitLoading} // 禁用按钮
+            >
               提交
             </Button>
           </Form.Item>
         </Form>
       )}
+
+      {/* 创建专辑模态框 */}
+      <Modal
+        title="新建专辑"
+        open={isCreateAlbumModalVisible}
+        onCancel={() => {
+          setIsCreateAlbumModalVisible(false);
+          createAlbumForm.resetFields();
+        }}
+        onOk={() => createAlbumForm.submit()}
+        okButtonProps={{
+          disabled: coverUploadStatus === 'uploading' || coverUploadStatus === 'error',
+          loading: coverUploadStatus === 'uploading'
+        }}
+      >
+        <Form
+          form={createAlbumForm}
+          layout="vertical"
+          onFinish={handleCreateAlbum}
+        >
+          <Form.Item
+            label="专辑名称"
+            name="albumName"
+            rules={[{ required: true, message: '请输入专辑名称' }]}
+          >
+            <Input placeholder="请输入专辑名称" />
+          </Form.Item>
+          <Form.Item
+            label="封面"
+            name="coverUrl">
+            <Upload
+              customRequest={customUploadWithoutMD5}
+              data={'MUSIC_COVERS'}
+              listType="picture-card"
+              maxCount={1}
+              accept=".jpg,.jpeg,.png"
+              noStyle
+              name="cover_url"
+              onChange={(info) => {
+                console.log(info);
+                if (info.file.status === 'uploading') {
+                  setCoverUploadStatus('uploading');
+                  setCoverUrl('');
+                }
+                if (info.file.status === 'done') {
+                  // 假设返回的URL在response.data中
+                  console.log(info.file.response.data);
+
+                  if (info.file.response.data) {
+                    const url = info.file.response.data;
+                    setCoverUrl(url);
+                    // 更新表单值
+                    createAlbumForm.setFieldsValue({ cover_url: url });
+                    setCoverUploadStatus('done');
+                  } else {
+                    messageApi.error('上传失败请重试');
+                  }
+                } else if (info.file.status === 'error') {
+                  setCoverUploadStatus('error');
+                  setCoverUrl('');
+                  messageApi.error('封面上传失败');
+                }
+              }}
+            >
+              <div>
+                <PlusOutlined />
+                <div style={{ marginTop: 8 }}>上传专辑封面</div>
+              </div>
+            </Upload>
+          </Form.Item>
+
+          <Form.Item
+            label="专辑类型"
+            name="albumType"
+            initialValue={1}
+          >
+            <Radio.Group>
+              <Radio value={1}>数字专辑</Radio>
+              <Radio value={2}>实体专辑</Radio>
+              <Radio value={3}>EP</Radio>
+            </Radio.Group>
+          </Form.Item>
+          <Form.Item
+            label="专辑价格"
+            name="price"
+            rules={[{ required: true, message: '请输入价格' }]}
+          >
+            <Input
+              type="number"
+              min={0}
+              step={0.01} placeholder="请输入价格" />
+          </Form.Item>
+          <Form.Item
+            label="专辑描述"
+            name="description"
+          >
+            <Input.TextArea placeholder="请输入专辑描述" rows={4} />
+          </Form.Item>
+        </Form>
+      </Modal>
     </div>
   )
 }

src/pages/layout/pages/musician/MusicianDashboardPage/works/wsongs/index.css

@@ -79,3 +79,36 @@
   overflow: hidden;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
+.album-detail .detail-item {
+  display: flex;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.album-detail .detail-item label {
+  font-weight: bold;
+  width: 100px;
+  margin-right: 16px;
+  color: #333;
+}
+.album-detail .detail-item span {
+  flex: 1;
+  color: #666;
+}
+.album-detail .detail-item .detail-item {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+.album-detail .album-cover {
+  width: 200px;
+  height: 200px;
+  margin: 16px auto;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.album-detail .album-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

src/pages/layout/pages/musician/MusicianDashboardPage/works/wsongs/index.less

@@ -94,6 +94,48 @@
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
 
+// 在 .album-detail 样式中添加图片容器样式
+.album-detail {
+  .detail-item {
+    display: flex;
+    margin-bottom: 16px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+
+    label {
+      font-weight: bold;
+      width: 100px;
+      margin-right: 16px;
+      color: #333;
+    }
 
+    span {
+      flex: 1;
+      color: #666;
+    }
+  }
+
+  // 处理嵌套的情况
+  .detail-item .detail-item {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+
+  // 添加专辑封面图片样式
+  .album-cover {
+    width: 200px;
+    height: 200px;
+    margin: 16px auto;
+    border-radius: 8px;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
 }

src/pages/layout/pages/musician/MusicianDashboardPage/works/wsongs/index.tsx

@@ -1,45 +1,38 @@
-import { Button, Modal, notification, Radio, Space, Table, Tabs, type RadioChangeEvent } from 'antd';
+import { Button, Drawer, Image, Modal, notification, Radio, Space, Table, Tabs, type RadioChangeEvent } from 'antd';
 import './index.css';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { NotificationPlacement } from 'antd/es/notification/interface';
 import { useNavigate } from 'react-router-dom';
-
+import { getAlbumListApi } from '@/apis/wsongs';
+import { getArtinfo } from '@/utils/artlist';
+import { albumdetailapi, getSongListApi } from '@/apis/album';
 const Wsongs = () => {
   const navigate = useNavigate();
-  const tabs1items = [
-    {
-      key: '1',
-      label: '我的发布'
-    },
-    {
-      key: '2',
-      label: '我的专辑'
-    },
-  ]
-  const tabs1items1onChange = (e) => {
-    console.log(e);
-  }
   const [mode, setMode] = useState('1');
-
+  const [songStatus, setsongStatus] = useState('0');
+  // 修改 useState 添加数据存储
+  const [songs, setSongs] = useState<any[]>([]);
+  const [albums, setAlbums] = useState<any[]>([]);
+  
   const handleModeChange = (e: RadioChangeEvent) => {
     setMode(e.target.value);
   };
-  const songStatus = [
+  const songStatuscontent = [
     {
       key: '0',
-      label: '已上架'
+      label: '审核中'
     },
     {
       key: '1',
-      label: '审核中'
+      label: '审核失败'
     },
     {
       key: '2',
-      label: '审核失败'
+      label: '发布中'
     },
     {
       key: '3',
-      label: '发布中'
+      label: '已上架'
     },
     {
       key: '4',
@@ -47,10 +40,16 @@ const Wsongs = () => {
     }
   ]
   const songChangestatus = (e: any) => {
-    console.log(e)
+    console.log(e);
+    setsongStatus(e);
   }
   const handleEdit = (record: any) => {
-    console.log('编辑歌曲:', record);
+    console.log('编辑项目:', record);
+    if (mode === '1') {
+      navigate(`/musician/works/songup?type=edit&id=${record.id}`);
+    } else {
+      navigate(`/musician/works/songup?type=album&albumId=${record.id}`);
+    }
   };
 
   const handleViewDetails = (record: any) => {
@@ -61,37 +60,43 @@ const Wsongs = () => {
     setIsModalOpen(true);
     console.log('删除歌曲:', record);
   };
-  const songs = [
-    { name: '详细', album: '梦言小伟原创纯音乐', date: '2024-03-31' },
-    { name: '傲世霸业', album: '梦言小伟原创纯音乐', date: '2024-03-31' },
-    { name: '人生大事', album: '梦言小伟原创纯音乐', date: '2024-03-31' },
-    { name: '序号', album: '梦言小伟原创纯音乐', date: '2024-03-31' },
-    { name: '我的梦想', album: '梦言小伟原创纯音乐', date: '2024-03-31' },
-    { name: '热敷贴', album: '梦言小伟原创纯音乐', date: '2024-03-31' },
-  ];
-  const columns = [
+  // 歌曲表格列定义
+  const songColumns = [
     {
-      id: 1,
       title: '歌曲名',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'songName',
+      key: 'songName',
     },
     {
-      id: 2,
       title: '专辑名',
-      dataIndex: 'album',
-      key: 'album',
+      dataIndex: 'albumName',
+      key: 'albumName',
+      render: (_: any, record: any) => record.albumName || '单曲'
+    },
+    {
+      title: '发布时间',
+      dataIndex: 'releaseTime',
+      key: 'releaseTime',
     },
     {
-      id: 3,
-      title: '发布日期',
-      dataIndex: 'date',
-      key: 'date',
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status: number) => {
+        const statusMap: Record<number, string> = {
+          0: '审核中',
+          1: '审核失败',
+          2: '发布中',
+          3: '已上架',
+          4: '已下架'
+        };
+        return statusMap[status] || '未知';
+      }
     },
     {
       title: '操作',
       key: 'action',
-      render: (_, record: any) => (
+      render: (_: any, record: any) => (
         <Space size="middle">
           <Button type="primary" size="small" onClick={() => handleEdit(record)}>
             编辑
@@ -105,7 +110,74 @@ const Wsongs = () => {
         </Space>
       ),
     }
-  ]
+  ];
+
+  // 专辑表格列定义
+  const albumColumns = [
+    {
+      title: '专辑名',
+      dataIndex: 'albumName',
+      key: 'albumName',
+      width: 150, // 设置固定宽度
+    },
+    {
+      title: '封面',
+      dataIndex: 'coverUrl',
+      key: 'coverUrl',
+      render: (url: string) => (
+        <img
+          src={url}
+          alt="专辑封面"
+          style={{ width: '50px', height: '50px', objectFit: 'cover', borderRadius: '4px' }}
+        />
+      ),
+      width: 60,
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+      width: 200, // 设置固定宽度
+    },
+    {
+      title: '价格',
+      dataIndex: 'price',
+      key: 'price',
+      render: (price: number) => `¥${price}`,
+      width: 100, // 设置固定宽度
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status: number) => {
+        const statusMap: Record<number, string> = {
+          0: '审核中',
+          1: '审核失败',
+          2: '发布中',
+          3: '已上架',
+          4: '已下架'
+        };
+        return statusMap[status] || '未知';
+      },
+      width: 80, // 设置固定宽度
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_: any, record: any) => (
+        <Space size="middle">
+          <Button size="small" onClick={() => showDrawer(record)}>
+            查看详情
+          </Button>
+          <Button danger size="small" onClick={() => handleDelete(record)}>
+            删除
+          </Button>
+        </Space>
+      ),
+      width: 200, // 设置固定宽度
+    }
+  ];
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [api, contextHolder] = notification.useNotification();
 
@@ -122,7 +194,44 @@ const Wsongs = () => {
   const handleCancel = () => {
     setIsModalOpen(false);
     openNotification('topRight')
+
   };
+  // 修改 useEffect 中的数据获取逻辑
+  useEffect(() => {
+    const fetchData = async () => {
+      const id = getArtinfo().id
+      console.log("获取数据 - mode:", mode, "songStatus:", songStatus);
+
+      try {
+        if (mode === '1') {
+          const result = await getSongListApi({ id, songStatus });
+          setSongs(result.data || []);
+        } else {
+          const result = await getAlbumListApi({ id, songStatus });
+          setAlbums(result.data || []);
+        }
+      } catch (error) {
+        console.error('获取数据失败:', error);
+      }
+    };
+
+    fetchData();
+  }, [mode, songStatus]);
+  //右边抽屉
+  const [open, setOpen] = useState(false);
+  const [currentRecord, setCurrentRecord] = useState<any>(null);
+
+  const showDrawer = async (value: any) => {
+    const res = await albumdetailapi(value.id)
+    console.log(res.data);
+    setCurrentRecord(value);
+    setOpen(true);
+  };
+
+  const onClose = () => {
+    setOpen(false);
+  };
+
 
   return (
     <div className="wsongs-container">
@@ -133,10 +242,6 @@ const Wsongs = () => {
         <span className="author-info">作者身份/收益认领审核</span>
       </div>
 
-      {/* 标签页 */}
-      <div className="tabs">
-        <Tabs defaultActiveKey="1" items={tabs1items} onChange={tabs1items1onChange} />
-      </div>
       <div className="filter-bar1">
         <Radio.Group onChange={handleModeChange} value={mode} style={{ marginBottom: 8 }}>
           <Radio.Button value="1">单曲</Radio.Button>
@@ -149,7 +254,7 @@ const Wsongs = () => {
       <div className="filter-bar">
         {/* tabs */}
         <div className="status-filter">
-          <Tabs defaultActiveKey="0" items={songStatus} onChange={songChangestatus} />
+          <Tabs defaultActiveKey="0" items={songStatuscontent} onChange={songChangestatus} />
         </div>
         {/* 搜索框 */}
         <div className="search-box">
@@ -159,9 +264,12 @@ const Wsongs = () => {
       </div>
 
       {/* 歌曲列表 */}
-      <div className="table-container">
-        <Table dataSource={songs} columns={columns} />;
-      </div>
+      <Table
+        dataSource={mode === '1' ? songs : albums}
+        columns={mode === '1' ? songColumns : albumColumns}
+        rowKey={(record) => record.id}
+        scroll={{ x: 'max-content' }} // 允许水平滚动
+      />
       <Modal
         title="删除歌曲"
         open={isModalOpen}
@@ -172,6 +280,76 @@ const Wsongs = () => {
         <p>Some contents...</p>
         <p>Some contents...</p>
       </Modal>
+      <Drawer
+        title="专辑详情"
+        placement="right"
+        closable={false}
+        onClose={onClose}
+        open={open}
+        key="right"
+        size={"default"}
+        width={600}
+      >
+        {currentRecord && (
+          <div className="album-detail">
+            {/* 添加专辑封面 */}
+            <div style={{ display: 'flex' }}>
+              <div>
+                <div className="detail-item">
+                  <label>专辑名称:</label>
+                  <span>{currentRecord.albumName}</span>
+                </div>
+                <div className="detail-item">
+                  <label>专辑类型:</label>
+                  <span>{currentRecord.albumType === 1 ? '单曲' : '专辑'}</span>
+                </div>
+                <div className="detail-item">
+                  <label>描述:</label>
+                  <span>{currentRecord.description}</span>
+                </div>
+                <div className="detail-item">
+                  <label>价格:</label>
+                  <span>¥{currentRecord.price}</span>
+                </div>
+                <div className="detail-item">
+                  <label>状态:</label>
+                  <span>
+                    {(() => {
+                      const statusMap: Record<number, string> = {
+                        0: '审核中',
+                        1: '审核失败',
+                        2: '发布中',
+                        3: '已上架',
+                        4: '已下架'
+                      };
+                      return statusMap[currentRecord.status] || '未知';
+                    })()}
+                  </span>
+                </div>
+              </div>
+              {currentRecord.coverUrl && (
+                <div className="album-cover">
+                  <Image width={180} height={180} src={currentRecord.coverUrl} alt="专辑封面" />
+                </div>
+              )}
+            </div>
+            <div className="detail-item">
+              <label>创建时间:</label>
+              <span>{currentRecord.createTime}</span>
+            </div>
+            <div className="detail-item">
+              <label>更新时间:</label>
+              <span>{currentRecord.updateTime}</span>
+            </div>
+            {currentRecord.auditReason && (
+              <div className="detail-item">
+                <label>审核原因:</label>
+                <span>{currentRecord.auditReason}</span>
+              </div>
+            )}
+          </div>
+        )}
+      </Drawer>
     </div >
   );
 };

src/utils/request.ts

@@ -11,7 +11,7 @@ const request = axios.create({
 request.interceptors.request.use((config) => {
   const token = getToken()
   if (token) {
-    console.log(token.access_token);
+    // console.log(token.access_token);
     config.headers.Authorization = `Bearer ${token.access_token}`
   }
   return config