♻️ refactor(web): refine data-table cards and pricing page layout

Replace collapsible card details with always-visible label/value rows, add badge-list full display for cards, and polish pricing/channel toolbars and mobile cards.
2026-07-11 06:02:16 +08:00
parent 0918bdb49a
commit 9d1ca545e2
68 changed files with 1971 additions and 1840 deletions
@@ -20,7 +20,7 @@ import {
  createContext,
  useCallback,
  useContext,
-  useEffect,
+  useLayoutEffect,
  useMemo,
  useState,
 } from 'react'
@@ -133,9 +133,11 @@ export function ThemeCustomizationProvider(props: {
    )
  )

-  // Mirror state to the <body> via data-* attributes so theme-presets.css can
-  // override CSS variables at the right cascade layer.
-  useEffect(() => {
+  // Mirror state to <body> via data-* attributes before paint so theme-
+  // presets.css can override CSS variables without a one-frame size/font flash.
+  // useLayoutEffect (not useEffect) is required: useEffect runs after paint,
+  // which is exactly when users see text jump from default → cookie scale/font.
+  useLayoutEffect(() => {
    applyAttribute(
      'data-theme-preset',
      preset === DEFAULT_THEME_CUSTOMIZATION.preset ? null : preset
@@ -148,25 +150,25 @@ export function ThemeCustomizationProvider(props: {
  // Resolving here (instead of in CSS via `:not()` selectors) keeps the
  // stylesheet to one simple `[data-theme-font='serif']` selector and lets
  // future presets opt into typography via `PRESET_DEFAULT_FONT` alone.
-  useEffect(() => {
+  useLayoutEffect(() => {
    applyAttribute('data-theme-font', resolveThemeFont(font, preset))
  }, [font, preset])

-  useEffect(() => {
+  useLayoutEffect(() => {
    applyAttribute(
      'data-theme-radius',
      radius === DEFAULT_THEME_CUSTOMIZATION.radius ? null : radius
    )
  }, [radius])

-  useEffect(() => {
+  useLayoutEffect(() => {
    applyAttribute(
      'data-theme-scale',
      scale === DEFAULT_THEME_CUSTOMIZATION.scale ? null : scale
    )
  }, [scale])

-  useEffect(() => {
+  useLayoutEffect(() => {
    applyAttribute('data-theme-content-layout', contentLayout)
  }, [contentLayout])

@@ -20,7 +20,7 @@ import {
  createContext,
  useCallback,
  useContext,
-  useEffect,
+  useLayoutEffect,
  useMemo,
  useState,
 } from 'react'
@@ -88,7 +88,8 @@ export function ThemeProvider({
    resolveTheme(getStoredTheme(storageKey, defaultTheme))
  )

-  useEffect(() => {
+  // Apply before paint to avoid a light→dark (or reverse) flash on load.
+  useLayoutEffect(() => {
    const root = window.document.documentElement
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')