mirror of
https://github.com/bestnite/sub2clash.git
synced 2025-10-26 01:01:35 +00:00
713 lines
24 KiB
TypeScript
713 lines
24 KiB
TypeScript
import { LitElement, html, unsafeCSS } from "lit";
|
||
import { customElement, query, state } from "lit/decorators.js";
|
||
import globalStyles from "./index.css?inline";
|
||
import { type Config, type Rule, type RuleProvider } from "./interface.js";
|
||
import axios, { AxiosError } from "axios";
|
||
import { base64EncodeUnicode, base64decodeUnicode } from "./utils.js";
|
||
import "./components/rule-provider-input.js";
|
||
import "./components/rule-input.js";
|
||
import "./components/rename-input.js";
|
||
|
||
@customElement("sub2clash-app")
|
||
export class Sub2clashApp extends LitElement {
|
||
static styles = [unsafeCSS(globalStyles)];
|
||
|
||
private _config: Config = {
|
||
clashType: 2,
|
||
subscriptions: [],
|
||
proxies: [],
|
||
refresh: false,
|
||
autoTest: false,
|
||
lazy: false,
|
||
ignoreCountryGroup: false,
|
||
useUDP: false,
|
||
template: "",
|
||
sort: "nameasc",
|
||
remove: "",
|
||
nodeList: false,
|
||
ruleProviders: [],
|
||
replace: undefined,
|
||
rules: [],
|
||
};
|
||
|
||
@state()
|
||
set config(value: Config) {
|
||
console.log(JSON.stringify(value));
|
||
if (
|
||
(value.subscriptions == null || value.subscriptions.length == 0) &&
|
||
(value.proxies == null || value.proxies.length == 0)
|
||
) {
|
||
this.configUrl = "";
|
||
return;
|
||
}
|
||
const oldValue = this._config;
|
||
this.configUrl = `${
|
||
window.location.origin
|
||
}${window.location.pathname.replace(
|
||
/\/$/,
|
||
""
|
||
)}/convert/${base64EncodeUnicode(JSON.stringify(value))
|
||
.replace(/\+/g, "-")
|
||
.replace(/\//g, "_")}`;
|
||
this._config = value;
|
||
this.requestUpdate("config", oldValue);
|
||
}
|
||
|
||
get config(): Config {
|
||
return this._config;
|
||
}
|
||
|
||
@state({
|
||
hasChanged(value: boolean) {
|
||
localStorage.setItem("theme", value ? "dark" : "light");
|
||
document
|
||
.querySelector("html")
|
||
?.setAttribute("data-theme", value ? "dark" : "light");
|
||
return true;
|
||
},
|
||
})
|
||
darkTheme: boolean = this.initTheme();
|
||
|
||
initTheme(): boolean {
|
||
const savedTheme = localStorage.getItem("theme");
|
||
if (savedTheme != null) {
|
||
return savedTheme === "dark" ? true : false;
|
||
}
|
||
const prefersDark = window.matchMedia(
|
||
"(prefers-color-scheme: dark)"
|
||
).matches;
|
||
return prefersDark;
|
||
}
|
||
|
||
@state()
|
||
reverseUrl: string = "";
|
||
|
||
@state()
|
||
dialogMessage: string = "";
|
||
|
||
@state()
|
||
dialogTitle: string = "";
|
||
|
||
@query("dialog#my_modal")
|
||
dialog!: HTMLDialogElement;
|
||
|
||
showDialog(title: string, message: string): void {
|
||
if (title.trim() === "") {
|
||
title = "警告";
|
||
}
|
||
this.dialogTitle = title;
|
||
this.dialogMessage = message;
|
||
this.dialog.showModal();
|
||
}
|
||
|
||
@state()
|
||
configUrl: string = "";
|
||
|
||
@state()
|
||
shortLinkID: string = "";
|
||
|
||
@state()
|
||
shortLinkPasswd: string = "";
|
||
|
||
async copyToClipboard(content: string, e: HTMLButtonElement) {
|
||
try {
|
||
await navigator.clipboard.writeText(content);
|
||
let text = e.textContent;
|
||
e.addEventListener("mouseout", function () {
|
||
e.textContent = text;
|
||
});
|
||
e.textContent = "复制成功";
|
||
} catch (err) {
|
||
console.error("复制到剪贴板失败:", err);
|
||
}
|
||
}
|
||
|
||
generateShortLink() {
|
||
if (this.configUrl === "") {
|
||
this.showDialog("", "还未填写配置");
|
||
return;
|
||
}
|
||
axios
|
||
.post(
|
||
"./short",
|
||
{
|
||
config: this.config,
|
||
password: this.shortLinkPasswd,
|
||
id: this.shortLinkID,
|
||
},
|
||
{
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
}
|
||
)
|
||
.then((response) => {
|
||
// 设置返回的短链ID和密码
|
||
this.shortLinkID = response.data.id;
|
||
this.shortLinkPasswd = response.data.password;
|
||
})
|
||
.catch((error) => {
|
||
if (error.response && error.response.data) {
|
||
this.showDialog("", "生成短链失败：" + error.response.data);
|
||
} else {
|
||
this.showDialog("", "生成短链失败");
|
||
}
|
||
});
|
||
}
|
||
|
||
updateShortLink() {
|
||
if (this.shortLinkID.trim() === "") {
|
||
this.showDialog("", "请输入ID");
|
||
return;
|
||
}
|
||
if (this.shortLinkPasswd.trim() === "") {
|
||
this.showDialog("", "请输入密码");
|
||
return;
|
||
}
|
||
if (this.configUrl === "") {
|
||
this.showDialog("", "还未填写配置");
|
||
return;
|
||
}
|
||
axios
|
||
.put(
|
||
"./short",
|
||
{
|
||
id: this.shortLinkID,
|
||
config: this.config,
|
||
password: this.shortLinkPasswd,
|
||
},
|
||
{
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
}
|
||
)
|
||
.then(() => {
|
||
this.showDialog("成功", "更新成功");
|
||
})
|
||
.catch((error) => {
|
||
if (error.response && error.response.status === 401) {
|
||
this.showDialog("", "密码错误");
|
||
} else if (error.response && error.response.data) {
|
||
this.showDialog("", "更新短链失败：" + error.response.data);
|
||
} else {
|
||
this.showDialog("", "更新短链失败");
|
||
}
|
||
});
|
||
}
|
||
|
||
deleteShortLink() {
|
||
if (this.shortLinkID.trim() === "") {
|
||
this.showDialog("", "请输入ID");
|
||
return;
|
||
}
|
||
if (this.shortLinkPasswd.trim() === "") {
|
||
this.showDialog("", "请输入密码");
|
||
return;
|
||
}
|
||
const params = new URLSearchParams();
|
||
params.append("password", this.shortLinkPasswd);
|
||
axios
|
||
.delete(`./short/${this.shortLinkID}?${params.toString()}`, {
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then(() => {
|
||
this.showDialog("成功", "删除成功");
|
||
})
|
||
.catch((error) => {
|
||
if (error.response && error.response.status === 401) {
|
||
this.showDialog("", "短链不存在或密码错误");
|
||
} else if (error.response && error.response.data) {
|
||
this.showDialog("", "删除短链失败：" + error.response.data);
|
||
} else {
|
||
this.showDialog("", "删除短链失败");
|
||
}
|
||
});
|
||
}
|
||
|
||
getRawConfigFromShortLink() {
|
||
const s = this.reverseUrl.split("/s/");
|
||
if (s.length != 2) {
|
||
this.showDialog("", "解析失败");
|
||
return;
|
||
}
|
||
|
||
axios
|
||
.get(`./short/${s[1]}`)
|
||
.then((resp) => {
|
||
this.config = resp.data;
|
||
})
|
||
.catch((err: AxiosError) => {
|
||
if (err.response && err.response.status == 401) {
|
||
this.showDialog("", "短链不存在或密码错误");
|
||
} else if (err.response && err.response.data) {
|
||
this.showDialog("", "获取配置失败：" + err.response.data);
|
||
} else {
|
||
this.showDialog("", "获取配置失败");
|
||
}
|
||
});
|
||
}
|
||
|
||
parseConfig() {
|
||
if (this.reverseUrl.trim() === "") {
|
||
this.showDialog("", "无法解析，链接为空");
|
||
}
|
||
if (this.reverseUrl.indexOf("/s/") != -1) {
|
||
this.getRawConfigFromShortLink();
|
||
return;
|
||
}
|
||
let url = new URL(this.reverseUrl);
|
||
const pathSections = url.pathname.split("/");
|
||
if (pathSections.length < 2) {
|
||
this.showDialog("", "无法解析，链接格式错误");
|
||
}
|
||
if (pathSections[pathSections.length - 2] == "convert") {
|
||
let base64Data = pathSections[pathSections.length - 1];
|
||
base64Data = base64Data.replace(/-/g, "+").replace(/_/g, "/");
|
||
try {
|
||
const configData = base64decodeUnicode(base64Data);
|
||
this.config = JSON.parse(configData) as Config;
|
||
} catch (e: any) {
|
||
this.showDialog("", "无法解析 Base64，配置格式错误");
|
||
return;
|
||
}
|
||
} else {
|
||
this.showDialog("", "无法解析，链接格式错误");
|
||
}
|
||
}
|
||
|
||
render() {
|
||
return html`
|
||
<dialog id="my_modal" class="modal">
|
||
<div class="modal-box">
|
||
<h3 class="text-lg font-bold">${this.dialogTitle}</h3>
|
||
<p class="py-4">${this.dialogMessage}</p>
|
||
<div class="modal-action">
|
||
<form method="dialog">
|
||
<button class="btn">关闭</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
<div class="max-w-4xl mx-auto p-4 flex flex-col items-center">
|
||
<form class="w-full max-w-2xl bg-base-100">
|
||
<fieldset class="fieldset mb-6">
|
||
<div class="flex flex-row justify-between items-center my-6">
|
||
<legend
|
||
class="fieldset-legend text-2xl font-semibold inline-block m-0 p-0">
|
||
sub2clash
|
||
</legend>
|
||
<label class="swap swap-rotate h-7 w-7">
|
||
<!-- this hidden checkbox controls the state -->
|
||
<input
|
||
type="checkbox"
|
||
class="theme-controller"
|
||
.checked="${!this.darkTheme}"
|
||
@change="${() => (this.darkTheme = !this.darkTheme)}" />
|
||
|
||
<!-- sun icon -->
|
||
<svg
|
||
class="swap-off h-7 w-7 fill-current"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
|
||
</svg>
|
||
|
||
<!-- moon icon -->
|
||
<svg
|
||
class="swap-on h-7 w-7 fill-current"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 24 24">
|
||
<path
|
||
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
|
||
</svg>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Input URL -->
|
||
<div class="form-control mb-5">
|
||
<label class="label mb-1 pl-1">解析链接</label>
|
||
<div class="join w-full">
|
||
<input
|
||
class="input input-bordered w-full join-item"
|
||
type="text"
|
||
@change="${(e: Event) => {
|
||
this.reverseUrl = (e.target as HTMLInputElement).value;
|
||
}}"
|
||
placeholder="通过生成的链接重新填写下方设置" />
|
||
<button
|
||
class="btn btn-primary join-item"
|
||
@click="${this.parseConfig}"
|
||
type="button">
|
||
解析
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API Endpoint -->
|
||
<div class="form-control mb-3">
|
||
<label class="label mb-1 pl-1" for="endpoint">客户端类型</label>
|
||
<select
|
||
class="select select-bordered w-full"
|
||
name="endpoint"
|
||
.value="${this.config.clashType == 1 ? "1" : "2"}"
|
||
@change="${(e: Event) => {
|
||
this.config = {
|
||
...this.config,
|
||
clashType: Number((e.target as HTMLInputElement).value),
|
||
};
|
||
}}">
|
||
<option value="1">Clash</option>
|
||
<option value="2" selected>Clash.Meta</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Template -->
|
||
<div class="form-control mb-3">
|
||
<label class="label mb-1 pl-1" for="template">模板链接</label>
|
||
<input
|
||
class="input input-bordered w-full"
|
||
name="template"
|
||
placeholder="输入模板链接"
|
||
type="text"
|
||
.value="${this.config.template ?? ""}"
|
||
@change="${(e: Event) => {
|
||
this.config = {
|
||
...this.config,
|
||
template: (e.target as HTMLInputElement).value,
|
||
};
|
||
}}" />
|
||
</div>
|
||
|
||
<!-- Subscription Link -->
|
||
<div class="form-control mb-3">
|
||
<label class="label mb-1 pl-1" for="sub">订阅链接</label>
|
||
<div>
|
||
<textarea
|
||
class="textarea textarea-bordered h-24 w-full"
|
||
name="sub"
|
||
placeholder="每行输入一个订阅链接"
|
||
.value="${this.config.subscriptions
|
||
? this.config.subscriptions.join("\n")
|
||
: ""}"
|
||
@change="${(e: Event) => {
|
||
this.config = {
|
||
...this.config,
|
||
subscriptions: (e.target as HTMLInputElement).value
|
||
.split("\n")
|
||
.filter((e) => e.trim() !== ""),
|
||
};
|
||
}}"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Proxy Link -->
|
||
<div class="form-control mb-3">
|
||
<label class="label mb-1 pl-1" for="proxy">节点分享链接</label>
|
||
<div>
|
||
<textarea
|
||
class="textarea textarea-bordered h-24 w-full"
|
||
name="proxy"
|
||
placeholder="每行输入一个节点分享链接"
|
||
.value="${this.config.proxies
|
||
? this.config.proxies.join("\n")
|
||
: ""}"
|
||
@change="${(e: Event) => {
|
||
this.config = {
|
||
...this.config,
|
||
proxies: (e.target as HTMLInputElement).value
|
||
.split("\n")
|
||
.filter((e) => e.trim() !== ""),
|
||
};
|
||
}}"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Agent -->
|
||
<div class="form-control mb-3">
|
||
<label class="label mb-1 pl-1" for="user-agent">UA 标识</label>
|
||
<div>
|
||
<textarea
|
||
class="textarea textarea-bordered h-20 w-full"
|
||
name="user-agent"
|
||
placeholder="用于获取订阅的 http 请求中的 User-Agent 标识"
|
||
.value="${this.config.userAgent ?? ""}"
|
||
@change="${(e: Event) => {
|
||
this.config = {
|
||
...this.config,
|
||
userAgent: (e.target as HTMLInputElement).value,
|
||
};
|
||
}}"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sort -->
|
||
<div class="form-control mb-3">
|
||
<label class="label mb-1 pl-1" for="sort">
|
||
国家策略组排序规则
|
||
</label>
|
||
<select
|
||
class="select select-bordered w-full"
|
||
name="sort"
|
||
.value="${this.config.sort ?? "nameasc"}"
|
||
@change="${(e: Event) => {
|
||
this.config = {
|
||
...this.config,
|
||
sort: (e.target as HTMLInputElement).value,
|
||
};
|
||
}}">
|
||
<option value="nameasc">名称（升序）</option>
|
||
<option value="namedesc">名称（降序）</option>
|
||
<option value="sizeasc">节点数量（升序）</option>
|
||
<option value="sizedesc">节点数量（降序）</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Remove -->
|
||
<div class="form-control mb-3">
|
||
<label class="label mb-1 pl-1" for="remove">
|
||
<span class="label-text">排除节点</span>
|
||
</label>
|
||
<input
|
||
class="input input-bordered w-full"
|
||
type="text"
|
||
name="remove"
|
||
placeholder="正则表达式"
|
||
.value="${this.config.remove ?? ""}"
|
||
@change="${(e: Event) => {
|
||
this.config = {
|
||
...this.config,
|
||
remove: (e.target as HTMLInputElement).value,
|
||
};
|
||
}}" />
|
||
</div>
|
||
|
||
<!-- Checkboxes -->
|
||
<div class="form-control mb-3">
|
||
<label class="label cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
name="refresh"
|
||
class="checkbox"
|
||
.checked="${this.config.refresh ?? false}"
|
||
@change="${(e: Event) => {
|
||
this.config = {
|
||
...this.config,
|
||
refresh: (e.target as HTMLInputElement).checked,
|
||
};
|
||
}}" />
|
||
强制重新获取订阅
|
||
</label>
|
||
</div>
|
||
<div class="form-control mb-3">
|
||
<label class="label cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
name="nodeList"
|
||
class="checkbox"
|
||
.checked="${this.config.nodeList ?? false}"
|
||
@change="${(e: Event) => {
|
||
this.config = {
|
||
...this.config,
|
||
nodeList: (e.target as HTMLInputElement).checked,
|
||
};
|
||
}}" />
|
||
输出为 Node List
|
||
</label>
|
||
</div>
|
||
<div class="form-control mb-3">
|
||
<label class="label cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
name="autoTest"
|
||
class="checkbox"
|
||
.checked="${this.config.autoTest ?? false}"
|
||
@change="${(e: Event) => {
|
||
this.config = {
|
||
...this.config,
|
||
autoTest: (e.target as HTMLInputElement).checked,
|
||
};
|
||
}}" />
|
||
国家策略组自动测速
|
||
</label>
|
||
</div>
|
||
<div class="form-control mb-3">
|
||
<label class="label cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
name="lazy"
|
||
class="checkbox"
|
||
.checked="${this.config.lazy ?? false}"
|
||
@change="${(e: Event) => {
|
||
this.config = {
|
||
...this.config,
|
||
lazy: (e.target as HTMLInputElement).checked,
|
||
};
|
||
}}" />
|
||
自动测速启用 lazy 模式
|
||
</label>
|
||
</div>
|
||
<div class="form-control mb-3">
|
||
<label class="label cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
name="igcg"
|
||
class="checkbox"
|
||
.checked="${this.config.ignoreCountryGroup ?? false}"
|
||
@change="${(e: Event) => {
|
||
this.config = {
|
||
...this.config,
|
||
ignoreCountryGroup: (e.target as HTMLInputElement)
|
||
.checked,
|
||
};
|
||
}}" />
|
||
不输出国家策略组
|
||
</label>
|
||
</div>
|
||
<div class="form-control mb-5">
|
||
<label class="label cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
name="useUDP"
|
||
class="checkbox"
|
||
.checked="${this.config.useUDP ?? false}"
|
||
@change="${(e: Event) => {
|
||
this.config = {
|
||
...this.config,
|
||
useUDP: (e.target as HTMLInputElement).checked,
|
||
};
|
||
}}" />
|
||
使用 UDP
|
||
</label>
|
||
</div>
|
||
|
||
<rule-provider-input
|
||
@change="${(e: CustomEvent<Array<RuleProvider>>) => {
|
||
this.config = {
|
||
...this.config,
|
||
ruleProviders: e.detail,
|
||
};
|
||
}}"></rule-provider-input>
|
||
|
||
<rule-input
|
||
@change="${(e: CustomEvent<Array<Rule>>) => {
|
||
this.config = {
|
||
...this.config,
|
||
rules: e.detail,
|
||
};
|
||
}}"></rule-input>
|
||
<rename-input
|
||
@change="${(e: CustomEvent<{ [key: string]: string }>) => {
|
||
this.config = {
|
||
...this.config,
|
||
replace: e.detail,
|
||
};
|
||
}}"></rename-input>
|
||
</fieldset>
|
||
|
||
<fieldset class="fieldset mb-8">
|
||
<legend
|
||
class="fieldset-legend text-2xl font-semibold mb-4 text-center">
|
||
输出配置
|
||
</legend>
|
||
|
||
<!-- Display the API Link -->
|
||
<div class="form-control mb-5">
|
||
<div class="join w-full mb-2">
|
||
<input
|
||
class="input input-bordered w-full join-item cursor-not-allowed"
|
||
type="text"
|
||
placeholder="链接"
|
||
.value="${this.configUrl}"
|
||
readonly />
|
||
<button
|
||
class="btn btn-primary join-item"
|
||
@click="${(e: Event) => {
|
||
this.copyToClipboard(
|
||
this.configUrl,
|
||
e.target as HTMLButtonElement
|
||
);
|
||
}}"
|
||
type="button">
|
||
复制链接
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-control mb-2">
|
||
<div class="join w-full">
|
||
<input
|
||
class="input input-bordered w-1/2 join-item"
|
||
type="text"
|
||
placeholder="ID（可选）"
|
||
.value="${this.shortLinkID}"
|
||
@change="${(e: Event) => {
|
||
this.shortLinkID = (e.target as HTMLInputElement).value;
|
||
}}" />
|
||
<input
|
||
class="input input-bordered w-1/2 join-item"
|
||
type="text"
|
||
placeholder="密码"
|
||
.value="${this.shortLinkPasswd}"
|
||
@change="${(e: Event) => {
|
||
this.shortLinkPasswd = (e.target as HTMLInputElement).value;
|
||
}}" />
|
||
<button
|
||
class="btn btn-primary join-item"
|
||
type="button"
|
||
@click="${this.generateShortLink}">
|
||
生成短链
|
||
</button>
|
||
<button
|
||
class="btn btn-primary join-item"
|
||
@click="${this.updateShortLink}"
|
||
type="button">
|
||
更新短链
|
||
</button>
|
||
<button
|
||
class="btn btn-primary join-item"
|
||
@click="${this.deleteShortLink}"
|
||
type="button">
|
||
删除短链
|
||
</button>
|
||
<button
|
||
class="btn btn-primary join-item"
|
||
type="button"
|
||
@click="${(e: Event) => {
|
||
this.copyToClipboard(
|
||
`${window.location.origin}${window.location.pathname}s/${this.shortLinkID}?password=${this.shortLinkPasswd}`,
|
||
e.target as HTMLButtonElement
|
||
);
|
||
}}">
|
||
复制短链
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
</form>
|
||
</div>
|
||
|
||
<footer class="footer footer-horizontal footer-center mb-8">
|
||
<aside>
|
||
<p>
|
||
Powered by
|
||
<a class="link" href="https://github.com/bestnite/sub2clash"
|
||
>sub2clash</a
|
||
>
|
||
</p>
|
||
<p>Version: ${import.meta.env.VITE_APP_VERSION ?? "dev"}</p>
|
||
</aside>
|
||
</footer>
|
||
`;
|
||
}
|
||
}
|
||
|
||
declare global {
|
||
interface HTMLElementTagNameMap {
|
||
"sub2clash-app": Sub2clashApp;
|
||
}
|
||
}
|