From 501211fb57057a5d6d4d0a9476339c67429c7d67 Mon Sep 17 00:00:00 2001
From: Misa Liu <misaliu@misaliu.top>
Date: Fri, 22 Mar 2024 16:56:17 +0800
Subject: [PATCH] fix(renderer): Fix typo & format error

---
 src/renderer/index.ts  | 78 ++++++++++++++++++++++--------------------
 src/renderer/style.css | 25 +++++++++++---
 2 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/src/renderer/index.ts b/src/renderer/index.ts
index 52b37f9..c5fb169 100644
--- a/src/renderer/index.ts
+++ b/src/renderer/index.ts
@@ -30,18 +30,14 @@ async function onSettingWindowCreated(view: Element) {
     const doc = parser.parseFromString([
         '<div>',
         `<style>${StyleRaw}</style>`,
-        `<setting-section>
-            <setting-panel>
-                <setting-list data-direction="column" class="new">
-                    <setting-item data-direction="row">
-                        <setting-text class="llonebot-update-title">正在检查LLOneBot版本中</setting-text>
-                        <setting-button data-type="secondary" class="llonebot-update-button">请稍后</setting-button>
-                    </setting-item>
-                </setting-list>
-             </setting-panel>
-        <setting-section>`,
+        `<setting-section id="llonebot-error">
+            <setting-panel><pre><code></code></pre></setting-panel>
+        </setting-section>`,
         SettingList([
-           '<div id="llonebot-error" class="llonebot-error"></div>',
+            SettingItem(
+                '<span id="llonebot-update-title">正在检查 LLOneBot 更新</span>', null,
+                SettingButton('请稍候', 'llonebot-update-button', 'secondary'),
+            ),
         ]),
         SettingList([
             SettingItem('启用 HTTP 服务', null,
@@ -98,7 +94,7 @@ async function onSettingWindowCreated(view: Element) {
                 `<div class="q-input" style="width:210px;"><input class="q-input__inner" data-config-key="token" type="text" value="${config.token}" placeholder="未设置" /></div>`,
             ),
             SettingItem(
-                '启用CQ码上报格式，不启用则为消息段格式',
+                '新消息上报格式',
                 '如客户端无特殊需求推荐保持默认设置，两者的详细差异可参考 <a href="javascript:LiteLoader.api.openExternal(\'https://github.com/botuniverse/onebot-11/tree/master/message#readme\');">OneBot v11 文档</a>',
                 SettingSelect([
                     {text: '消息段', value: 'array'},
@@ -182,18 +178,20 @@ async function onSettingWindowCreated(view: Element) {
         '</div>',
     ].join(''), "text/html");
 
-    let errorEle = <HTMLElement>doc.querySelector("#llonebot-error");
-    errorEle.style.display = 'none';
     const showError = async () => {
-        setTimeout(async () => {
-            let errMessage = await window.llonebot.getError();
-            console.log(errMessage)
-            errMessage = errMessage.replace(/\n/g, '<br>')
-            errorEle.innerHTML = errMessage;
-            errorEle.style.display = errMessage ? 'flex' : 'none';
-        }, 1000)
+        await (new Promise((res) => setTimeout(() => res(true), 1000)));
+
+        const errDom = doc.querySelector('#llonebot-error');
+        const errCodeDom = errDom.querySelector('code');
+        const errMsg = await window.llonebot.getError();
+
+        if (!errMsg) return;
+
+        errDom.classList.add('show');
+        errCodeDom.innerHTML = errMsg;
     }
-    showError().then()
+    showError().then();
+
     // 外链按钮
     doc.querySelector('#open-github').addEventListener('click', () => {
         window.LiteLoader.api.openExternal('https://github.com/LLOneBot/LLOneBot')
@@ -335,37 +333,43 @@ async function onSettingWindowCreated(view: Element) {
     });
     // 更新逻辑
     async function checkVersionFunc(ResultVersion: CheckVersion) {
-        console.log(ResultVersion);
+        const titleDom = view.querySelector<HTMLSpanElement>("#llonebot-update-title")!;
+        const buttonDom = view.querySelector<HTMLButtonElement>("#llonebot-update-button")!;
+
         if (ResultVersion.version === "") {
-            view.querySelector(".llonebot-update-title").innerHTML = "检查更新失败";
-            view.querySelector(".llonebot-update-button").innerHTML = "点击重试";
-            view.querySelector(".llonebot-update-button").addEventListener("click", async () => {
+            titleDom.innerHTML = "检查更新失败";
+            buttonDom.innerHTML = "点击重试";
+
+            buttonDom.addEventListener("click", async () => {
                 window.llonebot.checkVersion().then(checkVersionFunc);
             });
+
             return;
         }
         if (!ResultVersion.result) {
-            view.querySelector(".llonebot-update-title").innerHTML = "当前已是最新版本 V" + ResultVersion.version;
-            view.querySelector(".llonebot-update-button").innerHTML = "无需更新";
+            titleDom.innerHTML = "当前已是最新版本 v" + ResultVersion.version;
+            buttonDom.innerHTML = "无需更新";
         } else {
-            view.querySelector(".llonebot-update-title").innerHTML = "已检测到最新版本 V" + ResultVersion.version;
-            view.querySelector(".llonebot-update-button").innerHTML = "点击更新";
+            titleDom.innerHTML = "已检测到最新版本 v" + ResultVersion.version;
+            buttonDom.innerHTML = "点击更新";
+            buttonDom.dataset.type = 'primary';
+
             const update = async () => {
-                view.querySelector(".llonebot-update-button").innerHTML = "正在更新中...";
+                buttonDom.innerHTML = "正在更新中...";
                 const result = await window.llonebot.updateLLOneBot();
                 if (result) {
-                    view.querySelector(".llonebot-update-button").innerHTML = "更新完成请重启";
-                    view.querySelector(".llonebot-update-button").removeEventListener("click", update);
+                    buttonDom.innerHTML = "更新完成，请重启";
                 } else {
-                    view.querySelector(".llonebot-update-button").innerHTML = "更新失败前往仓库下载";
-                    view.querySelector(".llonebot-update-button").removeEventListener("click", update);
+                    buttonDom.innerHTML = "更新失败，前往仓库下载";
                 }
+
+                buttonDom.removeEventListener("click", update);
             }
-            view.querySelector(".llonebot-update-button").addEventListener("click", update);
+            buttonDom.addEventListener("click", update);
         }
     };
-    window.llonebot.checkVersion().then(checkVersionFunc);
 
+    window.llonebot.checkVersion().then(checkVersionFunc);
 }
 
 function init() {
diff --git a/src/renderer/style.css b/src/renderer/style.css
index 842b702..f78e0af 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -157,9 +157,24 @@ ob-setting-select::part(option-list) {
 }
 
 #llonebot-error {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  overflow: visible;
-  display: flex;
-  align-items: center;
+  display: none;
 }
+
+#llonebot-error setting-panel {
+  background: rgba(255, 0, 0, 0.5);
+  color: white;
+}
+
+#llonebot-error setting-panel pre {
+  margin: 0;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+#llonebot-error setting-panel pre code {
+  font-family: 'FiraCode Nerd Font', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace;
+}
+
+#llonebot-error.show {
+  display: block;
+}
\ No newline at end of file