Fusion Snippets 模板文档

快速生成 React + Ant Design Pro 组件模板集合

简介

本扩展插件提供了一些常用的 React + Ant Design ProTable的代码片段（Snippets），适用于快速构建带搜索/无搜索功能的表格页面。所有 snippet 均可在 VS Code 中通过指定的 prefix 快速插入。

安装要求

• 请确保 antd 的版本 >= 4.11.1
• 请确保 ProComponents 的版本 >= 2.6.36 否则有useDeepCompareMemo导致renderFormItem不更新的问题

npm i @ant-design/pro-components --save

使用方式

• 安装[HM CodeTemp]
• 右键创建页面 需要创建页面的目录下右键选择从模板创建页面 选择自己需要的模板页面，填写页面名称，回车确认会自动创建页面文件
• VS Code Snippet 插入 输入 proTable ➡️ 插入 with-search 或 no-search 模板（取决于当前配置）

模板列表

• pro-table-template（带搜索）
• pro-table-template-no-search（无搜索）
• pro-table-template-add-edit（新增编辑）

文件夹模板结构说明

✅ pro-table-template（带搜索条件的 ProTable 页面）

📁 your-component-name/
├── index.tsx                  # 页面组件
├── use-your-component-name.ts   # 数据请求 Hook
└── my-select/
    ├── index.tsx              # 自定义下拉组件
    └── use-select.ts          # 选择器 Hook

✅ pro-table-template-no-search（无搜索条件的 ProTable 页面）

📁 your-component-name/
├── index.tsx                  # 页面组件
└── use-your-component-name.ts # 数据请求 Hook

✅ pro-table-template-add-edit（支持新增与编辑操作的 ProTable 页面）

📁 your-component-name/
├── index.tsx                  # 页面组件
├── use-your-component-name.ts # 数据请求 Hook
├── my-select/
│   ├── index.tsx              # 自定义下拉组件
│   └── use-select.ts          # 选择器 Hook
└── create-with-update/
    ├── index.tsx              # DrawerForm 表单组件
    └── use-create-with-update.ts # 表单逻辑 Hook

Snippets

📦 当前支持的 Snippet 列表

| 名称| 触发前缀（Prefix） | 描述 | |pro-table: with-search| proTable | 生成一个包含完整搜索条件的 ProTable 页面模板，支持筛选、排序、时间范围等交互操作 | |pro-table: no-search| proTableNoSearch | 生成一个不包含搜索区域的 ProTable 页面模板，仅展示基础数据列表 | |use-hooks: basic| useHooks | 生成基础 Hooks 模板，包含初始化逻辑 | |use-hooks: basic| useHooks | 生成基础 Hooks 模板，包含初始化逻辑 |

📄 Snippet 详情说明

1. pro-table: with-search

• 用途：用于创建带有搜索条件的 ProTable 页面
• 适用场景：适用于需要复杂筛选、分页、动态查询等功能的数据管理页面
• 特性：
  • 支持多字段搜索（状态、标签、日期区间）
  • 支持多选标签与自定义格式下拉
  • 表头固定、滚动支持
  • 自定义日期格式化、刷新与下载按钮
• 示例组件结构：

``tsx import React, { useState, useEffect } from 'react'; import { ProTable } from '@ant-design/pro-components';

export const ${1:TemplateName} = () => { // columns 定义及 return };

export default ${1:TemplateName};

### 2. pro-table: no-search
* 用途：用于创建仅展示数据的 ProTable 页面
* 适用场景：适用于无需复杂筛选逻辑的只读数据展示页面
* 特性：
    - 简洁的列展示
    - 支持基本的分页与导出功能
    - 无搜索栏与过滤逻辑

``tsx
import React from 'react';
import { ProTable } from '@ant-design/pro-components';

export const ${1:TemplateName} = () => {
  // columns 定义及 return <ProTable />
};

export default ${1:TemplateName};

Settings

开始使用

在资源管理器中使用右键菜单创建 :

在文件中使用代码片段 :

🙌 贡献与反馈

欢迎提交 PR 或 issue 来扩展模板内容或优化现有 snippet！

如需我为你生成完整的 Markdown 文档文件或 .vscode/snippets 配置文件，请告诉我，我可以为你打包输出。