feat(tab-bar): add liquid glass styles and capsule theme

[ChenXiaoming233]

🤔 这个 PR 的性质是？

• 新特性提交
• 文档改进
• 组件样式/交互改进
• 日常 bug 修复
• CI/CD 改进
• 重构

🔗 相关 Issue

• [Tabbar] 悬浮胶囊效果支持液态玻璃的显示，对标ios26. #2571

关联 PR

• API PR: feat(mobile-vue): add TabBar glass effect and capsule theme TDesignOteam/tdesign-api#948
• Mobile Vue PR: feat(tab-bar): add liquid glass effect tdesign-mobile-vue#2276

💡 需求背景和解决方案

为 Mobile TabBar 提供可跨组件框架复用的 Liquid Glass 公共样式，同时保持现有 TabBar 默认行为和 Classic tag 布局兼容。

通过 SVG Filter，实现逼近物理折射的 Glass 观感

以下运行时折射能力由关联的 Mobile Vue PR 实现，本 PR 提供对应的公共样式、CSS Variables 和 SVG backdrop-filter 接入能力。

通过 SVG Filter，我们可以构建一套接近真实玻璃成像过程的折射管线：

• 🔮 真实折射效果: 通过 CSS SVG Filter 模拟逼真的折光棱镜效果；
• ♻️ 兼容回退: 在不兼容环境下由液态玻璃自动降级为“固态塑料”；

实现近似物理的 SVG 折射（src/tab-bar/liquid-glass-map.ts）：

组件会根据 TabBar 的实际宽度、高度、圆角半径和设备像素比，动态生成两张纹理：

• 位移纹理（displacement map）：根据超椭圆边界计算玻璃表面的法线与位移方向。中心区域偏移较弱，越靠近玻璃边缘偏移越明显，用于模拟光线穿过不同玻璃厚度时产生的折射。
• 高光纹理（specular map）：根据边缘距离和表面方向生成反射强度，模拟玻璃边缘及曲面朝向光源时出现的镜面高光。
  纹理使用 Canvas 编码为 PNG Data URL，再传入 SVG Filter，避免依赖外部图片资源。

新增 SVG Filter 渲染（src/tab-bar/tab-bar.tsx）：

SVG Filter 内部由以下阶段组成：

• 背景预处理：通过 feGaussianBlur 对背景内容进行轻度模糊，减少折射后的像素锯齿。
• 像素折射：通过 feImage 加载位移纹理，并使用 feDisplacementMap 重新映射背景像素，产生随背景内容变化的动态折射。
• 色彩增强：通过 feColorMatrix 调整折射区域的饱和度，补偿半透明材质造成的颜色损失。
• 高光合成：使用 feComposite 将高光纹理限制在有效玻璃区域，再通过多个 feBlend 将折射背景、边缘高光和表面反射组合起来。

这样，我们得到的视觉效果并非固定的静态渐变或单纯的高斯模糊，而是会随着背景内容、容器尺寸和圆角形状变化，呈现具有空间关系的折射效果。

在不支持 SVG backdrop-filter、Canvas 等浏览器能力的环境下，材质会自动回退到”固态塑料“，使用分层 CSS 模糊效果确保基本的材质实现，并通过高光、阴影、渐变光晕等效果尽可能确保材质的质感品质。

平台兼容性 ：

Browser	Liquid Glass	Normal / CSS Fallback
Chromium (Chrome, Edge)	✅	✅
Firefox	❌（理论支持，未充分测试，已主动禁用）	✅
Safari	❌	✅

主要改动：

• 新增 Material Base、Refraction、Surface Sheen 三层玻璃结构。
• 提供分层 backdrop-filter fallback；组件端提供 SVG Filter 时自动关闭额外模糊层。
• 新增 Light/Dark 主题默认值及稳定的 CSS Variables。
• 新增 round + capsule 布局，提供共享移动胶囊、按压反馈等特性。
• 保留原有 round + tag 布局，仅在 Glass 模式下切换材质和半透明选中背景。
• 在 prefers-reduced-motion 下关闭移动及缩放动画。
• 更新中英文 API 文档和 TabBar 设计说明。

液态玻璃 CSS 变量

（style/mobile/components/tab-bar/_var.less）

@tab-bar-glass-bg-color：玻璃基础背景色，支持明暗主题动态覆盖
@tab-bar-glass-shadow：玻璃外部阴影，用于表现悬浮高度
@tab-bar-glass-fallback-blur：CSS 降级模糊基准值，默认 8px
@tab-bar-glass-sheen-opacity：玻璃表面高光透明度
@tab-bar-selected-bg-color：选中胶囊的背景颜色
@tab-bar-selected-bg-opacity：选中背景透明度，默认 16%
@tab-bar-selected-sheen-opacity：选中胶囊表面高光透明度
@tab-bar-selected-border-color：普通胶囊选中态的边框颜色

最终 API 实现与用法

• effect="glass"：启用 Liquid Glass 材质；默认 normal，不改变现有行为。
• theme="capsule"：启用共享移动胶囊选中态。
• theme="tag"：保留原有逐项标签选中态；与 effect="glass" 组合时只增加材质效果，不改变原布局。
• shape="round"：使用悬浮圆角形态。共享胶囊建议使用 shape="round" + theme="capsule"。
• change 和 onChange 的参数统一为当前值：string | number。

interface TdTabBarProps {
  bordered?: boolean; // default: true
  effect?: 'normal' | 'glass'; // default: normal
  fixed?: boolean; // default: true
  placeholder?: boolean; // default: false
  safeAreaInsetBottom?: boolean; // default: true
  shape?: 'normal' | 'round'; // default: normal
  split?: boolean; // default: true
  theme?: 'normal' | 'tag' | 'capsule'; // default: normal
  value?: string | number | Array<string | number>;
  defaultValue?: string | number | Array<string | number>;
  modelValue?: string | number | Array<string | number>;
  zIndex?: number; // default: 1
  onChange?: (value: string | number) => void;
}

效果图 与 Playground：

在此提供了 Classic 与 Capsule 两种主题分别处于 Normal / CSS Fallback / LiquidGlass 在深浅模式下的效果图；

同时，为能更直观地观察参数调整对 Glass 材质视觉效果带来的影响，此处提供两个 Playground 用于实践：

• Liquid Glass Playground
• Liquid Glass Inspector Playground

效果图：

Playground：

📝 更新日志

• feat(TabBar): 新增 Liquid Glass 材质与共享胶囊主题样式

☑️ 本地验证

• Prettier
• Stylelint
• 构建检查
• git diff --check
• Mobile Vue 关联 PR 完成 548/548 单元测试
• Mobile Vue 关联 PR 提供 Demo 和 Inspector Playground

☑️ 请求合并前的自查清单

• 文档已补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• Changelog 已提供

[github-actions]

TDesign Component Repositories CI Test Open

Component	Lint	Test	Build	Preview
tdesign-vue	✅	✅	✅	👀
tdesign-vue-next	✅	✅	✅	👀
tdesign-react	✅	✅	✅	👀
tdesign-mobile-vue	✅	✅	✅	👀
tdesign-mobile-react	✅	✅	✅	👀