[Bug] 对话区域标题栏的背景变为透明

[TonyBlur]

📦 部署环境

Official Preview, Vercel

📌 软件版本

v1.19.23

💻 系统环境

Windows

🌐 浏览器

Edge

🐛 问题描述

如上图所示，标题栏背景模糊丢失变为透明，与后面的文字混杂影响阅读

📷 复现步骤

No response

🚦 期望结果

No response

📝 补充信息

No response

[lobehubbot]

👀 @TonyBlur

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible. Please make sure you have given us as much context as possible.\ 非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

📦 Deployment environment

Official Preview, Vercel

📌 Software version

v1.19.23

💻 System environment

Windows

🌐 Browser

Edge

🐛 Problem description

As shown in the picture above, the background of the title bar is blurred and becomes transparent, which mixes with the text behind it and affects reading.

📷 Steps to reproduce

No response

🚦 Expected results

No response

📝 Supplementary information

No response

[dosubot[bot]]

The issue with the title bar background becoming transparent and affecting readability could be related to the conditional styles or themes applied to the ChatHeaderTitle component. The background styling of the ChatHeaderTitle component is influenced by the theme.colorFillSecondary property from the useTheme hook.

<ActionIcon
  active
  icon={ChevronDown}
  size={{ blockSize: 14, borderRadius: '50%', fontSize: 12 }}
  style={{
    background: theme.colorFillSecondary,
    color: theme.colorTextDescription,
  }}
/>

Additionally, the MobileNavBarTitle component is nested within the MobileNavBar, which has a style prop set to mobileHeaderSticky. This could also affect the background of the title bar.

<MobileNavBar
  center={
    <MobileNavBarTitle
      title={
        <Flexbox align={'center'} gap={4} horizontal>
          {t('userPanel.setting')}
        </Flexbox>
      }
    />
  }
  onBackClick={() => router.push('/me')}
  showBackButton
  style={mobileHeaderSticky}
/>

You might want to check if there are any recent changes or commits related to the ChatHeaderTitle component that could have affected its background styling. For instance, the commit with hash 2812ea2 includes updates to the HeaderTitle component ^[1][2].

Reviewing these areas in the codebase should help identify and resolve the issue with the title bar background.

To continue talking to Dosu, mention @dosu.

[lobehubbot]

✅ @TonyBlur

This issue is closed, If you have any questions, you can comment and reply.\ 此问题已经关闭。如果您有任何问题，可以留言并回复。

[lobehubbot]

:tada: This issue has been resolved in version 1.19.24 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: