upgrade image-base64 & page-timing css styles

apps/background/background.js

@@ -143,6 +143,11 @@ let BgPageInstance = (function () {
 
             activeTab = tabs.filter(tab => tab.active)[0];
 
+            // 如果是二维码工具，且没有传入内容，则使用当前页面的URL
+            if (tool === 'qr-code' && !withContent && activeTab) {
+                withContent = activeTab.url;
+            }
+
             Settings.getOptions((opts) => {
                 let isOpened = false;
                 let tabId;

apps/image-base64/index.html

@@ -13,65 +13,69 @@
             <div class="panel panel-default" style="margin-bottom: 0px;">
                 <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>：{{ toolName[curType] }}
-
-                        <span class="x-switch ui-fl-r" ref="btnSwitch" @click="trans">切换为{{toolName[nextType]}}&gt;&gt;</span>
+                        <span class="title-text-wrapper">
+                            <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="title-text-wrapper-text">| {{ toolName[curType] }}</span>
+                        </span>
+                        <span class="x-switch" ref="btnSwitch" @click="trans">切换为{{toolName[nextType]}}&gt;&gt;</span>
+                        <a class="x-other-tools" @click="openOptionsPage()"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
                     </h3>
                 </div>
             </div>
+            
             <div class="panel-body mod-imagebase64" ref="imageBase64" v-show="curType=='image'">
-                <div class="row">
-                  <table>
-                      <tr>
-                          <td>
-                            <div class="x-panel" ref="panelBox">
-                              <img id="preview" alt="" :src="previewSrc" v-show="!!previewSrc.length">
-                              <div class="x-tips">
-                                  <a id="upload" href="#" ref="uploadBox" @click="upload($event)">选择图片</a><br>
-                                  或者选择一张图片拖拽图片到这里来
-                              </div>
+                <div class="image-base64-layout">
+                    <!-- 左侧：图片上传区域 -->
+                    <div class="upload-section">
+                        <div class="section-title">上传或粘贴图片</div>
+                        <div class="x-panel" ref="panelBox">
+                            <img id="preview" alt="" :src="previewSrc" v-show="!!previewSrc.length">
+                            <div class="upload-instructions" v-show="!previewSrc.length">
+                                <a id="upload" href="#" ref="uploadBox" @click="upload($event)">选择图片</a>
+                                <span class="drag-drop-text">或拖拽图片到这里</span>
                             </div>
+                        </div>
+                        <div class="tips">
+                            1、支持<i>屏幕截图</i>后直接在此处粘贴进行转化<br/>
+                            2、支持<i>复制文件、复制图片</i>在线地址在此处直接粘贴进行转化
+                        </div>
+                    </div>
 
-                              <div class="tips">
-                                  1、支持<i>屏幕截图</i>后直接在此处粘贴进行转化<br/>2、支持<i>复制文件、复制图片</i>在线地址在此处直接粘贴进行转化
-                              </div>
-                          </td>
-                          <td>
-                              <textarea id="base64Result" title="点击自动选择" placeholder="内容会自动生成..." readonly ref="resultBox" @click="select()" v-model="resultContent" class="form-control"></textarea>
-                              <div class="x-result-info">
-                                  <div class="x-item">
-                                      <span class="x-title">原始图片大小：</span><span id="sizeOri">{{sizeOri}}</span>
-                                  </div>
-                                  <div class="x-item">
-                                      <span class="x-title">DataUri&nbsp;&nbsp;大小：</span><span id="sizeBase">{{sizeBase}}</span>
-                                  </div>
-                              </div>
-                          </td>
-                      </tr>
-                  </table>
-                  <form action="#">
-                      <input type="file" id="file" accept=".jpg,.jpeg,.gif,.png,.bmp" ref="fileBox" @change="convert()">
-                  </form>
-                  <img id="img" alt="">
+                    <!-- 右侧：Base64结果 -->
+                    <div class="result-section">
+                        <div class="section-title">转换结果</div>
+                        <textarea id="base64Result" title="点击自动选择" placeholder="内容会自动生成..." readonly ref="resultBox" @click="select()" v-model="resultContent" class="form-control mod-textarea"></textarea>
+                        <div class="x-result-info">
+                            <div class="x-item">
+                                <span class="x-title">原始图片大小：</span><span id="sizeOri">{{sizeOri}}</span>
+                            </div>
+                            <div class="x-item">
+                                <span class="x-title">DataUri&nbsp;&nbsp;大小：</span><span id="sizeBase">{{sizeBase}}</span>
+                            </div>
+                        </div>
+                    </div>
                 </div>
+                <form action="#">
+                    <input type="file" id="file" accept=".jpg,.jpeg,.gif,.png,.bmp" ref="fileBox" @change="convert()">
+                </form>
+                <img id="img" alt="">
             </div>
 
             <div class="panel-body mod-base64image" ref="base64Image" v-show="curType=='base64'">
-                <div class="row">
-                    <table>
-                        <tr>
-                            <td>
-                                <textarea id="base64Input" class="form-control" title="点击自动选择" placeholder="在这里粘贴DataURI数据..." v-model="txtBase64Input"></textarea>
-                            </td>
-                            <td>
-                                <div class="x-panel">
-                                    <img id="base64Image" alt="" :src="txtBase64Output" v-show="!!txtBase64Input.length" @error="loadError">
-                                </div>
-                            </td>
-                        </tr>
-                    </table>
+                <div class="base64-image-layout">
+                    <!-- 左侧：Base64输入 -->
+                    <div class="input-section">
+                        <div class="section-title">输入Base64数据</div>
+                        <textarea id="base64Input" class="form-control mod-textarea" title="点击自动选择" placeholder="在这里粘贴DataURI数据..." v-model="txtBase64Input"></textarea>
+                    </div>
+
+                    <!-- 右侧：图片预览 -->
+                    <div class="preview-section">
+                        <div class="section-title">预览结果</div>
+                        <div class="x-panel">
+                            <img id="base64Image" alt="" :src="txtBase64Output" v-show="!!txtBase64Input.length" @error="loadError">
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -79,7 +83,6 @@
         </div>
 
         <script type="text/javascript" src="index.js"></script>
-
         <script src="../static/vendor/jquery/jquery-3.3.1.min.js"></script>
     </body>
 </html>

apps/image-base64/index.js

@@ -84,6 +84,9 @@ new Vue({
         }, false);
     },
     methods: {
+        openOptionsPage() {
+            chrome.runtime.openOptionsPage();
+        },
 
         _sizeFormat: function (num) {
             if (isNaN(num)) {

apps/manifest.json

@@ -88,7 +88,7 @@
     }
   ],
   "content_security_policy": {
-    "extension_pages": "script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; object-src 'self'"
+    "extension_pages": "script-src 'self'; style-src 'self' 'unsafe-inline'; object-src 'self'"
   },
   "update_url": "https://clients2.google.com/service/update2/crx",
   "homepage_url": "https://www.baidufe.com/fehelper"

apps/options/market.css

@@ -12,7 +12,16 @@
     padding: 1rem;
     border-radius: 4px;
     margin-bottom: 1.5rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    transition: box-shadow 0.3s ease;
+}
+
+/* 滚动时的样式增强 */
+.market-header.scrolled {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
 .search-filters-container {
@@ -113,20 +122,74 @@
     display: flex;
     gap: 20px;
     margin-top: 20px;
+    padding-top: 10px;
+    position: relative;
 }
 
 /* 侧边栏样式 */
 .market-sidebar {
     width: 200px;
     flex-shrink: 0;
+    position: sticky;
+    top: 80px; /* 与顶部header保持一定距离 */
+    max-height: calc(100vh - 100px); /* 设置最大高度，确保不会超出视窗 */
+    overflow-y: auto; /* 内容过多时可滚动 */
+    scrollbar-width: thin;
+    scrollbar-color: #d0d0d0 #f4f4f4;
+    transition: all 0.3s ease;
+}
+
+/* 侧边栏滚动条样式 */
+.market-sidebar::-webkit-scrollbar {
+    width: 6px;
+}
+
+.market-sidebar::-webkit-scrollbar-track {
+    background: #f4f4f4;
+    border-radius: 3px;
+}
+
+.market-sidebar::-webkit-scrollbar-thumb {
+    background-color: #d0d0d0;
+    border-radius: 3px;
+    border: 1px solid #f4f4f4;
+}
+
+.market-sidebar::-webkit-scrollbar-thumb:hover {
+    background-color: #c0c0c0;
 }
 
+/* 暗黑模式下的侧边栏滚动条 */
+[data-theme='dark'] .market-sidebar {
+    scrollbar-color: #555 #333;
+}
+
+[data-theme='dark'] .market-sidebar::-webkit-scrollbar-track {
+    background: #2a2a2a;
+}
+
+[data-theme='dark'] .market-sidebar::-webkit-scrollbar-thumb {
+    background-color: #555;
+    border: 1px solid #2a2a2a;
+}
+
+[data-theme='dark'] .market-sidebar::-webkit-scrollbar-thumb:hover {
+    background-color: #666;
+}
+
+/* 侧边栏section样式优化 */
 .sidebar-section {
     background: #fff;
     border-radius: 4px;
     padding: 15px;
     margin-bottom: 20px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+}
+
+/* 滚动时的样式增强 */
+.market-sidebar.scrolled .sidebar-section {
+    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 }
 
 .sidebar-section h4 {
@@ -1117,6 +1180,18 @@
         flex: 1;
         text-align: center;
     }
+    
+    .market-content {
+        flex-direction: column;
+    }
+    
+    .market-sidebar {
+        width: 100%;
+        position: relative;
+        top: 0;
+        max-height: none;
+        margin-bottom: 20px;
+    }
 }
 
 @media (max-width: 600px) {

apps/options/market.js

@@ -1230,4 +1230,18 @@ new Vue({
             }
         }
     }
+});
+
+// 添加滚动事件监听
+window.addEventListener('scroll', () => {
+    const header = document.querySelector('.market-header');
+    const sidebar = document.querySelector('.market-sidebar');
+    
+    if (window.scrollY > 10) {
+        header.classList.add('scrolled');
+        sidebar && sidebar.classList.add('scrolled');
+    } else {
+        header.classList.remove('scrolled');
+        sidebar && sidebar.classList.remove('scrolled');
+    }
 }); 

apps/page-timing/index.css

@@ -1,35 +1,109 @@
 @import url("../static/css/bootstrap.min.css");
 
 body {
-    font-family: Tahoma, sans-serif;
-    font-size: 10pt;
-    color:#333;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-size: 14px;
+    color: #2c3e50;
     margin: 0 auto;
+    background-color: #f5f7fa;
 }
-#loadTotal {
-    background:#f1f1f1;
-    font-weight:bold;
+
+.panel-body.mod-json {
+    padding: 20px;
 }
 
 #pageInfo {
-    padding: 10px 0;
-    line-height: 24px;
-    color: #800;
-    font-size: 14px;
+    padding: 15px 20px;
+    line-height: 1.6;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    margin-bottom: 20px;
 }
+
 #pageInfo span {
-    color: #888;
+    color: #5c6f8a;
     word-wrap: break-word;
+    font-size: 14px;
+    margin-left: 8px;
 }
-#pageLoadTime {
-    width:300px;
+
+#pageLoadTime, #pageHeaderInfo {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    padding: 20px;
+    margin-bottom: 20px;
 }
-#pageLoadTime,#pageHeaderInfo {
+
+#pageLoadTime {
+    width: 48%;
     float: left;
 }
+
 #pageHeaderInfo {
-    margin-left: 50px;
+    width: 48%;
+    float: right;
+    margin-left: 0;
 }
+
 h3 {
-    color:#666;
+    color: #2c3e50;
+    font-size: 18px;
+    margin-bottom: 20px;
+    font-weight: 600;
+}
+
+.table {
+    width: 100%;
+    margin-bottom: 0;
+}
+
+.table > thead > tr > th {
+    background: #f8fafc;
+    color: #2c3e50;
+    font-weight: 600;
+    border-bottom: 2px solid #edf2f7;
+    padding: 12px 15px;
+}
+
+.table > tbody > tr > td {
+    padding: 12px 15px;
+    border-bottom: 1px solid #edf2f7;
+    color: #4a5568;
+}
+
+.table > tbody > tr:last-child > td {
+    border-bottom: none;
+}
+
+.table-hover > tbody > tr:hover {
+    background-color: #f8fafc;
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: #f9fafb;
+}
+
+/* 响应式布局 */
+@media (max-width: 768px) {
+    #pageLoadTime, #pageHeaderInfo {
+        width: 100%;
+        float: none;
+    }
+    
+    #pageHeaderInfo {
+        margin-left: 0;
+    }
+    
+    .table-responsive {
+        border: none;
+    }
+}
+
+/* 清除浮动 */
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
 }