功能增强: - 查询历史记录与快速重用(最多50条) - 查询模板管理(9个默认模板,支持自定义) - SQL 格式化功能(关键字大写、缩进美化) - 查询结果导出(CSV/JSON/Excel/Markdown) - 执行时间显示(带颜色指示:绿/橙/红) - 增强工具栏(整合所有功能) 新增组件: - QueryHistoryPanel.vue - 查询历史面板 - QueryTemplatesPanel.vue - 查询模板面板 - SQLEditorToolbar.vue - 增强工具栏 - useQueryHistory.js - 历史记录管理 - useQueryTemplates.js - 模板管理 - sqlFormatter.js - SQL 格式化工具 - resultExporter.js - 结果导出工具 修改组件: - SqlEditor.vue - 集成新功能与工具栏
196 lines
4.6 KiB
JavaScript
196 lines
4.6 KiB
JavaScript
/**
|
||
* 查询模板管理
|
||
* 用于保存常用查询模板
|
||
*/
|
||
|
||
const STORAGE_KEY = 'db-cli:query-templates'
|
||
|
||
// 默认模板
|
||
const DEFAULT_TEMPLATES = [
|
||
{
|
||
id: 'template-1',
|
||
name: '查询所有数据',
|
||
description: '查询表中所有数据',
|
||
query: 'SELECT * FROM table_name WHERE 1=1;',
|
||
category: '基础查询'
|
||
},
|
||
{
|
||
id: 'template-2',
|
||
name: '分页查询',
|
||
description: '带分页的数据查询',
|
||
query: 'SELECT * FROM table_name WHERE 1=1 LIMIT 10 OFFSET 0;',
|
||
category: '分页'
|
||
},
|
||
{
|
||
id: 'template-3',
|
||
name: '统计查询',
|
||
description: '统计数据行数',
|
||
query: 'SELECT COUNT(*) as total FROM table_name WHERE 1=1;',
|
||
category: '统计'
|
||
},
|
||
{
|
||
id: 'template-4',
|
||
name: '插入数据',
|
||
description: '插入单条数据',
|
||
query: 'INSERT INTO table_name (column1, column2) VALUES (value1, value2);',
|
||
category: '插入'
|
||
},
|
||
{
|
||
id: 'template-5',
|
||
name: '更新数据',
|
||
description: '更新指定条件的数据',
|
||
query: 'UPDATE table_name SET column1 = value1 WHERE id = 1;',
|
||
category: '更新'
|
||
},
|
||
{
|
||
id: 'template-6',
|
||
name: '删除数据',
|
||
description: '删除指定条件的数据',
|
||
query: 'DELETE FROM table_name WHERE id = 1;',
|
||
category: '删除'
|
||
},
|
||
{
|
||
id: 'template-redis-1',
|
||
name: 'Redis - 设置键值',
|
||
description: 'SET 命令',
|
||
query: 'SET key value',
|
||
category: 'Redis',
|
||
dbType: 'redis'
|
||
},
|
||
{
|
||
id: 'template-redis-2',
|
||
name: 'Redis - 获取键值',
|
||
description: 'GET 命令',
|
||
query: 'GET key',
|
||
category: 'Redis',
|
||
dbType: 'redis'
|
||
},
|
||
{
|
||
id: 'template-mongo-1',
|
||
name: 'MongoDB - 查询数据',
|
||
description: 'find 查询',
|
||
query: 'db.collection.find({ field: value })',
|
||
category: 'MongoDB',
|
||
dbType: 'mongodb'
|
||
}
|
||
]
|
||
|
||
export function useQueryTemplates() {
|
||
/**
|
||
* 获取模板列表
|
||
*/
|
||
const getTemplates = () => {
|
||
try {
|
||
const stored = localStorage.getItem(STORAGE_KEY)
|
||
if (!stored) {
|
||
// 首次使用,保存默认模板
|
||
localStorage.setItem(STORAGE_KEY, JSON.stringify(DEFAULT_TEMPLATES))
|
||
return DEFAULT_TEMPLATES
|
||
}
|
||
return JSON.parse(stored)
|
||
} catch (e) {
|
||
console.error('Failed to load query templates:', e)
|
||
return DEFAULT_TEMPLATES
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 保存模板
|
||
*/
|
||
const saveTemplate = (template) => {
|
||
const templates = getTemplates()
|
||
const newTemplate = {
|
||
id: `template-${Date.now()}`,
|
||
name: template.name || '未命名模板',
|
||
description: template.description || '',
|
||
query: template.query,
|
||
category: template.category || '自定义',
|
||
dbType: template.dbType || 'mysql',
|
||
createdAt: new Date().toISOString()
|
||
}
|
||
|
||
const updated = [...templates, newTemplate]
|
||
|
||
try {
|
||
localStorage.setItem(STORAGE_KEY, JSON.stringify(updated))
|
||
return newTemplate
|
||
} catch (e) {
|
||
console.error('Failed to save query template:', e)
|
||
return null
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 更新模板
|
||
*/
|
||
const updateTemplate = (id, updates) => {
|
||
const templates = getTemplates()
|
||
const index = templates.findIndex(t => t.id === id)
|
||
|
||
if (index === -1) return null
|
||
|
||
templates[index] = {
|
||
...templates[index],
|
||
...updates,
|
||
updatedAt: new Date().toISOString()
|
||
}
|
||
|
||
try {
|
||
localStorage.setItem(STORAGE_KEY, JSON.stringify(templates))
|
||
return templates[index]
|
||
} catch (e) {
|
||
console.error('Failed to update query template:', e)
|
||
return null
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 删除模板
|
||
*/
|
||
const deleteTemplate = (id) => {
|
||
const templates = getTemplates()
|
||
const filtered = templates.filter(t => t.id !== id)
|
||
|
||
try {
|
||
localStorage.setItem(STORAGE_KEY, JSON.stringify(filtered))
|
||
return true
|
||
} catch (e) {
|
||
console.error('Failed to delete query template:', e)
|
||
return false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 根据数据库类型筛选模板
|
||
*/
|
||
const getTemplatesByType = (dbType) => {
|
||
const templates = getTemplates()
|
||
if (!dbType) return templates
|
||
|
||
// 通用模板(无 dbType) + 匹配当前 dbType 的模板
|
||
return templates.filter(t => !t.dbType || t.dbType === dbType.toLowerCase())
|
||
}
|
||
|
||
/**
|
||
* 重置为默认模板
|
||
*/
|
||
const resetToDefaults = () => {
|
||
try {
|
||
localStorage.setItem(STORAGE_KEY, JSON.stringify(DEFAULT_TEMPLATES))
|
||
return true
|
||
} catch (e) {
|
||
console.error('Failed to reset query templates:', e)
|
||
return false
|
||
}
|
||
}
|
||
|
||
return {
|
||
getTemplates,
|
||
saveTemplate,
|
||
updateTemplate,
|
||
deleteTemplate,
|
||
getTemplatesByType,
|
||
resetToDefaults
|
||
}
|
||
}
|