fix: 改进组件调试文件路径提示，说明仅开发模式可用

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "proxycast",
-  "version": "0.29.0",
+  "version": "0.33.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "proxycast",
-      "version": "0.29.0",
+      "version": "0.33.0",
       "dependencies": {
         "@fabianlars/tauri-plugin-oauth": "^2",
         "@radix-ui/react-collapsible": "^1.1.12",
@@ -45,6 +45,7 @@
         "tailwind-merge": "^2.6.0"
       },
       "devDependencies": {
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
         "@eslint/js": "^9.15.0",
         "@fast-check/vitest": "^0.2.4",
         "@tauri-apps/cli": "^2.0.0",
@@ -178,6 +179,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -526,6 +528,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -569,6 +572,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -3065,6 +3069,7 @@
       "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "^7.21.3",
         "@svgr/babel-preset": "8.1.0",
@@ -3517,6 +3522,7 @@
       "integrity": "sha512-LPM2G3Syo1GLzXLGJAKdqoU35XvrWzGJ21/7sgZTUpbkBaOasTj8tjwn6w+hCkqaa1TfJ/w67rJSwYItlJ2mYw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -3538,6 +3544,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -3549,6 +3556,7 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -3621,6 +3629,7 @@
       "integrity": "sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.49.0",
         "@typescript-eslint/types": "8.49.0",
@@ -3949,6 +3958,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4197,6 +4207,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4813,6 +4824,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5918,6 +5930,7 @@
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -5947,6 +5960,7 @@
       "integrity": "sha512-GtldT42B8+jefDUC4yUKAvsaOrH7PDHmZxZXNgF2xMmymjUbRYJvpAybZAKEmXDGTM0mCsz8duOa4vTm5AY2Kg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@acemir/cssom": "^0.9.28",
         "@asamuzakjp/dom-selector": "^6.7.6",
@@ -7490,6 +7504,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -7730,6 +7745,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -7742,6 +7758,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -8639,6 +8656,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8780,6 +8798,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9049,6 +9068,7 @@
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -9124,6 +9144,7 @@
       "integrity": "sha512-E4t7DJ9pESL6E3I8nFjPa4xGUd3PmiWDLsDztS2qXSJWfHtbQnwAWylaBvSNY48I3vr8PTqIZlyK8TE3V3CA4Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.0.16",
         "@vitest/mocker": "4.0.16",
@@ -9680,6 +9701,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9693,6 +9715,7 @@
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",

package.json

@@ -57,6 +57,7 @@
     "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
+    "@babel/plugin-transform-react-jsx-source": "^7.27.1",
     "@eslint/js": "^9.15.0",
     "@fast-check/vitest": "^0.2.4",
     "@tauri-apps/cli": "^2.0.0",

src/components/dev/ComponentDebugOverlay.tsx

@@ -26,11 +26,38 @@ function getReactFiberInfo(element: HTMLElement): Partial<ComponentInfo> | null
     if (type && typeof type === "function") {
       const name = type.displayName || type.name || "Anonymous";
       if (!name.startsWith("_") && name !== "Anonymous") {
-        let filePath = "未知路径";
+        // 尝试多种方式获取文件路径
+        let filePath = "";
+        
+        // 方式1: _debugSource (开发模式)
         if (fiber._debugSource) {
-          filePath = `${fiber._debugSource.fileName}:${fiber._debugSource.lineNumber}`;
-        } else if (type._source) {
-          filePath = `${type._source.fileName}:${type._source.lineNumber}`;
+          const source = fiber._debugSource;
+          filePath = source.fileName || "";
+          if (source.lineNumber) {
+            filePath += `:${source.lineNumber}`;
+          }
+        }
+        // 方式2: type._source
+        else if (type._source) {
+          const source = type._source;
+          filePath = source.fileName || "";
+          if (source.lineNumber) {
+            filePath += `:${source.lineNumber}`;
+          }
+        }
+        // 方式3: 尝试从函数的 toString 中提取（某些打包器会保留）
+        else if (type.toString) {
+          const funcStr = type.toString();
+          // 检查是否有 sourceURL 注释
+          const sourceMatch = funcStr.match(/\/\/# sourceURL=(.+)/);
+          if (sourceMatch) {
+            filePath = sourceMatch[1];
+          }
+        }
+
+        // 如果还是没有路径，显示提示信息
+        if (!filePath) {
+          filePath = "仅开发模式可用 (需要 React DevTools)";
         }
 
         const props = fiber.memoizedProps || {};

src/components/settings/DeveloperSettings.tsx

@@ -38,9 +38,9 @@ export function DeveloperSettings() {
           <div className="mt-4 p-3 bg-muted/50 rounded-md text-sm text-muted-foreground">
             <p className="font-medium text-foreground mb-2">使用说明:</p>
             <ul className="list-disc list-inside space-y-1">
-              <li>所有标记的组件会显示蓝色虚线轮廓</li>
-              <li>鼠标悬浮时轮廓高亮显示</li>
-              <li>按住 Alt 键点击组件可查看名称和文件路径</li>
+              <li>按住 Alt 键 + 鼠标悬浮显示组件轮廓</li>
+              <li>Alt + 点击组件可查看名称和文件路径</li>
+              <li>文件路径仅在开发模式 (npm run tauri dev) 下可用</li>
             </ul>
           </div>
         )}