feat(webqq): add fullscreen mode for WebQQ interface #689
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
Contributor
审阅者指南添加新的 导航到新的 WebQQ 全屏路由的时序图sequenceDiagram
actor User
participant Browser
participant App
participant WebQQFullscreen
participant WebQQPage
User->>Browser: Set URL hash to webqq-fullscreen
Browser-->>App: hashchange event
App->>App: handleHashChange reads window.location.hash
App->>App: validate hash against validTabs
App->>App: setActiveTab webqq-fullscreen
App->>App: re render with activeTab webqq-fullscreen
App-->>WebQQFullscreen: render WebQQFullscreen
WebQQFullscreen-->>WebQQPage: render WebQQPage inside fullscreen container
App-->>User: Display WebQQ in fullscreen layout without sidebar or header
更新后的 App 与 WebQQ 全屏组件类图classDiagram
class App {
- string activeTab
- Config config
- boolean loading
- boolean isLoggedIn
- boolean checkingLogin
+ App()
}
class WebQQFullscreen {
+ WebQQFullscreen()
}
class WebQQPage {
}
class Sidebar {
+ Sidebar(activeTab, onTabChange, accountInfo, isOpen, onClose)
}
class AnimatedBackground {
+ AnimatedBackground()
}
class TokenDialog {
+ TokenDialog(visible, onConfirm, error)
}
class ToastContainer {
+ ToastContainer()
}
App --> AnimatedBackground : renders
App --> Sidebar : renders in main layout
App --> TokenDialog : renders
App --> ToastContainer : renders
App --> WebQQFullscreen : renders when activeTab webqq-fullscreen
WebQQFullscreen --> WebQQPage : renders
文件级变更
提示与命令与 Sourcery 交互
自定义使用体验访问你的 控制台 以：
获取帮助Original review guide in EnglishReviewer's GuideAdds a new Sequence diagram for navigating to the new WebQQ fullscreen routesequenceDiagram
actor User
participant Browser
participant App
participant WebQQFullscreen
participant WebQQPage
User->>Browser: Set URL hash to webqq-fullscreen
Browser-->>App: hashchange event
App->>App: handleHashChange reads window.location.hash
App->>App: validate hash against validTabs
App->>App: setActiveTab webqq-fullscreen
App->>App: re render with activeTab webqq-fullscreen
App-->>WebQQFullscreen: render WebQQFullscreen
WebQQFullscreen-->>WebQQPage: render WebQQPage inside fullscreen container
App-->>User: Display WebQQ in fullscreen layout without sidebar or header
Updated class diagram for App and WebQQ fullscreen componentsclassDiagram
class App {
- string activeTab
- Config config
- boolean loading
- boolean isLoggedIn
- boolean checkingLogin
+ App()
}
class WebQQFullscreen {
+ WebQQFullscreen()
}
class WebQQPage {
}
class Sidebar {
+ Sidebar(activeTab, onTabChange, accountInfo, isOpen, onClose)
}
class AnimatedBackground {
+ AnimatedBackground()
}
class TokenDialog {
+ TokenDialog(visible, onConfirm, error)
}
class ToastContainer {
+ ToastContainer()
}
App --> AnimatedBackground : renders
App --> Sidebar : renders in main layout
App --> TokenDialog : renders
App --> ToastContainer : renders
App --> WebQQFullscreen : renders when activeTab webqq-fullscreen
WebQQFullscreen --> WebQQPage : renders
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - 我发现了一个问题，并给出了一些整体性的反馈：
- 在
WebQQFullscreen.tsx中，从./index导入WebQQPage会与index.ts中导出的WebQQFullscreen形成循环依赖；建议在这里直接从./WebQQPage导入WebQQPage，以避免潜在的模块解析问题。 App.tsx中在初始状态计算和 hashchange 处理函数里都各自定义了一份validTabs数组；将它提取为一个共享常量可以降低这两个列表在未来出现不一致的风险。
提供给 AI Agents 的提示
Please address the comments from this code review:
## Overall Comments
- In `WebQQFullscreen.tsx`, importing `WebQQPage` from `./index` creates a circular dependency with `index.ts` exporting `WebQQFullscreen`; consider importing `WebQQPage` directly from `./WebQQPage` to avoid potential resolution issues.
- The `validTabs` array is duplicated in both the initial state calculation and the hashchange handler in `App.tsx`; extracting it to a shared constant will reduce the risk of the two lists diverging over time.
## Individual Comments
### Comment 1
<location> `src/webui/FE/components/WebQQ/WebQQFullscreen.tsx:2` </location>
<code_context>
+import React from 'react'
+import { WebQQPage } from './index'
+
+/**
</code_context>
<issue_to_address>
**issue (bug_risk):** Avoid circular dependency by importing WebQQPage directly instead of via the index barrel.
Because `index.ts` now re-exports `WebQQFullscreen`, importing `WebQQPage` from `./index` introduces a cycle: `index.ts -> WebQQFullscreen.tsx -> index.ts`, which can cause `undefined` exports or initialization issues in some runtimes. Import `WebQQPage` directly from `'./WebQQPage'` here to avoid the cycle while still using the barrel elsewhere.
</issue_to_address>帮我变得更有用！请在每条评论上点 👍 或 👎，我会根据你的反馈改进后续的代码评审。
Original comment in English
Hey - I've found 1 issue, and left some high level feedback:
- In
WebQQFullscreen.tsx, importingWebQQPagefrom./indexcreates a circular dependency withindex.tsexportingWebQQFullscreen; consider importingWebQQPagedirectly from./WebQQPageto avoid potential resolution issues. - The
validTabsarray is duplicated in both the initial state calculation and the hashchange handler inApp.tsx; extracting it to a shared constant will reduce the risk of the two lists diverging over time.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `WebQQFullscreen.tsx`, importing `WebQQPage` from `./index` creates a circular dependency with `index.ts` exporting `WebQQFullscreen`; consider importing `WebQQPage` directly from `./WebQQPage` to avoid potential resolution issues.
- The `validTabs` array is duplicated in both the initial state calculation and the hashchange handler in `App.tsx`; extracting it to a shared constant will reduce the risk of the two lists diverging over time.
## Individual Comments
### Comment 1
<location> `src/webui/FE/components/WebQQ/WebQQFullscreen.tsx:2` </location>
<code_context>
+import React from 'react'
+import { WebQQPage } from './index'
+
+/**
</code_context>
<issue_to_address>
**issue (bug_risk):** Avoid circular dependency by importing WebQQPage directly instead of via the index barrel.
Because `index.ts` now re-exports `WebQQFullscreen`, importing `WebQQPage` from `./index` introduces a cycle: `index.ts -> WebQQFullscreen.tsx -> index.ts`, which can cause `undefined` exports or initialization issues in some runtimes. Import `WebQQPage` directly from `'./WebQQPage'` here to avoid the cycle while still using the barrel elsewhere.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
新增 WebQQ 全屏模式（
#webqq-fullscreen）为 WebUI 新增一个 独立的 WebQQ 全屏页面，使其能够在无侧边栏的环境下单独运行，同时 保留原有 #webqq 布局不变。
适合：
实现内容
1. 新增全屏 WebQQ 路由：
#webqq-fullscreenWebQQFullscreen.tsx<WebQQPage />。2. App.tsx 中新增路由判断
新增分支：
确保全屏版本不加载 Sidebar / Header / 布局容器。
3. 无全屏模式下 UI 完全不变
所有原有 UI 行为继续保持：
📁 主要新增文件
src/webui/FE/components/WebQQ/WebQQFullscreen.tsx📁 主要修改文件
src/webui/FE/App.tsx加入
webqq-fullscreen路由判断与导入src/webui/FE/components/WebQQ/index.ts导出 WebQQFullscreen 组件
Summary by Sourcery
添加一个专用的全屏 WebQQ 视图，可通过新的 hash 路由访问，同时保留现有基于侧边栏的 WebQQ 布局。
新功能：
webqq-fullscreenhash 路由，用于在不包含主布局外框（chrome）的情况下，以独立全屏视图打开 WebQQ。增强：
Original summary in English
Summary by Sourcery
Add a dedicated fullscreen WebQQ view accessible via a new hash route while preserving the existing sidebar-based WebQQ layout.
New Features:
webqq-fullscreenhash route to open WebQQ in an isolated fullscreen view without the main layout chrome.Enhancements: