chore: header coding

packages/extension/chrome-option/components/Header-Bar.tsx

@@ -0,0 +1,63 @@
+import { GithubOutlined, UserOutlined } from '@ant-design/icons'
+import { Avatar } from 'antd'
+import { useState } from 'react'
+import { useMount } from 'ahooks'
+import { CarbonSun } from './icon-sun'
+import { CarbonMoon } from './icon-moon'
+import type { IRepoWithPRs } from './Repo-List'
+interface HeaderBarProps {
+  userInfo: {
+    avatar_url: string
+    html_url: string
+  }
+  repoInfo: IRepoWithPRs
+}
+export const HeaderBar = (props: HeaderBarProps = {
+  userInfo: {
+    avatar_url: '',
+    html_url: '',
+  },
+  repoInfo: {
+    url: '',
+    name: '',
+    uname: '',
+    pullRequests: [],
+  },
+}) => {
+  const [dark, setDark] = useState(false)
+  const toggleTheme = (value: boolean) => {
+    setDark(value)
+    localStorage.setItem('dark', value.toString())
+  }
+  useMount(() => {
+    const dark = localStorage.getItem('dark')
+    if (!dark || dark === 'false')
+      setDark(false)
+    else
+      setDark(true)
+  })
+  return (
+    <div id="header_bar" className="flex justify-between  items-center h-full">
+      <div className="flex items-center">
+        <a href={props.userInfo.html_url} target="_blank" rel="noreferrer" title={props.userInfo.html_url}>
+          <Avatar size={46} src={props.userInfo.avatar_url} icon={<UserOutlined />} />
+        </a>
+        <h1 className="mx-4 my-0 text-gray-600 text-xl">{props.repoInfo.uname}</h1>
+      </div>
+      <div className="flex items-center">
+        <a
+          href="https://github.com/baiwusanyu-c/pr-checker"
+          target="_blank" rel="noreferrer"
+          className="flex items-center"
+          title="https://github.com/baiwusanyu-c/pr-checker"
+        >
+          <GithubOutlined style={{ fontSize: '30px', color: '#888888' }} />
+        </a>
+        {
+          dark ? <CarbonMoon role="button" style={{ fontSize: '30px', color: '#888888' }} className="mx-4 cursor-pointer" onClick={() => toggleTheme(false)} />
+            : <CarbonSun role="button" style={{ fontSize: '30px', color: '#888888' }} className="mx-4 cursor-pointer" onClick={() => toggleTheme(true)} />
+        }
+      </div>
+    </div>
+  )
+}

packages/extension/chrome-option/components/Repo-List.tsx

@@ -7,25 +7,28 @@ interface IRepoListProps {
   opType: string
   token: string
   userName: string
+  onSelect: (data: IRepoWithPRs) => void
 }
 
 interface IRepo {
   name: string
+  uname: string
   url: string
 }
 
-interface IRepoWithPRs extends IRepo {
+export interface IRepoWithPRs extends IRepo {
   pullRequests: Record<any, any>[]
 }
 
 export const RepoList = (props: IRepoListProps) => {
   const [repoList, setRepoList] = useState<IRepoWithPRs[]>([])
   const repoListCache = useRef<IRepoWithPRs[]>([])
   const [loading, setLoading] = useState(false)
+  const { token, opType, userName, onSelect } = props
   useEffect(() => {
     setLoading(true)
-    if (props.opType === 'rebase') {
-      getIssuesPR(props.token, props.userName)
+    if (opType === 'rebase') {
+      getIssuesPR(token, userName)
         .then((res) => {
           // 使用 map 避免重复遍历
           const repos = new Map<string, IRepoWithPRs>()
@@ -46,14 +49,15 @@ export const RepoList = (props: IRepoListProps) => {
           const resRepo = [...repos.values()]
           setRepoList(resRepo)
           repoListCache.current = resRepo
+          onSelect(resRepo[0])
         })
         .finally(() => {
           setLoading(false)
         })
     }
     // merge 模式 我们只获取仓库信息
-    if (props.opType === 'merge') {
-      getAllRepo(props.token).then((res) => {
+    if (opType === 'merge') {
+      getAllRepo(token).then((res) => {
         const hasIssuesRepo = res.filter(val => val.open_issues_count > 0 && !val.fork)
         const repos = new Map<string, IRepoWithPRs>()
         hasIssuesRepo.forEach((val) => {
@@ -66,19 +70,18 @@ export const RepoList = (props: IRepoListProps) => {
         const resRepo = [...repos.values()]
         setRepoList(resRepo)
         repoListCache.current = resRepo
+        onSelect(resRepo[0])
       }).finally(() => {
         setLoading(false)
       })
     }
-  }, [props.opType, props.token, props.userName])
+  }, [token, opType, userName, onSelect])
 
-  const [activeIndex, setActiveIndex] = useState(-1)
+  const [activeIndex, setActiveIndex] = useState(0)
   const handleClick = useCallback((index: number) => {
     setActiveIndex(index)
-    const repo = repoList[index]
-    console.log(repo.url)
-    console.log(repo.name)
-  }, [repoList])
+    onSelect(repoList[index])
+  }, [repoList, onSelect])
 
   const repoListEl = useMemo(() => {
     return repoList.map((repo, index) => (
@@ -112,9 +115,10 @@ export const RepoList = (props: IRepoListProps) => {
     },
     { wait: 300 },
   )
+  const { Search } = Input
   return (
     <div id="pr_checker_repo_list">
-      <Input placeholder="Input repo name" className="mb-4" onChange={run} allowClear />
+      <Search placeholder="Input repo name" className="mb-4" onChange={run} allowClear />
       <Button type="primary" className="mb-4 w-full" >
         { `${props.opType} all`}
       </Button>

packages/extension/chrome-option/components/icon-moon.tsx

@@ -0,0 +1,6 @@
+import type { SVGProps } from 'react'
+export const CarbonMoon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" {...props}><path fill="currentColor" d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z" /></svg>
+  )
+}

packages/extension/chrome-option/components/icon-sun.tsx

@@ -0,0 +1,6 @@
+import type { SVGProps } from 'react'
+export const CarbonSun = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" {...props}><path fill="currentColor" d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z" /></svg>
+  )
+}

packages/extension/chrome-popup/view/PopupPage.tsx

@@ -75,7 +75,13 @@ export const PopupPage = () => {
         <div className="h-240px w-380px p-4 login" style={{ backgroundImage: `url(${loginBg})` }}>
           <div className="flex items-center justify-between mb-2">
             <div className="flex items-center">
-              <img src={logoImg} alt="pr-checker" className="w-30px h-30px mr-2" />
+              <a
+                href="https://github.com/baiwusanyu-c/pr-checker"
+                target="_blank" rel="noreferrer"
+                title="https://github.com/baiwusanyu-c/pr-checker"
+              >
+                <img src={logoImg} alt="pr-checker" className="w-30px h-30px mr-2" />
+              </a>
               <h1 className="text-gray-600 leading-1 m-0">
                 pr-checker
               </h1>

packages/fetch-git/api/index.ts

@@ -33,4 +33,3 @@ export async function getAllRepo(token: string) {
   })
   return res
 }
-