upgrade qrcode css style

apps/options/index.html

@@ -185,7 +185,7 @@
                         <span class="must-tag">必装</span>
                     </div>
                 </div>
-                <div class="recommendation-card" @click="installTool('chart')">
+                <div class="recommendation-card" @click="installTool('chart-maker')">
                     <div class="rec-icon">📊</div>
                     <div class="rec-content">
                         <h4>图表制作工具</h4>

apps/options/market.js

@@ -188,10 +188,8 @@ new Vue({
                 // 更新"其他工具"类别
                 this.updateOtherCategory(Object.keys(processedTools));
 
-                // 默认选中第一个分类
-                if (TOOL_CATEGORIES.length > 0) {
-                    this.currentCategory = TOOL_CATEGORIES[0].key;
-                }
+                // 默认选中"全部分类"
+                this.currentCategory = '';
             } catch (error) {
                 console.error('初始化数据失败:', error);
             } finally {

apps/qr-code/index.html

@@ -14,10 +14,12 @@
         <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>：二维码{{qrEncodeMode? '生成':'解码'}}器
-
-                    <span class="x-switch ui-fl-r" ref="btnSwitch" @click="trans">切换为{{!qrEncodeMode? ' 二维码生成器 ' : ' 解码/扫码 '}}模式&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">| 二维码{{qrEncodeMode? '生成':'解码'}}器</span>
+                    </span>
+                    <span class="x-switch" ref="btnSwitch" @click="trans">切换为{{!qrEncodeMode? ' 二维码生成器 ' : ' 解码/扫码 '}}模式&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>
@@ -25,66 +27,80 @@
         <div class="panel-body mod-json">
 
             <div v-if="qrEncodeMode">
-                <div class="row">
-                    <textarea class="form-control mod-textarea" id="codeSource" ref="codeSource" v-model="textContent" placeholder="在这里填写需要生成二维码的任意内容"></textarea>
-                </div>
+                <div class="qr-layout">
+                    <!-- 左侧：文本输入区域 -->
+                    <div class="qr-left">
+                        <div class="section-title">输入内容</div>
+                        <textarea class="form-control mod-textarea" id="codeSource" ref="codeSource" v-model="textContent" placeholder="在这里填写需要生成二维码的任意内容"></textarea>
+                    </div>
 
-                <div class="row ui-mt-10">
+                    <!-- 中间：操作区域 -->
+                    <div class="qr-center">
+                        <div class="section-title">参数设置</div>
+                        <div class="control-panel">
+                            <div class="control-item">
+                                <label>尺寸：</label>
+                                <input name="opt_width" type="text" id="opt_width" v-model="qrSize" size="4" maxlength="4"/>
+                            </div>
+                            
+                            <div class="control-item">
+                                <label>颜色：</label>
+                                <input type="text" id="opt_fc" v-model="qrColor" size="10" />
+                            </div>
 
-                    <div class="ui-d-ib x-sizes">
-                        尺寸：<input name="opt_width" type="text" id="opt_width" v-model="qrSize" size="4" maxlength="4"/>
-                    </div>
-                    <div class="ui-d-ib x-colors">
-                        颜色：<input type="text" id="opt_fc" v-model="qrColor" size="10" />
-                    </div>
+                            <div class="control-item">
+                                <div class="radio ui-d-ib x-icons">
+                                    图标：<label><input id="remove_icon" name="qr_icon" type="radio" value="no" v-model="useIcon" @click="convert()">不要</label>
+                                    <label><input id="default_icon" name="qr_icon" type="radio" value="default" v-model="useIcon" @click="convert()">默认</label>
+                                    <label><input id="upload_icon" name="qr_icon" type="radio" value="custom" v-model="useIcon" @click="$refs.fileBox.click()">上传</label>
+                                </div>
+                            </div>
 
-                    <div class="radio ui-d-ib x-icons">
-                        图标：<label><input id="remove_icon" name="qr_icon" type="radio" value="no" v-model="useIcon" @click="convert()">不要</label>
+                            <div class="control-item">
+                                <button id="confirm_button" class="btn btn-success" @click="convert()">生成二维码</button>
+                            </div>
+                        </div>
                     </div>
 
-                    <div class="radio ui-d-ib ui-ml-10">
-                        <label><input id="default_icon" name="qr_icon" type="radio" value="default" v-model="useIcon" @click="convert()">默认</label>
+                    <!-- 右侧：结果预览区域 -->
+                    <div class="qr-right">
+                        <div class="section-title">
+                            生成结果
+                            <div class="action-buttons" v-if="showResult">
+                                <button class="btn-action" id="copy_button" @click="copyQR">复制</button>
+                                <button class="btn-action" id="download_button" @click="downloadQR">下载</button>
+                            </div>
+                        </div>
+                        <div id="preview"></div>
                     </div>
+                </div>
+            </div>
 
-                    <div class="radio ui-d-ib ui-ml-10">
-                        <label><input id="upload_icon" name="qr_icon" type="radio" value="custom" v-model="useIcon" @click="$refs.fileBox.click()">上传</label>
-                        (提示:支持直接拖拽一个图标到页面)
+            <!-- 二维码解码模式 -->
+            <div class="qr-decoder-layout" v-if="!qrEncodeMode">
+                <!-- 左侧：图片上传/预览 -->
+                <div class="decoder-left">
+                    <div class="section-title">上传或粘贴图片</div>
+                    <div class="upload-panel" ref="panelBox">
+                        <img id="decodePreview" alt="" :src="previewSrc" v-show="!!previewSrc.length">
+                        <div class="upload-instructions" v-show="!previewSrc.length">
+                            <a id="upload" href="#" ref="uploadBox" @click="$refs.fileBox.click()">选择图片</a>
+                            <span class="drag-drop-text">或拖拽图片到这里</span>
+                        </div>
+                    </div>
+                    <div class="decoder-tips tips">
+                        1、支持<i>屏幕截图</i>后直接在此处粘贴进行解码<br/>
+                        2、支持<i>复制文件、复制图片</i>在线地址在此处直接粘贴进行解码
                     </div>
-
-                    <button id="confirm_button" class="btn btn-success ui-fl-r" @click="convert()">生成QR图</button>
                 </div>
 
-                <div class="row ui-mt-20" v-if="showResult">
-                    <h4>结果</h4>
-                    <hr class="x-hr"/>
-                    <div id="preview"></div>
+                <!-- 右侧：解码结果 -->
+                <div class="decoder-right">
+                    <div class="section-title">解码结果</div>
+                    <textarea id="decodeResult" title="点击自动选择" placeholder="解码结果将显示在这里..." readonly ref="resultBox" @click="select()" v-model="resultContent" class="form-control mod-textarea"></textarea>
                 </div>
             </div>
 
-            <div class="row" v-if="!qrEncodeMode">
-                <table>
-                    <tr>
-                        <td>
-                            <div class="x-panel" ref="panelBox">
-                                <img id="decodePreview" alt="" :src="previewSrc" v-show="!!previewSrc.length">
-                                <div class="x-tips">
-                                    <a id="upload" href="#" ref="uploadBox" @click="$refs.fileBox.click()">选择图片</a><br>
-                                    或者选择一张图片拖拽图片到这里来
-                                </div>
-                            </div>
-
-                            <div class="tips">
-                                1、支持<i>屏幕截图</i>后直接在此处粘贴进行解码<br/>2、支持<i>复制文件、复制图片</i>在线地址在此处直接粘贴进行解码
-                            </div>
-                        </td>
-                        <td>
-                            <textarea id="decodeResult" title="点击自动选择" placeholder="内容会自动生成..." readonly ref="resultBox" @click="select()" v-model="resultContent" class="form-control"></textarea>
-                        </td>
-                    </tr>
-                </table>
-                <img id="img" alt="">
-            </div>
-
         </div>
 
         <div class="x-logo">

apps/qr-code/index.js

@@ -245,6 +245,59 @@ new Vue({
             this.previewSrc = src;
             this.$refs.panelBox.style.backgroundImage = 'none';
             this.resultContent = txt;
+        },
+
+        copyQR: function() {
+            const canvas = this.$el.querySelector('#preview canvas');
+            const copyButton = this.$el.querySelector('#copy_button');
+            const originalText = '复制';
+
+            if (!canvas || !copyButton) {
+                alert('请先生成二维码！');
+                return;
+            }
+
+            canvas.toBlob(blob => {
+                if (navigator.clipboard && navigator.clipboard.write) {
+                    navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })])
+                    .then(() => {
+                        copyButton.textContent = '√ 已复制';
+                        copyButton.classList.add('btn-action-success');
+
+                        setTimeout(() => {
+                            copyButton.textContent = originalText;
+                            copyButton.classList.remove('btn-action-success');
+                        }, 2000);
+                    }).catch(err => {
+                        console.error('无法复制二维码: ', err);
+                        alert('复制失败，请检查浏览器权限或手动截图。');
+                    });
+                } else {
+                    alert('当前浏览器不支持自动复制图片，请手动截图。');
+                }
+            });
+        },
+
+        downloadQR: function() {
+            const canvas = this.$el.querySelector('#preview canvas');
+            if (canvas) {
+                const link = document.createElement('a');
+                link.download = 'qrcode.png';
+                link.href = canvas.toDataURL('image/png');
+                link.click();
+            } else {
+                alert('请先生成二维码！');
+            }
+        },
+
+        openOptionsPage: function(){
+            if (chrome && chrome.runtime && chrome.runtime.openOptionsPage) {
+                 chrome.runtime.openOptionsPage();
+            } else {
+                 console.error('无法打开选项页。');
+                 // Optionally, provide a fallback link or message
+                 // window.open('options.html'); // Example fallback
+            }
         }
     }
 });

apps/static/img/switch-mode-hover.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 7H20M20 7L16 3M20 7L16 11M16 17H4M4 17L8 13M4 17L8 21" stroke="#1d4ed8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 

apps/static/img/switch-mode.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 7H20M20 7L16 3M20 7L16 11M16 17H4M4 17L8 13M4 17L8 21" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 

apps/trans-radix/index.css

@@ -1,39 +1,148 @@
 @import url("../static/css/bootstrap.min.css");
 
+/* 全局样式 */
+.panel-body {
+    background: #f8f9fa;
+    color: #2c3e50;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+    margin-top: -1px;
+}
+
+/* 代码提示样式 */
+.row.x-tips {
+    font-family: 'Consolas', monospace;
+    font-size: 14px;
+    color: #6c757d;
+    font-style: italic;
+    margin-bottom: 30px;
+    padding: 15px;
+    background: #ffffff;
+    border-radius: 6px;
+    border-left: 4px solid #3498db;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+/* 单选按钮组样式 */
 .mod-radios {
     font-size: 14px;
+    background: #ffffff;
+    padding: 15px 20px;
+    border-radius: 6px;
+    margin-bottom: 20px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+/* 单选按钮和标签样式 */
+.mod-radios input[type="radio"] {
+    display: none;
+}
+
+.mod-radios label {
+    margin-right: 15px;
+    font-weight: normal;
+    font-size: 14px;
+    padding: 6px 16px;
+    border: 1px solid #e0e0e0;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: #666;
+}
+
+.mod-radios input[type="radio"]:checked + label {
+    background: #3498db;
+    color: #fff;
+    border-color: #3498db;
 }
-.mod-value label{
-    margin-right: 0;
-    font-size: 16px;
+
+.mod-radios label:hover {
+    border-color: #3498db;
+    color: #3498db;
 }
+
+/* 输入框组样式 */
+.mod-value {
+    margin: 20px 0;
+}
+
+.mod-value label {
+    margin-right: 15px;
+    font-size: 15px;
+    color: #2c3e50;
+}
+
 .mod-value .x-input {
     display: inline-block;
     width: 400px;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    color: #2c3e50;
+    padding: 8px 12px;
+    border-radius: 6px;
+    transition: all 0.2s ease;
 }
+
+.mod-value .x-input:focus {
+    border-color: #3498db;
+    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+    outline: none;
+}
+
+/* 下拉选择框样式 */
 select.x-select {
     display: inline-block;
     width: 114px;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    color: #2c3e50;
+    padding: 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+select.x-select:focus {
+    border-color: #3498db;
+    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+    outline: none;
 }
+
+/* 交换按钮样式 */
 .radix-tips {
-    margin-left: 220px;
-    font-size: 14px;
-    letter-spacing: 3px;
+    display: inline-block;
+    margin: 20px 0 20px 220px;
+    font-size: 15px;
+    letter-spacing: 2px;
     cursor: pointer;
     user-select: none;
+    padding: 8px 20px;
+    border: 1px solid #e0e0e0;
+    border-radius: 20px;
+    transition: all 0.2s ease;
+    color: #666;
+    background: #ffffff;
 }
+
 .radix-tips:hover {
-    color: #0000ffcc;
+    background: #3498db;
+    color: #ffffff;
+    border-color: #3498db;
+    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
 }
 
-.row.x-tips {
-    font-size: 14px;
-    color: #aaa;
-    font-style: italic;
-    margin-bottom: 40px;
+/* 禁用状态的输入框样式 */
+.x-input[readonly] {
+    background: #f8f9fa;
+    color: #495057;
+    cursor: not-allowed;
 }
-label {
-    margin-right: 20px;
-    font-weight: normal;
-    font-size: 14px;
+
+/* 添加柔和的过渡动画 */
+.panel-body * {
+    transition: all 0.2s ease;
+}
+#pageContainer>.panel-body {
+    margin-top: 20px;
 }