Главная Обзор Помощь
Регистрация Вход
Apq
/
FeHelper
зеркало из https://github.com/zxlie/FeHelper.git
1
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

给所有页面增加打赏入口和更多工具入口

zxlie 5 месяцев назад
Родитель
27b1a2e073
Сommit
f35f1336d5
36 измененных файлов с 620 добавлено и 67 удалено
Разделённый вид Показать статистику Diff
  1. 4 1
      apps/crontab/index.html
  2. 17 1
      apps/crontab/index.js
  3. 4 0
      apps/excel2json/index.html
  4. 28 1
      apps/excel2json/index.js
  5. 3 1
      apps/html2markdown/index.html
  6. 16 0
      apps/html2markdown/index.js
  7. 4 1
      apps/loan-rate/index.html
  8. 19 1
      apps/loan-rate/index.js
  9. 0 3
      apps/page-monkey/index.css
  10. 2 0
      apps/page-monkey/index.html
  11. 16 1
      apps/page-monkey/index.js
  12. 4 1
      apps/page-timing/index.html
  13. 17 1
      apps/page-timing/index.js
  14. 95 1
      apps/poster-maker/css/main.css
  15. 3 5
      apps/poster-maker/index.html
  16. 25 1
      apps/poster-maker/js/eventHandlers.js
  17. 0 12
      apps/poster-maker/js/index.js
  18. 4 1
      apps/postman/index.html
  19. 17 2
      apps/postman/index.js
  20. 98 0
      apps/regexp/index.css
  21. 3 1
      apps/regexp/index.html
  22. 20 0
      apps/regexp/index.js
  23. 1 2
      apps/screenshot/index.css
  24. 3 1
      apps/screenshot/index.html
  25. 16 0
      apps/screenshot/index.js
  26. 3 0
      apps/sticky-notes/index.html
  27. 19 0
      apps/sticky-notes/index.js
  28. 99 19
      apps/svg-converter/index.css
  29. 2 4
      apps/svg-converter/index.html
  30. 13 2
      apps/svg-converter/index.js
  31. 5 1
      apps/trans-color/index.html
  32. 18 0
      apps/trans-color/index.js
  33. 5 1
      apps/trans-radix/index.html
  34. 19 1
      apps/trans-radix/index.js
  35. 4 1
      apps/websocket/index.html
  36. 14 0
      apps/websocket/index.js

+ 4 - 1
apps/crontab/index.html
Просмотреть файл 

@@ -15,7 +15,10 @@
 
         <div class="panel-heading">
 
             <h3 class="panel-title">
 
                 <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="x-a-high">
 
-                    <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：Crontab生成器</h3>
 
+                    <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：Crontab生成器
 
+                    <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                    <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
+                </h3>
 
         </div>
 
     </div>
 
     <div class="panel-body mod-crontab">

+ 17 - 1
apps/crontab/index.js
Просмотреть файл 

@@ -1654,7 +1654,7 @@ let crontabGuruStarter = function () {
 
  * FeHelper 进制转换工具
 
  */
 
 new Vue({
 
-    el: '#containerCrontab',
 
+    el: '#pageContainer',
 
     data: {},
 
 
     mounted: function () {
 
@@ -1668,6 +1668,22 @@ new Vue({
 
     methods: {
 
         randomCron: function(){
 
             document.querySelector('#contabContentBox .example span.clickable').click();
 
+        },
 
+
 
+        openDonateModal: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.sendMessage({
 
+                type: 'fh-dynamic-any-thing',
 
+                thing: 'open-donate-modal',
 
+                params: { toolName: 'crontab' }
 
+            });
 
+        },
 
+
 
+        openOptionsPage: function(event) {  
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.openOptionsPage();
 
         }
 
     }
 
 });

+ 4 - 0
apps/excel2json/index.html
Просмотреть файл 

@@ -5,6 +5,7 @@
 
     <meta charset="UTF-8">
 
     <link rel="shortcut icon" href="../static/img/favicon.ico">
 
     <link rel="stylesheet" href="index.css" />
 
+    <script type="text/javascript" src="../static/vendor/vue/vue.js"></script>
 
 </head>
 
 <body>
 
 
@@ -14,6 +15,9 @@
 
             <h3 class="panel-title">
 
                 <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="x-a-high">
 
                     <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：Excel/CVS转JSON
 
+
 
+                <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
             </h3>
 
         </div>
 
     </div>

+ 28 - 1
apps/excel2json/index.js
Просмотреть файл 

@@ -101,4 +101,31 @@ function updateSettings(evt) {
 
 };
 
 
 updateSettings();
 
-  
+  
+
 
+/**
 
+ * FeHelper 进制转换工具
 
+ */
 
+new Vue({
 
+    el: '#pageContainer',
 
+
 
+    methods: {
 
+       
+        openDonateModal: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.sendMessage({
 
+                type: 'fh-dynamic-any-thing',
 
+                thing: 'open-donate-modal',
 
+                params: { toolName: 'trans-radix' }
 
+            });
 
+        },
 
+
 
+        openOptionsPage: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.openOptionsPage();
 
+        }   
+        
+    }
 
+});

+ 3 - 1
apps/html2markdown/index.html
Просмотреть файл 

@@ -19,7 +19,9 @@
 
                 <span class="x-xdemo" ref="demoLink1" @click="setDemo">{{codeType}}是什么？</span>
 
                 <span class="x-xdemo" ref="importLink" @click="importContent">导入{{codeType}}文件</span>
 
 
-                <span class="x-switch ui-fl-r" ref="btnSwitch" @click="trans">{{toolName[nextCodeType]}}&gt;&gt;</span>
 
+                <span class="x-switch ui-fl-" ref="btnSwitch" @click="trans">{{toolName[nextCodeType]}}&gt;&gt;</span>
 
+                <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
             </h3>
 
         </div>
 
     </div>

+ 16 - 0
apps/html2markdown/index.js
Просмотреть файл 

@@ -251,6 +251,22 @@ new Vue({
 
                 newWin.document.close();
 
                 newWin.close();
 
             }
 
+        },
 
+
 
+        openOptionsPage: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.openOptionsPage();
 
+        },
 
+
 
+        openDonateModal: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.sendMessage({
 
+                type: 'fh-dynamic-any-thing',
 
+                thing: 'open-donate-modal',
 
+                params: { toolName: 'html2markdown' }
 
+            });
 
         }
 
     }
 
 });

+ 4 - 1
apps/loan-rate/index.html
Просмотреть файл 

@@ -15,7 +15,10 @@
 
         <div class="panel-heading">
 
             <h3 class="panel-title">
 
                 <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="x-a-high">
 
-                    <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：贷款利率计算器</h3>
 
+                    <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：贷款利率计算器
 
+                    <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                    <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
+                </h3>
 
         </div>
 
     </div>
 
     <div class="panel-body">

+ 19 - 1
apps/loan-rate/index.js
Просмотреть файл 

@@ -3,7 +3,7 @@
 
  * @author zhaoxianlie
 
  */
 
 new Vue({
 
-    el: '#containerPayback',
 
+    el: '#pageContainer',
 
     data: {
 
         money: 10000,
 
         months: 12,
 
@@ -316,6 +316,24 @@ new Vue({
 
             this.money = this.revMoney;
 
             this.revAllInterest = Math.round((this.revAllAmount - this.money) * 100) / 100;
 
             this.revRate = guessRate(this.money, this.months, this.revAllAmount, parseInt(this.paybackMode));
 
+        },
 
+
 
+        openDonateModal: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.sendMessage({
 
+                type: 'fh-dynamic-any-thing',
 
+                thing: 'open-donate-modal',
 
+                params: { toolName: 'loan-rate' }
 
+            });
 
+        },  
+
 
+        openOptionsPage: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.openOptionsPage();
 
         }
 
+        
+        
     }
 
 });

+ 0 - 3
apps/page-monkey/index.css
Просмотреть файл 

@@ -14,9 +14,6 @@
 
 .panel-title a.x-tooltip:hover {
 
 	text-decoration: underline;
 
 }
 
-.x-toolbox {
 
-	float: right;
 
-}
 
 .x-toolbox .x-line {
 
 	font-size: 12px;
 
 	margin-left: 10px;

+ 2 - 0
apps/page-monkey/index.html
Просмотреть файл 

@@ -31,6 +31,8 @@
 
                             <input type="button" @click="closeEditor()" value="返回" class="btn btn-sm btn-warning">
 
                         </span>
 
 
+                        <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                        <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
                     </h3>
 
                 </div>
 
             </div>

+ 16 - 1
apps/page-monkey/index.js
Просмотреть файл 

@@ -526,7 +526,22 @@ new Vue({
 
             window.feHelperAlertMsgTid = window.setTimeout(function () {
 
                 elAlertMsg.style.display = 'none';
 
             }, 1000);
 
-        }
 
+        },
 
+
 
+        openDonateModal: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.sendMessage({
 
+                type: 'fh-dynamic-any-thing',   
+                thing: 'open-donate-modal',
 
+                params: { toolName: 'page-monkey' }
 
+            });
 
+        },
 
 
+        openOptionsPage: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.openOptionsPage();
 
+        }
 
     }
 
 });

+ 4 - 1
apps/page-timing/index.html
Просмотреть файл 

@@ -14,7 +14,10 @@
 
             <div class="panel-heading">
 
                 <h3 class="panel-title">
 
                     <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="x-a-high">
 
-                        <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：页面性能检测</h3>
 
+                        <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：页面性能检测
 
+                        <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                        <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
+                    </h3>
 
             </div>
 
         </div>

+ 17 - 1
apps/page-timing/index.js
Просмотреть файл 

@@ -401,6 +401,22 @@ new Vue({
 
             } catch (e) {
 
                 return url;
 
             }
 
-        }
 
+        },
 
+
 
+        openDonateModal: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.sendMessage({
 
+                type: 'fh-dynamic-any-thing',
 
+                thing: 'open-donate-modal',
 
+                params: { toolName: 'page-timing' }
 
+            });
 
+        },
 
+
 
+        openOptionsPage: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.openOptionsPage();
 
+        }   
     }
 
 });

+ 95 - 1
apps/poster-maker/css/main.css
Просмотреть файл 

@@ -794,4 +794,98 @@ body {
 
 
 .loading-tip .fa-spin {
 
   animation: spin 1s linear infinite;
 
-}
 
+}
 
+
 
+
 
+/* 工具市场按钮样式（保持不变） */
 
+.panel-title>a.x-other-tools {
 
+  margin: 1px 0 0;
 
+  font-size: 13px;
 
+  cursor: pointer;
 
+  text-decoration: none;
 
+  -webkit-user-select: none;
 
+  user-select: none;
 
+  color: #333;
 
+  float: right;
 
+  background-color: #f5f8ff;
 
+  padding: 5px 10px;
 
+  border-radius: 15px;
 
+  border: 1px solid #d0d9ff;
 
+  transition: all 0.3s ease;
 
+  display: flex;
 
+  align-items: center;
 
+  position: relative;
 
+  top: 0px;
 
+}
 
+
 
+.panel-title>a.x-other-tools .icon-plus-circle {
 
+  display: inline-block;
 
+  width: 16px;
 
+  height: 16px;
 
+  background: url(../../static/img/plus-circle.svg) no-repeat center center;
 
+  background-size: contain;
 
+  margin-right: 5px;
 
+}
 
+
 
+.panel-title>a.x-other-tools .tool-market-badge {
 
+  display: inline-block;
 
+  background-color: #4d89fe;
 
+  color: white;
 
+  padding: 2px 6px;
 
+  border-radius: 10px;
 
+  margin-left: 5px;
 
+  font-size: 12px;
 
+  font-weight: bold;
 
+}
 
+
 
+.panel-title>a.x-other-tools:hover {
 
+  color: #333;
 
+  background-color: #e6edff;
 
+  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
 
+  transform: translateY(-1px);
 
+}
 
+
 
+
 
+/* 保持原有的顶部导航样式 */
 
+.x-donate-link {
 
+  float: right;
 
+  line-height: 18px;
 
+  color: #2563eb;
 
+  cursor: pointer;
 
+  text-decoration: none;
 
+  border: none;
 
+  white-space: nowrap;
 
+  margin-right: auto;
 
+  border-radius: 20px;
 
+  background-color: #eff6ff;
 
+  transition: all 0.2s ease;
 
+  position: relative;
 
+  display: inline-flex;
 
+  align-items: center;
 
+  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.1);
 
+  position: absolute;
 
+  right: 230px;
 
+  top: 4px;
 
+  padding: 4px 12px;
 
+  font-size: 12px;
 
+  font-weight: normal;
 
+}
 
+
 
+.x-donate-link:hover {
 
+  background-color: #dbeafe;
 
+  color: #1d4ed8;
 
+  text-decoration: none;
 
+  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.15);
 
+  transform: translateY(-1px);
 
+}
 
+
 
+.x-donate-link>a {
 
+  font-size: 12px;
 
+  color: blue;
 
+  cursor: pointer;
 
+  text-decoration: underline;
 
+}
 
+.x-donate-link>a:hover {
 
+  text-decoration: underline;
 
+  color: #f00;
 
+}

+ 3 - 5
apps/poster-maker/index.html
Просмотреть файл 

@@ -17,11 +17,9 @@
 
         <span class="brand-text">FeHelper</span>
 
         <span class="brand-subtitle">海报快速生成</span>
 
       </a>
 
-      <div class="mod-head-actions">
 
-          <a href="#" id="donateLink" class="nav-item donate-link">
 
-              <i class="nav-icon">❤</i>
 
-              <span>打赏鼓励</span>
 
-          </a>
 
+      <div class="mod-head-actions panel-title">
 
+          <a href="#" class="x-donate-link" id="donate-link"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+          <a class="x-other-tools" id="other-tools"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
       </div>
 
     </div>
 
   </div>

+ 25 - 1
apps/poster-maker/js/eventHandlers.js
Просмотреть файл 

@@ -61,7 +61,31 @@ export function setupEventListeners() {
 
       window.downloadPoster(exportFormat, exportQuality);
 
     });
 
   }
 
-  
+
 
+  // 打赏鼓励
 
+  const donateLink = document.getElementById('donate-link');
 
+  if (donateLink) {
 
+    donateLink.addEventListener('click', (event) => {
 
+      event.preventDefault();
 
+      event.stopPropagation();
 
+      chrome.runtime.sendMessage({
 
+        type: 'fh-dynamic-any-thing', 
+        thing: 'open-donate-modal',
 
+        params: { toolName: 'poster-maker' }
 
+      });
 
+    });
 
+  }
 
+
 
+  // 探索更多实用工具
 
+  const otherTools = document.getElementById('other-tools');
 
+  if (otherTools) {
 
+    otherTools.addEventListener('click', (event) => {
 
+      event.preventDefault();
 
+      event.stopPropagation();
 
+      chrome.runtime.openOptionsPage();
 
+    });
 
+  }
 
+
 
   // 设置高级选项事件监听器
 
   setupAdvancedOptions();
 
 }

+ 0 - 12
apps/poster-maker/js/index.js
Просмотреть файл 

@@ -90,15 +90,3 @@ function setupPreviewZoom() {
 
   // 初始化时自动触发重置缩放
 
   resetZoomBtn.click();
 
 }
 
-
 
-/**
 
- * 打赏鼓励
 
- */
 
-document.getElementById('donateLink').addEventListener('click', (event  ) => {
 
-  event.preventDefault();
 
-  chrome.runtime.sendMessage({
 
-    type: 'fh-dynamic-any-thing',
 
-    thing: 'open-donate-modal',
 
-    params: { toolName: 'poster-maker' }
 
-  });
 
-});

+ 4 - 1
apps/postman/index.html
Просмотреть файл 

@@ -16,7 +16,10 @@
 
             <div class="panel-heading">
 
                 <h3 class="panel-title">
 
                     <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="x-a-high">
 
-                        <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：简易版Postman</h3>
 
+                        <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：简易版Postman
 
+                        <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                        <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
+                    </h3>
 
             </div>
 
         </div>
 
         <div class="panel-body mod-endecode">

+ 17 - 2
apps/postman/index.js
Просмотреть файл 

@@ -269,7 +269,7 @@ new Vue({
 
                 this.urlContent = 'http://t.weather.sojson.com/api/weather/city/101030100';
 
                 this.methodContent = 'GET';
 
             } else {
 
-                this.urlContent = 'https://www.baidufe.com/test-post.php';
 
+                this.urlContent = 'https://chrome.fehelper.com/test/post';
 
                 this.methodContent = 'POST';
 
                 this.paramContent = 'username=postman&password=123456'
 
             }
 
@@ -277,7 +277,22 @@ new Vue({
 
 
         urlParams2String: function (params) {
 
             return params.map((param) => `${param.key}=${param.value}`).join("&")
 
-        }
 
+        },
 
+
 
+        openDonateModal: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.sendMessage({
 
+                type: 'fh-dynamic-any-thing',
 
+                thing: 'open-donate-modal',
 
+                params: { toolName: 'postman' }
 
+            });
 
+        },
 
 
+        openOptionsPage: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();    
+            chrome.runtime.openOptionsPage();
 
+        }
 
     }
 
 });

+ 98 - 0
apps/regexp/index.css
Просмотреть файл 

@@ -1,3 +1,4 @@
 
+
 
 /* 全局样式 */
 
 * {
 
     margin: 0;
 
@@ -361,3 +362,100 @@ pre {
 
         padding: 15px 0;
 
     }
 
 }
 
+
 
+
 
+
 
+/* 工具市场按钮样式（保持不变） */
 
+.panel-title>a.x-other-tools {
 
+    margin: 1px 0 0;
 
+    font-size: 13px;
 
+    cursor: pointer;
 
+    text-decoration: none;
 
+    -webkit-user-select: none;
 
+    user-select: none;
 
+    color: #333;
 
+    float: right;
 
+    background-color: #f5f8ff;
 
+    padding: 5px 10px;
 
+    border-radius: 15px;
 
+    border: 1px solid #d0d9ff;
 
+    transition: all 0.3s ease;
 
+    display: flex;
 
+    align-items: center;
 
+    position: absolute;
 
+    right: 15px;
 
+    top: 8px;
 
+}
 
+
 
+.panel-title>a.x-other-tools .icon-plus-circle {
 
+    display: inline-block;
 
+    width: 16px;
 
+    height: 16px;
 
+    background: url(../static/img/plus-circle.svg) no-repeat center center;
 
+    background-size: contain;
 
+    margin-right: 5px;
 
+}
 
+
 
+.panel-title>a.x-other-tools .tool-market-badge {
 
+    display: inline-block;
 
+    background-color: #4d89fe;
 
+    color: white;
 
+    padding: 2px 6px;
 
+    border-radius: 10px;
 
+    margin-left: 5px;
 
+    font-size: 12px;
 
+    font-weight: bold;
 
+}
 
+
 
+.panel-title>a.x-other-tools:hover {
 
+    color: #333;
 
+    background-color: #e6edff;
 
+    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
 
+    transform: translateY(-1px);
 
+}
 
+
 
+
 
+/* 保持原有的顶部导航样式 */
 
+.x-donate-link {
 
+    float: right;
 
+    line-height: 18px;
 
+    color: #2563eb;
 
+    cursor: pointer;
 
+    text-decoration: none;
 
+    border: none;
 
+    white-space: nowrap;
 
+    margin-right: auto;
 
+    border-radius: 20px;
 
+    background-color: #eff6ff;
 
+    transition: all 0.2s ease;
 
+    position: relative;
 
+    display: inline-flex;
 
+    align-items: center;
 
+    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.1);
 
+    position: absolute;
 
+    right: 230px;
 
+    top: 12px;
 
+    padding: 4px 12px;
 
+    margin: 0 10px;
 
+    font-size: 12px;
 
+    font-weight: normal;
 
+}
 
+
 
+.x-donate-link:hover {
 
+    background-color: #dbeafe;
 
+    color: #1d4ed8;
 
+    text-decoration: none;
 
+    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.15);
 
+    transform: translateY(-1px);
 
+}
 
+
 
+.x-donate-link>a {
 
+    font-size: 12px;
 
+    color: blue;
 
+    cursor: pointer;
 
+    text-decoration: underline;
 
+}
 
+.x-donate-link>a:hover {
 
+    text-decoration: underline;
 
+    color: #f00;
 
+}

+ 3 - 1
apps/regexp/index.html
Просмотреть файл 

@@ -8,10 +8,12 @@
 
     </head>
 
     <body>
 
         <header class="header">
 
-            <div class="logo">
 
+            <div class="logo panel-title">
 
                 <img src="../../static/img/fe-48.png" alt="FeHelper Logo" width="24" height="24">
 
                 <h3>FeHelper | 正则表达式速查</h3>
 
                 <span class="subtitle">支持 JavaScript / Python / PHP / Java 等语言的正则速查</span>
 
+                <a href="#" class="x-donate-link" id="donate-link"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                <a class="x-other-tools" id="other-tools"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
             </div>
 
         </header>

+ 20 - 0
apps/regexp/index.js
Просмотреть файл 

@@ -547,6 +547,26 @@ document.addEventListener('DOMContentLoaded', () => {
 
         }
 
     });
 
 
+
 
+    // 点击模态框外部关闭
 
+    document.getElementById('donate-link').addEventListener('click', (event) => {
 
+        event.preventDefault();
 
+        event.stopPropagation();
 
+        chrome.runtime.sendMessage({
 
+            type: 'fh-dynamic-any-thing',
 
+            thing: 'open-donate-modal',
 
+            params: { toolName: 'regexp' }
 
+        });
 
+        return false;
 
+    });
 
+
 
+    document.getElementById('other-tools').addEventListener('click', (event) => {
 
+        event.preventDefault();
 
+        event.stopPropagation();
 
+        chrome.runtime.openOptionsPage();
 
+        return false;
 
+    });
 
+
 
     // 复制按钮功能
 
     copyButtons.forEach(button => {
 
         button.addEventListener('click', () => {

+ 1 - 2
apps/screenshot/index.css
Просмотреть файл 

@@ -67,8 +67,7 @@ th.x-op {
 
     font-size: 12px;

     font-weight: normal;

     color: #f00;

-    position: relative;

-    top: 5px;

+    margin-left: 20px;

 }

 

 /* 为canvas添加样式 */

+ 3 - 1
apps/screenshot/index.html
Просмотреть файл 

@@ -16,7 +16,9 @@
 
             <h3 class="panel-title">
 
                 <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="x-a-high">
 
                     <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：网页截屏工具
 
-                    <span class="x-switch ui-fl-r">Tips：从右键菜单进行网页截屏，效果更佳！（初次安装可能需要重启浏览器哦~~~）</span>
 
+                    <span class="x-switch">Tips：从右键菜单进行网页截屏，效果更佳！（初次安装可能需要重启浏览器哦~~~）</span>
 
+                    <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                    <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
             </h3>
 
         </div>
 
     </div>

+ 16 - 0
apps/screenshot/index.js
Просмотреть файл 

@@ -252,6 +252,22 @@ new Vue({
 
                     alert('必须接受授权，才能正常下载！');
 
                 }
 
             });
 
+        },
 
+
 
+        openDonateModal: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.sendMessage({
 
+                type: 'fh-dynamic-any-thing',
 
+                thing: 'open-donate-modal',
 
+                params: { toolName: 'screenshot' }
 
+            });
 
+        },
 
+
 
+        openOptionsPage: function(event) {  
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.openOptionsPage();
 
         }
 
     }
 
 });

+ 3 - 0
apps/sticky-notes/index.html
Просмотреть файл 

@@ -26,6 +26,9 @@
 
                             <a href="#" id="addnote" class="x-tooltip blue-tooltip x-newnote">新建笔记</a>
 
                         </span>
 
 
+                        <a href="#" class="x-donate-link" id="donate-link"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                        <a class="x-other-tools" id="other-tools"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
+
 
                     </h3>
 
                 </div>

+ 19 - 0
apps/sticky-notes/index.js
Просмотреть файл 

@@ -30,6 +30,25 @@ let StickyNotes = (() => {
 
             return false;
 
         });
 
 
+        // delete all notes
 
+        $('#donate-link').click(function (event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.sendMessage({
 
+                type: 'fh-dynamic-any-thing',
 
+                thing: 'open-donate-modal',
 
+                params: { toolName: 'sticky-notes' }
 
+            });
 
+            return false;
 
+        });
 
+
 
+        // open options page
 
+        $('#other-tools').click(function (event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.openOptionsPage();
 
+        });
 
+
 
         $(document.body).delegate('.delete_stickynote', 'click', function (e) {
 
             // delete note
 
             html5sticky.deleteNote($(this));

+ 99 - 19
apps/svg-converter/index.css
Просмотреть файл 

@@ -72,24 +72,6 @@ body {
 
     padding-left: 10px;
 
 }
 
 
-/* 打赏按钮样式 */
 
-.donate-link {
 
-    display: flex;
 
-    align-items: center;
 
-    color: white;
 
-    text-decoration: none;
 
-    padding: 6px 12px;
 
-    background-color: #ea4335;
 
-    border-radius: 4px;
 
-    transition: background-color 0.3s;
 
-    margin-left: 10px;
 
-}
 
-
 
-.donate-link:hover {
 
-    background-color: #d62516;
 
-    text-decoration: none;
 
-    color: white;
 
-}
 
 
 .nav-icon {
 
     margin-right: 5px;
 
@@ -683,4 +665,102 @@ body {
 
 
 .btn:hover {
 
     opacity: 0.9;
 
-} 
+} 
+
 
+.mod-head-actions {
 
+    position: relative;
 
+}
 
+
 
+/* 工具市场按钮样式（保持不变） */
 
+.mod-head-actions>a.x-other-tools {
 
+    margin: 1px 0 0;
 
+    font-size: 13px;
 
+    cursor: pointer;
 
+    text-decoration: none;
 
+    -webkit-user-select: none;
 
+    user-select: none;
 
+    color: #333;
 
+    float: right;
 
+    background-color: #f5f8ff;
 
+    padding: 5px 10px;
 
+    border-radius: 15px;
 
+    border: 1px solid #d0d9ff;
 
+    transition: all 0.3s ease;
 
+    display: flex;
 
+    align-items: center;
 
+    position: relative;
 
+    top: 0px;
 
+}
 
+
 
+.mod-head-actions>a.x-other-tools .icon-plus-circle {
 
+    display: inline-block;
 
+    width: 16px;
 
+    height: 16px;
 
+    background: url(../static/img/plus-circle.svg) no-repeat center center;
 
+    background-size: contain;
 
+    margin-right: 5px;
 
+}
 
+
 
+.mod-head-actions>a.x-other-tools .tool-market-badge {
 
+    display: inline-block;
 
+    background-color: #4d89fe;
 
+    color: white;
 
+    padding: 2px 6px;
 
+    border-radius: 10px;
 
+    margin-left: 5px;
 
+    font-size: 12px;
 
+    font-weight: bold;
 
+}
 
+
 
+.mod-head-actions>a.x-other-tools:hover {
 
+    color: #333;
 
+    background-color: #e6edff;
 
+    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
 
+    transform: translateY(-1px);
 
+}
 
+
 
+
 
+/* 保持原有的顶部导航样式 */
 
+.x-donate-link {
 
+    float: right;
 
+    line-height: 18px;
 
+    color: #2563eb;
 
+    cursor: pointer;
 
+    text-decoration: none;
 
+    border: none;
 
+    white-space: nowrap;
 
+    margin-right: auto;
 
+    border-radius: 20px;
 
+    background-color: #eff6ff;
 
+    transition: all 0.2s ease;
 
+    position: relative;
 
+    display: inline-flex;
 
+    align-items: center;
 
+    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.1);
 
+    position: absolute;
 
+    right: 215px;
 
+    top: 4px;
 
+    padding: 4px 12px;
 
+    margin: 0 10px;
 
+    font-size: 12px;
 
+    font-weight: normal;
 
+}
 
+
 
+.x-donate-link:hover {
 
+    background-color: #dbeafe;
 
+    color: #1d4ed8;
 
+    text-decoration: none;
 
+    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.15);
 
+    transform: translateY(-1px);
 
+}
 
+
 
+.x-donate-link>a {
 
+    font-size: 12px;
 
+    color: blue;
 
+    cursor: pointer;
 
+    text-decoration: underline;
 
+}
 
+.x-donate-link>a:hover {
 
+    text-decoration: underline;
 
+    color: #f00;
 
+}

+ 2 - 4
apps/svg-converter/index.html
Просмотреть файл 

@@ -29,10 +29,8 @@
 
                         </div>
 
                     </div>
 
                     <div class="mod-head-actions">
 
-                        <a href="#" @click="openDonateModal" class="nav-item donate-link" v-if="typeof openDonateModal === 'function'">
 
-                            <i class="nav-icon">❤</i>
 
-                            <span>打赏鼓励</span>
 
-                        </a>
 
+                        <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                        <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
                     </div>
 
                 </div>
 
             </div>

+ 13 - 2
apps/svg-converter/index.js
Просмотреть файл 

@@ -1261,7 +1261,9 @@ new Vue({
 
         /**
 
          * 打开打赏弹窗
 
          */
 
-        openDonateModal: function () {
 
+        openDonateModal: function (event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
             chrome.runtime.sendMessage({
 
                 type: 'fh-dynamic-any-thing',
 
                 thing: 'open-donate-modal',
 
@@ -1269,6 +1271,15 @@ new Vue({
 
                     toolName: 'svg-converter'
 
                 }
 
             });
 
-        }
 
+        },
 
+
 
+        /**
 
+         * 打开工具市场
 
+         */
 
+        openOptionsPage: function (event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.openOptionsPage();
 
+        }   
     }
 
 });

+ 5 - 1
apps/trans-color/index.html
Просмотреть файл 

@@ -17,7 +17,11 @@
 
         <div class="panel-heading">
 
             <h3 class="panel-title">
 
                 <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="x-a-high">
 
-                    <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：颜色转换工具</h3>
 
+                    <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：颜色转换工具
 
+                
+                    <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                    <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
+                </h3>
 
         </div>
 
     </div>
 
     <div class="panel-body"> <!-- Remove main-content-area -->

+ 18 - 0
apps/trans-color/index.js
Просмотреть файл 

@@ -429,6 +429,24 @@ new Vue({
 
                  // Return transparent or a default if the internal color is invalid
 
                 return 'transparent';
 
             }
 
+        },
 
+
 
+        openDonateModal: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.sendMessage({
 
+                type: 'fh-dynamic-any-thing',
 
+                thing: 'open-donate-modal',
 
+                params: { toolName: 'trans-color' }
 
+            });
 
+        },  
+
 
+        openOptionsPage: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.openOptionsPage();
 
         }
 
+        
+        
     }
 
 });

+ 5 - 1
apps/trans-radix/index.html
Просмотреть файл 

@@ -15,7 +15,11 @@
 
         <div class="panel-heading">
 
             <h3 class="panel-title">
 
                 <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="x-a-high">
 
-                    <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：进制转换工具</h3>
 
+                    <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：进制转换工具
 
+                
+                    <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                    <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
+                </h3>
 
         </div>
 
     </div>
 
     <div class="panel-body">

+ 19 - 1
apps/trans-radix/index.js
Просмотреть файл 

@@ -38,6 +38,24 @@ new Vue({
 
             this.$nextTick(() => {
 
                 this.rstValue = parseInt(this.srcValue, this.fromSelected).toString(this.toSelected);
 
             });
 
-        }
 
+        },
 
+
 
+        openDonateModal: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.sendMessage({
 
+                type: 'fh-dynamic-any-thing',
 
+                thing: 'open-donate-modal',
 
+                params: { toolName: 'trans-radix' }
 
+            });
 
+        },
 
+
 
+        openOptionsPage: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.openOptionsPage();
 
+        }   
+        
+        
     }
 
 });

+ 4 - 1
apps/websocket/index.html
Просмотреть файл 

@@ -15,7 +15,10 @@
 
         <div class="panel-heading">
 
             <h3 class="panel-title">
 
                 <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="x-a-high">
 
-                    <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：WebSocket测试</h3>
 
+                    <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：WebSocket测试
 
+                    <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
 
+                    <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
 
+                </h3>
 
         </div>
 
     </div>
 
     <div class="panel-body">

+ 14 - 0
apps/websocket/index.js
Просмотреть файл 

@@ -66,6 +66,20 @@ new Vue({
 
         now() {
 
             let date = new Date();
 
             return f0(date.getHours()) + ":" + f0(date.getMinutes()) + ":" + f0(date.getSeconds()) + " - ";
 
+        },
 
+        openDonateModal: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();
 
+            chrome.runtime.sendMessage({
 
+                type: 'fh-dynamic-any-thing',
 
+                thing: 'open-donate-modal',
 
+                params: { toolName: 'websocket' }
 
+            });
 
+        },
 
+        openOptionsPage: function(event) {
 
+            event.preventDefault();
 
+            event.stopPropagation();    
+            chrome.runtime.openOptionsPage();
 
         }
 
     }