add MOD: dont-change-my-icon

README.md

@@ -43,6 +43,7 @@ In addition, you can access the files in the `/DATA/AppData/casamod/icon` direct
 
 | Name | Description | Author |
 | ---- | ----------- | ------ |
+| dont-change-my-icon | Disable auto-matching icons when editing image 🚫 | Cp0204 |
 | add-hostname-to-title | Add hostname to title ➕ | Cp0204 |
 | small-app-icon | Smaller app icons 🤏 | Cp0204 |
 | allow-modify-image | Allow modify image settings ✏️ | Cp0204 |

README_CN.md

@@ -42,6 +42,7 @@
 
 | 名称 | 功能描述 | 作者 |
 | --- | -------- | ---- |
+| dont-change-my-icon | 禁止编辑镜像地址时自动匹配图标 🚫 | Cp0204 |
 | add-hostname-to-title | 添加主机名到网页标题 ➕ | Cp0204 |
 | small-app-icon | 更小的应用图标 🤏 | Cp0204 |
 | allow-modify-image | 允许编辑镜像设置 ✏️ | Cp0204 |

app/mod/dont-change-my-icon/mod.js

@@ -0,0 +1,46 @@
+// name: dont-change-my-icon
+// author: Cp0204
+// date: 2024-05-07
+// description: 禁止编辑镜像地址时自动匹配图标 / Disable auto-matching icons when editing image
+
+(function () {
+    const observedAnchor = '.tab-content';
+    async function moduleFunction() {
+        const tabContents = document.querySelectorAll(observedAnchor);
+        tabContents.forEach(tabContent => {
+            const tabPanels = tabContent.querySelectorAll(':scope > div');
+            tabPanels.forEach(tabPanel => {
+                const imageInput = tabPanel.querySelector('span > div:nth-child(1) > div > div > span.is-flex-grow-1 > div > div > input');
+                imageInput.addEventListener("input", (e) => {
+                    e.stopPropagation(); // 阻止事件传播
+                    console.log("Don't change my icon!");
+                    return false;
+                }, true);
+            });
+
+        });
+    }
+
+
+    // ================================================
+    // 观察，等待 vue 渲染后执行
+    // Observe and wait for Vue rendering to complete.
+    // ================================================
+    const observer = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+            if (mutation.target.querySelector(observedAnchor)) {
+                //observer.disconnect();
+                debounced();
+            }
+        });
+    });
+    observer.observe(document.body, { childList: true, subtree: true, once: true });
+    function debounce(func, wait) {
+        let timeout;
+        return (...args) => {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => func.apply(this, args), wait);
+        };
+    }
+    const debounced = debounce(moduleFunction, 500);
+})();