Preview Updated 2026-05-10

SQL workbench

SQL workbench shell with Editor / Console / History tabs.

Basic usage

3 predefined tabs (ids: editor, console, history). Each tab’s content is filled in by the consumer via the named slot #panel-{tabId} (Vue) / slots["panel-{tabId}"] (React). You can also override the default list via the tabs prop.

Source: sql.html.

背景视口

SELECT id, name FROM users WHERE created_at > now() - interval '1 day';

src/App.vue

<script setup lang="ts">
import { CfSqlWorkbench, CfCodeEditor } from '@chufix-design/vue';
import { ref } from 'vue';
const sql = ref('SELECT id, name FROM users WHERE created_at > now() - interval \'1 day\';');
</script>
<template>
  <div style="height: 320px;">
    <CfSqlWorkbench>
      <template #panel-editor>
        <CfCodeEditor v-model="sql" language="sql" :rows="10" />
      </template>
      <template #panel-console><p style="color: var(--fg-2);">交互式 SQL REPL（基于 CfCodeEditor + CfDataGrid 结果展示）。</p></template>
      <template #panel-history><p style="color: var(--fg-2);">查询历史侧栏。</p></template>
    </CfSqlWorkbench>
  </div>
</template>

<script setup>
import { CfSqlWorkbench, CfCodeEditor } from '@chufix-design/vue';
import { ref } from 'vue';
const sql = ref('SELECT id, name FROM users WHERE created_at > now() - interval \'1 day\';');
</script>
<template>
  <div style="height: 320px;">
    <CfSqlWorkbench>
      <template #panel-editor>
        <CfCodeEditor v-model="sql" language="sql" :rows="10" />
      </template>
      <template #panel-console><p style="color: var(--fg-2);">交互式 SQL REPL（基于 CfCodeEditor + CfDataGrid 结果展示）。</p></template>
      <template #panel-history><p style="color: var(--fg-2);">查询历史侧栏。</p></template>
    </CfSqlWorkbench>
  </div>
</template>

import { useState } from 'react';
import { CfCodeEditor, CfSqlWorkbench } from '@chufix-design/react';

export default function Demo() {
  const [sql, setSql] = useState('SELECT id, name FROM users WHERE created_at > now() - interval \'1 day\';');
  return (
    <>
      <div style={{ height: 320 }}>
          <CfSqlWorkbench>
              <CfCodeEditor value={sql} onChange={setSql} language="sql" rows={10} />
    </>
  );
}

import { useState } from 'react';
import { CfCodeEditor, CfSqlWorkbench } from '@chufix-design/react';

export default function Demo() {
  const [sql, setSql] = useState('SELECT id, name FROM users WHERE created_at > now() - interval \'1 day\';');
  return (
    <>
      <div style={{ height: 320 }}>
          <CfSqlWorkbench>
              <CfCodeEditor value={sql} onChange={setSql} language="sql" rows={10} />
    </>
  );
}

API

Prop	Type	Default	Description
`modelValue` / `value`	`string`	First tab id	Active tab
`tabs`	`TemplatePaneTab[]`	preset	Custom tab list
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

The preset tab id lists are exported as constants PROTOCOL_TABS / NETWORK_TABS / SQL_TABS, ready to reuse when customizing tabs.

Template components are a thin semantic wrapper over CfTabs. If you don’t need a predefined tab set, use CfTabs directly.