diff --git a/src/pages/albumWorks/create/components/SongInfoItem/index.tsx b/src/pages/albumWorks/create/components/SongInfoItem/index.tsx new file mode 100644 index 0000000..0f5f907 --- /dev/null +++ b/src/pages/albumWorks/create/components/SongInfoItem/index.tsx @@ -0,0 +1,196 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import { + Radio, + Form, + InputNumber, + Input, + Select, + Checkbox, +} from '@arco-design/web-react'; +import { IconInfoCircle } from '@arco-design/web-react/icon'; + +import type { UploadItem } from '@arco-design/web-react/es/Upload'; + +export interface SongInfoItemProps { + originNode?: React.ReactNode; + file?: UploadItem; + fileList?: UploadItem[]; +} + +const { Item: FormItem, useForm, useWatch } = Form; +const RadioGroup = Radio.Group; +const { TextArea } = Input; + +const AlbumTypeOpt = [ + { + label: '录音室', + value: 'recordingStudio', + }, + { + label: 'Live', + value: 'live', + }, + { + label: 'Demo', + value: 'demo', + }, + { + label: '伴奏', + value: 'accompaniment', + }, + { + label: '其它', + value: 'other', + }, +]; + +const IsChargeOpt = [ + { + label: '收费', + value: 'charge', + }, + { + label: '免费', + value: 'free', + }, +]; + +export default function SongInfoItem(props: SongInfoItemProps) { + const { originNode, file, fileList } = props || {}; + const [form] = useForm(); + const [iamLyricist, setIamLyricist] = useState(false); // 我是作词人? + const [iamComposer, setIamComposer] = useState(false); // 我是作曲人? + const fileName = useMemo(() => file?.name, [file?.name]); + const filedNames = useMemo( + () => ({ + albumType: `${fileName}.albumType`, + isCharge: `${fileName}.isCharge`, + songPricing: `${fileName}.songPricing`, + singer: `${fileName}.singer`, + songStyle: `${fileName}.songStyle`, + language: `${fileName}.language`, + lyricist: `${fileName}.lyricist`, + composer: `${fileName}.composer`, + lyric: `${fileName}.lyric`, + }), + [fileName] + ); + + return ( + <> + + + + + + + + + + + } + placeholder="请输入歌手名称" + /> + + + + + + { + setIamLyricist(checked); + form?.setFieldValue('lyricist', checked ? 'me' : undefined); // TODO: + }} + > + 我是作词人 + + } + placeholder="请输入" + /> + + + { + setIamComposer(checked); + form?.setFieldValue('composer', checked ? 'me' : undefined); // TODO: + }} + > + 我是作曲人 + + } + placeholder="请输入" + /> + + +