openxiangda-cli 2.0.0-alpha.67 → 2.0.0-alpha.69

package/template/apps/web/src/appearance.tsx

@@ -0,0 +1,147 @@
+import {
+  App as AntdApp,
+  ConfigProvider,
+  theme as antdTheme,
+  type ThemeConfig,
+} from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+
+export type AppearancePreference = 'system' | 'light' | 'dark';
+export type EffectiveAppearance = 'light' | 'dark';
+
+const STORAGE_KEY = 'openxiangda.admin.appearance';
+const AppearanceContext = createContext<{
+  preference: AppearancePreference;
+  effectiveAppearance: EffectiveAppearance;
+  setPreference: (value: AppearancePreference) => void;
+} | null>(null);
+
+function storedPreference(): AppearancePreference {
+  try {
+    const value = window.localStorage.getItem(STORAGE_KEY);
+    return value === 'light' || value === 'dark' || value === 'system'
+      ? value
+      : 'system';
+  } catch {
+    return 'system';
+  }
+}
+
+function systemPrefersDark() {
+  return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+}
+
+function PlatformThemeCssVariables() {
+  const { token } = antdTheme.useToken();
+  useLayoutEffect(() => {
+    const root = document.documentElement;
+    const variables: Record<string, string> = {
+      '--oxa-shell-bg': token.colorBgLayout,
+      '--oxa-shell-surface': token.colorBgContainer,
+      '--oxa-shell-elevated': token.colorBgElevated,
+      '--oxa-shell-subtle': token.colorFillAlter,
+      '--oxa-shell-hover': token.colorFillSecondary,
+      '--oxa-shell-border': token.colorBorderSecondary,
+      '--oxa-shell-border-strong': token.colorBorder,
+      '--oxa-shell-text': token.colorText,
+      '--oxa-shell-text-secondary': token.colorTextSecondary,
+      '--oxa-shell-text-tertiary': token.colorTextTertiary,
+      '--oxa-shell-text-disabled': token.colorTextDisabled,
+      '--oxa-shell-primary': token.colorPrimary,
+      '--oxa-shell-primary-bg': token.colorPrimaryBg,
+      '--oxa-shell-primary-border': token.colorPrimaryBorder,
+      '--oxa-shell-error': token.colorError,
+      '--oxa-shell-error-bg': token.colorErrorBg,
+      '--oxa-shell-error-border': token.colorErrorBorder,
+      '--oxa-shell-mask': token.colorBgMask,
+      '--oxa-shell-shadow': token.boxShadowTertiary,
+    };
+    for (const [name, value] of Object.entries(variables)) {
+      root.style.setProperty(name, value);
+    }
+  }, [token]);
+  return null;
+}
+
+export function AppearanceProvider({ children }: { children: ReactNode }) {
+  const [preference, setPreferenceState] = useState<AppearancePreference>(
+    storedPreference,
+  );
+  const [systemDark, setSystemDark] = useState(systemPrefersDark);
+
+  useEffect(() => {
+    const query = window.matchMedia('(prefers-color-scheme: dark)');
+    const onChange = (event: MediaQueryListEvent) => setSystemDark(event.matches);
+    query.addEventListener('change', onChange);
+    return () => query.removeEventListener('change', onChange);
+  }, []);
+
+  const effectiveAppearance: EffectiveAppearance =
+    preference === 'system' ? (systemDark ? 'dark' : 'light') : preference;
+
+  useLayoutEffect(() => {
+    document.documentElement.dataset.oxaTheme = effectiveAppearance;
+    document.documentElement.style.colorScheme = effectiveAppearance;
+  }, [effectiveAppearance]);
+
+  const setPreference = (value: AppearancePreference) => {
+    setPreferenceState(value);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, value);
+    } catch {
+      // A blocked storage API must not prevent the in-memory theme switch.
+    }
+  };
+
+  const theme = useMemo<ThemeConfig>(
+    () => ({
+      algorithm:
+        effectiveAppearance === 'dark'
+          ? antdTheme.darkAlgorithm
+          : antdTheme.defaultAlgorithm,
+      cssVar: { key: effectiveAppearance, prefix: 'oxa' },
+      token: {
+        borderRadius: 6,
+        colorPrimary: '#1677ff',
+        fontSize: 14,
+      },
+      components: {
+        Card: { headerFontSize: 16 },
+        Layout: { headerHeight: 52 },
+        Menu: { itemBorderRadius: 6, itemHeight: 40 },
+      },
+    }),
+    [effectiveAppearance],
+  );
+
+  const value = useMemo(
+    () => ({ preference, effectiveAppearance, setPreference }),
+    [effectiveAppearance, preference],
+  );
+
+  return (
+    <AppearanceContext.Provider value={value}>
+      <ConfigProvider componentSize="medium" locale={zhCN} theme={theme}>
+        <AntdApp>
+          <PlatformThemeCssVariables />
+          {children}
+        </AntdApp>
+      </ConfigProvider>
+    </AppearanceContext.Provider>
+  );
+}
+
+export function useAppearance() {
+  const value = useContext(AppearanceContext);
+  if (!value) throw new Error('OPENXIANGDA_APPEARANCE_NOT_READY');
+  return value;
+}