import { SettingList } from "./components/SettingList";
import { SettingItem } from "./components/SettingItem";
import { SettingButton } from "./components/SettingButton";
import { SettingSwitch } from "./components/SettingSwitch";
import { SettingSelect } from "./components/SettingSelect";
import { OB11Config, OB11ConfigWrapper } from "./components/WebUiApiOB11Config";
async function onSettingWindowCreated(view: Element) {
const isEmpty = (value: any) => value === undefined || value === undefined || value === "";
await OB11ConfigWrapper.Init(localStorage.getItem("auth") as string);
let ob11Config: OB11Config = await OB11ConfigWrapper.GetOB11Config();
const setOB11Config = (key: string, value: any) => {
const configKey = key.split(".");
if (configKey.length === 2) {
ob11Config[configKey[1]] = value;
} else if (configKey.length === 3) {
ob11Config[configKey[1]][configKey[2]] = value;
}
OB11ConfigWrapper.SetOB11Config(ob11Config);
};
const parser = new DOMParser();
const doc = parser.parseFromString(
[
"
",
`
`,
SettingList([
SettingItem(
'
Napcat',
undefined,
SettingButton("V1.3.5", "napcat-update-button", "secondary")
),
]),
SettingList([
SettingItem(
"启用 HTTP 服务",
undefined,
SettingSwitch("ob11.http.enable", ob11Config.http.enable, {
"control-display-id": "config-ob11-http-port",
})
),
SettingItem(
"HTTP 服务监听端口",
undefined,
`
`,
"config-ob11-http-port",
ob11Config.http.enable
),
SettingItem(
"启用 HTTP 心跳",
undefined,
SettingSwitch("ob11.http.enableHeart", ob11Config.http.enableHeart, {
"control-display-id": "config-ob11-HTTP.enableHeart",
})
),
SettingItem(
"启用 HTTP 事件上报",
undefined,
SettingSwitch("ob11.http.enablePost", ob11Config.http.enablePost, {
"control-display-id": "config-ob11-http-postUrls",
})
),
`
HTTP 事件上报密钥
HTTP 事件上报地址
添加
`,
SettingItem(
"启用正向 WebSocket 服务",
undefined,
SettingSwitch("ob11.ws.enable", ob11Config.ws.enable, {
"control-display-id": "config-ob11-ws.port",
})
),
SettingItem(
"正向 WebSocket 服务监听端口",
undefined,
`
`,
"config-ob11-ws.port",
ob11Config.ws.enable
),
SettingItem(
"启用反向 WebSocket 服务",
undefined,
SettingSwitch("ob11.reverseWs.enable", ob11Config.reverseWs.enable, {
"control-display-id": "config-ob11-reverseWs-urls",
})
),
`
`,
SettingItem(
" WebSocket 服务心跳间隔",
"控制每隔多久发送一个心跳包,单位为毫秒",
`
`
),
SettingItem(
"Access token",
undefined,
`
`
),
SettingItem(
"新消息上报格式",
"如客户端无特殊需求推荐保持默认设置,两者的详细差异可参考
OneBot v11 文档",
SettingSelect(
[
{ text: "消息段", value: "array" },
{ text: "CQ码", value: "string" },
],
"ob11.messagePostFormat",
ob11Config.messagePostFormat
)
),
SettingItem(
"音乐卡片签名地址",
undefined,
`
`,
"ob11.musicSignUrl"
),
SettingItem(
"",
undefined,
SettingButton("保存", "config-ob11-save", "primary")
),
]),
SettingList([
SettingItem(
"上报 Bot 自身发送的消息",
"上报 event 为 message_sent",
SettingSwitch("ob11.reportSelfMessage", ob11Config.reportSelfMessage)
),
]),
SettingList([
SettingItem(
"GitHub 仓库",
`https://github.com/NapNeko/NapCatQQ`,
SettingButton("点个星星", "open-github")
),
SettingItem("NapCat 文档", ``, SettingButton("看看文档", "open-docs")),
SettingItem(
"Telegram 群",
`https://t.me/+nLZEnpne-pQ1OWFl`,
SettingButton("进去逛逛", "open-telegram")
),
SettingItem(
"QQ 群",
`545402644`,
SettingButton("我要进去", "open-qq-group")
),
]),
"
",
].join(""),
"text/html"
);
// 外链按钮
doc.querySelector("#open-github")?.addEventListener("click", () => {
window.open("https://napneko.github.io/", "_blank");
});
doc.querySelector("#open-telegram")?.addEventListener("click", () => {
window.open("https://t.me/+nLZEnpne-pQ1OWFl");
});
doc.querySelector("#open-qq-group")?.addEventListener("click", () => {
window.open("https://qm.qq.com/q/bDnHRG38aI");
});
doc.querySelector("#open-docs")?.addEventListener("click", () => {
window.open("https://github.com/NapNeko/NapCatQQ");
});
// 生成反向地址列表
const buildHostListItem = (
type: string,
host: string,
index: number,
inputAttrs: any = {}
) => {
const dom = {
container: document.createElement("setting-item"),
input: document.createElement("input"),
inputContainer: document.createElement("div"),
deleteBtn: document.createElement("setting-button"),
};
dom.container.classList.add("setting-host-list-item");
dom.container.dataset.direction = "row";
Object.assign(dom.input, inputAttrs);
dom.input.classList.add("q-input__inner");
dom.input.type = "url";
dom.input.value = host;
dom.input.addEventListener("input", () => {
ob11Config[type.split("-")[0]][type.split("-")[1]][index] =
dom.input.value;
});
dom.inputContainer.classList.add("q-input");
dom.inputContainer.appendChild(dom.input);
dom.deleteBtn.innerHTML = "删除";
dom.deleteBtn.dataset.type = "secondary";
dom.deleteBtn.addEventListener("click", () => {
ob11Config[type.split("-")[0]][type.split("-")[1]].splice(index, 1);
initReverseHost(type);
});
dom.container.appendChild(dom.inputContainer);
dom.container.appendChild(dom.deleteBtn);
return dom.container;
};
const buildHostList = (
hosts: string[],
type: string,
inputAttr: any = {}
) => {
const result: HTMLElement[] = [];
hosts?.forEach((host, index) => {
result.push(buildHostListItem(type, host, index, inputAttr));
});
return result;
};
const addReverseHost = (
type: string,
doc: Document = document,
inputAttr: any = {}
) => {
type = type.replace(/\./g, "-");//替换操作
const hostContainerDom = doc.body.querySelector(
`#config-ob11-${type}-list`
);
hostContainerDom?.appendChild(
buildHostListItem(
type,
"",
ob11Config[type.split("-")[0]][type.split("-")[1]].length,
inputAttr
)
);
ob11Config[type.split("-")[0]][type.split("-")[1]].push("");
};
const initReverseHost = (type: string, doc: Document = document) => {
type = type.replace(/\./g, "-");//替换操作
const hostContainerDom = doc.body?.querySelector(
`#config-ob11-${type}-list`
);
if (hostContainerDom) {
[...hostContainerDom.childNodes].forEach((dom) => dom.remove());
buildHostList(
ob11Config[type.split("-")[0]][type.split("-")[1]],
type
).forEach((dom) => {
hostContainerDom?.appendChild(dom);
});
}
};
initReverseHost("http.postUrls", doc);
initReverseHost("reverseWs.urls", doc);
doc
.querySelector("#config-ob11-http-postUrls-add")
?.addEventListener("click", () =>
addReverseHost("http.postUrls", document, {
placeholder: "如:http://127.0.0.1:5140/onebot",
})
);
doc
.querySelector("#config-ob11-reverseWs-urls-add")
?.addEventListener("click", () =>
addReverseHost("reverseWs.urls", document, {
placeholder: "如:ws://127.0.0.1:5140/onebot",
})
);
doc.querySelector("#config-ffmpeg-select")?.addEventListener("click", () => {
//选择ffmpeg
});
doc.querySelector("#config-open-log-path")?.addEventListener("click", () => {
//打开日志
});
// 开关
doc
.querySelectorAll("setting-switch[data-config-key]")
.forEach((dom: Element) => {
dom.addEventListener("click", () => {
const active = dom.getAttribute("is-active") == undefined;
//@ts-ignore 扩展
setOB11Config(dom.dataset.configKey, active);
if (active) dom.setAttribute("is-active", "");
else dom.removeAttribute("is-active");
//@ts-ignore 等待修复
if (!isEmpty(dom.dataset.controlDisplayId)) {
const displayDom = document.querySelector(
//@ts-ignore 等待修复
`#${dom.dataset.controlDisplayId}`
);
if (active) displayDom?.removeAttribute("is-hidden");
else displayDom?.setAttribute("is-hidden", "");
}
});
});
// 输入框
doc
.querySelectorAll(
"setting-item .q-input input.q-input__inner[data-config-key]"
)
.forEach((dom: Element) => {
dom.addEventListener("input", () => {
const Type = dom.getAttribute("type");
//@ts-ignore 等待修复
const configKey = dom.dataset.configKey;
const configValue =
Type === "number"
? parseInt((dom as HTMLInputElement).value) >= 1
? parseInt((dom as HTMLInputElement).value)
: 1
: (dom as HTMLInputElement).value;
setOB11Config(configKey, configValue);
});
});
// 下拉框
doc
.querySelectorAll("ob-setting-select[data-config-key]")
.forEach((dom: Element) => {
//@ts-ignore 等待修复
dom?.addEventListener("selected", (e: CustomEvent) => {
//@ts-ignore 等待修复
const configKey = dom.dataset.configKey;
const configValue = e.detail.value;
setOB11Config(configKey, configValue);
});
});
// 保存按钮
doc.querySelector("#config-ob11-save")?.addEventListener("click", () => {
OB11ConfigWrapper.SetOB11Config(ob11Config);
alert("保存成功");
});
doc.body.childNodes.forEach((node) => {
view.appendChild(node);
});
}
export { onSettingWindowCreated };