Merge branch 'main' of github.com:zxlie/FeHelper.Crx

apps/background/background.js

@@ -441,8 +441,6 @@ let BgPageInstance = (function () {
                             });
                             callback && callback(result);
                         });
-                        // 记录工具使用
-                        Statistics.recordToolUsage('request-jsonformat-options');
                         return true; // 这个返回true是非常重要的！！！要不然callback会拿不到结果
                     case 'save-jsonformat-options':
                         Awesome.StorageMgr.set(request.params).then(() => {

apps/code-beautify/index.html

@@ -23,7 +23,7 @@
                     <a href="javascript:;" @click="loadExample('sql',$event)" class="example-link">SQL示例</a>
                 </span>
                 <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
-                <a class="x-other-tools" @click="openOptionsPage()"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></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>

apps/code-beautify/index.js

@@ -159,12 +159,15 @@ new Vue({
             });
         },
 
-        openOptionsPage: function() {
+        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',

apps/code-compress/index.html

@@ -20,6 +20,8 @@
                         <a href="javascript:;" @click="loadExample('js',$event)">js示例</a>
                         <a href="javascript:;" @click="loadExample('css',$event)">css示例</a>
                     </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>

apps/code-compress/index.js

@@ -163,6 +163,21 @@ new Vue({
             this.codeType = type;
             editor.setValue(EXAMPLES[type]);
             this.changeCodeType(type);
+        },
+        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: 'code-compress' }
+            });
         }
     }
 });

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">

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();
         }
     }
 });

apps/en-decode/index.html

@@ -17,7 +17,7 @@
                     <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>：信息编解码工具
                     <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
-                    <a class="x-other-tools" @click="openOptionsPage()"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></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>

apps/en-decode/index.js

@@ -121,12 +121,15 @@ new Vue({
             this.$refs.rstCode.select();
         },
 
-        openOptionsPage: function() {
+        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',

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>

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();
+        }   
+        
+    }
+});

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>

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' }
+            });
         }
     }
 });

apps/json-format/content-script.js

@@ -463,7 +463,7 @@ window.JsonAutoFormat = (() => {
     let _getJsonContentFromDOM = function (dom) {
         let source = dom.textContent.trim();
 
-        if (!source) {
+        if (!source && document.body) {
             source = (document.body.textContent || '').trim()
         }
 

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">

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();
         }
+        
+        
     }
 });

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;

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>

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();
+        }
     }
 });

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>
 

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();
+        }   
     }
 });

apps/password/index.css

@@ -29,3 +29,118 @@
 #btnCopy {
     margin-left:20px;
 }
+
+/* 密码生成工具美化样式 */
+.password-card {
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1.5px 4px rgba(0,0,0,0.08);
+    padding: 32px 24px 24px 24px;
+    max-width: 980px;
+    margin: 40px auto 0 auto;
+    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
+}
+.password-card .checkbox {
+    margin-bottom: 18px;
+    font-size: 16px;
+    padding-left: 0;
+    margin-left: 0;
+    border-bottom: 1px dashed #ccc;
+    margin-left: 20px;
+}
+.password-card .checkbox.no-border {
+    border: none;
+}
+.password-card .checkbox input[type=checkbox] {
+    accent-color: #0078d7;
+    width: 18px;
+    height: 18px;
+    margin-right: 8px;
+    vertical-align: middle;
+    position: relative;
+    top: -4px;
+}
+.password-card .checkbox label {
+    cursor: pointer;
+    font-weight: 500;
+}
+.password-card input[type=number] {
+    width: 80px;
+    margin-left: 8px;
+    border-radius: 6px;
+    border: 1px solid #e0e0e0;
+    padding: 4px 8px;
+    font-size: 15px;
+}
+.password-card .btn-group {
+    display: flex;
+    gap: 0;
+    margin-top: 12px;
+}
+.password-card .btn-group .main-btn {
+    margin-right: 20px;
+}
+.password-card .main-btn {
+    border-radius: 8px;
+}
+.password-card .main-btn {
+    min-width: 120px;
+    font-size: 16px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,120,215,0.08);
+    transition: background 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 8px 0;
+}
+.password-card .btn-warning.main-btn {
+    background: linear-gradient(90deg, #ffb300 0%, #ff9800 100%);
+    color: #fff;
+    border: none;
+}
+.password-card .btn-success.main-btn {
+    background: linear-gradient(90deg, #0078d7 0%, #00c6fb 100%);
+    color: #fff;
+    border: none;
+}
+.password-card .main-btn:hover {
+    filter: brightness(1.08);
+    box-shadow: 0 4px 16px rgba(0,120,215,0.12);
+}
+.result-area {
+    margin-top: 28px;
+    background: #f6f8fa;
+    border-radius: 12px;
+    padding: 18px 16px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+.result-area textarea {
+    width: 100%;
+    min-height: 60px;
+    font-size: 20px;
+    color: #0078d7;
+    background: transparent;
+    border: none;
+    resize: none;
+    font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
+    font-weight: bold;
+    outline: none;
+}
+#pageContainer>.panel-body {
+    margin: 20px auto;
+}
+
+.fh-toast {
+    position: fixed;
+    left: 50%;
+    top: 80px;
+    transform: translateX(-50%);
+    background: rgba(0,0,0,0.85);
+    color: #fff;
+    padding: 12px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    z-index: 9999;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+    pointer-events: none;
+    transition: opacity 0.3s;
+}

apps/password/index.html

@@ -2,7 +2,7 @@
 <html lang="zh-CN">
 
 <head>
-    <title>随机密码生成器</title>
+    <title>密码生成工具</title>
     <meta charset="UTF-8">
     <link rel="shortcut icon" href="../static/img/favicon.ico">
     <link rel="stylesheet" href="index.css" />
@@ -18,10 +18,12 @@
                 <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>：随机密码生成器
+                    <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-password">
+        <div class="panel-body mod-password password-card">
 
             <div class="row">
                 <div class="checkbox">
@@ -40,17 +42,19 @@
                     <label>密码长度：<input class="form-control" type="number" min="0" v-model="length" @click="convert()"></label>
                 </div>
 
-                <div class="checkbox no-border">
-                    <input id="btnCopy" class="btn btn-warning" type="button" value="复制" @click="copyResult()" v-show="resultContent.length > 0">
-                    <input id="btnCodeChange" class="btn btn-success ui-fl-l" type="button" value="生成随机密码" @click="convert()">
+                <div class="checkbox ">
+                    <input id="btnCodeChange" class="btn btn-success main-btn" type="button" value="生成随机密码" @click="convert()">
+                    <input id="btnCopy" class="btn btn-warning main-btn" type="button" value="复制" @click="copyResult()" v-show="resultContent.length > 0">
                 </div>
             </div>
 
-            <div id="rst" class="row" v-show="resultContent.length > 0">
+            <div id="rst" class="row result-area" v-show="resultContent.length > 0">
                 <textarea class="form-control mod-textarea" id="rstCode" ref="rstCode" readonly v-model="resultContent" @mouseover="getResult()"></textarea>
             </div>
         </div>
+        <div v-show="showToast" class="fh-toast">{{ toastMsg }}</div>
     </div>
+
     <script type="text/javascript" src="index.js"></script>
 
     <script src="../static/vendor/jquery/jquery-3.3.1.min.js"></script>

apps/password/index.js

@@ -15,7 +15,9 @@ new Vue({
             upperLetter: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
             specialChar: '~!@#$%^&*()[{]}-_=+\|;:\'\",<.>/?`'
         },
-        resultContent: ''
+        resultContent: '',
+        showToast: false,
+        toastMsg: ''
     },
 
     methods: {
@@ -50,12 +52,36 @@ new Vue({
 
             if ('clipboard' in navigator) {
                 navigator.clipboard.writeText(this.resultContent)
+                .then(() => {
+                    this.showToastMsg('复制成功！');
+                })
                 .catch(err => {
                     console.error('复制失败: ', err);
                 });
             }else{
                 alert("您的浏览器不支持 clipboard API, 请手动复制")
             }
-        }
+        },
+        showToastMsg: function(msg) {
+            this.toastMsg = msg;
+            this.showToast = true;
+            setTimeout(() => {
+                this.showToast = false;
+            }, 1500);
+        },
+        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: 'password' }
+            });
+        } 
     }
 });

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;
+}

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>

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();
 }

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' }
-  });
-});

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">

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();
+        }
     }
 });

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;
+}

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>
 

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', () => {

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添加样式 */

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>

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();
         }
     }
 });

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>
 

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));

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;
+}

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>

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();
+        }   
     }
 });

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 -->

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();
         }
+        
+        
     }
 });

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">

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();
+        }   
+        
+        
     }
 });

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">

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();
         }
     }