Skip to content

解决#2571实现悬浮胶囊效果支持液态玻璃的显示 - #2646

Open
starry-osean wants to merge 1 commit into
Tencent:developfrom
starry-osean:feat/LiquidGlassStyle
Open

解决#2571实现悬浮胶囊效果支持液态玻璃的显示#2646
starry-osean wants to merge 1 commit into
Tencent:developfrom
starry-osean:feat/LiquidGlassStyle

Conversation

@starry-osean

@starry-osean starry-osean commented Jul 25, 2026

Copy link
Copy Markdown

这个 PR 的性质是?

  • [√] 组件样式/交互改进

🔗 相关 Issue

解决(#2571)

💡 需求背景和解决方案

  1. 背景:为 TDesign 组件引入毛玻璃(Liquid Glass / Glassmorphism)效果的新样式风格,以丰富视觉表现力。
  2. 解决方案:在 common 仓库中新增了 _liquid-glass.scss 样式文件,定义了可复用的 CSS 变量和 Mixin。该实现基于 backdrop-filter 和半透明背景,并考虑了性能与兼容性。
  3. UI/交互变动:此 PR 为样式新增,不影响现有组件功能。应用新样式的组件将呈现毛玻璃质感。
  4. 整体设计架构
    (1)CSS 变量层 - 设计令牌,易于主题切换
    (2)LESS 样式层 - 视觉实现(磨砂、边框、阴影)
    (3) 主题配置层 - 亮色/暗色主题适配
    (4) JS 交互层 - 拖拽、点击、状态管理

📝 样式

QQ_1784967392801
  • feat(common): 新增毛玻璃(Liquid Glass)样式系统,提供 @mixin liquid-glass 和预设 CSS 变量。

@uyarn

uyarn commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator

需要实现任意一侧的端效果并提交PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants