Update drawer.js

ui/drawer.js

@@ -1,3 +1,6 @@
+
+import { getSlideToggleOptions } from '/script.js';
+import { slideToggle } from '/lib.js';
 import { extension_settings } from "/scripts/extensions.js";
 import { extensionName, defaultSettings } from "../utils/settings.js";
 import {
@@ -64,10 +67,10 @@ export function createDrawer() {
 
 const amily2DrawerHtml = `
       <div id="amily2-main-drawer" class="drawer">
-            <div class="drawer-toggle drawer-header" title="Amily2号优化助手">
-                <div id="amily2-drawer-icon" class="drawer-icon fa-solid fa-magic fa-fw closedIcon interactable" tabindex="0"></div>
+          <div id="amily2_drawer_icon" class="drawer-toggle drawer-header closedIcon interactable" title="Amily2号优化助手" tabindex="0">
+              <i class="drawer-icon fa-solid fa-magic fa-fw"></i>
           </div>
-            <div id="amily2-drawer-content" class="drawer-content" style="display: none;">
+          <div id="amily2_drawer_content" class="drawer-content closedDrawer" style="display: none;">
               <!-- 王座将在此处动态加载 -->
           </div>
       </div>
@@ -77,37 +80,46 @@ export function createDrawer() {
 
 $(document).on(
   "mousedown",
-    "#amily2-main-drawer .drawer-toggle",
+  "#amily2_drawer_icon", 
   async function (e) {
     e.preventDefault();
     e.stopPropagation();
 
-      const drawerIcon = $("#amily2-drawer-icon");
-      const contentPanel = $("#amily2-drawer-content");
-      const isOpening = drawerIcon.hasClass("closedIcon");
+    const drawerIcon = $(this);
+    const contentPanel = $("#amily2_drawer_content");
 
 
-      $(".openIcon")
-        .not(drawerIcon)
-        .removeClass("openIcon")
-        .addClass("closedIcon");
-      $(".openDrawer")
-        .not(contentPanel)
-        .removeClass("openDrawer")
-        .slideUp({ duration: 200, easing: "swing" });
+
+    $('.openDrawer').not(contentPanel).not('.pinnedOpen').addClass('resizing').each((_, el) => {
+        slideToggle(el, { 
+            ...getSlideToggleOptions(), 
+            onAnimationEnd: function (el) {
+                el.closest('.drawer-content').classList.remove('resizing');
+            },
+        });
+    });
+
+    $('.openIcon').not(drawerIcon).not('.drawerPinnedOpen').toggleClass('closedIcon openIcon');
+    $('.openDrawer').not(contentPanel).not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
+
+    drawerIcon.toggleClass('closedIcon openIcon');
+    contentPanel.toggleClass('closedDrawer openDrawer');
 
 
-      drawerIcon.toggleClass("closedIcon openIcon");
-      contentPanel.toggleClass("openDrawer");
-      contentPanel.slideToggle({
-        duration: 200,
-        easing: "swing",
+    contentPanel.addClass('resizing').each((_, el) => {
+        slideToggle(el, {
+            ...getSlideToggleOptions(),
+            onAnimationEnd: function (el) {
+                el.closest('.drawer-content').classList.remove('resizing');
+            },
+        });
     });
 
 
     const isInitialized = contentPanel.data("initialized");
-      if (isOpening && !isInitialized) {
+    if (drawerIcon.hasClass("openIcon") && !isInitialized) {
       try {
+        const extensionFolderPath = `scripts/extensions/third-party/${extensionName}`;
         const modalContent = await $.get(
           `${extensionFolderPath}/assets/amily2-modal.html`,
         );
@@ -115,17 +127,14 @@ export function createDrawer() {
         await loadSettings(); 
         bindModalEvents();
         contentPanel.data("initialized", true);
-
         console.log("[Amily2号-建设部] 宫殿内室已根据最高指令激活。");
       } catch (error) {
-
         console.error("[Amily2号-建设部] 加载宫殿内部HTML失败:", error);
         contentPanel.html(
           '<p style="color:red; padding: 20px;">紧急报告：无法加载Amily2号府邸内饰。</p>',
         );
       }
     }
-
   },
 );
 }