MCP Probe Kit

Instructions

Implementation Reference

• src/tools/split.ts:2-579 (handler)

  The main execution function for the 'split' tool. It constructs a detailed prompt message including file content, strategy, and guidelines for splitting large files into smaller modules, components, etc., and returns it as MCP content.
  export async function split(args: any) { try { const file = args?.file || ""; const strategy = args?.strategy || "auto"; // auto, type, function, component, feature const message = `请拆分以下文件： 📝 **文件内容**： ${file || "请提供需要拆分的文件内容或路径"} 🎯 **拆分策略**：${strategy} --- ## 文件拆分指南 ### 拆分策略 #### 1️⃣ 按类型拆分（type） 适用于工具类、常量、类型定义混在一起的文件。 **示例场景**： \`\`\`typescript // ❌ utils.ts (500 行) export const API_URL = 'https://api.example.com'; export const MAX_RETRY = 3; export interface User { id: string; name: string; } export function formatDate(date: Date): string { } export function validateEmail(email: string): boolean { } \`\`\` **拆分后**： \`\`\` src/ ├── constants/ │ └── api.ts # API_URL, MAX_RETRY ├── types/ │ └── user.ts # User interface └── utils/ ├── date.ts # formatDate └── validation.ts # validateEmail \`\`\` --- #### 2️⃣ 按功能拆分（function） 适用于一个文件包含多个独立函数。 **示例场景**： \`\`\`typescript // ❌ helpers.ts (800 行) export function userHelpers() { } export function orderHelpers() { } export function paymentHelpers() { } \`\`\` **拆分后**： \`\`\` src/helpers/ ├── user.ts # 用户相关 ├── order.ts # 订单相关 └── payment.ts # 支付相关 \`\`\` --- #### 3️⃣ 按组件拆分（component） 适用于 React/Vue 组件过大，需要拆分为子组件。 **示例场景**： \`\`\`tsx // ❌ UserProfile.tsx (600 行) export function UserProfile() { return ( <div> {/* Header 100 行 */} {/* Sidebar 150 行 */} {/* Content 200 行 */} {/* Footer 150 行 */} </div> ); } \`\`\` **拆分后**： \`\`\` src/components/UserProfile/ ├── index.tsx # 主组件（组装） ├── UserProfileHeader.tsx ├── UserProfileSidebar.tsx ├── UserProfileContent.tsx ├── UserProfileFooter.tsx └── styles.module.css \`\`\` --- #### 4️⃣ 按功能模块拆分（feature） 适用于功能模块混在一起的大文件。 **示例场景**： \`\`\`typescript // ❌ store.ts (1000 行) // 用户模块 state, actions, reducers // 订单模块 state, actions, reducers // 购物车模块 state, actions, reducers \`\`\` **拆分后**： \`\`\` src/store/ ├── index.ts # 组装所有模块 ├── user/ │ ├── state.ts │ ├── actions.ts │ └── reducers.ts ├── order/ │ ├── state.ts │ ├── actions.ts │ └── reducers.ts └── cart/ ├── state.ts ├── actions.ts └── reducers.ts \`\`\` --- #### 5️⃣ 自动分析拆分（auto） AI 分析代码结构，自动选择最佳拆分策略。 --- ## 拆分原则 ### ✅ 应该拆分的信号 1. **文件行数过多** - 超过 300 行：考虑拆分 - 超过 500 行：强烈建议拆分 - 超过 1000 行：必须拆分 2. **职责过多** - 处理多个不相关的业务逻辑 - 混合了类型定义、工具函数、组件 3. **难以维护** - 滚动半天找不到函数 - 修改一个功能影响其他功能 - Git 冲突频繁 4. **复用性差** - 只能整体导入，无法按需导入 - 想复用某个函数，必须导入整个文件 ### ⚠️ 不应该过度拆分 1. **避免碎片化** - 不要拆成几十个只有几行的文件 - 保持相关代码的内聚性 2. **避免循环依赖** - 拆分后注意依赖关系 - 使用依赖注入或中间层解耦 --- ## 拆分实战示例 ### 示例 1：大型 React 组件拆分 **原始文件（UserDashboard.tsx - 800 行）**： \`\`\`tsx import React, { useState, useEffect } from 'react'; import './styles.css'; export function UserDashboard() { const [user, setUser] = useState(null); const [orders, setOrders] = useState([]); const [stats, setStats] = useState({}); // 150 行：用户信息相关逻辑 useEffect(() => { /* 获取用户信息 */ }, []); const updateUserProfile = () => { /* 更新用户 */ }; // 200 行：订单相关逻辑 useEffect(() => { /* 获取订单 */ }, []); const filterOrders = () => { /* 过滤订单 */ }; // 150 行：统计相关逻辑 useEffect(() => { /* 获取统计 */ }, []); const calculateStats = () => { /* 计算统计 */ }; // 300 行：渲染逻辑 return ( <div className="dashboard"> {/* Header */} <div className="header"> {/* 50 行 */} </div> {/* Sidebar */} <div className="sidebar"> {/* 100 行 */} </div> {/* Main Content */} <div className="main"> {/* User Info Section - 80 行 */} <div className="user-info"> <h2>{user?.name}</h2> {/* ... */} </div> {/* Orders Section - 100 行 */} <div className="orders"> <h3>我的订单</h3> {/* ... */} </div> {/* Stats Section - 70 行 */} <div className="stats"> <h3>统计数据</h3> {/* ... */} </div> </div> </div> ); } \`\`\` **拆分方案**： **1. 拆分自定义 Hooks** \`\`\`typescript // hooks/useUser.ts export function useUser() { const [user, setUser] = useState(null); useEffect(() => { // 获取用户信息 }, []); const updateUserProfile = () => { // 更新用户 }; return { user, updateUserProfile }; } // hooks/useOrders.ts export function useOrders() { const [orders, setOrders] = useState([]); useEffect(() => { // 获取订单 }, []); const filterOrders = () => { // 过滤订单 }; return { orders, filterOrders }; } // hooks/useStats.ts export function useStats() { const [stats, setStats] = useState({}); useEffect(() => { // 获取统计 }, []); const calculateStats = () => { // 计算统计 }; return { stats, calculateStats }; } \`\`\` **2. 拆分子组件** \`\`\`tsx // components/DashboardHeader.tsx export function DashboardHeader({ user }) { return ( <div className="header"> {/* 50 行 */} </div> ); } // components/DashboardSidebar.tsx export function DashboardSidebar() { return ( <div className="sidebar"> {/* 100 行 */} </div> ); } // components/UserInfoSection.tsx export function UserInfoSection({ user, onUpdate }) { return ( <div className="user-info"> <h2>{user?.name}</h2> {/* 80 行 */} </div> ); } // components/OrdersSection.tsx export function OrdersSection({ orders, onFilter }) { return ( <div className="orders"> <h3>我的订单</h3> {/* 100 行 */} </div> ); } // components/StatsSection.tsx export function StatsSection({ stats }) { return ( <div className="stats"> <h3>统计数据</h3> {/* 70 行 */} </div> ); } \`\`\` **3. 重构主组件（只有 50 行）** \`\`\`tsx // components/UserDashboard/index.tsx import React from 'react'; import { useUser } from './hooks/useUser'; import { useOrders } from './hooks/useOrders'; import { useStats } from './hooks/useStats'; import { DashboardHeader } from './DashboardHeader'; import { DashboardSidebar } from './DashboardSidebar'; import { UserInfoSection } from './UserInfoSection'; import { OrdersSection } from './OrdersSection'; import { StatsSection } from './StatsSection'; import './styles.css'; export function UserDashboard() { const { user, updateUserProfile } = useUser(); const { orders, filterOrders } = useOrders(); const { stats } = useStats(); return ( <div className="dashboard"> <DashboardHeader user={user} /> <DashboardSidebar /> <div className="main"> <UserInfoSection user={user} onUpdate={updateUserProfile} /> <OrdersSection orders={orders} onFilter={filterOrders} /> <StatsSection stats={stats} /> </div> </div> ); } \`\`\` **最终目录结构**： \`\`\` src/components/UserDashboard/ ├── index.tsx # 主组件 (50 行) ├── DashboardHeader.tsx # 子组件 (50 行) ├── DashboardSidebar.tsx # 子组件 (100 行) ├── UserInfoSection.tsx # 子组件 (80 行) ├── OrdersSection.tsx # 子组件 (100 行) ├── StatsSection.tsx # 子组件 (70 行) ├── hooks/ │ ├── useUser.ts # Hook (60 行) │ ├── useOrders.ts # Hook (80 行) │ └── useStats.ts # Hook (60 行) └── styles.css \`\`\` **优势**： - ✅ 每个文件职责单一，易于理解 - ✅ 组件可独立测试 - ✅ 逻辑可复用（Hooks） - ✅ 多人协作减少冲突 - ✅ 按需导入，优化打包体积 --- ### 示例 2：工具函数文件拆分 **原始文件（utils.ts - 600 行）**： \`\`\`typescript // 字符串工具 (150 行) export function capitalize(str: string): string { } export function truncate(str: string, length: number): string { } export function slugify(str: string): string { } // 日期工具 (150 行) export function formatDate(date: Date): string { } export function parseDate(str: string): Date { } export function addDays(date: Date, days: number): Date { } // 数组工具 (100 行) export function unique<T>(arr: T[]): T[] { } export function groupBy<T>(arr: T[], key: keyof T): Record<string, T[]> { } // 验证工具 (100 行) export function isEmail(str: string): boolean { } export function isURL(str: string): boolean { } // 数学工具 (100 行) export function round(num: number, decimals: number): number { } export function clamp(num: number, min: number, max: number): number { } \`\`\` **拆分后**： \`\`\` src/utils/ ├── index.ts # 统一导出 ├── string.ts # 字符串工具 ├── date.ts # 日期工具 ├── array.ts # 数组工具 ├── validation.ts # 验证工具 └── math.ts # 数学工具 \`\`\` \`\`\`typescript // utils/index.ts (统一导出) export * from './string'; export * from './date'; export * from './array'; export * from './validation'; export * from './math'; // 使用方式不变 import { capitalize, formatDate, unique } from '@/utils'; \`\`\` --- ### 示例 3：Vue 组件拆分 **原始文件（ProductList.vue - 700 行）**： \`\`\`vue <template> <div class="product-list"> <!-- Filter Section - 150 行 --> <div class="filters"> <!-- 过滤器 UI --> </div> <!-- Product Grid - 300 行 --> <div class="products"> <!-- 产品列表 --> </div> <!-- Pagination - 100 行 --> <div class="pagination"> <!-- 分页 --> </div> </div> </template> <script setup lang="ts"> // 250 行逻辑 const products = ref([]); const filters = ref({}); // ... </script> <style scoped> /* 100 行样式 */ </style> \`\`\` **拆分后**： \`\`\` src/components/ProductList/ ├── ProductList.vue # 主组件 (100 行) ├── ProductFilters.vue # 过滤器组件 (150 行) ├── ProductGrid.vue # 产品网格 (200 行) ├── ProductCard.vue # 产品卡片 (100 行) ├── ProductPagination.vue # 分页组件 (100 行) ├── composables/ │ ├── useProducts.ts # 产品数据逻辑 │ └── useFilters.ts # 过滤逻辑 └── styles.module.css \`\`\` --- ## 拆分步骤 ### Step 1: 分析依赖关系 \`\`\`bash # 使用工具分析依赖 npx madge --circular src/ # 或手动绘制依赖图 \`\`\` ### Step 2: 识别独立模块 - 找出职责单一的代码块 - 识别可复用的逻辑 - 标记高内聚低耦合的部分 ### Step 3: 制定拆分计划 - 确定目录结构 - 规划文件命名 - 设计导出策略 ### Step 4: 逐步拆分 - 从最独立的模块开始 - 先拆分，后重构 - 每次拆分后运行测试 ### Step 5: 更新导入 - 批量替换 import 路径 - 使用 IDE 的重构功能 - 验证所有引用 ### Step 6: 清理优化 - 删除未使用的导出 - 优化重复代码 - 添加文档注释 --- ## 拆分工具推荐 ### VS Code 扩展 - **Move TS** - 自动更新 import - **JavaScript Refactor** - 快速提取函数/组件 - **Path Intellisense** - 路径自动补全 ### CLI 工具 - **madge** - 依赖分析 - **jscodeshift** - 代码自动化重构 - **ts-morph** - TypeScript AST 操作 --- 现在请分析文件并提供详细的拆分方案，包括： 1. 拆分策略分析 2. 建议的目录结构 3. 每个新文件的内容 4. 导入导出关系 5. 迁移步骤`; return { content: [ { type: "text", text: message, }, ], }; } catch (error) { const errorMessage = error instanceof Error ? error.message : String(error); return { content: [ { type: "text", text: `❌ 文件拆分失败: ${errorMessage}`, }, ], isError: true, }; } }
• src/index.ts:409-426 (schema)

  Input schema definition for the 'split' tool, specifying parameters 'file' and 'strategy'.
  { name: "split", description: "【文件拆分】将大文件拆分成多个小文件或小组件", inputSchema: { type: "object", properties: { file: { type: "string", description: "文件内容或路径", }, strategy: { type: "string", description: "拆分策略：auto, type, function, component, feature（默认 auto）", }, }, required: [], }, },
• src/index.ts:522-524 (registration)

  Dispatch registration in the main switch statement for handling 'split' tool calls.
  case "split": return await split(args);
• src/tools/index.ts:22-22 (registration)

  Re-export of the split function from src/tools/index.ts, imported into main index.
  export { split } from "./split.js";