Initial commit: SQL audit platform v0.1.0
FastAPI backend with auth, user, instance, ticket, query, dashboard APIs. React + TypeScript frontend with mock data UI (10 pages). SQLite + async SQLAlchemy, JWT auth, role-based access control. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
loganandClaude Opus 4.7 committed
commit
439155c92e
290 files changed
+61950
No files matched your search
@@ -0,0 +1,385 @@
|
||||
<template>
|
||||
<div class="instances-page">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="header-left">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="搜索数据源"
|
||||
clearable
|
||||
style="width: 300px;"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-select v-model="filterType" placeholder="类型" clearable style="width: 120px;">
|
||||
<el-option label="MySQL" value="mysql" />
|
||||
<el-option label="Redis" value="redis" />
|
||||
<el-option label="PostgreSQL" value="postgresql" />
|
||||
<el-option label="MongoDB" value="mongodb" />
|
||||
</el-select>
|
||||
<el-select v-model="filterEnv" placeholder="环境" clearable style="width: 120px;">
|
||||
<el-option label="开发" value="dev" />
|
||||
<el-option label="测试" value="test" />
|
||||
<el-option label="预发布" value="staging" />
|
||||
<el-option label="生产" value="prod" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-button type="primary" @click="showCreateDialog">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加数据源
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table :data="filteredInstances" stripe v-loading="loading">
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="name" label="名称" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="instance-name">
|
||||
<el-icon size="18" :color="getDbTypeColor(row.db_type)">
|
||||
<component :is="getDbTypeIcon(row.db_type)" />
|
||||
</el-icon>
|
||||
<span>{{ row.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="db_type" label="类型" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getDbTypeTag(row.db_type)">
|
||||
{{ row.db_type.toUpperCase() }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="host" label="主机" min-width="180">
|
||||
<template #default="{ row }">
|
||||
{{ row.host }}:{{ row.port }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="database" label="数据库" width="120" />
|
||||
<el-table-column prop="environment" label="环境" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getEnvType(row.environment)">
|
||||
{{ getEnvLabel(row.environment) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === 'active' ? 'success' : 'danger'">
|
||||
{{ row.status === 'active' ? '正常' : '异常' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="testConnection(row.id)">
|
||||
测试
|
||||
</el-button>
|
||||
<el-button type="primary" link @click="editInstance(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="danger" link @click="deleteInstance(row.id)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 创建/编辑对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="isEdit ? '编辑数据源' : '添加数据源'"
|
||||
width="600px"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入数据源名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="db_type">
|
||||
<el-select v-model="form.db_type" placeholder="选择数据库类型" style="width: 100%;">
|
||||
<el-option label="MySQL" value="mysql" />
|
||||
<el-option label="Redis" value="redis" />
|
||||
<el-option label="PostgreSQL" value="postgresql" />
|
||||
<el-option label="MongoDB" value="mongodb" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<el-form-item label="主机" prop="host">
|
||||
<el-input v-model="form.host" placeholder="主机地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="端口" prop="port">
|
||||
<el-input-number v-model="form.port" :min="1" :max="65535" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="数据库" prop="database">
|
||||
<el-input v-model="form.database" placeholder="数据库名称（可选）" />
|
||||
</el-form-item>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="form.username" placeholder="用户名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="form.password" type="password" placeholder="密码" show-password />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="环境" prop="environment">
|
||||
<el-radio-group v-model="form.environment">
|
||||
<el-radio-button label="dev">开发</el-radio-button>
|
||||
<el-radio-button label="test">测试</el-radio-button>
|
||||
<el-radio-button label="staging">预发布</el-radio-button>
|
||||
<el-radio-button label="prod">生产</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input
|
||||
v-model="form.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="数据源描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.db_type === 'redis'" label="部署模式">
|
||||
<el-select v-model="form.redis_mode" placeholder="选择部署模式" style="width: 100%;">
|
||||
<el-option label="单机模式" value="standalone" />
|
||||
<el-option label="哨兵模式" value="sentinel" />
|
||||
<el-option label="集群模式" value="cluster" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSubmit">
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { instanceApi } from '@/api'
|
||||
import type { DatabaseInstance } from '@/types'
|
||||
|
||||
const loading = ref(false)
|
||||
const instances = ref<DatabaseInstance[]>([])
|
||||
const searchQuery = ref('')
|
||||
const filterType = ref('')
|
||||
const filterEnv = ref('')
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const submitting = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
const form = reactive({
|
||||
id: 0,
|
||||
name: '',
|
||||
db_type: 'mysql',
|
||||
host: '',
|
||||
port: 3306,
|
||||
database: '',
|
||||
username: '',
|
||||
password: '',
|
||||
environment: 'dev',
|
||||
description: '',
|
||||
redis_mode: 'standalone',
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
db_type: [{ required: true, message: '请选择类型', trigger: 'change' }],
|
||||
host: [{ required: true, message: '请输入主机地址', trigger: 'blur' }],
|
||||
port: [{ required: true, message: '请输入端口', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
const filteredInstances = computed(() => {
|
||||
let result = instances.value
|
||||
if (searchQuery.value) {
|
||||
result = result.filter(i => i.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
|
||||
}
|
||||
if (filterType.value) {
|
||||
result = result.filter(i => i.db_type === filterType.value)
|
||||
}
|
||||
if (filterEnv.value) {
|
||||
result = result.filter(i => i.environment === filterEnv.value)
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
const fetchInstances = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res: any = await instanceApi.list()
|
||||
instances.value = res
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getDbTypeColor = (type: string) => {
|
||||
const map: Record<string, string> = {
|
||||
mysql: '#4479A1',
|
||||
redis: '#DC382D',
|
||||
postgresql: '#336791',
|
||||
mongodb: '#47A248',
|
||||
}
|
||||
return map[type] || '#909399'
|
||||
}
|
||||
|
||||
const getDbTypeIcon = (type: string) => {
|
||||
const map: Record<string, string> = {
|
||||
mysql: 'Coin',
|
||||
redis: 'Lightning',
|
||||
postgresql: 'DataAnalysis',
|
||||
mongodb: 'Folder',
|
||||
}
|
||||
return map[type] || 'DataLine'
|
||||
}
|
||||
|
||||
const getDbTypeTag = (type: string) => {
|
||||
const map: Record<string, string> = {
|
||||
mysql: 'primary',
|
||||
redis: 'danger',
|
||||
postgresql: 'info',
|
||||
mongodb: 'success',
|
||||
}
|
||||
return map[type] || ''
|
||||
}
|
||||
|
||||
const getEnvType = (env: string) => {
|
||||
const map: Record<string, string> = {
|
||||
dev: 'info',
|
||||
test: 'warning',
|
||||
staging: '',
|
||||
prod: 'danger',
|
||||
}
|
||||
return map[env] || ''
|
||||
}
|
||||
|
||||
const getEnvLabel = (env: string) => {
|
||||
const map: Record<string, string> = {
|
||||
dev: '开发',
|
||||
test: '测试',
|
||||
staging: '预发布',
|
||||
prod: '生产',
|
||||
}
|
||||
return map[env] || env
|
||||
}
|
||||
|
||||
const showCreateDialog = () => {
|
||||
isEdit.value = false
|
||||
resetForm()
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const editInstance = (row: DatabaseInstance) => {
|
||||
isEdit.value = true
|
||||
Object.assign(form, row)
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
form.id = 0
|
||||
form.name = ''
|
||||
form.db_type = 'mysql'
|
||||
form.host = ''
|
||||
form.port = 3306
|
||||
form.database = ''
|
||||
form.username = ''
|
||||
form.password = ''
|
||||
form.environment = 'dev'
|
||||
form.description = ''
|
||||
form.redis_mode = 'standalone'
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const valid = await formRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
await instanceApi.update(form.id, form)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await instanceApi.create(form)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
fetchInstances()
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const testConnection = async (id: number) => {
|
||||
try {
|
||||
const res: any = await instanceApi.test(id)
|
||||
if (res.success) {
|
||||
ElMessage.success(`连接成功，延迟: ${res.latency_ms}ms`)
|
||||
} else {
|
||||
ElMessage.error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('连接测试失败')
|
||||
}
|
||||
}
|
||||
|
||||
const deleteInstance = async (id: number) => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要删除该数据源吗？', '提示', {
|
||||
type: 'warning',
|
||||
})
|
||||
await instanceApi.delete(id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchInstances()
|
||||
} catch (error) {
|
||||
// 取消删除
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchInstances()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.instances-page {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.instance-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user