feat(ui): 底栏可拖动切换 + 透明度降至 0.24

- 滑块随手指实时移动，松手后跳转到目标 tab
- 抽出 tabBarGeometry 计算拖拽命中，配套单测
- 底栏浅色/深色底色 0.32 -> 0.24

tools/custom-tab-bar.test.mjs

@@ -0,0 +1,24 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { clampDragX, getTabBarFrame, tabIndexAtX } from '../src/custom-tab-bar/tabBarGeometry.js'
+
+test('maps a drag x to the tab under the finger', () => {
+  assert.equal(tabIndexAtX(10, 100, 5), 0)
+  assert.equal(tabIndexAtX(30, 100, 5), 1)
+  assert.equal(tabIndexAtX(50, 100, 5), 2)
+  assert.equal(tabIndexAtX(70, 100, 5), 3)
+  assert.equal(tabIndexAtX(90, 100, 5), 4)
+})
+
+test('clamps drag positions outside the bar', () => {
+  assert.equal(tabIndexAtX(-10, 100, 5), 0)
+  assert.equal(tabIndexAtX(200, 100, 5), 4)
+  assert.equal(clampDragX(-5, 100), 0)
+  assert.equal(clampDragX(120, 100), 100)
+  assert.equal(clampDragX(Number.NaN, 100), 0)
+})
+
+test('derives the floating bar frame from window width', () => {
+  assert.deepEqual(getTabBarFrame(375), { left: 18, width: 339 })
+  assert.deepEqual(getTabBarFrame(750), { left: 36, width: 678 })
+})

tools/liquid-glass.test.mjs

@@ -15,8 +15,8 @@ test('custom tab bar renders the liquid-glass overlay layers', () => {
 
 test('custom tab bar uses bright glass material and the silver rim', () => {
   const css = read('src/custom-tab-bar/index.scss')
-  assert.match(css, /background: rgba\(255, 255, 255, 0\.32\)/)
-  assert.match(css, /background: rgba\(25, 25, 25, 0\.32\)/)
+  assert.match(css, /background: rgba\(255, 255, 255, 0\.24\)/)
+  assert.match(css, /background: rgba\(25, 25, 25, 0\.24\)/)
   assert.match(css, /backdrop-filter: blur\(32px\) saturate\(1\.7\) brightness\(1\.05\)/)
   assert.match(css, /-webkit-backdrop-filter: blur\(32px\) saturate\(1\.7\) brightness\(1\.05\)/)
   assert.match(css, /mask-composite: exclude/)