feat(web): 公网反代页协议列按启用 HTTPS 自动识别

- 新增 protocolOf():从规则 options 的 https_disabled 反推入口协议(规则 type 恒为 http,不能代表入口协议)
- 协议列改用 StatusBadge:HTTPS 绿色 / HTTP 灰色,悬停说明 443 终结 TLS 与是否强制 301 跳转
- 列宽 80→90,scroll-x 1780→1790
This commit is contained in:
2026-09-23 15:44:45 +08:00
parent 356dae2312
commit ca309dbf42
+19 -3
View File
@@ -135,7 +135,7 @@
:data="candidates" :data="candidates"
:bordered="false" :bordered="false"
size="small" size="small"
:scroll-x="1780" :scroll-x="1790"
:row-key="(row: FrpProxy) => row.id" :row-key="(row: FrpProxy) => row.id"
/> />
</div> </div>
@@ -523,6 +523,19 @@ function openDomain(candidate: FrpProxy, domain: string) {
window.open(`${candidate.type === 'https' ? 'https' : 'http'}://${domain}`, '_blank', 'noopener') window.open(`${candidate.type === 'https' ? 'https' : 'http'}://${domain}`, '_blank', 'noopener')
} }
// 协议:公网反代的规则 type 恒为 http,入口协议由部署设置的「启用 HTTPS」决定,故按 options 自动识别
function protocolOf(candidate: FrpProxy) {
const httpsEnabled = !(candidate.options?.https_disabled ?? false)
const redirect = candidate.options?.redirect_https ?? false
return {
label: httpsEnabled ? 'HTTPS' : 'HTTP',
kind: (httpsEnabled ? 'success' : 'disabled') as BadgeKind,
detail: httpsEnabled
? `443 由 Nginx 终结 TLS${redirect ? ',且 80 端口强制 301 跳转' : ',80 端口同时可用'}`
: '仅 80 端口明文提供服务(部署设置里未启用 HTTPS)',
}
}
// 采集失败时把原因挂到四个流量单元格的 title 上,不再单占一列 // 采集失败时把原因挂到四个流量单元格的 title 上,不再单占一列
function trafficErrorOf(candidate: FrpProxy) { function trafficErrorOf(candidate: FrpProxy) {
return trafficErrors.value[String(candidate.id)] || undefined return trafficErrors.value[String(candidate.id)] || undefined
@@ -548,8 +561,11 @@ const columns = computed<DataTableColumns<FrpProxy>>(() => [
]), ]),
}, },
{ {
title: '协议', key: 'protocol', width: 80, title: '协议', key: 'protocol', width: 90,
render: (row) => h('span', { class: 'mono' }, row.type.toUpperCase()), render: (row) => {
const protocol = protocolOf(row)
return h('span', { title: protocol.detail }, [h(StatusBadge, { kind: protocol.kind, text: protocol.label })])
},
}, },
{ {
title: '上游 / 回源', key: 'upstream', width: 200, title: '上游 / 回源', key: 'upstream', width: 200,