From bd6d0ada992de650424232233e4aafe4811abd38 Mon Sep 17 00:00:00 2001 From: mackt <1033530438@qq.com> Date: Thu, 28 Mar 2024 23:28:41 +0800 Subject: [PATCH] update(page): Update vol page --- next.config.mjs | 9 +++ public/img/icon/audio-playing.svg | 5 ++ src/app/vol/[journalId]/page.tsx | 83 ++++++++++++++++++----- src/components/Comment/Comment.tsx | 23 +++++++ src/components/Comment/CommentForm.tsx | 3 + src/components/Comment/CommentHeader.tsx | 16 +++++ src/components/Comment/CommentItem.tsx | 3 + src/components/Comment/CommentList.tsx | 3 + src/components/Journal/HotJournalCard.tsx | 11 +-- src/components/Journal/HotJournalList.tsx | 7 +- src/components/Journal/JournalItem.tsx | 12 ++-- src/components/Journal/JournalList.tsx | 2 +- src/components/{Music => Song}/Full.tsx | 0 src/components/Song/SongCard.tsx | 41 +++++++++++ src/components/Song/SongCardList.tsx | 14 ++++ src/components/common/InputArea.tsx | 3 + src/components/index.ts | 11 +++ src/services/server/music.ts | 2 +- uno.config.ts | 45 ++++++++---- 19 files changed, 245 insertions(+), 48 deletions(-) create mode 100644 public/img/icon/audio-playing.svg create mode 100644 src/components/Comment/Comment.tsx create mode 100644 src/components/Comment/CommentForm.tsx create mode 100644 src/components/Comment/CommentHeader.tsx create mode 100644 src/components/Comment/CommentItem.tsx create mode 100644 src/components/Comment/CommentList.tsx rename src/components/{Music => Song}/Full.tsx (100%) create mode 100644 src/components/Song/SongCard.tsx create mode 100644 src/components/Song/SongCardList.tsx create mode 100644 src/components/common/InputArea.tsx diff --git a/next.config.mjs b/next.config.mjs index a86ff8e..7642c41 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -8,6 +8,15 @@ const nextConfig = { }, ]; }, + redirects: async () => { + return [ + { + source: '/', + destination: '/vol/list/all', + permanent: true, + }, + ]; + }, }; export default nextConfig; diff --git a/public/img/icon/audio-playing.svg b/public/img/icon/audio-playing.svg new file mode 100644 index 0000000..b3c93d4 --- /dev/null +++ b/public/img/icon/audio-playing.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/vol/[journalId]/page.tsx b/src/app/vol/[journalId]/page.tsx index 67e22d5..6e83678 100644 --- a/src/app/vol/[journalId]/page.tsx +++ b/src/app/vol/[journalId]/page.tsx @@ -1,30 +1,79 @@ -import { JournalCard, HotJournalList } from '@/components'; -import { apiGetJournalById, apiGetByJournalNo } from '@/services'; +import Image from 'next/image'; +import Link from 'next/link'; + +import { JournalCard, SongCardList, HotJournalList, Comment } from '@/components'; +import { apiGetJournalById, apiGetSongsByJournalNo } from '@/services'; export default async function JournalDetail({ params: { journalId } }: { params: { journalId: string } }) { // const router = useRouter(); - const [a, b] = await Promise.all([apiGetByJournalNo({ id: journalId }), apiGetJournalById({ id: journalId })]); + const [a, b] = await Promise.all([apiGetSongsByJournalNo({ id: journalId }), apiGetJournalById({ id: journalId })]); - let songList = null; - let journalInfo = null; + console.log({ a, b }); - if (a) songList = a; - if (b) journalInfo = b; + if (!a || !b) return; + const songList = a; + const journalInfo = b; return ( -
- {!!journalInfo && } - -
- {songList && - songList.map((item) => ( -
- {item.title} +
+
+ {/* 封面 */} + + {/* 期刊号 & 标签 */} +
+

{`VOL·${journalInfo?.journalNo}`}

+ {journalInfo.tags.length && + journalInfo.tags.map((tag: string) => ( + + {tag} + + ))} +
+ +
+ {/* 标题 */} +
+
+ {journalInfo.title} +
+ {/* 作者 & 时间 */} +
+

{journalInfo.editor}

+

{journalInfo.date}

- ))} +
+ {/* 收藏 */} +
+

{`${journalInfo.totalCommentReply}人收藏`}

+ collect +
+
+ {/* 内容 */} +
+ + {/* 卡片 */} + + +
-
+
{/* 热门推荐 */}
diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx new file mode 100644 index 0000000..1d5e76e --- /dev/null +++ b/src/components/Comment/Comment.tsx @@ -0,0 +1,23 @@ +import { CommentForm, CommentHeader, CommentList } from '@/components'; + +export default function Comment({ + commentList, + className, + totalCommentReply, +}: { + commentList: any; + className?: string; + totalCommentReply: number; +}) { + return ( +
+ + {!!totalCommentReply && ( + <> + + + + )} +
+ ); +} diff --git a/src/components/Comment/CommentForm.tsx b/src/components/Comment/CommentForm.tsx new file mode 100644 index 0000000..590a6a5 --- /dev/null +++ b/src/components/Comment/CommentForm.tsx @@ -0,0 +1,3 @@ +export default function CommentItem() { + return
; +} diff --git a/src/components/Comment/CommentHeader.tsx b/src/components/Comment/CommentHeader.tsx new file mode 100644 index 0000000..5336992 --- /dev/null +++ b/src/components/Comment/CommentHeader.tsx @@ -0,0 +1,16 @@ +export default function CommentHeader({ count }: { count: number }) { + return ( +
+
+
全部评论
+
{`${count}条`}
+
+ +
+
热门
+
|
+
最新
+
+
+ ); +} diff --git a/src/components/Comment/CommentItem.tsx b/src/components/Comment/CommentItem.tsx new file mode 100644 index 0000000..590a6a5 --- /dev/null +++ b/src/components/Comment/CommentItem.tsx @@ -0,0 +1,3 @@ +export default function CommentItem() { + return
; +} diff --git a/src/components/Comment/CommentList.tsx b/src/components/Comment/CommentList.tsx new file mode 100644 index 0000000..a1ba10e --- /dev/null +++ b/src/components/Comment/CommentList.tsx @@ -0,0 +1,3 @@ +export default function CommentList({ commentList }: { commentList: Comment[] }) { + return
; +} diff --git a/src/components/Journal/HotJournalCard.tsx b/src/components/Journal/HotJournalCard.tsx index 7dadd09..5ce74a7 100644 --- a/src/components/Journal/HotJournalCard.tsx +++ b/src/components/Journal/HotJournalCard.tsx @@ -1,15 +1,18 @@ import Image from 'next/image'; +import Link from 'next/link'; -export default function JournalItem({ title, image, totalCommentReply }: JournalInfo) { +export default function JournalItem({ title, image, totalCommentReply, journalNo }: JournalInfo) { return (
- {title} + + {title}{' '} +
-

+

{title}

-

{`${totalCommentReply}人收藏`}

+

{`${totalCommentReply}人收藏`}

); diff --git a/src/components/Journal/HotJournalList.tsx b/src/components/Journal/HotJournalList.tsx index a1f96eb..b0d815b 100644 --- a/src/components/Journal/HotJournalList.tsx +++ b/src/components/Journal/HotJournalList.tsx @@ -27,12 +27,7 @@ const RecommondJournal = async (prop: any) => { {/* 期刊 list */}
- {journalList?.length && - journalList.map((item: JournalInfo) => ( - - - - ))} + {journalList?.length && journalList.map((item: JournalInfo) => )}
); diff --git a/src/components/Journal/JournalItem.tsx b/src/components/Journal/JournalItem.tsx index 63b5346..338a1de 100644 --- a/src/components/Journal/JournalItem.tsx +++ b/src/components/Journal/JournalItem.tsx @@ -13,12 +13,12 @@ export default function JournalItem({ commentList, }: JournalInfo) { return ( -
+
{/* 摘要 */} -

+

{summary}

{/* 精选评论 */} @@ -32,7 +32,7 @@ export default function JournalItem({
)}
-

+

{commentList[0].content}

@@ -41,7 +41,7 @@ export default function JournalItem({ {/* 评论 & 收藏 */}
comment -

+

{totalCommentReply}

love -

{totalCommentReply}

+

+ {totalCommentReply} +

); diff --git a/src/components/Journal/JournalList.tsx b/src/components/Journal/JournalList.tsx index a229e19..345a876 100644 --- a/src/components/Journal/JournalList.tsx +++ b/src/components/Journal/JournalList.tsx @@ -29,7 +29,7 @@ const JournalList = async ({ categoryId, nameCh, journalNoRange, pageNum, pageSi
{nameCh}
FM -

电台

+

电台

diff --git a/src/components/Music/Full.tsx b/src/components/Song/Full.tsx similarity index 100% rename from src/components/Music/Full.tsx rename to src/components/Song/Full.tsx diff --git a/src/components/Song/SongCard.tsx b/src/components/Song/SongCard.tsx new file mode 100644 index 0000000..e895044 --- /dev/null +++ b/src/components/Song/SongCard.tsx @@ -0,0 +1,41 @@ +import Image from 'next/image'; +import Link from 'next/link'; + +export default function JournalItem({ id, title, pic, artist, haveCollect }: SongInfo) { + return ( + + {/* left */} +
+ {title} +
+
{title}
+
{artist}
+
+
+ + {/* right */} +
+ {title} + +

05:09

+ + {title} +
+ + ); +} diff --git a/src/components/Song/SongCardList.tsx b/src/components/Song/SongCardList.tsx new file mode 100644 index 0000000..d3c1bad --- /dev/null +++ b/src/components/Song/SongCardList.tsx @@ -0,0 +1,14 @@ +/** + * 歌曲卡片 + */ +import { SongCard } from '@/components'; + +export default function JournalItem({ songList, className }: { songList: SongInfo[]; className?: string }) { + return ( +
+ {songList.map((song: SongInfo) => ( + + ))} +
+ ); +} diff --git a/src/components/common/InputArea.tsx b/src/components/common/InputArea.tsx new file mode 100644 index 0000000..8c40f71 --- /dev/null +++ b/src/components/common/InputArea.tsx @@ -0,0 +1,3 @@ +export function InputArea() { + return
; +} diff --git a/src/components/index.ts b/src/components/index.ts index cacd034..c55b61e 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -26,3 +26,14 @@ export { default as Avatar } from './Avatar'; // Audio Player export { default as PlayerBar } from './AudioPlayer/PlayerBar'; export { default as AudioPlayer } from './AudioPlayer/Player'; + +// Song +export { default as SongCard } from './Song/SongCard'; +export { default as SongCardList } from './Song/SongCardList'; + +// Comment +export { default as Comment } from './Comment/Comment'; +export { default as CommentHeader } from './Comment/CommentHeader'; +export { default as CommentForm } from './Comment/CommentForm'; +export { default as CommentItem } from './Comment/CommentItem'; +export { default as CommentList } from './Comment/CommentList'; diff --git a/src/services/server/music.ts b/src/services/server/music.ts index 61b5710..423f06c 100644 --- a/src/services/server/music.ts +++ b/src/services/server/music.ts @@ -4,7 +4,7 @@ import { request, verifyResponse } from '@/utils'; * @description 根据期刊号查询期刊信息 * @id 期刊号 */ -export const apiGetByJournalNo = async ({ id }: { id: string }) => { +export const apiGetSongsByJournalNo = async ({ id }: { id: string }) => { const res: FetchResponse = await request(`/luoo-music/song/getByJournalNo/${id}`); return verifyResponse(res); }; diff --git a/uno.config.ts b/uno.config.ts index 2326b22..a4060dc 100644 --- a/uno.config.ts +++ b/uno.config.ts @@ -1,14 +1,31 @@ -import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'; - -export default defineConfig({ - presets: [ - presetUno(), - presetAttributify(), - presetIcons({ - extraProperties: { - display: 'inline-block', - 'vertical-align': 'middle', - }, - }), - ], -}); +import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'; + +export default defineConfig({ + presets: [ + presetUno(), + presetAttributify(), + presetIcons({ + extraProperties: { + display: 'inline-block', + 'vertical-align': 'middle', + }, + }), + ], + + rules: [ + ['color-theme', { color: '#B44343' }], + ['bg-theme', { 'background-color': '#B44343' }], + ['text-flow', { 'text-overflow': 'ellipsis', 'white-space': 'nowrap', overflow: 'hidden' }], + ], + + shortcuts: { + 'switch-animation': 'transition duration-300', + 'bg-base': 'bg-[#fff] dark:bg-[#20202a] switch-animation', + 'card-base': 'bg-[#ffffff] dark:bg-[#10101a] switch-animation', + 'text-base': 'text-[rgba(0,0,0,0.95)] dark:text-[#f0f0f0] switch-animation', + 'switch-label-base': 'bg-gray-200 dark:bg-gray-800 switch-animation', + 'switch-span-base': 'bg-white dark:bg-gray-300 switch-animation', + 'text-theme': 'text-[#B44343]', + 'text-overflow': 'overflow-hidden whitespace-nowrap overflow-ellipsis truncate', + }, +});