@gadmin2n/cli 0.0.81 → 0.0.82

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

@@ -0,0 +1,282 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Dropdown, Input, Modal } from 'antd';
+import { useAgent } from './AgentContext';
+import { AgentType } from './agentAttributes';
+import {
+  getInspectorActions,
+  InspectedElementInfo,
+  InspectorAction,
+} from './inspectorActions';
+
+const TYPE_LABELS: Record<AgentType, string> = {
+  'table-column': '表格列',
+  'form-field': '表单字段',
+  'show-field': '详情字段',
+  'search-bar': '搜索栏',
+  'list-header': '列表头部',
+  'row-actions': '行操作',
+  'bulk-actions': '批量操作',
+};
+
+function findAgentElement(x: number, y: number): HTMLElement | null {
+  const elements = document.elementsFromPoint(x, y);
+  for (const el of elements) {
+    if (el instanceof HTMLElement && el.dataset.agentType) {
+      return el;
+    }
+  }
+  return null;
+}
+
+function parseElementInfo(
+  el: HTMLElement,
+  x: number,
+  y: number,
+): InspectedElementInfo {
+  return {
+    type: el.dataset.agentType as AgentType,
+    field: el.dataset.agentField,
+    resource: el.dataset.agentResource || '',
+    file: el.dataset.agentFile,
+    meta: el.dataset.agentMeta ? JSON.parse(el.dataset.agentMeta) : undefined,
+    x,
+    y,
+  };
+}
+
+export const ElementInspector: React.FC = () => {
+  const agent = useAgent();
+  const [highlight, setHighlight] = useState<DOMRect | null>(null);
+  const [label, setLabel] = useState('');
+  const [menuInfo, setMenuInfo] = useState<InspectedElementInfo | null>(null);
+  const [menuRect, setMenuRect] = useState<DOMRect | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [freeInputVisible, setFreeInputVisible] = useState(false);
+  const [freeInputValue, setFreeInputValue] = useState('');
+  const pendingActionRef = useRef<InspectorAction | null>(null);
+
+  const inspecting = agent?.inspecting ?? false;
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      const el = findAgentElement(e.clientX, e.clientY);
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        setHighlight(rect);
+        const type = el.dataset.agentType as AgentType;
+        const field = el.dataset.agentField;
+        setLabel(
+          `${TYPE_LABELS[type] || type}${field ? ': ' + field : ''}`,
+        );
+      } else {
+        setHighlight(null);
+        setLabel('');
+      }
+    },
+    [],
+  );
+
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const el = findAgentElement(e.clientX, e.clientY);
+      if (!el) return;
+
+      const rect = el.getBoundingClientRect();
+      const info = parseElementInfo(el, e.clientX, e.clientY);
+      agent?.stopInspecting();
+      // keep highlight visible while menu is open
+      setHighlight(rect);
+      setMenuRect(rect);
+      setMenuInfo(info);
+      setMenuOpen(true);
+    },
+    [agent],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        agent?.stopInspecting();
+        setHighlight(null);
+      }
+    },
+    [agent],
+  );
+
+  useEffect(() => {
+    if (!inspecting) return;
+    document.addEventListener('mousemove', handleMouseMove, true);
+    document.addEventListener('click', handleClick, true);
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove, true);
+      document.removeEventListener('click', handleClick, true);
+      document.removeEventListener('keydown', handleKeyDown, true);
+    };
+  }, [inspecting, handleMouseMove, handleClick, handleKeyDown]);
+
+  const applyAction = useCallback(
+    (action: InspectorAction, prompt?: string) => {
+      if (!agent || !menuInfo) return;
+      agent.setSelectedSkillId(action.skillId);
+      agent.setSelectedSubSkillId(action.subSkillId);
+      agent.setUserPrompt(prompt || action.promptTemplate || '');
+      agent.setInspectedElement(menuInfo);
+      agent.open();
+      setMenuOpen(false);
+      setMenuInfo(null);
+      setMenuRect(null);
+      setHighlight(null);
+    },
+    [agent, menuInfo],
+  );
+
+  const handleMenuAction = useCallback(
+    (action: InspectorAction) => {
+      if (action.freeInput) {
+        pendingActionRef.current = action;
+        setFreeInputValue('');
+        setFreeInputVisible(true);
+        setMenuOpen(false);
+        return;
+      }
+      applyAction(action);
+    },
+    [applyAction],
+  );
+
+  const handleFreeInputOk = useCallback(() => {
+    const action = pendingActionRef.current;
+    if (action) {
+      applyAction(action, freeInputValue);
+    }
+    setFreeInputVisible(false);
+    pendingActionRef.current = null;
+  }, [applyAction, freeInputValue]);
+
+  const handleFreeInputCancel = useCallback(() => {
+    setFreeInputVisible(false);
+    pendingActionRef.current = null;
+    setMenuInfo(null);
+    setMenuRect(null);
+    setHighlight(null);
+  }, []);
+
+  const handleMenuOpenChange = useCallback((open: boolean) => {
+    if (!open) {
+      setMenuOpen(false);
+      setMenuInfo(null);
+      setMenuRect(null);
+      setHighlight(null);
+    }
+  }, []);
+
+  if (!agent) return null;
+
+  const actions = menuInfo ? getInspectorActions(menuInfo) : [];
+
+  const menuItems = actions.map((action) => ({
+    key: action.label,
+    label: action.label,
+    onClick: () => handleMenuAction(action),
+  }));
+
+  return (
+    <>
+      {/* Overlay — captures mouse events during inspect mode */}
+      {inspecting && (
+        <div
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 10000,
+            cursor: 'crosshair',
+          }}
+        />
+      )}
+
+      {/* Highlight box — rendered independently so it persists while menu is open */}
+      {highlight && (
+        <>
+          <div
+            style={{
+              position: 'fixed',
+              left: highlight.left,
+              top: highlight.top,
+              width: highlight.width,
+              height: highlight.height,
+              border: '2px solid #1890ff',
+              background: 'rgba(24,144,255,0.1)',
+              pointerEvents: 'none',
+              zIndex: 10001,
+              borderRadius: 2,
+            }}
+          />
+          {/* Label */}
+          {label && (
+            <div
+              style={{
+                position: 'fixed',
+                left: highlight.left,
+                top: Math.max(0, highlight.top - 26),
+                background: '#1890ff',
+                color: '#fff',
+                fontSize: 12,
+                padding: '2px 8px',
+                borderRadius: '4px 4px 0 0',
+                pointerEvents: 'none',
+                zIndex: 10002,
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {label}
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Action menu — anchor positioned at the clicked element's right-bottom */}
+      <Dropdown
+        menu={{ items: menuItems }}
+        open={menuOpen}
+        onOpenChange={handleMenuOpenChange}
+        placement="bottomRight"
+        trigger={['click']}
+      >
+        <div
+          style={{
+            position: 'fixed',
+            left: menuRect ? menuRect.right : 0,
+            top: menuRect ? menuRect.bottom : 0,
+            width: 1,
+            height: 1,
+            zIndex: menuOpen ? 10003 : -1,
+            pointerEvents: menuOpen ? 'auto' : 'none',
+          }}
+        />
+      </Dropdown>
+
+      {/* Free input modal */}
+      <Modal
+        title="输入自定义需求"
+        open={freeInputVisible}
+        onOk={handleFreeInputOk}
+        onCancel={handleFreeInputCancel}
+        okText="确定"
+        cancelText="取消"
+        zIndex={10010}
+      >
+        <Input.TextArea
+          rows={3}
+          value={freeInputValue}
+          onChange={(e) => setFreeInputValue(e.target.value)}
+          placeholder="请描述你想要的自定义操作..."
+        />
+      </Modal>
+    </>
+  );
+};
+
+export default ElementInspector;

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

@@ -0,0 +1,62 @@
+import React from "react";
+import { UseQueryResult } from "@tanstack/react-query";
+import {
+  List as AntdList,
+  Button,
+  Badge,
+  Typography,
+} from "antd";
+import { ILog, ILogData } from "@refinedev/core";
+import dayjs from "dayjs";
+
+const { Text } = Typography;
+
+interface EventListProps {
+  logQueryResult?: UseQueryResult<ILogData>;
+  showModal: () => void;
+  setSelectedLog: React.Dispatch<React.SetStateAction<ILog | undefined>>;
+  selectedLog: ILog | undefined;
+}
+
+export const EventList: React.FC<EventListProps> = ({
+  logQueryResult,
+  showModal,
+  setSelectedLog,
+  selectedLog,
+}) => {
+  return (
+    <AntdList
+      dataSource={logQueryResult?.data}
+      renderItem={(log: any) => {
+        const { creator, action, timestamp } = log;
+
+        return (
+          <AntdList.Item
+            style={{
+              alignItems: "flex-start",
+              padding: "8px 0px 8px 8px",
+            }}
+          >
+            <Button
+              type="text"
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                height: "100%",
+              }}
+              onClick={() => {
+                showModal();
+                setSelectedLog(log);
+              }}
+            > 
+              <Badge color={selectedLog?.id === log.id ? "blue" : "gray"} text={`${action} by ${creator}`} />
+              <Text>
+                Date: {dayjs(timestamp).format("MM/DD/YYYY, hh:mm")}
+              </Text>
+            </Button>
+          </AntdList.Item>
+        );
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,96 @@
+import React, { useState } from "react";
+import { useModal } from "@refinedev/antd";
+import { Button, ButtonProps, ModalProps, message } from "antd";
+import * as Icons from "@ant-design/icons";
+import {
+  useRouterContext,
+  useTranslate,
+  ResourceRouterParams,
+  BaseKey,
+  useLogList,
+  ILog,
+  ILogData,
+  useResource,
+} from "@refinedev/core";
+import { ReactDiffViewerProps } from "react-diff-viewer";
+import { ModalDiffViewer } from "../modalDiffViewer";
+
+export type LogButtonProps = ButtonProps & {
+  recordItemId?: BaseKey;
+  resourceName?: string;
+  hideText?: boolean;
+  reactDiffViewerProps?: ReactDiffViewerProps;
+  modalProps?: ModalProps;
+};
+
+export const LogButton: React.FC<LogButtonProps> = ({
+  resourceName: propResourceName,
+  recordItemId,
+  hideText = false,
+  onClick,
+  reactDiffViewerProps,
+  modalProps: propModalProps,
+  children,
+  ...rest
+}) => {
+  const [selectedLog, setSelectedLog] = useState<ILog>();
+
+  const translate = useTranslate();
+  const { modalProps, show } = useModal();
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const { useParams } = useRouterContext();
+  const { id: idFromRoute, } =
+    useParams<ResourceRouterParams>();
+
+  const resourceWithRoute = useResource();
+
+  const resourceName = propResourceName ?? resourceWithRoute?.resource?.name ?? "";
+  const id = recordItemId ?? idFromRoute;
+
+  const logQueryResult = useLogList<ILogData>({
+    resource: resourceName,
+    meta: { id },
+    queryOptions: {
+      enabled: modalProps.open,
+      onSuccess: (result) => {
+        if (result?.length) {
+          setSelectedLog(result[0]);
+        } else {
+          messageApi.open({
+            type: "warning",
+            content: "There is no history.",
+          });
+        }
+      },
+    },
+  });
+
+  return (
+    <>
+      <Button
+        onClick={(e): void =>
+          onClick
+            ? onClick(e as React.MouseEvent<HTMLButtonElement, MouseEvent>)
+            : show()
+        }
+        icon={<Icons.HistoryOutlined />}
+        {...rest}
+      >
+        {!hideText && (children ?? translate("buttons.logs", "History"))}
+      </Button>
+      {selectedLog ? (
+        <ModalDiffViewer
+          modalProps={{ ...modalProps, ...propModalProps }}
+          showModal={show}
+          selectedLog={selectedLog}
+          setSelectedLog={setSelectedLog}
+          logQueryResult={logQueryResult}
+          reactDiffViewerProps={reactDiffViewerProps}
+        />
+      ) : (
+        <>{contextHolder}</>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import { useModal } from "@refinedev/antd";
+import { Card, ModalProps } from "antd";
+import {
+  BaseKey,
+  ILog,
+  ILogData,
+  pickNotDeprecated,
+  ResourceRouterParams,
+  useLogList,
+  useResourceWithRoute,
+  useRouterContext,
+} from "@refinedev/core";
+import { ReactDiffViewerProps } from "react-diff-viewer";
+
+import { ModalDiffViewer } from "../modalDiffViewer";
+import { EventList } from "../eventList";
+
+export interface LogListProps {
+  recordItemId?: BaseKey;
+  reactDiffViewerProps?: ReactDiffViewerProps;
+  modalProps?: ModalProps;
+  resource?: string;
+}
+
+export const LogList: React.FC<LogListProps> = ({
+  recordItemId,
+  reactDiffViewerProps,
+  modalProps: propModalProps,
+  resource: propResourceName,
+}) => {
+  const [selectedLog, setSelectedLog] = useState<ILog>();
+
+  const { modalProps, show } = useModal();
+
+  const { useParams } = useRouterContext();
+  const { resource: routeResourceName, id: idFromRoute } =
+    useParams<ResourceRouterParams>();
+
+  const resourceWithRoute = useResourceWithRoute();
+  const resource = resourceWithRoute(routeResourceName);
+
+  const resourceName = propResourceName ?? resource.name;
+  const id = recordItemId ?? idFromRoute;
+
+  const logQueryResult = useLogList<ILogData>({
+    resource: resourceName,
+    meta: { id },
+    metaData: pickNotDeprecated(resource.meta, resource.options),
+  });
+
+  return (
+    <>
+      <Card loading={logQueryResult?.isLoading} bodyStyle={{ padding: 0 }}>
+        <EventList
+          logQueryResult={logQueryResult}
+          setSelectedLog={setSelectedLog}
+          showModal={show}
+          selectedLog={selectedLog}
+        />
+      </Card>
+        <ModalDiffViewer
+          modalProps={{ ...modalProps, ...propModalProps }}
+          showModal={show}
+          selectedLog={selectedLog}
+          setSelectedLog={setSelectedLog}
+          logQueryResult={logQueryResult}
+          reactDiffViewerProps={reactDiffViewerProps}
+        />
+      
+    </>
+  );
+};

package/.yalc/@gadmin2n/schematics/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/.yalc/@gadmin2n/schematics/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/.yalc/@gadmin2n/schematics/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>
+  );
+};