mcp-probe-kit 2.3.0 → 2.5.0

package/build/tools/genui.js

@@ -1,803 +0,0 @@
-import { parseArgs, getString } from "../utils/parseArgs.js";
-// genui 工具实现
-export async function genui(args) {
-    try {
-        // 智能参数解析，支持自然语言输入
-        const parsedArgs = parseArgs(args, {
-            defaultValues: {
-                description: "",
-                framework: "react",
-            },
-            primaryField: "description", // 纯文本输入默认映射到 description 字段
-            fieldAliases: {
-                description: ["requirement", "spec", "需求", "组件描述"],
-                framework: ["lib", "library", "框架", "前端框架"],
-            },
-        });
-        const description = getString(parsedArgs.description);
-        const framework = getString(parsedArgs.framework) || "react"; // react, vue, html
-        const message = `请生成以下 UI 组件：
-
-📝 **组件描述**：
-${description || "请描述需要的 UI 组件"}
-
-⚛️ **框架**：${framework}
-
----
-
-## UI 组件生成指南
-
-### 第一步：理解需求
-
-**组件类型**：
-- 基础组件（Button, Input, Card）
-- 表单组件（Form, Select, Checkbox）
-- 数据展示（Table, List, Grid）
-- 反馈组件（Modal, Toast, Loading）
-- 导航组件（Menu, Tabs, Breadcrumb）
-- 布局组件（Layout, Container, Flex）
-
-### 第二步：设计原则
-
-**1️⃣ 组件化**
-- 单一职责
-- 可复用
-- 可组合
-
-**2️⃣ 可访问性（A11y）**
-- 语义化 HTML
-- ARIA 属性
-- 键盘导航
-- 屏幕阅读器支持
-
-**3️⃣ 响应式**
-- 移动端优先
-- 断点设计
-- 弹性布局
-
-**4️⃣ 性能**
-- 懒加载
-- 虚拟滚动
-- 防抖节流
-
----
-
-## React 组件示例
-
-### 基础 Button 组件
-\`\`\`tsx
-import React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-const buttonVariants = cva(
-  // 基础样式
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-blue-600 text-white hover:bg-blue-700",
-        destructive: "bg-red-600 text-white hover:bg-red-700",
-        outline: "border border-gray-300 bg-transparent hover:bg-gray-100",
-        ghost: "hover:bg-gray-100",
-        link: "text-blue-600 underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 px-3",
-        lg: "h-11 px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  isLoading?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, isLoading, children, ...props }, ref) => {
-    return (
-      <button
-        className={buttonVariants({ variant, size, className })}
-        ref={ref}
-        disabled={isLoading || props.disabled}
-        {...props}
-      >
-        {isLoading && (
-          <svg
-            className="mr-2 h-4 w-4 animate-spin"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-        )}
-        {children}
-      </button>
-    );
-  }
-);
-
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
-\`\`\`
-
-**使用示例：**
-\`\`\`tsx
-<Button variant="default" size="lg">
-  提交
-</Button>
-
-<Button variant="outline" isLoading>
-  加载中...
-</Button>
-
-<Button variant="ghost" size="icon">
-  <Icon />
-</Button>
-\`\`\`
-
----
-
-### 表单输入组件
-\`\`\`tsx
-import React from 'react';
-import { useController, Control } from 'react-hook-form';
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  error?: string;
-  helperText?: string;
-  control?: Control<any>;
-  name: string;
-}
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ label, error, helperText, className, control, name, ...props }, ref) => {
-    const { field } = useController({
-      name,
-      control,
-      defaultValue: props.defaultValue || '',
-    });
-
-    return (
-      <div className="w-full space-y-2">
-        {label && (
-          <label
-            htmlFor={name}
-            className="text-sm font-medium text-gray-700"
-          >
-            {label}
-            {props.required && <span className="text-red-500 ml-1">*</span>}
-          </label>
-        )}
-        
-        <input
-          {...field}
-          {...props}
-          ref={ref}
-          id={name}
-          aria-invalid={!!error}
-          aria-describedby={error ? \`\${name}-error\` : undefined}
-          className={\`
-            w-full px-3 py-2 border rounded-md
-            focus:outline-none focus:ring-2 focus:ring-blue-500
-            disabled:bg-gray-100 disabled:cursor-not-allowed
-            \${error ? 'border-red-500' : 'border-gray-300'}
-            \${className || ''}
-          \`}
-        />
-        
-        {error && (
-          <p id={\`\${name}-error\`} className="text-sm text-red-600">
-            {error}
-          </p>
-        )}
-        
-        {helperText && !error && (
-          <p className="text-sm text-gray-500">{helperText}</p>
-        )}
-      </div>
-    );
-  }
-);
-
-Input.displayName = 'Input';
-\`\`\`
-
----
-
-### Modal 弹窗组件
-\`\`\`tsx
-import React, { useEffect } from 'react';
-import { createPortal } from 'react-dom';
-
-interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  title?: string;
-  children: React.ReactNode;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-}
-
-export const Modal: React.FC<ModalProps> = ({
-  isOpen,
-  onClose,
-  title,
-  children,
-  size = 'md',
-}) => {
-  // ESC 关闭
-  useEffect(() => {
-    const handleEsc = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    
-    if (isOpen) {
-      document.addEventListener('keydown', handleEsc);
-      document.body.style.overflow = 'hidden';
-    }
-    
-    return () => {
-      document.removeEventListener('keydown', handleEsc);
-      document.body.style.overflow = 'unset';
-    };
-  }, [isOpen, onClose]);
-
-  if (!isOpen) return null;
-
-  const sizeClasses = {
-    sm: 'max-w-md',
-    md: 'max-w-lg',
-    lg: 'max-w-2xl',
-    xl: 'max-w-4xl',
-  };
-
-  return createPortal(
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
-      onClick={onClose}
-    >
-      {/* 背景遮罩 */}
-      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
-      
-      {/* 弹窗内容 */}
-      <div
-        className={\`
-          relative bg-white rounded-lg shadow-xl
-          w-full mx-4 \${sizeClasses[size]}
-          max-h-[90vh] flex flex-col
-          animate-in fade-in slide-in-from-bottom-4
-        \`}
-        onClick={(e) => e.stopPropagation()}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title ? 'modal-title' : undefined}
-      >
-        {/* 头部 */}
-        {title && (
-          <div className="px-6 py-4 border-b">
-            <h2 id="modal-title" className="text-xl font-semibold">
-              {title}
-            </h2>
-          </div>
-        )}
-        
-        {/* 关闭按钮 */}
-        <button
-          onClick={onClose}
-          className="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
-          aria-label="关闭"
-        >
-          <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-        
-        {/* 内容 */}
-        <div className="px-6 py-4 overflow-y-auto flex-1">
-          {children}
-        </div>
-      </div>
-    </div>,
-    document.body
-  );
-};
-\`\`\`
-
----
-
-### Table 数据表格
-\`\`\`tsx
-import React from 'react';
-
-interface Column<T> {
-  key: keyof T | string;
-  title: string;
-  render?: (value: any, record: T, index: number) => React.ReactNode;
-  width?: string;
-  align?: 'left' | 'center' | 'right';
-}
-
-interface TableProps<T> {
-  columns: Column<T>[];
-  data: T[];
-  rowKey: keyof T;
-  loading?: boolean;
-  onRowClick?: (record: T) => void;
-}
-
-export function Table<T extends Record<string, any>>({
-  columns,
-  data,
-  rowKey,
-  loading,
-  onRowClick,
-}: TableProps<T>) {
-  if (loading) {
-    return <div className="text-center py-8">加载中...</div>;
-  }
-
-  if (data.length === 0) {
-    return <div className="text-center py-8 text-gray-500">暂无数据</div>;
-  }
-
-  return (
-    <div className="overflow-x-auto">
-      <table className="min-w-full divide-y divide-gray-200">
-        <thead className="bg-gray-50">
-          <tr>
-            {columns.map((col, index) => (
-              <th
-                key={String(col.key) || index}
-                style={{ width: col.width }}
-                className={\`
-                  px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider
-                  text-\${col.align || 'left'}
-                \`}
-              >
-                {col.title}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody className="bg-white divide-y divide-gray-200">
-          {data.map((record, rowIndex) => (
-            <tr
-              key={String(record[rowKey])}
-              onClick={() => onRowClick?.(record)}
-              className={onRowClick ? 'cursor-pointer hover:bg-gray-50' : ''}
-            >
-              {columns.map((col, colIndex) => {
-                const value = col.key in record ? record[col.key as keyof T] : undefined;
-                return (
-                  <td
-                    key={colIndex}
-                    className={\`px-6 py-4 whitespace-nowrap text-sm text-\${col.align || 'left'}\`}
-                  >
-                    {col.render ? col.render(value, record, rowIndex) : String(value)}
-                  </td>
-                );
-              })}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-\`\`\`
-
----
-
-## Tailwind CSS 配置
-
-\`\`\`js
-// tailwind.config.js
-module.exports = {
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      keyframes: {
-        'fade-in': {
-          from: { opacity: 0 },
-          to: { opacity: 1 },
-        },
-        'slide-in-from-bottom': {
-          from: { transform: 'translateY(1rem)' },
-          to: { transform: 'translateY(0)' },
-        },
-      },
-      animation: {
-        'fade-in': 'fade-in 0.2s ease-out',
-        'slide-in-from-bottom-4': 'slide-in-from-bottom 0.3s ease-out',
-      },
-    },
-  },
-  plugins: [],
-};
-\`\`\`
-
----
-
-## Vue 3 组件示例
-
-### 基础 Button 组件 (Vue 3 + TypeScript)
-\`\`\`vue
-<template>
-  <button
-    :class="buttonClasses"
-    :disabled="isLoading || disabled"
-    v-bind="$attrs"
-  >
-    <svg
-      v-if="isLoading"
-      class="mr-2 h-4 w-4 animate-spin"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        class="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
-      />
-      <path
-        class="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-    <slot />
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-interface Props {
-  variant?: 'default' | 'destructive' | 'outline' | 'ghost' | 'link';
-  size?: 'default' | 'sm' | 'lg' | 'icon';
-  isLoading?: boolean;
-  disabled?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'default',
-  size: 'default',
-  isLoading: false,
-  disabled: false,
-});
-
-const buttonClasses = computed(() => {
-  const base = 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
-  
-  const variants = {
-    default: 'bg-blue-600 text-white hover:bg-blue-700',
-    destructive: 'bg-red-600 text-white hover:bg-red-700',
-    outline: 'border border-gray-300 bg-transparent hover:bg-gray-100',
-    ghost: 'hover:bg-gray-100',
-    link: 'text-blue-600 underline-offset-4 hover:underline',
-  };
-  
-  const sizes = {
-    default: 'h-10 px-4 py-2',
-    sm: 'h-9 px-3',
-    lg: 'h-11 px-8',
-    icon: 'h-10 w-10',
-  };
-  
-  return \`\${base} \${variants[props.variant]} \${sizes[props.size]}\`;
-});
-</script>
-\`\`\`
-
-**使用示例：**
-\`\`\`vue
-<template>
-  <div>
-    <Button variant="default" size="lg">提交</Button>
-    <Button variant="outline" :is-loading="true">加载中...</Button>
-    <Button variant="ghost" size="icon">
-      <Icon />
-    </Button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/Button.vue';
-</script>
-\`\`\`
-
----
-
-### Vue 3 Input 组件
-\`\`\`vue
-<template>
-  <div class="w-full space-y-2">
-    <label
-      v-if="label"
-      :for="inputId"
-      class="text-sm font-medium text-gray-700"
-    >
-      {{ label }}
-      <span v-if="required" class="text-red-500 ml-1">*</span>
-    </label>
-    
-    <input
-      :id="inputId"
-      v-model="model"
-      :type="type"
-      :placeholder="placeholder"
-      :required="required"
-      :disabled="disabled"
-      :aria-invalid="!!error"
-      :aria-describedby="error ? \`\${inputId}-error\` : undefined"
-      :class="inputClasses"
-      v-bind="$attrs"
-    />
-    
-    <p v-if="error" :id="\`\${inputId}-error\`" class="text-sm text-red-600">
-      {{ error }}
-    </p>
-    
-    <p v-else-if="helperText" class="text-sm text-gray-500">
-      {{ helperText }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useAttrs } from 'vue';
-
-interface Props {
-  modelValue?: string | number;
-  label?: string;
-  type?: string;
-  placeholder?: string;
-  error?: string;
-  helperText?: string;
-  required?: boolean;
-  disabled?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'text',
-  required: false,
-  disabled: false,
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number];
-}>();
-
-const attrs = useAttrs();
-const inputId = computed(() => attrs.id as string || \`input-\${Math.random().toString(36).slice(2)}\`);
-
-const model = computed({
-  get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value),
-});
-
-const inputClasses = computed(() => {
-  return \`
-    w-full px-3 py-2 border rounded-md
-    focus:outline-none focus:ring-2 focus:ring-blue-500
-    disabled:bg-gray-100 disabled:cursor-not-allowed
-    \${props.error ? 'border-red-500' : 'border-gray-300'}
-  \`;
-});
-</script>
-\`\`\`
-
----
-
-### Vue 3 Modal 组件
-\`\`\`vue
-<template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div
-        v-if="modelValue"
-        class="fixed inset-0 z-50 flex items-center justify-center"
-        @click="handleClose"
-      >
-        <!-- 背景遮罩 -->
-        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" />
-        
-        <!-- 弹窗内容 -->
-        <div
-          :class="modalClasses"
-          @click.stop
-          role="dialog"
-          aria-modal="true"
-          :aria-labelledby="title ? 'modal-title' : undefined"
-        >
-          <!-- 头部 -->
-          <div v-if="title" class="px-6 py-4 border-b">
-            <h2 id="modal-title" class="text-xl font-semibold">
-              {{ title }}
-            </h2>
-          </div>
-          
-          <!-- 关闭按钮 -->
-          <button
-            @click="handleClose"
-            class="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
-            aria-label="关闭"
-          >
-            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-          
-          <!-- 内容 -->
-          <div class="px-6 py-4 overflow-y-auto flex-1">
-            <slot />
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { computed, watch } from 'vue';
-import { onKeyStroke } from '@vueuse/core';
-
-interface Props {
-  modelValue: boolean;
-  title?: string;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'md',
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean];
-}>();
-
-const handleClose = () => {
-  emit('update:modelValue', false);
-};
-
-// ESC 关闭
-onKeyStroke('Escape', () => {
-  if (props.modelValue) {
-    handleClose();
-  }
-});
-
-// 锁定 body 滚动
-watch(() => props.modelValue, (isOpen) => {
-  document.body.style.overflow = isOpen ? 'hidden' : '';
-});
-
-const modalClasses = computed(() => {
-  const sizeClasses = {
-    sm: 'max-w-md',
-    md: 'max-w-lg',
-    lg: 'max-w-2xl',
-    xl: 'max-w-4xl',
-  };
-  
-  return \`
-    relative bg-white rounded-lg shadow-xl
-    w-full mx-4 \${sizeClasses[props.size]}
-    max-h-[90vh] flex flex-col
-  \`;
-});
-</script>
-
-<style scoped>
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-</style>
-\`\`\`
-
----
-
-## 组件库推荐
-
-### 🎨 React UI 组件库
-- **shadcn/ui** - 可定制的 React 组件
-- **Radix UI** - 无样式的可访问组件
-- **Headless UI** - Tailwind 官方无样式组件
-- **Ant Design** - 企业级 UI 设计语言
-- **Material-UI** - Google Material Design
-
-### 🎨 Vue UI 组件库
-- **Element Plus** - 基于 Vue 3 的企业级组件库
-- **Naive UI** - 完整的 TypeScript 支持
-- **Ant Design Vue** - Vue 版本的 Ant Design
-- **Vuetify** - Material Design 组件框架
-- **PrimeVue** - 丰富的 UI 组件集合
-
-### 🎭 动画库
-- **Framer Motion** - React 动画库
-- **React Spring** - 基于物理的动画
-- **GSAP** - 高性能动画引擎（React/Vue 通用）
-- **@vueuse/motion** - Vue 3 组合式动画
-
-### 📱 响应式工具
-- **Tailwind CSS** - 实用优先的 CSS 框架
-- **UnoCSS** - 即时原子化 CSS 引擎
-- **CSS Modules** - 局部作用域 CSS
-
----
-
----
-
-## ⚠️ 边界约束
-
-- ❌ 仅输出组件代码，不自动创建文件
-- ❌ 不执行代码或命令
-- ✅ 默认跟随项目现有前端栈与组件风格
-- ✅ 输出完整可用的组件代码
-
-现在请根据需求生成完整的 UI 组件代码，包括：
-1. 组件实现（TypeScript）
-2. 样式（Tailwind CSS）
-3. 使用示例
-4. Props 接口定义
-5. 可访问性说明
-
-**根据框架选择：**
-- **React**: 使用 Hooks、forwardRef、TypeScript
-- **Vue 3**: 使用 Composition API、script setup、TypeScript
-- **HTML**: 使用原生 JavaScript 和 Web Components`;
-        return {
-            content: [
-                {
-                    type: "text",
-                    text: message,
-                },
-            ],
-        };
-    }
-    catch (error) {
-        const errorMessage = error instanceof Error ? error.message : String(error);
-        return {
-            content: [
-                {
-                    type: "text",
-                    text: `❌ 生成 UI 组件失败: ${errorMessage}`,
-                },
-            ],
-            isError: true,
-        };
-    }
-}