Private
Public Access
1
0
Files
u-desk/web/src/views/db-cli/composables/useQueryTemplates.js
绝尘 22f5862f15 新增:数据库 UI UX 大幅改进
功能增强:
- 查询历史记录与快速重用(最多50条)
- 查询模板管理(9个默认模板,支持自定义)
- SQL 格式化功能(关键字大写、缩进美化)
- 查询结果导出(CSV/JSON/Excel/Markdown)
- 执行时间显示(带颜色指示:绿/橙/红)
- 增强工具栏(整合所有功能)

新增组件:
- QueryHistoryPanel.vue - 查询历史面板
- QueryTemplatesPanel.vue - 查询模板面板
- SQLEditorToolbar.vue - 增强工具栏
- useQueryHistory.js - 历史记录管理
- useQueryTemplates.js - 模板管理
- sqlFormatter.js - SQL 格式化工具
- resultExporter.js - 结果导出工具

修改组件:
- SqlEditor.vue - 集成新功能与工具栏
2026-03-31 11:49:25 +08:00

196 lines
4.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* 查询模板管理
* 用于保存常用查询模板
*/
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
}
}