@gadmin2n/schematics 0.0.55

package/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/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/agentPanel/agentAttributes.ts

@@ -0,0 +1,61 @@
+export type AgentType =
+  | 'table-column'
+  | 'form-field'
+  | 'show-field'
+  | 'search-bar'
+  | 'list-header'
+  | 'row-actions'
+  | 'bulk-actions';
+
+export interface AgentAttrsOptions {
+  type: AgentType;
+  field?: string;
+  resource: string;
+  file?: string;
+  meta?: Record<string, any>;
+}
+
+/**
+ * Generate data-agent-* attributes for element inspector.
+ * Only returns attributes in development mode; returns empty object in production.
+ */
+export function agentAttrs(options: AgentAttrsOptions): Record<string, string> {
+  if (process.env.NODE_ENV !== 'development') {
+    return {};
+  }
+
+  const attrs: Record<string, string> = {
+    'data-agent-type': options.type,
+    'data-agent-resource': options.resource,
+  };
+
+  if (options.field) {
+    attrs['data-agent-field'] = options.field;
+  }
+
+  if (options.file) {
+    attrs['data-agent-file'] = options.file;
+  }
+
+  if (options.meta) {
+    attrs['data-agent-meta'] = JSON.stringify(options.meta);
+  }
+
+  return attrs;
+}
+
+/**
+ * Returns Table.Column props (onHeaderCell) to inject row-actions agent attributes on the header.
+ * Spread onto the actions `<Table.Column>`:
+ * ```tsx
+ * <Table.Column title="Actions" {...getRowActionsColumnProps(resourceName)} render={...} />
+ * ```
+ */
+export function getRowActionsColumnProps(resource: string): Record<string, any> {
+  if (process.env.NODE_ENV !== 'development') {
+    return {};
+  }
+  return {
+    onHeaderCell: () => agentAttrs({ type: 'row-actions', resource }),
+  };
+}

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

@@ -0,0 +1,18 @@
+export { AgentProvider, useAgent } from './AgentContext';
+export type { PageInfo, PageType } from './AgentContext';
+export { AgentPanel } from './AgentPanel';
+export {
+  skills,
+  getPageSkills,
+  getProjectSkills,
+  getSubSkills,
+  findSkillById,
+  getParentSkillId,
+} from './skills';
+export type { Skill, SubSkill } from './skills';
+export { generatePrompt } from './promptGenerator';
+export { agentAttrs, getRowActionsColumnProps } from './agentAttributes';
+export type { AgentType, AgentAttrsOptions } from './agentAttributes';
+export { ElementInspector } from './ElementInspector';
+export { getInspectorActions } from './inspectorActions';
+export type { InspectorAction, InspectedElementInfo } from './inspectorActions';

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

@@ -0,0 +1,111 @@
+import { AgentType } from './agentAttributes';
+
+export interface InspectorAction {
+  label: string;
+  /** Sub-skill ID from skills.ts */
+  subSkillId: string;
+  /** Parent skill ID */
+  skillId: string;
+  /** Prompt template. Use {resource} and {field} as placeholders. */
+  promptTemplate?: string;
+  /** If true, show a free-text input instead of pre-filled prompt */
+  freeInput?: boolean;
+}
+
+export interface InspectedElementInfo {
+  type: AgentType;
+  field?: string;
+  resource: string;
+  file?: string;
+  meta?: Record<string, any>;
+  /** Click position for menu placement */
+  x: number;
+  y: number;
+}
+
+function col(resource: string, field: string): string {
+  return `${resource} 列表中的 "${field}" 列`;
+}
+
+function formF(resource: string, field: string): string {
+  return `${resource} 表单中的 "${field}" 字段`;
+}
+
+function showF(resource: string, field: string): string {
+  return `${resource} 详情页的 "${field}" 字段`;
+}
+
+export function getInspectorActions(info: InspectedElementInfo): InspectorAction[] {
+  const { type, resource, field } = info;
+  const r = resource;
+  const f = field || '';
+
+  switch (type) {
+    case 'table-column':
+      return [
+        { label: '不显示',subSkillId: 'column-visibility', skillId: 'list-customization', promptTemplate: `隐藏 ${col(r, f)}` },
+        { label: '修改样式', subSkillId: 'column-render', skillId: 'list-customization', promptTemplate: `自定义 ${col(r, f)}的渲染样式` },
+        { label: '修改描述', subSkillId: 'page-i18n', skillId: 'i18n', promptTemplate: `修改 ${col(r, f)}的显示名称` },
+        { label: '固定列', subSkillId: 'fixed-column', skillId: 'list-customization', promptTemplate: `将 ${col(r, f)}固定到左侧/右侧` },
+        { label: '行内编辑', subSkillId: 'inline-edit', skillId: 'list-customization', promptTemplate: `为 ${col(r, f)}启用行内编辑` },
+        { label: '排序', subSkillId: 'ui-config', skillId: 'ui-config', promptTemplate: `为 ${col(r, f)}添加排序` },
+        { label: '筛选', subSkillId: 'ui-config', skillId: 'ui-config', promptTemplate: `为 ${col(r, f)}添加筛选` },
+        { label: '其他', subSkillId: 'list-customization', skillId: 'list-customization', freeInput: true },
+      ];
+
+    case 'form-field':
+      return [
+        { label: '不显示',subSkillId: 'form-field-dependencies', skillId: 'form-customization', promptTemplate: `隐藏 ${formF(r, f)}` },
+        { label: '修改样式', subSkillId: 'form-customization', skillId: 'form-customization', promptTemplate: `自定义 ${formF(r, f)}的组件` },
+        { label: '添加提示', subSkillId: 'field-tooltip', skillId: 'form-customization', promptTemplate: `为 ${formF(r, f)}添加 Tooltip` },
+        { label: '添加校验', subSkillId: 'custom-validator', skillId: 'form-customization', promptTemplate: `为 ${formF(r, f)}添加校验规则` },
+        { label: '字段联动', subSkillId: 'form-field-dependencies', skillId: 'form-customization', promptTemplate: `为 ${formF(r, f)}添加联动依赖` },
+        { label: '其他', subSkillId: 'form-customization', skillId: 'form-customization', freeInput: true },
+      ];
+
+    case 'show-field':
+      return [
+        { label: '不显示',subSkillId: 'field-render', skillId: 'show-customization', promptTemplate: `隐藏 ${showF(r, f)}` },
+        { label: '修改样式', subSkillId: 'field-render', skillId: 'show-customization', promptTemplate: `自定义 ${showF(r, f)}的显示方式` },
+        { label: '修改描述', subSkillId: 'page-i18n', skillId: 'i18n', promptTemplate: `修改 ${showF(r, f)}的标签` },
+        { label: '其他', subSkillId: 'show-customization', skillId: 'show-customization', freeInput: true },
+      ];
+
+    case 'search-bar':
+      return [
+        { label: '不显示',subSkillId: 'list-customization', skillId: 'list-customization', promptTemplate: `隐藏 ${r} 列表的搜索栏` },
+        { label: '自定义搜索', subSkillId: 'list-customization', skillId: 'list-customization', promptTemplate: `自定义 ${r} 列表的搜索栏` },
+        { label: '其他', subSkillId: 'list-customization', skillId: 'list-customization', freeInput: true },
+      ];
+
+    case 'list-header':
+      return [
+        { label: '不显示',subSkillId: 'conditional-create-button', skillId: 'list-customization', promptTemplate: `隐藏 ${r} 列表的头部按钮` },
+        { label: '自定义按钮', subSkillId: 'list-customization', skillId: 'list-customization', promptTemplate: `自定义 ${r} 列表的头部按钮` },
+        { label: '自定义导出', subSkillId: 'export-customization', skillId: 'list-customization', promptTemplate: `自定义 ${r} 列表的导出功能` },
+        { label: '自定义导入', subSkillId: 'import-customization', skillId: 'list-customization', promptTemplate: `自定义 ${r} 列表的导入功能` },
+        { label: '其他', subSkillId: 'list-customization', skillId: 'list-customization', freeInput: true },
+      ];
+
+    case 'row-actions':
+      return [
+        { label: '不显示',subSkillId: 'readonly-mode', skillId: 'list-customization', promptTemplate: `隐藏 ${r} 列表的行操作按钮` },
+        { label: '自定义操作', subSkillId: 'custom-row-actions', skillId: 'list-customization', promptTemplate: `自定义 ${r} 列表的行操作` },
+        { label: '添加链接跳转', subSkillId: 'row-action-link', skillId: 'list-customization', promptTemplate: `为 ${r} 列表添加行操作链接跳转` },
+        { label: '添加外部链接', subSkillId: 'row-action-external', skillId: 'list-customization', promptTemplate: `为 ${r} 列表添加行操作外部链接` },
+        { label: '添加弹窗+API', subSkillId: 'row-action-modal-api', skillId: 'list-customization', promptTemplate: `为 ${r} 列表添加行操作弹窗和 API 调用` },
+        { label: '其他', subSkillId: 'list-customization', skillId: 'list-customization', freeInput: true },
+      ];
+
+    case 'bulk-actions':
+      return [
+        { label: '不显示',subSkillId: 'list-customization', skillId: 'list-customization', promptTemplate: `隐藏 ${r} 列表的批量操作` },
+        { label: '批量修改弹窗', subSkillId: 'batch-modify-modal', skillId: 'list-customization', promptTemplate: `为 ${r} 列表添加批量修改弹窗` },
+        { label: '批量删除', subSkillId: 'batch-delete-promise', skillId: 'list-customization', promptTemplate: `为 ${r} 列表自定义批量删除` },
+        { label: '其他', subSkillId: 'list-customization', skillId: 'list-customization', freeInput: true },
+      ];
+
+    default:
+      return [];
+  }
+}

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

@@ -0,0 +1,75 @@
+import { Skill, SubSkill } from './skills';
+import { PageInfo } from './AgentContext';
+
+export interface PromptOptions {
+  skill: Skill;
+  subSkill?: SubSkill;
+  pageInfo: PageInfo;
+  userPrompt: string;
+}
+
+/**
+ * Generate a structured prompt for Claude Code
+ */
+export function generatePrompt(options: PromptOptions): string {
+  const { skill, subSkill, pageInfo, userPrompt } = options;
+
+  const parts: string[] = [];
+
+  // 1. Skill invocation
+  parts.push(`/${skill.name}`);
+  parts.push('');
+
+  // 2. Sub-skill specification (if selected)
+  if (subSkill) {
+    parts.push(`## Sub-skill: ${subSkill.name}`);
+    parts.push(subSkill.description);
+    parts.push('');
+  }
+
+  // 3. Context information
+  if (skill.category === 'page' && pageInfo.resourceName) {
+    parts.push('## Context');
+    parts.push(`- Resource: ${pageInfo.resourceName}`);
+    parts.push(`- Page Type: ${pageInfo.pageType}`);
+    parts.push(`- File: web/src/pages/${pageInfo.resourceName}/${getFileName(pageInfo.pageType)}`);
+    parts.push('');
+  }
+
+  // 4. User's request
+  if (userPrompt.trim()) {
+    parts.push('## Request');
+    parts.push(userPrompt.trim());
+    parts.push('');
+  }
+
+  return parts.join('\n');
+}
+
+/**
+ * Get the file name based on page type
+ */
+function getFileName(pageType: string): string {
+  switch (pageType) {
+    case 'list':
+      return 'list.tsx';
+    case 'create':
+      return 'create.tsx';
+    case 'edit':
+      return 'edit.tsx';
+    case 'show':
+      return 'show.tsx';
+    default:
+      return '';
+  }
+}
+
+/**
+ * Generate a preview of the prompt (shorter version)
+ */
+export function generatePromptPreview(options: PromptOptions): string {
+  const { skill, subSkill, userPrompt } = options;
+  const preview = userPrompt.trim().slice(0, 50);
+  const subSkillPart = subSkill ? ` > ${subSkill.name}` : '';
+  return `/${skill.name}${subSkillPart}${preview ? `: ${preview}...` : ''}`;
+}