改用element
增加acme多配置
This commit is contained in:
+243
-113
@@ -1,149 +1,279 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-bold">域名管理</h2>
|
||||
<router-link to="/domains/new" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm">
|
||||
+ 新增域名
|
||||
</router-link>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
|
||||
<h2 style="font-size: 20px; font-weight: 700; margin: 0;">域名管理</h2>
|
||||
<el-button type="primary" round :icon="Plus" @click="openCreate">新增域名</el-button>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-gray-500 font-medium">域名</th>
|
||||
<th class="px-6 py-3 text-left text-gray-500 font-medium">服务器</th>
|
||||
<th class="px-6 py-3 text-left text-gray-500 font-medium">证书路径</th>
|
||||
<th class="px-6 py-3 text-left text-gray-500 font-medium">版本</th>
|
||||
<th class="px-6 py-3 text-left text-gray-500 font-medium">证书到期</th>
|
||||
<th class="px-6 py-3 text-right text-gray-500 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-50">
|
||||
<tr v-for="d in domains" :key="d.id">
|
||||
<td class="px-6 py-3 font-medium">{{ d.domain }}</td>
|
||||
<td class="px-6 py-3 text-gray-500">{{ d.server_name }}</td>
|
||||
<td class="px-6 py-3">
|
||||
<code class="text-xs bg-gray-100 px-2 py-0.5 rounded">{{ d.cert_dir }}</code>
|
||||
</td>
|
||||
<td class="px-6 py-3">
|
||||
<code class="text-xs bg-gray-100 px-2 py-0.5 rounded">{{ d.version }}</code>
|
||||
</td>
|
||||
<td class="px-6 py-3">
|
||||
<span v-if="d.cert_not_after" :class="expiryClass(d.cert_not_after)" class="text-xs">
|
||||
{{ formatDate(d.cert_not_after) }}
|
||||
</span>
|
||||
<span v-else class="text-gray-400 text-xs">-</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-right space-x-2">
|
||||
<button @click="handleIssue(d)" :disabled="d._issuing" class="text-orange-600 hover:underline text-xs disabled:opacity-50">
|
||||
{{ d._issuing ? '申请中...' : '申请证书' }}
|
||||
</button>
|
||||
<button @click="downloadCert(d, 'fullchain')" class="text-teal-600 hover:underline text-xs">下载证书</button>
|
||||
<button @click="downloadCert(d, 'private')" class="text-teal-600 hover:underline text-xs">下载密钥</button>
|
||||
<router-link :to="`/domains/${d.id}/edit`" class="text-blue-600 hover:underline text-xs">编辑</router-link>
|
||||
<button @click="copyDeployCmd(d)" class="text-green-600 hover:underline text-xs">复制部署命令</button>
|
||||
<router-link :to="`/script/${d.domain}?server=${d.server_name}`" class="text-purple-600 hover:underline text-xs">查看脚本</router-link>
|
||||
<button @click="handleDelete(d)" class="text-red-600 hover:underline text-xs">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!domains.length">
|
||||
<td colspan="5" class="px-6 py-8 text-center text-gray-400">暂无域名</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<el-card>
|
||||
<el-table :data="domains" stripe style="width: 100%;">
|
||||
<el-table-column prop="domain" label="域名" width="240">
|
||||
<template #default="{ row }">
|
||||
<span style="font-weight: 600;">{{ row.domain }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="服务器" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.server_name" size="small">{{ row.server_name }}</el-tag>
|
||||
<span v-else style="color: #c0c4cc;">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="ACME 配置" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.acme_config_name" type="info" size="small">{{ row.acme_config_name }}</el-tag>
|
||||
<span v-else style="color: #c0c4cc;">默认</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.deploy_success === true ? 'success' : row.deploy_success === false ? 'danger' : 'info'" size="small">
|
||||
{{ row.deploy_success === true ? '成功' : row.deploy_success === false ? '失败' : '未部署' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="过期时间" width="170">
|
||||
<template #default="{ row }">
|
||||
<span :style="{ color: isExpiringSoon(row.expiry_date) ? '#f56c6c' : '#606266' }">
|
||||
{{ row.expiry_date || '-' }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="版本" width="70">
|
||||
<template #default="{ row }">{{ row.version }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="240" align="right">
|
||||
<template #default="{ row }">
|
||||
<div style="display: flex; align-items: center; gap: 4px; justify-content: flex-end;">
|
||||
<el-button type="primary" link size="small" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button type="primary" link size="small" @click="openScript(row)">脚本</el-button>
|
||||
<el-dropdown trigger="click" @command="(cmd) => handleCertAction(cmd, row)">
|
||||
<el-button type="primary" link size="small">
|
||||
证书 <el-icon class="el-icon--right"><ArrowDown /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="fullchain">下载证书</el-dropdown-item>
|
||||
<el-dropdown-item command="private">下载私钥</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 复制成功提示 -->
|
||||
<div v-if="showCopied" class="fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg text-sm transition-opacity">
|
||||
已复制到剪贴板
|
||||
</div>
|
||||
<!-- 新增/编辑域名弹窗 -->
|
||||
<el-dialog
|
||||
v-model="formDialogVisible"
|
||||
:title="isEdit ? '编辑域名' : '新增域名'"
|
||||
width="500px"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form :model="domainForm" label-width="100px">
|
||||
<el-form-item label="域名">
|
||||
<el-input v-model="domainForm.domain" placeholder="example.com 或 *.example.com" :disabled="isEdit" />
|
||||
</el-form-item>
|
||||
<el-form-item label="关联服务器">
|
||||
<el-select v-model="domainForm.server_id" placeholder="选择服务器" style="width: 100%;" clearable>
|
||||
<el-option v-for="s in serverList" :key="s.id" :label="s.name" :value="s.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="ACME 配置">
|
||||
<el-select v-model="domainForm.acme_config_id" placeholder="使用默认配置" style="width: 100%;" clearable>
|
||||
<el-option v-for="c in acmeConfigs" :key="c.id" :label="c.name" :value="c.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button round @click="formDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" round :loading="saving" @click="saveDomain">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 部署脚本弹窗 -->
|
||||
<el-dialog
|
||||
v-model="scriptDialogVisible"
|
||||
title="部署脚本"
|
||||
width="680px"
|
||||
destroy-on-close
|
||||
>
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
|
||||
<span style="font-weight: 600; font-size: 16px;">{{ scriptDomain?.domain }}</span>
|
||||
<el-tag v-if="scriptDomain?.server_name" type="info" size="small">{{ scriptDomain.server_name }}</el-tag>
|
||||
</div>
|
||||
<p style="color: #909399; font-size: 13px; margin-bottom: 16px;">
|
||||
将以下命令添加到服务器的定时任务中，实现证书自动拉取与部署。
|
||||
</p>
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
|
||||
<el-radio-group v-model="scriptOs" size="small" @change="loadScript">
|
||||
<el-radio-button value="linux">Linux</el-radio-button>
|
||||
<el-radio-button value="windows">Windows</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-button type="primary" round size="small" :icon="DocumentCopy" @click="copyScript">复制命令</el-button>
|
||||
<el-button round size="small" :icon="Download" @click="downloadScript">下载脚本</el-button>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="scriptContent"
|
||||
type="textarea"
|
||||
:rows="12"
|
||||
readonly
|
||||
style="font-family: 'Courier New', monospace;"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getDomains, deleteDomain } from '../api'
|
||||
import { Plus, ArrowDown, DocumentCopy, Download } from '@element-plus/icons-vue'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import { getDomains, createDomain, updateDomain, deleteDomain, getServers } from '../api'
|
||||
import api from '../api'
|
||||
import { useToast } from '../composables/useToast'
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const domains = ref([])
|
||||
const showCopied = ref(false)
|
||||
const serverList = ref([])
|
||||
const acmeConfigs = ref([])
|
||||
|
||||
// 域名表单弹窗
|
||||
const formDialogVisible = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const editId = ref(null)
|
||||
const saving = ref(false)
|
||||
const domainForm = ref({ domain: '', server_id: null, acme_config_id: null })
|
||||
|
||||
// 脚本弹窗
|
||||
const scriptDialogVisible = ref(false)
|
||||
const scriptDomain = ref(null)
|
||||
const scriptOs = ref('linux')
|
||||
const scriptContent = ref('')
|
||||
|
||||
const load = async () => {
|
||||
const { data } = await getDomains()
|
||||
domains.value = data.map(d => ({ ...d, _issuing: false }))
|
||||
domains.value = data
|
||||
}
|
||||
|
||||
const formatDate = (iso) => {
|
||||
if (!iso) return '-'
|
||||
return new Date(iso).toLocaleDateString('zh-CN')
|
||||
const loadServers = async () => {
|
||||
const { data } = await getServers()
|
||||
serverList.value = data
|
||||
}
|
||||
|
||||
const expiryClass = (iso) => {
|
||||
if (!iso) return ''
|
||||
const days = Math.ceil((new Date(iso) - new Date()) / 86400000)
|
||||
if (days <= 7) return 'text-red-600 font-medium'
|
||||
if (days <= 30) return 'text-orange-600'
|
||||
return 'text-green-600'
|
||||
const loadAcmeConfigs = async () => {
|
||||
const { data } = await api.get('/acme/configs')
|
||||
acmeConfigs.value = data
|
||||
}
|
||||
|
||||
const handleIssue = async (d) => {
|
||||
if (!confirm(`确认为 "${d.domain}" 申请/续签证书？`)) return
|
||||
d._issuing = true
|
||||
const isExpiringSoon = (dateStr) => {
|
||||
if (!dateStr) return false
|
||||
const diff = (new Date(dateStr) - new Date()) / (1000 * 60 * 60 * 24)
|
||||
return diff < 30
|
||||
}
|
||||
|
||||
// ---- 域名表单 ----
|
||||
const openCreate = () => {
|
||||
isEdit.value = false
|
||||
editId.value = null
|
||||
domainForm.value = { domain: '', server_id: null, acme_config_id: null }
|
||||
formDialogVisible.value = true
|
||||
}
|
||||
|
||||
const openEdit = (row) => {
|
||||
isEdit.value = true
|
||||
editId.value = row.id
|
||||
domainForm.value = { domain: row.domain, server_id: row.server_id, acme_config_id: row.acme_config_id }
|
||||
formDialogVisible.value = true
|
||||
}
|
||||
|
||||
const saveDomain = async () => {
|
||||
saving.value = true
|
||||
try {
|
||||
const { data } = await api.post(`/acme/issue/${d.id}`)
|
||||
data.success ? toast.success(`申请成功: ${data.message}`) : toast.error(`申请失败: ${data.message}`)
|
||||
if (isEdit.value) {
|
||||
await updateDomain(editId.value, domainForm.value)
|
||||
} else {
|
||||
await createDomain(domainForm.value)
|
||||
}
|
||||
ElMessage.success('保存成功')
|
||||
formDialogVisible.value = false
|
||||
await load()
|
||||
} catch (e) {
|
||||
toast.error('操作失败: ' + (e.response?.data?.detail || e.message))
|
||||
ElMessage.error(e.response?.data?.detail || '保存失败')
|
||||
} finally {
|
||||
d._issuing = false
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (d) => {
|
||||
if (!confirm(`确认删除域名 "${d.domain}"？`)) return
|
||||
await deleteDomain(d.id)
|
||||
await load()
|
||||
}
|
||||
|
||||
const copyDeployCmd = async (d) => {
|
||||
// 根据服务器平台生成不同的部署命令
|
||||
const baseUrl = window.location.origin
|
||||
const safeName = d.domain.replace(/^\*\./, '') // 泛域名去掉 *.
|
||||
const encodedDomain = encodeURIComponent(d.domain)
|
||||
let cmd
|
||||
if (d.platform === 'windows') {
|
||||
cmd = `Invoke-WebRequest "${baseUrl}/api/script?domain=${encodedDomain}&server=${encodeURIComponent(d.server_name)}" -OutFile C:\\scripts\\deploy-cert-${safeName}.ps1`
|
||||
} else {
|
||||
cmd = `curl -fsSL "${baseUrl}/api/script?domain=${encodedDomain}&server=${encodeURIComponent(d.server_name)}" -o /usr/local/bin/deploy-cert-${safeName}.sh && chmod +x /usr/local/bin/deploy-cert-${safeName}.sh`
|
||||
// ---- 脚本弹窗 ----
|
||||
const openScript = async (row) => {
|
||||
if (!row.server_name) {
|
||||
ElMessage.warning('该域名未关联服务器，请先编辑关联服务器')
|
||||
return
|
||||
}
|
||||
await navigator.clipboard.writeText(cmd)
|
||||
showCopied.value = true
|
||||
setTimeout(() => { showCopied.value = false }, 2000)
|
||||
scriptDomain.value = row
|
||||
scriptOs.value = 'linux'
|
||||
scriptContent.value = ''
|
||||
scriptDialogVisible.value = true
|
||||
await loadScript()
|
||||
}
|
||||
|
||||
const downloadCert = (d, fileType) => {
|
||||
const token = localStorage.getItem('admin_token')
|
||||
const url = `/admin/api/cert-download/${d.id}/${fileType}`
|
||||
// 用 fetch 下载，带上 token
|
||||
fetch(url, { headers: { Authorization: `Bearer ${token}` } })
|
||||
.then(res => {
|
||||
if (!res.ok) return res.json().then(e => { throw new Error(e.detail || '下载失败') })
|
||||
return res.blob()
|
||||
const loadScript = async () => {
|
||||
try {
|
||||
const resp = await api.get('/script', {
|
||||
params: {
|
||||
domain: scriptDomain.value.domain,
|
||||
server_name: scriptDomain.value.server_name,
|
||||
os: scriptOs.value,
|
||||
},
|
||||
})
|
||||
.then(blob => {
|
||||
const a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = fileType === 'fullchain' ? 'fullchain.pem' : 'private.key'
|
||||
a.click()
|
||||
URL.revokeObjectURL(a.href)
|
||||
})
|
||||
.catch(e => toast.error(e.message))
|
||||
scriptContent.value = resp.data.script
|
||||
} catch (e) {
|
||||
scriptContent.value = '# 加载失败: ' + (e.response?.data?.detail || e.message)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
const copyScript = () => {
|
||||
navigator.clipboard.writeText(scriptContent.value).then(() => {
|
||||
ElMessage.success('已复制到剪贴板')
|
||||
})
|
||||
}
|
||||
|
||||
const downloadScript = () => {
|
||||
const ext = scriptOs.value === 'windows' ? '.ps1' : '.sh'
|
||||
const blob = new Blob([scriptContent.value], { type: 'text/plain' })
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = `deploy-${scriptDomain.value.domain}${ext}`
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
}
|
||||
|
||||
// ---- 证书下载 ----
|
||||
const handleCertAction = async (cmd, row) => {
|
||||
try {
|
||||
const { data } = await api.get(`/cert-download/${row.id}/${cmd}`, { responseType: 'blob' })
|
||||
const blob = new Blob([data])
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = cmd === 'fullchain' ? `${row.domain}.pem` : `${row.domain}.key`
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
} catch (e) {
|
||||
ElMessage.error(e.response?.data?.detail || '下载失败')
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 删除 ----
|
||||
const handleDelete = async (row) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认删除域名 "${row.domain}"？`, '确认删除', { type: 'warning' })
|
||||
await deleteDomain(row.id)
|
||||
await load()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
load()
|
||||
loadServers()
|
||||
loadAcmeConfigs()
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user