update(page): Update vol page

next.config.mjs

@@ -8,6 +8,15 @@ const nextConfig = {
       },
     ];
   },
+  redirects: async () => {
+    return [
+      {
+        source: '/',
+        destination: '/vol/list/all',
+        permanent: true,
+      },
+    ];
+  },
 };
 
 export default nextConfig;

public/img/icon/audio-playing.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 7L8 18" stroke="#B44343" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M12 10L12 18" stroke="#B44343" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M16 15L16 18" stroke="#B44343" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/app/vol/[journalId]/page.tsx

@@ -1,30 +1,79 @@
-import { JournalCard, HotJournalList } from '@/components';
+import Image from 'next/image';
-import { apiGetJournalById, apiGetByJournalNo } from '@/services';
+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;
+  console.log({ a, b });
-  let journalInfo = null;
 
-  if (a) songList = a;
+  if (!a || !b) return;
-  if (b) journalInfo = b;
+  const songList = a;
+  const journalInfo = b;
 
   return (
-    <main className="flex flex-col w-[1200px] mx-auto items-left pt-[80px] pb-[104px] ">
+    <main className="w-[1200px] mx-auto flex flex-row justify-between items-left pt-[145px] pb-[104px] ">
-      {!!journalInfo && <JournalCard image={journalInfo.image} journalNo={journalInfo.journalNo} />}
+      <div className="w-[712px]">
-
+        {/* 封面 */}
-      <div>
+        <JournalCard image={journalInfo.image} journalNo={journalInfo.journalNo} />
-        {songList &&
+        {/* 期刊号 & 标签 */}
-          songList.map((item) => (
+        <div className="flex flex-row items-center gap-[9px] w-full h-auto mt-[30px]">
-            <div key={item.id} {...item}>
+          <p className="text-[rgba(0,0,0,0.7)] text-[14px] leading-[19.6px]">{`VOL·${journalInfo?.journalNo}`}</p>
-              {item.title}
+          {journalInfo.tags.length &&
+            journalInfo.tags.map((tag: string) => (
+              <Link
+                href="/"
+                key={tag}
+                className="block w-auto py-[3px] px-[10px] rounded-[15px] bg-[rgba(0,0,0,0.05)] text-[rgba(0,0,0,0.7)] text-[12px] leading-[12px]"
+              >
+                {tag}
+              </Link>
+            ))}
+        </div>
+
+        <div className="flex flex-row items-center justify-between w-full h-auto">
+          {/* 标题 */}
+          <div>
+            <div className="w-autp text-[24px] leading-[33.6px] my-[9px] text-base text-bold text-overflow">
+              {journalInfo.title}
+            </div>
+            {/* 作者 & 时间 */}
+            <div className="flex flex-row item-center text-[rgba(0,0,0,0.4)] text-[12px] leading-[16.8px] gap-[12px]">
+              <p>{journalInfo.editor}</p>
+              <p>{journalInfo.date}</p>
             </div>
-          ))}
+          </div>
+          {/* 收藏 */}
+          <div className="flex flex-row items-center gap-[9px]">
+            <p className="text-[rgba(0,0,0,0.4)] text-[13px] leading-[18.2px]">{`${journalInfo.totalCommentReply}人收藏`}</p>
+            <Image
+              width={24}
+              height={24}
+              src={journalInfo.haveCollect ? '/img/icon/love-active.svg' : '/img/icon/love.svg'}
+              alt="collect"
+            />
+          </div>
+        </div>
+        {/* 内容 */}
+        <div
+          className="mt-[24px] text-[15px] leading-[21px] text-base"
+          dangerouslySetInnerHTML={{ __html: journalInfo.content }}
+        />
+
+        {/* 卡片 */}
+        <SongCardList className="my-40px w-full" songList={songList} />
+
+        <Comment
+          commentList={journalInfo.commentList}
+          totalCommentReply={journalInfo.totalCommentReplyInt}
+          className="w-full"
+        />
       </div>
 
-      <div className="w-[346px] mt-[217px]">
+      <div className="w-[346px]">
         {/* 热门推荐 */}
         <HotJournalList type="hot" />
       </div>

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 (
+    <div className={className}>
+      <CommentForm />
+      {!!totalCommentReply && (
+        <>
+          <CommentHeader count={totalCommentReply} />
+          <CommentList commentList={commentList} />
+        </>
+      )}
+    </div>
+  );
+}

src/components/Comment/CommentForm.tsx

@@ -0,0 +1,3 @@
+export default function CommentItem() {
+  return <div></div>;
+}

src/components/Comment/CommentHeader.tsx

@@ -0,0 +1,16 @@
+export default function CommentHeader({ count }: { count: number }) {
+  return (
+    <div className="flex flex-row items-center justify-between">
+      <div className="flex flex-row items-center text-[15px] leading-[21px] gap-[12px]">
+        <div className="text-base">全部评论</div>
+        <div className="text-[rgba(0,0,0,0.4)]">{`${count}条`}</div>
+      </div>
+
+      <div className="flex flex-row items-center text-[14px] leading-[19.6px] gap-[12px]">
+        <div>热门</div>
+        <div className="text-[rgba(0,0,0,0.4)]">|</div>
+        <div className="text-[rgba(0,0,0,0.4)]">最新</div>
+      </div>
+    </div>
+  );
+}

src/components/Comment/CommentItem.tsx

@@ -0,0 +1,3 @@
+export default function CommentItem() {
+  return <div></div>;
+}

src/components/Comment/CommentList.tsx

@@ -0,0 +1,3 @@
+export default function CommentList({ commentList }: { commentList: Comment[] }) {
+  return <div></div>;
+}

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 (
     <div className="flex flex-row items-center h-[56px]">
-      <Image src={image} alt={title} width={80} height={56} unoptimized className="w-[80px] h-[56px] rounded-[3px]" />
+      <Link href={`/vol/${journalNo}`}>
+        <Image src={image} alt={title} width={80} height={56} unoptimized className="w-[80px] h-[56px] rounded-[3px]" />{' '}
+      </Link>
 
       <div className="flex flex-col justify-between h-full ml-[20px] py-[6px]">
-        <p className="w-[200px] text-[15px] leading-[21px]  overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
+        <p className="w-[200px] text-[15px] leading-[21px] cursor-pointer hover:color-theme overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
           {title}
         </p>
-        <p className="text-[13px] leading-[18.2px]">{`${totalCommentReply}人收藏`}</p>
+        <p className="text-[13px] leading-[18.2px] cursor-pointer hover:color-theme">{`${totalCommentReply}人收藏`}</p>
       </div>
     </div>
   );

src/components/Journal/HotJournalList.tsx

@@ -27,12 +27,7 @@ const RecommondJournal = async (prop: any) => {
 
       {/* 期刊 list */}
       <div className="flex flex-col gap-[30px] mt-[17px]">
-        {journalList?.length &&
+        {journalList?.length && journalList.map((item: JournalInfo) => <HotJournalCard key={item.id} {...item} />)}
-          journalList.map((item: JournalInfo) => (
-            <Link key={item.id} href={`/vol/${item.journalNo}`}>
-              <HotJournalCard key={item.id} {...item} />
-            </Link>
-          ))}
       </div>
     </div>
   );

src/components/Journal/JournalItem.tsx

@@ -13,12 +13,12 @@ export default function JournalItem({
   commentList,
 }: JournalInfo) {
   return (
-    <div className="flex flex-col w-[712px] rounded-[6px] bg-[#fff] ">
+    <div className="flex flex-col w-[712px] rounded-[6px] bg-base ">
       <Link href={`/vol/${journalNo}`}>
         <JournalCard image={image} title={title} journalNo={journalNo} />
       </Link>
       {/* 摘要 */}
-      <p className="w-full mt-[15px] mb-[12px] text-[17px] leading-[23.8px] text-[#000] overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
+      <p className="w-full mt-[15px] mb-[12px] text-[17px] leading-[23.8px] text-base hover:color-theme cursor-pointer overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
         {summary}
       </p>
       {/* 精选评论 */}
@@ -32,7 +32,7 @@ export default function JournalItem({
               </div>
             )}
           </div>
-          <p className="w-[270px] text-[14px] leading-[20px] text-[rgba(0,0,0,0.7)]  overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
+          <p className="w-[270px] text-[14px] leading-[20px] text-[rgba(0,0,0,0.7)] hover:color-theme cursor-pointer overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
             {commentList[0].content}
           </p>
         </div>
@@ -41,7 +41,7 @@ export default function JournalItem({
       {/* 评论 & 收藏 */}
       <div className="flex flex-row items-center">
         <Image width={24} height={24} src={'/img/icon/comment.svg'} alt="comment" unoptimized />
-        <p className="w-[42px] ml-[6px] mr-[24px] text-[14px] leading-[16px] text-[rgba(0,0,0,0.4)]">
+        <p className="w-[42px] ml-[6px] mr-[24px] text-[14px] leading-[16px] text-[rgba(0,0,0,0.4) cursor-pointer hover:color-theme">
           {totalCommentReply}
         </p>
         <Image
@@ -51,7 +51,9 @@ export default function JournalItem({
           alt="love"
           unoptimized
         />
-        <p className="ml-[6px] text-[14px] leading-[16px] text-[rgba(0,0,0,0.4)]">{totalCommentReply}</p>
+        <p className="ml-[6px] text-[14px] leading-[16px] text-[rgba(0,0,0,0.4) cursor-pointer hover:color-theme">
+          {totalCommentReply}
+        </p>
       </div>
     </div>
   );

src/components/Journal/JournalList.tsx

@@ -29,7 +29,7 @@ const JournalList = async ({ categoryId, nameCh, journalNoRange, pageNum, pageSi
         <div className="text-[17px] leading-[23.8px]">{nameCh}</div>
         <div className="flex flex-row items-center cursor-pointer">
           <Image className="mr-[6px]" width={24} height={24} src={'/img/icon/fm.svg'} alt="FM" />
-          <p className="text-[15px] leading-[21px]">电台</p>
+          <p className="text-[15px] leading-[21px] cursor-pointer hover:text-theme">电台</p>
         </div>
       </div>
 

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 (
+    <Link
+      href={`/single/${id}`}
+      className="flex flex-row items-center justify-between w-full h-[72px] py-[12px] px-[18px] rounded-[3px] hover:bg-[#f2f3f7] group"
+    >
+      {/* left */}
+      <div className="flex flex-row items-center">
+        <Image width={48} height={48} src={pic} alt={title} className="w-[48px] h-[48px] overflow-hidden" unoptimized />
+        <div className="flex flex-col justify-between ml-[15px]">
+          <div className="text-[15px] leading-[21px] text-base group-hover:text-theme">{title}</div>
+          <div className="text-[13px] leading-[18.2px] text-[rgba(0,0,0,0.7)] group-hover:text-theme">{artist}</div>
+        </div>
+      </div>
+
+      {/* right */}
+      <div className="flex flex-row items-center">
+        <Image
+          width={24}
+          height={24}
+          src={'/img/icon/audio-playing.svg'}
+          alt={title}
+          className="w-[24px] h-[24px] overflow-hidden"
+        />
+
+        <p className="ml-[30px] mr-[13px] text-[12px] leading-[16.8px] text-[rgba(0,0,0,0.4)]">05:09</p>
+
+        <Image
+          width={24}
+          height={24}
+          src={haveCollect ? '/img/icon/love-active.svg' : '/img/icon/love.svg'}
+          alt={title}
+          className="w-[24px] h-[24px] overflow-hidden"
+        />
+      </div>
+    </Link>
+  );
+}

src/components/Song/SongCardList.tsx

@@ -0,0 +1,14 @@
+/**
+ * 歌曲卡片
+ */
+import { SongCard } from '@/components';
+
+export default function JournalItem({ songList, className }: { songList: SongInfo[]; className?: string }) {
+  return (
+    <div className={`${className}`}>
+      {songList.map((song: SongInfo) => (
+        <SongCard key={song.id} {...song} />
+      ))}
+    </div>
+  );
+}

src/components/common/InputArea.tsx

@@ -0,0 +1,3 @@
+export function InputArea() {
+  return <div></div>;
+}

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';

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<SongInfo[]> = await request(`/luoo-music/song/getByJournalNo/${id}`);
   return verifyResponse(res);
 };

uno.config.ts

@@ -1,14 +1,31 @@
-import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss';
+import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss';
-
+
-export default defineConfig({
+export default defineConfig({
-  presets: [
+  presets: [
-    presetUno(),
+    presetUno(),
-    presetAttributify(),
+    presetAttributify(),
-    presetIcons({
+    presetIcons({
-      extraProperties: {
+      extraProperties: {
-        display: 'inline-block',
+        display: 'inline-block',
-        'vertical-align': 'middle',
+        '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',
+  },
+});