修复ui问题

2026-09-29 16:06:36 +08:00 · 2025-08-20 15:34:05 +08:00
parent c43e0fecdc
commit 8dc171fe4b
20 changed files with 13515 additions and 273861 deletions
@@ -38,6 +38,7 @@ dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
    implementation 'com.google.android.material:material:1.12.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.2.1'
+    implementation 'androidx.webkit:webkit:1.8.0'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.3.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.7.0'
@@ -1,4 +1,4 @@
-import { d as domAnimation } from "./index-jxskBxXq.js";
+import { d as domAnimation } from "./index-BZa3KfLh.js";
 "use client";
 var index_default = domAnimation;
 export {
@@ -1,18 +0,0 @@
-;
-(function () {
-  System.register(['./index-legacy-OLEVtAva.js'], function (exports, module) {
-    'use strict';
-
-    var domAnimation;
-    return {
-      setters: [module => {
-        domAnimation = module.d;
-      }],
-      execute: function () {
-        "use client";
-
-        var index_default = exports("default", domAnimation);
-      }
-    };
-  });
-})();
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    
    <title>哆啦A梦</title>
    <script>
      // 防止暗黑模式闪烁：在页面加载前立即应用系统主题
@@ -122,15 +122,10 @@
      name="viewport"
    />
    <link href="./assets/favicon-DI5FVxIz.ico" rel="icon" />
-    <script type="module" crossorigin src="./assets/index-jxskBxXq.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-DXlBHwCy.css">
-    <script type="module">import.meta.url;import("_").catch(()=>1);(async function*(){})().next();if(location.protocol!="file:"){window.__vite_is_modern_browser=true}</script>
-    <script type="module">!function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy chunks, syntax error above and the same error below should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script>
+    <script type="module" crossorigin src="./assets/index-BZa3KfLh.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-Bf4rZ0gS.css">
  </head>
  <body>
    <div id="root"></div>
-    <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
-    <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-sZVJv9Pp.js"></script>
-    <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/index-legacy-OLEVtAva.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
  </body>
 </html>
@@ -1,35 +1,41 @@
 package com.doraemon

 import android.graphics.Color
+import android.net.Uri
 import android.os.Build
 import android.os.Bundle
 import android.view.View
 import android.view.WindowInsetsController
 import androidx.appcompat.app.AppCompatActivity
-import android.webkit.WebView
-import android.webkit.WebViewClient
-import android.webkit.WebSettings
+import android.webkit.*
+import androidx.webkit.WebViewAssetLoader
 import android.content.res.Configuration

 class MainActivity : AppCompatActivity() {

    private lateinit var webView: WebView
+    private lateinit var assetLoader: WebViewAssetLoader

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        webView = findViewById(R.id.webView)
+        WebView.setWebContentsDebuggingEnabled(true)
+        setupAssetLoader()
        setupWebView()
        loadUrl()

-        // 设置状态栏和导航栏颜色跟随系统主题
        setupSystemBars()
-
-        // 设置根布局背景色
        setupRootBackground()
    }

+    private fun setupAssetLoader() {
+        assetLoader = WebViewAssetLoader.Builder()
+            .addPathHandler("/assets/", WebViewAssetLoader.AssetsPathHandler(this))
+            .build()
+    }
+
    private fun setupWebView() {
        val settings = webView.settings
        settings.javaScriptEnabled = true
@@ -40,28 +46,22 @@ class MainActivity : AppCompatActivity() {
        settings.setSupportZoom(true)
        settings.builtInZoomControls = true
        settings.displayZoomControls = false
-        
-        // 允许加载本地文件
-        settings.allowFileAccess = true
-        settings.allowContentAccess = true
-        settings.allowFileAccessFromFileURLs = true
-        settings.allowUniversalAccessFromFileURLs = true
-        
-        // 设置混合内容模式
-        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
-            settings.mixedContentMode = android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
+
+        // 隐藏滚动条但不影响滚动
+        webView.isVerticalScrollBarEnabled = false
+        webView.isHorizontalScrollBarEnabled = false
+        webView.scrollBarStyle = View.SCROLLBARS_INSIDE_OVERLAY
+
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+            settings.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
        }

-        // 设置WebView背景色跟随系统主题
        val isDarkTheme = resources.configuration.uiMode and
-                android.content.res.Configuration.UI_MODE_NIGHT_MASK ==
-                android.content.res.Configuration.UI_MODE_NIGHT_YES
+                Configuration.UI_MODE_NIGHT_MASK ==
+                Configuration.UI_MODE_NIGHT_YES
+
+        webView.setBackgroundColor(if (isDarkTheme) Color.BLACK else Color.WHITE)

-        if (isDarkTheme) {
-            webView.setBackgroundColor(Color.BLACK)
-        } else {
-            webView.setBackgroundColor(Color.WHITE)
-        }

        // 添加JavaScript接口
        webView.addJavascriptInterface(object {
@@ -138,6 +138,19 @@ class MainActivity : AppCompatActivity() {
        }, "AndroidInterface")

        webView.webViewClient = object : WebViewClient() {
+            override fun shouldInterceptRequest(
+                view: WebView?,
+                request: WebResourceRequest?
+            ): WebResourceResponse? {
+                val response = request?.url?.let { assetLoader.shouldInterceptRequest(it) }
+                // 👉 fallback: 如果没有匹配静态文件，返回 index.html
+                return response ?: if (request?.url?.path?.startsWith("/assets/") == true) {
+                    assetLoader.shouldInterceptRequest(
+                        Uri.parse("https://appassets.androidplatform.net/assets/index.html")
+                    )
+                } else null
+            }
+
            override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
                url?.let { view?.loadUrl(it) }
                return true
@@ -146,48 +159,36 @@ class MainActivity : AppCompatActivity() {
    }

    private fun loadUrl() {
-        webView.getSettings().setJavaScriptEnabled(true);
-        webView.getSettings().setAllowFileAccess(true); // 允许访问 assets
-        webView.getSettings().setAllowFileAccessFromFileURLs(true); // Android 4.1+
-        webView.getSettings().setAllowUniversalAccessFromFileURLs(true); // Android 4.1+
-
-        webView.loadUrl("file:///android_asset/index.html")
+        webView.loadUrl("https://appassets.androidplatform.net/assets/index.html")
    }

    private fun setupSystemBars() {
-        // 检测当前是否为暗色主题
        val isDarkTheme = resources.configuration.uiMode and
-                android.content.res.Configuration.UI_MODE_NIGHT_MASK ==
-                android.content.res.Configuration.UI_MODE_NIGHT_YES
+                Configuration.UI_MODE_NIGHT_MASK ==
+                Configuration.UI_MODE_NIGHT_YES

        if (isDarkTheme) {
-            // 暗色主题：深色状态栏，浅色文字
            window.statusBarColor = Color.BLACK
            window.navigationBarColor = Color.BLACK
-
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
                window.insetsController?.setSystemBarsAppearance(
-                    0, // 清除浅色状态栏标志
+                    0,
                    WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS or
                            WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS
                )
            } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                @Suppress("DEPRECATION")
                window.decorView.systemUiVisibility =
-                    window.decorView.systemUiVisibility and
-                            View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv()
+                    window.decorView.systemUiVisibility and View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv()
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                    @Suppress("DEPRECATION")
                    window.decorView.systemUiVisibility =
-                        window.decorView.systemUiVisibility and
-                                View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR.inv()
+                        window.decorView.systemUiVisibility and View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR.inv()
                }
            }
        } else {
-            // 浅色主题：浅色状态栏，深色文字
            window.statusBarColor = Color.WHITE
            window.navigationBarColor = Color.WHITE
-
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
                window.insetsController?.setSystemBarsAppearance(
                    WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS or
@@ -214,7 +215,6 @@ class MainActivity : AppCompatActivity() {

    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
-        // 当系统主题变化时，重新设置状态栏、WebView背景色和根布局背景色
        setupSystemBars()
        setupWebViewBackground()
        setupRootBackground()
@@ -222,26 +222,16 @@ class MainActivity : AppCompatActivity() {

    private fun setupWebViewBackground() {
        val isDarkTheme = resources.configuration.uiMode and
-                android.content.res.Configuration.UI_MODE_NIGHT_MASK ==
-                android.content.res.Configuration.UI_MODE_NIGHT_YES
-
-        if (isDarkTheme) {
-            webView.setBackgroundColor(Color.BLACK)
-        } else {
-            webView.setBackgroundColor(Color.WHITE)
-        }
+                Configuration.UI_MODE_NIGHT_MASK ==
+                Configuration.UI_MODE_NIGHT_YES
+        webView.setBackgroundColor(if (isDarkTheme) Color.BLACK else Color.WHITE)
    }

    private fun setupRootBackground() {
        val isDarkTheme = resources.configuration.uiMode and
-                android.content.res.Configuration.UI_MODE_NIGHT_MASK ==
-                android.content.res.Configuration.UI_MODE_NIGHT_YES
-
-        val rootView = findViewById<android.view.View>(android.R.id.content)
-        if (isDarkTheme) {
-            rootView.setBackgroundColor(Color.BLACK)
-        } else {
-            rootView.setBackgroundColor(Color.WHITE)
-        }
+                Configuration.UI_MODE_NIGHT_MASK ==
+                Configuration.UI_MODE_NIGHT_YES
+        val rootView = findViewById<View>(android.R.id.content)
+        rootView.setBackgroundColor(if (isDarkTheme) Color.BLACK else Color.WHITE)
    }
 }
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    
    <title>哆啦A梦</title>
    <script>
      // 防止暗黑模式闪烁：在页面加载前立即应用系统主题
@@ -69,7 +69,6 @@
    "@types/react-dom": "18.3.0",
    "@typescript-eslint/eslint-plugin": "8.31.1",
    "@typescript-eslint/parser": "8.31.1",
-    "@vitejs/plugin-legacy": "^5.4.3",
    "@vitejs/plugin-react": "4.4.1",
    "eslint": "9.25.1",
    "eslint-config-prettier": "9.1.0",
@@ -84,7 +83,7 @@
    "postcss": "8.5.6",
    "prettier": "3.5.3",
    "typescript": "5.6.3",
-    "vite": "5.2",
+    "vite": "5.4.11",
    "vite-tsconfig-paths": "4.3.2"
  }
 }
@@ -1,4 +1,4 @@
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";

 import IndexPage from "@/pages/index";
@@ -58,17 +58,18 @@ const useH5Mode = () => {
  return isH5;
 };

-// 简化的路由保护组件 - 使用浏览器重定向避免React循环
+// 简化的路由保护组件 - 使用 React Router 导航避免循环
 const ProtectedRoute = ({ children, useSimpleLayout = false }: { children: React.ReactNode, useSimpleLayout?: boolean }) => {
  const authenticated = isLoggedIn();
  const isH5 = useH5Mode();
+  const navigate = useNavigate();
  
  useEffect(() => {
    if (!authenticated) {
-      // 使用浏览器原生重定向，避免React渲染循环
-      window.location.replace('/');
+      // 使用 React Router 导航，避免无限跳转
+      navigate('/', { replace: true });
    }
-  }, [authenticated]);
+  }, [authenticated, navigate]);

  if (!authenticated) {
    return (
@@ -95,13 +96,14 @@ const ProtectedRoute = ({ children, useSimpleLayout = false }: { children: React
 // 登录页面路由组件 - 已登录则重定向到dashboard
 const LoginRoute = () => {
  const authenticated = isLoggedIn();
+  const navigate = useNavigate();
  
  useEffect(() => {
    if (authenticated) {
-      // 使用浏览器原生重定向
-      window.location.replace('/dashboard');
+      // 使用 React Router 导航，避免无限跳转
+      navigate('/dashboard', { replace: true });
    }
-  }, [authenticated]);
+  }, [authenticated, navigate]);
  
  if (authenticated) {
    return (
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { Button } from "@heroui/button";

 import { Logo } from '@/components/icons';
@@ -11,15 +11,27 @@ export default function H5SimpleLayout({
  children: React.ReactNode;
 }) {
  const navigate = useNavigate();
+  const location = useLocation();
+  
+  // 路由切换时回到顶部，避免上一页滚动位置保留
+  React.useEffect(() => {
+    try {
+      window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+    } catch (e) {
+      window.scrollTo(0, 0);
+    }
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+  }, [location.pathname]);

  const handleBack = () => {
    navigate('/profile');
  };

  return (
-    <div className="flex flex-col h-screen bg-gray-100 dark:bg-black">
+    <div className="flex flex-col min-h-screen bg-gray-100 dark:bg-black">
      {/* 顶部导航栏 */}
-      <header className="bg-white dark:bg-black shadow-sm border-b border-gray-200 dark:border-gray-600 h-14 flex items-center justify-between px-4 relative z-10">
+      <header className="bg-white dark:bg-black shadow-sm border-b border-gray-200 dark:border-gray-600 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
        <div className="flex items-center gap-2">
          <Button
            isIconOnly
@@ -40,7 +52,7 @@ export default function H5SimpleLayout({
      </header>

      {/* 主内容区域 */}
-      <main className="flex-1 overflow-y-auto bg-gray-100 dark:bg-black">
+      <main className="flex-1 bg-gray-100 dark:bg-black pb-0">
        {children}
      </main>
    </div>
@@ -98,10 +98,21 @@ export default function H5Layout({
    !item.adminOnly || isAdmin
  );

+  // 路由切换时回到页面顶部，避免上一页的滚动位置遗留
+  useEffect(() => {
+    try {
+      window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+    } catch (e) {
+      window.scrollTo(0, 0);
+    }
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+  }, [location.pathname]);
+
  return (
-    <div className="flex flex-col h-screen bg-gray-100 dark:bg-black">
+    <div className="flex flex-col min-h-screen bg-gray-100 dark:bg-black">
      {/* 顶部导航栏 */}
-      <header className="bg-white dark:bg-black shadow-sm border-b border-gray-200 dark:border-gray-600 h-14 flex items-center justify-between px-4 relative z-10">
+      <header className="bg-white dark:bg-black shadow-sm border-b border-gray-200 dark:border-gray-600 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
        <div className="flex items-center gap-2">
          <Logo size={20} />
          <h1 className="text-sm font-bold text-foreground">{siteConfig.name}</h1>
@@ -112,12 +123,15 @@ export default function H5Layout({
      </header>

      {/* 主内容区域 */}
-      <main className="flex-1 overflow-y-auto bg-gray-100 dark:bg-black">
+      <main className="flex-1 bg-gray-100 dark:bg-black">
        {children}
      </main>

+      {/* 用于给固定 Tabbar 腾出空间的占位元素 */}
+      <div aria-hidden className="h-16 safe-bottom" />
+
      {/* 底部Tabbar */}
-      <nav className="bg-white dark:bg-black border-t border-gray-200 dark:border-gray-600 h-16 flex items-center justify-around px-2 relative z-10">
+      <nav className="bg-white dark:bg-black border-t border-gray-200 dark:border-gray-600 h-16 safe-bottom flex-shrink-0 flex items-center justify-around px-2 fixed bottom-0 left-0 right-0 z-30">
        {filteredTabItems.map((item) => {
          const isActive = location.pathname === item.path;
          return (
@@ -1,34 +1,16 @@

 import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router-dom";

 import App from "./App.tsx";
 import { Provider } from "./provider.tsx";
 import "@/styles/globals.css";

 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <BrowserRouter>
+  <MemoryRouter>
    <Provider>
      <App />
    </Provider>
-  </BrowserRouter>
+  </MemoryRouter>
 );

-
-/**
-import ReactDOM from "react-dom/client";
-import { HashRouter } from "react-router-dom";
-
-import App from "./App.tsx";
-import { Provider } from "./provider.tsx";
-import "@/styles/globals.css";
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <HashRouter>
-    <Provider>
-      <App />
-    </Provider>
-  </HashRouter>
-);
-
- */
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Button } from "@heroui/button";
 import { Card, CardBody, CardHeader } from "@heroui/card";
 import { Input } from "@heroui/input";
@@ -121,6 +122,7 @@ const getInitialConfigs = (): Record<string, string> => {
 };

 export default function ConfigPage() {
+  const navigate = useNavigate();
  const initialConfigs = getInitialConfigs();
  const [configs, setConfigs] = useState<Record<string, string>>(initialConfigs);
  const [loading, setLoading] = useState(Object.keys(initialConfigs).length === 0); // 如果有缓存数据，不显示loading
@@ -132,10 +134,10 @@ export default function ConfigPage() {
  useEffect(() => {
    if (!isAdmin()) {
      toast.error('权限不足，只有管理员可以访问此页面');
-      window.location.href = '/dashboard';
+      navigate('/dashboard', { replace: true });
      return;
    }
-  }, []);
+  }, [navigate]);

  // 加载配置数据（优先从缓存）
  const loadConfigs = async (currentConfigs?: Record<string, string>) => {
@@ -95,7 +95,7 @@ export default function ProfilePage() {
  // 退出登录
  const handleLogout = () => {
    safeLogout();
-    window.location.href = '/';
+    navigate('/', { replace: true });
  };

  // 密码表单验证
@@ -119,7 +119,7 @@ export const SettingsPage = () => {
        loadPanelAddresses();
      }
    } catch (error) {
-      toast.error('添加失败');
+      toast.error('添加失败' + error);
    }
  };

@@ -7,6 +7,16 @@ html, body {
  overflow-x: hidden;
 }

+/* 现代浏览器使用 100dvh，避免地址栏收起/展开导致的布局跳动 */
+@supports (height: 100dvh) {
+  .h-screen {
+    height: 100dvh;
+  }
+  .min-h-screen {
+    min-height: 100dvh;
+  }
+}
+
 /* 解决移动端100vh问题 */
@supports (-webkit-touch-callout: none) {
  .h-screen {
@@ -30,6 +40,21 @@ html, body {
 }


+/* 安全区域变量与工具类（适配刘海/底部手势条） */
+:root {
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+.safe-top {
+  padding-top: var(--safe-area-top);
+}
+
+.safe-bottom {
+  padding-bottom: var(--safe-area-bottom);
+}
+
+
 /* 验证码弹层动画 */
 .captcha-modal-enter {
  animation: captchaModalIn 0.3s ease-out forwards;
@@ -1,13 +1,9 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import path from "path";
-import legacy from "@vitejs/plugin-legacy";

 export default defineConfig({
  plugins: [
-    legacy({
-      targets: ['defaults', 'not IE 11']
-    }),
    react()
  ],
  base: './',    
@@ -21,7 +17,6 @@ export default defineConfig({
    host: '0.0.0.0'
  },
  build: {
-    target: ['es2015', 'chrome63'],
    outDir: 'dist',
    sourcemap: false,
    minify: false,