From eecdc179c374b8796e7941b30e65b5ca1e20dc3f Mon Sep 17 00:00:00 2001 From: Montia37 Date: Sun, 7 Sep 2025 22:37:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9D=E6=AD=A5=E9=80=82=E9=85=8D?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 ++- komari-theme.json | 51 +++++---- src/components/sections/Footer.tsx | 4 +- src/components/sections/Header.tsx | 58 ++++++---- src/components/sections/NodeCard.tsx | 6 +- src/components/sections/NodeListHeader.tsx | 2 +- src/components/sections/NodeListItem.tsx | 2 +- src/components/sections/StatsBar.tsx | 2 +- src/components/ui/button.tsx | 13 ++- src/components/ui/card.tsx | 2 +- src/components/ui/chart.tsx | 2 +- src/components/ui/dropdown-menu.tsx | 4 +- src/components/ui/switch.tsx | 2 +- src/components/ui/tips.tsx | 2 +- src/components/ui/tooltip.tsx | 2 +- src/config/ConfigProvider.tsx | 88 +++------------ src/config/default.ts | 14 ++- src/hooks/useTheme.ts | 120 +++++++++++++++++---- src/index.css | 2 +- src/main.tsx | 93 +++++++++------- src/pages/Home.tsx | 4 +- src/pages/instance/PingChart.tsx | 3 +- src/pages/instance/index.tsx | 8 +- 23 files changed, 285 insertions(+), 211 deletions(-) diff --git a/README.md b/README.md index 5c4c74f..681f995 100644 --- a/README.md +++ b/README.md @@ -64,8 +64,12 @@ | :--- | :--- | :--- | :--- | :--- | | 背景图片链接 | `backgroundImage` | `string` | `/assets/Moonlit-Scenery.webp` | 目前仅支持单张背景图片（eg: https://test.com/1.png） | | 磨砂玻璃模糊值 | `blurValue` | `number` | `10` | 调整模糊值大小，数值越大模糊效果越明显，建议值为 5-20，为 0 则表示不启用模糊效果 | -| 磨砂玻璃背景色 | `blurBackgroundColor` | `string` | `rgba(255, 255, 255, 0.5) \| rgba(0, 0, 0, 0.5)` | 调整模糊背景色，推荐 rgba 颜色值，使用“\|”分隔亮色模式和暗色模式的颜色值（eg: `rgba(255, 255, 255, 0.5)\|rgba(0, 0, 0, 0.5)`） | -| 标签默认颜色列表 | `tagDefaultColorList` | `string` | `ruby,gray,gold,bronze,brown,yellow,amber,orange,tomato,red,crimson,pink,plum,purple,violet,iris,indigo,blue,cyan,teal,jade,green,grass,lime,mint,sky` | 标签默认颜色列表，用于修改默认解析颜色顺序以及使用的颜色池，逗号分隔（可用的颜色列表请参考：[radix-ui color](https://www.radix-ui.com/themes/docs/theme/color)，改完没有生效则说明填写有误） | +| 磨砂玻璃背景色 | `blurBackgroundColor` | `string` | `rgba(255, 255, 255, 0.5)|rgba(0, 0, 0, 0.5)` | 调整模糊背景色，推荐 rgba 颜色值，使用“|”分隔亮色模式和暗色模式的颜色值（eg: rgba(255, 255, 255, 0.5)|rgba(0, 0, 0, 0.5)） | +| 标签默认颜色列表 | `tagDefaultColorList` | `string` | `ruby,gray,gold,bronze,brown,yellow,amber,orange,tomato,red` | 标签默认颜色列表，展示的标签将按顺序调用该颜色池，逗号分隔（可用的颜色列表请参考：https://www.radix-ui.com/themes/docs/theme/color ，改完没有生效则说明填写有误） | +| 启用 localStorage 配置 | `enableLocalStorage` | `switch` | `true` | 启用后将优先使用用户浏览器本地配置的视图和外观设置。关闭后将强制使用下方的主题配置，本地可调整但刷新即恢复 | +| 默认展示视图 | `selectedDefaultView` | `select` | `grid` | 设置默认展示视图为网格或表格 | +| 默认外观 | `selectedDefaultAppearance` | `select` | `system` | 设置默认外观为浅色、深色或系统主题 | +| 默认主题颜色 | `selectThemeColor` | `select` | `gray` | 设置默认主题颜色，颜色对照请参考：https://www.radix-ui.com/themes/docs/theme/color | #### 标题栏设置 @@ -74,10 +78,8 @@ | 启用标题栏左侧 Logo | `enableLogo` | `switch` | `false` | 启用后默认在标题栏左侧显示 Logo | | Logo 图片链接 | `logoUrl` | `string` | `/assets/logo.png` | Logo 图片链接（eg: https://test.com/logo.png） | | 启用标题栏标题 | `enableTitle` | `switch` | `true` | 启用后默认在顶栏左侧显示标题 | -| 标题栏标题文本 | `titleText` | `string` | | 标题栏左侧显示的文本（留空则使用站点标题） | +| 标题栏标题文本 | `titleText` | `string` | | 标题栏左侧显示的文本（留空则使用站点标题） | | 启用搜索按钮 | `enableSearchButton` | `switch` | `true` | 启用后默认在标题栏右侧显示搜索按钮 | -| 默认展示视图 | `selectedDefaultView` | `select` | `grid` | 设置默认展示视图为网格或表格（优先使用 localStorage） | -| 默认外观 | `selectedDefaultAppearance` | `select` | `system` | 设置默认外观为浅色、深色或系统主题（优先使用 localStorage） | | 启用管理按钮 | `enableAdminButton` | `switch` | `true` | 启用后默认在标题栏右侧显示管理按钮 | #### 内容设置 diff --git a/komari-theme.json b/komari-theme.json index 068d55b..9abf8b2 100644 --- a/komari-theme.json +++ b/komari-theme.json @@ -38,8 +38,39 @@ "key": "tagDefaultColorList", "name": "标签默认颜色列表", "type": "string", - "default": "ruby,gray,gold,bronze,brown,yellow,amber,orange,tomato,red,crimson,pink,plum,purple,violet,iris,indigo,blue,cyan,teal,jade,green,grass,lime,mint,sky", - "help": "标签默认颜色列表，用于修改默认解析颜色顺序以及使用的颜色池，逗号分隔（可用的颜色列表请参考：https://www.radix-ui.com/themes/docs/theme/color，改完没有生效则说明填写有误）" + "default": "ruby,gray,gold,bronze,brown,yellow,amber,orange,tomato,red", + "help": "标签默认颜色列表，展示的标签将按顺序调用该颜色池，逗号分隔（可用的颜色列表请参考：https://www.radix-ui.com/themes/docs/theme/color，改完没有生效则说明填写有误）" + }, + { + "key": "enableLocalStorage", + "name": "启用 localStorage 配置", + "type": "switch", + "default": true, + "help": "启用后将优先使用用户浏览器本地配置的视图和外观设置。关闭后将强制使用下方的主题配置，本地可调整但刷新即恢复" + }, + { + "key": "selectedDefaultView", + "name": "默认展示视图", + "type": "select", + "options": "grid,table", + "default": "grid", + "help": "设置默认展示视图为网格或表格" + }, + { + "key": "selectedDefaultAppearance", + "name": "默认外观", + "type": "select", + "options": "system,light,dark", + "default": "system", + "help": "设置默认外观为浅色、深色或系统主题" + }, + { + "key": "selectThemeColor", + "name": "默认主题颜色", + "type": "select", + "options": "gray,gold,bronze,brown,yellow,amber,orange,tomato,red,ruby,crimson,pink,plum,purple,violet,iris,indigo,blue,cyan,teal,jade,green,grass,lime,mint,sky", + "default": "gray", + "help": "设置默认主题颜色，颜色对照请参考：https://www.radix-ui.com/themes/docs/theme/color" }, { "name": "标题栏设置", @@ -81,22 +112,6 @@ "default": true, "help": "启用后默认在标题栏右侧显示搜索按钮" }, - { - "key": "selectedDefaultView", - "name": "默认展示视图", - "type": "select", - "options": "grid,table", - "default": "grid", - "help": "设置默认展示视图为网格或表格（优先使用 localStorage）" - }, - { - "key": "selectedDefaultAppearance", - "name": "默认外观", - "type": "select", - "options": "system,light,dark", - "default": "system", - "help": "设置默认外观为浅色、深色或系统主题（优先使用 localStorage）" - }, { "key": "enableAdminButton", "name": "启用管理按钮", diff --git a/src/components/sections/Footer.tsx b/src/components/sections/Footer.tsx index 41a2fd2..b377c84 100644 --- a/src/components/sections/Footer.tsx +++ b/src/components/sections/Footer.tsx @@ -2,8 +2,8 @@ import React from "react"; const Footer: React.FC = () => { return ( -