From ded275c2801bc6399d667bf80b89a896d04a7c28 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Mon, 29 Apr 2024 23:28:39 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/11183

---
 app/src/plugin/Setting.ts | 20 ++++++++++++--------
 app/src/types/index.d.ts  |  1 +
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/src/plugin/Setting.ts b/app/src/plugin/Setting.ts
index 082913f87..6d30421e0 100644
--- a/app/src/plugin/Setting.ts
+++ b/app/src/plugin/Setting.ts
@@ -48,22 +48,23 @@ export class Setting {
             if (!item.actionElement && item.createActionElement) {
                 actionElement = item.createActionElement();
             }
-            if (actionElement && actionElement.tagName === "TEXTAREA") {
-                html = `<label class="b3-label fn__flex">
-    <div class="fn__flex-1">
+            const tagName = actionElement?.classList.contains("b3-switch")?"label":"div";
+            if (item.direction === "row") {
+                html = `<${tagName} class="b3-label">
+    <div class="fn__block">
         ${item.title}
         ${item.description ? `<div class="b3-label__text">${item.description}</div>` : ""}
         <div class="fn__hr"></div>
     </div>
-</label>`;
+</${tagName}>`;
             } else {
-                html = `<label class="fn__flex b3-label config__item">
+                html = `<${tagName} class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${item.title}
         ${item.description ? `<div class="b3-label__text">${item.description}</div>` : ""}
     </div>
     <span class="fn__space${actionElement ? "" : " fn__none"}"></span>
-</label>`;
+</${tagName}>`;
             }
             contentElement.insertAdjacentHTML("beforeend", html);
             if (actionElement) {
@@ -72,14 +73,17 @@ export class Setting {
                         btnsElement[1].dispatchEvent(new CustomEvent("click"));
                     }, actionElement.tagName === "INPUT");
                 }
-                if (actionElement.tagName === "TEXTAREA") {
+                if (item.direction === "row") {
                     contentElement.lastElementChild.lastElementChild.insertAdjacentElement("beforeend", actionElement);
+                    actionElement.classList.add("fn__block");
                 } else {
+                    actionElement.classList.remove("fn__block");
+                    actionElement.classList.add("fn__flex-center", "fn__size200");
                     contentElement.lastElementChild.insertAdjacentElement("beforeend", actionElement);
                 }
             }
         });
-        contentElement.querySelector("input")?.focus();
+        (contentElement.querySelector("input, textarea") as HTMLElement)?.focus();
         const btnsElement = dialog.element.querySelectorAll(".b3-dialog__action .b3-button");
         btnsElement[0].addEventListener("click", () => {
             dialog.destroy();
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index e3e6274fb..0afc6a807 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -236,6 +236,7 @@ interface IPluginSettingOption {
     title: string
     description?: string
     actionElement?: HTMLElement
+    direction?: "column"|"row"
 
     createActionElement?(): HTMLElement
 }