From c915bb2d18200c31de5c2246e2d08e45e4f86bf9 Mon Sep 17 00:00:00 2001
From: non_hana <1209220829@qq.com>
Date: Fri, 12 Jul 2024 17:35:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../work-detail/view-list/index.tsx           |  6 ++
 .../work-detail/work-info/index.tsx           | 92 +++++++++++--------
 src/pages/work-detail/index.tsx               |  3 +-
 src/utils/types.ts                            |  4 +-
 4 files changed, 65 insertions(+), 40 deletions(-)

diff --git a/src/components/work-detail/view-list/index.tsx b/src/components/work-detail/view-list/index.tsx
index bf50452..b71eff1 100644
--- a/src/components/work-detail/view-list/index.tsx
+++ b/src/components/work-detail/view-list/index.tsx
@@ -387,6 +387,10 @@ const ViewList: FC<ViewListProps> = ({
         </div>
         <div
           style={{
+            margin:
+              currentList !== 'userWorkList' && currentList !== 'recommendWorkList'
+                ? '0 '
+                : '-5px 0',
             height: 0,
             padding:
               currentList !== 'userWorkList' && currentList !== 'recommendWorkList'
@@ -412,6 +416,7 @@ const ViewList: FC<ViewListProps> = ({
         </div>
         <div
           style={{
+            margin: currentList === 'recommendWorkList' ? '0 ' : '-5px 0',
             height: 0,
             padding: currentList === 'recommendWorkList' ? '45px 0 ' : '0',
           }}
@@ -466,6 +471,7 @@ const ViewList: FC<ViewListProps> = ({
         </div>
         <div
           style={{
+            margin: currentList === 'userWorkList' ? '0 ' : '-10px 0',
             height: 0,
             padding: currentList === 'userWorkList' ? '45px 0 ' : '0',
           }}
diff --git a/src/components/work-detail/work-info/index.tsx b/src/components/work-detail/work-info/index.tsx
index 547e183..e2731ad 100644
--- a/src/components/work-detail/work-info/index.tsx
+++ b/src/components/work-detail/work-info/index.tsx
@@ -23,6 +23,7 @@ import LazyImg from '@/components/common/lazy-img'
 import { CSSTransition } from 'react-transition-group'
 import ImgLoadingSkeleton from '@/components/skeleton/img-loading'
 import { setCurrentList } from '@/store/modules/viewList'
+import LabelItem from '@/components/common/label-item'
 
 const { confirm } = Modal
 const CheckboxGroup = Checkbox.Group
@@ -42,6 +43,32 @@ type WorkInfoProps = {
   isFinal: boolean
 }
 
+const WorkStatusMark: FC<{ status: number }> = ({ status }) => {
+  switch (status) {
+    case 0:
+      return (
+        <span className='flex items-center gap-5px px-2 b-solid b-2px rd-full font-size-14px color-#0090F0'>
+          原创作品
+          <Icon width={24} color='#0090F0' icon='material-symbols:edit-outline' />
+        </span>
+      )
+    case 1:
+      return (
+        <span className='flex items-center gap-5px px-2 b-solid b-2px rd-full font-size-14px color-#0090F0'>
+          转载作品
+          <Icon width={24} color='#0090F0' icon='material-symbols:school-outline' />
+        </span>
+      )
+    case 2:
+      return (
+        <span className='flex items-center gap-5px px-2 b-solid b-2px rd-full font-size-14px color-#0090F0'>
+          合集作品
+          <Icon width={24} color='#0090F0' icon='material-symbols:book-outline' />
+        </span>
+      )
+  }
+}
+
 const WorkInfo: FC<WorkInfoProps> = ({
   workId,
   workInfo,
@@ -296,7 +323,8 @@ const WorkInfo: FC<WorkInfoProps> = ({
           )}
           {/* 操作栏 */}
           {isLogin && (
-            <div className='w-full mt-10px flex justify-end'>
+            <div className='w-full my-5 flex justify-between'>
+              <WorkStatusMark status={workInfo.reprintType} />
               <div className='flex gap-40px'>
                 <Icon
                   className='cursor-pointer'
@@ -333,51 +361,42 @@ const WorkInfo: FC<WorkInfoProps> = ({
             </div>
           )}
           {/* 作品信息 */}
-          <div className='w-150 mt-10px flex flex-col gap-10px'>
-            <div className='font-bold font-size-18px color-#3d3d3d'>
-              <span>{workInfo.name}</span>
+          <div className='mt-10px flex flex-col gap-10px'>
+            <div className='flex gap-10px items-center'>
+              <span className='font-bold font-size-18px color-#3d3d3d'>{workInfo.name}</span>
             </div>
-            <div className='font-size-14px color-#858585 line-height-normal'>
+            <div className='py-10px font-size-14px color-#858585 line-height-normal'>
               <span>{workIntro}</span>
             </div>
-            <div className='flex flex-wrap gap-5 font-size-14px'>
-              <span className='font-bold color-#0090F0'>
-                {workInfo.reprintType === 0
-                  ? '原创作品'
-                  : workInfo.reprintType === 1
-                    ? '转载作品'
-                    : '合集作品'}
-              </span>
+            <LayoutList scrollType='label'>
               {workInfo.labels.map((label) => (
-                <Link
-                  to={`/search-result?label=${label.label}&type=work&sortType=new`}
-                  key={label.value}>
-                  #{label.label}
-                </Link>
+                <LabelItem key={label.id} {...label} />
               ))}
-            </div>
-            <div className='flex my-3 gap-20px'>
-              <div className='flex items-center gap-10px font-bold font-size-14px color-#858585'>
-                <Icon width='16px' color='#858585' icon='ant-design:heart-filled' />
-                <span>{workInfo.likeNum}</span>
-              </div>
-              <div className='flex items-center gap-10px font-bold font-size-14px color-#858585'>
-                <Icon width='16px' color='#858585' icon='ant-design:eye-filled' />
-                <span> {workInfo.viewNum}</span>
+            </LayoutList>
+            <div className='flex justify-between items-start my-3'>
+              <div className='flex gap-20px'>
+                <div className='flex items-center gap-10px font-bold font-size-14px color-#858585'>
+                  <Icon width='16px' color='#858585' icon='ant-design:heart-filled' />
+                  <span>{workInfo.likeNum}</span>
+                </div>
+                <div className='flex items-center gap-10px font-bold font-size-14px color-#858585'>
+                  <Icon width='16px' color='#858585' icon='ant-design:eye-filled' />
+                  <span> {workInfo.viewNum}</span>
+                </div>
+                <div className='flex items-center gap-10px font-bold font-size-14px color-#858585'>
+                  <Icon width='16px' color='#858585' icon='ant-design:star-filled' />
+                  <span>{workInfo.collectNum}</span>
+                </div>
               </div>
-              <div className='flex items-center gap-10px font-bold font-size-14px color-#858585'>
-                <Icon width='16px' color='#858585' icon='ant-design:star-filled' />
-                <span>{workInfo.collectNum}</span>
+              <div className='flex flex-col gap-10px font-italic font-size-14px color-#858585'>
+                <span>发布日期：{workInfo.createdDate}</span>
+                <span>更新日期：{workInfo.updatedDate}</span>
               </div>
             </div>
-            <div className='flex flex-col gap-10px font-size-14px font-bold color-#3d3d3d'>
-              <span>发布日期：{workInfo.createdDate}</span>
-              <span>更新日期：{workInfo.updatedDate}</span>
-            </div>
           </div>
           {/* 用户信息 */}
-          <div className='w-full my-5 flex flex-col gap-10px items-center'>
-            <div className='w-150 mb-3 flex justify-between'>
+          <div className='w-full my-10px flex flex-col gap-10px items-center'>
+            <div className='w-150 flex justify-between'>
               <div className='flex gap-20px items-center'>
                 <Link
                   to={`/personal-center/${workInfo.authorInfo.id}`}
@@ -406,6 +425,7 @@ const WorkInfo: FC<WorkInfoProps> = ({
 
             <div
               style={{
+                margin: currentList === 'userWorkList' ? '10px 0 ' : '0',
                 height: 0,
                 padding: currentList === 'userWorkList' ? '59px 0 ' : '0',
               }}
diff --git a/src/pages/work-detail/index.tsx b/src/pages/work-detail/index.tsx
index 49ae1ce..7058be4 100644
--- a/src/pages/work-detail/index.tsx
+++ b/src/pages/work-detail/index.tsx
@@ -94,9 +94,8 @@ const WorkDetail: FC = () => {
 
       const { authorId, ...rest } = data
       const authorInfo = (await getUserSimpleAPI({ id: authorId })).data
-      const labels = data.labels.map((label) => ({ value: label.id, label: label.name }))
 
-      setWorkInfo({ ...rest, authorInfo, labels })
+      setWorkInfo({ ...rest, authorInfo })
     } catch (error) {
       console.log('出现错误了喵！！', error)
       return
diff --git a/src/utils/types.ts b/src/utils/types.ts
index e869ac9..8fec3a8 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -1,4 +1,4 @@
-import { ImageItem } from '@/apis/types'
+import { ImageItem, LabelItem } from '@/apis/types'
 
 export type Option = { label: string; value: string }
 
@@ -63,7 +63,7 @@ export interface WorkDetailInfo {
   images: ImageItem[]
   name: string
   intro: string
-  labels: Option[]
+  labels: LabelItem[]
   isLiked: boolean
   isCollected: boolean
   favoriteIds?: string[]