WIP: 创建专辑

src/pages/albumWorks/create/components/SongUploadItem/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  Card,
+  Collapse,
+  Radio,
+  Grid,
+  Typography,
+} from '@arco-design/web-react';
+import { IconInfoCircle, IconDown } from '@arco-design/web-react/icon';
+
+import type { UploadItem } from '@arco-design/web-react/es/Upload';
+
+import styles from './style/index.module.less';
+
+export interface SongUploadItemProps {
+  originNode: React.ReactNode;
+  file: UploadItem;
+  fileList: UploadItem[];
+}
+
+const CollapseItem = Collapse.Item;
+const { Row, Col } = Grid;
+
+export function SongUploadItem(props: SongUploadItemProps) {
+  const { originNode, file, fileList } = props || {};
+
+  console.log(111, originNode);
+  console.log(222, file);
+  console.log(333, fileList);
+
+  return (
+    <Row align="center" gutter={12} className={styles.songUploadItem}>
+      <Col flex={1}>
+        <Card className={styles.songUploadItemCard} hoverable>
+          <Collapse expandIconPosition="right" expandIcon={<IconDown />}>
+            <CollapseItem
+              header={originNode}
+              name="1"
+              // extra={<IconInfoCircle />}
+            >
+              Beijing Toutiao Technology Co., Ltd.
+            </CollapseItem>
+          </Collapse>
+        </Card>
+      </Col>
+      <Col flex="50px">123</Col>
+    </Row>
+  );
+}

src/pages/albumWorks/create/components/SongUploadItem/style/index.module.less

@@ -0,0 +1,35 @@
+.songUploadItem {
+  margin-top: 10px;
+
+  &:first-of-type {
+    margin-top: 20px;
+  }
+}
+
+.songUploadItemCard {
+  :global(.arco-card-body) {
+    padding: 0;
+  }
+
+  :global(.arco-collapse-item-header) {
+    background-color: var(--color-fill-1);
+  }
+
+  :global(.arco-collapse-item-content) {
+    background-color: var(--color-bg-2);
+  }
+
+  :global(.arco-collapse-item
+      .arco-collapse-item-icon-hover-right
+      > .arco-collapse-item-header-icon-down) {
+    transform: rotate(-180deg);
+  }
+
+  :global(.arco-collapse-item-header-title) {
+    width: 100%;
+
+    :global(.arco-upload-list-item) {
+      margin-top: 0;
+    }
+  }
+}

src/pages/albumWorks/create/index.tsx

@@ -14,7 +14,7 @@ const AllSteps = [
 ];
 
 function CreateAlbum() {
-  const [curStep, setCurStep] = useState(1);
+  const [curStep, setCurStep] = useState(2);
   const steps = useMemo(() => AllSteps.slice(0, curStep), [curStep]);
 
   const handleStep1Next = (step1Values) => {

src/pages/albumWorks/create/step2.tsx

@@ -8,7 +8,17 @@ import {
   Upload,
   Message,
   Space,
+  Card,
 } from '@arco-design/web-react';
+import {
+  IconUpload,
+  IconClose,
+  IconFileAudio,
+  IconFaceFrownFill,
+} from '@arco-design/web-react/icon';
+import { SongUploadItem } from './components/SongUploadItem';
+
+import type { UploadItem } from '@arco-design/web-react/es/Upload';
 
 import stylesIndex from './style/index.module.less';
 import styles from './style/step2.module.less';
@@ -58,6 +68,11 @@ const isAcceptFile = (file, accept) => {
 function CreateAlbumStep2(props: CreateAlbumStep1Props) {
   const [form] = useForm();
   const { onPre, onNext } = props || {};
+  const [songs, setSongs] = useState<any[]>([]);
+
+  const handleFileChange = (fileList) => {
+    setSongs(fileList);
+  };
 
   const handlePre = () => {
     onPre?.();
@@ -72,28 +87,83 @@ function CreateAlbumStep2(props: CreateAlbumStep1Props) {
 
   return (
     <>
-      <Upload
-        className={styles.uploadArea}
-        drag
-        multiple
-        accept="image/*"
-        action="/"
-        onDrop={(e) => {
-          const uploadFile = e.dataTransfer.files[0];
-          if (isAcceptFile(uploadFile, 'image/*')) {
-            return;
-          } else {
-            Message.info('不接受的文件类型，请重新上传指定文件类型~');
-          }
-        }}
-        tip={
-          <div className={styles.uploadAreaTip}>
-            {
-              '歌曲须为MP3/WAV，建议优先上传WAV播放效果更佳；音质≥320kbps，采样率≥44.1kHz，文件大小<200MB'
+      {songs && songs.length > 0 ? (
+        <div className={styles.uploadBtnWrap}>
+          <Upload
+            showUploadList={{
+              // reuploadIcon: <IconUpload />,
+              // reuploadIcon: (
+              //   <Button size="mini" type="text">
+              //     替换
+              //   </Button>
+              // ),
+              // cancelIcon: <IconClose />,
+              // fileIcon: <IconFileAudio />,
+              // previewIcon: null,
+              // errorIcon: <IconFaceFrownFill />,
+              fileName: (file) => {
+                return (
+                  <a
+                    onClick={() => {
+                      Message.info('click ' + file.name);
+                    }}
+                  >
+                    {file.name}
+                  </a>
+                );
+              },
+            }}
+            progressProps={{
+              formatText: (percent) => `${percent}%`,
+            }}
+            renderUploadItem={(
+              originNode: React.ReactNode,
+              file: UploadItem,
+              fileList: UploadItem[]
+            ) => {
+              return (
+                <SongUploadItem
+                  originNode={originNode}
+                  file={file}
+                  fileList={fileList}
+                />
+              );
+            }}
+            onReupload={(file: UploadItem) => {
+              console.log(123);
+            }}
+            multiple
+            listType="text"
+            action="/luoo-music/cms/song/upload/song"
+            fileList={songs}
+            onChange={handleFileChange}
+          />
+        </div>
+      ) : (
+        <Upload
+          className={styles.uploadArea}
+          drag
+          multiple
+          accept="image/*"
+          action="/luoo-music/cms/song/upload/song"
+          onDrop={(e) => {
+            const uploadFile = e.dataTransfer.files[0];
+            if (isAcceptFile(uploadFile, 'image/*')) {
+              return;
+            } else {
+              Message.info('不接受的文件类型，请重新上传指定文件类型~');
             }
-          </div>
-        }
-      />
+          }}
+          tip={
+            <div className={styles.uploadAreaTip}>
+              {
+                '歌曲须为MP3/WAV，建议优先上传WAV播放效果更佳；音质≥320kbps，采样率≥44.1kHz，文件大小<200MB'
+              }
+            </div>
+          }
+          onChange={handleFileChange}
+        />
+      )}
       <Form
         form={form}
         labelCol={{ flex: '100px' }}
@@ -104,7 +174,11 @@ function CreateAlbumStep2(props: CreateAlbumStep1Props) {
         <div className={stylesIndex.submitWrap}>
           <Space size={24}>
             <Button onClick={handlePre}>上一步</Button>
-            <Button type="primary" onClick={handleNext}>
+            <Button
+              type="primary"
+              disabled={!songs || songs?.length < 1}
+              onClick={handleNext}
+            >
               保存进入下一步
             </Button>
           </Space>

src/pages/albumWorks/create/style/step2.module.less

@@ -18,3 +18,7 @@
     margin-right: auto;
   }
 }
+
+.uploadBtnWrap {
+  width: 100%;
+}