opsx
ef7eb378d2
- backend: 新增 GRE 隧道实现（ip tunnel 点对点互联），binmgr 支持 iproute2 - backend: api/identity 调整，各协议 service（gre/ikev2/ipsec/l2tp/openvpn）统一改动 - backend: OpenVPN 认证辅助与用户口令同步逻辑完善 - frontend: 协议图标/向导/编辑器支持 GRE，VPN 用户页重构（234 行） - frontend: 新增 RouteListInput 路由列表输入组件，Dashboard/Layout 优化 - i18n: 中英文文案同步更新 - test: 新增 binmgr/common/gre 单测，openvpn 测试补充 - docs: README 补充 GRE 说明，默认监听端口 8080 → 18080 - chore: .gitignore 增加 opsx-vpn.previous（构建备份二进制）
81 lines
5.2 KiB
Vue
81 lines
5.2 KiB
Vue
<!--
|
||
ProtocolIcon.vue — 专业协议品牌 SVG 图标组件 // Logan.Li
|
||
WireGuard / OpenVPN 路径来自 Simple Icons (simpleicons.org)，遵循 CC0 协议。
|
||
IPSec / L2TP / IKEv2 / FRP / Custom 为原创矢量图标（网络/安全语义）。
|
||
用法：<ProtocolIcon protocol="wireguard" :size="32" />
|
||
-->
|
||
<template>
|
||
<svg
|
||
:width="size" :height="size" viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
:aria-label="label" role="img"
|
||
fill="currentColor"
|
||
>
|
||
<title>{{ label }}</title>
|
||
<path :d="pathData" />
|
||
</svg>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import { useI18n } from 'vue-i18n'
|
||
|
||
const { t } = useI18n()
|
||
|
||
const props = defineProps({
|
||
protocol: { type: String, required: true },
|
||
size: { type: [Number, String], default: 28 },
|
||
})
|
||
|
||
// 品牌名称映射
|
||
const NAMES = computed(() => ({
|
||
wireguard: 'WireGuard',
|
||
ipsec: 'IPSec',
|
||
ikev2: 'IKEv2',
|
||
l2tp: 'L2TP',
|
||
gre: 'GRE',
|
||
frp: 'FRP',
|
||
openvpn: 'OpenVPN',
|
||
custom: t('protocolIcon.custom'),
|
||
}))
|
||
|
||
const label = computed(() => {
|
||
const key = props.protocol.startsWith('custom:') ? 'custom' : props.protocol
|
||
return NAMES.value[key] || props.protocol
|
||
})
|
||
|
||
// SVG path 数据
|
||
// WireGuard / OpenVPN: 官方 Simple Icons 路径 (https://simpleicons.org)
|
||
// 其余: 原创矢量图标
|
||
const ICON_PATHS = {
|
||
// WireGuard 官方 Logo (Simple Icons, CC0)
|
||
wireguard: 'M23.98 11.645S24.533 0 11.735 0C.418 0 .064 11.17.064 11.17S-1.6 24 11.997 24C25.04 24 23.98 11.645 23.98 11.645zM8.155 7.576c2.4-1.47 5.469-.571 6.618 1.638.218.419.246 1.063.108 1.503-.477 1.516-1.601 2.366-3.145 2.728.455-.39.817-.832.933-1.442a2.112 2.112 0 0 0-.364-1.677 2.14 2.14 0 0 0-2.465-.75c-.95.36-1.47 1.228-1.377 2.294.087.99.839 1.632 2.245 1.876-.21.111-.372.193-.53.281a5.113 5.113 0 0 0-1.644 1.43c-.143.192-.24.208-.458.075-2.827-1.729-3.009-6.067.078-7.956zM6.04 18.258c-.455.116-.895.286-1.359.438.227-1.532 2.021-2.943 3.539-2.782a3.91 3.91 0 0 0-.74 2.072c-.504.093-.98.155-1.44.272zM15.703 3.3c.448.017.898.01 1.347.02a2.324 2.324 0 0 1 .334.047 3.249 3.249 0 0 1-.34.434c-.16.15-.341.296-.573.069-.055-.055-.187-.042-.283-.044-.447-.005-.894-.02-1.34-.003a8.323 8.323 0 0 0-1.154.118c-.072.013-.178.25-.146.338.078.207.191.435.359.567.619.49 1.277.928 1.9 1.413.604.472 1.167.99 1.51 1.7.446.928.46 1.9.267 2.877-.322 1.63-1.147 2.98-2.483 3.962-.538.395-1.205.62-1.821.903-.543.25-1.1.465-1.644.712-.98.446-1.53 1.51-1.369 2.615.149 1.015 1.04 1.862 2.059 2.037 1.223.21 2.486-.586 2.785-1.83.336-1.397-.423-2.646-1.845-3.024l-.256-.066c.38-.17.708-.291 1.012-.458q.793-.437 1.558-.925c.15-.096.231-.096.36.014.977.846 1.56 1.898 1.724 3.187.27 2.135-.74 4.096-2.646 5.101-2.948 1.555-6.557-.215-7.208-3.484-.558-2.8 1.418-5.34 3.797-5.83 1.023-.211 1.958-.637 2.685-1.425.47-.508.697-.944.775-1.141a3.165 3.165 0 0 0 .217-1.158 2.71 2.71 0 0 0-.237-.992c-.248-.566-1.2-1.466-1.435-1.656l-2.24-1.754c-.079-.065-.168-.06-.36-.047-.23.016-.815.048-1.067-.018.204-.155.76-.38 1-.56-.726-.49-1.554-.314-2.315-.46.176-.328 1.046-.831 1.541-.888a7.323 7.323 0 0 0-.135-.822c-.03-.111-.154-.22-.263-.283-.262-.154-.541-.281-.843-.434a1.755 1.755 0 0 1 .906-.28 3.385 3.385 0 0 1 .908.088c.54.123.97.042 1.399-.324-.338-.136-.676-.26-1.003-.407a9.843 9.843 0 0 1-.942-.493c.85.118 1.671.437 2.54.32l.022-.118-2.018-.47c1.203-.11 2.323-.128 3.384.388.299.146.61.266.89...',
|
||
|
||
// OpenVPN 官方 Logo (Simple Icons, CC0)
|
||
openvpn: 'M12 .357C5.385.357 0 5.69 0 12.254c0 4.36 2.358 8.153 5.896 10.204l.77-5.076a7.046 7.046 0 01-1.846-4.719c0-3.897 3.18-7.076 7.13-7.076 3.948 0 7.126 3.18 7.126 7.076 0 1.847-.717 3.488-1.846 4.77L18 22.51c3.59-2.05 6-5.899 6-10.258C24 5.69 18.615.357 12 .357zm-.05 8.157a3.786 3.786 0 00-3.796 3.795 3.738 3.738 0 002.461 3.54L9.13 23.643h5.64l-1.435-7.795c1.385-.564 2.41-1.898 2.41-3.54a3.786 3.786 0 00-3.795-3.794z',
|
||
|
||
// IPSec — 盾牌+锁（站点互联安全隧道语义）
|
||
ipsec: 'M12 1L3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5l-9-4zm-1 5h2v3h-2V6zm0 4.5h2v7.5h-2v-7.5z M12 6.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3z',
|
||
|
||
// IKEv2 — 双向箭头环（密钥交换语义）
|
||
ikev2: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.5 11H7.5l2 2-1.4 1.4L4.7 12l3.4-4.4L9.5 9l-2 2h9l-2-2 1.4-1.4 3.4 4.4-3.4 4.4L15.5 15l2-2z',
|
||
|
||
// L2TP — 手机+信号波（移动设备拨号语义）
|
||
l2tp: 'M7 1C5.9 1 5 1.9 5 3v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2H7zm5 19c-.83 0-1.5-.67-1.5-1.5S11.17 17 12 17s1.5.67 1.5 1.5S12.83 20 12 20zm5-4H7V4h10v12z M9.5 6.5l2 2-2 2-1-1 1-1-1-1 1-1z M14.5 6.5l1 1-1 1 1 1-1 1-2-2 2-2z',
|
||
|
||
// GRE — two routed sites connected by a tunnel
|
||
gre: 'M3 4h6v3H6v10h3v3H3V4zm12 0h6v16h-6v-3h3V7h-3V4zM9 10h6v2H9v-2zm0 4h6v2H9v-2z',
|
||
|
||
// FRP — 隧道+箭头穿透（内网穿透语义）
|
||
frp: 'M3 8h2v8H3V8zm16 0h2v8h-2V8zM7 10h10v4H7v-4zm2 1.5l2 1.5-2 1.5v-3zm6 0v3l-2-1.5 2-1.5z M12 6l3 2H9l3-2zm0 12l-3-2h6l-3 2z',
|
||
|
||
// Custom — 拼图块（插件扩展语义）
|
||
custom: 'M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5a2.5 2.5 0 0 0-5 0V5H4a1 1 0 0 0-1 1v4h1.5a2.5 2.5 0 0 1 0 5H3v4a1 1 0 0 0 1 1h4v-1.5a2.5 2.5 0 0 1 5 0V20h4c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 0-5z',
|
||
}
|
||
|
||
const pathData = computed(() => {
|
||
const key = props.protocol.startsWith('custom:') ? 'custom' : props.protocol
|
||
return ICON_PATHS[key] || ICON_PATHS.custom
|
||
})
|
||
</script>
|