@gadmin2n/schematics 0.0.55

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

@@ -0,0 +1,104 @@
+import React, { useEffect, useRef, useState } from "react";
+import * as Icons from "@ant-design/icons";
+import {
+  Modal,
+  Dropdown,
+  Menu,
+  Button,
+  Divider,
+  Row,
+  Col,
+  ModalProps,
+  Space,
+} from "antd";
+
+import { ILogData, ILog } from "@refinedev/core";
+import ReactDiffViewer, {
+  DiffMethod,
+  ReactDiffViewerProps,
+} from "react-diff-viewer";
+import { UseQueryResult } from "@tanstack/react-query";
+import stableStringify from "json-stable-stringify";
+import { EventList } from "../eventList";
+
+export interface ModalDiffViewerProps {
+  logQueryResult?: UseQueryResult<ILogData>;
+  reactDiffViewerProps?: ReactDiffViewerProps;
+  modalProps?: ModalProps;
+  selectedLog?: ILog;
+  setSelectedLog: React.Dispatch<React.SetStateAction<ILog | undefined>>;
+  showModal: () => void;
+}
+
+export const ModalDiffViewer: React.FC<ModalDiffViewerProps> = ({
+  logQueryResult,
+  modalProps,
+  reactDiffViewerProps,
+  selectedLog,
+  setSelectedLog,
+  showModal,
+}) => {
+  const [diffView, setDiffView] = useState("split");
+  const diffViewerRef = useRef<ReactDiffViewer>(null);
+
+  useEffect(() => {
+    diffViewerRef.current?.resetCodeBlocks();
+  }, [
+    reactDiffViewerProps?.newValue,
+    reactDiffViewerProps?.oldValue,
+    modalProps?.open,
+  ]);
+  
+  return (
+    <Modal footer={null} width={"80%"} {...modalProps}>
+      <Space>
+        <Dropdown
+          overlay={
+            <Menu selectedKeys={[diffView]}>
+              <Menu.Item key="split" onClick={(info) => setDiffView(info.key)}>
+                Split
+              </Menu.Item>
+              <Menu.Item
+                key="unified"
+                onClick={(info) => setDiffView(info.key)}
+              >
+                Unified
+              </Menu.Item>
+            </Menu>
+          }
+          placement="bottom"
+          trigger={["click"]}
+        >
+          <Button icon={<Icons.SettingOutlined />}>Diff view</Button>
+        </Dropdown>
+      </Space>
+      <Divider />
+      <Row gutter={[16, 16]}>
+        <Col span={20}>
+          <ReactDiffViewer
+            ref={diffViewerRef}
+            leftTitle="Before"
+            rightTitle="After"
+            compareMethod={DiffMethod.WORDS}
+            splitView={diffView === "split"}
+            oldValue={stableStringify(JSON.parse(selectedLog?.previousData), {
+              space: " ",
+            })}
+            newValue={stableStringify(JSON.parse(selectedLog?.data), {
+              space: " ",
+            })}
+            {...reactDiffViewerProps}
+          />
+        </Col>
+        <Col span={4}>
+          <EventList
+            logQueryResult={logQueryResult}
+            setSelectedLog={setSelectedLog}
+            showModal={showModal}
+            selectedLog={selectedLog}
+          />
+        </Col>
+      </Row>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { LogList, LogButton } from "./components";
+export type { LogListProps } from "./components";

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

@@ -0,0 +1,65 @@
+import { PropsWithChildren, createContext, useEffect, useState } from "react";
+import { findMany } from "helpers/utils";
+import { Game } from "generated/types/prisma.types";
+
+export type BusinessInfo = {
+  gameId: string;
+  gameName: string;
+};
+export type BusinessContextType = {
+  business: BusinessInfo;
+  setBusiness: (business: BusinessInfo) => void;
+  businessList: BusinessInfo[];
+};
+
+export const BusinessContext = createContext<BusinessContextType>(
+  {} as BusinessContextType
+);
+
+export const BusinessContextProvider: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const BusinessFromLocalStorage = JSON.parse(
+    localStorage.getItem("Business") ||
+      JSON.stringify({
+        gameId: "u10000000066",
+        gameName: "HOK",
+      })
+  );
+
+  const [business, setBusiness] = useState<BusinessInfo>(
+    BusinessFromLocalStorage
+  );
+  const [businessList, setBusinessList] = useState<BusinessInfo[]>([
+    BusinessFromLocalStorage,
+  ]);
+
+  useEffect(() => {
+    window.localStorage.setItem("Business", JSON.stringify(business));
+  }, [business]);
+
+  useEffect(() => {
+    const fetchGameList = async () => {
+      const gameList = await findMany<Game>("game", { take: 1000 });
+      setBusinessList(
+        gameList.map((game) => ({
+          gameId: game.unified_editionid,
+          gameName: game.name,
+        }))
+      );
+    };
+    fetchGameList();
+  }, []);
+
+  return (
+    <BusinessContext.Provider
+      value={{
+        setBusiness,
+        business,
+        businessList,
+      }}
+    >
+      {children}
+    </BusinessContext.Provider>
+  );
+};

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

@@ -0,0 +1,60 @@
+import { RefineThemes } from "@refinedev/antd";
+import { ConfigProvider, theme } from "antd";
+import { PropsWithChildren, createContext, useEffect, useState } from "react";
+
+type ColorModeContextType = {
+  mode: string;
+  setMode: (mode: string) => void;
+};
+
+export const ColorModeContext = createContext<ColorModeContextType>(
+  {} as ColorModeContextType
+);
+
+export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  // 优先默认使用light模式
+  const colorModeFromLocalStorage = localStorage.getItem("colorMode") || "light";
+  const isSystemPreferenceDark = window?.matchMedia(
+    "(prefers-color-scheme: dark)"
+  ).matches;
+
+  const systemPreference = isSystemPreferenceDark ? "dark" : "light";
+  const [mode, setMode] = useState(
+    colorModeFromLocalStorage || systemPreference
+  );
+
+  useEffect(() => {
+    window.localStorage.setItem("colorMode", mode);
+  }, [mode]);
+
+  const setColorMode = () => {
+    if (mode === "light") {
+      setMode("dark");
+    } else {
+      setMode("light");
+    }
+  };
+
+  const { darkAlgorithm, defaultAlgorithm } = theme;
+
+  return (
+    <ColorModeContext.Provider
+      value={{
+        setMode: setColorMode,
+        mode,
+      }}
+    >
+      <ConfigProvider
+        // you can change the theme colors here. example: ...RefineThemes.Magenta,
+        theme={{
+          ...RefineThemes.Blue,
+          algorithm: mode === "light" ? defaultAlgorithm : darkAlgorithm,
+        }}
+      >
+        {children}
+      </ConfigProvider>
+    </ColorModeContext.Provider>
+  );
+};

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

@@ -0,0 +1,4 @@
+export * from './SearchBar';
+export * from './BulkActions';
+export * from './RowActions';
+export * from './ListPageHeader';

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

@@ -0,0 +1,130 @@
+import { useGetLocale, useSetLocale, useGetIdentity } from "@refinedev/core";
+import {
+  Layout as AntdLayout,
+  Space,
+  Button,
+  Dropdown,
+  Avatar,
+  Typography,
+  theme,
+  Switch,
+  Select,
+  Tooltip,
+} from "antd";
+import * as Icons from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { useContext } from "react";
+import { ColorModeContext } from "components/contexts/color-mode";
+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 { DownOutlined, RobotOutlined } = Icons;
+const { Text } = Typography;
+const { useToken } = theme;
+
+const isDev = process.env.NODE_ENV === "development";
+
+export const Header: React.FC = () => {
+  const { i18n } = useTranslation();
+  const locale = useGetLocale();
+  const changeLanguage = useSetLocale();
+  const { token } = useToken();
+  const { data: user } = useGetIdentity<IUser>();
+  const { mode, setMode } = useContext(ColorModeContext);
+  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),
+  };
+
+  return (
+    <AntdLayout.Header
+      style={{
+        backgroundColor: token.colorBgElevated,
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        padding: "0px 24px",
+        height: "64px",
+      }}
+    >
+      {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 }}
+        bordered={false}
+        options={[
+          ...businessList.map((item) => ({
+            label: item.gameName,
+            value: item.gameId,
+          })),
+          {
+            label: "管理员专用",
+            options: [{ value: "-1", label: "All games" }],
+          },
+        ]}
+        optionFilterProp="label" // or "value"
+        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>
+        <Switch
+          checkedChildren="🌛"
+          unCheckedChildren="🔆"
+          onChange={() => setMode(mode === "light" ? "dark" : "light")}
+          defaultChecked={mode === "dark"}
+        />
+        <Space style={{ marginLeft: "8px" }} size="middle">
+          {user?.name && <Text strong>{user.name}</Text>}
+          {user?.avatar && <Avatar src={user?.avatar} alt={user?.name} />}
+        </Space>
+      </Space>
+    </AntdLayout.Header>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { Header } from "./header";
+export { CustomSider } from "./sider";

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

@@ -0,0 +1,218 @@
+import React, { useState } from "react";
+import {
+    ITreeMenu,
+    CanAccess,
+    useIsExistAuthentication,
+    useTranslate,
+    useLogout,
+    useMenu,
+    useWarnAboutChange,
+} from "@refinedev/core";
+import { Link } from "react-router-dom";
+import { Sider, ThemedTitle } from "@refinedev/antd";
+import { Layout as AntdLayout, Menu, Grid, theme, Button } from "antd";
+import {
+    LogoutOutlined,
+    UnorderedListOutlined,
+    RightOutlined,
+    LeftOutlined,
+} from "@ant-design/icons";
+import { antLayoutSider, antLayoutSiderMobile } from "./styles";
+
+const { useToken } = theme;
+
+export const CustomSider: typeof Sider = ({ render }) => {
+  const { token } = useToken();
+  const [collapsed, setCollapsed] = useState<boolean>(false);
+  const isExistAuthentication = useIsExistAuthentication();
+  const { warnWhen, setWarnWhen } = useWarnAboutChange();
+  const { mutate: mutateLogout } = useLogout();
+  const translate = useTranslate();
+  const { menuItems, selectedKey, defaultOpenKeys } = useMenu();
+  const { SubMenu } = Menu;
+
+  const breakpoint = Grid.useBreakpoint();
+
+  const isMobile =
+    typeof breakpoint.lg === "undefined" ? false : !breakpoint.lg;
+
+  const renderTreeView = (tree: ITreeMenu[], selectedKey: string) => {
+    return tree.map((item: ITreeMenu) => {
+      const { name, children, meta, key, list } = item;
+
+      const icon = meta?.icon;
+      const label = meta?.label ?? name;
+      const parent = meta?.parent;
+      const route =
+        typeof list === "string"
+          ? list
+          : typeof list !== "function"
+          ? list?.path
+          : key;
+
+      if (children.length > 0) {
+        return (
+          <SubMenu
+            key={route}
+            icon={icon ?? <UnorderedListOutlined />}
+            title={label}
+            style={{
+              textTransform: "capitalize",
+            }}
+          >
+            {renderTreeView(children, selectedKey)}
+          </SubMenu>
+        );
+      }
+      //console.log(route , selectedKey, defaultOpenKeys)
+      const isSelected = route === selectedKey;
+      const isRoute = !(parent !== undefined && children.length === 0);
+      return (
+        <CanAccess
+          key={route}
+          resource={name.toLowerCase()}
+          action="list"
+          params={{ resource: item }}
+        >
+          <Menu.Item
+            key={route}
+            style={{
+              textTransform: "capitalize",
+            }}
+            icon={icon ?? (isRoute && <UnorderedListOutlined />)}
+          >
+            {route ? (
+              <Link
+                to={`${route}${meta?.listInitParams || ""}`}
+              >
+                {label}
+              </Link>
+            ) : (
+              label
+            )}
+            {!collapsed && isSelected && (
+              <div className="ant-menu-tree-arrow" />
+            )}
+          </Menu.Item>
+        </CanAccess>
+      );
+    });
+  };
+
+  const handleLogout = () => {
+    if (warnWhen) {
+      const confirm = window.confirm(
+        translate(
+          "warnWhenUnsavedChanges",
+          "Are you sure you want to leave? You have unsaved changes."
+        )
+      );
+
+      if (confirm) {
+        setWarnWhen(false);
+        mutateLogout();
+      }
+    } else {
+      mutateLogout();
+    }
+  };
+
+  const logout = isExistAuthentication && (
+    <Menu.Item key="logout" onClick={handleLogout} icon={<LogoutOutlined />}>
+      {translate("buttons.logout", "Logout")}
+    </Menu.Item>
+  );
+
+  const items = renderTreeView(menuItems, selectedKey);
+
+  const renderSider = () => {
+    if (render) {
+      return render({
+        dashboard: null,
+        items,
+        logout,
+        collapsed,
+      });
+    }
+    return (
+      <>
+        {items}
+      </>
+    );
+  };
+
+  const siderStyle = isMobile ? antLayoutSiderMobile : antLayoutSider;
+
+  return (
+    <AntdLayout.Sider
+      collapsible
+      collapsedWidth={isMobile ? 0 : 80}
+      collapsed={collapsed}
+      breakpoint="lg"
+      onCollapse={(collapsed: boolean): void => setCollapsed(collapsed)}
+      style={{
+        ...siderStyle,
+        backgroundColor: token.colorBgContainer,
+        borderRight: `1px solid ${token.colorBgElevated}`,
+      }}
+      trigger={
+        !isMobile && (
+          <Button
+            type="text"
+            style={{
+              borderRadius: 0,
+              height: "100%",
+              width: "100%",
+              backgroundColor: token.colorBgElevated,
+            }}
+          >
+            {collapsed ? (
+              <RightOutlined
+                style={{
+                  color: token.colorPrimary,
+                }}
+              />
+            ) : (
+              <LeftOutlined
+                style={{
+                  color: token.colorPrimary,
+                }}
+              />
+            )}
+          </Button>
+        )
+      }
+    >
+      <div
+        style={{
+          width: collapsed ? "80px" : "200px",
+          padding: collapsed ? "0" : "0 16px",
+          display: "flex",
+          justifyContent: collapsed ? "center" : "flex-start",
+          alignItems: "center",
+          height: "64px",
+          backgroundColor: token.colorBgElevated,
+          fontSize: "14px",
+        }}
+      >
+        <ThemedTitle collapsed={collapsed} text='Opinions admin'/>
+      </div>
+      <Menu
+        defaultOpenKeys={defaultOpenKeys}
+        selectedKeys={[selectedKey]}
+        mode="inline"
+        style={{
+          marginTop: "8px",
+          border: "none",
+        }}
+        onClick={() => {
+          if (!breakpoint.lg) {
+            setCollapsed(true);
+          }
+        }}
+      >
+        {renderSider()}
+      </Menu>
+    </AntdLayout.Sider>
+  );
+};

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

@@ -0,0 +1,10 @@
+import { CSSProperties } from "react";
+
+export const antLayoutSider: CSSProperties = {
+    position: "relative",
+};
+export const antLayoutSiderMobile: CSSProperties = {
+    position: "fixed",
+    height: "100vh",
+    zIndex: 999,
+};

package/dist/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 />;
+};