@gadmin2n/cli 0.0.81 → 0.0.83

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

@@ -0,0 +1,58 @@
+import { RefineThemes } from "@refinedev/antd";
+import { ConfigProvider } from "antd";
+import type { ThemeConfig } from "antd";
+import { PropsWithChildren } from "react";
+
+const themeConfig: ThemeConfig = {
+  ...RefineThemes.Blue,
+  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,
+    },
+  },
+};
+
+export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  return (
+    <ConfigProvider theme={themeConfig}>
+      {children}
+    </ConfigProvider>
+  );
+};

package/.yalc/@gadmin2n/schematics/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/custom-avatar.tsx

@@ -0,0 +1,38 @@
+import React, { memo } from "react";
+
+import type { AvatarProps } from "antd";
+import { Avatar as AntdAvatar } from "antd";
+
+import { getNameInitials, getRandomColorFromString } from "utilities";
+
+type Props = AvatarProps & {
+  name?: string;
+};
+
+const CustomAvatarComponent: React.FC<Props> = ({ name = "", style, ...rest }) => {
+  return (
+    <AntdAvatar
+      alt={name}
+      size="small"
+      style={{
+        backgroundColor: rest?.src
+          ? "transparent"
+          : getRandomColorFromString(name),
+        display: "flex",
+        alignItems: "center",
+        border: "none",
+        ...style,
+      }}
+      {...rest}
+    >
+      {getNameInitials(name)}
+    </AntdAvatar>
+  );
+};
+
+export const CustomAvatar = memo(
+  CustomAvatarComponent,
+  (prevProps, nextProps) => {
+    return prevProps.name === nextProps.name && prevProps.src === nextProps.src;
+  },
+);

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

@@ -0,0 +1,121 @@
+import { useGetLocale, useSetLocale, useGetIdentity } from "@refinedev/core";
+import {
+  Layout,
+  Space,
+  Button,
+  Dropdown,
+  Avatar,
+  Typography,
+  theme,
+  Select,
+  Tooltip,
+} from "antd";
+import { DownOutlined, RobotOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { useContext } from "react";
+import { BusinessContext } from "components/contexts/business";
+import { useAgent } from "components/agentPanel";
+import type { MenuProps } from "antd";
+
+type IUser = {
+  id: number;
+  name: string;
+  avatar: string;
+};
+
+const { Text } = Typography;
+const { useToken } = theme;
+
+const isDev = import.meta.env.DEV;
+
+export const Header: React.FC = () => {
+  const { i18n } = useTranslation();
+  const locale = useGetLocale();
+  const changeLanguage = useSetLocale();
+  const { token } = useToken();
+  const { data: user } = useGetIdentity<IUser>();
+  const { business, setBusiness, businessList } = useContext(BusinessContext);
+  const agent = useAgent();
+  const openAgentPanel = agent?.open;
+
+  const currentLocale = locale();
+
+  const langMenu: MenuProps = {
+    selectedKeys: currentLocale ? [currentLocale] : [],
+    items: [...(i18n.languages || [])].sort().map((lang: string) => ({
+      key: lang,
+      icon: (
+        <span style={{ marginRight: 8 }}>
+          <Avatar size={16} src={`/images/flags/${lang}.svg`} />
+        </span>
+      ),
+      label: lang === "en" ? "English" : "中文",
+    })),
+    onClick: ({ key: lang }) => changeLanguage(lang),
+  };
+
+  const headerStyles: React.CSSProperties = {
+    backgroundColor: token.colorBgElevated,
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    padding: "0px 24px",
+    height: "64px",
+    position: "sticky",
+    top: 0,
+    zIndex: 999,
+  };
+
+  return (
+    <Layout.Header style={headerStyles}>
+      {isDev && (
+        <Tooltip title="AI Agent (Dev Only)">
+          <Button
+            type="text"
+            icon={<RobotOutlined style={{ fontSize: 18 }} />}
+            onClick={openAgentPanel}
+            style={{ marginRight: 8 }}
+          />
+        </Tooltip>
+      )}
+      <Select
+        showSearch
+        defaultValue={business.gameId}
+        style={{ width: 160 }}
+        variant="borderless"
+        options={[
+          ...businessList.map((item) => ({
+            label: item.gameName,
+            value: item.gameId,
+          })),
+          {
+            label: "管理员专用",
+            options: [{ value: "-1", label: "All games" }],
+          },
+        ]}
+        optionFilterProp="label"
+        onChange={(gameId) => {
+          const gameInfo =
+            gameId === "-1"
+              ? { gameId: "-1", gameName: "All games" }
+              : businessList.find((item) => item.gameId === gameId)!;
+          setBusiness(gameInfo);
+          window.location.reload();
+        }}
+      />
+      <Dropdown menu={langMenu}>
+        <Button type="link">
+          <Space>
+            <Avatar size={16} src={`/images/flags/${currentLocale}.svg`} />
+            {currentLocale === "en" ? "English" : "中文"}
+            <DownOutlined />
+          </Space>
+        </Button>
+      </Dropdown>
+      <Space style={{ marginLeft: "8px" }} size="middle">
+        {user?.name && <Text strong>{user.name}</Text>}
+        {user?.avatar && <Avatar src={user?.avatar} alt={user?.name} />}
+      </Space>
+    </Layout.Header>
+  );
+};

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { ThemedLayoutContextProvider } from "@refinedev/antd";
+import { Grid, Layout as AntdLayout } from "antd";
+import { Header } from "./header";
+import { Sider } from "./sider";
+import { OffLayoutArea } from "components/offLayoutArea";
+
+export const Layout: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const breakpoint = Grid.useBreakpoint();
+  const isSmall = typeof breakpoint.sm === "undefined" ? true : breakpoint.sm;
+
+  return (
+    <ThemedLayoutContextProvider>
+      <AntdLayout hasSider style={{ minHeight: "100vh" }}>
+        <Sider />
+        <AntdLayout>
+          <Header />
+          <AntdLayout.Content
+            style={{
+              padding: isSmall ? 32 : 16,
+              height: "calc(100vh - 64px)",
+              overflowY: "auto",
+            }}
+          >
+            {children}
+          </AntdLayout.Content>
+        </AntdLayout>
+      </AntdLayout>
+      <OffLayoutArea />
+    </ThemedLayoutContextProvider>
+  );
+};

package/.yalc/@gadmin2n/schematics/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/layout/logo.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export const Logo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#1677FF"
+      fillRule="evenodd"
+      d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm3.744-18.41c.182-.647-.446-1.03-1.02-.621l-8.008 5.705c-.622.443-.524 1.326.147 1.326h2.109v-.016h4.11l-3.35 1.181-1.476 5.245c-.182.647.446 1.03 1.02.621l8.008-5.705c.622-.443.524-1.326-.147-1.326H13.94l1.805-6.41Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/.yalc/@gadmin2n/schematics/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/layout/sider.tsx

@@ -0,0 +1,383 @@
+import React, { useMemo, useEffect, useRef, useCallback, type CSSProperties } from "react";
+
+import { useThemedLayoutContext } from "@refinedev/antd";
+import {
+  type ITreeMenu,
+  pickNotDeprecated,
+  useLink,
+  useMenu,
+  useNavigation,
+  useGo,
+} from "@refinedev/core";
+import { useTranslation } from "react-i18next";
+
+import {
+  BarsOutlined,
+  LeftOutlined,
+  RightOutlined,
+  UnorderedListOutlined,
+} from "@ant-design/icons";
+import { Button, Drawer, Grid, Layout, Menu, theme, type MenuProps } from "antd";
+import { Title } from "./title";
+
+const drawerButtonStyles: CSSProperties = {
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+  position: "fixed",
+  top: 64,
+  zIndex: 1001,
+};
+
+let reRouteNum = 0;
+
+const { SubMenu } = Menu;
+const { useToken } = theme;
+
+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;
+};
+
+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 const Sider: React.FC = () => {
+  const { token } = useToken();
+  const { menuItems, selectedKey, defaultOpenKeys } = useMenu();
+  const { t, i18n } = useTranslation();
+  const currentLocale = i18n.language;
+
+  const [openKeys, setOpenKeys] = React.useState<string[]>(defaultOpenKeys);
+
+  const lastSelectedKeyRef = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (selectedKey && selectedKey !== lastSelectedKeyRef.current && menuItems.length > 0) {
+      lastSelectedKeyRef.current = selectedKey;
+
+      const parentKeys = getParentKeysFromMenuTree(menuItems, selectedKey);
+
+      if (parentKeys !== null) {
+        setOpenKeys(parentKeys);
+      }
+    }
+  }, [selectedKey, menuItems]);
+
+  const { siderCollapsed, setSiderCollapsed, mobileSiderOpen, setMobileSiderOpen } =
+    useThemedLayoutContext();
+
+  const Link = useLink();
+  const go = useGo();
+
+  const breakpoint = Grid.useBreakpoint();
+  const { listUrl } = useNavigation();
+
+  const isMobile = typeof breakpoint.lg === "undefined" ? false : !breakpoint.lg;
+
+  const renderTreeView = useCallback(
+    (tree: ITreeMenu[], currentSelectedKey?: string): MenuProps["items"] => {
+      return tree
+        .map((item: ITreeMenu) => {
+          const { key, name, children, meta = {}, list } = item;
+          const { icon, parent: parentName } = meta;
+
+          const route = typeof list === "string" ? list : listUrl(name);
+
+          if (children.length > 0) {
+            return {
+              key: item.key || Math.random().toString(),
+              label: getMenuLabel(name, meta, currentLocale),
+              icon: icon ?? <UnorderedListOutlined />,
+              children: renderTreeView(children, currentSelectedKey),
+            };
+          }
+
+          const menuItemKey = item.key || Math.random().toString();
+          const isSelected = menuItemKey === currentSelectedKey;
+          const isRoute = !(
+            pickNotDeprecated(meta?.parent, meta?.parent, parentName) !== undefined &&
+            children.length === 0
+          );
+
+          return {
+            key: menuItemKey,
+            label: (
+              <>
+                <Link to={route ?? ""}>{getMenuLabel(name, meta, currentLocale)}</Link>
+                {!siderCollapsed && isSelected && <div className="ant-menu-tree-arrow" />}
+              </>
+            ),
+            icon: icon ?? (isRoute && <UnorderedListOutlined />),
+          };
+        })
+        .filter(Boolean);
+    },
+    [listUrl, Link, siderCollapsed, currentLocale],
+  );
+
+  const items = useMemo(() => {
+    return renderTreeView(menuItems, selectedKey)?.filter(Boolean);
+  }, [menuItems, selectedKey, renderTreeView]);
+
+  // Auto-redirect to first available menu item if current selectedKey is not in the menu
+  useEffect(() => {
+    if (reRouteNum > 5) return;
+
+    const isKeyInMenuItems = (menuItems: MenuProps["items"], key: string): boolean => {
+      if (!menuItems) return false;
+      for (const item of menuItems) {
+        if (!item) continue;
+        if (item.key === key) return true;
+        if ("children" in item && item.children) {
+          if (isKeyInMenuItems(item.children as MenuProps["items"], key)) return true;
+        }
+      }
+      return false;
+    };
+
+    // If selectedKey is in the menu, no need to redirect
+    if (selectedKey && isKeyInMenuItems(items, selectedKey)) {
+      return;
+    }
+
+    // Skip auto-redirect for CRUD detail pages (edit/show/create)
+    // These pages are not in the menu but are valid navigation targets
+    if (selectedKey && (
+      selectedKey.includes('/edit/') ||
+      selectedKey.includes('/show/') ||
+      selectedKey.endsWith('/create')
+    )) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      reRouteNum++;
+
+      const firstKey = items?.[0]?.key;
+      if (firstKey && firstKey !== "/dashboard") {
+        setOpenKeys([String(firstKey)]);
+        const firstItem = items?.find(item => item?.key === firstKey) as any;
+        if (firstItem?.children?.length > 0) {
+          let childItem = firstItem?.children?.find(
+            (item: any) => selectedKey.indexOf(item?.key) !== -1,
+          );
+          if (!childItem) {
+            childItem = firstItem?.children?.[0];
+          }
+          const childKey = childItem?.key;
+          if (childItem?.children?.length > 0) {
+            setOpenKeys([String(firstKey), String(childKey)]);
+            const grandsonItem = childItem?.children?.find(
+              (item: any) => selectedKey.indexOf(item?.key) !== -1,
+            );
+            const grandsonKey = grandsonItem?.key || firstItem?.children?.[0]?.children?.[0]?.key;
+            go({ to: grandsonKey, type: "replace" });
+          } else {
+            go({ to: childKey, type: "replace" });
+          }
+        } else {
+          go({ to: String(firstKey), type: "replace" });
+        }
+      }
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [items, selectedKey, go]);
+
+  const handleOpenChange = useCallback(
+    (keys: string[]) => {
+      const latestOpenKey = keys.find(key => !openKeys.includes(key));
+
+      if (latestOpenKey) {
+        const parentKeys = getParentKeysFromMenuTree(menuItems, latestOpenKey) || [];
+        setOpenKeys([...parentKeys, latestOpenKey]);
+      } else {
+        setOpenKeys(keys);
+      }
+    },
+    [openKeys, menuItems],
+  );
+
+  const handleMenuClick = useCallback(
+    ({ key }: { key: string }) => {
+      const clickedItem = menuItems.find(item => item.key === key);
+      if (clickedItem && clickedItem.children.length === 0) {
+        setOpenKeys([]);
+      }
+      setMobileSiderOpen(false);
+    },
+    [menuItems, setMobileSiderOpen],
+  );
+
+  const renderMenu = useCallback(() => {
+    return (
+      <Menu
+        selectedKeys={selectedKey ? [selectedKey] : []}
+        defaultOpenKeys={defaultOpenKeys}
+        openKeys={openKeys}
+        onOpenChange={handleOpenChange}
+        mode="inline"
+        items={items}
+        style={{
+          paddingTop: "8px",
+          border: "none",
+          overflow: "auto",
+          height: "calc(100% - 72px)",
+          background: "transparent",
+        }}
+        onClick={handleMenuClick}
+      ></Menu>
+    );
+  }, [selectedKey, defaultOpenKeys, openKeys, handleOpenChange, items, handleMenuClick]);
+
+  const renderDrawerSider = () => {
+    return (
+      <>
+        <Drawer
+          open={mobileSiderOpen}
+          onClose={() => setMobileSiderOpen(false)}
+          placement="left"
+          closable={false}
+          width={256}
+          styles={{
+            body: {
+              padding: 0,
+            },
+          }}
+          maskClosable={true}
+        >
+          <Layout>
+            <Layout.Sider
+              width={500}
+              style={{
+                height: "100vh",
+                backgroundColor: token.colorBgContainer,
+                borderRight: `1px solid ${token.colorBorderBg}`,
+              }}
+            >
+              <div
+                style={{
+                  width: "256px",
+                  padding: "0 16px",
+                  display: "flex",
+                  justifyContent: "flex-start",
+                  alignItems: "center",
+                  height: "64px",
+                  backgroundColor: token.colorBgElevated,
+                  borderBottom: "none",
+                }}
+              >
+                <Title collapsed={false} />
+              </div>
+              {renderMenu()}
+            </Layout.Sider>
+          </Layout>
+        </Drawer>
+        <Button
+          style={drawerButtonStyles}
+          size="large"
+          onClick={() => setMobileSiderOpen(true)}
+          icon={<BarsOutlined />}
+        />
+      </>
+    );
+  };
+
+  if (isMobile) {
+    return renderDrawerSider();
+  }
+
+  const siderStyles: React.CSSProperties = {
+    backgroundColor: token.colorBgContainer,
+    borderRight: `1px solid ${token.colorBorderBg}`,
+    position: "sticky",
+    top: 0,
+    left: 0,
+    height: "100vh",
+    zIndex: 999,
+  };
+
+  return (
+    <>
+      <Layout.Sider
+        style={siderStyles}
+        width={256}
+        collapsible
+        collapsed={siderCollapsed}
+        onCollapse={(collapsed, type) => {
+          if (type === "clickTrigger") {
+            setSiderCollapsed(collapsed);
+          }
+        }}
+        collapsedWidth={80}
+        breakpoint="lg"
+        trigger={
+          <Button
+            type="text"
+            style={{
+              borderRadius: 0,
+              height: "100%",
+              width: "100%",
+              backgroundColor: token.colorBgElevated,
+              borderRight: `1px solid ${token.colorBorderBg}`,
+            }}
+          >
+            {siderCollapsed ? (
+              <RightOutlined
+                style={{
+                  color: token.colorPrimary,
+                }}
+              />
+            ) : (
+              <LeftOutlined
+                style={{
+                  color: token.colorPrimary,
+                }}
+              />
+            )}
+          </Button>
+        }
+      >
+        <div
+          style={{
+            width: siderCollapsed ? "80px" : "256px",
+            padding: siderCollapsed ? "0" : "0 16px",
+            display: "flex",
+            justifyContent: siderCollapsed ? "center" : "flex-start",
+            alignItems: "center",
+            height: "64px",
+            backgroundColor: token.colorBgElevated,
+            fontSize: "14px",
+          }}
+        >
+          <Title collapsed={siderCollapsed} />
+        </div>
+        {renderMenu()}
+      </Layout.Sider>
+    </>
+  );
+};