一元1000粉自助下单平台_建站公司联系电话_信阳seo_拉新推广怎么做

语图（YuTu）- 自然语言转SQL可视化平台

SQLViz-GPT 是一个基于 AI 的智能数据分析与可视化平台,能够将自然语言需求转换为 SQL 查询并生成专业的数据可视化图表。

功能特点

• 🤖 智能分析: 集成通义千问大语言模型,将自然语言转换为标准 SQL
• 📊 专业可视化: 基于 ECharts 引擎,自动生成适配数据特点的图表
• 🔄 实时预览: SQL 查询结果实时展示,支持数据可视化即时预览
• 💾 配置导出: 支持导出 SQL 和图表配置,便于后续编辑与团队协作
• 🛠 环境配置: 支持自定义数据库连接和 API 密钥配置

快速开始

前端部署

# 进入前端目录
cd code# 安装依赖
npm install# 启动开发服务器
npm run serve# 构建生产版本
npm run build

后端部署

# 进入后端目录
cd 后台# 使用 Maven 打包
mvn clean package# 运行 jar 包
java -jar target/SpringBoot-1.0-SNAPSHOT.jar

环境要求

• Node.js >= 14
• Java >= 8
• MySQL >= 5.7
• Maven >= 3.6

配置说明

数据库配置

1. 创建 MySQL 数据库
2. 在平台配置页面填写数据库连接信息:
   • 主机地址
   • 端口
   • 数据库名
   • 用户名
   • 密码

API 配置

1. 获取通义千问 API 密钥
2. 在平台配置页面填写 API Key

使用流程

1. 配置数据库连接信息和 API 密钥
2. 输入业务分析需求描述
3. 系统自动生成 SQL 查询语句
4. 执行查询并生成可视化图表
5. 根据需要调整和导出配置

技术栈

• 前端: Vue 3 + TailwindCSS + ECharts
• 后端: Spring Boot + MySQL
• AI: 通义千问大语言模型

演示截图

1.首页

2.初始化脚本及测试数据1

3.初始化脚本及测试数据2

4.生成数据分析结果1

5.生成数据分析结果2

代码下载

语图（YuTu）- 自然语言转SQL可视化平台

核心源码

code/src/components/Dialog.vue

<template><transition name="dialog-fade"><div v-show="visible" class="fixed inset-0 z-50 overflow-y-auto"><div class="flex min-h-screen items-center justify-center px-4"><div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" @click="handleClose"></div><div class="relative bg-white rounded-lg shadow-xl w-full transform transition-all"><div class="flex items-center justify-between p-4 border-b"><h3 class="text-lg font-medium">{{ title }}</h3><button class="text-gray-400 hover:text-gray-500" @click="handleClose"><i class="fas fa-times"></i></button></div><div class="p-6 preview-container"><slot></slot></div><div class="px-6 py-4 border-t flex justify-end space-x-3"><buttonclass="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md"@click="handleClose">取消</button><buttonclass="px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md"@click="handleConfirm">确定</button></div></div></div></div></transition>
</template><script setup>
import { ref, defineProps, defineEmits } from 'vue';const props = defineProps({title: {type: String,required: true},visible: {type: Boolean,default: false}
});const emit = defineEmits(['update:visible', 'confirm']);const handleClose = () => {emit('update:visible', false);
};const handleConfirm = () => {emit('confirm');handleClose();
};
</script><style scoped>
.dialog-fade-enter-active,
.dialog-fade-leave-active {transition: opacity 0.3s ease;
}.dialog-fade-enter-from,
.dialog-fade-leave-to {opacity: 0;
}.preview-container {overflow: auto;
}.preview-container::-webkit-scrollbar {width: 15px;
}.preview-container::-webkit-scrollbar-track {background: #f1f5f9;border-radius: 8px;
}.preview-container::-webkit-scrollbar-thumb {background: #6366f1;border-radius: 8px;border: 2px solid #f1f5f9;
}.preview-container::-webkit-scrollbar-thumb:hover {background: #4f46e5;
}
</style>

code/src/components/DataVisualization.vue

<template><div class="space-y-4"><div class="bg-white rounded-lg shadow-sm"><h3 class="text-lg font-medium mb-4">SQL 查询</h3><div class="space-x-2"><buttonclass="px-3 py-1 text-sm rounded-md bg-primary/10 text-primary hover:bg-primary/20 transition-colors"@click="generateOption"><i class="fas fa-chart-line mr-1"></i>生成echarts图表</button></div><div class="rounded-md"><v-md-editorv-model="sqlRef"mode="preview":disabled="true"height="100%"></v-md-editor></div></div><div class="bg-white rounded-lg shadow-sm echarts-options-container" v-show="chartConfig"><v-md-editorv-model="chartConfig"mode="preview":disabled="true"height="100%"></v-md-editor><div ref="chartContainer" class="w-full h-[400px]" v-show="option"></div></div></div>
</template><script setup>
import {ref, onMounted, onUnmounted, watch, nextTick} from 'vue';
import * as echarts from 'echarts';
import Message from '@/utils/message';
import {baseURL, callGpt} from "@/utils/util";
import {confirm} from "@/utils/confirm";const props = defineProps({sql: {type: String,required: true},description: {type: String,required: true},
});const sqlRef = ref('');
const chartContainer = ref();
let chart = null;
const chartConfig = ref();
const option = ref();// 执行 SQL 查询并获取数据
const fetchData = async () => {try {const settings = JSON.parse(localStorage.getItem('sqlviz-settings'));const response = await fetch(baseURL+ '/api/query', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({sql: props.sql,dbConfig: {host: settings.dbHost,port: settings.dbPort,database: settings.dbName,user: settings.dbUsername,password: settings.dbPassword}})});if (!response.ok) {throw new Error('查询失败');}const data = await response.json();return data;} catch (error) {Message.error('数据查询失败：' + error.message);throw error;}
};const generateOption = async () => {chartConfig.value = '正在分析SQL，生成echarts配置...';const seriesData = await fetchData();const prompt = `基于以下信息，请生成ECharts可视化配置：1. 数据分析需求：
${props.description}2. 当前SQL查询结果数据：
${JSON.stringify(seriesData, null, 2)}请按照以下格式输出：
1. 可视化分析：分析数据特点，选择合适的图表类型并说明原因
2. ECharts配置：生成完整的ECharts配置代码（JSON格式）注意事项：
- 配置必须包含以下基础组件：* title：设置合适的标题和副标题* tooltip：配置数据提示框* toolbox：必须包含 saveAsImage 功能* grid：确保图表布局合理* legend：当有多个系列时必须配置图例- 样式设置要求：* 使用合适的颜色方案* 确保图表清晰易读* 适当配置动画效果* 根据数据特点设置坐标轴样式- 数据映射说明：* 准确映射SQL查询结果中的字段* 合理处理数值类型和格式化* 支持多维度数据展示* 确保数据单位标识清晰`;const sk = JSON.parse(localStorage.getItem("sqlviz-settings")).apiKey;callGpt(sk, prompt,(text) => {chartConfig.value = text;// 自动滚动到底部scrollToBottom();},(finalText) => {chartConfig.value = finalText;const echartsOptionsContainer = document.getElementsByClassName("echarts-options-container")[0];const jsonElem = echartsOptionsContainer.getElementsByClassName("v-md-prism-json")[0];option.value = jsonElem.textContent;console.log(jsonElem.textContent)nextTick(() => {updateChart();scrollToBottom();});Message.success('脚本生成完成');});
};// 更新图表数据
const updateChart = async () => {try {if (chart) {chart.dispose();}chart = echarts.init(chartContainer.value);chart.setOption(JSON.parse(option.value));} catch (error) {console.error('绘制图表失败:', error);Message.error('绘制图表失败：' + error.message);}
};onMounted(() => {sqlRef.value = '```sql\n' + props.sql + '\n```';console.log(sqlRef.value)nextTick(() => {const copyBtnList = document.getElementsByClassName("v-md-copy-code-btn");for (let i = 0; i < copyBtnList.length; i++) {copyBtnList[i].onclick = function () {// 添加复制成功的类copyBtnList[i].classList.add('copied');// 1.5秒后恢复原状setTimeout(() => {copyBtnList[i].classList.remove('copied');}, 1500);}}});
});onUnmounted(() => {if (chart) {chart.dispose();chart = null;}
});const scrollToBottom = () => {nextTick(() => {const containers = document.querySelectorAll('.preview-container');containers.forEach(container => {if (container.offsetParent !== null) {  // 判断元素是否可见container.scrollTop = container.scrollHeight;}});const copyBtnList = document.getElementsByClassName("v-md-copy-code-btn");for (let i = 0; i < copyBtnList.length; i++) {copyBtnList[i].onclick = function () {// 添加复制成功的类copyBtnList[i].classList.add('copied');// 1.5秒后恢复原状setTimeout(() => {copyBtnList[i].classList.remove('copied');}, 1500);}}});
};
</script>

code/src/App.vue

<template><div class="min-h-screen bg-gray-50"><div class="max-w-7xl mx-auto"><nav class="h-16 bg-white shadow-sm flex items-center justify-between px-8"><div class="flex items-center space-x-2"><span class="text-2xl font-['Pacifico'] text-primary">logo</span><span class="text-lg font-medium">自然语言转SQL数据可视化分析平台</span></div><div class="flex items-center space-x-4"><buttonclass="w-10 h-10 rounded-button flex items-center justify-center hover:bg-gray-100 transition-colors"@click="showSettings = true"><i class="fas fa-cog text-gray-600"></i></button><button class="w-10 h-10 rounded-button flex items-center justify-center hover:bg-gray-100 transition-colors"><i class="fas fa-sun text-gray-600"></i></button></div></nav><main class="py-12"><div class="mx-auto"><div class="bg-white rounded-lg shadow-sm p-8"><div class="space-y-6"><div class="flex items-center justify-between"><label for="description" class="block text-sm font-medium text-gray-700">数据分析需求描述</label><div class="flex space-x-2"><buttonclass="px-3 py-1 text-sm rounded-md bg-primary/10 text-primary hover:bg-primary/20 transition-colors"@click="handleClear"><i class="fas fa-eraser mr-1"></i>清空</button><buttonclass="px-3 py-1 text-sm rounded-md bg-primary text-white hover:bg-primary/90 transition-colors"@click="handleGenerateEnv"><i class="fas fa-play mr-1"></i>生成初始测试脚本</button><buttonclass="px-3 py-1 text-sm rounded-md bg-primary text-white hover:bg-primary/90 transition-colors"@click="handleViewGenerateEnv"><i class="fas fa-code-branch mr-1"></i>查看初始测试脚本</button><buttonclass="px-3 py-1 text-sm rounded-md bg-primary text-white hover:bg-primary/90 transition-colors"@click="handleAnalyze"><i class="fas fa-play mr-1"></i>开始分析</button><buttonclass="px-3 py-1 text-sm rounded-md bg-primary text-white hover:bg-primary/90 transition-colors"@click="handleViewAnalyze"><i class="fas fa-code-branch mr-1"></i>查看分析结果</button></div></div><div><textareaid="description"v-model="description"rows="4"class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm resize-none p-4 my-2"placeholder="请描述您的数据分析需求，例如：'分析最近一个季度人力资源部门的人员流动趋势及构成变化'"></textarea></div></div></div><div class="mt-12 bg-white rounded-lg shadow-sm p-8"><h2 class="text-xl font-medium mb-6">平台说明 & 技术架构</h2><div class="space-y-4 text-gray-600"><div class="flex items-start space-x-3"><div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i class="fas fa-database text-sm text-primary"></i></div><p>完成数据源配置及初始化，包括数据库连接信息与表结构定义。</p></div><div class="flex items-start space-x-3"><div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i class="fas fa-magic text-sm text-primary"></i></div><p>输入业务分析需求，系统将通过智能分析引擎解析您的描述，自动构建最优SQL查询语句，并选择最合适的可视化图表进行数据呈现。</p></div><div class="flex items-start space-x-3"><div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i class="fas fa-chart-line text-sm text-primary"></i></div><p>平台采用 ECharts 作为可视化渲染引擎，通过AI智能生成标准的图表配置代码，确保数据可视化的专业性与可扩展性。支持配置导出与图表导出功能，便于后续编辑与团队协作。</p></div><div class="flex items-start space-x-3"><div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i class="fas fa-brain text-sm text-primary"></i></div><p>后端集成通义千问大语言模型，结合优化的提示词策略，精准理解用户意图，将自然语言需求转化为规范的SQL语句。支持复杂的数据分析场景，为决策提供可靠的数据支持。</p></div></div></div></div></main></div><!-- 设置弹框 --><Dialogv-model:visible="showSettings"title="系统设置"@confirm="handleSettingsSave"class="max-w-3xl"style="margin: 0 auto"><form @submit.prevent="handleSettingsSave" class="space-y-4"><div><label class="block text-sm font-medium text-gray-700 mb-1">数据库主机</label><inputv-model="settings.dbHost"type="text"class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"placeholder="请输入数据库主机地址"autocomplete="off"></div><div><label class="block text-sm font-medium text-gray-700 mb-1">端口</label><inputv-model="settings.dbPort"type="text"class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"placeholder="请输入数据库端口"autocomplete="off"></div><div><label class="block text-sm font-medium text-gray-700 mb-1">数据库名称</label><inputv-model="settings.dbName"type="text"class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"placeholder="请输入数据库名称"autocomplete="off"></div><div><label class="block text-sm font-medium text-gray-700 mb-1">用户名</label><inputv-model="settings.dbUsername"type="text"class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"placeholder="请输入数据库用户名"autocomplete="username"></div><div><label class="block text-sm font-medium text-gray-700 mb-1">密码</label><inputv-model="settings.dbPassword"type="password"class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"placeholder="请输入数据库密码"autocomplete="new-password"></div><div><label class="block text-sm font-medium text-gray-700 mb-1">API密钥</label><inputv-model="settings.apiKey"type="password"class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"placeholder="请输入API密钥"autocomplete="off"></div></form></Dialog><!-- 添加脚本生成预览弹框 --><Dialogv-model:visible="showScriptPreview"title="环境初始化脚本生成":showFooter="false"class="w-full max-w-6xl"style="margin: 0 auto"><div class="min-h-[400px] max-h-[600px]"><v-md-editorv-model="scriptContent"mode="preview":disabled="true"height="100%"></v-md-editor></div></Dialog><!-- 添加分析结果预览弹框 --><Dialogv-model:visible="showAnalysisResult"title="数据分析结果"class="w-full max-w-6xl"style="margin: 0 auto"><div class="min-h-[400px] max-h-[600px]"><div class="analysis-container"><v-md-editorv-model="analysisContent"mode="preview":disabled="true"height="100%"v-show="analysisContent"></v-md-editor></div><DataVisualizationv-if="sqlQuery":sql="sqlQuery":description="description"/></div></Dialog></div>
</template><script setup>
import {ref, onMounted, nextTick} from 'vue';
import Dialog from '@/components/Dialog.vue';
import Message from '@/utils/message.js';
import {baseURL, callGpt} from '@/utils/util.js';
import { confirm } from '@/utils/confirm.js';
import DataVisualization from "@/components/DataVisualization.vue";
import {testSql, testChartConfig} from "@/utils/config";const description = ref('');
const showSettings = ref(false);
const settings = ref({dbHost: '',dbPort: '',dbName: '',dbUsername: '',dbPassword: '',apiKey: ''
});// 从localStorage加载设置
const loadSettings = () => {const savedSettings = localStorage.getItem('sqlviz-settings');if (savedSettings) {try {const parsed = JSON.parse(savedSettings);settings.value = { ...settings.value, ...parsed };} catch (e) {console.error('加载设置失败:', e);}}
};// 保存设置到localStorage
const handleSettingsSave = () => {// 验证必填项if (!settings.value.dbHost || !settings.value.dbPort || !settings.value.dbUsername) {Message.warning('请填写必要的数据库配置信息');return;}try {localStorage.setItem('sqlviz-settings', JSON.stringify(settings.value));Message.success('设置保存成功');showSettings.value = false;} catch (e) {console.error('保存设置失败:', e);Message.error('设置保存失败');}
};// 组件挂载时加载设置
onMounted(() => {loadSettings();
});const handleClear = () => {description.value = '';
};const showScriptPreview = ref(false);
const scriptContent = ref('');
let processingGenerateEnv = false;
let isFirstGenerateEnv = true;const handleViewGenerateEnv = () => {showScriptPreview.value = true;
};// 处理生成环境初始化脚本
const handleGenerateEnv = async () => {if (!description.value) {Message.warning('请先输入数据分析需求描述');return;}if (!localStorage.getItem("sqlviz-settings")) {Message.warning('请先配置apiKey');return;}const sk = JSON.parse(localStorage.getItem("sqlviz-settings")).apiKey;if (!sk) {Message.warning('请先配置apiKey');return;}if (processingGenerateEnv) {showScriptPreview.value = true;return;}if (!isFirstGenerateEnv) {const confirmed = await confirm({title: '操作提示',message: '本次操作会刷新之前的生成记录，是否继续？',confirmText: '确认',cancelText: '取消'});if (!confirmed) {return;}}isFirstGenerateEnv = false;processingGenerateEnv = true;showScriptPreview.value = true;scriptContent.value = '正在分析需求，生成初始化脚本...';const prompt = `基于以下数据分析需求，请生成相应的MySQL数据库初始化脚本，包括建表语句和示例数据：
${description.value}请按照以下格式输出：
1. 首先分析需求，确定需要创建的表
2. 生成建表SQL语句
3. 生成插入示例数据的SQL语句
4. 提供简要说明`;callGpt(sk, prompt,(text) => {scriptContent.value = text;// 自动滚动到底部scrollToBottom();},(finalText) => {scriptContent.value = finalText;processingGenerateEnv = false;Message.success('脚本生成完成');});
};const scrollToBottom = () => {nextTick(() => {const containers = document.querySelectorAll('.preview-container');containers.forEach(container => {if (container.offsetParent !== null) {  // 判断元素是否可见container.scrollTop = container.scrollHeight;}});const copyBtnList = document.getElementsByClassName("v-md-copy-code-btn");for (let i = 0; i < copyBtnList.length; i++) {copyBtnList[i].onclick = function () {// 添加复制成功的类copyBtnList[i].classList.add('copied');// 1.5秒后恢复原状setTimeout(() => {copyBtnList[i].classList.remove('copied');}, 1500);}}});
};let processingAnalyze = false;
let isFirstAnalyze = true;// 添加新的响应式变量
const sqlQuery = ref('');
const chartConfig = ref(null);// 修改 handleAnalyze 中的回调处理
const handleAnalyze = async () => {if (!description.value) {Message.warning('请先输入数据分析需求描述');return;}if (!localStorage.getItem("sqlviz-settings")) {Message.warning('请先配置数据库连接信息和API密钥');return;}const settings = JSON.parse(localStorage.getItem("sqlviz-settings"));if (processingAnalyze) {showAnalysisResult.value = true;return;}if (!isFirstAnalyze) {const confirmed = await confirm({title: '操作提示',message: '本次操作会刷新之前的分析记录，是否继续？',confirmText: '确认',cancelText: '取消'});if (!confirmed) {return;}}isFirstAnalyze = false;processingAnalyze = true;showAnalysisResult.value = true;analysisContent.value = '正在分析数据，生成可视化结果...';sqlQuery.value = "";chartConfig.value = null;const dbStructure = await getDbStructure();const prompt = `基于以下信息，请生成SQL查询语句：1. 数据分析需求：
${description.value}2. 当前数据库表结构和示例数据：
${dbStructure}请按照以下格式输出：
1. 需求分析：分析用户需求，确定查询思路
2. SQL查询：生成符合需求的SQL语句
3. 可视化分析：选择合适的图表类型，并给出原因注意：
- SQL查询需要基于已有的表结构
- 不能使用with语句
- SQL需要是标准的MySQL语法
`;callGpt(settings.apiKey, prompt,(text) => {analysisContent.value = text;// 自动滚动到底部scrollToBottom();},(finalText) => {analysisContent.value = finalText;processingAnalyze = false;Message.success('分析完成');// 解析 GPT 返回的内容try {// 使用正则表达式提取 SQL 和 ECharts 配置const analysisContainer = document.getElementsByClassName("analysis-container")[0];const sqlElem = analysisContainer.getElementsByClassName("v-md-prism-sql")[0];const sqlText = sqlElem.textContent;if (sqlText) {sqlQuery.value = sqlText.trim();nextTick(() => {// 自动滚动到底部scrollToBottom();});} else {Message.warning('无法解析返回的配置信息');}} catch (error) {console.error('解析配置失败:', error);Message.error('解析配置失败');}});
};const showAnalysisResult = ref(false);
const analysisContent = ref('');const handleViewAnalyze = () => {// sqlQuery.value = testSql;// chartConfig.value = testChartConfig;showAnalysisResult.value = true;
};const getDbStructure = async () => {// 获取数据库结构const settings = JSON.parse(localStorage.getItem('sqlviz-settings'));const response = await fetch(baseURL + '/api/schema', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({dbConfig: {host: settings.dbHost,port: settings.dbPort,database: settings.dbName,user: settings.dbUsername,password: settings.dbPassword}})});if (!response.ok) {throw new Error('获取数据库结构失败');}const schemaData = await response.json();// 格式化数据库结构信息let dbStructure = '当前数据库表结构：\n\n';schemaData.tables.forEach(table => {dbStructure += `### ${table.name}\n\n`;dbStructure += '```sql\n' + table.createSql + '\n```\n\n';dbStructure += '示例数据：\n```json\n' +JSON.stringify(table.sampleData, null, 2) +'\n```\n\n';});return dbStructure;
}
</script><style>
body {min-height: 100vh;
}#app {min-height: 100vh;
}body::-webkit-scrollbar {width: 15px;
}body::-webkit-scrollbar-track {background: #f1f5f9;border-radius: 8px;
}body::-webkit-scrollbar-thumb {background: #6366f1;border-radius: 8px;border: 2px solid #f1f5f9;
}body::-webkit-scrollbar-thumb:hover {background: #4f46e5;
}textarea {border: 1px solid #e5e7eb;padding: 1rem 1.25rem;margin: 0.75rem 0;line-height: 1.6;font-size: 0.975rem;transition: all 0.2s ease-in-out;background-color: #f9fafb;
}textarea:focus {outline: none;border-color: #4F46E5;box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);background-color: #ffffff;
}textarea::placeholder {color: #9ca3af;font-size: 0.875rem;
}.vuepress-markdown-body:not(.custom) {padding: 0 !important;
}.v-md-editor--preview {padding-bottom: 1.5rem;
}/* 自定义复制按钮样式 */
.v-md-copy-code-btn {color: white !important;padding: 4px 8px !important;font-size: 12px !important;border-radius: 4px !important;opacity: 0.9 !important;transition: all 0.3s ease !important;cursor: pointer !important;
}.v-md-copy-code-btn:hover {opacity: 1 !important;
}.v-md-copy-code-btn.copied {background-color: #10b981 !important;
}/* 调整代码块样式以适应复制按钮 */
.v-md-editor .code-block {position: relative;padding-top: 2.5em !important;
}#chartContainer {width: 100%;background: #fff;border-radius: 0.375rem;padding: 1rem;
}.v-md-prism-sql::-webkit-scrollbar {width: 15px;height: 15px;
}.v-md-prism-sql::-webkit-scrollbar-track {background: #f1f5f9;border-radius: 8px;
}.v-md-prism-sql::-webkit-scrollbar-thumb {background: #6366f1;border-radius: 8px;border: 2px solid #f1f5f9;
}.v-md-prism-sql::-webkit-scrollbar-thumb:hover {background: #4f46e5;
}
</style>