401 lines
15 KiB
Vue
401 lines
15 KiB
Vue
<template>
|
||
<div class="nginx-forwarding-container">
|
||
<!-- 顶部标题栏 -->
|
||
<div class="page-header">
|
||
<h1>Nginx转发管理</h1>
|
||
<p class="subtitle">管理 Nginx 反向代理规则与 HTTPS 证书</p>
|
||
</div>
|
||
|
||
<!-- 操作区域 -->
|
||
<div class="toolbar">
|
||
<div class="toolbar-left">
|
||
<el-tag type="warning" size="large">
|
||
<el-icon style="margin-right: 4px"><InfoFilled /></el-icon>
|
||
新增/修改/删除请在宝塔面板上操作
|
||
</el-tag>
|
||
</div>
|
||
<div class="toolbar-right">
|
||
<el-input
|
||
v-model="searchKeyword"
|
||
placeholder="搜索域名..."
|
||
clearable
|
||
style="width: 240px"
|
||
:prefix-icon="Search"
|
||
/>
|
||
<el-select v-model="protocolFilter" placeholder="协议筛选" clearable style="width: 120px; margin-left: 10px">
|
||
<el-option label="全部" value="" />
|
||
<el-option label="HTTP" value="http" />
|
||
<el-option label="HTTPS" value="https" />
|
||
</el-select>
|
||
<el-button @click="fetchRules" :loading="loading" style="margin-left: 10px">
|
||
<el-icon><Refresh /></el-icon>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 桌面端：表格视图 -->
|
||
<div v-if="!isMobile" class="table-container">
|
||
<el-table
|
||
:data="filteredRules"
|
||
v-loading="loading"
|
||
stripe
|
||
border
|
||
style="width: 100%"
|
||
empty-text="暂无转发规则，点击 [新增规则] 添加"
|
||
>
|
||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||
<el-table-column prop="domain" label="域名" min-width="200">
|
||
<template #default="{ row }">
|
||
<span class="domain-text">{{ row.domain }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="protocol" label="协议类型" width="100" align="center">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.protocol === 'https' ? 'success' : 'info'" effect="light">
|
||
{{ row.protocol.toUpperCase() }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="target" label="转发目标地址" min-width="280">
|
||
<template #default="{ row }">
|
||
<code class="target-address">{{ row.target }}</code>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="sslCert" label="SSL证书" min-width="120" align="center">
|
||
<template #default="{ row }">
|
||
<template v-if="row.sslCert">
|
||
<el-tooltip :content="row.sslCert" placement="top">
|
||
<el-tag type="warning" effect="plain" size="small">已配置</el-tag>
|
||
</el-tooltip>
|
||
</template>
|
||
<template v-else>
|
||
<span style="color: #c0c4cc">-</span>
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="createdBy" label="创建人" width="100" align="center">
|
||
<template #default="{ row }">
|
||
<span>{{ row.createdBy || '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="createdAt" label="创建时间" width="160" align="center">
|
||
<template #default="{ row }">
|
||
<span>{{ formatDate(row.createdAt) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="100" align="center" fixed="right">
|
||
<template #default="{ row }">
|
||
<template v-if="isSystemDomain(row.domain)">
|
||
<el-tag type="info" size="small">系统域名</el-tag>
|
||
</template>
|
||
<template v-else>
|
||
<el-button type="primary" link size="small" @click="showDetailDialog(row)">
|
||
<el-icon><View /></el-icon> 查看
|
||
</el-button>
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<!-- 移动端：卡片视图 -->
|
||
<div v-if="isMobile" class="mobile-card-list" v-loading="loading">
|
||
<div v-if="filteredRules.length === 0" class="mobile-empty">暂无转发规则</div>
|
||
<div v-for="row in filteredRules" :key="row.id" class="mobile-card">
|
||
<div class="card-top">
|
||
<el-tag :type="row.protocol === 'https' ? 'success' : 'info'" size="small" effect="dark">
|
||
{{ row.protocol.toUpperCase() }}
|
||
</el-tag>
|
||
<span class="card-domain">{{ row.domain }}</span>
|
||
<el-tag v-if="row.sslCert" type="warning" size="small" effect="plain">SSL</el-tag>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-row">
|
||
<span class="card-label">转发目标</span>
|
||
<code class="card-value">{{ row.target }}</code>
|
||
</div>
|
||
<div class="card-row">
|
||
<span class="card-label">创建人</span>
|
||
<span style="font-size:13px;color:#606266;">{{ row.createdBy || '-' }}</span>
|
||
</div>
|
||
<div class="card-row">
|
||
<span class="card-label">创建时间</span>
|
||
<span style="font-size:12px;color:#909399;">{{ formatDate(row.createdAt) }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-actions">
|
||
<template v-if="!isSystemDomain(row.domain)">
|
||
<el-button type="primary" size="small" @click="showDetailDialog(row)">
|
||
<el-icon><View /></el-icon> 查看详情
|
||
</el-button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 详情查看对话框（只读） -->
|
||
<el-dialog
|
||
v-model="dialogVisible"
|
||
:title="'转发规则详情 — ' + detailData.domain"
|
||
width="900px"
|
||
:close-on-click-modal="false"
|
||
destroy-on-close
|
||
>
|
||
<div v-loading="detailLoading" style="min-height: 300px">
|
||
<!-- 基本信息 -->
|
||
<el-descriptions :column="2" border size="default" label-width="100px" style="margin-bottom: 16px">
|
||
<el-descriptions-item label="域名">
|
||
<span class="detail-domain">{{ detailData.domain }}</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="协议类型">
|
||
<el-tag :type="detailData.protocol === 'https' ? 'success' : 'info'" effect="light">
|
||
{{ detailData.protocol?.toUpperCase() }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="转发目标" :span="2">
|
||
<code class="target-address">{{ detailData.target }}</code>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<!-- SSL证书信息 -->
|
||
<template v-if="detailData.protocol === 'https' || detailData.sslStatus">
|
||
<el-divider content-position="left">
|
||
<el-icon><Lock /></el-icon> SSL 证书
|
||
</el-divider>
|
||
<el-descriptions :column="2" border size="small" style="margin-bottom: 16px">
|
||
<el-descriptions-item label="证书状态">
|
||
<el-tag v-if="detailData.sslStatus === 'valid'" type="success" size="small">有效</el-tag>
|
||
<el-tag v-else-if="detailData.sslStatus === 'none'" type="info" size="small">未配置</el-tag>
|
||
<el-tag v-else-if="detailData.sslStatus === 'error'" type="danger" size="small">获取失败</el-tag>
|
||
<el-tag v-else type="warning" size="small">{{ detailData.sslStatus || '未知' }}</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="到期时间">
|
||
<span v-if="detailData.sslExpireDate">{{ formatDate(detailData.sslExpireDate) }}</span>
|
||
<span v-else style="color:#C0C4CC">-</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="剩余天数" v-if="detailData.sslDaysLeft !== undefined">
|
||
<span :style="{ color: detailData.sslDaysLeft <= 15 ? '#F56C6C' : detailData.sslDaysLeft <= 30 ? '#E6A23C' : '#67C23A', fontWeight: 'bold' }">
|
||
{{ detailData.sslDaysLeft }} 天
|
||
</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="验证方式" v-if="detailData.sslAuthType">
|
||
<el-tag size="small" effect="plain">{{ detailData.sslAuthType?.toUpperCase() }}</el-tag>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</template>
|
||
|
||
<!-- Nginx 配置文件内容 -->
|
||
<el-divider content-position="left">
|
||
<el-icon><Document /></el-icon> 配置文件
|
||
</el-divider>
|
||
<el-input
|
||
:model-value="detailData.configContent || '加载中...'"
|
||
type="textarea"
|
||
:rows="16"
|
||
readonly
|
||
style="font-family: 'Consolas', 'Courier New', monospace; font-size: 13px;"
|
||
/>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<el-button @click="dialogVisible = false">关闭</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed, onMounted } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { Refresh, View, InfoFilled, Lock, Document } from '@element-plus/icons-vue'
|
||
import { getRules, getRuleConfig } from '../api/nginxApi'
|
||
import { useMobile } from '../composables/useMobile'
|
||
|
||
const { isMobile } = useMobile()
|
||
|
||
// ─── 状态 ───────────────────────────────────
|
||
const loading = ref(false)
|
||
const dialogVisible = ref(false)
|
||
const detailLoading = ref(false)
|
||
|
||
const rules = ref([])
|
||
const searchKeyword = ref('')
|
||
const protocolFilter = ref('')
|
||
|
||
const detailData = reactive({
|
||
domain: '',
|
||
protocol: '',
|
||
target: '',
|
||
configContent: '',
|
||
sslStatus: '',
|
||
sslExpireDate: '',
|
||
sslDaysLeft: null,
|
||
sslAuthType: ''
|
||
})
|
||
|
||
// ─── 域名判断 ────────────────────────────────
|
||
const SYSTEM_DOMAINS = ['zgitm.com', 'www.zgitm.com']
|
||
function isSystemDomain(domain) {
|
||
return SYSTEM_DOMAINS.includes(domain?.toLowerCase())
|
||
}
|
||
|
||
/** 格式化日期为本地字符串 */
|
||
function formatDate(dateStr) {
|
||
if (!dateStr) return '-'
|
||
try {
|
||
// 处理 ISO 格式或时间戳
|
||
const d = new Date(dateStr)
|
||
if (isNaN(d.getTime())) return dateStr
|
||
return d.toLocaleString('zh-CN', {
|
||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||
hour: '2-digit', minute: '2-digit'
|
||
})
|
||
} catch {
|
||
return dateStr || '-'
|
||
}
|
||
}
|
||
|
||
// ─── 计算属性 ────────────────────────────────
|
||
const filteredRules = computed(() => {
|
||
let result = rules.value
|
||
if (searchKeyword.value) {
|
||
const keyword = searchKeyword.value.toLowerCase()
|
||
result = result.filter(r => r.domain.toLowerCase().includes(keyword))
|
||
}
|
||
if (protocolFilter.value) {
|
||
result = result.filter(r => r.protocol === protocolFilter.value)
|
||
}
|
||
return result
|
||
})
|
||
|
||
// ─── 方法 ───────────────────────────────────
|
||
|
||
/** 获取规则列表 */
|
||
async function fetchRules() {
|
||
loading.value = true
|
||
try {
|
||
const res = await getRules()
|
||
rules.value = res.data || []
|
||
} catch (e) {
|
||
ElMessage.error('获取规则列表失败：' + e.message)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
/** 显示详情对话框 — 调用后端获取配置文件 + SSL信息 */
|
||
async function showDetailDialog(row) {
|
||
dialogVisible.value = true
|
||
detailLoading.value = true
|
||
|
||
// 先填充基本信息
|
||
detailData.domain = row.domain
|
||
detailData.protocol = row.protocol
|
||
detailData.target = row.target
|
||
detailData.configContent = ''
|
||
detailData.sslStatus = ''
|
||
detailData.sslExpireDate = ''
|
||
detailData.sslDaysLeft = null
|
||
detailData.sslAuthType = ''
|
||
|
||
try {
|
||
const res = await getRuleConfig(row.id)
|
||
const data = res.data?.data || res.data
|
||
if (data) {
|
||
detailData.configContent = data.configContent || ''
|
||
detailData.sslStatus = data.sslStatus || ''
|
||
detailData.sslExpireDate = data.sslExpireDate || ''
|
||
detailData.sslDaysLeft = data.sslDaysLeft
|
||
detailData.sslAuthType = data.sslAuthType || ''
|
||
}
|
||
} catch (e) {
|
||
ElMessage.warning('获取详情失败：' + e.message)
|
||
detailData.configContent = '获取配置文件失败'
|
||
} finally {
|
||
detailLoading.value = false
|
||
}
|
||
}
|
||
|
||
// ─── 生命周期 ────────────────────────────────
|
||
onMounted(() => {
|
||
fetchRules()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.nginx-forwarding-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
|
||
.page-header { margin-bottom: 20px; }
|
||
.page-header h1 { margin: 0; font-size: 24px; color: #303133; }
|
||
.page-header .subtitle { margin: 4px 0 0; color: #909399; font-size: 14px; }
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||
|
||
.table-container {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.domain-text { font-weight: 500; color: #303133; }
|
||
.target-address { background: #f5f7fa; padding: 2px 8px; border-radius: 4px; font-size: 13px; color: #e6a23c; }
|
||
|
||
.detail-domain { font-size: 16px; font-weight: 600; color: #303133; }
|
||
|
||
/* ════════════════════════════════════════════════ */
|
||
/* 移动端 (≤768px) */
|
||
/* ════════════════════════════════════════════════ */
|
||
@media (max-width: 768px) {
|
||
.nginx-forwarding-container { padding: 8px; }
|
||
.page-header h1 { font-size: 18px; }
|
||
.page-header .subtitle { font-size: 12px; }
|
||
|
||
.toolbar { flex-direction: column; align-items: stretch; }
|
||
.toolbar-left, .toolbar-right { width: 100%; }
|
||
.toolbar-right :deep(.el-input) { width: 100% !important; }
|
||
.toolbar-right :deep(.el-select) { width: 100% !important; margin-left: 0 !important; }
|
||
|
||
/* 隐藏桌面表格，改用卡片 */
|
||
.table-container { display: none; }
|
||
|
||
/* 移动端卡片列表 */
|
||
.mobile-card-list { display: flex; flex-direction: column; gap: 10px; }
|
||
.mobile-empty { text-align: center; color: #C0C4CC; padding: 40px 0; font-size: 14px; }
|
||
|
||
.mobile-card {
|
||
background: #fff; border-radius: 10px; padding: 14px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
}
|
||
.card-top {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.card-domain { font-size: 15px; font-weight: 600; color: #303133; flex:1; word-break: break-all; }
|
||
.card-body { padding: 10px 0; }
|
||
.card-row { display: flex; align-items: flex-start; margin-bottom: 6px; }
|
||
.card-label { color: #909399; font-size: 12px; width: 56px; flex-shrink: 0; padding-top: 1px; }
|
||
.card-value { font-size: 13px; color: #E6A23C; background: #fdf6ec; padding: 2px 6px; border-radius: 4px; word-break: break-all; }
|
||
|
||
.card-actions {
|
||
display: flex; gap: 8px; padding-top: 10px;
|
||
border-top: 1px solid #f0f0f0; justify-content: flex-end;
|
||
}
|
||
.card-actions .el-button { min-height: 36px; min-width: 64px; }
|
||
|
||
/* 对话框全屏 */
|
||
:deep(.el-dialog) { width: 95% !important; margin: 2vh auto !important; }
|
||
:deep(.el-dialog__body) { padding: 12px 8px; }
|
||
:deep(.el-form-item__label) { width: 70px !important; font-size: 13px; }
|
||
}
|
||
</style>
|