From 6c9b39f5c7a1cc46b68a8f9020d55f996a8b1265 Mon Sep 17 00:00:00 2001 From: fadeaway Date: Mon, 3 Jun 2024 23:50:25 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=BB=BA=E4=B8=93=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/favicon.ico | Bin 0 -> 1538 bytes public/index.html | 20 +- src/components/AlbumItem/index.tsx | 51 +++++ .../AlbumItem/style/index.module.less | 108 +++++++++++ .../FormArtistInfo/FormArtistAvatar.tsx | 2 +- .../FormArtistInfo/FormBackendScreenshot.tsx | 2 +- .../FormArtistInfo/FormHomepageBackground.tsx | 2 +- .../UploadForm.tsx => UploadForm/index.tsx} | 0 .../style/UploadForm.module.less | 0 src/index.tsx | 2 +- src/layout.tsx | 25 ++- src/locale/index.ts | 2 + src/pages/albumWorks/create/index.tsx | 65 +++++++ src/pages/albumWorks/create/step1.tsx | 117 ++++++++++++ src/pages/albumWorks/create/step2.tsx | 117 ++++++++++++ src/pages/albumWorks/create/step3.tsx | 62 ++++++ .../albumWorks/create/style/index.module.less | 41 ++++ .../albumWorks/create/style/step1.module.less | 1 + .../albumWorks/create/style/step2.module.less | 20 ++ .../albumWorks/create/style/step3.module.less | 36 ++++ src/pages/albumWorks/index.tsx | 180 +++++++++++++++++- src/routes.ts | 16 +- src/style/global.less | 16 ++ src/style/layout.module.less | 3 - 24 files changed, 859 insertions(+), 29 deletions(-) create mode 100644 public/favicon.ico create mode 100644 src/components/AlbumItem/index.tsx create mode 100644 src/components/AlbumItem/style/index.module.less rename src/components/{FormArtistInfo/UploadForm.tsx => UploadForm/index.tsx} (100%) rename src/components/{FormArtistInfo => UploadForm}/style/UploadForm.module.less (100%) create mode 100644 src/pages/albumWorks/create/index.tsx create mode 100644 src/pages/albumWorks/create/step1.tsx create mode 100644 src/pages/albumWorks/create/step2.tsx create mode 100644 src/pages/albumWorks/create/step3.tsx create mode 100644 src/pages/albumWorks/create/style/index.module.less create mode 100644 src/pages/albumWorks/create/style/step1.module.less create mode 100644 src/pages/albumWorks/create/style/step2.module.less create mode 100644 src/pages/albumWorks/create/style/step3.module.less diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..100eb5b4c91b1fb293bf45c28c2bb7008940e389 GIT binary patch literal 1538 zcmex=dDF&IcpE-rwvvCu$szg+{F&cJY47mGY0A>3ceyriH6sAd9)T@(`J3}i0>vNh6?*hxt2S zy3EN-8`KzPmr! z%Axs9cft{4wiT;hEIxkZ^l~vyzHI*`ID!`bd-I<{pW-UV@lczMr<{CusIcMO*SD|oZ{(Wl)jjuHB1m&A!CDi|m`}`EHi*hMnrG zGhh8@SfuDD>yv4>zprGit)|zqjcqseWOp%Dx(Q!0@Ggr|z361@@q5RwzS5k<(-Zq_ znD((pE=>E+a4o#nH8oq$lA$p6roqk!KlfxA-Ab!ciIP>6SK?O`6{*y0*>3m7({atc zWrm&!{5SttUUu@({CF<5^Ypj<8o#+7XUw^`FKo%a4DM-q4<#GKHj3Ro$a%t3|C^ae zl7I9mQ*ITHtxgV$Y76{x|GfENp&e$}5-TPWG^x zkTp-mY0=YwO8!YJ`gZuPUa7<7a^Z@c)8DR&n~Fz#-RIj&O<`r&nfiGT!lum9v=}~fGxg(3q zoPWiPTX{BF7B6zsn`V0Abl**Bf1#?h#qz1=Zd`5Sd>HE~x-QDgYkP~3;_6=E`0(|M zHG4|lbF0nT5gTf-Y}Wfv*Tt8w-Fx!4)w_yyAMED6(blVHD*W(ULLh9yt4& - - - - - - 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 ( +
+ + + + + + + + + + +