@gadmin2n/schematics 0.0.138 → 0.0.140

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useGetLocale, useSetLocale, useGetIdentity } from '@refinedev/core';
 import {
   Layout,
@@ -9,11 +9,12 @@ import {
   Typography,
   theme,
 } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
+import { DownOutlined, SettingOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import type { MenuProps } from 'antd';
 import { agentAttrs } from 'components/agentPanel/agentAttributes';
 import { HEADER_HEIGHT, Z_INDEX } from 'constants/layout';
+import { SettingDrawer } from './SettingDrawer';
 import { SUPPORTED_LANGUAGES } from '../../i18n';
 
 type IUser = {
@@ -25,12 +26,16 @@ type IUser = {
 const { Text } = Typography;
 const { useToken } = theme;
 
-export const Header: React.FC = () => {
-  const { i18n, t } = useTranslation();
+/**
+ * Header 右侧操作簇：语言切换 + 外观设置入口 + 用户信息。
+ */
+export const HeaderActions: React.FC = () => {
+  const { t } = useTranslation();
   const locale = useGetLocale();
   const changeLanguage = useSetLocale();
   const { token } = useToken();
   const { data: user } = useGetIdentity<IUser>();
+  const [settingsOpen, setSettingsOpen] = useState(false);
 
   const currentLocale = locale();
 
@@ -54,22 +59,15 @@ export const Header: React.FC = () => {
 
   const currentLanguageLabel = currentLocale === 'en' ? 'English' : '中文';
 
-  const headerStyles: React.CSSProperties = {
-    backgroundColor: token.colorBgElevated,
-    display: 'flex',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    padding: '0 24px',
-    height: HEADER_HEIGHT,
-    position: 'sticky',
-    top: 0,
-    zIndex: Z_INDEX.STICKY,
-    // 与下方内容区切分。1px 软分隔线胜过纯白对纯白边界。
-    borderBottom: `1px solid ${token.colorBorderSecondary}`,
-  };
-
   return (
-    <Layout.Header style={headerStyles} {...agentAttrs({ type: 'app-header' })}>
+    <>
+      <Button
+        type="text"
+        icon={<SettingOutlined />}
+        aria-label={t('header.settings', 'Appearance')}
+        onClick={() => setSettingsOpen(true)}
+      />
+
       <Dropdown
         menu={langMenu}
         placement="bottomRight"
@@ -101,6 +99,36 @@ export const Header: React.FC = () => {
           )}
         </Space>
       )}
+
+      <SettingDrawer
+        open={settingsOpen}
+        onClose={() => setSettingsOpen(false)}
+      />
+    </>
+  );
+};
+
+/** 侧边布局的顶栏：Logo 在 Sider 里，这里只放右侧操作簇。 */
+export const Header: React.FC = () => {
+  const { token } = useToken();
+
+  const headerStyles: React.CSSProperties = {
+    backgroundColor: token.colorBgElevated,
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    padding: '0 24px',
+    height: HEADER_HEIGHT,
+    position: 'sticky',
+    top: 0,
+    zIndex: Z_INDEX.STICKY,
+    // 与下方内容区切分。1px 软分隔线胜过纯白对纯白边界。
+    borderBottom: `1px solid ${token.colorBorderSecondary}`,
+  };
+
+  return (
+    <Layout.Header style={headerStyles} {...agentAttrs({ type: 'app-header' })}>
+      <HeaderActions />
     </Layout.Header>
   );
 };

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

@@ -6,6 +6,22 @@ import { Sider } from './sider';
 import { OffLayoutArea } from 'components/offLayoutArea';
 import { HEADER_HEIGHT } from 'constants/layout';
 
+/** 内容区滚动容器。 */
+const Content: React.FC<React.PropsWithChildren<{ isAtLeastSm: boolean }>> = ({
+  children,
+  isAtLeastSm,
+}) => (
+  <AntdLayout.Content
+    style={{
+      padding: isAtLeastSm ? 32 : 16,
+      height: `calc(100vh - ${HEADER_HEIGHT}px)`,
+      overflowY: 'auto',
+    }}
+  >
+    {children}
+  </AntdLayout.Content>
+);
+
 export const Layout: React.FC<React.PropsWithChildren> = ({ children }) => {
   const breakpoint = Grid.useBreakpoint();
   // 在 Ant Design 的命名里, breakpoint.sm = true 表示 viewport >= 576px
@@ -13,21 +29,14 @@ export const Layout: React.FC<React.PropsWithChildren> = ({ children }) => {
   // useBreakpoint 首次渲染可能返回空对象, 默认按桌面处理避免抖动.
   const isAtLeastSm = breakpoint.sm ?? true;
 
+  // 固定侧边布局；窄屏由 Sider 内置的汉堡抽屉接管。
   return (
     <ThemedLayoutContextProvider>
       <AntdLayout hasSider style={{ minHeight: '100vh' }}>
         <Sider />
         <AntdLayout>
           <Header />
-          <AntdLayout.Content
-            style={{
-              padding: isAtLeastSm ? 32 : 16,
-              height: `calc(100vh - ${HEADER_HEIGHT}px)`,
-              overflowY: 'auto',
-            }}
-          >
-            {children}
-          </AntdLayout.Content>
+          <Content isAtLeastSm={isAtLeastSm}>{children}</Content>
         </AntdLayout>
       </AntdLayout>
       <OffLayoutArea />

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

@@ -0,0 +1,155 @@
+import React from 'react';
+import {
+  type TreeMenuItem as ITreeMenu,
+  useLink,
+  useMenu,
+} from '@refinedev/core';
+import { UnorderedListOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+
+/**
+ * 菜单渲染逻辑的单一来源。
+ *
+ * 与"纵向 Sider"强耦合的部分 (inline collapse、选中箭头、容器高度)
+ * 留在 Sider 组件，通过 options 参数注入。
+ */
+
+/** 递归查找 targetKey 的所有父级 key，用于计算默认展开层级。 */
+export const getParentKeysFromMenuTree = (
+  items: ITreeMenu[],
+  targetKey: string,
+  parentKeys: string[] = [],
+): string[] | null => {
+  for (const item of items) {
+    const currentKey = item.key || '';
+
+    if (currentKey === targetKey) {
+      return parentKeys;
+    }
+
+    if (item.children && item.children.length > 0) {
+      const found = getParentKeysFromMenuTree(item.children, targetKey, [
+        ...parentKeys,
+        currentKey,
+      ]);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+/** 按当前语言取菜单标签：zhLabel/enLabel → label → name。 */
+export const getMenuLabel = (
+  name: string,
+  meta: Record<string, any>,
+  locale: string,
+): string => {
+  const isZh = locale === 'zh_CN' || locale === 'zh';
+  if (isZh && meta?.zhLabel) return meta.zhLabel;
+  if (!isZh && meta?.enLabel) return meta.enLabel;
+  return meta?.label || name;
+};
+
+export interface RenderMenuTreeOptions {
+  selectedKey?: string;
+  locale: string;
+  /** useLink() 返回的 Link 组件 */
+  Link: ReturnType<typeof useLink>;
+  /**
+   * 是否在选中的叶子项后渲染 `.ant-menu-tree-arrow` 装饰。
+   * 纵向 Sider 展开态为 true；折叠态 / 横向菜单为 false。
+   */
+  showTreeArrow: boolean;
+  /**
+   * 分组平铺：顶层带子项的节点降级为不可点的分组标题 (type: 'group')，
+   * 二级项全部平铺可见；更深的层级仍渲染为可折叠 SubMenu。
+   */
+  flatGroups?: boolean;
+}
+
+/** 把 useMenu() 的树渲染成 antd Menu items。布局无关。 */
+export const renderMenuTree = (
+  tree: ITreeMenu[],
+  options: RenderMenuTreeOptions,
+  depth = 0,
+): MenuProps['items'] => {
+  const { selectedKey, locale, Link, showTreeArrow, flatGroups } = options;
+
+  return tree
+    .map((item: ITreeMenu, index: number) => {
+      const { key, name, children, meta = {}, list, route: itemRoute } = item;
+      const { icon, parent: parentName } = meta;
+
+      // v5 的 useMenu 已为可路由项准备好 route；退化为资源定义的 list 路径。
+      const route = itemRoute ?? (typeof list === 'string' ? list : undefined);
+
+      // 优先用 item.key, 退而求其次用 name (永远存在), 最后才用稳定的 path-index.
+      // 不要用 Math.random() 作 fallback —— 每次渲染换 key 会让整棵子树
+      // unmount/mount, 破坏滚动位置和动画状态.
+      const stableKey = key || name || `fallback-${index}`;
+
+      if (children.length > 0) {
+        // 分组平铺：顶层分组变成不可点标题，子项永远可见，无需展开操作。
+        if (flatGroups && depth === 0) {
+          return {
+            type: 'group' as const,
+            key: stableKey,
+            label: getMenuLabel(name, meta, locale),
+            children: renderMenuTree(children, options, depth + 1),
+          };
+        }
+        return {
+          key: stableKey,
+          label: (
+            <span style={{ fontWeight: 600 }}>
+              {getMenuLabel(name, meta, locale)}
+            </span>
+          ),
+          icon: icon ?? <UnorderedListOutlined />,
+          children: renderMenuTree(children, options, depth + 1),
+        };
+      }
+
+      const isSelected = stableKey === selectedKey;
+      const isRoute = !(parentName !== undefined && children.length === 0);
+
+      return {
+        key: stableKey,
+        label: (
+          <>
+            <Link to={route ?? ''}>{getMenuLabel(name, meta, locale)}</Link>
+            {showTreeArrow && isSelected && (
+              <div className="ant-menu-tree-arrow" />
+            )}
+          </>
+        ),
+        icon: icon ?? (isRoute && <UnorderedListOutlined />),
+      };
+    })
+    .filter(Boolean);
+};
+
+/** 便捷封装：直接拿到当前 useMenu 状态 + 已渲染 items。 */
+export const useRenderedMenu = (
+  locale: string,
+  showTreeArrow: boolean,
+): {
+  menuItems: ITreeMenu[];
+  selectedKey: string;
+  defaultOpenKeys: string[];
+  items: MenuProps['items'];
+} => {
+  const { menuItems, selectedKey, defaultOpenKeys } = useMenu();
+  const Link = useLink();
+
+  const items = renderMenuTree(menuItems, {
+    selectedKey,
+    locale,
+    Link,
+    showTreeArrow,
+  });
+
+  return { menuItems, selectedKey, defaultOpenKeys, items };
+};