@gadmin2n/schematics 0.0.70 → 0.0.71

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/dev-shell/DevShell.tsx

@@ -0,0 +1,401 @@
+import {
+  AimOutlined,
+  MenuOutlined,
+  RobotOutlined,
+  RollbackOutlined,
+} from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import AddDataModal from './AddDataModal';
+import AddPageModal from './AddPageModal';
+import DeleteDataConfirm from './DeleteDataConfirm';
+import EditDataModal from './EditDataModal';
+import { resolvePagePaths } from '../components/agentPanel/pagePathUtils';
+import SkillMenu from './SkillMenu';
+import './style.css';
+import UndoConfirm from './UndoConfirm';
+
+declare global {
+  interface Window {
+    ChatSDK: any;
+  }
+}
+
+export interface PageContext {
+  path: string;
+  resourceName?: string;
+  pageType?: string;
+  sourceFilePath?: string;
+}
+
+function buildContextValue(ctx: PageContext | null): string | null {
+  if (!ctx?.path) return null;
+  const parts = ['## 更多的辅助信息：'];
+  if (!ctx.resourceName) {
+    parts.push('页面URL路径: ' + ctx.path);
+    parts.push('当前文件: iframe指向的外部文件，无具体文件');
+    return parts.join('\n');
+  }
+  const paths = resolvePagePaths(ctx.sourceFilePath, ctx.resourceName, '');
+  parts.push('页面URL路径: ' + ctx.path);
+  parts.push('所属的业务模块（模型）: ' + paths.modelName);
+  if (ctx.pageType && ctx.pageType !== 'unknown')
+    parts.push('页面类型: ' + ctx.pageType);
+  if (ctx.sourceFilePath) parts.push('页面文件路径: web/' + ctx.sourceFilePath);
+  parts.push('页面ui配置文件路径: ' + paths.uiConfigPath);
+  parts.push('页面后端api文件路径: ' + paths.backendApiPath);
+  parts.push('页面对应的数据模型文件目录: ' + paths.prismaDir);
+  return parts.join('\n');
+}
+
+const PAGE_CONTEXT_KEY = 'current-page';
+const AGENT_PANEL_WIDTH = 480;
+
+export type ModalType =
+  | 'addData'
+  | 'addPage'
+  | 'editData'
+  | 'deleteData'
+  | 'undo'
+  | null;
+
+export default function DevShell() {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const agentPanelRef = useRef<HTMLDivElement>(null);
+  const sdkRef = useRef<any>(null);
+
+  const [agentVisible, setAgentVisible] = useState(
+    () => sessionStorage.getItem('gadmin-agent-visible') === 'true',
+  );
+  const [isInspecting, setIsInspecting] = useState(false);
+  const [skillMenuOpen, setSkillMenuOpen] = useState(false);
+  const [modal, setModal] = useState<ModalType>(null);
+  const [isDataMngtPage, setIsDataMngtPage] = useState(false);
+  const [pageType, setPageType] = useState<string>('');
+  const pageContextRef = useRef<PageContext | null>(null);
+  const inspectorSendDepthRef = useRef(0);
+
+  // ── page context → SDK ───────────────────────────────────────────────────
+  const applyPageContext = useCallback(() => {
+    const sdk = sdkRef.current;
+    if (!sdk) return;
+    const value = buildContextValue(pageContextRef.current);
+    sdk
+      .removeAdditionContext(PAGE_CONTEXT_KEY)
+      .catch(() => {})
+      .finally(() => {
+        if (!value) return;
+        sdk
+          .addAdditionContext({
+            key: PAGE_CONTEXT_KEY,
+            value,
+            label: '📍 ' + (pageContextRef.current?.path || ''),
+          })
+          .catch((err: any) =>
+            console.error('[DevShell] addAdditionContext failed:', err),
+          );
+      });
+  }, []);
+
+  // ── send prompt helper ───────────────────────────────────────────────────
+  const sendPromptToAgent = useCallback((prompt: string) => {
+    setAgentVisible(true);
+    const sdk = sdkRef.current;
+    if (!sdk) return;
+    setTimeout(() => {
+      sdk
+        .sendUserPrompt(prompt)
+        .catch((err: any) =>
+          console.error('[DevShell] sendUserPrompt failed:', err),
+        );
+    }, 300);
+  }, []);
+
+  // ── persist agent visibility ─────────────────────────────────────────────
+  useEffect(() => {
+    sessionStorage.setItem('gadmin-agent-visible', String(agentVisible));
+  }, [agentVisible]);
+
+  // ── SDK bootstrap ────────────────────────────────────────────────────────
+  useEffect(() => {
+    function tryInit(remaining: number) {
+      if (window.ChatSDK) {
+        window.ChatSDK.init({
+          header: { logo: '', title: 'Gadmin Coding Agent' },
+          empty: '',
+          streamingTimeout: 1800,
+          initialConversation: true,
+          service: {
+            agentId: import.meta.env.VITE_AGENT_ID,
+            baseURL: import.meta.env.VITE_AGENT_BASE_URL,
+          },
+          additionContext: { position: 'after', scope: 'persist' },
+        })
+          .then((instance: any) => {
+            sdkRef.current = instance;
+            if (agentPanelRef.current) instance.appendTo(agentPanelRef.current);
+            instance.on(window.ChatSDK.ChatEventKey.CLOSE, () =>
+              setAgentVisible(false),
+            );
+            applyPageContext();
+            console.log('[DevShell] Agent ready');
+          })
+          .catch((err: any) =>
+            console.error('[DevShell] Agent init failed:', err),
+          );
+        return;
+      }
+      if (remaining <= 0) {
+        console.error('[DevShell] ChatSDK load timeout');
+        return;
+      }
+      setTimeout(() => tryInit(remaining - 200), 200);
+    }
+    tryInit(10000);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── postMessage handler ──────────────────────────────────────────────────
+  useEffect(() => {
+    function handleMessage(e: MessageEvent) {
+      const data = e.data || {};
+      switch (data.type) {
+        case 'OPEN_AGENT':
+          setAgentVisible(true);
+          break;
+        case 'CLOSE_AGENT':
+          setAgentVisible(false);
+          break;
+        case 'PAGE_CONTEXT_CHANGED': {
+          const ctx: PageContext = data.payload || null;
+          pageContextRef.current = ctx;
+          setIsDataMngtPage(
+            !!ctx?.path?.startsWith('/admin/data-mngt/') &&
+              ['list', 'show', 'create', 'edit'].includes(ctx?.pageType ?? ''),
+          );
+          setPageType(ctx?.pageType ?? '');
+          if (inspectorSendDepthRef.current === 0) applyPageContext();
+          break;
+        }
+        case 'SEND_PROMPT': {
+          setAgentVisible(true);
+          const sdk = sdkRef.current;
+          if (!sdk) break;
+          if (data.inspectorSend) {
+            inspectorSendDepthRef.current++;
+            sdk
+              .removeAdditionContext(PAGE_CONTEXT_KEY)
+              .catch(() => {})
+              .finally(() => {
+                setTimeout(() => {
+                  sdk
+                    .sendUserPrompt(data.payload)
+                    .catch((err: any) =>
+                      console.error('[DevShell] sendUserPrompt failed:', err),
+                    )
+                    .finally(() => {
+                      inspectorSendDepthRef.current--;
+                      if (inspectorSendDepthRef.current === 0)
+                        applyPageContext();
+                    });
+                }, 300);
+              });
+          } else {
+            setTimeout(() => {
+              sdk
+                .sendUserPrompt(data.payload)
+                .catch((err: any) =>
+                  console.error('[DevShell] sendUserPrompt failed:', err),
+                );
+            }, 300);
+          }
+          break;
+        }
+        case 'INSPECT_STATE':
+          setIsInspecting(!!data.payload);
+          break;
+      }
+    }
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [applyPageContext]);
+
+  // ── Escape key stops inspect ─────────────────────────────────────────────
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape' && isInspecting) {
+        iframeRef.current?.contentWindow?.postMessage(
+          { type: 'STOP_INSPECT' },
+          '*',
+        );
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isInspecting]);
+
+  const btnRight = agentVisible ? AGENT_PANEL_WIDTH + 12 : 12;
+  const menuPopupRight = agentVisible ? AGENT_PANEL_WIDTH + 56 : 56;
+  const iframeWidth = agentVisible
+    ? `calc(100% - ${AGENT_PANEL_WIDTH}px)`
+    : '100%';
+
+  const getPageContext = () => pageContextRef.current;
+
+  return (
+    <>
+      {/* App iframe */}
+      <iframe
+        ref={iframeRef}
+        id="app-iframe"
+        src="/app"
+        title="Gadmin App"
+        style={{ width: iframeWidth }}
+      />
+
+      {/* Agent panel */}
+      <div
+        ref={agentPanelRef}
+        id="agent-panel"
+        className={agentVisible ? 'visible' : ''}
+      />
+
+      {/* Toggle agent button */}
+      <Tooltip title="Gadmin Coding Agent" placement="left">
+        <button
+          id="toggle-btn"
+          className={agentVisible ? 'active' : ''}
+          style={{ right: btnRight, bottom: 24 }}
+          onClick={() => setAgentVisible((v) => !v)}
+        >
+          <RobotOutlined />
+        </button>
+      </Tooltip>
+
+      {/* Inspect button */}
+      <Tooltip title="Inspect 元素 (Alt+I)" placement="left">
+        <button
+          id="inspect-btn"
+          className={isInspecting ? 'active' : ''}
+          style={{ right: btnRight, bottom: 64 }}
+          onClick={() =>
+            iframeRef.current?.contentWindow?.postMessage(
+              { type: 'TOGGLE_INSPECT' },
+              '*',
+            )
+          }
+        >
+          <AimOutlined />
+        </button>
+      </Tooltip>
+
+      {/* Undo button */}
+      <Tooltip title="回退上一步修改" placement="left">
+        <button
+          id="undo-btn"
+          style={{ right: btnRight, bottom: 144 }}
+          onClick={() => setModal('undo')}
+        >
+          <RollbackOutlined />
+        </button>
+      </Tooltip>
+
+      {/* Menu button */}
+      <Tooltip title="快捷操作菜单" placement="left">
+        <button
+          id="menu-btn"
+          className={skillMenuOpen ? 'active' : ''}
+          style={{ right: btnRight, bottom: 104 }}
+          onClick={(e) => {
+            e.stopPropagation();
+            setSkillMenuOpen((v) => !v);
+          }}
+        >
+          <MenuOutlined />
+        </button>
+      </Tooltip>
+
+      {/* Skill menu */}
+      <SkillMenu
+        open={skillMenuOpen}
+        popupRight={menuPopupRight}
+        isDataMngtList={isDataMngtPage}
+        pageType={pageType}
+        onClose={() => setSkillMenuOpen(false)}
+        onAddData={() => {
+          setSkillMenuOpen(false);
+          setModal('addData');
+        }}
+        onAddPage={() => {
+          setSkillMenuOpen(false);
+          setModal('addPage');
+        }}
+        onEditData={() => {
+          setSkillMenuOpen(false);
+          setModal('editData');
+        }}
+        onDeleteData={() => {
+          setSkillMenuOpen(false);
+          setModal('deleteData');
+        }}
+        onFormSkill={(skill, label) => {
+          setSkillMenuOpen(false);
+          sendPromptToAgent(`使用 ${skill} skill，${label}`);
+        }}
+      />
+
+      {/* Modals */}
+      {modal === 'undo' && (
+        <UndoConfirm
+          onConfirm={(prompt) => {
+            setModal(null);
+            sendPromptToAgent(prompt);
+          }}
+          onCancel={() => setModal(null)}
+        />
+      )}
+      {modal === 'addData' && (
+        <AddDataModal
+          onConfirm={(prompt) => {
+            setModal(null);
+            sendPromptToAgent(prompt);
+          }}
+          onCancel={() => setModal(null)}
+        />
+      )}
+      {modal === 'addPage' && (
+        <AddPageModal
+          getIframe={() => iframeRef.current}
+          onConfirm={(prompt) => {
+            setModal(null);
+            sendPromptToAgent(prompt);
+          }}
+          onCancel={() => setModal(null)}
+          onGoAddData={() => {
+            setModal('addData');
+          }}
+        />
+      )}
+      {modal === 'editData' && (
+        <EditDataModal
+          getPageContext={getPageContext}
+          onConfirm={(prompt) => {
+            setModal(null);
+            sendPromptToAgent(prompt);
+          }}
+          onCancel={() => setModal(null)}
+        />
+      )}
+      {modal === 'deleteData' && (
+        <DeleteDataConfirm
+          getPageContext={getPageContext}
+          onConfirm={(prompt) => {
+            setModal(null);
+            sendPromptToAgent(prompt);
+          }}
+          onCancel={() => setModal(null)}
+        />
+      )}
+    </>
+  );
+}

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/dev-shell/EditDataModal.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { modelsMap } from '../generated/models.index';
+import type { PageContext } from './DevShell';
+
+const TYPE_SHORT: Record<string, string> = {
+  String: 'String',
+  Int: 'Int',
+  BigInt: 'BigInt',
+  Float: 'Float',
+  Decimal: 'Decimal',
+  Boolean: 'Boolean',
+  DateTime: 'DateTime',
+  Json: 'Json',
+};
+
+function getModelFields(
+  resource: string,
+): { name: string; type: string; required: boolean }[] {
+  const key = resource.charAt(0).toUpperCase() + resource.slice(1);
+  const entry = (modelsMap as Record<string, { model: Record<string, any> }>)[
+    key
+  ];
+  if (!entry?.model) return [];
+  return Object.values(entry.model).map((f) => ({
+    name: f.name,
+    type: TYPE_SHORT[f.type] ?? f.type,
+    required: f.isRequired,
+  }));
+}
+
+interface Props {
+  getPageContext: () => PageContext | null;
+  onConfirm: (prompt: string) => void;
+  onCancel: () => void;
+}
+
+export default function EditDataModal({
+  getPageContext,
+  onConfirm,
+  onCancel,
+}: Props) {
+  const [text, setText] = useState('');
+  const r = getPageContext()?.resourceName || '';
+  const fields = r ? getModelFields(r) : [];
+
+  function handleConfirm() {
+    if (!text.trim()) {
+      alert('请描述你想做的修改');
+      return;
+    }
+    onConfirm(
+      '请帮我使用 prisma-schema-update skill 修改' +
+        (r ? ' ' + r : '') +
+        ' 的 prisma model。\n\n以下是修改需求：\n' +
+        text.trim(),
+    );
+  }
+
+  return (
+    <div
+      id="edit-data-modal-overlay"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onCancel();
+      }}
+    >
+      <div id="edit-data-modal-card">
+        <div className="add-data-modal-header">
+          <h3>✏️ 修改数据表</h3>
+          <button className="add-data-modal-close" onClick={onCancel}>
+            ×
+          </button>
+        </div>
+        <div className="edit-data-modal-body">
+          {/* 左：字段列表 */}
+          <div className="edit-data-fields-panel">
+            <div className="edit-data-fields-title">
+              {r ? r : '模型'} 现有字段
+            </div>
+            <div className="edit-data-fields-list">
+              {fields.length === 0 ? (
+                <span className="edit-data-fields-empty">暂无字段信息</span>
+              ) : (
+                fields.map((f) => (
+                  <div key={f.name} className="edit-data-field-row">
+                    <span className="edit-data-field-name">{f.name}</span>
+                    <span
+                      className={`edit-data-field-type${f.required ? '' : ' optional'}`}
+                    >
+                      {f.type}
+                      {f.required ? '' : '?'}
+                    </span>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+
+          {/* 右：输入区 */}
+          <div className="edit-data-input-panel">
+            <p
+              className="add-data-hint"
+              dangerouslySetInnerHTML={{
+                __html:
+                  '描述你想对' +
+                  (r ? ' <strong>' + r + '</strong>' : '当前数据表') +
+                  ' 做的修改，越详细越好：',
+              }}
+            />
+            <textarea
+              className="add-data-free-textarea edit-data-textarea"
+              placeholder="比如：增加一个手机号字段、把状态改为枚举类型 pending/active/closed、给 userId 加索引…"
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              autoFocus
+            />
+          </div>
+        </div>
+        <div className="add-data-modal-footer">
+          <button className="add-data-btn-cancel" onClick={onCancel}>
+            取消
+          </button>
+          <button className="add-data-btn-confirm" onClick={handleConfirm}>
+            确认，开始修改
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}