diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..100eb5b Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index e2d0c1e..8a19ca0 100644 --- a/public/index.html +++ b/public/index.html @@ -1,13 +1,13 @@ - - - - - - Arco Design Pro - 开箱即用的中台前端/设计解决方案 - - -
- + + + + + + 雀乐音乐人 + + +
+ diff --git a/src/components/AlbumItem/index.tsx b/src/components/AlbumItem/index.tsx new file mode 100644 index 0000000..a320a82 --- /dev/null +++ b/src/components/AlbumItem/index.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { Image, Space, Button } from '@arco-design/web-react'; +import { + IconHeart, + IconThumbUp, + IconMessage, +} from '@arco-design/web-react/icon'; + +import styles from './style/index.module.less'; + +export interface AlbumItemProps { + data: any; +} + +function AlbumItem(props?: AlbumItemProps) { + const { data } = props || {}; + + return ( +
+
+ 专辑封面 +
{data.name}
+

{data.desc}

+

+ 收益 ￥{data.income} +

+
+ + + {data.collection} + + + + {data.like} + + + + {data.comment} + +
+
+ + + +
+ ); +} + +export default AlbumItem; diff --git a/src/components/AlbumItem/style/index.module.less b/src/components/AlbumItem/style/index.module.less new file mode 100644 index 0000000..1769ada --- /dev/null +++ b/src/components/AlbumItem/style/index.module.less @@ -0,0 +1,108 @@ +.wrap { + width: 175px; + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + border-radius: 2px; + + &:hover .contWrap { + border-color: #165dff; + } +} + +.contWrap { + width: 100%; + padding: 15px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: #f7f8fa; + transition: border-color 0.3s; + border: 1px solid #f7f8fa; + border-radius: 2px; +} + +.img { + width: 145px; + height: 145px; +} + +.name { + width: 100%; + font-family: PingFang SC; + font-size: 14px; + font-weight: 500; + line-height: 19.6px; + text-align: left; + color: #1d2129; + margin-top: 5px; + margin-bottom: 0; +} + +.desc { + width: 100%; + font-family: PingFang SC; + font-size: 12px; + font-weight: 400; + line-height: 16.8px; + text-align: left; + color: #4e5969; + margin-top: 5px; + margin-bottom: 0; +} + +.income { + width: 100%; + font-family: PingFang SC; + font-size: 12px; + font-weight: 400; + line-height: 16.8px; + text-align: left; + color: #86909c; + margin-top: 5px; + margin-bottom: 0; + + .incomeMoney { + font-family: PingFang SC; + font-size: 12px; + font-weight: 400; + line-height: 16.8px; + text-align: left; + color: #1d2129; + } +} + +.other { + width: 100%; + color: #86909c; + font-size: 12px; + margin-top: 5px; + margin-bottom: 0; + display: flex; + align-items: center; + justify-content: space-between; + + .otherItem { + display: flex; + align-items: center; + } +} + +.status { + width: 100%; + box-sizing: border-box; + // padding-left: 15px; + // padding-right: 15px; + text-align: left; + margin-top: 9px; + + :global(.arco-btn) { + font-family: PingFang SC; + font-size: 14px; + font-weight: 400; + color: #4e5969; + } +} diff --git a/src/components/FormArtistInfo/FormArtistAvatar.tsx b/src/components/FormArtistInfo/FormArtistAvatar.tsx index 3184313..4721159 100644 --- a/src/components/FormArtistInfo/FormArtistAvatar.tsx +++ b/src/components/FormArtistInfo/FormArtistAvatar.tsx @@ -1,6 +1,6 @@ import React from 'react'; import AvatarPng from '@/assets/avatar.png'; -import UploadForm from './UploadForm'; +import UploadForm from '@/components/UploadForm'; // 艺人头像 const FormArtistAvatar = () => { diff --git a/src/components/FormArtistInfo/FormBackendScreenshot.tsx b/src/components/FormArtistInfo/FormBackendScreenshot.tsx index 4fdb75f..054cc61 100644 --- a/src/components/FormArtistInfo/FormBackendScreenshot.tsx +++ b/src/components/FormArtistInfo/FormBackendScreenshot.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import UploadForm from './UploadForm'; +import UploadForm from '@/components/UploadForm'; // 后台截图 const FormBackendScreenshot = () => { diff --git a/src/components/FormArtistInfo/FormHomepageBackground.tsx b/src/components/FormArtistInfo/FormHomepageBackground.tsx index d431866..ae777ae 100644 --- a/src/components/FormArtistInfo/FormHomepageBackground.tsx +++ b/src/components/FormArtistInfo/FormHomepageBackground.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import UploadForm from './UploadForm'; +import UploadForm from '@/components/UploadForm'; // 主页背景 const FormHomepageBackground = () => { diff --git a/src/components/FormArtistInfo/UploadForm.tsx b/src/components/UploadForm/index.tsx similarity index 100% rename from src/components/FormArtistInfo/UploadForm.tsx rename to src/components/UploadForm/index.tsx diff --git a/src/components/FormArtistInfo/style/UploadForm.module.less b/src/components/UploadForm/style/UploadForm.module.less similarity index 100% rename from src/components/FormArtistInfo/style/UploadForm.module.less rename to src/components/UploadForm/style/UploadForm.module.less diff --git a/src/index.tsx b/src/index.tsx index dd8c41e..6b33ac4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -21,7 +21,7 @@ import './mock'; const store = createStore(rootReducer); function Index() { - const [lang, setLang] = useStorage('arco-lang', 'en-US'); + const [lang, setLang] = useStorage('arco-lang', 'zh-CN'); const [theme, setTheme] = useStorage('arco-theme', 'light'); const isLogin = useMemo(() => checkLogin(), []); diff --git a/src/layout.tsx b/src/layout.tsx index 0eac710..4ddf954 100644 --- a/src/layout.tsx +++ b/src/layout.tsx @@ -109,6 +109,23 @@ function PageLayout() { const flattenRoutes = useMemo(() => getFlattenRoutes(routes) || [], [routes]); + const layoutBgc = useMemo( + () => ({ backgroundColor: showMenu ? '#fff' : '#f2f3f7' }), + [showMenu] + ); + + const layoutMainContentPadding = useMemo( + () => + showMenu + ? { + paddingTop: '15px', + paddingLeft: '30px', + paddingBottom: '50px', + } + : {}, + [showMenu] + ); + function renderRoutes(locale) { routeMap.current.clear(); return function travel(_routes: IRoute[], level, parentNode = []) { @@ -197,7 +214,7 @@ function PageLayout() { }, [pathname]); return ( - +
{showMenu && ( @@ -226,7 +243,10 @@ function PageLayout() { )} - + {!!breadcrumb.length && (
@@ -243,6 +263,7 @@ function PageLayout() { {flattenRoutes.map((route, index) => { return ( AllSteps.slice(0, curStep), [curStep]); + + const handleStep1Next = (step1Values) => { + console.log(step1Values); + setCurStep(2); + }; + + const handleStep2Pre = () => { + setCurStep(1); + }; + + const handleStep2Next = () => { + setCurStep(3); + }; + + const handleStep3Next = () => { + // TOOD: + }; + + return ( +
+ + {steps.map((node, index) => ( + {node.title} + ))} + +
+ + {AllSteps.map(({ title, desc }) => ( + + ))} + + {curStep === 1 && } + {curStep === 2 && ( + + )} + {curStep === 3 && } +
+ {curStep === 3 && } +
+ ); +} + +export default CreateAlbum; diff --git a/src/pages/albumWorks/create/step1.tsx b/src/pages/albumWorks/create/step1.tsx new file mode 100644 index 0000000..193dd6e --- /dev/null +++ b/src/pages/albumWorks/create/step1.tsx @@ -0,0 +1,117 @@ +import React, { useMemo, useState } from 'react'; +import { + Form, + Input, + Select, + DatePicker, + Button, +} from '@arco-design/web-react'; +import UploadForm from '@/components/UploadForm'; + +import stylesIndex from './style/index.module.less'; +import styles from './style/step1.module.less'; + +export interface CreateAlbumStep1Props { + onNext?: (arg0: any) => void; +} + +const { Item: FormItem, useForm } = Form; +const { TextArea } = Input; + +const AlbumVersionOptions = [{ label: '录音室版本', value: '1' }]; + +const AlbumTypeOptions = [{ label: 'EP', value: '1' }]; + +const AlbumStypeOptions = [ + { label: '后摇', value: '1' }, + { label: '后朋克', value: '2' }, +]; + +function CreateAlbumStep1(props: CreateAlbumStep1Props) { + const [form] = useForm(); + const { onNext } = props || {}; + + const handleNext = () => { + form.validate().then((values) => { + console.log(values); + onNext?.(values); + }); + }; + + return ( +
+ + + + + + + + + + +