mcp-probe-kit 1.0.0

package/build/tools/genui.js

@@ -0,0 +1,781 @@
+// genui 工具实现
+export async function genui(args) {
+    try {
+        const description = args?.description || "";
+        const framework = args?.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,
+        };
+    }
+}