feat: 优化message，输出更丰富的信息

HelloGitHub-Team · Jun 12, 2024 · 0807c24 · 0807c24
1 parent 7b9bb83
commit 0807c24
Show file tree

Hide file tree

Showing 14 changed files with 312 additions and 351 deletions.
diff --git a/src/components/home/Item.tsx b/src/components/home/Item.tsx
@@ -44,8 +44,8 @@ const Item: NextPage<ItemProps> = ({ item }) => {
             <div className='flex w-full'>
               <figure className='mr-2.5 hidden md:block'>
                 <img
-                  width='67'
-                  height='67'
+                  width='75'
+                  height='75'
                   src={author_avatar}
                   alt={`${author} avatar`}
                   className='block rounded'
@@ -67,7 +67,7 @@ const Item: NextPage<ItemProps> = ({ item }) => {
                         <span className='font-semibold dark:text-white'>
                           {name}
                         </span>
-                        <span className='mx-1 text-gray-500 opacity-40 dark:text-gray-300'>
+                        <span className='mx-0.5 text-gray-500 opacity-40 dark:text-gray-300 md:mx-1'>
                           —
                         </span>
                         <span className='text-gray-600 dark:text-gray-300'>
@@ -122,7 +122,7 @@ const Item: NextPage<ItemProps> = ({ item }) => {
                       {fromNow(updated_at)}
                     </time>
                   </div>
-                  <div className='flex text-sm text-gray-400'>
+                  <div className='flex items-center text-sm text-gray-400'>
                     <AiOutlineEye aria-label='Views' />
                     <span className='ml-0.5'>
                       {numFormat(clicks_total, 1, 1000)}

diff --git a/src/components/periodical/item.tsx b/src/components/periodical/item.tsx
@@ -1,9 +1,10 @@
 import { NextPage } from 'next';
 import Link from 'next/link';
-import { GoRepoForked } from 'react-icons/go';
+import { GoClock, GoRepoForked } from 'react-icons/go';
 import { IoIosStarOutline } from 'react-icons/io';
 
 import { redirectRecord } from '@/services/home';
+import { fromNow } from '@/utils/day';
 import { numFormat } from '@/utils/util';
 
 import Button from '../buttons/Button';
@@ -43,6 +44,10 @@ const PeriodItem: NextPage<PeriodicalItemProps> = ({ item, index }) => {
               <GoRepoForked size={15} className='mr-0.5' />
               Fork {numFormat(item.forks, 1)}
             </div>
+            <div className='mr-2 flex items-center'>
+              <GoClock size={15} className='mr-0.5' />
+              {fromNow(item.publish_at)}
+            </div>
           </div>
         </div>
         <div className='flex h-14 flex-1 flex-row items-center justify-end pr-1'>

diff --git a/src/components/respository/CommentSubmit.tsx b/src/components/respository/CommentSubmit.tsx
@@ -107,7 +107,7 @@ function CommentSubmit(props: {
 
   const placeholder = props.replyUser
     ? `正在回复：${props.replyUser.user.nickname}`
-    : '写评论：欢迎分享项目的使用体验、优点/吐槽、适用的场景、惊艳的地方...';
+    : '写评论：分享开源项目的使用体验、优点/吐槽、适用场景、惊艳之处...';
 
   return (
     <div className={`${className}`}>

diff --git a/src/components/respository/MoreInfo.tsx b/src/components/respository/MoreInfo.tsx
@@ -9,46 +9,19 @@ const MoreInfo: NextPage<RepositoryProps> = ({ repo }) => {
   const [isShowMore, setIsShowMore] = useState(false);
 
   const infoList = [
-    {
-      title: '星数',
-      value: repo.stars_str,
-    },
-    {
-      title: '中文',
-      value: repo.has_chinese ? '是' : '否',
-    },
-    {
-      title: '主语言',
-      value: repo.primary_lang,
-    },
-    {
-      title: '活跃',
-      value: repo.is_active ? '是' : '否',
-    },
+    { title: '星数', value: repo.stars_str },
+    { title: '中文', value: repo.has_chinese ? '是' : '否' },
+    { title: '主语言', value: repo.primary_lang },
+    { title: '活跃', value: repo.is_active ? '是' : '否' },
     {
       title: '贡献者',
       value: repo.contributors ? numFormat(repo.contributors) : '无',
     },
-    {
-      title: 'Issues',
-      value: numFormat(repo.open_issues),
-    },
-    {
-      title: '组织',
-      value: repo.is_org ? '是' : '否',
-    },
-    {
-      title: '最新版本',
-      value: repo.release_tag || '无',
-    },
-    {
-      title: 'Forks',
-      value: numFormat(repo.forks),
-    },
-    {
-      title: '协议',
-      value: repo.license || '无',
-    },
+    { title: 'Issues', value: numFormat(repo.open_issues) },
+    { title: '组织', value: repo.is_org ? '是' : '否' },
+    { title: '最新版本', value: repo.release_tag || '无' },
+    { title: 'Forks', value: numFormat(repo.forks) },
+    { title: '协议', value: repo.license || '无' },
   ];
 
   return (
@@ -58,7 +31,7 @@ const MoreInfo: NextPage<RepositoryProps> = ({ repo }) => {
           isShowMore ? '' : 'h-20'
         }`}
       >
-        <div className='relative grid grid-cols-4 grid-rows-1 gap-2 rounded-lg bg-gray-100 py-3 text-center dark:bg-gray-700 sm:grid-cols-5'>
+        <div className='relative grid grid-cols-4 gap-2 rounded-lg bg-gray-100 py-3 text-center dark:bg-gray-700 sm:grid-cols-5'>
           {infoList.map((item) => (
             <div className='px-2' key={item.title}>
               <div className='relative mt-1 overflow-hidden whitespace-nowrap text-lg font-bold text-gray-900 dark:text-gray-200 lg:text-xl'>
@@ -69,21 +42,12 @@ const MoreInfo: NextPage<RepositoryProps> = ({ repo }) => {
           ))}
         </div>
       </div>
-      {!isShowMore ? (
-        <div
-          className='absolute right-3 bottom-0 translate-y-full cursor-pointer rounded-b-lg bg-gray-100 px-4 py-1 text-xs text-gray-400 hover:bg-gray-200 active:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-700 lg:right-9'
-          onClick={() => setIsShowMore(true)}
-        >
-          更多
-        </div>
-      ) : (
-        <div
-          className='absolute right-3 bottom-0 translate-y-full cursor-pointer rounded-b-lg bg-gray-100 px-4 py-1 text-xs text-gray-400 hover:bg-gray-200 active:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-700 lg:right-9'
-          onClick={() => setIsShowMore(false)}
-        >
-          收起
-        </div>
-      )}
+      <div
+        className='absolute right-3 bottom-0 translate-y-full cursor-pointer rounded-b-lg bg-gray-100 px-4 py-1 text-xs text-gray-400 hover:bg-gray-200 active:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-700 lg:right-9'
+        onClick={() => setIsShowMore(!isShowMore)}
+      >
+        {isShowMore ? '收起' : '更多'}
+      </div>
     </div>
   );
 };

diff --git a/src/components/user/CollectionList.tsx b/src/components/user/CollectionList.tsx
@@ -30,7 +30,7 @@ import Message from '@/components/message';
 import { deleteFavorite } from '@/services/favorite';
 import { format } from '@/utils/day';
 
-import { RepoData } from './RepoRecord';
+import RepoData from './RepoRecord';
 
 import { Favorite } from '@/types/repository';
 

diff --git a/src/components/user/CommentList.tsx b/src/components/user/CommentList.tsx
@@ -12,90 +12,93 @@ interface Props {
   uid: string;
 }
 
-export const CommentList = (props: Props) => {
-  const { data, setPage } = useCommentHistory(props.uid);
+export const CommentList = ({ uid }: Props) => {
+  const { data, setPage } = useCommentHistory(uid);
   const { userInfo, isLogin } = useLoginContext();
   const belongMap = {
     article: '文章',
     repository: '项目',
   };
 
-  return data?.data ? (
-    data.data.length ? (
-      <>
-        {data.data.map((item, index) => {
-          return isLogin && userInfo ? (
-            <div className='p-2' key={item.cid}>
-              <div className='flex justify-between py-2'>
-                <div className='flex items-center'>
-                  <span className='mr-2'>
-                    {(data.page - 1) * data.pageSize + index + 1}.
-                  </span>
-                  <span className='text-xs text-gray-600 dark:text-gray-300 md:text-sm'>
-                    在 {formatZH(item.created_at, 'YYYY 年 MM 月 DD 日 ')}{' '}
-                    发布的评论
-                  </span>
-                </div>
+  if (!data?.data) return null;
 
-                <div className='flex flex-row whitespace-nowrap text-xs md:text-sm'>
-                  {item.is_show ? (
-                    <></>
-                  ) : (
-                    <FeedbackModal feedbackType={4}>
-                      <Button
-                        className='mr-1 h-7 p-2 font-normal text-red-500 hover:bg-transparent active:bg-transparent'
-                        variant='ghost'
-                      >
-                        申诉
-                      </Button>
-                    </FeedbackModal>
-                  )}
-                  <a
-                    href={`/${item.belong}/${item.belong_id}`}
-                    target='_blank'
-                    rel='noreferrer'
-                  >
+  if (!data.data.length) {
+    return (
+      <div className='mt-4 text-center text-xl'>
+        <div className='py-14 text-gray-300 dark:text-gray-500'>暂无评论</div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {data.data.map((item, index) => {
+        if (!isLogin || !userInfo) return null;
+
+        const commentIndex = (data.page - 1) * data.pageSize + index + 1;
+        const formattedDate = formatZH(item.created_at, 'YYYY 年 MM 月 DD 日 ');
+
+        return (
+          <div className='p-2' key={item.cid}>
+            <div className='flex justify-between py-2'>
+              <div className='flex items-center'>
+                <span className='mr-2'>{commentIndex}.</span>
+                <span className='text-xs text-gray-600 dark:text-gray-300 md:text-sm'>
+                  在 {formattedDate} 发布的评论
+                </span>
+              </div>
+              <div className='flex flex-row whitespace-nowrap text-xs md:text-sm'>
+                {!item.is_show && (
+                  <FeedbackModal feedbackType={4}>
                     <Button
-                      variant='light'
-                      className='h-7 p-2 font-normal dark:border-gray-300 dark:bg-gray-800 dark:text-gray-300'
+                      className='mr-1 h-7 p-2 font-normal text-red-500 hover:bg-transparent active:bg-transparent'
+                      variant='ghost'
                     >
-                      查看
+                      申诉
                     </Button>
-                  </a>
-                </div>
-              </div>
-              <CommentItem
-                className='rounded-xl border bg-white p-4 dark:border-gray-700 dark:bg-gray-800'
-                key={item.cid}
-                {...item}
-                user={userInfo}
-                footerRight={() => (
-                  <span className='text-xs text-gray-400 md:text-sm'>
-                    {belongMap[item.belong]}
-                    <span className='mx-1'>·</span>
-                    {item.is_show ? '已展示' : '未展示'}
-                    <span className='mx-1'>·</span>
-                    {item.is_hot ? '热评' : '非热评'}
-                    <span className='mx-1'>·</span>点赞 {item.votes}
-                  </span>
+                  </FeedbackModal>
                 )}
-              />
+                <a
+                  href={`/${item.belong}/${item.belong_id}`}
+                  target='_blank'
+                  rel='noreferrer'
+                >
+                  <Button
+                    variant='light'
+                    className='h-7 p-2 font-normal dark:border-gray-300 dark:bg-gray-800 dark:text-gray-300'
+                  >
+                    查看
+                  </Button>
+                </a>
+              </div>
             </div>
-          ) : null;
-        })}
-        <Pagination
-          hidden={!data.has_more}
-          NextText='下一页'
-          PreviousText='上一页'
-          current={data.page}
-          total={data.page_total}
-          onPageChange={setPage}
-        />
-      </>
-    ) : (
-      <div className='mt-4 text-center text-xl'>
-        <div className='py-14 text-gray-300 dark:text-gray-500'>暂无评论</div>
-      </div>
-    )
-  ) : null;
+            <CommentItem
+              className='rounded-xl border bg-white p-4 dark:border-gray-700 dark:bg-gray-800'
+              key={item.cid}
+              {...item}
+              user={userInfo}
+              footerRight={() => (
+                <span className='text-xs text-gray-400 md:text-sm'>
+                  {belongMap[item.belong]}
+                  <span className='mx-1'>·</span>
+                  {item.is_show ? '已展示' : '未展示'}
+                  <span className='mx-1'>·</span>
+                  {item.is_hot ? '热评' : '非热评'}
+                  <span className='mx-1'>·</span>点赞 {item.votes}
+                </span>
+              )}
+            />
+          </div>
+        );
+      })}
+      <Pagination
+        hidden={!data.has_more}
+        NextText='下一页'
+        PreviousText='上一页'
+        current={data.page}
+        total={data.page_total}
+        onPageChange={setPage}
+      />
+    </>
+  );
 };