From 1426edb0c3f4e65e2ce8c38e143f50c770322ade Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Tue, 11 Apr 2023 13:04:10 +0800 Subject: [PATCH] feat: dark mode --- package.json | 2 +- .../chrome-option/components/Header-Bar.tsx | 11 +++-- .../chrome-option/components/Repo-List.tsx | 23 +++++----- packages/extension/chrome-option/main.tsx | 1 + .../chrome-option/view/OptionPage.tsx | 44 +++++++++++++------ 5 files changed, 52 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index 1ae8066..11ac476 100644 --- 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 index 07a0099..8de47f4 100644 --- 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 ( -
+
} /> -

{props.repoInfo.uname}

+

{props.repoInfo.uname}

{ const [repoList, setRepoList] = useState([]) const repoListCache = useRef([]) 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() @@ -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() 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) => (
  • handleClick(index)} > {/* {value[0]} */} @@ -118,7 +117,7 @@ export const RepoList = (props: IRepoListProps) => { const { Search } = Input return (