修复转发暂停问题 增加安卓apk

vite-frontend/src/components/navbar.tsx

@@ -5,14 +5,35 @@ import {
   NavbarBrand,
   NavbarContent,
 } from "@heroui/navbar";
+import { useNavigate } from "react-router-dom";
 
-import { ThemeSwitch } from "@/components/theme-switch";
 import { Logo } from "@/components/icons";
 import { siteConfig, getCachedConfig } from "@/config/site";
 
 export const Navbar = () => {
+  const navigate = useNavigate();
   // 初始状态使用siteConfig中已经从缓存读取的值，避免闪烁
   const [appName, setAppName] = useState(siteConfig.name);
+  const [isWebView, setIsWebView] = useState(false);
+
+  // 检测是否在WebView中运行
+  useEffect(() => {
+    const detectWebView = () => {
+      try {
+        // 尝试调用Android注册的JavaScript接口
+        if (typeof (window as any).AndroidInterface !== 'undefined') {
+          const result = (window as any).AndroidInterface.isWebView();
+          setIsWebView(result === "true");
+        } else {
+          setIsWebView(false);
+        }
+      } catch (error) {
+        setIsWebView(false);
+      }
+    };
+    
+    detectWebView();
+  }, []);
 
   useEffect(() => {
     // 异步检查是否有更新的配置
@@ -54,23 +75,37 @@ export const Navbar = () => {
   }, [appName]);
 
   return (
-    <HeroUINavbar maxWidth="xl" position="sticky" height="60px" className="shrink-0">
-      <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
-        <NavbarBrand className="gap-2 max-w-fit">
-          <Link
-            className="flex justify-start items-center gap-2 max-w-[200px] sm:max-w-none"
-            color="foreground"
-            href="/"
-          >
-            <Logo size={24} />
-            <p className="font-bold text-inherit truncate">{appName}</p>
-          </Link>
-        </NavbarBrand>
-      </NavbarContent>
+    <>
+      <HeroUINavbar maxWidth="xl" position="sticky" height="60px" className="shrink-0">
+        <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
+          <NavbarBrand className="gap-2 max-w-fit">
+            <Link
+              className="flex justify-start items-center gap-2 max-w-[200px] sm:max-w-none"
+              color="foreground"
+              href="/"
+            >
+              <Logo size={24} />
+              <p className="font-bold text-inherit truncate">{appName}</p>
+            </Link>
+          </NavbarBrand>
+        </NavbarContent>
 
-      <NavbarContent className="basis-1/5 sm:basis-full" justify="end">
-        <ThemeSwitch />
-      </NavbarContent>
-    </HeroUINavbar>
+        <NavbarContent className="basis-1/5 sm:basis-full" justify="end">
+          {/* WebView设置图标 */}
+          {isWebView && (
+            <button
+              className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
+              onClick={() => navigate('/settings')}
+              title="面板设置"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+            </button>
+          )}
+        </NavbarContent>
+      </HeroUINavbar>
+    </>
   );
 };

vite-frontend/src/components/page-wrapper.tsx

@@ -31,8 +31,8 @@ export default function PageWrapper({
         <div className="container mx-auto max-w-7xl px-3 lg:px-6 py-8">
           <div className="flex items-center justify-center h-64">
             <div className="flex items-center gap-3">
-              <div className="animate-spin h-5 w-5 border-2 border-primary border-t-transparent rounded-full"></div>
-              <span className="text-default-600">正在加载页面...</span>
+              <div className="animate-spin h-5 w-5 border-2 border-gray-200 dark:border-gray-700 border-t-gray-600 dark:border-t-gray-300 rounded-full"></div>
+              <span className="text-default-600"></span>
             </div>
           </div>
         </div>

vite-frontend/src/components/theme-provider.tsx

@@ -18,18 +18,26 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
         document.documentElement.classList.remove('dark');
         document.documentElement.style.colorScheme = 'light';
       }
-      // 保存到localStorage
-      localStorage.setItem('heroui-theme', currentTheme);
     };
 
-    // 初始化时检查localStorage
-    const savedTheme = localStorage.getItem('heroui-theme');
-    if (savedTheme && savedTheme !== theme) {
-      setTheme(savedTheme);
+    // 始终跟随系统主题
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    if (systemTheme !== theme) {
+      setTheme(systemTheme);
     }
 
     // 监听主题变化
     updateThemeClass(theme);
+
+    // 监听系统主题变化
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleThemeChange = (e: MediaQueryListEvent) => {
+      const newTheme = e.matches ? 'dark' : 'light';
+      setTheme(newTheme);
+    };
+
+    mediaQuery.addEventListener('change', handleThemeChange);
+    return () => mediaQuery.removeEventListener('change', handleThemeChange);
   }, [theme, setTheme]);
 
   return <>{children}</>;

vite-frontend/src/components/theme-switch.tsx

@@ -1,82 +0,0 @@
-import { FC, useState, useEffect } from "react";
-import { VisuallyHidden } from "@react-aria/visually-hidden";
-import { SwitchProps, useSwitch } from "@heroui/switch";
-import clsx from "clsx";
-import { useTheme } from "@heroui/use-theme";
-
-import { SunFilledIcon, MoonFilledIcon } from "@/components/icons";
-
-export interface ThemeSwitchProps {
-  className?: string;
-  classNames?: SwitchProps["classNames"];
-}
-
-export const ThemeSwitch: FC<ThemeSwitchProps> = ({
-  className,
-  classNames,
-}) => {
-  const [isMounted, setIsMounted] = useState(false);
-
-  const { theme, setTheme } = useTheme();
-
-  const {
-    Component,
-    slots,
-    isSelected,
-    getBaseProps,
-    getInputProps,
-    getWrapperProps,
-  } = useSwitch({
-    isSelected: theme === "light",
-    onChange: () => setTheme(theme === "light" ? "dark" : "light"),
-  });
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, [isMounted]);
-
-  // Prevent Hydration Mismatch
-  if (!isMounted) return <div className="w-6 h-6" />;
-
-  return (
-    <Component
-      aria-label={isSelected ? "Switch to dark mode" : "Switch to light mode"}
-      {...getBaseProps({
-        className: clsx(
-          "px-px transition-opacity hover:opacity-80 cursor-pointer",
-          className,
-          classNames?.base,
-        ),
-      })}
-    >
-      <VisuallyHidden>
-        <input {...getInputProps()} />
-      </VisuallyHidden>
-      <div
-        {...getWrapperProps()}
-        className={slots.wrapper({
-          class: clsx(
-            [
-              "w-auto h-auto",
-              "bg-transparent",
-              "rounded-lg",
-              "flex items-center justify-center",
-              "group-data-[selected=true]:bg-transparent",
-              "!text-default-500",
-              "pt-px",
-              "px-0",
-              "mx-0",
-            ],
-            classNames?.wrapper,
-          ),
-        })}
-      >
-        {isSelected ? (
-          <MoonFilledIcon size={22} />
-        ) : (
-          <SunFilledIcon size={22} />
-        )}
-      </div>
-    </Component>
-  );
-};