Browse Source

个别页面继续增加打赏入口;密码工具样式优化

zxlie 5 months ago
parent
commit
27b1a2e073

+ 0 - 2
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(() => {

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

+ 4 - 1
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',

+ 2 - 0
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>

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

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

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

+ 10 - 6
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>

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