From 4273edc6c70f80219515be2bfa88185de6a60b16 Mon Sep 17 00:00:00 2001 From: Monine Melolaris Date: Mon, 9 Dec 2024 10:34:38 +0800 Subject: [PATCH] =?UTF-8?q?Feat(webui):=20=E6=B7=B1=E8=89=B2=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E6=B7=BB=E5=8A=A0=E8=87=AA=E5=8A=A8=E8=B7=9F=E9=9A=8F?= =?UTF-8?q?=E7=B3=BB=E7=BB=9F=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E5=8C=96=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6=E3=80=82=20(#1109?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Style(webui): Add format config. Add prettier config to confirm all developer have same code format style. * Feat(WebUI): 深色模式行为优化 新增： 1、添加了「自动跟随系统主题」模式，并设置为默认行为，该模式将实时监控系统/浏览器主题，并同步变化； 2、添加了自动切换模式按钮。 修改： 1、修改按钮深色模式、浅色模式显示为对应当前模式； 2、修改默认主题为自动跟随系统。 * Update prettier config. 限定解析器的部分格式，避免影响其他语言的格式化功能。 * Disassemble some components. 1.move theme hooks to /lib folder; 2.disassemble ThemeButton component; 3.refactor ThemeButton related code. --- .eslintrc.json | 2 +- .prettierignore | 38 +++++++++++++++++++++ .prettierrc.toml | 49 +++++++++++++++++++++++++++ .vscode/setting.json | 6 ++++ app/layout.tsx | 62 ++++++---------------------------- app/lib/utils/index.tsx | 35 ++++++++++++++++++- app/ui/ThemeButton.tsx | 74 +++++++++++++++++++++++++++++++++++++++++ package-lock.json | 14 ++++++++ package.json | 3 +- 9 files changed, 229 insertions(+), 54 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc.toml create mode 100644 .vscode/setting.json create mode 100644 app/ui/ThemeButton.tsx diff --git a/.eslintrc.json b/.eslintrc.json index bffb357..520cc3b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,3 @@ { - "extends": "next/core-web-vitals" + "extends": ["next/core-web-vitals", "prettier"] } diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..22065d2 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,38 @@ +//.prettierignore +README.md +.DS_Store +node_modules +/dist + +/tests/e2e/videos/ +/tests/e2e/screenshots/ + +.github +.next + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Editor directories and files +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw* +.vscode + +# Lock File +package-lock.json +yarn.lock + +# autoGen +/autoGen +/public/cdn +/public/cdnimages \ No newline at end of file diff --git a/.prettierrc.toml b/.prettierrc.toml new file mode 100644 index 0000000..a6b5041 --- /dev/null +++ b/.prettierrc.toml @@ -0,0 +1,49 @@ +# .prettierrc.toml + +# 箭头函数只有一个参数的时候可以忽略括号 +arrowParens = "avoid" + +# 括号内部不要出现空格 +bracketSpacing = true + +# 行结束符使用 Unix 格式 +endOfLine = "lf" + +# true: Put > on the last line instead of at a new line +jsxBracketSameLine = false + +# 行宽 +printWidth = 100 + +# 换行方式 +proseWrap = "preserve" + +# 分号 +semi = false + +# 使用单引号 +singleQuote = true + +# 缩进 +tabWidth = 2 + +# 使用 tab 缩进 +useTabs = false + +# 后置逗号，多行对象、数组在最后一行增加逗号 +trailingComma = "es5" + +# 解析器，仅指定部分文件格式，避免影响其他语言功能 +[[overrides]] +files = "*.ts" +[overrides.options] +parser = "typescript" +[[overrides]] +files = "*.tsx" +[overrides.options] +parser = "typescript" + +[[overrides]] +files = "*.css" +[overrides.options] +parser = "css" diff --git a/.vscode/setting.json b/.vscode/setting.json new file mode 100644 index 0000000..1ca79c3 --- /dev/null +++ b/.vscode/setting.json @@ -0,0 +1,6 @@ +{ + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + } +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 76bd9fb..13e6011 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,9 +1,9 @@ "use client"; import "./globals.css"; import styles from "./page.module.css"; -import { SetStateAction, useCallback, useEffect, useMemo, useState } from "react"; +import { useCallback, useMemo, useState } from "react"; import Link from "next/link"; -import { usePathname, useRouter } from "next/navigation"; +import { usePathname } from "next/navigation"; import { Button, Nav } from "@douyinfe/semi-ui"; import { OnSelectedData } from "@douyinfe/semi-ui/lib/es/navigation"; import { Layout as SeLayout } from "@douyinfe/semi-ui/lib/es/layout"; @@ -12,14 +12,13 @@ import { IconCustomerSupport, IconDoubleChevronLeft, IconDoubleChevronRight, - IconMoon, - IconSemiLogo, IconStar, - IconSun, IconVideoListStroked, IconHome, IconSetting, } from "@douyinfe/semi-icons"; import Image from "next/image"; +import ThemeButton from "./ui/ThemeButton"; +import { useSystemTheme, useTheme } from "./lib/utils"; export default function RootLayout({ children, @@ -36,13 +35,9 @@ export default function RootLayout({ const [openKeys, setOpenKeys] = useState(initOpenKeys); const [selectedKeys, setSelectedKeys] = useState([pathname.slice(1)]); const [isCollapsed, setIsCollapsed] = useState(false); - const [mode, setMode] = useState(typeof window !== 'undefined' && localStorage.getItem("mode") || "light"); - useEffect(() => { - localStorage.setItem("mode", mode); - if (mode === "dark") { - document.body.setAttribute("theme-mode", "dark"); - } - }, [mode]); + const [mode, setMode] = useState((typeof window !== 'undefined' && localStorage.getItem('mode')) || 'auto') + const systemTheme = useSystemTheme() + useTheme(mode,systemTheme) let navStyle = isCollapsed ? { height: "100%", overflow: "visible" } : { height: "100%" }; @@ -290,7 +285,9 @@ export default function RootLayout({ /> - {footer(mode, setMode)} + + + {children} @@ -300,44 +297,7 @@ export default function RootLayout({ ); } -function footer( - mode: string, - setMode: { - (value: SetStateAction): void; - (arg0: string): void; - } -) { - const switchMode = () => { - const body = document.body; - if (body.hasAttribute("theme-mode")) { - body.removeAttribute("theme-mode"); - setMode("light"); - } else { - body.setAttribute("theme-mode", "dark"); - setMode("dark"); - } - }; - return ( - -