Skip to content

[Bug] TTS 朗读界面遮挡窗口控制按钮:无法最小化/最大化/关闭窗口 #368

@chy5301

Description

@chy5301

Type

Bug

现象

桌面端进入 TTS 语音朗读界面后,窗口右上角的最小化、最大化、关闭按钮被 TTS 界面完全遮挡,无法点击。能隐约看到按钮边缘,但被 TTS 界面覆盖在上层,导致不「返回原文」就无法操作窗口控制按钮。

复现步骤

  1. 打开一本书,点击朗读按钮进入 TTS 语音朗读界面;
  2. 尝试点击窗口右上角的最小化 / 最大化 / 关闭按钮;
  3. 观察:按钮被 TTS 界面遮挡,无法点击;
  4. 点击「返回阅读」回到原文阅读界面后,窗口控制按钮恢复正常可点击。

根因分析

TTS 页面(TTSPage.tsx)使用 absolute inset-0 z-[65] 覆盖整个窗口区域,而包含窗口控制按钮的 TabBar(TabBar.tsx)使用 z-50。TTS 界面的 z-index 高于 TabBar,导致窗口控制按钮被完全遮挡。

相关代码:

  • packages/app/src/components/reader/TTSPage.tsx:288<div className="absolute inset-0 z-[65] flex bg-background">
  • packages/app/src/components/layout/AppLayout.tsx:323:TabBar 使用 z-50

可能的修复方向(仅建议)

  1. 提高 TabBar 的 z-index:将 TabBar 的 z-index 设置为高于 TTS 页面(如 z-[70]),确保窗口控制按钮始终在最上层;
  2. TTS 界面预留顶部空间:让 TTS 页面不要完全覆盖顶部 TabBar 区域,或在 TTS 界面顶部也提供窗口控制按钮;
  3. TTS 界面内嵌窗口控制:在 TTS 界面右上角直接渲染窗口控制按钮(最小化/最大化/关闭),类似阅读模式下的处理方式。

设备

  • Platform: Desktop (Windows)
  • OS: Windows 11 (Build 26200)
  • App: v1.3.2
  • Locale: zh-CN

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions