@gadmin2n/schematics 0.0.70 → 0.0.71

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

@@ -0,0 +1,431 @@
+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';
+import { agentAttrs } from 'components/agentPanel/agentAttributes';
+
+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
+                {...agentAttrs({ type: 'app-title' })}
+                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
+          {...agentAttrs({ type: 'app-title' })}
+          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>
+    </>
+  );
+};

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

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import type { RefineLayoutThemedTitleProps } from '@refinedev/antd';
+import { useLink } from '@refinedev/core';
+
+import { Space, theme, Typography } from 'antd';
+
+import { Logo } from './logo';
+
+const { useToken } = theme;
+
+const name = 'Opinions admin';
+
+export const Title: React.FC<RefineLayoutThemedTitleProps> = ({
+  collapsed,
+  wrapperStyles,
+}) => {
+  const { token } = useToken();
+  const Link = useLink();
+
+  return (
+    <Link
+      to="/"
+      style={{
+        display: 'inline-block',
+        textDecoration: 'none',
+      }}
+    >
+      <Space
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          fontSize: 'inherit',
+          ...wrapperStyles,
+        }}
+      >
+        <div
+          style={{
+            height: '24px',
+            width: '24px',
+            color: token.colorPrimary,
+          }}
+        >
+          <Logo />
+        </div>
+
+        {!collapsed && (
+          <Typography.Title
+            style={{
+              fontSize: 'inherit',
+              marginBottom: 0,
+              fontWeight: 700,
+            }}
+          >
+            {name}
+          </Typography.Title>
+        )}
+      </Space>
+    </Link>
+  );
+};

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/offLayoutArea/index.tsx

@@ -0,0 +1,5 @@
+import { RefineKbar } from '@refinedev/kbar';
+
+export const OffLayoutArea: React.FC = () => {
+  return <RefineKbar />;
+};

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/pagination-total.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+type PaginationTotalProps = {
+  total: number;
+  entityName: string;
+};
+
+export const PaginationTotal: React.FC<PaginationTotalProps> = ({
+  total,
+  entityName,
+}) => {
+  return (
+    <span
+      style={{
+        marginLeft: '16px',
+      }}
+    >
+      <span className="ant-text secondary">{total}</span> {entityName} in total
+    </span>
+  );
+};

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/tags/index.ts

@@ -0,0 +1 @@
+export * from './role-tag';

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/tags/role-tag.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Tag } from 'antd';
+
+// Color mapping for different roles
+const roleColorMap: Record<string, string> = {
+  OFFICE: 'green',
+  CES: 'blue',
+  INFRA: 'purple',
+  FIT: 'green',
+  SECURITY: 'green',
+  COST: 'gold',
+  HR: 'orange',
+  HR_AMER: 'coral',
+  HR_APAC: 'khaki',
+  HR_EMEA: 'amber',
+  HR_MALAYSIA: 'pink',
+  HR_SINGAPORE: 'lightblue',
+  OMC: 'magenta',
+  PRODUCT: 'cyan',
+  SYSTEM_ADMIN: 'red',
+  FEATURE_IOA_DEVICE_IP: 'green',
+  BUSINESS_TRIP: 'teal',
+};
+
+type Props = {
+  role: string;
+};
+
+export const RoleStatusTag: React.FC<Props> = ({ role }) => {
+  const color = roleColorMap[role] || 'blue';
+
+  return (
+    <Tag
+      style={{
+        textTransform: 'capitalize',
+      }}
+      color={color}
+      title={role}
+    >
+      {role.toLowerCase()}
+    </Tag>
+  );
+};

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

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { ConfigProvider, Typography } from 'antd';
+
+export type TextProps = {
+  size?:
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | 'xxl'
+    | 'xxxl'
+    | 'huge'
+    | 'xhuge'
+    | 'xxhuge';
+} & React.ComponentProps<typeof Typography.Text>;
+
+const sizes = {
+  xs: {
+    fontSize: 12,
+    lineHeight: 20 / 12,
+  },
+  sm: {
+    fontSize: 14,
+    lineHeight: 22 / 14,
+  },
+  md: {
+    fontSize: 16,
+    lineHeight: 24 / 16,
+  },
+  lg: {
+    fontSize: 20,
+    lineHeight: 28 / 20,
+  },
+  xl: {
+    fontSize: 24,
+    lineHeight: 32 / 24,
+  },
+  xxl: {
+    fontSize: 30,
+    lineHeight: 38 / 30,
+  },
+  xxxl: {
+    fontSize: 38,
+    lineHeight: 46 / 38,
+  },
+  huge: {
+    fontSize: 46,
+    lineHeight: 54 / 46,
+  },
+  xhuge: {
+    fontSize: 56,
+    lineHeight: 64 / 56,
+  },
+  xxhuge: {
+    fontSize: 68,
+    lineHeight: 76 / 68,
+  },
+};
+
+export const Text: React.FC<TextProps> = ({
+  size = 'sm',
+  children,
+  ...rest
+}) => {
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          ...sizes[size],
+        },
+      }}
+    >
+      <Typography.Text {...rest}>{children}</Typography.Text>
+    </ConfigProvider>
+  );
+};

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/config/http.ts

@@ -0,0 +1,49 @@
+// ─── URL / 部署配置 ───────────────────────────────────────────────────────────
+//  本文件定义了前端访问后端 API 的 URL 生成逻辑，支持多种部署场景（本地开发、同域部署、跨域部署等）
+//  变量名              配置文件           生效阶段              用途
+//  ────────────────    ───────────────    ──────────────────    ──────────────────────────────────
+//  VITE_API_URL        web/.env*          浏览器运行时          直接覆盖 API baseURL（优先级最高）
+//  VITE_BACKEND_URL    web/.env*          Vite Dev Server       dev proxy target，仅 dev 模式生效
+//  VITE_DEPLOY_NAME    web/.env*          浏览器运行时          子路径前缀，如 "myapp" → /myapp/api
+//
+//  注：server 端的环境变量（如 DATABASE_URL、PORT 等）配置在 server/.env*，与此文件无关
+//
+// ─── 典型场景速查 ─────────────────────────────────────────────────────────────
+//
+//  场景                                                 最终 API 地址
+//  ───────────────────────────────────────────────    ──────────────────────────────────────
+//  本地开发，web/ 前端 :3000，无任何 env 配置                http://localhost:8000/api（直连 server/）
+//  本地开发，web/ 前端 :5173，web/.env* 设 VITE_BACKEND_URL http://localhost:5173/api → proxy → server/ :8000
+//  本地开发，web/ 前端 :5173，未设 VITE_BACKEND_URL         http://localhost:5173/api ❌ 请求会失败
+//  web/.env* 设置了 VITE_DEPLOY_NAME=foo                  http://localhost:8000/foo/api
+//  生产环境，web/.env* 设置了 VITE_API_URL                  https://api.example.com/api
+//  生产环境，同域部署，未设 VITE_API_URL                     https://your-domain.com/api
+//
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * 读取部署子路径（Vite env: VITE_DEPLOY_NAME）
+ * 本地开发不设置时返回空字符串
+ */
+export function getUrlBasename(): string {
+  if (
+    typeof import.meta !== 'undefined' &&
+    import.meta.env?.VITE_DEPLOY_NAME?.trim()
+  ) {
+    return `/${import.meta.env.VITE_DEPLOY_NAME.trim()}`;
+  }
+  return '';
+}
+
+/**
+ * 读取后端 API 根路径（Vite env: VITE_API_URL 优先）
+ * 本地开发时自动将前端 3000 端口映射到后端 8000 端口
+ */
+export function getApiUrl(): string {
+  if (
+    typeof import.meta !== 'undefined' &&
+    import.meta.env?.VITE_API_URL?.trim()
+  ) {
+    return import.meta.env.VITE_API_URL.trim();
+  }
+  return `${window.location.origin.replace(':3000', ':8000')}${getUrlBasename()}/api`;
+}