mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-09-28 07:36:38 +08:00
修复v6 添加隧道类型选择
This commit is contained in:
+1
-3
@@ -1,8 +1,6 @@
|
||||
version: "3.8"
|
||||
|
||||
services:
|
||||
mysql:
|
||||
image: mysql:8.0
|
||||
image: mysql:5.7
|
||||
container_name: gost-mysql
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
|
||||
+2
-1
@@ -4,7 +4,6 @@ import (
|
||||
"context"
|
||||
"flag"
|
||||
"fmt"
|
||||
"github.com/go-gost/gost/traffic"
|
||||
"log"
|
||||
_ "net/http/pprof"
|
||||
"os"
|
||||
@@ -13,6 +12,8 @@ import (
|
||||
"strings"
|
||||
"sync"
|
||||
|
||||
"github.com/go-gost/gost/traffic"
|
||||
|
||||
"github.com/go-gost/core/logger"
|
||||
xlogger "github.com/go-gost/x/logger"
|
||||
"github.com/judwhite/go-svc"
|
||||
|
||||
@@ -96,6 +96,7 @@ CREATE TABLE `tunnel` (
|
||||
`out_ip_end` int(10) NOT NULL,
|
||||
`type` int(10) NOT NULL,
|
||||
`flow` int(10) NOT NULL,
|
||||
`protocol` varchar(10) DEFAULT 'tls' COMMENT '协议类型: tls, tcp, mtls',
|
||||
`created_time` bigint(20) NOT NULL,
|
||||
`updated_time` bigint(20) NOT NULL,
|
||||
`status` int(10) NOT NULL
|
||||
|
||||
@@ -76,6 +76,9 @@ cat > "$INSTALL_DIR/gost.json" <<EOF
|
||||
"metadata": {
|
||||
"pathPrefix": "/api"
|
||||
}
|
||||
},
|
||||
"listener": {
|
||||
"type": "tls"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@@ -39,4 +39,7 @@ public class TunnelDto {
|
||||
|
||||
@NotNull(message = "流量计算类型不能为空")
|
||||
private Integer flow;
|
||||
|
||||
// 协议类型(隧道转发时使用:tls、tcp、mtls),默认为tls
|
||||
private String protocol;
|
||||
}
|
||||
@@ -82,6 +82,8 @@ public class UserTunnelWithDetailDto {
|
||||
* 出站流量(字节)
|
||||
*/
|
||||
private Long outFlow;
|
||||
|
||||
private Integer status;
|
||||
|
||||
// /**
|
||||
// * 入口IP
|
||||
|
||||
@@ -16,7 +16,7 @@ public class GostUtil {
|
||||
public static GostDto SaveConfig(String addr, String secret) {
|
||||
JSONObject data = new JSONObject();
|
||||
data.put("format", "json");
|
||||
String url = "http://" + addr + "/api/config?format=json";
|
||||
String url = "https://" + addr + "/api/config?format=json";
|
||||
return HttpUtils.post(url, data, secret);
|
||||
}
|
||||
|
||||
@@ -181,9 +181,9 @@ public class GostUtil {
|
||||
return HttpUtils.post(url, data, secret);
|
||||
}
|
||||
|
||||
public static GostDto AddChains(String addr, String name, String remoteAddr, String secret) {
|
||||
public static GostDto AddChains(String addr, String name, String remoteAddr, String secret, String protocol) {
|
||||
JSONObject dialer = new JSONObject();
|
||||
dialer.put("type", "tls");
|
||||
dialer.put("type", protocol);
|
||||
|
||||
JSONObject connector = new JSONObject();
|
||||
connector.put("type", "relay");
|
||||
@@ -212,9 +212,9 @@ public class GostUtil {
|
||||
return HttpUtils.post(url, data, secret);
|
||||
}
|
||||
|
||||
public static GostDto UpdateChains(String addr, String name, String remoteAddr, String secret) {
|
||||
public static GostDto UpdateChains(String addr, String name, String remoteAddr, String secret, String protocol) {
|
||||
JSONObject dialer = new JSONObject();
|
||||
dialer.put("type", "tls");
|
||||
dialer.put("type", protocol);
|
||||
|
||||
JSONObject connector = new JSONObject();
|
||||
connector.put("type", "relay");
|
||||
@@ -249,7 +249,7 @@ public class GostUtil {
|
||||
return HttpUtils.delete(url, secret);
|
||||
}
|
||||
|
||||
public static GostDto AddRemoteService(String addr, String name, Integer out_port, String remoteAddr, String secret) {
|
||||
public static GostDto AddRemoteService(String addr, String name, Integer out_port, String remoteAddr, String secret, String protocol) {
|
||||
JSONObject data = new JSONObject();
|
||||
data.put("name", name + "_tls");
|
||||
data.put("addr", ":" + out_port);
|
||||
@@ -257,7 +257,7 @@ public class GostUtil {
|
||||
handler.put("type", "relay");
|
||||
data.put("handler", handler);
|
||||
JSONObject listener = new JSONObject();
|
||||
listener.put("type", "tls");
|
||||
listener.put("type", protocol);
|
||||
data.put("listener", listener);
|
||||
JSONObject forwarder = new JSONObject();
|
||||
JSONArray nodes = new JSONArray();
|
||||
@@ -388,6 +388,14 @@ public class GostUtil {
|
||||
* 构建API URL
|
||||
*/
|
||||
private static String buildUrl(String addr, String endpoint) {
|
||||
return "http://" + addr + API_BASE_URL + endpoint;
|
||||
// 如果是IPv6地址(包含多个冒号且不包含方括号),需要用方括号包裹IP部分
|
||||
if (!addr.contains("[") && addr.indexOf(':') != addr.lastIndexOf(':')) {
|
||||
// 这是IPv6地址,找到最后一个冒号(端口分隔符)
|
||||
int lastColonIndex = addr.lastIndexOf(':');
|
||||
String ipPart = addr.substring(0, lastColonIndex);
|
||||
String portPart = addr.substring(lastColonIndex);
|
||||
addr = "[" + ipPart + "]" + portPart;
|
||||
}
|
||||
return "https://" + addr + API_BASE_URL + endpoint;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -135,17 +135,11 @@ public class HttpUtils implements ApplicationContextAware {
|
||||
/**
|
||||
* 创建带超时配置的RestTemplate
|
||||
*/
|
||||
@SneakyThrows
|
||||
private static RestTemplate createRestTemplateWithTimeout() {
|
||||
// 创建基础的RequestFactory
|
||||
org.springframework.http.client.SimpleClientHttpRequestFactory factory =
|
||||
new org.springframework.http.client.SimpleClientHttpRequestFactory();
|
||||
|
||||
// 设置连接超时和读取超时
|
||||
factory.setConnectTimeout(TIMEOUT_MILLISECONDS);
|
||||
factory.setReadTimeout(TIMEOUT_MILLISECONDS);
|
||||
|
||||
// 创建RestTemplate
|
||||
RestTemplate restTemplate = new RestTemplate(factory);
|
||||
RestTemplate restTemplate = new RestTemplate(RestTemplateConfig.generateHttpRequestFactory());
|
||||
restTemplate.setErrorHandler(new NoOpResponseErrorHandler());
|
||||
|
||||
return restTemplate;
|
||||
@@ -203,6 +197,7 @@ public class HttpUtils implements ApplicationContextAware {
|
||||
asyncSaveConfig(url, secret);
|
||||
return body;
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
GostDto gostDto = new GostDto();
|
||||
gostDto.setCode(500);
|
||||
gostDto.setMsg("请求失败");
|
||||
|
||||
@@ -27,11 +27,16 @@ public class RestTemplateConfig {
|
||||
return new RestTemplate(factory);
|
||||
}
|
||||
|
||||
// 10秒超时配置
|
||||
private static final int TIMEOUT_SECONDS = 10;
|
||||
private static final int TIMEOUT_MILLISECONDS = TIMEOUT_SECONDS * 1000;
|
||||
|
||||
|
||||
@Bean
|
||||
public ClientHttpRequestFactory simpleClientHttpRequestFactory(){
|
||||
HttpComponentsClientHttpRequestFactory factory = new HttpComponentsClientHttpRequestFactory();
|
||||
factory.setConnectTimeout(15000);
|
||||
factory.setReadTimeout(5000);
|
||||
factory.setConnectTimeout(TIMEOUT_MILLISECONDS);
|
||||
factory.setReadTimeout(TIMEOUT_MILLISECONDS);
|
||||
return factory;
|
||||
}
|
||||
|
||||
|
||||
@@ -72,4 +72,9 @@ public class Tunnel extends BaseEntity {
|
||||
* 流量计算类型(1 单向计算上传。2 双向)
|
||||
*/
|
||||
private int flow;
|
||||
|
||||
/**
|
||||
* 协议类型(隧道转发时使用:tls、tcp、mtls)
|
||||
*/
|
||||
private String protocol;
|
||||
}
|
||||
|
||||
@@ -536,13 +536,13 @@ public class ForwardServiceImpl extends ServiceImpl<ForwardMapper, Forward> impl
|
||||
|
||||
// 隧道转发需要创建链和远程服务
|
||||
if (tunnel.getType() == TUNNEL_TYPE_TUNNEL_FORWARD) {
|
||||
R chainResult = createChainService(inNode, serviceName, tunnel.getOutIp(), forward.getOutPort());
|
||||
R chainResult = createChainService(inNode, serviceName, tunnel.getOutIp(), forward.getOutPort(), tunnel.getProtocol());
|
||||
if (chainResult.getCode() != 0) {
|
||||
updateForwardStatusToError(forward);
|
||||
return chainResult;
|
||||
}
|
||||
|
||||
R remoteResult = createRemoteService(tunnel.getOutNodeId().intValue(), serviceName, forward);
|
||||
R remoteResult = createRemoteService(tunnel.getOutNodeId().intValue(), serviceName, forward, tunnel.getProtocol());
|
||||
if (remoteResult.getCode() != 0) {
|
||||
updateForwardStatusToError(forward);
|
||||
return remoteResult;
|
||||
@@ -568,13 +568,13 @@ public class ForwardServiceImpl extends ServiceImpl<ForwardMapper, Forward> impl
|
||||
|
||||
// 隧道转发需要更新链和远程服务
|
||||
if (tunnel.getType() == TUNNEL_TYPE_TUNNEL_FORWARD) {
|
||||
R chainResult = updateChainService(inNode, serviceName, tunnel.getOutIp(), forward.getOutPort());
|
||||
R chainResult = updateChainService(inNode, serviceName, tunnel.getOutIp(), forward.getOutPort(), tunnel.getProtocol());
|
||||
if (chainResult.getCode() != 0) {
|
||||
updateForwardStatusToError(forward);
|
||||
return chainResult;
|
||||
}
|
||||
|
||||
R remoteResult = updateRemoteService(tunnel.getOutNodeId().intValue(), serviceName, forward);
|
||||
R remoteResult = updateRemoteService(tunnel.getOutNodeId().intValue(), serviceName, forward, tunnel.getProtocol());
|
||||
if (remoteResult.getCode() != 0) {
|
||||
updateForwardStatusToError(forward);
|
||||
return remoteResult;
|
||||
@@ -624,20 +624,20 @@ public class ForwardServiceImpl extends ServiceImpl<ForwardMapper, Forward> impl
|
||||
/**
|
||||
* 创建链服务
|
||||
*/
|
||||
private R createChainService(Node inNode, String serviceName, String outIp, Integer outPort) {
|
||||
private R createChainService(Node inNode, String serviceName, String outIp, Integer outPort, String protocol) {
|
||||
String remoteAddr = outIp + ":" + outPort;
|
||||
GostDto result = GostUtil.AddChains(inNode.getIp() + ":" + inNode.getPort(), serviceName, remoteAddr, inNode.getSecret());
|
||||
GostDto result = GostUtil.AddChains(inNode.getIp() + ":" + inNode.getPort(), serviceName, remoteAddr, inNode.getSecret(), protocol);
|
||||
return isGostOperationSuccess(result) ? R.ok() : R.err(result.getMsg());
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建远程服务
|
||||
*/
|
||||
private R createRemoteService(Integer outNodeId, String serviceName, Forward forward) {
|
||||
private R createRemoteService(Integer outNodeId, String serviceName, Forward forward, String protocol) {
|
||||
Node outNode = nodeService.getNodeById(outNodeId.longValue());
|
||||
GostDto result = GostUtil.AddRemoteService(outNode.getIp() + ":" + outNode.getPort(),
|
||||
serviceName, forward.getOutPort(),
|
||||
forward.getRemoteAddr(), outNode.getSecret());
|
||||
forward.getRemoteAddr(), outNode.getSecret(), protocol);
|
||||
return isGostOperationSuccess(result) ? R.ok() : R.err(result.getMsg());
|
||||
}
|
||||
|
||||
@@ -654,13 +654,13 @@ public class ForwardServiceImpl extends ServiceImpl<ForwardMapper, Forward> impl
|
||||
/**
|
||||
* 更新链服务
|
||||
*/
|
||||
private R updateChainService(Node inNode, String serviceName, String outIp, Integer outPort) {
|
||||
private R updateChainService(Node inNode, String serviceName, String outIp, Integer outPort, String protocol) {
|
||||
|
||||
// 创建新链
|
||||
String remoteAddr = outIp + ":" + outPort;
|
||||
GostDto createResult = GostUtil.UpdateChains(inNode.getIp() + ":" + inNode.getPort(), serviceName, remoteAddr, inNode.getSecret());
|
||||
GostDto createResult = GostUtil.UpdateChains(inNode.getIp() + ":" + inNode.getPort(), serviceName, remoteAddr, inNode.getSecret(), protocol);
|
||||
if (createResult.getMsg().contains(GOST_NOT_FOUND_MSG)) {
|
||||
createResult = GostUtil.AddChains(inNode.getIp() + ":" + inNode.getPort(), serviceName, remoteAddr, inNode.getSecret());
|
||||
createResult = GostUtil.AddChains(inNode.getIp() + ":" + inNode.getPort(), serviceName, remoteAddr, inNode.getSecret(), protocol);
|
||||
}
|
||||
return isGostOperationSuccess(createResult) ? R.ok() : R.err(createResult.getMsg());
|
||||
}
|
||||
@@ -668,7 +668,7 @@ public class ForwardServiceImpl extends ServiceImpl<ForwardMapper, Forward> impl
|
||||
/**
|
||||
* 更新远程服务
|
||||
*/
|
||||
private R updateRemoteService(Integer outNodeId, String serviceName, Forward forward) {
|
||||
private R updateRemoteService(Integer outNodeId, String serviceName, Forward forward, String protocol) {
|
||||
Node outNode = nodeService.getNodeById(outNodeId.longValue());
|
||||
// 创建新远程服务
|
||||
GostDto createResult = GostUtil.UpdateRemoteService(outNode.getIp() + ":" + outNode.getPort(),
|
||||
@@ -677,7 +677,7 @@ public class ForwardServiceImpl extends ServiceImpl<ForwardMapper, Forward> impl
|
||||
if (createResult.getMsg().contains(GOST_NOT_FOUND_MSG)) {
|
||||
createResult = GostUtil.AddRemoteService(outNode.getIp() + ":" + outNode.getPort(),
|
||||
serviceName, forward.getOutPort(),
|
||||
forward.getRemoteAddr(), outNode.getSecret());
|
||||
forward.getRemoteAddr(), outNode.getSecret(),protocol);
|
||||
}
|
||||
return isGostOperationSuccess(createResult) ? R.ok() : R.err(createResult.getMsg());
|
||||
}
|
||||
|
||||
@@ -257,6 +257,16 @@ public class TunnelServiceImpl extends ServiceImpl<TunnelMapper, Tunnel> impleme
|
||||
// 设置流量计算类型
|
||||
tunnel.setFlow(tunnelDto.getFlow());
|
||||
|
||||
// 设置协议类型(仅隧道转发需要)
|
||||
if (tunnelDto.getType() == TUNNEL_TYPE_TUNNEL_FORWARD) {
|
||||
// 隧道转发时,设置协议类型,默认为tls
|
||||
String protocol = StrUtil.isNotBlank(tunnelDto.getProtocol()) ? tunnelDto.getProtocol() : "tls";
|
||||
tunnel.setProtocol(protocol);
|
||||
} else {
|
||||
// 端口转发时,协议类型为null
|
||||
tunnel.setProtocol(null);
|
||||
}
|
||||
|
||||
return tunnel;
|
||||
}
|
||||
|
||||
@@ -310,6 +320,13 @@ public class TunnelServiceImpl extends ServiceImpl<TunnelMapper, Tunnel> impleme
|
||||
return R.err(ERROR_SAME_NODE_NOT_ALLOWED);
|
||||
}
|
||||
|
||||
// 验证协议类型
|
||||
String protocol = tunnelDto.getProtocol();
|
||||
if (StrUtil.isNotBlank(protocol) &&
|
||||
!protocol.equals("tls") && !protocol.equals("tcp") && !protocol.equals("mtls")) {
|
||||
return R.err("协议类型只能为tls、tcp或mtls");
|
||||
}
|
||||
|
||||
// 验证出口节点是否存在
|
||||
Node outNode = nodeService.getById(tunnelDto.getOutNodeId());
|
||||
if (outNode == null) {
|
||||
|
||||
@@ -25,7 +25,8 @@
|
||||
t.out_ip AS outIp,
|
||||
t.out_ip_sta AS outIpSta,
|
||||
t.out_ip_end AS outIpEnd,
|
||||
t.type
|
||||
t.type,
|
||||
t.protocol
|
||||
FROM
|
||||
forward f
|
||||
LEFT JOIN
|
||||
@@ -57,7 +58,8 @@
|
||||
t.out_ip AS outIp,
|
||||
t.out_ip_sta AS outIpSta,
|
||||
t.out_ip_end AS outIpEnd,
|
||||
t.type
|
||||
t.type,
|
||||
t.protocol
|
||||
FROM
|
||||
forward f
|
||||
LEFT JOIN
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
ut.flow_reset_time as flowResetTime,
|
||||
ut.exp_time as expTime,
|
||||
ut.speed_id as speedId,
|
||||
ut.status as status,
|
||||
t.name as tunnelName,
|
||||
t.flow as tunnelFlow,
|
||||
t.in_ip as inIp,
|
||||
@@ -24,6 +25,7 @@
|
||||
t.out_ip_sta as outIpSta,
|
||||
t.out_ip_end as outIpEnd,
|
||||
t.type,
|
||||
t.protocol,
|
||||
sl.name as speedLimitName,
|
||||
sl.speed
|
||||
FROM user_tunnel ut
|
||||
|
||||
@@ -0,0 +1,263 @@
|
||||
/**
|
||||
* 剪贴板工具类
|
||||
* 兼容现代浏览器和旧版浏览器的复制功能
|
||||
*/
|
||||
|
||||
/**
|
||||
* 检测是否为Safari浏览器
|
||||
* @returns {boolean}
|
||||
*/
|
||||
const isSafari = () => {
|
||||
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
||||
};
|
||||
|
||||
/**
|
||||
* Safari专用的复制方法
|
||||
* @param {string} text - 要复制的文本
|
||||
* @returns {Promise<boolean>}
|
||||
*/
|
||||
const safariCopy = (text) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
|
||||
// Safari需要元素可见且可聚焦
|
||||
textArea.style.position = 'absolute';
|
||||
textArea.style.left = '-9999px';
|
||||
textArea.style.top = '-9999px';
|
||||
textArea.style.fontSize = '12pt';
|
||||
textArea.style.border = '0';
|
||||
textArea.style.padding = '0';
|
||||
textArea.style.margin = '0';
|
||||
textArea.style.outline = 'none';
|
||||
textArea.style.boxShadow = 'none';
|
||||
textArea.style.background = 'transparent';
|
||||
|
||||
document.body.appendChild(textArea);
|
||||
|
||||
// Safari需要先聚焦
|
||||
textArea.focus();
|
||||
textArea.setSelectionRange(0, text.length);
|
||||
|
||||
try {
|
||||
const successful = document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
|
||||
if (successful) {
|
||||
resolve(true);
|
||||
} else {
|
||||
reject(new Error('Safari execCommand 复制失败'));
|
||||
}
|
||||
} catch (error) {
|
||||
document.body.removeChild(textArea);
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 复制文本到剪贴板
|
||||
* @param {string} text - 要复制的文本
|
||||
* @param {string} label - 复制内容的标签,用于提示消息(可选)
|
||||
* @returns {Promise<boolean>} - 返回复制是否成功
|
||||
*/
|
||||
export const copyToClipboard = async (text, label = '内容') => {
|
||||
if (!text) {
|
||||
throw new Error('复制内容不能为空');
|
||||
}
|
||||
|
||||
try {
|
||||
// Safari浏览器特殊处理
|
||||
if (isSafari()) {
|
||||
// 优先尝试现代API,但Safari对安全上下文要求严格
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
} catch (clipboardError) {
|
||||
console.warn('Safari Clipboard API失败,降级到execCommand:', clipboardError);
|
||||
// 降级到Safari专用方法
|
||||
await safariCopy(text);
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
// 直接使用Safari专用方法
|
||||
await safariCopy(text);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// 方法1: 使用现代浏览器的 Clipboard API(非Safari浏览器首选)
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
}
|
||||
|
||||
// 方法2: 使用 document.execCommand(通用兼容性方案)
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
|
||||
// 设置样式,使其不可见且不影响页面布局
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-999999px';
|
||||
textArea.style.top = '-999999px';
|
||||
textArea.style.opacity = '0';
|
||||
textArea.style.pointerEvents = 'none';
|
||||
textArea.style.zIndex = '-1';
|
||||
|
||||
// 添加到 DOM
|
||||
document.body.appendChild(textArea);
|
||||
|
||||
// 选择文本
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
// 兼容iOS设备的选择
|
||||
if (navigator.userAgent.match(/ipad|iphone/i)) {
|
||||
textArea.setSelectionRange(0, text.length);
|
||||
}
|
||||
|
||||
// 尝试复制
|
||||
const successful = document.execCommand('copy');
|
||||
|
||||
// 清理 DOM
|
||||
document.body.removeChild(textArea);
|
||||
|
||||
if (successful) {
|
||||
return true;
|
||||
} else {
|
||||
throw new Error('document.execCommand 复制失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('复制失败:', error);
|
||||
throw new Error(`复制${label}失败`);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 复制文本到剪贴板(带成功提示)
|
||||
* 适用于 Vue 组件中使用,会显示 Element UI 的消息提示
|
||||
* @param {string} text - 要复制的文本
|
||||
* @param {string} label - 复制内容的标签
|
||||
* @param {object} vm - Vue 组件实例(用于调用 $message)
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
export const copyWithMessage = async (text, label = '内容', vm) => {
|
||||
try {
|
||||
await copyToClipboard(text, label);
|
||||
if (vm && vm.$message) {
|
||||
vm.$message.success(`${label}已复制到剪贴板`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('复制失败详情:', error);
|
||||
|
||||
// 为Safari提供更详细的错误信息
|
||||
let errorMessage = error.message || `复制${label}失败,请手动复制`;
|
||||
|
||||
if (isSafari() && !window.isSecureContext) {
|
||||
errorMessage = `复制失败:Safari需要HTTPS环境。请手动复制${label}`;
|
||||
} else if (isSafari() && error.message.includes('Safari')) {
|
||||
errorMessage = `Safari复制失败,请手动选择并复制${label}`;
|
||||
}
|
||||
|
||||
if (vm && vm.$message) {
|
||||
vm.$message.error(errorMessage);
|
||||
} else {
|
||||
console.error(errorMessage);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 检查浏览器是否支持剪贴板操作
|
||||
* @returns {object} - 返回支持的功能信息
|
||||
*/
|
||||
export const getClipboardSupport = () => {
|
||||
const hasClipboardAPI = !!(navigator.clipboard && window.isSecureContext);
|
||||
const hasExecCommand = !!document.execCommand;
|
||||
const browserInfo = {
|
||||
isSafari: isSafari(),
|
||||
isIOS: /iPad|iPhone|iPod/.test(navigator.userAgent),
|
||||
isSecureContext: window.isSecureContext
|
||||
};
|
||||
|
||||
return {
|
||||
modern: hasClipboardAPI, // 是否支持现代 Clipboard API
|
||||
legacy: hasExecCommand, // 是否支持 execCommand
|
||||
supported: hasClipboardAPI || hasExecCommand, // 是否支持任何复制方法
|
||||
browser: browserInfo, // 浏览器信息
|
||||
recommendedMethod: browserInfo.isSafari ? 'safari-optimized' :
|
||||
hasClipboardAPI ? 'clipboard-api' : 'exec-command'
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 显示手动复制提示(当自动复制失败时使用)
|
||||
* @param {string} text - 要复制的文本
|
||||
* @param {string} label - 复制内容的标签
|
||||
* @param {object} vm - Vue 组件实例
|
||||
*/
|
||||
export const showManualCopyDialog = (text, label, vm) => {
|
||||
if (vm && vm.$alert) {
|
||||
const isSafariBrowser = isSafari();
|
||||
const message = isSafariBrowser
|
||||
? `Safari浏览器限制,无法自动复制。请手动选择并复制以下${label}:\n\n${text}`
|
||||
: `请手动复制以下${label}:\n\n${text}`;
|
||||
|
||||
vm.$alert(
|
||||
message,
|
||||
isSafariBrowser ? 'Safari复制提示' : '复制提示',
|
||||
{
|
||||
confirmButtonText: '已复制',
|
||||
type: 'info',
|
||||
dangerouslyUseHTMLString: false,
|
||||
customClass: 'copy-dialog'
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 带降级方案的复制方法
|
||||
* 如果自动复制失败,会显示手动复制对话框
|
||||
* @param {string} text - 要复制的文本
|
||||
* @param {string} label - 复制内容的标签
|
||||
* @param {object} vm - Vue 组件实例
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
export const copyWithFallback = async (text, label = '内容', vm) => {
|
||||
// 如果是Safari并且不在安全上下文中,直接显示手动复制对话框
|
||||
if (isSafari() && !window.isSecureContext) {
|
||||
console.warn('Safari非HTTPS环境,直接使用手动复制');
|
||||
showManualCopyDialog(text, label, vm);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await copyToClipboard(text, label);
|
||||
if (vm && vm.$message) {
|
||||
vm.$message.success(`${label}已复制到剪贴板`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('自动复制失败,显示手动复制对话框:', error);
|
||||
|
||||
// 如果是Safari或自动复制失败,显示手动复制对话框
|
||||
if (isSafari() || error.message.includes('失败')) {
|
||||
showManualCopyDialog(text, label, vm);
|
||||
} else {
|
||||
// 其他错误正常提示
|
||||
if (vm && vm.$message) {
|
||||
vm.$message.error(error.message || `复制${label}失败`);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
copyToClipboard,
|
||||
copyWithMessage,
|
||||
copyWithFallback,
|
||||
showManualCopyDialog,
|
||||
getClipboardSupport
|
||||
};
|
||||
@@ -92,13 +92,48 @@
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="label">入口地址:</span>
|
||||
<span class="value">{{ forward.inIp}}:{{ forward.inPort }}</span>
|
||||
<div class="info-item full-width">
|
||||
<div class="address-item">
|
||||
<div class="label-with-copy">
|
||||
<span class="label">入口地址:</span>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="copyToClipboard(formatInAddress(forward.inIp, forward.inPort), '入口地址')"
|
||||
class="copy-btn"
|
||||
title="复制入口地址"
|
||||
></el-button>
|
||||
</div>
|
||||
<div class="address-value">
|
||||
<span class="value address-text" :title="formatInAddress(forward.inIp, forward.inPort)">
|
||||
{{ formatInAddress(forward.inIp, forward.inPort) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">目标地址:</span>
|
||||
<span class="value">{{ forward.remoteAddr}}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-item full-width">
|
||||
<div class="address-item">
|
||||
<div class="label-with-copy">
|
||||
<span class="label">目标地址:</span>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="copyToClipboard(forward.remoteAddr, '目标地址')"
|
||||
class="copy-btn"
|
||||
title="复制目标地址"
|
||||
></el-button>
|
||||
</div>
|
||||
<div class="address-value">
|
||||
<span class="value address-text" :title="forward.remoteAddr">
|
||||
{{ forward.remoteAddr}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -216,6 +251,7 @@ import {
|
||||
pauseForwardService,
|
||||
resumeForwardService
|
||||
} from "@/api";
|
||||
import { copyWithMessage } from "@/utils/clipboard";
|
||||
|
||||
export default {
|
||||
name: "Forward",
|
||||
@@ -570,6 +606,25 @@ export default {
|
||||
return (value / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
|
||||
},
|
||||
|
||||
// 格式化入口地址,IPv6需要用[]包裹
|
||||
formatInAddress(ip, port) {
|
||||
if (!ip || !port) return '';
|
||||
|
||||
// 检查是否为IPv6地址
|
||||
if (ip.includes(':')) {
|
||||
// IPv6地址需要用方括号包裹
|
||||
return `[${ip}]:${port}`;
|
||||
} else {
|
||||
// IPv4地址直接拼接
|
||||
return `${ip}:${port}`;
|
||||
}
|
||||
},
|
||||
|
||||
// 复制到剪贴板
|
||||
async copyToClipboard(text, label = '内容') {
|
||||
await copyWithMessage(text, label, this);
|
||||
},
|
||||
|
||||
// 获取状态类型
|
||||
getStatusType(status) {
|
||||
switch (parseInt(status)) {
|
||||
@@ -806,10 +861,12 @@ export default {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; /* 确保flex子元素可以收缩 */
|
||||
}
|
||||
|
||||
.info-item.full-width {
|
||||
flex: 1;
|
||||
min-width: 0; /* 确保flex子元素可以收缩 */
|
||||
}
|
||||
|
||||
.info-item:not(:last-child) {
|
||||
@@ -900,5 +957,80 @@ export default {
|
||||
color: #c0c4cc !important;
|
||||
}
|
||||
|
||||
/* 地址项样式 */
|
||||
.address-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-width: 0; /* 确保flex子元素可以收缩 */
|
||||
}
|
||||
|
||||
.label-with-copy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.address-value {
|
||||
width: 100%;
|
||||
min-width: 0; /* 确保flex子元素可以收缩 */
|
||||
}
|
||||
|
||||
.address-text {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
max-width: 100%; /* 确保不会超出容器 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 2px 6px !important;
|
||||
margin: 0 !important;
|
||||
min-width: auto !important;
|
||||
height: 20px !important;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
opacity: 1;
|
||||
color: #409EFF !important;
|
||||
}
|
||||
|
||||
.copy-btn .el-icon-copy-document {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 地址项悬停效果 */
|
||||
.address-item:hover .copy-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 复制对话框样式 */
|
||||
::v-deep .copy-dialog .el-message-box__content {
|
||||
word-break: break-all;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
}
|
||||
|
||||
::v-deep .copy-dialog .el-message-box__message p {
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
background: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin: 10px 0;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -834,6 +834,10 @@ export default {
|
||||
background: #ebeef5;
|
||||
border-radius: 4px;
|
||||
min-width: 120px;
|
||||
width: 100%;
|
||||
white-space: nowrap; /* 不换行 */
|
||||
overflow: hidden; /* 超出隐藏 */
|
||||
text-overflow: ellipsis; /* 超出显示省略号 */
|
||||
}
|
||||
|
||||
.address-source {
|
||||
|
||||
@@ -44,6 +44,11 @@
|
||||
<div class="tunnel-badges">
|
||||
<el-tag v-if="tunnel.type === 1" type="primary" size="mini">端口转发</el-tag>
|
||||
<el-tag v-else type="warning" size="mini">隧道转发</el-tag>
|
||||
<el-tag v-if="tunnel.type === 2 && tunnel.protocol"
|
||||
:type="tunnel.protocol === 'tls' ? 'success' : tunnel.protocol === 'mtls' ? 'danger' : 'info'"
|
||||
size="mini">
|
||||
{{ tunnel.protocol.toUpperCase() }}
|
||||
</el-tag>
|
||||
<el-tag v-if="tunnel.flow === 1" type="success" size="mini">单向计算</el-tag>
|
||||
<el-tag v-else type="info" size="mini">双向计算</el-tag>
|
||||
</div>
|
||||
@@ -246,6 +251,17 @@
|
||||
<template v-if="tunnelForm.type === 2">
|
||||
<el-divider content-position="left">出口配置</el-divider>
|
||||
|
||||
<el-form-item label="协议类型" prop="protocol">
|
||||
<el-radio-group v-model="tunnelForm.protocol">
|
||||
<el-radio label="tls">TLS</el-radio>
|
||||
<el-radio label="tcp">TCP</el-radio>
|
||||
<el-radio label="mtls">mTLS</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-hint">
|
||||
TLS:传输层安全协议;TCP:传输控制协议;mTLS:双向TLS认证
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="出口节点" prop="outNodeId">
|
||||
<el-select
|
||||
v-model="tunnelForm.outNodeId"
|
||||
@@ -344,7 +360,8 @@ export default {
|
||||
outIpEnd: 65535,
|
||||
type: 1,
|
||||
flow: 1, // 默认单向计算
|
||||
status: 1 // 默认启用
|
||||
status: 1, // 默认启用
|
||||
protocol: 'tls'
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
@@ -376,6 +393,9 @@ export default {
|
||||
],
|
||||
outIpEnd: [
|
||||
{ required: false, message: '请输入结束端口', trigger: 'blur' }
|
||||
],
|
||||
protocol: [
|
||||
{ required: false, message: '请选择协议类型', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
@@ -475,16 +495,19 @@ export default {
|
||||
this.rules.outNodeId[0].required = true;
|
||||
this.rules.outIpSta[0].required = true;
|
||||
this.rules.outIpEnd[0].required = true;
|
||||
this.rules.protocol[0].required = true;
|
||||
} else {
|
||||
// 端口转发时,出口字段不必填
|
||||
this.rules.outNodeId[0].required = false;
|
||||
this.rules.outIpSta[0].required = false;
|
||||
this.rules.outIpEnd[0].required = false;
|
||||
this.rules.protocol[0].required = false;
|
||||
|
||||
// 清空出口字段
|
||||
this.tunnelForm.outNodeId = null;
|
||||
this.tunnelForm.outIpSta = null;
|
||||
this.tunnelForm.outIpEnd = null;
|
||||
this.tunnelForm.protocol = 'tls'; // 重置为默认值
|
||||
}
|
||||
},
|
||||
|
||||
@@ -547,7 +570,8 @@ export default {
|
||||
outIpEnd: 65535,
|
||||
type: 1,
|
||||
flow: 1, // 默认单向计算
|
||||
status: 1 // 默认启用
|
||||
status: 1, // 默认启用
|
||||
protocol: 'tls'
|
||||
};
|
||||
if (this.$refs.tunnelForm) {
|
||||
this.$refs.tunnelForm.clearValidate();
|
||||
|
||||
@@ -131,7 +131,15 @@
|
||||
<span>主机IP</span>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="ip-value">{{ node.connectionStatus === 'online' ? (node.ip || '-') : '-' }}</span>
|
||||
<el-tooltip
|
||||
:content="node.connectionStatus === 'online' ? (node.ip || '-') : '-'"
|
||||
placement="top"
|
||||
:disabled="!node.ip || node.ip === '-'"
|
||||
>
|
||||
<span class="ip-value">
|
||||
{{ node.connectionStatus === 'online' ? (node.ip || '-') : '-' }}
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -213,7 +221,7 @@
|
||||
<el-form-item v-if="isEdit" label="节点IP" prop="ip">
|
||||
<el-input
|
||||
v-model="nodeForm.ip"
|
||||
placeholder="请输入节点IP地址,如: 192.168.1.1 或 2001:db8::1"
|
||||
placeholder="请输入节点IP地址或域名,如: 192.168.1.1、2001:db8::1 或 example.com"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
@@ -226,15 +234,7 @@
|
||||
show-icon
|
||||
style="margin-bottom: 20px;">
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
v-if="isEdit"
|
||||
title="编辑模式下只能修改节点名称和IP,端口在创建后不可更改"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
show-icon
|
||||
style="margin-bottom: 20px;">
|
||||
</el-alert>
|
||||
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
@@ -253,6 +253,7 @@
|
||||
|
||||
<script>
|
||||
import {createNode, updateNode, deleteNode, getNodeList, getNodeInstallCommand} from "@/api";
|
||||
import { copyWithMessage, copyWithFallback } from "@/utils/clipboard";
|
||||
import VChart from 'vue-echarts';
|
||||
import { use } from 'echarts/core';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
@@ -313,13 +314,16 @@ export default {
|
||||
// IPv4格式验证
|
||||
const ipv4Regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
||||
|
||||
// IPv6格式验证(完整版,支持各种压缩格式)
|
||||
// IPv6格式验证(完整版,支持各种压缩格式,不需要方括号)
|
||||
const ipv6Regex = /^((([0-9a-fA-F]{1,4}:){7}([0-9a-fA-F]{1,4}|:))|(([0-9a-fA-F]{1,4}:){6}(:[0-9a-fA-F]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9a-fA-F]{1,4}:){5}(((:[0-9a-fA-F]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9a-fA-F]{1,4}:){4}(((:[0-9a-fA-F]{1,4}){1,3})|((:[0-9a-fA-F]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9a-fA-F]{1,4}:){3}(((:[0-9a-fA-F]{1,4}){1,4})|((:[0-9a-fA-F]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9a-fA-F]{1,4}:){2}(((:[0-9a-fA-F]{1,4}){1,5})|((:[0-9a-fA-F]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9a-fA-F]{1,4}:){1}(((:[0-9a-fA-F]{1,4}){1,6})|((:[0-9a-fA-F]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9a-fA-F]{1,4}){1,7})|((:[0-9a-fA-F]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))$/;
|
||||
|
||||
if (ipv4Regex.test(value) || ipv6Regex.test(value)) {
|
||||
// 域名格式验证
|
||||
const domainRegex = /^[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?)*$/;
|
||||
|
||||
if (ipv4Regex.test(value) || ipv6Regex.test(value) || domainRegex.test(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('请输入有效的IP地址(支持IPv4和IPv6格式,如: 192.168.1.1 或 2001:db8::1)'));
|
||||
callback(new Error('请输入有效的IP地址或域名(支持IPv4、IPv6和域名格式,如: 192.168.1.1、2001:db8::1 或 example.com)'));
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
@@ -452,9 +456,9 @@ export default {
|
||||
this.$set(node, 'copyLoading', false);
|
||||
|
||||
if (res.code === 0 && res.data) {
|
||||
// 将命令复制到剪贴板
|
||||
this.copyToClipboard(res.data);
|
||||
this.$message.success('安装命令已复制到剪贴板');
|
||||
// 对于异步获取的内容,使用带降级方案的复制方法
|
||||
// 这样在Safari中如果自动复制失败,会显示手动复制对话框
|
||||
copyWithFallback(res.data, '安装命令', this);
|
||||
} else {
|
||||
this.$message.error(res.msg || '获取安装命令失败');
|
||||
}
|
||||
@@ -464,32 +468,6 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
// 复制文本到剪贴板
|
||||
copyToClipboard(text) {
|
||||
// 创建一个临时的文本域元素
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-999999px';
|
||||
textArea.style.top = '-999999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
try {
|
||||
// 执行复制命令
|
||||
document.execCommand('copy');
|
||||
} catch (err) {
|
||||
// 如果复制失败,尝试使用现代API
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(text);
|
||||
}
|
||||
}
|
||||
|
||||
// 清理临时元素
|
||||
document.body.removeChild(textArea);
|
||||
},
|
||||
|
||||
|
||||
// 提交表单
|
||||
handleSubmit() {
|
||||
@@ -1066,7 +1044,9 @@ export default {
|
||||
.traffic-stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.traffic-stats.offline-stats {
|
||||
@@ -1094,6 +1074,14 @@ export default {
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-width: 0; /* 防止内容撑开容器 */
|
||||
overflow: hidden; /* 防止内容溢出 */
|
||||
}
|
||||
|
||||
.stat-header {
|
||||
@@ -1161,6 +1149,12 @@ export default {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-family: monospace;
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
@@ -1293,4 +1287,25 @@ export default {
|
||||
color: #007bff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 复制对话框样式 */
|
||||
::v-deep .copy-dialog .el-message-box__content {
|
||||
word-break: break-all;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
}
|
||||
|
||||
::v-deep .copy-dialog .el-message-box__message p {
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
background: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin: 10px 0;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user