@gadmin2n/schematics 0.0.139 → 0.0.140

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/contexts/color-mode/index.tsx

@@ -1,54 +1,309 @@
 import { RefineThemes } from '@refinedev/antd';
-import { ConfigProvider } from 'antd';
+import { ConfigProvider, theme } from 'antd';
 import type { ThemeConfig } from 'antd';
-import { PropsWithChildren } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type PropsWithChildren,
+} from 'react';
+import { THEME_STYLES, type ThemeStyleKey } from './themeStyles';
 
-const themeConfig: ThemeConfig = {
-  ...RefineThemes.Blue,
+export type ThemePresetKey = 'blue' | 'teal' | 'purple' | 'orange';
+export type ThemeMode = 'light' | 'dark';
+/** 侧边栏配色：跟随全局明暗 / 强制深色(经典 admin) / 强制浅色。 */
+export type SiderTheme = 'auto' | 'dark' | 'light';
+/** 菜单组织：树形折叠 / 分组平铺(一级降级为分组标题)。 */
+export type MenuLayoutMode = 'tree' | 'grouped';
+/** 菜单选中态：整行填充 / 圆角药丸 / 左侧指示条。 */
+export type MenuSelectionStyle = 'fill' | 'pill' | 'indicator';
+/** 子菜单展开行为：手风琴单开 / 多组同开。 */
+export type MenuExpandMode = 'accordion' | 'multiple';
+export { THEME_STYLES, type ThemeStyleKey };
+
+export interface ThemePreset {
+  key: ThemePresetKey;
+  colorPrimary: string;
+  zhLabel: string;
+  enLabel: string;
+}
+
+/**
+ * 主色预设。只切换 colorPrimary —— 背景、圆角、字体等基调保持一致，
+ * 语义色 (colorError 等) 也不跟随主题变化，避免"错误变成蓝色"这类语义错位。
+ */
+export const THEME_PRESETS: ThemePreset[] = [
+  {
+    key: 'blue',
+    colorPrimary: '#1677FF',
+    zhLabel: '拂晓蓝',
+    enLabel: 'Daybreak',
+  },
+  { key: 'teal', colorPrimary: '#13A8A8', zhLabel: '青碧绿', enLabel: 'Cyan' },
+  {
+    key: 'purple',
+    colorPrimary: '#722ED1',
+    zhLabel: '酱紫',
+    enLabel: 'Purple',
+  },
+  {
+    key: 'orange',
+    colorPrimary: '#FA8C16',
+    zhLabel: '日暮橙',
+    enLabel: 'Sunset',
+  },
+];
+
+const PRESET_STORAGE_KEY = 'gadmin-theme-preset';
+const MODE_STORAGE_KEY = 'gadmin-theme-mode';
+const STYLE_STORAGE_KEY = 'gadmin-theme-style';
+const SIDER_THEME_STORAGE_KEY = 'gadmin-sider-theme';
+const MENU_LAYOUT_STORAGE_KEY = 'gadmin-menu-layout';
+const MENU_SELECTION_STORAGE_KEY = 'gadmin-menu-selection';
+const MENU_EXPAND_STORAGE_KEY = 'gadmin-menu-expand';
+
+const DEFAULT_PRESET: ThemePresetKey = 'blue';
+const DEFAULT_MODE: ThemeMode = 'light';
+const DEFAULT_STYLE: ThemeStyleKey = 'standard';
+const DEFAULT_SIDER_THEME: SiderTheme = 'auto';
+const DEFAULT_MENU_LAYOUT: MenuLayoutMode = 'tree';
+const DEFAULT_MENU_SELECTION: MenuSelectionStyle = 'fill';
+const DEFAULT_MENU_EXPAND: MenuExpandMode = 'accordion';
+
+const readStorage = <T,>(
+  key: string,
+  isValid: (v: unknown) => v is T,
+  fallback: T,
+): T => {
+  try {
+    const saved = window.localStorage.getItem(key);
+    if (isValid(saved)) return saved;
+  } catch {
+    // localStorage 不可用 (隐私模式 / SSR)，回落到默认。
+  }
+  return fallback;
+};
+
+const writeStorage = (key: string, value: string) => {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+    // 持久化失败不影响当次会话内的切换。
+  }
+};
+
+const isPreset = (v: unknown): v is ThemePresetKey =>
+  THEME_PRESETS.some((p) => p.key === v);
+const isMode = (v: unknown): v is ThemeMode => v === 'light' || v === 'dark';
+const isStyle = (v: unknown): v is ThemeStyleKey =>
+  THEME_STYLES.some((s) => s.key === v);
+const isSiderTheme = (v: unknown): v is SiderTheme =>
+  v === 'auto' || v === 'dark' || v === 'light';
+const isMenuLayout = (v: unknown): v is MenuLayoutMode =>
+  v === 'tree' || v === 'grouped';
+const isMenuSelection = (v: unknown): v is MenuSelectionStyle =>
+  v === 'fill' || v === 'pill' || v === 'indicator';
+const isMenuExpand = (v: unknown): v is MenuExpandMode =>
+  v === 'accordion' || v === 'multiple';
+
+// 只保留与明暗无关的基调设置 (圆角/字体/语义色)。
+// 背景色、文字色、组件底色等一律交给 antd algorithm 派生，
+// 否则暗色模式下写死的浅色值会穿帮。
+const baseThemeConfig: ThemeConfig = {
   token: {
     ...RefineThemes.Blue.token,
-    colorPrimary: '#1677FF',
     colorError: '#fa541c',
-    colorPrimaryText: 'rgba(0, 0, 0, 0.85)',
-    colorTextSecondary: 'rgba(0, 0, 0, 0.65)',
-    colorTextTertiary: 'rgba(0, 0, 0, 0.45)',
-    colorBgContainer: '#F7F8F9',
-    colorBgLayout: '#F0F2F5',
-    colorBorderBg: '#E8E9EA',
     borderRadius: 6,
     fontFamily:
       "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
   },
   components: {
-    Typography: {
-      colorText: 'rgba(0, 0, 0, 0.85)',
-      colorTextDescription: 'rgba(0, 0, 0, 0.65)',
-      colorTextDisabled: 'rgba(0, 0, 0, 0.45)',
-    },
-    Card: {
-      colorBgContainer: '#FFFFFF',
-      headerBg: '#FAFAFA',
-    },
-    Table: {
-      colorBgContainer: '#fff',
-    },
-    Input: {
-      colorBgContainer: '#fff',
-    },
-    InputNumber: {
-      colorBgContainer: '#fff',
-    },
-    Select: {
-      colorBgContainer: '#fff',
-    },
     Form: {
       labelFontSize: 14,
     },
   },
 };
 
+interface AppearanceContextValue {
+  presetKey: ThemePresetKey;
+  setPresetKey: (key: ThemePresetKey) => void;
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  styleKey: ThemeStyleKey;
+  setStyleKey: (key: ThemeStyleKey) => void;
+  siderTheme: SiderTheme;
+  setSiderTheme: (next: SiderTheme) => void;
+  menuLayout: MenuLayoutMode;
+  setMenuLayout: (next: MenuLayoutMode) => void;
+  menuSelection: MenuSelectionStyle;
+  setMenuSelection: (next: MenuSelectionStyle) => void;
+  menuExpand: MenuExpandMode;
+  setMenuExpand: (next: MenuExpandMode) => void;
+  presets: ThemePreset[];
+}
+
+const AppearanceContext = createContext<AppearanceContextValue>({
+  presetKey: DEFAULT_PRESET,
+  setPresetKey: () => undefined,
+  mode: DEFAULT_MODE,
+  setMode: () => undefined,
+  styleKey: DEFAULT_STYLE,
+  setStyleKey: () => undefined,
+  siderTheme: DEFAULT_SIDER_THEME,
+  setSiderTheme: () => undefined,
+  menuLayout: DEFAULT_MENU_LAYOUT,
+  setMenuLayout: () => undefined,
+  menuSelection: DEFAULT_MENU_SELECTION,
+  setMenuSelection: () => undefined,
+  menuExpand: DEFAULT_MENU_EXPAND,
+  setMenuExpand: () => undefined,
+  presets: THEME_PRESETS,
+});
+
+export const useAppearance = () => useContext(AppearanceContext);
+
 export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({
   children,
 }) => {
-  return <ConfigProvider theme={themeConfig}>{children}</ConfigProvider>;
+  const [presetKey, setPresetKeyState] = useState<ThemePresetKey>(() =>
+    readStorage(PRESET_STORAGE_KEY, isPreset, DEFAULT_PRESET),
+  );
+  const [mode, setModeState] = useState<ThemeMode>(() =>
+    readStorage(MODE_STORAGE_KEY, isMode, DEFAULT_MODE),
+  );
+  const [styleKey, setStyleKeyState] = useState<ThemeStyleKey>(() =>
+    readStorage(STYLE_STORAGE_KEY, isStyle, DEFAULT_STYLE),
+  );
+  const [siderTheme, setSiderThemeState] = useState<SiderTheme>(() =>
+    readStorage(SIDER_THEME_STORAGE_KEY, isSiderTheme, DEFAULT_SIDER_THEME),
+  );
+  const [menuLayout, setMenuLayoutState] = useState<MenuLayoutMode>(() =>
+    readStorage(MENU_LAYOUT_STORAGE_KEY, isMenuLayout, DEFAULT_MENU_LAYOUT),
+  );
+  const [menuSelection, setMenuSelectionState] = useState<MenuSelectionStyle>(
+    () =>
+      readStorage(
+        MENU_SELECTION_STORAGE_KEY,
+        isMenuSelection,
+        DEFAULT_MENU_SELECTION,
+      ),
+  );
+  const [menuExpand, setMenuExpandState] = useState<MenuExpandMode>(() =>
+    readStorage(MENU_EXPAND_STORAGE_KEY, isMenuExpand, DEFAULT_MENU_EXPAND),
+  );
+
+  const setPresetKey = useCallback((key: ThemePresetKey) => {
+    setPresetKeyState(key);
+    writeStorage(PRESET_STORAGE_KEY, key);
+  }, []);
+  const setMode = useCallback((next: ThemeMode) => {
+    setModeState(next);
+    writeStorage(MODE_STORAGE_KEY, next);
+  }, []);
+  const setStyleKey = useCallback((key: ThemeStyleKey) => {
+    setStyleKeyState(key);
+    writeStorage(STYLE_STORAGE_KEY, key);
+  }, []);
+  const setSiderTheme = useCallback((next: SiderTheme) => {
+    setSiderThemeState(next);
+    writeStorage(SIDER_THEME_STORAGE_KEY, next);
+  }, []);
+  const setMenuLayout = useCallback((next: MenuLayoutMode) => {
+    setMenuLayoutState(next);
+    writeStorage(MENU_LAYOUT_STORAGE_KEY, next);
+  }, []);
+  const setMenuSelection = useCallback((next: MenuSelectionStyle) => {
+    setMenuSelectionState(next);
+    writeStorage(MENU_SELECTION_STORAGE_KEY, next);
+  }, []);
+  const setMenuExpand = useCallback((next: MenuExpandMode) => {
+    setMenuExpandState(next);
+    writeStorage(MENU_EXPAND_STORAGE_KEY, next);
+  }, []);
+
+  // 挂到 <html> 上，styles/theme-styles.css 里的风格质感规则
+  // (发光/毛玻璃/斑马纹/菜单选中态等) 以此为开关；data-mode 同时驱动
+  // styles/antd-theme-vars.css 的明暗变量切换，data-preset 驱动主色系列变量。
+  useEffect(() => {
+    const el = document.documentElement;
+    el.dataset.style = styleKey;
+    el.dataset.mode = mode;
+    el.dataset.preset = presetKey;
+    el.dataset.siderTheme = siderTheme;
+    el.dataset.menuLayout = menuLayout;
+    el.dataset.menuSelection = menuSelection;
+  }, [styleKey, mode, presetKey, siderTheme, menuLayout, menuSelection]);
+
+  const themeConfig = useMemo<ThemeConfig>(() => {
+    const colorPrimary =
+      THEME_PRESETS.find((p) => p.key === presetKey)?.colorPrimary ??
+      THEME_PRESETS[0].colorPrimary;
+    const pack =
+      THEME_STYLES.find((s) => s.key === styleKey) ?? THEME_STYLES[0];
+    const baseAlgorithm =
+      mode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm;
+    return {
+      ...baseThemeConfig,
+      // 不用 theme.cssVar：其按 provider 实例注入的 .css-var-* 规则在明暗来回
+      // 切换时存在清理竞态（表头/按钮残留暗色）。antd 组件按主题生成 hash 类
+      // 即可稳健切换；页面里的 var(--ant-*) 由 styles/antd-theme-vars.css 提供。
+      algorithm: baseAlgorithm,
+      token: {
+        ...baseThemeConfig.token,
+        ...pack.token,
+        ...(mode === 'dark' ? pack.darkToken : pack.lightToken),
+        // 主色始终来自色板预设，与风格包正交组合。
+        colorPrimary,
+        // 内容区背景: 亮色固定为项目约定的 #f0f2f5, 暗色交由 algorithm 派生,
+        // 页面通过 var(--ant-color-bg-layout) 引用以跟随明暗切换。
+        ...(mode === 'light' ? { colorBgLayout: '#f0f2f5' } : {}),
+      },
+      components: { ...baseThemeConfig.components, ...pack.components },
+    };
+  }, [presetKey, mode, styleKey]);
+
+  const ctx = useMemo(
+    () => ({
+      presetKey,
+      setPresetKey,
+      mode,
+      setMode,
+      styleKey,
+      setStyleKey,
+      siderTheme,
+      setSiderTheme,
+      menuLayout,
+      setMenuLayout,
+      menuSelection,
+      setMenuSelection,
+      menuExpand,
+      setMenuExpand,
+      presets: THEME_PRESETS,
+    }),
+    [
+      presetKey,
+      setPresetKey,
+      mode,
+      setMode,
+      styleKey,
+      setStyleKey,
+      siderTheme,
+      setSiderTheme,
+      menuLayout,
+      setMenuLayout,
+      menuSelection,
+      setMenuSelection,
+      menuExpand,
+      setMenuExpand,
+    ],
+  );
+
+  return (
+    <AppearanceContext.Provider value={ctx}>
+      <ConfigProvider theme={themeConfig}>{children}</ConfigProvider>
+    </AppearanceContext.Provider>
+  );
 };

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/contexts/color-mode/themeStyles.ts

@@ -0,0 +1,97 @@
+import type { ThemeConfig } from 'antd';
+
+export type ThemeStyleKey = 'standard' | 'minimal' | 'tech' | 'soft';
+
+/**
+ * 界面风格包：在"主色预设"之外的第二个外观维度。
+ * 主色仍由 THEME_PRESETS 控制，风格包负责圆角/密度/字体/阴影/组件质感。
+ *
+ * token 分层：
+ * - token: 与明暗无关的基调 (圆角/字号/控件高度)
+ * - lightToken/darkToken: 依赖明暗的值 (边框色等)，由 Provider 按 mode 挑选
+ * - components: 组件级覆写
+ * 更细腻的质感 (发光/毛玻璃等) 在 styles/theme-styles.css 里
+ * 用 html[data-style='xxx'] 实现，引用 --ant-* 变量以跟随明暗派生。
+ */
+export interface ThemeStylePack {
+  key: ThemeStyleKey;
+  zhLabel: string;
+  enLabel: string;
+  zhDesc: string;
+  enDesc: string;
+  /** 抽屉里展示用的调性色块，仅作示意，不影响实际主色。 */
+  swatch: string;
+  token?: ThemeConfig['token'];
+  lightToken?: ThemeConfig['token'];
+  darkToken?: ThemeConfig['token'];
+  components?: ThemeConfig['components'];
+}
+
+export const THEME_STYLES: ThemeStylePack[] = [
+  {
+    key: 'standard',
+    zhLabel: '标准',
+    enLabel: 'Standard',
+    zhDesc: '默认均衡风格',
+    enDesc: 'Default balanced look',
+    swatch: '#1677FF',
+  },
+  {
+    key: 'minimal',
+    zhLabel: '简约现代',
+    enLabel: 'Minimal',
+    zhDesc: '大圆角 · 淡边框 · 去阴影大留白',
+    enDesc: 'Large radius, hairline borders, flat & airy',
+    swatch: '#5E6AD2',
+    token: {
+      borderRadius: 10,
+      borderRadiusLG: 14,
+      borderRadiusSM: 6,
+      controlHeight: 36,
+      paddingLG: 24,
+    },
+    lightToken: {
+      colorBorder: '#ECEEF1',
+      colorSplit: '#F2F3F5',
+    },
+    darkToken: {
+      colorBorder: 'rgba(255, 255, 255, 0.08)',
+      colorSplit: 'rgba(255, 255, 255, 0.05)',
+    },
+    components: {
+      Card: { boxShadowTertiary: 'none' },
+    },
+  },
+  {
+    key: 'tech',
+    zhLabel: '高科技感',
+    enLabel: 'Tech',
+    zhDesc: '等宽数字 · 霓虹发光 · 毛玻璃顶栏',
+    enDesc: 'Tabular numerals, neon glow, glass header',
+    swatch: '#00D4B1',
+    token: {
+      borderRadius: 4,
+    },
+  },
+  {
+    key: 'soft',
+    zhLabel: '柔和友好',
+    enLabel: 'Soft',
+    zhDesc: '超大圆角 · 胶囊按钮 · 弥散阴影',
+    enDesc: 'Extra round, pill buttons, diffused shadows',
+    swatch: '#7C3AED',
+    token: {
+      borderRadius: 12,
+      borderRadiusLG: 16,
+      borderRadiusSM: 8,
+      controlHeight: 36,
+    },
+    components: {
+      Button: {
+        borderRadius: 999,
+        borderRadiusSM: 999,
+        borderRadiusLG: 999,
+      },
+    },
+  },
+];

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/layout/SettingDrawer.tsx

@@ -0,0 +1,251 @@
+import React from 'react';
+import { Drawer, Segmented, Space, Typography, theme } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useGetLocale } from '@refinedev/core';
+import {
+  useAppearance,
+  THEME_STYLES,
+  type MenuExpandMode,
+  type MenuLayoutMode,
+  type MenuSelectionStyle,
+  type SiderTheme,
+  type ThemeMode,
+} from 'components/contexts/color-mode';
+
+const { Text } = Typography;
+const { useToken } = theme;
+
+interface SettingDrawerProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+/** 一组设置项：标题 + 控件，纵向排布。 */
+const Section: React.FC<React.PropsWithChildren<{ title: string }>> = ({
+  title,
+  children,
+}) => (
+  <div style={{ marginBottom: 28 }}>
+    <Text type="secondary" style={{ fontSize: 12, letterSpacing: 0.4 }}>
+      {title}
+    </Text>
+    <div style={{ marginTop: 10 }}>{children}</div>
+  </div>
+);
+
+export const SettingDrawer: React.FC<SettingDrawerProps> = ({
+  open,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const { token } = useToken();
+  const locale = useGetLocale();
+  const isZh = locale() !== 'en';
+
+  const {
+    presetKey,
+    setPresetKey,
+    presets,
+    mode,
+    setMode,
+    styleKey,
+    setStyleKey,
+    siderTheme,
+    setSiderTheme,
+    menuLayout,
+    setMenuLayout,
+    menuSelection,
+    setMenuSelection,
+    menuExpand,
+    setMenuExpand,
+  } = useAppearance();
+
+  return (
+    <Drawer
+      title={t('header.settings', 'Appearance')}
+      placement="right"
+      width={300}
+      open={open}
+      onClose={onClose}
+    >
+      {/* 主题色：一排圆形色块点选 */}
+      <Section title={t('header.themeColor', 'Theme color')}>
+        <Space size={12}>
+          {presets.map((preset) => {
+            const active = preset.key === presetKey;
+            const label = isZh ? preset.zhLabel : preset.enLabel;
+            return (
+              <button
+                key={preset.key}
+                type="button"
+                role="radio"
+                aria-checked={active}
+                aria-label={label}
+                title={label}
+                onClick={() => setPresetKey(preset.key)}
+                style={{
+                  width: 24,
+                  height: 24,
+                  padding: 0,
+                  borderRadius: '50%',
+                  border: 'none',
+                  background: preset.colorPrimary,
+                  cursor: 'pointer',
+                  // 选中态: 底色间隙 + 同色描边环, 任意主题下都清晰。
+                  boxShadow: active
+                    ? `0 0 0 2px ${token.colorBgContainer}, 0 0 0 4px ${preset.colorPrimary}`
+                    : 'none',
+                  transform: active ? 'scale(1.05)' : 'none',
+                  transition: 'transform 0.15s ease, box-shadow 0.15s ease',
+                }}
+              />
+            );
+          })}
+        </Space>
+      </Section>
+
+      {/* 界面风格：整体质感 (圆角/密度/阴影)，与主题色正交 */}
+      <Section title={t('header.themeStyle', 'UI style')}>
+        <Space direction="vertical" size={8} style={{ width: '100%' }}>
+          {THEME_STYLES.map((style) => {
+            const active = style.key === styleKey;
+            return (
+              <button
+                key={style.key}
+                type="button"
+                role="radio"
+                aria-checked={active}
+                onClick={() => setStyleKey(style.key)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 10,
+                  width: '100%',
+                  padding: '8px 10px',
+                  borderRadius: 8,
+                  border: `1px solid ${
+                    active ? token.colorPrimary : token.colorBorderSecondary
+                  }`,
+                  background: active
+                    ? token.colorPrimaryBg
+                    : token.colorBgContainer,
+                  cursor: 'pointer',
+                  textAlign: 'left',
+                  transition: 'border-color 0.15s ease, background 0.15s ease',
+                }}
+              >
+                <span
+                  style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: '50%',
+                    flexShrink: 0,
+                    background: style.swatch,
+                  }}
+                />
+                <span style={{ flex: 1, minWidth: 0 }}>
+                  <span
+                    style={{
+                      display: 'block',
+                      fontSize: 13,
+                      color: token.colorText,
+                    }}
+                  >
+                    {isZh ? style.zhLabel : style.enLabel}
+                  </span>
+                  <span
+                    style={{
+                      display: 'block',
+                      fontSize: 12,
+                      color: token.colorTextTertiary,
+                    }}
+                  >
+                    {isZh ? style.zhDesc : style.enDesc}
+                  </span>
+                </span>
+              </button>
+            );
+          })}
+        </Space>
+      </Section>
+
+      {/* 外观模式：浅色 / 深色 */}
+      <Section title={t('header.themeMode', 'Appearance mode')}>
+        <Segmented<ThemeMode>
+          block
+          value={mode}
+          onChange={setMode}
+          options={[
+            { label: t('header.modeLight', 'Light'), value: 'light' },
+            { label: t('header.modeDark', 'Dark'), value: 'dark' },
+          ]}
+        />
+      </Section>
+
+      {/* 侧边栏配色：跟随主题 / 深色 / 浅色 */}
+      <Section title={t('header.siderTheme', 'Sidebar color')}>
+        <Segmented<SiderTheme>
+          block
+          value={siderTheme}
+          onChange={setSiderTheme}
+          options={[
+            { label: t('header.siderAuto', 'Follow theme'), value: 'auto' },
+            { label: t('header.siderDark', 'Dark'), value: 'dark' },
+            { label: t('header.siderLight', 'Light'), value: 'light' },
+          ]}
+        />
+      </Section>
+
+      {/* 菜单组织：树形折叠 / 分组平铺 */}
+      <Section title={t('header.menuOrg', 'Menu organization')}>
+        <Segmented<MenuLayoutMode>
+          block
+          value={menuLayout}
+          onChange={setMenuLayout}
+          options={[
+            { label: t('header.menuTree', 'Collapsible tree'), value: 'tree' },
+            { label: t('header.menuGrouped', 'Flat groups'), value: 'grouped' },
+          ]}
+        />
+      </Section>
+
+      {/* 选中样式：填充 / 药丸 / 指示条 */}
+      <Section title={t('header.menuSelect', 'Selection style')}>
+        <Segmented<MenuSelectionStyle>
+          block
+          value={menuSelection}
+          onChange={setMenuSelection}
+          options={[
+            { label: t('header.selectFill', 'Fill'), value: 'fill' },
+            { label: t('header.selectPill', 'Pill'), value: 'pill' },
+            {
+              label: t('header.selectIndicator', 'Indicator'),
+              value: 'indicator',
+            },
+          ]}
+        />
+      </Section>
+
+      {/* 展开行为：仅树形折叠下有意义 (分组平铺永远全展开) */}
+      {menuLayout === 'tree' && (
+        <Section title={t('header.menuExpand', 'Expansion')}>
+          <Segmented<MenuExpandMode>
+            block
+            value={menuExpand}
+            onChange={setMenuExpand}
+            options={[
+              {
+                label: t('header.expandAccordion', 'Accordion'),
+                value: 'accordion',
+              },
+              {
+                label: t('header.expandMultiple', 'Multiple open'),
+                value: 'multiple',
+              },
+            ]}
+          />
+        </Section>
+      )}
+    </Drawer>
+  );
+};