qk-snippets

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

安装

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

使用

插入代码片段

操作流程：

输入命令前缀 qk.。
继续输入关键词，匹配组件或方法，例如：qk.SuperTable。
按 Enter 选择并插入匹配的代码片段。

插入模版套件

操作流程：

使用快捷键 Ctrl + Shift + P 打开命令面板。
输入 Insert Template。
选择所需插入的模版套件类型：Normal 或 Tabs，然后按 Enter 确认
确认后，【自定义选择目标目录】即可一键生成和插入到项目中。

插入模版套件（升级版，可提前定义相关菜单名称、路由、Desc描述...）

操作流程：

使用快捷键 Ctrl + Shift + P 打开命令面板。
输入 Page Builder。
选择所需插入的模版套件类型：Normal 或 Tabs，然后按 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.Card.comp`	卡片组件
`qk.Tabs.comp`	标签页组件
`qk.MegaRadios.comp`	卡片样式单选
`qk.CategoryCardView.comp`	品类卡片
`qk.StickyBox.comp`	粘性盒子

表格组件

指令	说明
`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.Switch.cell`	开关切换列
`qk.ColumnTitle.cell`	列标题（带 tooltip）
`qk.Action.cell`	操作列
`qk.ActionInner.cell`	操作列内容（新版本）
`qk.ActionOldInner.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 代码模板。

功能特性

🎨 拖拽模式：通过拖拽字段组件快速构建页面
📊 表格导入：支持 CSV/Excel 批量导入字段定义
🔗 自动关联 Snippets：字段自动匹配对应的 qk.snippets 代码段
📁 一键生成：生成完整的 Page + Redux 文件结构
👁️ 代码预览：生成前可预览代码内容

使用方式

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

使用快捷键 Ctrl + Shift + P 打开命令面板
输入 qk.pageBuilder 或 Open Page Builder
选择打开页面构建工具

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

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

字段定义格式

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

字段类型映射

字段类型	对应 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	操作列

生成的文件结构

your-feature/
├── page.tsx              # 页面入口
├── card.tsx             # 卡片组件
├── ui-helpers.tsx       # UI 辅助函数
├── ui-context.tsx       # UI 上下文
├── table/
│   ├── table-list.tsx   # 列表组件
│   └── column-formatters/ # 列格式化器
├── detail/
│   └── detail.tsx      # 详情页
├── edit/
│   └── index.tsx       # 编辑页
└── _redux/
    ├── slice.tsx       # Redux Slice
    ├── actions.tsx      # Redux Actions
    └── crud.tsx         # API 接口

基本信息配置

配置项	说明	示例
`moduleName`	功能模块名称	供应商管理
`routePrefix`	路由路径	/supplier/vendor
`stateKey`	Redux 状态 key	vendor
`modulePath`	模块路径	@/pages/services/supplier/vendor
`listTitle`	列表标题	供应商列表

qk-snippets

liu run

qk-snippets

安装

使用

插入代码片段

插入模版套件

插入模版套件（升级版，可提前定义相关菜单名称、路由、Desc描述...）

📋 完整指令速查表

CRUD 接口操作

Helper 工具集

基础组件

表格组件

导入导出

表格列定义

Hooks 方法

Hooks 字段类型

Hooks 内置字段

代码段

表单

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

功能特性

使用方式

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

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

字段定义格式

JSON 格式

CSV 格式

字段类型映射

生成的文件结构

基本信息配置