popup光标偏移的bugfix

apps/chrome.json

@@ -1,7 +1,7 @@
 {
   "name": "FeHelper(前端助手)-Dev",
   "short_name": "FeHelper",
-  "version": "2025.6.2025",
+  "version": "2025.6.2820",
   "manifest_version": 3,
   "description": "JSON自动格式化、手动格式化，支持排序、解码、下载等，更多功能可在配置页按需安装！",
   "icons": {

apps/edge.json

@@ -1,7 +1,7 @@
 {
   "name": "FeHelper(前端助手)-Dev",
   "short_name": "FeHelper",
-  "version": "2025.6.2025",
+  "version": "2025.6.2820",
   "manifest_version": 3,
   "description": "JSON自动格式化、手动格式化，支持排序、解码、下载等，更多功能可在配置页按需安装！",
   "icons": {

apps/firefox.json

@@ -1,7 +1,7 @@
 {
   "name": "FeHelper(前端助手)-Dev",
   "short_name": "FeHelper",
-  "version": "2025.6.2025",
+  "version": "2025.6.2820",
   "manifest_version": 3,
   "description": "FE助手：前端开发必备工具集，涵盖JSON格式化、代码美化与压缩、二维码生成、网页定制、便签笔记等数十种实用功能。界面现代、响应式设计，极致性能优化，国内可用，助力高效开发！",
   "icons": {

apps/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "FeHelper(前端助手)-Dev",
   "short_name": "FeHelper",
-  "version": "2025.6.2025",
+  "version": "2025.6.2820",
   "manifest_version": 3,
   "description": "JSON自动格式化、手动格式化，支持排序、解码、下载等，更多功能可在配置页按需安装！",
   "icons": {

apps/options/index.css

@@ -958,10 +958,12 @@ body{
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 15px;
+    padding: 8px 15px; /* 减少垂直内边距 */
     background: linear-gradient(to right, #2c3e50, #4ca1af);
     color: #fff;
     position: relative;
+    min-height: 48px; /* 限制最小高度 */
+    max-height: 60px; /* 限制最大高度 */
 }
 
 .navbar-brand {
@@ -1022,6 +1024,21 @@ body{
     gap: 15px;
 }
 
+/* 版本信息区域 - 统一样式 */
+.version-info {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.9);
+    background: rgba(0, 0, 0, 0.15);
+    padding: 6px 12px;
+    border-radius: 6px;
+    gap: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    max-height: 36px; /* 限制最大高度，保持导航栏紧凑 */
+    overflow: hidden;
+}
+
 .nav-item {
     position: relative;
     transition: all 0.3s ease;
@@ -1031,12 +1048,14 @@ body{
     justify-content: center;
     color: #fff;
     text-decoration: none;
-    padding: 8px 15px;
-    border-radius: 6px;
-    font-size: 14px;
+    padding: 6px 12px; /* 减少内边距 */
+    border-radius: 5px;
+    font-size: 13px; /* 稍微减小字体 */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-    min-width: 100px;
+    min-width: 90px; /* 减少最小宽度 */
     text-align: center;
+    height: 32px; /* 固定高度 */
+    box-sizing: border-box;
 }
 
 .nav-item:hover {
@@ -1167,7 +1186,26 @@ body{
     }
     
     .version-info {
-        padding: 6px 10px;
+        padding: 4px 8px;
+        font-size: 10px;
+        gap: 4px;
+        max-height: 28px;
+    }
+    
+    .version-details {
+        gap: 3px;
+    }
+    
+    .current-version,
+    .latest-version-text {
+        font-size: 9px;
+        padding: 1px 3px;
+    }
+    
+    .update-btn {
+        font-size: 9px;
+        padding: 2px 6px;
+        height: 16px;
     }
     
     /* 搜索和筛选区域响应式 */
@@ -1222,7 +1260,36 @@ body{
     }
     
     .version-info {
-        padding: 4px 8px;
+        padding: 3px 6px;
+        font-size: 10px;
+        gap: 4px;
+        max-height: 24px;
+    }
+    
+    .version-latest {
+        font-size: 10px;
+        gap: 3px;
+    }
+    
+    .version-number {
+        font-size: 9px;
+        padding: 1px 2px;
+    }
+    
+    .version-details {
+        gap: 3px;
+    }
+    
+    .current-version,
+    .latest-version-text {
+        font-size: 9px;
+        padding: 1px 3px;
+    }
+    
+    .update-btn {
+        font-size: 9px;
+        padding: 2px 6px;
+        height: 16px;
     }
     
     .donate-link span,
@@ -1262,47 +1329,51 @@ body{
     color: white;
 }
 
-/* 版本号与更新提示 */
+/* 版本号与更新提示 - 优化为水平紧凑布局 */
 .version-details {
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap; /* 在必要时换行 */
 }
 
 .version-label {
-    font-size: 12px;
+    font-size: 10px;
     color: rgba(255,255,255,0.7);
-    margin-bottom: 3px;
+    white-space: nowrap; /* 防止换行 */
+    margin: 0; /* 移除边距 */
 }
 
 .current-version {
-    font-size: 14px;
-    font-weight: 600;
+    font-size: 11px;
+    font-weight: 500;
     color: #fff;
-    padding: 2px 6px;
-    background-color: rgba(24, 144, 255, 0.4);
-    border-radius: 4px;
-    letter-spacing: 0.5px;
+    padding: 1px 4px;
+    background-color: rgba(24, 144, 255, 0.5);
+    border-radius: 3px;
+    letter-spacing: 0.2px;
+    white-space: nowrap;
 }
 
 .latest-version-text {
-    font-size: 14px;
-    font-weight: 600;
+    font-size: 11px;
+    font-weight: 500;
     color: #fff;
-    padding: 2px 6px;
-    background-color: rgba(82, 196, 26, 0.4);
-    border-radius: 4px;
-    letter-spacing: 0.5px;
+    padding: 1px 4px;
+    background-color: rgba(82, 196, 26, 0.5);
+    border-radius: 3px;
+    letter-spacing: 0.2px;
+    white-space: nowrap;
 }
 
 .latest-version-container {
-    height: 20px;
+    height: 18px;
     display: flex;
     align-items: center;
 }
 
 .latest-version-img {
-    height: 20px;
+    height: 18px;
     transition: transform 0.2s ease;
     cursor: pointer;
 }
@@ -1315,14 +1386,18 @@ body{
     background-color: #ff6b6b;
     color: white;
     border: none;
-    padding: 5px 12px;
-    border-radius: 4px;
-    font-size: 14px;
-    font-weight: 600;
+    padding: 3px 8px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 500;
     cursor: pointer;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
     animation: pulse 1.5s infinite;
     transition: background-color 0.3s;
+    white-space: nowrap;
+    height: 20px; /* 固定高度 */
+    display: flex;
+    align-items: center;
 }
 
 .update-btn:hover {
@@ -1366,16 +1441,18 @@ body{
 .version-latest {
     display: flex;
     align-items: center;
-    font-size: 15px;
-    font-weight: 600;
+    font-size: 12px;
+    font-weight: 500;
     color: #fff;
-    gap: 8px;
+    gap: 6px;
+    white-space: nowrap;
 }
 
 .version-check-icon {
     color: #52c41a;
-    font-size: 16px;
+    font-size: 14px;
     text-shadow: 0 0 5px rgba(82, 196, 26, 0.5);
+    flex-shrink: 0;
 }
 
 .dark-mode .version-latest {
@@ -1388,12 +1465,13 @@ body{
 
 .version-number {
     background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
-    padding: 2px 6px;
-    margin-left: 4px;
-    font-weight: 200;
+    border-radius: 3px;
+    padding: 1px 4px;
+    margin-left: 2px;
+    font-weight: 400;
     color: #fff;
-    font-size: 14px;
+    font-size: 11px;
+    white-space: nowrap;
 }
 
 .dark-mode .version-number {

apps/options/index.html

@@ -77,7 +77,9 @@
                     <div class="settings-section">
                         <h4># FH工具排序 <span class="x-tips">（自定义已安装工具在弹窗中的显示顺序）</span></h4>
                         <div class="tool-sort-container">
-                            <div class="sort-tips">拖拽下方工具条目来调整顺序，调整后的顺序将在弹窗中生效：</div>
+                            <div class="sort-tips">拖拽下方工具条目来调整顺序，调整后的顺序将在弹窗中生效。<br/>
+                                <span style="color: #52c41a; font-size: 11px;">💡 提示：点击底部"保存"按钮会同时保存工具排序和插件设置</span>
+                            </div>
                             <div class="sortable-list" id="sortableList">
                                 <div v-for="(tool, index) in sortableTools" 
                                      :key="tool.key" 

apps/options/index.js

@@ -1065,6 +1065,19 @@ new Vue({
                     opts[key] = this.selectedOpts.includes(key).toString();
                 });
                 
+                // 先保存工具排序（如果用户有修改）
+                if (this.sortableTools && this.sortableTools.length > 0) {
+                    try {
+                        const toolOrder = this.sortableTools.map(tool => tool.key);
+                        await chrome.storage.local.set({
+                            tool_custom_order: JSON.stringify(toolOrder)
+                        });
+                    } catch (sortError) {
+                        console.warn('保存工具排序时出现错误:', sortError);
+                        // 工具排序保存失败不应该阻止设置保存
+                    }
+                }
+                
                 // 保存设置 - 直接传递对象，settings.js已增加对对象类型的支持
                 Settings.setOptions(opts, async () => {
                     try {
@@ -1090,7 +1103,7 @@ new Vue({
                         // 显示提示
                         this.showNotification({
                             title: 'FeHelper 设置',
-                            message: '设置已保存！'
+                            message: '设置和工具排序已保存！'
                         });
                     } catch (innerError) {
                         this.showNotification({

apps/popup/index.css

@@ -49,8 +49,7 @@ ul.fe-function-list {
     overflow-y: auto; /* 允许垂直滚动 */
     overflow-x: hidden; /* 隐藏水平滚动 */
     max-height: 500px; /* 不再限制最大高度 */
-    display: flex;
-    flex-direction: column-reverse;
+    display: inline-table;
     scrollbar-width: thin; /* Firefox 下的滚动条样式 */
     scrollbar-color: rgba(67, 97, 238, 0.3) transparent;
 }
@@ -87,17 +86,19 @@ ul.fe-function-list li {
     padding: 2px 10px 2px 38px;
     cursor: pointer;
     color: #4a4c6d;
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.2s ease-out, margin 0.2s ease-out;
+    /* 只对安全的属性进行过渡，避免布局变化 */
+    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
     display: block;
     align-items: center;
-    height: 28px; /* 默认高度 */
+    height: 28px; /* 固定高度，不变化 */
     border-radius: 6px;
-    margin: 2px 0;
+    margin: 2px 0; /* 固定边距，不变化 */
     border-bottom: 1px solid rgba(67, 97, 238, 0.05);
     text-align: justify;
     position: relative;
-    line-height: 28px;
+    line-height: 28px; /* 固定行高，不变化 */
     flex-shrink: 0; /* 防止被压缩 */
+    box-sizing: border-box; /* 确保padding不影响总宽度 */
 }
 
 ul.fe-function-list li:last-child {
@@ -109,7 +110,8 @@ ul.fe-function-list li:hover {
     color: #000;
     background: rgba(67, 97, 238, 0.08);
     box-shadow: 0 2px 6px rgba(67, 97, 238, 0.08);
-    font-weight: 600;
+    /* 保持字体粗细不变，避免文字宽度变化导致布局抖动 */
+    font-weight: 500;
 }
 
 ul.fe-function-list li > span {
@@ -127,7 +129,8 @@ ul.fe-function-list li:after {
 ul.fe-function-list li > b {
     width: 20px;
     height: 20px;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    /* 只对transform进行过渡，避免其他属性变化影响布局 */
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -140,6 +143,8 @@ ul.fe-function-list li > b {
     position: absolute;
     left: 10px;
     top: 6px;
+    /* 确保图标的变换不影响文档流 */
+    transform-origin: center center;
 }
 
 /* 暗黑模式适配 */
@@ -148,6 +153,7 @@ ul.fe-function-list li > b {
 }
 
 ul.fe-function-list li:hover > b {
+    transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
 }