feat(tab-bar): add liquid glass effect

[ChenXiaoming233]

TabBar 的主题 Token、组件样式及相关设计文档统一维护在 tdesign-common 中，tdesign-mobile-vue 通过 src/_common 子模块复用这些共享资源，以保持样式来源唯一、避免重复维护。

本 PR 依赖的 Liquid Glass 与 Capsule 样式由 Tencent/tdesign-common#2650 提供。此前 src/_common 指向仅存在于本地对象库的 ecff38ac，导致 CI 无法递归检出子模块。现将 src/_common 更新至 Tencent/tdesign-common#2650 的 head commit 26fb5344，令子模块可访问；待 #2650 合并后， _common 再更新至最终进入 tdesign-common/develop 的正式提交。

🤔 这个 PR 的性质是？

• 日常 bug 修复
• 新特性提交
• 文档改进
• 演示代码改进
• 组件样式/交互改进
• CI/CD 改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他

🔗 相关 Issue

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

关联 PR

• API PR: feat(mobile-vue): add TabBar glass effect and capsule theme TDesignOteam/tdesign-api#948
• Common PR: feat(tab-bar): add liquid glass styles and capsule theme tdesign-common#2650

💡 需求背景和解决方案

为 TabBar 接入渐进增强的 Liquid Glass 材质，并提供独立的共享胶囊选中主题。

公开 API

<t-tab-bar effect="glass" shape="round" theme="capsule">
  ...
</t-tab-bar>

最终 API 实现与用法

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;
}

主要改动

• 新增 Liquid Glass API

  • src/tab-bar/type.ts：新增 effect?: 'normal' | 'glass'，并为 theme 增加 capsule。
  • src/tab-bar/props.ts：补充默认值和枚举校验；默认 effect="normal"，保持兼容。

• TabBar 渲染玻璃材质与共享胶囊

  • src/tab-bar/tab-bar.tsx：
    • Glass 模式增加 Material Base、Refraction、Surface Sheen 和实例级 SVG Filter。
    • shape="round" + theme="capsule" 时渲染共享移动选中胶囊。
    • 普通模式不生成 Glass DOM，避免额外运行时开销。

• TabBarItem 交互适配

  • src/tab-bar/tab-bar-item.tsx：
    • Capsule 模式增加 pointer 按压、长按、释放和取消反馈。
    • prefers-reduced-motion 下取消缩放和移动动画。

• 实现折射纹理生成

  • src/tab-bar/liquid-glass-map.ts：
    • 根据组件尺寸、圆角和 DPR 生成超椭圆位移图与高光图。
    • DPR 上限为 2，单张纹理上限为 524,288 像素。
    • 输出确定、无持续动画或后台计算。

• 管理滤镜生命周期

  • src/tab-bar/useTabBarGlassFilter.ts：
    • 管理 Canvas 编码、SVG Filter ID、ResizeObserver 和 DPR 变化。
    • 支持多实例、运行时 effect/shape 切换和卸载清理。
    • SSR 或浏览器能力不足时自动使用 CSS fallback。

• 新增公开 Demo 与文档

  • src/tab-bar/demos/glass.vue：展示 Classic tag 和 Shared capsule 两种 Glass 组合。
  • src/tab-bar/demos/mobile.vue：将 Glass 示例接入组件 Demo。
  • src/tab-bar/tab-bar.md、tab-bar.en-US.md：补充 API 和降级说明。

液态玻璃 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：普通胶囊选中态的边框颜色

效果图 与 Playground：

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

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

• Liquid Glass Playground
• Liquid Glass Inspector Playground

效果图：

Playground：

📝 更新日志

• feat(TabBar): 新增 Liquid Glass 材质和共享胶囊选中主题
• 本条 PR 不需要纳入 Changelog

☑️ 本地验证

• TabBar 目标测试 50/50
• 全量单元测试 786/786
• Demo 快照 408/408
• Lint 和 TypeScript 检查
• 生产构建
• 子模块完整性检查
• git diff --check
• 远程 CI，等待 PR 创建后执行

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

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

[github-actions]

[pkg-pr-new]

• tdesign-mobile-vue-demo

  npm i https://pkg.pr.new/tdesign-mobile-vue@2276
  

commit: 1e6b51d