feat: claim repo

HelloGitHub-Team · Jun 6, 2024 · c28bd7c · c28bd7c
1 parent fc228ed
commit c28bd7c
Show file tree

Hide file tree

Showing 28 changed files with 352 additions and 123 deletions.
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
@@ -116,7 +116,7 @@ export default function Seo(props: SeoProps) {
 
   return (
     <Head>
-      <title>{meta.title}</title>
+      <title>{`${meta.title} - HelloGitHub`}</title>
       <meta name='robots' content={meta.robots} />
       <meta content={meta.description} name='description' />
       <meta property='og:url' content={`${meta.url}${router.asPath}`} />

diff --git a/src/components/respository/CommentItem.tsx b/src/components/respository/CommentItem.tsx
@@ -39,6 +39,7 @@ const CommentItem = (
     created_at: createdAt,
     is_voted: isVoted,
     is_show: isShow,
+    is_maker: isMaker,
     alone,
     className,
     onChangeVote = NOOP,
@@ -133,11 +134,16 @@ const CommentItem = (
               </div>
               <Link href={`/user/${user.uid}`}>
                 <a>
-                  <div className='w-fit max-w-[120px] truncate text-xs font-bold md:text-sm'>
+                  <div className='w-fit max-w-[80px] truncate text-xs font-bold md:max-w-[120px] md:text-sm'>
                     {user?.nickname}
                   </div>
                 </a>
               </Link>
+              {isMaker && (
+                <span className='ml-1 rounded-md bg-gray-200 px-1.5 text-xs font-semibold text-blue-400'>
+                  OP
+                </span>
+              )}
             </div>
             {!props.reply_id ? (
               <>

diff --git a/src/components/respository/Info.tsx b/src/components/respository/Info.tsx
@@ -13,8 +13,8 @@ import {
   AiOutlineGlobal,
   AiOutlineHome,
 } from 'react-icons/ai';
-import { BsBookmark, BsFileEarmarkCode } from 'react-icons/bs';
-import { GoComment, GoLinkExternal } from 'react-icons/go';
+import { BsBookmark, BsPersonCheck } from 'react-icons/bs';
+import { GoComment, GoLinkExternal, GoVerified } from 'react-icons/go';
 
 import { useLoginContext } from '@/hooks/useLoginContext';
 
@@ -47,6 +47,14 @@ type URLoption = {
   name: string;
 };
 
+const iconMap: { [key: string]: JSX.Element } = {
+  source: <AiOutlineGithub />,
+  home: <AiOutlineHome />,
+  document: <AiOutlineFileText />,
+  online: <AiOutlineGlobal />,
+  download: <AiOutlineCloudDownload />,
+};
+
 const Info: NextPage<RepositoryProps> = ({ repo }) => {
   const { isLogin, login } = useLoginContext();
   const [isVoted, setIsVoted] = useState<boolean>(false);
@@ -56,9 +64,19 @@ const Info: NextPage<RepositoryProps> = ({ repo }) => {
   const [openModal, setOpenModal] = useState<boolean>(false);
   const [favoriteOptions, setFavoriteOptions] = useState<option[]>([]);
   const [urlOptions, setURLOptions] = useState<URLoption[]>([]);
-
+  const [showDropdown, setShowDropdown] = useState(false);
   const dropdownRef = useRef<any>();
 
+  const handleDropdownToggle = () => {
+    setShowDropdown(!showDropdown);
+  };
+
+  const handleClickOutside = (event: any) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setShowDropdown(false);
+    }
+  };
+
   const getUserRepoStatus = async (rid: string) => {
     // 调用接口查看项目是否点赞
     const res = await userRepoStatus(rid);
@@ -164,20 +182,7 @@ const Info: NextPage<RepositoryProps> = ({ repo }) => {
     });
   };
 
-  const getIcon = (iconName: string) => {
-    switch (iconName) {
-      case 'source':
-        return <AiOutlineGithub />;
-      case 'home':
-        return <AiOutlineHome />;
-      case 'document':
-        return <AiOutlineFileText />;
-      case 'online':
-        return <AiOutlineGlobal />;
-      case 'download':
-        return <AiOutlineCloudDownload />;
-    }
-  };
+  const getIcon = (iconName: string) => iconMap[iconName];
 
   const handleURLOptions = (repo: Repository) => {
     const options: URLoption[] = [];
@@ -208,6 +213,17 @@ const Info: NextPage<RepositoryProps> = ({ repo }) => {
     handleURLOptions(repo);
   }, [repo]);
 
+  useEffect(() => {
+    if (showDropdown) {
+      document.addEventListener('click', handleClickOutside);
+    } else {
+      document.removeEventListener('click', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [showDropdown]);
+
   const option = repo.star_history && {
     xAxis: {
       type: 'category',
@@ -303,24 +319,40 @@ const Info: NextPage<RepositoryProps> = ({ repo }) => {
       <div className='flex flex-col gap-y-3'>
         <div className='flex flex-row'>
           <div className='flex min-w-[72px] items-center'>
-            <img
-              className='rounded border border-gray-100 bg-white dark:border-gray-800'
-              src={repo.author_avatar}
-              width='72'
-              height='72'
-              alt='repo_avatar'
-            />
+            <div className='relative'>
+              <img
+                className='rounded border border-gray-100 bg-white dark:border-gray-800'
+                src={repo.author_avatar}
+                width='72'
+                height='72'
+                alt='repo_avatar'
+              />
+            </div>
           </div>
-          <div className='ml-3 hidden max-w-[440px] flex-col gap-y-2 md:flex'>
-            <CustomLink
-              href={repo.url}
-              onClick={() => onClickLink('source', repo.rid)}
-            >
-              <div className='cursor-pointer truncate text-ellipsis text-3xl font-semibold hover:text-blue-500'>
-                {repo.full_name}
-              </div>
-            </CustomLink>
 
+          <div className='ml-3 hidden max-w-[440px] flex-col gap-y-2 md:flex'>
+            <div className='flex flex-row items-center '>
+              <CustomLink
+                href={repo.url}
+                onClick={() => onClickLink('source', repo.rid)}
+              >
+                <h1 className='max-w-[400px] cursor-pointer truncate text-ellipsis text-3xl font-semibold hover:text-blue-500'>
+                  {repo.full_name.length >= 20 ? repo.name : repo.full_name}
+                </h1>
+              </CustomLink>
+              {repo.is_claimed && (
+                <div className='group relative ml-0.5 cursor-pointer'>
+                  <GoVerified className='ml-0.5 text-xl text-blue-500 group-hover:text-blue-600' />
+                  {/* 提示信息，初始时透明度为0 */}
+                  <div className='absolute hidden flex-row transition-opacity duration-300 group-hover:flex'>
+                    {/* 定位和样式可以根据需要调整 */}
+                    <div className='relative -top-6 left-6 w-0 rounded-md bg-gray-300 p-1 text-xs text-white group-hover:w-max'>
+                      已认领
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
             <div className='truncate text-ellipsis text-xl font-normal text-gray-500'>
               {repo.title}
             </div>
@@ -336,9 +368,9 @@ const Info: NextPage<RepositoryProps> = ({ repo }) => {
               href={repo.url}
               onClick={() => onClickLink('source', repo.rid)}
             >
-              <div className='truncate text-ellipsis text-3xl font-semibold'>
+              <h1 className='truncate text-ellipsis text-3xl font-semibold'>
                 {repo.full_name.length >= 20 ? repo.name : repo.full_name}
-              </div>
+              </h1>
             </CustomLink>
             <span className='text-ellipsis whitespace-pre-wrap text-xl font-normal text-gray-500'>
               {repo.title}
@@ -366,28 +398,56 @@ const Info: NextPage<RepositoryProps> = ({ repo }) => {
             )}
           </div>
           <div className='flex h-[72px] w-full flex-row items-end gap-x-2 md:mt-0 md:w-64 lg:w-72'>
-            <div className='group hidden lg:block'>
-              <CustomLink
-                href={repo.url}
-                onClick={() => onClickLink('source', repo.rid)}
-              >
+            <div className='group relative lg:block'>
+              <div className='hidden lg:block'>
+                <CustomLink
+                  href={repo.url}
+                  onClick={() => onClickLink('source', repo.rid)}
+                >
+                  <Button
+                    variant='white-outline'
+                    className='origin-top scale-95 transition duration-200 ease-in-out hover:scale-100'
+                  >
+                    {urlOptions.length > 0 ? (
+                      <div className='flex flex-row items-center py-3 px-1'>
+                        <div className='px-1 text-sm font-medium'>访问</div>
+                        <AiOutlineDown size={10} />
+                      </div>
+                    ) : (
+                      <div className='p-3 text-sm font-medium'>访问</div>
+                    )}
+                  </Button>
+                </CustomLink>
+              </div>
+
+              <div className='block lg:hidden' ref={dropdownRef}>
                 <Button
                   variant='white-outline'
                   className='origin-top scale-95 transition duration-200 ease-in-out hover:scale-100'
+                  onClick={handleDropdownToggle} // 添加点击事件处理器
                 >
                   {urlOptions.length > 0 ? (
                     <div className='flex flex-row items-center py-3 px-1'>
                       <div className='px-1 text-sm font-medium'>访问</div>
                       <AiOutlineDown size={10} />
                     </div>
                   ) : (
-                    <div className='p-3 text-sm font-medium'>访问</div>
+                    <CustomLink
+                      href={repo.url}
+                      onClick={() => onClickLink('source', repo.rid)}
+                    >
+                      <div className='p-3 text-sm font-medium'>访问</div>
+                    </CustomLink>
                   )}
                 </Button>
-              </CustomLink>
+              </div>
               {urlOptions.length > 0 && (
-                <div className='absolute hidden group-hover:block'>
-                  <div className='relative z-10 mt-1 w-fit origin-top-right rounded-md border border-gray-100 bg-white shadow-lg'>
+                <div
+                  className={`absolute ${
+                    showDropdown ? 'block' : 'hidden'
+                  } lg:group-hover:block`}
+                >
+                  <div className='relative z-10 mt-1 w-max origin-top-right rounded-md border border-gray-100 bg-white shadow-lg'>
                     {urlOptions.map((item) => (
                       <CustomLink
                         href={item.url}
@@ -407,20 +467,6 @@ const Info: NextPage<RepositoryProps> = ({ repo }) => {
               )}
             </div>
 
-            <div className='block lg:hidden'>
-              <CustomLink
-                href={repo.url}
-                onClick={() => onClickLink('source', repo.rid)}
-              >
-                <Button
-                  variant='white-outline'
-                  className='origin-top scale-95 transition duration-200 ease-in-out hover:scale-100'
-                >
-                  <div className='p-3 text-sm font-medium'>访问</div>
-                </Button>
-              </CustomLink>
-            </div>
-
             <Button
               variant={isVoted ? 'blue-outline' : 'gradient'}
               className='flex-1 origin-top scale-95 justify-center transition duration-200 ease-in-out hover:scale-100'
@@ -456,13 +502,22 @@ const Info: NextPage<RepositoryProps> = ({ repo }) => {
             </div>
           </div>
           <div className='flex flex-row gap-x-4 text-sm'>
-            <div onClick={jumpComment}>
-              <div className='flex cursor-pointer items-center justify-center hover:text-current active:!text-gray-400 md:hover:text-blue-500'>
-                <GoComment className='mr-2' size={16} />
-                讨论
-              </div>
-            </div>
+            {!repo.is_claimed && (
+              <Link href={`/repository/${repo.rid}/embed`}>
+                <div className='flex  cursor-pointer items-center justify-center text-blue-500 hover:text-current active:!text-gray-400 md:hover:text-blue-500'>
+                  <BsPersonCheck className=' mr-2' size={16} />
+                  待认领
+                </div>
+              </Link>
+            )}
 
+            <div
+              onClick={jumpComment}
+              className='hidden cursor-pointer items-center justify-center hover:text-current active:!text-gray-400 md:flex'
+            >
+              <GoComment className='mr-2' size={16} />
+              讨论
+            </div>
             <div
               className={isCollected ? 'text-blue-500' : ''}
               onClick={() => onClickCollect(repo.rid)}
@@ -472,13 +527,6 @@ const Info: NextPage<RepositoryProps> = ({ repo }) => {
                 {isCollected ? numFormat(collectTotal, 1) : '收藏'}
               </div>
             </div>
-
-            <Link href={`/repository/${repo.rid}/embed`}>
-              <div className='hidden cursor-pointer items-center justify-center hover:text-current active:!text-gray-400 md:flex md:hover:text-blue-500'>
-                <BsFileEarmarkCode className='mr-2' size={16} />
-                嵌入
-              </div>
-            </Link>
             <div
               className='flex cursor-pointer items-center justify-center hover:text-current active:!text-gray-400 md:hover:text-blue-500'
               onClick={() => handleCopy(repo)}

diff --git a/src/components/user/User.tsx b/src/components/user/User.tsx
@@ -52,7 +52,7 @@ export const User = () => {
 
   return (
     <>
-      <Seo title='HelloGitHub｜用户首页' />
+      <Seo title='用户首页' />
       <div className='h-screen divide-y divide-gray-100 dark:divide-gray-800'>
         <Navbar middleText='个人主页' />
         <div className='flex flex-col bg-white p-4 dark:bg-gray-800 sm:p-6 md:flex-row md:rounded-lg'>

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -7,7 +7,7 @@ import ThemeSwitch from '@/components/ThemeSwitch';
 export default function NotFoundPage() {
   return (
     <>
-      <Seo title='HelloGitHub｜404' />
+      <Seo title='404' />
 
       <main>
         <div className='hidden'>

diff --git a/src/pages/500.tsx b/src/pages/500.tsx
@@ -7,7 +7,7 @@ import ThemeSwitch from '@/components/ThemeSwitch';
 export default function ServerErrorPage() {
   return (
     <>
-      <Seo title='HelloGitHub｜500' />
+      <Seo title='500' />
 
       <main>
         <div className='hidden'>

diff --git a/src/pages/article/[aid].tsx b/src/pages/article/[aid].tsx
@@ -14,7 +14,7 @@ import { ArticleProps } from '@/types/article';
 const ArticlePage: NextPage<ArticleProps> = ({ article }) => {
   return (
     <>
-      <Seo title={`HelloGitHub｜${article.title}`} />
+      <Seo title={article.title} />
       <Navbar middleText={article.title} endText='文章'></Navbar>
 
       <div className='mt-2 bg-white py-0.5 px-5 dark:bg-gray-800 md:rounded-lg '>

diff --git a/src/pages/article/index.tsx b/src/pages/article/index.tsx
@@ -66,7 +66,10 @@ const ArticleIndex: NextPage = () => {
 
   return (
     <>
-      <Seo title='HelloGitHub｜文章' description='关于开源和开源项目的文章' />
+      <Seo
+        title='文章'
+        description='这里有一些专注于开源项目的原创和优质文章'
+      />
       <ArticleNavbar />
       <div className='h-screen'>
         <div className='divide-y divide-slate-100 bg-white dark:divide-slate-700 dark:bg-slate-800 md:overflow-y-hidden md:rounded-lg'>

diff --git a/src/pages/help/ats.tsx b/src/pages/help/ats.tsx
@@ -11,7 +11,7 @@ import { HelpPageProps } from '@/types/help';
 const ATSPage: NextPage<HelpPageProps> = ({ content }) => {
   return (
     <>
-      <Seo title='HelloGitHub｜用户服务协议' />
+      <Seo title='用户服务协议' />
 
       <div className='mt-2 bg-white p-5 dark:bg-gray-800 md:rounded-lg '>
         <div className='mb-10 flex flex-col items-center px-2 text-4xl font-bold '>

diff --git a/src/pages/help/level.tsx b/src/pages/help/level.tsx
@@ -13,7 +13,7 @@ import { HelpPageProps } from '@/types/help';
 const RulePage: NextPage<HelpPageProps> = ({ content }) => {
   return (
     <>
-      <Seo title='HelloGitHub｜社区等级介绍' />
+      <Seo title='社区等级规则' />
       <Navbar middleText='社区等级' endText='介绍' />
 
       <div className='mt-2 bg-white p-5 dark:bg-gray-800 md:rounded-lg '>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -63,10 +63,7 @@ const Index: NextPage = () => {
 
   return (
     <>
-      <Seo
-        title='HelloGitHub'
-        description='分享 GitHub 上有趣、入门级的开源项目'
-      />
+      <Seo title='首页' description='分享 GitHub 上有趣、入门级的开源项目' />
       <IndexBar tid={tid as string} sort_by={sort_by as string} />
       <div className='h-screen'>
         <Items repositories={repositories}></Items>