feat: dark mode

baiwusanyu-c · Apr 11, 2023 · 1426edb · 1426edb
1 parent b8c2b95
commit 1426edb
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "@types/node": "^18.0.0",
     "@types/prompts": "^2.4.2",
     "@vitest/coverage-c8": "^0.29.8",
-    "@vitest/ui": "^0.29.8",
+    "@vitest/ui": "^0.30.0",
     "bumpp": "^9.1.0",
     "cross-env": "^7.0.3",
     "eslint": "8.32.0",

diff --git a/packages/extension/chrome-option/components/Header-Bar.tsx b/packages/extension/chrome-option/components/Header-Bar.tsx
@@ -1,6 +1,6 @@
 import { GithubOutlined, UserOutlined } from '@ant-design/icons'
 import { Avatar } from 'antd'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useMount } from 'ahooks'
 import { CarbonSun } from './icon-sun'
 import { CarbonMoon } from './icon-moon'
@@ -36,13 +36,18 @@ export const HeaderBar = (props: HeaderBarProps = {
     else
       setDark(true)
   })
+
+  useEffect(() => {
+    const htmlEl = document.querySelector('html') as Element
+    htmlEl.className = dark ? 'dark' : ''
+  }, [dark])
   return (
-    <div id="header_bar" className="flex justify-between  items-center h-full">
+    <div id="header_bar" className="flex justify-between  items-center h-full py-2 px-8 dark:bg-gray-7">
       <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>
+        <h1 className="mx-4 my-0 text-gray-600 text-xl dark:text-white">{props.repoInfo.uname}</h1>
       </div>
       <div className="flex items-center">
         <a

diff --git a/packages/extension/chrome-option/components/Repo-List.tsx b/packages/extension/chrome-option/components/Repo-List.tsx
@@ -24,11 +24,10 @@ 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 (opType === 'rebase') {
-      getIssuesPR(token, userName)
+    if (props.opType === 'rebase') {
+      getIssuesPR(props.token, props.userName)
         .then((res) => {
           // 使用 map 避免重复遍历
           const repos = new Map<string, IRepoWithPRs>()
@@ -49,15 +48,15 @@ export const RepoList = (props: IRepoListProps) => {
           const resRepo = [...repos.values()]
           setRepoList(resRepo)
           repoListCache.current = resRepo
-          onSelect(resRepo[0])
+          props.onSelect(resRepo[0])
         })
         .finally(() => {
           setLoading(false)
         })
     }
     // merge 模式 我们只获取仓库信息
-    if (opType === 'merge') {
-      getAllRepo(token).then((res) => {
+    if (props.opType === 'merge') {
+      getAllRepo(props.token).then((res) => {
         const hasIssuesRepo = res.filter(val => val.open_issues_count > 0 && !val.fork)
         const repos = new Map<string, IRepoWithPRs>()
         hasIssuesRepo.forEach((val) => {
@@ -70,25 +69,25 @@ export const RepoList = (props: IRepoListProps) => {
         const resRepo = [...repos.values()]
         setRepoList(resRepo)
         repoListCache.current = resRepo
-        onSelect(resRepo[0])
+        props.onSelect(resRepo[0])
       }).finally(() => {
         setLoading(false)
       })
     }
-  }, [token, opType, userName, onSelect])
+  }, [props.opType, props.token, props.userName])
 
   const [activeIndex, setActiveIndex] = useState(0)
   const handleClick = useCallback((index: number) => {
     setActiveIndex(index)
-    onSelect(repoList[index])
-  }, [repoList, onSelect])
+    props.onSelect(repoList[index])
+  }, [repoList])
 
   const repoListEl = useMemo(() => {
     return repoList.map((repo, index) => (
         <Tooltip title={repo.uname} key={repo.url}>
           <li
               style={activeIndex === index ? { backgroundColor: '#cafcec', color: '#1cd2a9' } : {}}
-              className="cursor-pointer flex items-center rounded-md list-none h-8 p2 hover:bg-mLight hover:text-main"
+              className="cursor-pointer flex items-center rounded-md list-none h-8 p2 hover:bg-mLight hover:text-main dark:text-white"
               onClick={() => handleClick(index)}
           >
             {/* <Avatar size={20} className="mr-2" shape="square">{value[0]}</Avatar> */}
@@ -118,7 +117,7 @@ export const RepoList = (props: IRepoListProps) => {
   const { Search } = Input
   return (
     <div id="pr_checker_repo_list">
-      <Search placeholder="Input repo name" className="mb-4" onChange={run} allowClear />
+      <Search placeholder="Input repo name" className="mb-4 !dark:bg-gray-7" onChange={run} allowClear />
       <Button type="primary" className="mb-4 w-full" >
         { `${props.opType} all`}
       </Button>

diff --git a/packages/extension/chrome-option/main.tsx b/packages/extension/chrome-option/main.tsx
@@ -5,6 +5,7 @@ import store from '../store'
 import { OptionPage } from './view/OptionPage'
 import 'antd/dist/reset.css'
 import 'uno.css'
+
 ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
   <ConfigProvider
     theme={{

diff --git a/packages/extension/chrome-option/view/OptionPage.tsx b/packages/extension/chrome-option/view/OptionPage.tsx
@@ -2,16 +2,11 @@ import { Layout } from 'antd'
 import { useEffect, useState } from 'react'
 import { getAllStorageSyncData } from '../../hooks/use-storage'
 import { RepoList } from '../components/Repo-List'
+import { HeaderBar } from '../components/Header-Bar'
+import type { IRepoWithPRs } from '../components/Repo-List'
 import type React from 'react'
 const logoImg = new URL('../../assets/img/logo.png', import.meta.url).href
 const { Header, Sider, Content } = Layout
-const headerStyle: React.CSSProperties = {
-  textAlign: 'center',
-  color: '#ffffff',
-  height: '64px',
-  paddingInline: '50px',
-  lineHeight: '64px',
-}
 
 const contentStyle: React.CSSProperties = {
   height: 'calc(100vh - 64px)',
@@ -27,27 +22,50 @@ export const OptionPage = () => {
   })
   useEffect(() => {
     const run = async() => {
-      const data = await getAllStorageSyncData()
-      // const data = { OP_TYPE: 'rebase', TOKEN: '', USER_INFO: '{"login":"baiwusanyu-c"}' }
+      // const data = await getAllStorageSyncData()
+      const data = { OP_TYPE: 'merge', TOKEN: '', USER_INFO: '{"login":"baiwusanyu-c", "avatar_url": "https://avatars.githubusercontent.com/u/32354856?v=4"}' }
       data.USER_INFO = JSON.parse(data.USER_INFO)
       setStoreData(data as Record<string, any>)
     }
     run()
   }, [])
+
+  const [selectRepo, setSelectRepo] = useState<IRepoWithPRs>({
+    url: '',
+    name: '',
+    uname: '',
+    pullRequests: [],
+  })
+  const handleSelect = (data: IRepoWithPRs) => {
+    setSelectRepo(data)
+  }
   return (
       <div id="pr_checker_option">
         <Layout>
-          <Sider style={{ backgroundColor: '#ffffff' }} className="shadow-xl p-2 bg-white" >
+          <Sider className="shadow-xl p-2 !bg-white !dark:bg-gray-7" >
             <div className="flex items-center h-10 mb-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" />
-              <h1 className="text-gray-600 leading-1 m-0">
+              </a>
+              <h1 className="text-gray-600 leading-1 m-0 dark:text-white">
                 pr-checker
               </h1>
             </div>
-            <RepoList opType={storeData.OP_TYPE} userName={storeData.USER_INFO.login} token={storeData.TOKEN} />
+            <RepoList
+              onSelect={handleSelect}
+              opType={storeData.OP_TYPE}
+              userName={storeData.USER_INFO.login}
+              token={storeData.TOKEN}
+            />
           </Sider>
           <Layout>
-            <Header style={headerStyle}>Header</Header>
+            <Header className="shadow shadow-main p-0 bg-white">
+              <HeaderBar userInfo={storeData.USER_INFO} repoInfo={selectRepo} />
+            </Header>
             <Content style={contentStyle}>Content</Content>
           </Layout>
         </Layout>