qk-snippets

qk-snippets 是一个用于快速匹配、生成和插入常用代码段的工具，旨在提高开发效率，帮助快速实现常见功能。

安装

打开扩展视图 (Ctrl+Shift+X)。
搜索 qk-snippets。
点击 Install 安装扩展。

使用

1.生成模块级代码

命令控制台中（Ctrl+Shift+P）中输入如下的命令，并执行。

命令	说明	适用场景
`qk.insertTemplate`	直接复制模板目录到目标路径	已确定模板，只想快速落文件
`qk.pageBuilder`	打开完整页面构建器	从 0 到 1 配置模块
`qk.quickGenerate`	从选中内容或粘贴内容快速生成	已经整理好字段定义
`qk.frontendSkills`	打开前端 Skill 指南	先判断应该走哪种模板

2.插入代码片段

操作流程：

打开js、jsx文件，光标定位在想要插入的位置行
输入命令前缀 qk.。
继续输入关键词，匹配组件或方法，例如：qk.SuperTable。
按 Enter 选择并插入匹配的代码片段。

📋 【代码片段】指令速查表

CRUD 接口操作

指令	说明
`qk.post.crud`	Post 请求
`qk.get.curd`	Get 请求
`qk.delete.curd`	Delete 请求
`qk.download.curd`	下载文件流

Helper 工具集

指令	说明
`qk.TrueOrNot.helper`	布尔类型是否选项
`qk.YesOrNot.helper`	字符类型是否选项 (Y/N)
`qk.ZeroOrOne.helper`	数字类型是否选项 (0/1)
`qk.Func.helper`	执行 Service Api 回调函数
`qk.DecimalCalc.helper`	数值精度计算
`qk.InlineLoading.helper`	列表行内 loading 效果
`qk.ActionHandler.helper`	操作函数引用

基础组件

指令	说明
`qk.Card.comp`	卡片组件
`qk.Tabs.comp`	标签页组件
`qk.MegaRadios.comp`	卡片样式单选
`qk.SuperButton.comp`	按钮
`qk.SuperButton.Submit.comp`	提交loading按钮
`qk.SuperButton.Export.comp`	导出loading按钮
`qk.CategoryCardView.comp`	品类卡片
`qk.ProductModeCardView.comp`	产品机型卡片
`qk.StickyBox.comp`	粘性盒子
`qk.OperateTooltipIcon.comp`	Icon类按钮

表格组件

指令	说明
`qk.SuperTable.comp`	基础表格
`qk.SortableTable.comp`	可排序表格
`qk.PagingSuperTable.comp`	带分页表格
`qk.ExpandableTreeTable.comp`	树形表格（表头一致）
`qk.InlineTable.comp`	内联表格（表头不一致）

导入导出

指令	说明
`qk.ExportAndImport.comp`	导入导出组件

表格列定义

指令	说明
`qk.String.cell`	文本列
`qk.Number.cell`	数字列
`qk.Currency.cell`	币种/金额列
`qk.Tag.cell`	标签列
`qk.Group.cell`	分组展示列
`qk.Link.cell`	链接列
`qk.Tooltip.cell`	提示列
`qk.DateTime.cell`	日期时间列
`qk.FileName.cell`	文件名列
`qk.FileSize.cell`	文件大小列
`qk.Doc.cell`	文档/附件列
`qk.TextEllipsis.cell`	超长文本省略列
`qk.Status.cell`	状态列（标签样式）
`qk.DotStatus.cell`	状态列（点状样式）
`qk.YnStatus.cell`	是否状态列
`qk.ProcessSteps.cell`	流程步骤列
`qk.Table.cell`	内置表格
`qk.Switch.cell`	开关切换列
`qk.ColumnTitle.cell`	列标题（带 tooltip）
`qk.Action.cell`	操作列
`qk.ActionInner.cell`	操作列内容（新版本）
`qk.ActionOldInner.cell`	操作列内容（老版本）

表格列内置预定义指令	说明
`qk.Purchaser.cell`	业务方(全称)
`qk.Purchaser.Short.cell`	业务方（简称）
`qk.Supplier.cell`	供应商
`qk.Supplier.Short.cell`	供应商（简称）
`qk.Material.cell`	物料信息

Hooks 方法

指令	说明
`qk.UseSuperModal.hooks`	表单模式 Modal
`qk.useSuperModalTable.hooks`	表格模式 Modal
`qk.UseTableFilter.hooks`	表格过滤

Hooks 字段类型

指令	说明
`qk.Input.hooks.field`	文本输入框
`qk.Number.hooks.field`	数字输入框
`qk.Select.hooks.field`	下拉选择
`qk.Switch.hooks.field`	开关切换
`qk.Radio.hooks.field`	单选框
`qk.Tree.hooks.field`	树形选择（横向）
`qk.TreeSelect.hooks.field`	树形选择（纵向）
`qk.Date.hooks.field`	日期选择
`qk.Month.hooks.field`	月份选择
`qk.Year.hooks.field`	年份选择
`qk.RangeDate.hooks.field`	范围日期选择
`qk.AsyncSelect.hooks.field`	异步下拉选择
`qk.Attachments.hooks.field`	附件上传
`qk.Textarea.hooks.field`	文本域

Hooks 内置字段

指令	说明
`qk.Purchaser.hooks.field`	业务方字段
`qk.Supplier.hooks.field`	供应商字段
`qk.User.hooks.field`	用户/创建人字段
`qk.CategoryTree.hooks.field`	品类树字段
`qk.OrgTree.hooks.field`	组织树字段

代码段

指令	说明
`qk.SplitLine.code`	分割线
`qk.DotSpan.code`	点状标记
`qk.ImportButton.code`	导入按钮
`qk.ExportButton.code`	导出按钮
`qk.ImportExportButton.code`	导入导出按钮组
`qk.FieldsModal.code`	表单弹窗代码
`qk.FieldsModalWithTabs.code`	带标签页的表单代码

表单

指令	说明
`qk.FormExample.form`	完整表单示例

注意：

所有指令的模糊匹配功能可以帮助你快速找到相关的代码片段。只需输入前缀即可列出所有匹配项，进一步节省时间。
每个指令都可以通过键入完整名称或模糊匹配进行插入，提升开发效率。

🚀 qk.page-builder 页面构建工具

qk.page-builder 是 qk-snippets 的扩展功能，提供可视化的页面构建界面，帮助你快速生成标准化的 Page 和 Redux 代码模板。

功能特性

🧩 三种模板模式：支持 simple-page、normal、tabs
📊 字段批量导入：支持 JSON、CSV、表头 CSV、Excel/WPS 粘贴、Markdown 表格
🔗 自动关联 Snippets：字段自动匹配对应的 qk.snippets 代码段
📁 一键生成：生成完整的 Page + Redux 文件结构
👁️ 代码预览：生成前可预览代码内容
↕️ 拖拽排序：查询条件字段、表格字段、表单字段都支持拖拽调整顺序
📚 前端 Skill 指南：内置模板选型和对应 skill 说明

使用方式

方式一：打开页面构建工具 `qk.pageBuilder`

使用快捷键 Ctrl + Shift + P 打开命令面板
输入 qk.pageBuilder 或 Open Page Builder
先选择模板类型：simple-page、normal 或 tabs
进入页面构建工具，按步骤完成基础信息、字段配置和代码生成

方式二：从选中内容快速生成 `qk.quickGenerate`

在文件中选中字段定义（支持 JSON、CSV、表格粘贴等格式）
使用快捷键 Ctrl + Shift + P 打开命令面板
输入 qk.quickGenerate 或 Quick Generate Page from Selection

如果当前没有选中文本，也可以直接执行 qk.quickGenerate，插件会打开一个粘贴面板，支持直接粘贴字段定义并选择模板类型。

方式三：打开前端 Skill 指南 `qk.frontendSkills`

使用快捷键 Ctrl + Shift + P 打开命令面板
输入 qk.frontendSkills 或 Open Frontend Skills Guide
查看 simple-page、normal、tabs 三种模板对应的 skill 与触发示例

另外，在模板选择器和 qk.page-builder 页面头部也增加了“前端 Skills”入口，可以边选模板边查看对应 skill。

模板模式说明

`simple-page`

适用于轻量单页列表场景
通常只有列表页，不包含独立 detail / edit 路由
适合快速起一个简单查询展示页面

`normal`

适用于标准后台 CRUD 单列表页面
支持查询、列表、详情、编辑、新建、导入导出等常见能力
如果你不确定选什么，默认优先从 normal 开始

`tabs`

适用于双列表、主子表、分标签页管理的复杂场景
基础功能包含normal的所有特性

page-builder 步骤说明

第一步：基础信息

主要配置：

模块路径 ModulePath
路由地址 RoutePrefix
菜单名称 RouteMenu
菜单编码 RouteKey
状态管理 Key StateKey
页面标题、详情标题、列表描述
tabs 模板下的主次列表标题和 Key

说明：

RouteKey 和 StateKey 支持根据已填内容自动推导
tabs 模板下，MainListTitle / SubListTitle / MainListKey / SubListKey 属于基础信息的一部分
MainListKey / SubListKey 需要是合法变量名，例如 mainList、subList

第二步：字段配置

支持三类字段配置：

查询条件字段：使用 qk.xxx.hooks.field
表格字段：使用 qk.xxx.cell
表单字段：使用 qk.xxx.form.field

支持能力：

从字段池选择字段
批量导入字段到字段池
拖拽调整查询条件、表格字段、表单字段顺序
修改表格列类型、表单字段类型、查询条件类型
表单字段支持配置必填

第三步：生成与保存

生成代码预览
查看生成的文件结构
选择目标目录保存文件
ui-helpers.tsx 中的模板变量会按当前表单内容自动替换

字段定义格式

JSON 格式

[
  { "code": "supplierName", "label": "供应商名称", "type": "input", "required": true },
  { "code": "status", "label": "状态", "type": "select", "options": [] },
  { "code": "createdDate", "label": "创建日期", "type": "date" },
  { "code": "isActive", "label": "是否启用", "type": "switch" }
]

CSV 格式

code,label,type,required
supplierName,供应商名称,input,true
status,状态,select,false
createdDate,创建日期,date,false
isActive,是否启用,switch,false

表头 CSV / Excel / WPS 粘贴

字段编码,字段名称,类型,是否必填
supplierName,供应商名称,input,true
status,状态,select,false
createdDate,创建日期,date,false

Markdown 表格

| 字段编码 | 字段名称 | 类型 | 是否必填 |
| --- | --- | --- | --- |
| supplierName | 供应商名称 | input | true |
| status | 状态 | select | false |

支持的宽松格式

以下内容也支持识别：

外层带说明文字的 JSON 数组
Excel / WPS 直接复制出来的制表符内容
只要能识别出“字段编码 / 字段名称 / 类型 / 是否必填”表头的表格内容

字段类型映射

字段类型	对应 Snippet	说明
`input`	qk.Input.comp	文本输入
`number`	qk.InputNumber.comp	数字输入
`textarea`	qk.TextArea.comp	文本域
`select`	qk.Select.comp	下拉选择
`async_select`	qk.AsyncSelect.comp	异步下拉
`date`	qk.DatePicker.comp	日期选择
`switch`	qk.Switch.comp	开关
`checkbox`	qk.Checkbox.comp	复选框
`radio`	qk.Radio.comp	单选框
`attachments`	qk.AttachFiles.comp	附件上传
`table_column`	qk.Normal.cell	表格列
`status_column`	qk.Status.cell	状态列
`action_column`	qk.Action.cell	操作列

生成结果说明

不同模板会生成不同的文件集合，下面是标准 normal / tabs 模板的典型结构：

your-feature/
├── page.tsx              # 页面入口
├── card.tsx              # 卡片组件
├── module-config.tsx     # 模块统一出口
├── ui-helpers.tsx        # UI 辅助函数
├── ui-context.tsx        # UI 上下文
├── _menu/
│   └── index.tsx         # 菜单配置
├── _router/
│   └── index.tsx         # 路由配置
├── table/
│   ├── table-list.tsx    # 列表组件
│   ├── filter/           # 查询条件（normal / tabs）
│   └── column-formatters/ # 列格式化器
├── detail/
│   └── index.tsx         # 详情页
├── edit/
│   └── index.tsx         # 编辑页
└── _redux/
    ├── slice.tsx         # Redux Slice
    ├── actions.tsx       # Redux Actions
    └── crud.tsx          # API 接口

补充说明：

simple-page 不会包含完整的 detail/、edit/、table/filter/ 等目录
tabs 会额外包含 table/sub-table-list.tsx
生成后建议优先检查 ui-helpers.tsx、module-config.tsx、_router/index.tsx

常用配置项

配置项	说明	示例
`moduleName`	功能模块名称	供应商管理
`routePrefix`	路由路径	/supplier/vendor
`stateKey`	Redux 状态 key	vendor
`modulePath`	模块路径	@/pages/services/supplier/vendor
`listTitle`	列表标题	供应商列表
`modelAPIPath`	API 基础路径	/supplier/api/vendor
`mainListTitle`	Tabs 主列表标题	主列表
`subListTitle`	Tabs 次列表标题	次列表
`mainListKey`	Tabs 主列表 Key	mainList
`subListKey`	Tabs 次列表 Key	subList

前端 Skills 配套

仓库里已经补充了一套与三种模板对应的前端 skills

如果你希望先判断该用哪种模板，推荐优先打开 qk.frontendSkills 命令查看

frontend-module-builder
frontend-template-selector
frontend-simple-page
frontend-normal-crud
frontend-tabs-module

常见问题

1. `qk.quickGenerate` 提示格式无法识别

优先检查：

是否是合法 JSON 数组
是否包含“字段编码 / 字段名称”两列
是否复制了过多无关说明文字

2. Tabs 的 `MainListKey / SubListKey` 为什么会报错

这两个字段会校验是否为合法变量名：

合法示例：mainList、subList
不合法示例：main-list、主列表、1mainList

qk-snippets

liu run

qk-snippets

安装

使用

1.生成模块级代码

2.插入代码片段

📋 【代码片段】指令速查表

CRUD 接口操作

Helper 工具集

基础组件

表格组件

导入导出

表格列定义

Hooks 方法

Hooks 字段类型

Hooks 内置字段

代码段

表单

🚀 qk.page-builder 页面构建工具

功能特性

使用方式

方式一：打开页面构建工具 qk.pageBuilder

方式二：从选中内容快速生成 qk.quickGenerate

方式三：打开前端 Skill 指南 qk.frontendSkills

模板模式说明

simple-page

normal

tabs

page-builder 步骤说明

第一步：基础信息

第二步：字段配置

第三步：生成与保存

字段定义格式

JSON 格式

CSV 格式

表头 CSV / Excel / WPS 粘贴

Markdown 表格

支持的宽松格式

字段类型映射

生成结果说明

常用配置项

前端 Skills 配套

常见问题

1. qk.quickGenerate 提示格式无法识别

2. Tabs 的 MainListKey / SubListKey 为什么会报错

方式一：打开页面构建工具 `qk.pageBuilder`

方式二：从选中内容快速生成 `qk.quickGenerate`

方式三：打开前端 Skill 指南 `qk.frontendSkills`

`simple-page`

`normal`

`tabs`

1. `qk.quickGenerate` 提示格式无法识别

2. Tabs 的 `MainListKey / SubListKey` 为什么会报错