mirror of
https://github.com/bestnite/sub2clash.git
synced 2025-06-17 12:43:18 +08:00
refactor
This commit is contained in:
185
server/static/index.html
Normal file
185
server/static/index.html
Normal file
@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<title>sub2clash</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
||||
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" rel="stylesheet" />
|
||||
<!-- Bootstrap JS -->
|
||||
<script crossorigin="anonymous" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- Axios -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios@latest/dist/axios.min.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
padding: 2px 2px;
|
||||
/* 调整内边距以减小按钮大小 */
|
||||
font-size: 10px;
|
||||
/* 设置字体大小 */
|
||||
line-height: 1.2;
|
||||
/* 调整行高 */
|
||||
border-radius: 3px;
|
||||
/* 可选的边框半径调整 */
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-light">
|
||||
<div class="container mt-5">
|
||||
<div class="mb-4">
|
||||
<h2>sub2clash</h2>
|
||||
<span class="text-muted fst-italic">通用订阅链接转 Clash(Meta) 配置工具
|
||||
<a href="https://github.com/bestnite/sub2clash#clash-meta" target="_blank">使用文档</a></span><br /><span
|
||||
class="text-muted fst-italic">注意：本程序非纯前端程序，输入的订阅将被后端缓存，请确保您信任当前站点</span>
|
||||
</div>
|
||||
|
||||
<!-- Input URL -->
|
||||
<div class="form-group mb-5">
|
||||
<label for="apiLink">解析链接:</label>
|
||||
<div class="input-group mb-2">
|
||||
<input class="form-control" id="urlInput" type="text" placeholder="通过生成的链接重新填写下方设置" />
|
||||
<button class="btn btn-primary" onclick="parseInputURL()" type="button">
|
||||
解析
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- API Endpoint -->
|
||||
<div class="form-group mb-3">
|
||||
<label for="endpoint">客户端类型:</label>
|
||||
<select class="form-control" id="endpoint" name="endpoint">
|
||||
<option value="clash">Clash</option>
|
||||
<option value="meta">Clash.Meta</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Template -->
|
||||
<div class="form-group mb-3">
|
||||
<label for="template">模板链接或名称:</label>
|
||||
<input class="form-control" id="template" name="template" placeholder="输入外部模板链接或内部模板名称（可选）" type="text" />
|
||||
</div>
|
||||
<!-- Subscription Link -->
|
||||
<div class="form-group mb-3">
|
||||
<label for="sub">订阅链接:</label>
|
||||
<textarea class="form-control" id="sub" name="sub" placeholder="每行输入一个订阅链接" rows="5"></textarea>
|
||||
</div>
|
||||
<!-- Proxy Link -->
|
||||
<div class="form-group mb-3">
|
||||
<label for="proxy">节点分享链接:</label>
|
||||
<textarea class="form-control" id="proxy" name="proxy" placeholder="每行输入一个节点分享链接" rows="5"></textarea>
|
||||
</div>
|
||||
<!-- User Agent -->
|
||||
<div class="form-group mb-3">
|
||||
<label for="user-agent">ua标识:</label>
|
||||
<textarea class="form-control" id="user-agent" name="user-agent"
|
||||
placeholder="用于获取订阅的http请求中的user-agent标识(可选)" rows="3"></textarea>
|
||||
</div>
|
||||
<!-- Refresh -->
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" id="refresh" name="refresh" type="checkbox" />
|
||||
<label class="form-check-label" for="refresh">强制重新获取订阅</label>
|
||||
</div>
|
||||
<!-- Node List -->
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" id="nodeList" name="nodeList" type="checkbox" />
|
||||
<label class="form-check-label" for="nodeList">输出为 Node List</label>
|
||||
</div>
|
||||
<!-- Auto Test -->
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" id="autoTest" name="autoTest" type="checkbox" />
|
||||
<label class="form-check-label" for="autoTest">国家策略组自动测速</label>
|
||||
</div>
|
||||
<!-- Lazy -->
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" id="lazy" name="lazy" type="checkbox" />
|
||||
<label class="form-check-label" for="lazy">自动测速启用 lazy 模式</label>
|
||||
</div>
|
||||
<!-- IgnoreCountryGroup -->
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" id="igcg" name="igcg" type="checkbox" />
|
||||
<label class="form-check-label" for="igcg">不输出国家策略组</label>
|
||||
</div>
|
||||
<!-- Rule Provider -->
|
||||
<div class="form-group mb-3" id="ruleProviderGroup">
|
||||
<label>Rule Provider:</label>
|
||||
<button class="btn btn-primary mb-1 btn-xs" onclick="addRuleProvider()" type="button">
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<!-- Rule -->
|
||||
<div class="form-group mb-3" id="ruleGroup">
|
||||
<label>规则:</label>
|
||||
<button class="btn btn-primary mb-1 btn-xs" onclick="addRule()" type="button">
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<!-- Sort -->
|
||||
<div class="form-group mb-3">
|
||||
<label for="sort">国家策略组排序规则:</label>
|
||||
<select class="form-control" id="sort" name="sort">
|
||||
<option value="nameasc">名称（升序）</option>
|
||||
<option value="namedesc">名称（降序）</option>
|
||||
<option value="sizeasc">节点数量（升序）</option>
|
||||
<option value="sizedesc">节点数量（降序）</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Remove -->
|
||||
<div class="form-group mb-3">
|
||||
<label for="remove">排除节点:</label>
|
||||
<input class="form-control" type="text" name="remove" id="remove" placeholder="正则表达式" />
|
||||
</div>
|
||||
<!-- Rename -->
|
||||
<div class="form-group mb-3" id="replaceGroup">
|
||||
<label>节点名称替换:</label>
|
||||
<button class="btn btn-primary mb-1 btn-xs" onclick="addReplace()" type="button">
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Display the API Link -->
|
||||
<div class="form-group mb-5">
|
||||
<label for="apiLink">配置链接:</label>
|
||||
<div class="input-group mb-2">
|
||||
<input class="form-control bg-light" id="apiLink" type="text" placeholder="链接" readonly style="cursor: not-allowed;" />
|
||||
<button class="btn btn-primary" onclick="copyToClipboard('apiLink',this)" type="button">
|
||||
复制链接
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-group mb-2">
|
||||
<input class="form-control" id="customId" type="text" placeholder="短链ID（可选）" />
|
||||
<input class="form-control" id="password" type="text" placeholder="密码（可选）" />
|
||||
<button class="btn btn-primary" onclick="generateShortLink()" type="button">
|
||||
生成短链
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="copyToClipboard('apiShortLink',this)" type="button">
|
||||
复制短链
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input class="form-control bg-light" id="apiShortLink" type="text" placeholder="短链接" readonly style="cursor: not-allowed;" />
|
||||
<button class="btn btn-primary" onclick="updateShortLink()" type="button">
|
||||
更新短链
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer-->
|
||||
<footer>
|
||||
<p class="text-center">
|
||||
Powered by
|
||||
<a class="link-primary" href="https://github.com/bestnite/sub2clash">sub2clash</a>
|
||||
</p>
|
||||
<p class="text-center">Version {{.Version}}</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<script src="./static/index.js"></script>
|
||||
|
||||
</html>
|
||||
583
server/static/index.js
Normal file
583
server/static/index.js
Normal file
@ -0,0 +1,583 @@
|
||||
function setInputReadOnly(input, readonly) {
|
||||
if (readonly) {
|
||||
input.readOnly = true;
|
||||
input.classList.add('bg-light');
|
||||
input.style.cursor = 'not-allowed';
|
||||
} else {
|
||||
input.readOnly = false;
|
||||
input.classList.remove('bg-light');
|
||||
input.style.cursor = 'auto';
|
||||
}
|
||||
}
|
||||
|
||||
function clearExistingValues() {
|
||||
// 清除简单输入框和复选框的值
|
||||
document.getElementById("endpoint").value = "clash";
|
||||
document.getElementById("sub").value = "";
|
||||
document.getElementById("proxy").value = "";
|
||||
document.getElementById("refresh").checked = false;
|
||||
document.getElementById("autoTest").checked = false;
|
||||
document.getElementById("lazy").checked = false;
|
||||
document.getElementById("igcg").checked = false;
|
||||
document.getElementById("template").value = "";
|
||||
document.getElementById("sort").value = "nameasc";
|
||||
document.getElementById("remove").value = "";
|
||||
document.getElementById("apiLink").value = "";
|
||||
document.getElementById("apiShortLink").value = "";
|
||||
|
||||
// 恢复短链ID和密码输入框状态
|
||||
const customIdInput = document.getElementById("customId");
|
||||
const passwordInput = document.getElementById("password");
|
||||
const generateButton = document.querySelector('button[onclick="generateShortLink()"]');
|
||||
|
||||
customIdInput.value = "";
|
||||
setInputReadOnly(customIdInput, false);
|
||||
|
||||
passwordInput.value = "";
|
||||
setInputReadOnly(passwordInput, false);
|
||||
|
||||
// 恢复生成短链按钮状态
|
||||
generateButton.disabled = false;
|
||||
generateButton.classList.remove('btn-secondary');
|
||||
generateButton.classList.add('btn-primary');
|
||||
|
||||
document.getElementById("nodeList").checked = false;
|
||||
|
||||
// 清除由 createRuleProvider, createReplace, 和 createRule 创建的所有额外输入组
|
||||
clearInputGroup("ruleProviderGroup");
|
||||
clearInputGroup("replaceGroup");
|
||||
clearInputGroup("ruleGroup");
|
||||
}
|
||||
|
||||
function generateURI() {
|
||||
const queryParams = [];
|
||||
|
||||
// 获取 API Endpoint
|
||||
const endpoint = document.getElementById("endpoint").value;
|
||||
|
||||
// 获取并组合订阅链接
|
||||
let subLines = document
|
||||
.getElementById("sub")
|
||||
.value.split("\n")
|
||||
.filter((line) => line.trim() !== "");
|
||||
let noSub = false;
|
||||
// 去除 subLines 中空元素
|
||||
subLines = subLines.map((item) => {
|
||||
if (item !== "") {
|
||||
return item;
|
||||
}
|
||||
});
|
||||
if (subLines.length > 0) {
|
||||
queryParams.push(`sub=${encodeURIComponent(subLines.join(","))}`);
|
||||
} else {
|
||||
noSub = true;
|
||||
}
|
||||
|
||||
// 获取并组合节点分享链接
|
||||
let proxyLines = document
|
||||
.getElementById("proxy")
|
||||
.value.split("\n")
|
||||
.filter((line) => line.trim() !== "");
|
||||
let noProxy = false;
|
||||
// 去除 proxyLines 中空元素
|
||||
proxyLines = proxyLines.map((item) => {
|
||||
if (item !== "") {
|
||||
return item;
|
||||
}
|
||||
});
|
||||
if (proxyLines.length > 0) {
|
||||
queryParams.push(`proxy=${encodeURIComponent(proxyLines.join(","))}`);
|
||||
} else {
|
||||
noProxy = true;
|
||||
}
|
||||
if (noSub && noProxy) {
|
||||
// alert("订阅链接和节点分享链接不能同时为空！");
|
||||
return "";
|
||||
}
|
||||
|
||||
// 获取订阅user-agent标识
|
||||
const userAgent = document.getElementById("user-agent").value;
|
||||
queryParams.push(`userAgent=${encodeURIComponent(userAgent)}`);
|
||||
|
||||
// 获取复选框的值
|
||||
const refresh = document.getElementById("refresh").checked;
|
||||
queryParams.push(`refresh=${refresh ? "true" : "false"}`);
|
||||
const autoTest = document.getElementById("autoTest").checked;
|
||||
queryParams.push(`autoTest=${autoTest ? "true" : "false"}`);
|
||||
const lazy = document.getElementById("lazy").checked;
|
||||
queryParams.push(`lazy=${lazy ? "true" : "false"}`);
|
||||
const nodeList = document.getElementById("nodeList").checked;
|
||||
queryParams.push(`nodeList=${nodeList ? "true" : "false"}`);
|
||||
const igcg = document.getElementById("igcg").checked;
|
||||
queryParams.push(`ignoreCountryGroup=${igcg ? "true" : "false"}`);
|
||||
|
||||
// 获取模板链接或名称（如果存在）
|
||||
const template = document.getElementById("template").value;
|
||||
if (template.trim() !== "") {
|
||||
queryParams.push(`template=${encodeURIComponent(template)}`);
|
||||
}
|
||||
|
||||
// 获取Rule Provider和规则
|
||||
const ruleProviders = document.getElementsByName("ruleProvider");
|
||||
const rules = document.getElementsByName("rule");
|
||||
let providers = [];
|
||||
for (let i = 0; i < ruleProviders.length / 5; i++) {
|
||||
let baseIndex = i * 5;
|
||||
let behavior = ruleProviders[baseIndex].value;
|
||||
let url = ruleProviders[baseIndex + 1].value;
|
||||
let group = ruleProviders[baseIndex + 2].value;
|
||||
let prepend = ruleProviders[baseIndex + 3].value;
|
||||
let name = ruleProviders[baseIndex + 4].value;
|
||||
// 是否存在空值
|
||||
if (
|
||||
behavior.trim() === "" ||
|
||||
url.trim() === "" ||
|
||||
group.trim() === "" ||
|
||||
prepend.trim() === "" ||
|
||||
name.trim() === ""
|
||||
) {
|
||||
// alert("Rule Provider 中存在空值，请检查后重试！");
|
||||
return "";
|
||||
}
|
||||
providers.push(`[${behavior},${url},${group},${prepend},${name}]`);
|
||||
}
|
||||
queryParams.push(`ruleProvider=${encodeURIComponent(providers.join(","))}`);
|
||||
|
||||
let ruleList = [];
|
||||
for (let i = 0; i < rules.length / 2; i++) {
|
||||
if (rules[i * 2].value.trim() !== "") {
|
||||
let rule = rules[i * 2].value;
|
||||
let prepend = rules[i * 2 + 1].value;
|
||||
// 是否存在空值
|
||||
if (rule.trim() === "" || prepend.trim() === "") {
|
||||
// alert("Rule 中存在空值，请检查后重试！");
|
||||
return "";
|
||||
}
|
||||
ruleList.push(`[${rule},${prepend}]`);
|
||||
}
|
||||
}
|
||||
queryParams.push(`rule=${encodeURIComponent(ruleList.join(","))}`);
|
||||
|
||||
// 获取排序策略
|
||||
const sort = document.getElementById("sort").value;
|
||||
queryParams.push(`sort=${sort}`);
|
||||
|
||||
// 获取删除节点的正则表达式
|
||||
const remove = document.getElementById("remove").value;
|
||||
if (remove.trim() !== "") {
|
||||
queryParams.push(`remove=${encodeURIComponent(remove)}`);
|
||||
}
|
||||
|
||||
// 获取替换节点名称的正则表达式
|
||||
let replaceList = [];
|
||||
const replaces = document.getElementsByName("replace");
|
||||
for (let i = 0; i < replaces.length / 2; i++) {
|
||||
let replaceStr = `<${replaces[i * 2].value}>`;
|
||||
let replaceTo = `<${replaces[i * 2 + 1].value}>`;
|
||||
if (replaceStr.trim() === "") {
|
||||
// alert("重命名设置中存在空值，请检查后重试！");
|
||||
return "";
|
||||
}
|
||||
replaceList.push(`[${replaceStr},${replaceTo}]`);
|
||||
}
|
||||
queryParams.push(`replace=${encodeURIComponent(replaceList.join(","))}`);
|
||||
|
||||
return `${endpoint}?${queryParams.join("&")}`;
|
||||
}
|
||||
|
||||
// 将输入框中的 URL 解析为参数
|
||||
async function parseInputURL() {
|
||||
// 获取输入框中的 URL
|
||||
const inputURL = document.getElementById("urlInput").value;
|
||||
// 清除现有的输入框值
|
||||
clearExistingValues();
|
||||
if (!inputURL) {
|
||||
alert("请输入有效的链接！");
|
||||
return;
|
||||
}
|
||||
|
||||
let url;
|
||||
try {
|
||||
url = new URL(inputURL);
|
||||
} catch (_) {
|
||||
alert("无效的链接！");
|
||||
return;
|
||||
}
|
||||
if (url.pathname.includes("/s/")) {
|
||||
let hash = url.pathname.substring(url.pathname.lastIndexOf("/s/") + 3);
|
||||
let q = new URLSearchParams();
|
||||
let password = url.searchParams.get("password");
|
||||
if (password === null) {
|
||||
alert("仅可解析加密短链");
|
||||
return;
|
||||
}
|
||||
q.append("hash", hash);
|
||||
q.append("password", password);
|
||||
try {
|
||||
const response = await axios.get("./short?" + q.toString());
|
||||
url = new URL(window.location.href + response.data);
|
||||
|
||||
// 回显配置链接
|
||||
const apiLinkInput = document.querySelector("#apiLink");
|
||||
apiLinkInput.value = `${window.location.origin}${window.location.pathname}${response.data}`;
|
||||
setInputReadOnly(apiLinkInput, true);
|
||||
|
||||
// 回显短链相关信息
|
||||
const apiShortLinkInput = document.querySelector("#apiShortLink");
|
||||
apiShortLinkInput.value = inputURL;
|
||||
setInputReadOnly(apiShortLinkInput, true);
|
||||
|
||||
// 设置短链ID和密码，并设置为只读
|
||||
const customIdInput = document.querySelector("#customId");
|
||||
const passwordInput = document.querySelector("#password");
|
||||
const generateButton = document.querySelector('button[onclick="generateShortLink()"]');
|
||||
|
||||
customIdInput.value = hash;
|
||||
setInputReadOnly(customIdInput, true);
|
||||
|
||||
passwordInput.value = password;
|
||||
setInputReadOnly(passwordInput, true);
|
||||
|
||||
// 禁用生成短链按钮
|
||||
generateButton.disabled = true;
|
||||
generateButton.classList.add('btn-secondary');
|
||||
generateButton.classList.remove('btn-primary');
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
alert("获取短链失败，请检查密码！");
|
||||
}
|
||||
}
|
||||
let params = new URLSearchParams(url.search);
|
||||
|
||||
// 分配值到对应的输入框
|
||||
const pathSections = url.pathname.split("/");
|
||||
const lastSection = pathSections[pathSections.length - 1];
|
||||
const clientTypeSelect = document.getElementById("endpoint");
|
||||
switch (lastSection.toLowerCase()) {
|
||||
case "meta":
|
||||
clientTypeSelect.value = "meta";
|
||||
break;
|
||||
case "clash":
|
||||
default:
|
||||
clientTypeSelect.value = "clash";
|
||||
break;
|
||||
}
|
||||
|
||||
if (params.has("sub")) {
|
||||
document.getElementById("sub").value = decodeURIComponent(params.get("sub"))
|
||||
.split(",")
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
if (params.has("proxy")) {
|
||||
document.getElementById("proxy").value = decodeURIComponent(
|
||||
params.get("proxy")
|
||||
)
|
||||
.split(",")
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
if (params.has("refresh")) {
|
||||
document.getElementById("refresh").checked =
|
||||
params.get("refresh") === "true";
|
||||
}
|
||||
|
||||
if (params.has("autoTest")) {
|
||||
document.getElementById("autoTest").checked =
|
||||
params.get("autoTest") === "true";
|
||||
}
|
||||
|
||||
if (params.has("lazy")) {
|
||||
document.getElementById("lazy").checked = params.get("lazy") === "true";
|
||||
}
|
||||
|
||||
if (params.has("template")) {
|
||||
document.getElementById("template").value = decodeURIComponent(
|
||||
params.get("template")
|
||||
);
|
||||
}
|
||||
|
||||
if (params.has("sort")) {
|
||||
document.getElementById("sort").value = params.get("sort");
|
||||
}
|
||||
|
||||
if (params.has("remove")) {
|
||||
document.getElementById("remove").value = decodeURIComponent(
|
||||
params.get("remove")
|
||||
);
|
||||
}
|
||||
|
||||
if (params.has("userAgent")) {
|
||||
document.getElementById("user-agent").value = decodeURIComponent(
|
||||
params.get("userAgent")
|
||||
);
|
||||
}
|
||||
|
||||
if (params.has("ignoreCountryGroup")) {
|
||||
document.getElementById("igcg").checked =
|
||||
params.get("ignoreCountryGroup") === "true";
|
||||
}
|
||||
|
||||
if (params.has("replace")) {
|
||||
parseAndFillReplaceParams(decodeURIComponent(params.get("replace")));
|
||||
}
|
||||
|
||||
if (params.has("ruleProvider")) {
|
||||
parseAndFillRuleProviderParams(
|
||||
decodeURIComponent(params.get("ruleProvider"))
|
||||
);
|
||||
}
|
||||
|
||||
if (params.has("rule")) {
|
||||
parseAndFillRuleParams(decodeURIComponent(params.get("rule")));
|
||||
}
|
||||
|
||||
if (params.has("nodeList")) {
|
||||
document.getElementById("nodeList").checked =
|
||||
params.get("nodeList") === "true";
|
||||
}
|
||||
}
|
||||
|
||||
function clearInputGroup(groupId) {
|
||||
// 清空第二个之后的child
|
||||
const group = document.getElementById(groupId);
|
||||
while (group.children.length > 2) {
|
||||
group.removeChild(group.lastChild);
|
||||
}
|
||||
}
|
||||
|
||||
function parseAndFillReplaceParams(replaceParams) {
|
||||
const replaceGroup = document.getElementById("replaceGroup");
|
||||
let matches;
|
||||
const regex = /\[(<.*?>),(<.*?>)\]/g;
|
||||
const str = decodeURIComponent(replaceParams);
|
||||
while ((matches = regex.exec(str)) !== null) {
|
||||
const div = createReplace();
|
||||
const original = matches[1].slice(1, -1); // Remove < and >
|
||||
const replacement = matches[2].slice(1, -1); // Remove < and >
|
||||
|
||||
div.children[0].value = original;
|
||||
div.children[1].value = replacement;
|
||||
replaceGroup.appendChild(div);
|
||||
}
|
||||
}
|
||||
|
||||
function parseAndFillRuleProviderParams(ruleProviderParams) {
|
||||
const ruleProviderGroup = document.getElementById("ruleProviderGroup");
|
||||
let matches;
|
||||
const regex = /\[(.*?),(.*?),(.*?),(.*?),(.*?)\]/g;
|
||||
const str = decodeURIComponent(ruleProviderParams);
|
||||
while ((matches = regex.exec(str)) !== null) {
|
||||
const div = createRuleProvider();
|
||||
div.children[0].value = matches[1];
|
||||
div.children[1].value = matches[2];
|
||||
div.children[2].value = matches[3];
|
||||
div.children[3].value = matches[4];
|
||||
div.children[4].value = matches[5];
|
||||
ruleProviderGroup.appendChild(div);
|
||||
}
|
||||
}
|
||||
|
||||
function parseAndFillRuleParams(ruleParams) {
|
||||
const ruleGroup = document.getElementById("ruleGroup");
|
||||
let matches;
|
||||
const regex = /\[(.*?),(.*?)\]/g;
|
||||
const str = decodeURIComponent(ruleParams);
|
||||
while ((matches = regex.exec(str)) !== null) {
|
||||
const div = createRule();
|
||||
div.children[0].value = matches[1];
|
||||
div.children[1].value = matches[2];
|
||||
ruleGroup.appendChild(div);
|
||||
}
|
||||
}
|
||||
|
||||
async function copyToClipboard(elem, e) {
|
||||
const apiLinkInput = document.querySelector(`#${elem}`).value;
|
||||
try {
|
||||
await navigator.clipboard.writeText(apiLinkInput);
|
||||
let text = e.textContent;
|
||||
e.addEventListener("mouseout", function () {
|
||||
e.textContent = text;
|
||||
});
|
||||
e.textContent = "复制成功";
|
||||
} catch (err) {
|
||||
console.error("复制到剪贴板失败:", err);
|
||||
}
|
||||
}
|
||||
|
||||
function createRuleProvider() {
|
||||
const div = document.createElement("div");
|
||||
div.classList.add("input-group", "mb-2");
|
||||
div.innerHTML = `
|
||||
<input type="text" class="form-control" name="ruleProvider" placeholder="Behavior">
|
||||
<input type="text" class="form-control" name="ruleProvider" placeholder="Url">
|
||||
<input type="text" class="form-control" name="ruleProvider" placeholder="Group">
|
||||
<input type="text" class="form-control" name="ruleProvider" placeholder="Prepend">
|
||||
<input type="text" class="form-control" name="ruleProvider" placeholder="Name">
|
||||
<button type="button" class="btn btn-danger" onclick="removeElement(this)">删除</button>
|
||||
`;
|
||||
return div;
|
||||
}
|
||||
|
||||
function createReplace() {
|
||||
const div = document.createElement("div");
|
||||
div.classList.add("input-group", "mb-2");
|
||||
div.innerHTML = `
|
||||
<input type="text" class="form-control" name="replace" placeholder="原字符串（正则表达式）">
|
||||
<input type="text" class="form-control" name="replace" placeholder="替换为（可为空）">
|
||||
<button type="button" class="btn btn-danger" onclick="removeElement(this)">删除</button>
|
||||
`;
|
||||
return div;
|
||||
}
|
||||
|
||||
function createRule() {
|
||||
const div = document.createElement("div");
|
||||
div.classList.add("input-group", "mb-2");
|
||||
div.innerHTML = `
|
||||
<input type="text" class="form-control" name="rule" placeholder="Rule">
|
||||
<input type="text" class="form-control" name="rule" placeholder="Prepend">
|
||||
<button type="button" class="btn btn-danger" onclick="removeElement(this)">删除</button>
|
||||
`;
|
||||
return div;
|
||||
}
|
||||
|
||||
function listenInput() {
|
||||
let selectElements = document.querySelectorAll("select");
|
||||
let inputElements = document.querySelectorAll("input");
|
||||
let textAreaElements = document.querySelectorAll("textarea");
|
||||
inputElements.forEach(function (element) {
|
||||
element.addEventListener("input", function () {
|
||||
generateURL();
|
||||
});
|
||||
});
|
||||
textAreaElements.forEach(function (element) {
|
||||
element.addEventListener("input", function () {
|
||||
generateURL();
|
||||
});
|
||||
});
|
||||
selectElements.forEach(function (element) {
|
||||
element.addEventListener("change", function () {
|
||||
generateURL();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function addRuleProvider() {
|
||||
const div = createRuleProvider();
|
||||
document.getElementById("ruleProviderGroup").appendChild(div);
|
||||
listenInput();
|
||||
}
|
||||
|
||||
function addRule() {
|
||||
const div = createRule();
|
||||
document.getElementById("ruleGroup").appendChild(div);
|
||||
listenInput();
|
||||
}
|
||||
|
||||
function addReplace() {
|
||||
const div = createReplace();
|
||||
document.getElementById("replaceGroup").appendChild(div);
|
||||
listenInput();
|
||||
}
|
||||
|
||||
function removeElement(button) {
|
||||
button.parentElement.remove();
|
||||
}
|
||||
|
||||
function generateURL() {
|
||||
const apiLink = document.getElementById("apiLink");
|
||||
let uri = generateURI();
|
||||
if (uri === "") {
|
||||
return;
|
||||
}
|
||||
apiLink.value = `${window.location.origin}${window.location.pathname}${uri}`;
|
||||
setInputReadOnly(apiLink, true);
|
||||
}
|
||||
|
||||
function generateShortLink() {
|
||||
const apiShortLink = document.getElementById("apiShortLink");
|
||||
const password = document.getElementById("password");
|
||||
const customId = document.getElementById("customId");
|
||||
let uri = generateURI();
|
||||
if (uri === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
axios
|
||||
.post(
|
||||
"./short",
|
||||
{
|
||||
url: uri,
|
||||
password: password.value.trim(),
|
||||
customId: customId.value.trim()
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
// 设置返回的短链ID和密码
|
||||
customId.value = response.data.hash;
|
||||
password.value = response.data.password;
|
||||
// 生成完整的短链接
|
||||
const shortLink = `${window.location.origin}${window.location.pathname}s/${response.data.hash}?password=${response.data.password}`;
|
||||
apiShortLink.value = shortLink;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
if (error.response && error.response.data) {
|
||||
alert(error.response.data);
|
||||
} else {
|
||||
alert("生成短链失败，请重试！");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateShortLink() {
|
||||
const password = document.getElementById("password");
|
||||
const apiShortLink = document.getElementById("apiShortLink");
|
||||
let hash = apiShortLink.value;
|
||||
if (hash.startsWith("http")) {
|
||||
let u = new URL(hash);
|
||||
hash = u.pathname.substring(u.pathname.lastIndexOf("/s/") + 3);
|
||||
}
|
||||
if (password.value.trim() === "") {
|
||||
alert("请输入原密码进行验证！");
|
||||
return;
|
||||
}
|
||||
let uri = generateURI();
|
||||
if (uri === "") {
|
||||
return;
|
||||
}
|
||||
axios
|
||||
.put(
|
||||
"./short",
|
||||
{
|
||||
hash: hash,
|
||||
url: uri,
|
||||
password: password.value.trim(),
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
alert(`短链 ${hash} 更新成功！`);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
if (error.response && error.response.status === 401) {
|
||||
alert("密码错误，请输入正确的原密码！");
|
||||
} else if (error.response && error.response.data) {
|
||||
alert(error.response.data);
|
||||
} else {
|
||||
alert("更新短链失败，请重试！");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
listenInput();
|
||||
Reference in New Issue
Block a user