更新书签编辑

tangxiaoqi-tangxiao · Oct 8, 2024 · af85a1c · af85a1c
1 parent 342a470
commit af85a1c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 26 deletions.
diff --git a/Plugin/content/content.js b/Plugin/content/content.js
@@ -679,15 +679,32 @@ function ContextMenu(e, link) {
             const editCancel = document.getElementById('editCancel');
             const editSave = document.getElementById('editSave');
             const localPreviewImage = document.getElementById('localPreviewImage');
-            const icon = document.getElementsByClassName('icon');
+            const icon = [...document.getElementsByClassName('icon')];
             const PreviewImage = document.getElementById('PreviewImage');
             const refreshIcon = document.getElementById("refreshIcon");
+            const defaultIcon = document.getElementById("defaultIcon");
+            const defaultImage = document.getElementById("defaultImage");
 
             // 显示编辑书签模态框
             editBookmark.classList.remove('hidden');
-            //默认官方图标选中
-            icon[0].classList.add("border-blue-400");
-            icon[1].classList.remove("border-blue-400");
+            //
+            db.getData("Icons", id).then((data) => {
+                if (data) {
+                    defaultImage.src = data.base64;
+                    defaultIcon.classList.remove("hidden");
+                    icon.forEach((item) => {
+                        item.classList.remove("border-blue-400");
+                    });
+                    icon[0].classList.add("border-blue-400");
+                } else {
+                    defaultIcon.classList.add("hidden");
+                    //默认官方图标选中
+                    icon.forEach((item) => {
+                        item.classList.remove("border-blue-400");
+                    });
+                    icon[1].classList.add("border-blue-400");
+                }
+            });
             //删除本地上传图片
             localPreviewImage.src = "";
             //删除网络图片
@@ -709,8 +726,8 @@ function ContextMenu(e, link) {
                 const targetElement = e.target.closest('.card_bookmarks');
                 SaveBookmark(id, targetElement);
             }
-            //刷新网络图标点击事件
-            refreshIcon.onclick = () => {
+            //刷新网络图标双击事件
+            refreshIcon.ondblclick = () => {
                 fetchFaviconAsBase64(url)
                     .then((data) => {
                         if (data && data.base64) {
@@ -923,11 +940,16 @@ function SaveBookmark(id, element) {
             if (node.id === id) {
                 node.title = websiteName.value;
                 node.url = websiteLink.value;
+                //覆盖之前打开新页面的事件
+                element.onclick = () => {
+                    window.open(websiteLink.value, '_blank');
+                }
 
                 //更新当前元素
                 linkText.textContent = websiteLink.value;
                 name.textContent = websiteName.value;
-                if (icon.classList.contains('image')) {
+
+                if (icon.classList.contains('image')) {//本地图片
                     img.src = localPreviewImage.src;
                     if (localPreviewImage.src != location.href) {
                         db.getData("Icons", id).then((data) => {
@@ -938,7 +960,7 @@ function SaveBookmark(id, element) {
                             }
                         });
                     }
-                } else {
+                } else if (!icon.classList.contains('default')) {//网络图片
                     img.src = PreviewImage.src;
                     if (PreviewImage.src != location.href) {
                         db.getData("Icons", id).then((data) => {
@@ -948,6 +970,8 @@ function SaveBookmark(id, element) {
                                 db.addData("Icons", { base64: PreviewImage.src, id });
                             }
                         });
+                    } else {
+                        db.deleteData("Icons", id);
                     }
                 }
                 return true;

diff --git a/Plugin/css/index.css b/Plugin/css/index.css
@@ -4,7 +4,6 @@
   --text-color: #374151;
   --bg-color: #ffffff;
   --border-color: #dcdcdc;
-  --hover-bg-color: #eaeaea;
   --shadow-color: rgba(0, 0, 0, 0.15);
 }
 
@@ -13,7 +12,6 @@
   --text-color: #8a919b;
   --bg-color: #111418;
   --border-color: #555555;
-  --hover-bg-color: #444444;
   --shadow-color: rgba(0, 0, 0, 0.3);
 }
 
@@ -81,27 +79,18 @@
   color: var(--text-color);
 }
 
-#context-menu li:hover {
-  background-color: var(--hover-bg-color);
-}
-
 #context-menu hr {
   margin: 4px 0;
   border: none;
   border-top: 1px solid var(--border-color);
 }
 
-#context-menu li.disabled {
-  color: #666;
-  cursor: not-allowed;
-}
-
 #context-menu li {
   display: flex;
   align-items: center;
 }
 
-#context-menu li:not(:first-child){
+#context-menu li:not(:first-child) {
   margin-top: 5px;
 }
 
@@ -113,4 +102,11 @@
 
 #context-menu li span {
   margin-left: 15px;
+}
+
+.unselectable {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
diff --git a/Plugin/index.html b/Plugin/index.html
@@ -212,7 +212,8 @@
   </div>
 
   <!-- 编辑书签 -->
-  <div id="editBookmark" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+  <div id="editBookmark"
+    class="hidden unselectable fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
     <div class="bg-white dark:pintree-bg-gray-900 rounded-lg w-1/2">
       <div class="grid grid-cols-2 gap-4 p-5">
         <!-- 左侧信息编辑 -->
@@ -234,9 +235,15 @@ <h2 class="text-xl font-bold mb-4 dark:text-gray-400">信息编辑</h2>
           <h2 class="text-xl font-bold mb-4 dark:text-gray-400">图标编辑</h2>
           <label class="block mb-1 dark:text-gray-400">图标选择</label>
           <div class="flex">
-            <div class="flex flex-col justify-center items-center mr-2">
+            <div id="defaultIcon" class="hidden flex flex-col justify-center items-center mr-2">
               <div
-                id="refreshIcon"
+                class="icon default cursor-pointer hover:border-blue-400 bg-white dark:bg-gray-700 w-14 h-14 rounded-lg shadow-md flex justify-center items-center border-2">
+                <img id="defaultImage" class="w-full h-full rounded-lg" src="" alt="" srcset="">
+              </div>
+              <span class="dark:text-gray-400">默认</span>
+            </div>
+            <div class="flex flex-col justify-center items-center mr-2">
+              <div id="refreshIcon"
                 class="icon cursor-pointer hover:border-blue-400 bg-white dark:bg-gray-700 w-14 h-14 rounded-lg shadow-md flex justify-center items-center border-2">
                 <img id="PreviewImage" class="hidden w-full h-full rounded-lg" src="" alt="" srcset="">
                 <svg id="PreviewSvg" class="w-10 h-10" viewBox="0 0 172 216" fill="none"
@@ -283,7 +290,7 @@ <h2 class="text-xl font-bold mb-4 dark:text-gray-400">图标编辑</h2>
   <!-- 鼠标右键 -->
   <div id="context-menu">
     <ul>
-      <li id="copy">
+      <li id="copy" class="dark:hover:pintree-bg-gray-800 hover:bg-gray-50">
         <div>
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -294,7 +301,7 @@ <h2 class="text-xl font-bold mb-4 dark:text-gray-400">图标编辑</h2>
         </div>
         <span>复制地址</span>
       </li>
-      <li id="openEditBookmark">
+      <li id="openEditBookmark" class="dark:hover:pintree-bg-gray-800 hover:bg-gray-50">
         <div>
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -307,7 +314,7 @@ <h2 class="text-xl font-bold mb-4 dark:text-gray-400">图标编辑</h2>
         </div>
         <span>编辑书签</span>
       </li>
-      <li id="del">
+      <li id="del" class="dark:hover:pintree-bg-gray-800 hover:bg-gray-50">
         <div>
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"