mirror of
https://gitee.com/mateos/mateclaw.git
synced 2026-09-14 03:33:43 +08:00
595 lines
28 KiB
Vue
595 lines
28 KiB
Vue
<template>
|
|
<div class="page-container">
|
|
<div class="page-shell">
|
|
<div class="page-header">
|
|
<div class="page-lead">
|
|
<div class="page-kicker">{{ t('datasources.kicker') }}</div>
|
|
<h1 class="page-title">{{ t('datasources.title') }}</h1>
|
|
<p class="page-desc">{{ t('datasources.desc') }}</p>
|
|
</div>
|
|
<button class="btn-primary" @click="openCreateModal">
|
|
<el-icon><Plus /></el-icon>
|
|
{{ t('datasources.addButton') }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="page-stage">
|
|
<!-- 数据源列表 -->
|
|
<div class="tools-table-wrap">
|
|
<table class="tools-table">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ t('datasources.columns.name') }}</th>
|
|
<th>{{ t('datasources.columns.connection') }}</th>
|
|
<th>{{ t('datasources.columns.status') }}</th>
|
|
<th>{{ t('datasources.columns.actions') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="ds in datasources" :key="ds.id" class="tool-row">
|
|
<td>
|
|
<div class="tool-info">
|
|
<div class="tool-icon-wrap" :class="{ 'icon-ok': ds.lastTestOk === true, 'icon-fail': ds.lastTestOk === false }">
|
|
<el-icon><Coin /></el-icon>
|
|
</div>
|
|
<div>
|
|
<div class="tool-name" :title="ds.name">{{ ds.name }}</div>
|
|
<div class="tool-type-inline">
|
|
<span class="type-badge" :class="'type-' + ds.dbType">{{ dbTypeLabel(ds.dbType) }}</span>
|
|
</div>
|
|
<div class="tool-desc" v-if="ds.description" :title="ds.description">{{ ds.description }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="conn-info">
|
|
<code class="conn-host" :title="`${ds.host}:${ds.port}`">{{ ds.host }}:{{ ds.port }}</code>
|
|
<span class="conn-db" :title="`${ds.databaseName}${ds.schemaName ? ` / ${ds.schemaName}` : ''}`">{{ ds.databaseName }}<template v-if="ds.schemaName"> / {{ ds.schemaName }}</template></span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="status-cell">
|
|
<span class="status-dot" :class="statusClass(ds)"></span>
|
|
<span class="status-label">{{ ds.lastTestOk === true ? t('datasources.messages.testSuccess') : ds.lastTestOk === false ? t('datasources.messages.testFailed') : 'Pending' }}</span>
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" :checked="ds.enabled" @change="toggleDs(ds)" />
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="row-actions">
|
|
<button class="row-btn" @click="openDetailModal(ds)" :title="t('common.view')">
|
|
<el-icon><View /></el-icon>
|
|
</button>
|
|
<button class="row-btn test-btn" @click="testConnection(ds)" :disabled="testing === ds.id" :title="t('datasources.testButton')">
|
|
<el-icon v-if="testing !== ds.id"><Select /></el-icon>
|
|
<span v-else class="spinner"></span>
|
|
</button>
|
|
<button class="row-btn" @click="openEditModal(ds)" :title="t('common.edit')">
|
|
<el-icon><EditPen /></el-icon>
|
|
</button>
|
|
<button class="row-btn danger" @click="deleteDs(ds.id)" :title="t('common.delete')">
|
|
<el-icon><Delete /></el-icon>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr v-if="datasources.length === 0">
|
|
<td colspan="4" class="empty-row">
|
|
<div class="empty-state">
|
|
<el-icon class="empty-icon"><Coin /></el-icon>
|
|
<p>{{ t('datasources.empty') }}</p>
|
|
<button class="btn-primary" style="margin-top: 8px" @click="openCreateModal">
|
|
{{ t('datasources.addButton') }}
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="detailDs" class="modal-overlay" @click.self="closeDetailModal">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h2>{{ detailDs.name }}</h2>
|
|
<button class="modal-close" @click="closeDetailModal">
|
|
<el-icon><CloseBold /></el-icon>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body detail-grid">
|
|
<div class="detail-item">
|
|
<div class="detail-label">{{ t('datasources.columns.type') }}</div>
|
|
<div class="detail-value">{{ dbTypeLabel(detailDs.dbType) }}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">{{ t('datasources.columns.status') }}</div>
|
|
<div class="detail-value">{{ detailDs.enabled ? 'Enabled' : 'Disabled' }}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">{{ t('datasources.fields.host') }}</div>
|
|
<div class="detail-value mono">{{ detailDs.host }}:{{ detailDs.port }}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">{{ t('datasources.fields.databaseName') }}</div>
|
|
<div class="detail-value">{{ detailDs.databaseName }}</div>
|
|
<div v-if="detailDs.schemaName" class="detail-subvalue">{{ detailDs.schemaName }}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">{{ t('datasources.fields.username') }}</div>
|
|
<div class="detail-value">{{ detailDs.username || '-' }}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">{{ t('datasources.fields.extraParams') }}</div>
|
|
<div class="detail-value detail-block">{{ detailDs.extraParams || '-' }}</div>
|
|
</div>
|
|
<div class="detail-item detail-item-full" v-if="detailDs.description">
|
|
<div class="detail-label">{{ t('datasources.fields.description') }}</div>
|
|
<div class="detail-value detail-block">{{ detailDs.description }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h2>{{ editingDs ? t('datasources.modal.editTitle') : t('datasources.modal.newTitle') }}</h2>
|
|
<button class="modal-close" @click="closeModal">
|
|
<el-icon><CloseBold /></el-icon>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-section-title">{{ t('datasources.sections.basic') }}</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">{{ t('datasources.fields.name') }} *</label>
|
|
<input v-model="form.name" class="form-input" :placeholder="t('datasources.placeholders.name')" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{{ t('datasources.fields.dbType') }} *</label>
|
|
<select v-model="form.dbType" class="form-input" @change="onDbTypeChange">
|
|
<option value="mysql">MySQL</option>
|
|
<option value="postgresql">PostgreSQL</option>
|
|
<option value="clickhouse">ClickHouse</option>
|
|
<option value="mariadb">MariaDB</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group full-width">
|
|
<label class="form-label">{{ t('datasources.fields.description') }}</label>
|
|
<input v-model="form.description" class="form-input" :placeholder="t('datasources.placeholders.description')" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section-title">{{ t('datasources.sections.connection') }}</div>
|
|
<div class="form-grid">
|
|
<div class="form-group" style="flex: 2">
|
|
<label class="form-label">{{ t('datasources.fields.host') }} *</label>
|
|
<input v-model="form.host" class="form-input" :placeholder="t('datasources.placeholders.host')" />
|
|
</div>
|
|
<div class="form-group" style="flex: 1">
|
|
<label class="form-label">{{ t('datasources.fields.port') }} *</label>
|
|
<input v-model.number="form.port" type="number" class="form-input" :placeholder="String(defaultPort)" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{{ t('datasources.fields.databaseName') }} *</label>
|
|
<input v-model="form.databaseName" class="form-input" :placeholder="t('datasources.placeholders.databaseName')" />
|
|
</div>
|
|
<div class="form-group" v-if="form.dbType === 'postgresql'">
|
|
<label class="form-label">{{ t('datasources.fields.schemaName') }}</label>
|
|
<input v-model="form.schemaName" class="form-input" :placeholder="t('datasources.placeholders.schemaName')" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section-title">{{ t('datasources.sections.auth') }}</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">{{ t('datasources.fields.username') }}</label>
|
|
<input v-model="form.username" class="form-input" autocomplete="off" :placeholder="t('datasources.placeholders.username')" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{{ t('datasources.fields.password') }}</label>
|
|
<div class="password-wrap">
|
|
<input v-model="form.password" :type="showPassword ? 'text' : 'password'" class="form-input" autocomplete="new-password" :placeholder="t('datasources.placeholders.password')" />
|
|
<button class="password-toggle" @click="showPassword = !showPassword" type="button">
|
|
<el-icon v-if="!showPassword"><View /></el-icon>
|
|
<el-icon v-else><Hide /></el-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section-title advanced-toggle" @click="showAdvanced = !showAdvanced">
|
|
{{ t('datasources.sections.advanced') }}
|
|
<el-icon :class="{ rotated: showAdvanced }"><ArrowDown /></el-icon>
|
|
</div>
|
|
<div class="form-grid" v-if="showAdvanced">
|
|
<div class="form-group full-width">
|
|
<label class="form-label">{{ t('datasources.fields.extraParams') }}</label>
|
|
<input v-model="form.extraParams" class="form-input" :placeholder="t('datasources.placeholders.extraParams')" />
|
|
<span class="form-hint">{{ t('datasources.hints.extraParams') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="modalTestResult !== null" class="test-result" :class="modalTestResult ? 'test-ok' : 'test-fail'">
|
|
<el-icon v-if="modalTestResult"><CircleCheckFilled /></el-icon>
|
|
<el-icon v-else><CircleCloseFilled /></el-icon>
|
|
{{ modalTestResult ? t('datasources.messages.testSuccess') : t('datasources.messages.testFailed') }}
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-test" @click="testInModal" :disabled="modalTesting || !canSave">
|
|
<span v-if="modalTesting" class="spinner"></span>
|
|
<template v-else>{{ t('datasources.testButton') }}</template>
|
|
</button>
|
|
<div style="flex: 1"></div>
|
|
<button class="btn-secondary" @click="closeModal">{{ t('common.cancel') }}</button>
|
|
<button class="btn-primary" @click="saveDs" :disabled="!canSave">{{ t('common.save') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted, watch } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import {
|
|
ArrowDown,
|
|
CircleCheckFilled,
|
|
CircleCloseFilled,
|
|
CloseBold,
|
|
Coin,
|
|
Delete,
|
|
EditPen,
|
|
Hide,
|
|
Plus,
|
|
Select,
|
|
View,
|
|
} from '@element-plus/icons-vue'
|
|
import { datasourceApi } from '@/api/index'
|
|
|
|
const { t } = useI18n()
|
|
|
|
interface Datasource {
|
|
id: number | string
|
|
name: string
|
|
description: string
|
|
dbType: string
|
|
host: string
|
|
port: number
|
|
databaseName: string
|
|
username: string
|
|
password: string
|
|
extraParams: string
|
|
schemaName: string
|
|
enabled: boolean
|
|
lastTestOk: boolean | null
|
|
lastTestTime: string | null
|
|
}
|
|
|
|
const datasources = ref<Datasource[]>([])
|
|
const showModal = ref(false)
|
|
const editingDs = ref<Datasource | null>(null)
|
|
const detailDs = ref<Datasource | null>(null)
|
|
const testing = ref<number | string | null>(null)
|
|
const showPassword = ref(false)
|
|
const showAdvanced = ref(false)
|
|
const modalTesting = ref(false)
|
|
const modalTestResult = ref<boolean | null>(null)
|
|
|
|
const PORT_MAP: Record<string, number> = {
|
|
mysql: 3306, mariadb: 3306, postgresql: 5432, clickhouse: 8123,
|
|
}
|
|
|
|
const defaultPort = computed(() => PORT_MAP[form.value.dbType] || 3306)
|
|
|
|
const defaultForm = () => ({
|
|
name: '', description: '', dbType: 'mysql', host: '', port: 3306,
|
|
databaseName: '', username: '', password: '', extraParams: '', schemaName: '', enabled: true,
|
|
})
|
|
const form = ref<any>(defaultForm())
|
|
|
|
const canSave = computed(() => form.value.name && form.value.host && form.value.port && form.value.databaseName)
|
|
|
|
onMounted(loadDatasources)
|
|
|
|
async function loadDatasources() {
|
|
try {
|
|
const res: any = await datasourceApi.list()
|
|
datasources.value = res.data || []
|
|
} catch { datasources.value = [] }
|
|
}
|
|
|
|
function dbTypeLabel(dbType: string) {
|
|
const labels: Record<string, string> = { mysql: 'MySQL', postgresql: 'PostgreSQL', clickhouse: 'ClickHouse', mariadb: 'MariaDB' }
|
|
return labels[dbType] || dbType
|
|
}
|
|
|
|
function statusClass(ds: Datasource) {
|
|
if (!ds.enabled) return 'dot-disabled'
|
|
if (ds.lastTestOk === true) return 'dot-ok'
|
|
if (ds.lastTestOk === false) return 'dot-fail'
|
|
return 'dot-unknown'
|
|
}
|
|
|
|
function onDbTypeChange() {
|
|
form.value.port = PORT_MAP[form.value.dbType] || 3306
|
|
if (form.value.dbType !== 'postgresql') form.value.schemaName = ''
|
|
}
|
|
|
|
function openCreateModal() {
|
|
editingDs.value = null
|
|
form.value = defaultForm()
|
|
showPassword.value = false
|
|
showAdvanced.value = false
|
|
modalTestResult.value = null
|
|
showModal.value = true
|
|
}
|
|
|
|
function openEditModal(ds: Datasource) {
|
|
editingDs.value = ds
|
|
form.value = { ...ds }
|
|
showPassword.value = false
|
|
showAdvanced.value = !!(ds.extraParams)
|
|
modalTestResult.value = null
|
|
showModal.value = true
|
|
}
|
|
|
|
function closeModal() {
|
|
showModal.value = false
|
|
editingDs.value = null
|
|
modalTestResult.value = null
|
|
}
|
|
|
|
function openDetailModal(ds: Datasource) {
|
|
detailDs.value = ds
|
|
}
|
|
|
|
function closeDetailModal() {
|
|
detailDs.value = null
|
|
}
|
|
|
|
async function saveDs() {
|
|
try {
|
|
let saved: any
|
|
if (editingDs.value) {
|
|
saved = await datasourceApi.update(editingDs.value.id, form.value)
|
|
} else {
|
|
saved = await datasourceApi.create(form.value)
|
|
}
|
|
closeModal()
|
|
await loadDatasources()
|
|
const id = saved?.data?.id
|
|
if (id) autoTestAfterSave(id)
|
|
} catch (e: any) { ElMessage.error(e?.message || t('datasources.messages.saveFailed')) }
|
|
}
|
|
|
|
async function autoTestAfterSave(id: number | string) {
|
|
testing.value = id
|
|
try {
|
|
const res: any = await datasourceApi.test(id)
|
|
const ok = res.data?.success
|
|
ElMessage({ type: ok ? 'success' : 'warning', message: ok ? t('datasources.messages.testSuccess') : t('datasources.messages.testFailed') })
|
|
await loadDatasources()
|
|
} catch {
|
|
} finally { testing.value = null }
|
|
}
|
|
|
|
async function testInModal() {
|
|
if (!editingDs.value) {
|
|
try {
|
|
const saved: any = await datasourceApi.create(form.value)
|
|
editingDs.value = saved.data
|
|
form.value = { ...saved.data }
|
|
await loadDatasources()
|
|
} catch (e: any) {
|
|
ElMessage.error(e?.message || t('datasources.messages.saveFailed'))
|
|
return
|
|
}
|
|
} else {
|
|
try {
|
|
await datasourceApi.update(editingDs.value.id, form.value)
|
|
await loadDatasources()
|
|
} catch (e: any) {
|
|
ElMessage.error(e?.message || t('datasources.messages.saveFailed'))
|
|
return
|
|
}
|
|
}
|
|
|
|
modalTesting.value = true
|
|
modalTestResult.value = null
|
|
try {
|
|
const res: any = await datasourceApi.test(editingDs.value!.id)
|
|
modalTestResult.value = !!res.data?.success
|
|
await loadDatasources()
|
|
} catch { modalTestResult.value = false }
|
|
finally { modalTesting.value = false }
|
|
}
|
|
|
|
async function deleteDs(id: string | number) {
|
|
try { await ElMessageBox.confirm(t('datasources.messages.deleteConfirm'), t('datasources.messages.deleteTitle'), { type: 'warning' }) } catch { return }
|
|
try {
|
|
await datasourceApi.delete(id)
|
|
await loadDatasources()
|
|
} catch (e: any) { ElMessage.error(e?.message || t('datasources.messages.deleteFailed')) }
|
|
}
|
|
|
|
async function toggleDs(ds: Datasource) {
|
|
try {
|
|
await datasourceApi.toggle(ds.id, !ds.enabled)
|
|
await loadDatasources()
|
|
} catch (e: any) { ElMessage.error(e?.message || t('datasources.messages.toggleFailed')) }
|
|
}
|
|
|
|
async function testConnection(ds: Datasource) {
|
|
testing.value = ds.id
|
|
try {
|
|
const res: any = await datasourceApi.test(ds.id)
|
|
const ok = res.data?.success
|
|
ElMessage({ type: ok ? 'success' : 'error', message: ok ? t('datasources.messages.testSuccess') : t('datasources.messages.testFailed') })
|
|
await loadDatasources()
|
|
} catch (e: any) {
|
|
ElMessage.error(e?.message || t('datasources.messages.testFailed'))
|
|
} finally { testing.value = null }
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-container { height: 100%; overflow-y: auto; padding: 24px; background: var(--mc-bg); }
|
|
.page-container {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.page-shell {
|
|
min-height: 100%;
|
|
padding: 24px;
|
|
background:
|
|
radial-gradient(circle at top left, color-mix(in srgb, var(--mc-primary-bg) 34%, transparent) 0, transparent 36%),
|
|
linear-gradient(180deg, color-mix(in srgb, var(--mc-bg-elevated) 78%, white 22%) 0%, var(--mc-bg) 100%);
|
|
}
|
|
|
|
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
|
|
.page-lead { display: flex; flex-direction: column; gap: 8px; }
|
|
.page-kicker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: fit-content;
|
|
padding: 6px 12px;
|
|
border: 1px solid color-mix(in srgb, var(--mc-primary) 18%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--mc-primary-bg) 72%, var(--mc-bg-elevated) 28%);
|
|
color: var(--mc-primary-hover);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
.page-title { font-size: clamp(28px, 4vw, 40px); line-height: 0.95; font-weight: 800; color: var(--mc-text-primary); margin: 0; }
|
|
.page-desc { max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--mc-text-secondary); margin: 0; }
|
|
.btn-primary { display: flex; align-items: center; gap: 6px; padding: 10px 16px; background: var(--mc-primary); color: white; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
|
|
.btn-primary:hover { background: var(--mc-primary-hover); }
|
|
.btn-primary:disabled { background: var(--mc-border); cursor: not-allowed; }
|
|
.btn-secondary { padding: 8px 16px; background: var(--mc-bg-elevated); color: var(--mc-text-primary); border: 1px solid var(--mc-border); border-radius: 8px; font-size: 14px; cursor: pointer; }
|
|
.btn-secondary:hover { background: var(--mc-bg-sunken); }
|
|
.btn-test { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: transparent; color: var(--mc-primary); border: 1px solid var(--mc-primary); border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; min-width: 90px; justify-content: center; }
|
|
.btn-test:hover { background: var(--mc-primary-bg); }
|
|
.btn-test:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
.page-stage {
|
|
background: linear-gradient(180deg, color-mix(in srgb, var(--mc-bg-elevated) 96%, white 4%) 0%, var(--mc-bg-elevated) 100%);
|
|
border: 1px solid var(--mc-border);
|
|
border-radius: 18px;
|
|
padding: 12px;
|
|
box-shadow: 0 18px 48px rgba(152, 93, 63, 0.06);
|
|
}
|
|
|
|
.tools-table-wrap { background: var(--mc-bg-elevated); border: 1px solid var(--mc-border); border-radius: 14px; overflow-x: auto; overflow-y: hidden; }
|
|
.tools-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
|
|
.tools-table th { position: sticky; top: 0; z-index: 1; padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 700; color: var(--mc-text-secondary); text-transform: uppercase; letter-spacing: 0.08em; background: color-mix(in srgb, var(--mc-bg-sunken) 86%, white 14%); border-bottom: 1px solid var(--mc-border); }
|
|
.tool-row { border-bottom: 1px solid var(--mc-border-light); transition: background 0.1s; }
|
|
.tool-row:hover { background: var(--mc-bg-sunken); }
|
|
.tool-row:last-child { border-bottom: none; }
|
|
.tools-table td { padding: 16px; font-size: 14px; color: var(--mc-text-primary); vertical-align: top; }
|
|
.tool-info { display: flex; align-items: center; gap: 10px; }
|
|
.tool-icon-wrap { width: 32px; height: 32px; background: var(--mc-bg-sunken); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--mc-text-secondary); }
|
|
.tool-icon-wrap.icon-ok { background: #e8f5e9; color: #2e7d32; }
|
|
.tool-icon-wrap.icon-fail { background: #fce4ec; color: #c62828; }
|
|
.tool-name { max-width: 180px; font-weight: 700; color: var(--mc-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.tool-type-inline { margin-top: 6px; }
|
|
.tool-desc { font-size: 12px; color: var(--mc-text-tertiary); margin-top: 1px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.conn-info { display: flex; flex-direction: column; gap: 2px; }
|
|
.conn-host { max-width: 180px; background: var(--mc-bg-sunken); padding: 2px 8px; border-radius: 8px; font-size: 12px; color: var(--mc-text-primary); display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.conn-db { max-width: 200px; font-size: 12px; color: var(--mc-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.type-badge { padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 500; }
|
|
.type-mysql { background: #e8f4fd; color: #1a73e8; }
|
|
.type-postgresql { background: #e8f0fe; color: #336791; }
|
|
.type-clickhouse { background: #fff8e1; color: #e6a817; }
|
|
.type-mariadb { background: #fce4ec; color: #c0392b; }
|
|
|
|
.status-cell { display: flex; align-items: center; gap: 8px; }
|
|
.status-label { font-size: 12px; color: var(--mc-text-secondary); white-space: nowrap; }
|
|
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
|
.dot-ok { background: #4caf50; box-shadow: 0 0 4px rgba(76,175,80,0.4); }
|
|
.dot-fail { background: #f44336; box-shadow: 0 0 4px rgba(244,67,54,0.4); }
|
|
.dot-unknown { background: var(--mc-border); }
|
|
.dot-disabled { background: var(--mc-border); opacity: 0.5; }
|
|
|
|
.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; }
|
|
.toggle-switch input { opacity: 0; width: 0; height: 0; }
|
|
.toggle-slider { position: absolute; inset: 0; background: var(--mc-border); border-radius: 20px; transition: 0.2s; }
|
|
.toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: var(--mc-bg-elevated); border-radius: 50%; transition: 0.2s; }
|
|
.toggle-switch input:checked + .toggle-slider { background: var(--mc-primary); }
|
|
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
|
|
|
|
.row-actions { display: flex; gap: 6px; }
|
|
.row-btn { width: 30px; height: 30px; border: 1px solid var(--mc-border); background: var(--mc-bg-elevated); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--mc-text-secondary); transition: all 0.15s; }
|
|
.row-btn:hover { background: var(--mc-bg-sunken); }
|
|
.row-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.row-btn.danger:hover { background: var(--mc-danger-bg); border-color: var(--mc-danger); color: var(--mc-danger); }
|
|
.row-btn.test-btn:hover { border-color: var(--mc-primary); color: var(--mc-primary); }
|
|
|
|
.spinner { width: 12px; height: 12px; border: 2px solid var(--mc-border); border-top-color: var(--mc-primary); border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.empty-row { padding: 40px !important; }
|
|
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--mc-text-tertiary); }
|
|
.empty-icon { font-size: 32px; }
|
|
.empty-state p { font-size: 14px; margin: 0; }
|
|
|
|
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
|
|
.modal { background: var(--mc-bg-elevated); border: 1px solid var(--mc-border); border-radius: 16px; width: 100%; max-width: 580px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
|
|
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--mc-border-light); }
|
|
.modal-header h2 { font-size: 18px; font-weight: 600; color: var(--mc-text-primary); margin: 0; }
|
|
.modal-close { width: 32px; height: 32px; border: none; background: none; cursor: pointer; color: var(--mc-text-tertiary); display: flex; align-items: center; justify-content: center; border-radius: 6px; }
|
|
.modal-close:hover { background: var(--mc-bg-sunken); }
|
|
.modal-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
|
|
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
|
|
.detail-item { display: flex; flex-direction: column; gap: 6px; }
|
|
.detail-item-full { grid-column: 1 / -1; }
|
|
.detail-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mc-text-tertiary); }
|
|
.detail-value { font-size: 14px; line-height: 1.5; color: var(--mc-text-primary); word-break: break-word; }
|
|
.detail-subvalue { font-size: 12px; color: var(--mc-text-tertiary); }
|
|
.detail-block { padding: 12px 14px; border: 1px solid var(--mc-border); border-radius: 10px; background: var(--mc-bg-sunken); white-space: pre-wrap; }
|
|
|
|
.form-section-title { font-size: 13px; font-weight: 600; color: var(--mc-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--mc-border-light); }
|
|
.form-section-title:first-child { margin-top: 0; }
|
|
.advanced-toggle { cursor: pointer; display: flex; align-items: center; gap: 4px; user-select: none; }
|
|
.advanced-toggle svg { transition: transform 0.2s; }
|
|
.advanced-toggle svg.rotated { transform: rotate(180deg); }
|
|
|
|
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
|
.form-group.full-width { grid-column: 1 / -1; }
|
|
.form-label { font-size: 13px; font-weight: 500; color: var(--mc-text-secondary); }
|
|
.form-input { padding: 8px 12px; border: 1px solid var(--mc-border); border-radius: 8px; font-size: 14px; color: var(--mc-text-primary); outline: none; background: var(--mc-bg-sunken); width: 100%; }
|
|
.form-input:focus { border-color: var(--mc-primary); box-shadow: 0 0 0 2px rgba(217,119,87,0.1); }
|
|
.form-hint { font-size: 11px; color: var(--mc-text-tertiary); margin-top: 2px; }
|
|
|
|
.password-wrap { position: relative; }
|
|
.password-wrap .form-input { padding-right: 36px; }
|
|
.password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; color: var(--mc-text-tertiary); padding: 4px; display: flex; align-items: center; justify-content: center; }
|
|
.password-toggle:hover { color: var(--mc-text-secondary); }
|
|
|
|
.test-result { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; margin-top: 16px; }
|
|
.test-ok { background: #e8f5e9; color: #2e7d32; }
|
|
.test-fail { background: #fce4ec; color: #c62828; }
|
|
|
|
.modal-footer { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--mc-border-light); }
|
|
|
|
@media (max-width: 900px) {
|
|
.page-header { flex-direction: column; align-items: stretch; }
|
|
.btn-primary { width: 100%; justify-content: center; }
|
|
.detail-grid { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|