Merge branch 'release/v1.1'

Author: CodFrm

packages/message/custom_event_message.ts

@@ -24,9 +24,8 @@ export class CustomEventMessage implements Message {
     protected isContent: boolean
   ) {
     window.addEventListener((isContent ? "ct" : "fd") + flag, (event) => {
-      if (event instanceof MouseEvent) {
+      if (event instanceof MouseEvent && event.movementX && event.relatedTarget) {
         this.relatedTarget.set(event.movementX, event.relatedTarget!);
-        return;
       } else if (event instanceof CustomEvent) {
         this.messageHandle(event.detail, new CustomEventPostMessage(this));
       }

src/pages/popup/App.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable prettier/prettier */
 import { Discord, DocumentationSite, ExtVersion } from "@App/app/const";
 import { Alert, Badge, Button, Card, Collapse, Dropdown, Menu, Switch } from "@arco-design/web-react";
 import {
@@ -32,6 +31,7 @@ const iconStyle = {
 };
 
 function App() {
+  const [loading, setLoading] = useState(true);
   const [scriptList, setScriptList] = useState<ScriptMenu[]>([]);
   const [backScriptList, setBackScriptList] = useState<ScriptMenu[]>([]);
   const [showAlert, setShowAlert] = useState(false);
@@ -43,6 +43,7 @@ function App() {
   const [currentUrl, setCurrentUrl] = useState("");
   const [isEnableScript, setIsEnableScript] = useState(true);
   const [isBlacklist, setIsBlacklist] = useState(false);
+  const [collapseActiveKey, setCollapseActiveKey] = useState<string[]>(["script"]);
   const { t } = useTranslation();
 
   let url: URL | undefined;
@@ -83,6 +84,9 @@ function App() {
           setBackScriptList(resp.backScriptList || []);
           setIsBlacklist(resp.isBlacklist || false);
           checkScriptEnableAndUpdate();
+          if (resp.backScriptList.length > 0) {
+            setCollapseActiveKey(["script", "background"]);
+          }
         })
         .catch((error) => {
           console.error("Failed to get popup data:", error);
@@ -91,6 +95,10 @@ function App() {
           setScriptList([]);
           setBackScriptList([]);
           setIsBlacklist(false);
+        })
+        .finally(() => {
+          if (!isMounted) return;
+          setLoading(false);
         });
     };
 
@@ -199,8 +207,7 @@ function App() {
                       const dropdown = dropdowns[0] as HTMLElement;
                       console.log(dropdowns, dropdown.style.top);
                       // 如果top是负数修改为0
-                      if (parseInt(dropdown
-                        .style.top) < 0) {
+                      if (parseInt(dropdown.style.top) < 0) {
                         dropdown.style.top = "0px";
                       }
                     }
@@ -265,7 +272,10 @@ function App() {
         />
         <Collapse
           bordered={false}
-          defaultActiveKey={["script", ...(backScriptList.length > 0 ? ["background"] : [])]}
+          activeKey={collapseActiveKey}
+          onChange={(_, keys) => {
+            setCollapseActiveKey(keys);
+          }}
           style={{ maxWidth: 640, maxHeight: 500, overflow: "auto" }}
         >
           <CollapseItem
@@ -280,7 +290,11 @@ function App() {
           <CollapseItem
             header={t("enabled_background_scripts")}
             name="background"
-            style={{ padding: "0" }}
+            style={{
+              padding: "0",
+              // 未加载完成前不采用动画，避免collapseActiveKey变化时闪现
+              ...(loading ? { transform: "none" } : { transform: "height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1)" }),
+            }}
             contentStyle={{ padding: "0" }}
           >
             <ScriptMenuList script={backScriptList} isBackscript={true} currentUrl={currentUrl} />