汐洛绞架安卓web选择框点击无响应 #814

Hi-Windom · Jun 10, 2024 · 389ef48 · 389ef48
1 parent c27d6af
commit 389ef48
Show file tree

Hide file tree

Showing 7 changed files with 894 additions and 896 deletions.
diff --git a/app/src/mobile/settings/appearance_react.tsx b/app/src/mobile/settings/appearance_react.tsx
@@ -1,10 +1,9 @@
-import { Select, Option, selectClasses } from "@mui/joy";
+import { Option } from "@mui/joy";
 import { CssVarsProvider, useColorScheme } from "@mui/joy/styles";
 import * as React from "react";
 import * as Client from "react-dom/client";
 import { openModel } from "../menu/model";
-import { fetchGet, fetchPost } from "../../util/fetch";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import { fetchPost } from "../../util/fetch";
 import { Select_KeyboardArrowDown } from "../../sillot/joyUI/base/selector";
 
 interface SharedPropsContextValue {
@@ -203,10 +202,13 @@ export const initAppearanceReact = () => {
         icon: "iconTheme",
         html: appearanceHTML,
         bindEvent: modelMainElement => {
-            // 在模态框中渲染 AppearanceSettingsProvider 组件
             const e = modelMainElement.querySelector("#appearanceSettingsContainer");
             const root = Client.createRoot(e);
             root.render(<AppearanceSettingsProvider />);
+            if (!window.Sillot.android.roots) {
+                window.Sillot.android.AppearanceReactRoots = []; // 初始化roots数组
+            }
+            window.Sillot.android.AppearanceReactRoots.push(root); // 在 window.goBakc() 、closePanel 和 closeModel 中 unmount
         },
     });
 };
diff --git a/app/src/mobile/util/MobileBackFoward.ts b/app/src/mobile/util/MobileBackFoward.ts
@@ -13,6 +13,7 @@ import {showMessage} from "../../dialog/message";
 import {getCurrentEditor} from "../editor";
 import {avRender} from "../../protyle/render/av/render";
 import {setTitle} from "../../dialog/processSystem";
+import { unmountReactRootsArray } from "../../sillot/util/react";
 
 const forwardStack: IBackStack[] = [];
 
@@ -143,6 +144,7 @@ export const goForward = () => {
 
 export const goBack = () => {
     window.sout.tracker("invoked");
+    unmountReactRootsArray(window.Sillot.android?.AppearanceReactRoots);
     const editor = getCurrentEditor();
     if (window.siyuan.menus.menu.element.classList.contains("b3-menu--fullscreen") &&
         !window.siyuan.menus.menu.element.classList.contains("fn__none")) {

diff --git a/app/src/mobile/util/closePanel.ts b/app/src/mobile/util/closePanel.ts
@@ -1,19 +1,22 @@
-import {activeBlur, hideKeyboardToolbar} from "./keyboardToolbar";
-
-export const closePanel = () => {
-    window.sout.tracker("invoked");
-    document.getElementById("menu").style.transform = "";
-    document.getElementById("sidebar").style.transform = "";
-    document.getElementById("model").style.transform = "";
-    const maskElement = document.querySelector(".side-mask") as HTMLElement;
-    maskElement.classList.add("fn__none");
-    maskElement.style.opacity = "";
-    window.siyuan.menus.menu.remove();
-};
-
-export const closeModel = () => {
-    window.sout.tracker("invoked");
-    document.getElementById("model").style.transform = "";
-    activeBlur();
-    hideKeyboardToolbar();
-};
+import { unmountReactRootsArray } from "../../sillot/util/react";
+import {activeBlur, hideKeyboardToolbar} from "./keyboardToolbar";
+
+export const closePanel = () => {
+    window.sout.tracker("invoked");
+    document.getElementById("menu").style.transform = "";
+    document.getElementById("sidebar").style.transform = "";
+    document.getElementById("model").style.transform = "";
+    const maskElement = document.querySelector(".side-mask") as HTMLElement;
+    maskElement.classList.add("fn__none");
+    maskElement.style.opacity = "";
+    window.siyuan.menus.menu.remove();
+    unmountReactRootsArray(window.Sillot.android?.AppearanceReactRoots);
+};
+
+export const closeModel = () => {
+    window.sout.tracker("invoked");
+    document.getElementById("model").style.transform = "";
+    activeBlur();
+    hideKeyboardToolbar();
+    unmountReactRootsArray(window.Sillot.android?.AppearanceReactRoots);
+};
diff --git a/app/src/sillot/index.ts b/app/src/sillot/index.ts
@@ -24,7 +24,7 @@ export class SillotEnv {
       status: { IDBloaded: false, disableDocSetPadding: false },
       funs: { hljsRender: highlightRender },
       lute: null,
-      android: null,
+      android: {},
     };
     window.__ = {
       ace: null,

diff --git a/app/src/sillot/joyUI/base/selector.tsx b/app/src/sillot/joyUI/base/selector.tsx
@@ -1,17 +1,28 @@
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import { Select, selectClasses } from "@mui/joy";
 
-export const Select_KeyboardArrowDown = ({ ...props }) => (
-    <Select
-        {...props}
-        indicator={<KeyboardArrowDown />}
-        sx={{
-            [`& .${selectClasses.indicator}`]: {
-                transition: "0.2s",
-                [`&.${selectClasses.expanded}`]: {
-                    transform: "rotate(-180deg)",
-                },
+export const Select_KeyboardArrowDown = (props) => {
+    // 定义默认的sx样式
+    const defaultSx = {
+        [`& .${selectClasses.indicator}`]: {
+            transition: "0.2s",
+            [`&.${selectClasses.expanded}`]: {
+                transform: "rotate(-180deg)",
             },
-        }}
-    />
-);
+        },
+    };
+
+     // 检查是否有传入的sx样式，并进行合并
+     const { sx, ...otherProps } = props;
+     const mergedSx = sx
+         ? Object.assign({}, defaultSx, sx)
+         : defaultSx;
+
+    return (
+        <Select
+            {...otherProps} // 传递剩余的props，不包括sx
+            indicator={<KeyboardArrowDown />}
+            sx={mergedSx} // 使用合并后的sx
+        />
+    );
+};