From c5a8792bafe1b2de331b5dfb5619cd6b0f77b1d0 Mon Sep 17 00:00:00 2001
From: shangxueink <1919892171@qq.com>
Date: Tue, 20 Jan 2026 00:47:28 +0800
Subject: [PATCH 1/2] feat(webqq): add fullscreen mode for WebQQ interface

Add a new fullscreen route and component for WebQQ interface accessible via #webqq-fullscreen hash. The fullscreen mode provides an immersive experience without the sidebar navigation.

Changes include:
- Create WebQQFullscreen component with full viewport height
- Add 'webqq-fullscreen' to valid tab routes
- Export WebQQFullscreen from WebQQ components index
- Implement dedicated route handler in App.tsx with background and dialogs
---
 src/webui/FE/App.tsx                          | 40 ++++++++++++++-----
 .../FE/components/WebQQ/WebQQFullscreen.tsx   | 16 ++++++++
 src/webui/FE/components/WebQQ/index.ts        |  1 +
 3 files changed, 48 insertions(+), 9 deletions(-)
 create mode 100644 src/webui/FE/components/WebQQ/WebQQFullscreen.tsx

diff --git a/src/webui/FE/App.tsx b/src/webui/FE/App.tsx
index 188e8bf1..2b814649 100644
--- a/src/webui/FE/App.tsx
+++ b/src/webui/FE/App.tsx
@@ -13,7 +13,7 @@ import {
   AnimatedBackground,
   HostSelector,
 } from './components';
-import { WebQQPage } from './components/WebQQ';
+import { WebQQPage, WebQQFullscreen } from './components/WebQQ';
 import { Config, ResConfig } from './types';
 import { apiFetch, setPasswordPromptHandler } from './utils/api';
 import { Save, Loader2, Settings, Eye, EyeOff, Plus, Trash2, Menu } from 'lucide-react';
@@ -25,13 +25,13 @@ function App() {
   // 从 URL hash 读取初始 tab，默认 dashboard
   const getInitialTab = () => {
     const hash = window.location.hash.slice(1) // 去掉 #
-    const validTabs = ['dashboard', 'onebot', 'satori', 'milky', 'logs', 'other', 'webqq', 'about']
+    const validTabs = ['dashboard', 'onebot', 'satori', 'milky', 'logs', 'other', 'webqq', 'webqq-fullscreen', 'about']
     return validTabs.includes(hash) ? hash : 'dashboard'
   }
 
   const [activeTab, setActiveTab] = useState(getInitialTab);
   const [config, setConfig] = useState<Config>(defaultConfig);
-  
+
   const [loading, setLoading] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [checkingLogin, setCheckingLogin] = useState(true);
@@ -66,7 +66,7 @@ function App() {
   useEffect(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.slice(1)
-      const validTabs = ['dashboard', 'onebot', 'satori', 'milky', 'logs', 'other', 'webqq', 'about']
+      const validTabs = ['dashboard', 'onebot', 'satori', 'milky', 'logs', 'other', 'webqq', 'webqq-fullscreen', 'about']
       if (validTabs.includes(hash)) {
         setActiveTab(hash)
       }
@@ -194,15 +194,37 @@ function App() {
     );
   }
 
+  // webqq-fullscreen 路由：独立的全屏页面
+  if (activeTab === 'webqq-fullscreen') {
+    return (
+      <>
+        {/* Animated Background */}
+        <AnimatedBackground />
+
+        <WebQQFullscreen />
+
+        {/* Password Dialog */}
+        <TokenDialog
+          visible={showPasswordDialog}
+          onConfirm={handlePasswordConfirm}
+          error={passwordError}
+        />
+
+        {/* Toast Container */}
+        <ToastContainer />
+      </>
+    )
+  }
+
   // 已登录，显示主页面
   return (
     <div className="flex min-h-screen">
       {/* Animated Background */}
       <AnimatedBackground />
 
-      <Sidebar 
-        activeTab={activeTab} 
-        onTabChange={setActiveTab} 
+      <Sidebar
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
         accountInfo={accountInfo || undefined}
         isOpen={sidebarOpen}
         onClose={() => setSidebarOpen(false)}
@@ -211,7 +233,7 @@ function App() {
       <main className="flex-1 overflow-auto z-10">
         {/* 移动端顶部导航栏 */}
         <div className="md:hidden sticky top-0 z-30 bg-theme-card/95 backdrop-blur-xl border-b border-theme-divider px-4 py-3 flex items-center gap-3">
-          <button 
+          <button
             onClick={() => setSidebarOpen(true)}
             className="p-2 text-theme-muted hover:text-theme hover:bg-theme-item rounded-lg transition-colors"
           >
@@ -222,7 +244,7 @@ function App() {
             <span className="font-semibold text-theme">LLBot</span>
           </div>
         </div>
-        
+
         <div className="p-4 md:p-8 max-w-6xl mx-auto">
           {/* Header - 桌面端显示 */}
           <div className="mb-8 hidden md:block">
diff --git a/src/webui/FE/components/WebQQ/WebQQFullscreen.tsx b/src/webui/FE/components/WebQQ/WebQQFullscreen.tsx
new file mode 100644
index 00000000..be927374
--- /dev/null
+++ b/src/webui/FE/components/WebQQ/WebQQFullscreen.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { WebQQPage } from './index'
+
+/**
+ * WebQQ 全屏版本
+ * 用于 #webqq-fullscreen 路由
+ */
+const WebQQFullscreen: React.FC = () => {
+  return (
+    <div className="h-screen bg-theme p-4 md:p-8">
+      <WebQQPage />
+    </div>
+  )
+}
+
+export default WebQQFullscreen
diff --git a/src/webui/FE/components/WebQQ/index.ts b/src/webui/FE/components/WebQQ/index.ts
index b994b745..c5b95b8f 100644
--- a/src/webui/FE/components/WebQQ/index.ts
+++ b/src/webui/FE/components/WebQQ/index.ts
@@ -1,5 +1,6 @@
 // Main page
 export { default as WebQQPage } from './WebQQPage'
+export { default as WebQQFullscreen } from './WebQQFullscreen'
 
 // Chat components
 export { ChatInput, RichInput, MuteDialog, KickConfirmDialog, TitleDialog } from './chat'

From 5719816ac7d663e3ffbb8c99a2263d30a9e74349 Mon Sep 17 00:00:00 2001
From: shangxueink <1919892171@qq.com>
Date: Tue, 20 Jan 2026 01:05:36 +0800
Subject: [PATCH 2/2] refactor(webqq): update import to use direct WebQQPage
 module

---
 src/webui/FE/components/WebQQ/WebQQFullscreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webui/FE/components/WebQQ/WebQQFullscreen.tsx b/src/webui/FE/components/WebQQ/WebQQFullscreen.tsx
index be927374..3820d3fe 100644
--- a/src/webui/FE/components/WebQQ/WebQQFullscreen.tsx
+++ b/src/webui/FE/components/WebQQ/WebQQFullscreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { WebQQPage } from './index'
+import WebQQPage from './WebQQPage'
 
 /**
  * WebQQ 全屏版本