@zcllc/grammarinput

卓辰数据库管理工具语法输入组件 - 一个基于 CodeMirror 6 和 Lezer 语法解析器的智能输入组件。 (本组件没有普适性, 非本公司内部项目切勿使用.)

✨ 特性

• 🎯 自定义语法解析 - 基于 Lezer 语法库，支持自定义查询语法
• 🔧 智能代码补全 - 支持 SQL 关键字、表名、列名、插件方法等自动补全
• 🌈 语法高亮 - 支持多种 token 类型的语法高亮显示
• 🔌 插件系统 - 支持 DLL 插件和方法的自动补全及文档提示
• 📝 多语言支持 - 支持自定义语法(zc)、JSON、JavaScript、Go
• 🎨 主题切换 - 支持 VSCode Light 和 Tomorrow Night Blue 主题
• ⚛️ React 组件 - 开箱即用的 React 组件

📦 安装

# 使用 npm
npm install @zcllc/grammarinput

# 使用 yarn
yarn add @zcllc/grammarinput

🔨 使用

基础用法

import GrammarInput from '@zcllc/grammarinput'

function App() {
  return (
    <GrammarInput
      value="db/table"
      onInput={(value) => console.log(value)}
      style={{ width: 400, height: 200 }}
    />
  )
}

Props 属性

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | value | string | '' | 输入框的值 | | style | React.CSSProperties | - | 自定义样式 | | theme | 'vscode-light' \| 'tomorrow-night-blue' | 'vscode-light' | 主题 | | language | 'zc' \| 'json' \| 'javascript' \| 'go' | 'zc' | 语言模式 | | lineWrapping | boolean | false | 是否自动换行 | | tableList | string[] | - | 表名列表，用于自动补全 | | pluginList | PluginData[] | - | 插件列表，用于插件方法补全 | | onInput | (value: string) => void | - | 输入回调 | | onBlur | (e: React.FocusEvent) => void | - | 失焦回调 | | onKeyDown | (e: React.KeyboardEvent) => void | - | 键盘事件回调 | | onCreateEditor | (view: EditorView, state: EditorState) => void | - | 编辑器创建回调 | | onDocumention | (name: string) => void | - | 查看文档回调 | | loadColumns | (tableString: string) => Promise<string[]> | - | 异步加载列名 |

高级用法

import GrammarInput, { ReactCodeMirrorRef } from '@zcllc/grammarinput'
import { useRef } from 'react'

function App() {
  const editorRef = useRef<ReactCodeMirrorRef>(null)

  const pluginList = [
    {
      dll: 'StringUtils',
      desc: '字符串处理工具',
      procList: [
        { proc: 'Substr(value string, start int, end int) string', desc: '截取字符串' },
        { proc: 'ToUpper(value string) string', desc: '转大写' }
      ]
    }
  ]

  return (
    <GrammarInput
      ref={editorRef}
      value="db/users @SELECT=id,name $StringUtils.Substr()"
      tableList={['db/users', 'db/orders', 'db/products']}
      pluginList={pluginList}
      loadColumns={async (table) => {
        // 异步加载表的列名
        return ['id', 'name', 'email', 'created_at']
      }}
      onInput={(value) => console.log('Input:', value)}
      onDocumention={(name) => console.log('View doc:', name)}
    />
  )
}

🗂️ 语法说明

自定义语法支持以下 token 类型：

| Token | 格式 | 示例 | 说明 | |-------|------|------|------| | Domain | [域名] | [example.com] | 域标识 | | MainQuery | 路径/表名 | db/users | 主查询 | | QueryWord | @关键字 | @SELECT | 查询关键字 | | PluginWord | $插件.方法 | $StringUtils.Substr | 插件方法 | | PluginArg | (参数) | (value, 0, 10) | 插件参数 | | Regular | #正则 | #\d+ | 正则表达式 | | Eqal | 运算符 | =, !=, <>, <= | 比较运算符 |

🛠️ 开发

# 安装依赖
npm install

# 构建 Lezer 语法解析器
npm run lezer

# 构建组件库
npm run build

# 发布
npm run publish

📁 项目结构

├── src/
│   ├── grammar/
│   │   ├── my.grammar      # Lezer 语法定义
│   │   └── highlight.ts    # 语法高亮配置
│   ├── grammarInput/
│   │   ├── grammarInput.tsx    # 主组件
│   │   ├── grammarInput.scss   # 样式
│   │   ├── languageDefine.ts   # 语言定义
│   │   └── keywords/           # 关键字定义
│   └── grammarPaser/
│       └── dbquery.grammar.ts  # 生成的解析器
├── rollup.config.js        # Rollup 配置 (Lezer 构建)
├── vite.config.js          # Vite 配置 (组件构建)
└── package.json

📄 许可证

ISC