添加向量化报告功能，更新 ScanControls 组件以支持打开和关闭向量化模态窗，新增相应的状态管理和按钮交互。更新国际化文本以支持向量化报告的相关内容，增强用户体验。

Author: oldjs

src/components/ScanControls.tsx

@@ -27,6 +27,7 @@ import { isFileSystemObserverSupported } from "../lib/fileObserver";
 import { useTranslations } from "./LocaleProvider";
 import { motion, AnimatePresence } from "framer-motion";
 import { detectDockerfile } from "../lib/dockerService";
+import VectorizeModal from "./VectorizeModal";
 
 export default function ScanControls() {
   const { t } = useTranslations();
@@ -49,6 +50,7 @@ export default function ScanControls() {
   const [scanProgress, setScanProgress] = useState(0);
   const [scanCompleted, setScanCompleted] = useState(false);
   const [showPulse, setShowPulse] = useState(false);
+  const [showVectorizeModal, setShowVectorizeModal] = useState(false);
 
   // 监控定时器引用
   const monitorTimerRef = useRef<NodeJS.Timeout | null>(null);
@@ -359,6 +361,16 @@ export default function ScanControls() {
     }
   };
 
+  // 打开向量化报告模态窗
+  const handleOpenVectorizeModal = () => {
+    setShowVectorizeModal(true);
+  };
+
+  // 关闭向量化报告模态窗
+  const handleCloseVectorizeModal = () => {
+    setShowVectorizeModal(false);
+  };
+
   // 如果没有目录句柄，不显示控制器
   if (!directoryHandle) return null;
 
@@ -647,98 +659,134 @@ export default function ScanControls() {
           </span>
         </motion.button>
 
+        <motion.button
+          onClick={handleDownloadReport}
+          disabled={isDownloading || !currentScan}
+          className={`px-4 py-2 rounded-md text-white transition-colors ${
+            isDownloading || !currentScan
+              ? "bg-gray-400 cursor-not-allowed"
+              : "bg-indigo-600 hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          }`}
+          whileHover={{ scale: isDownloading || !currentScan ? 1 : 1.05 }}
+          whileTap={{ scale: isDownloading || !currentScan ? 1 : 0.95 }}
+          transition={{ type: "spring", stiffness: 400, damping: 10 }}
+        >
+          <span className="flex items-center">
+            {isDownloading || scanStatus === "preparing" ? (
+              <>
+                <motion.svg
+                  className="-ml-1 mr-2 h-5 w-5 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  animate={{
+                    rotate: 360,
+                    scale: [1, 1.1, 1],
+                  }}
+                  transition={{
+                    rotate: {
+                      duration: 1.5,
+                      repeat: Infinity,
+                      ease: "linear",
+                    },
+                    scale: {
+                      duration: 1,
+                      repeat: Infinity,
+                      ease: "easeInOut",
+                    },
+                  }}
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </motion.svg>
+                <motion.span
+                  animate={{ opacity: [0.6, 1, 0.6] }}
+                  transition={{
+                    duration: 1.5,
+                    repeat: Infinity,
+                    ease: "easeInOut",
+                  }}
+                >
+                  {scanStatus === "preparing"
+                    ? t("scanControls.preparingReport")
+                    : t("scanControls.downloading")}
+                </motion.span>
+              </>
+            ) : (
+              <>
+                <motion.svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5 mr-2"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  animate={{
+                    y: [0, -2, 0, 2, 0],
+                  }}
+                  transition={{
+                    duration: 2,
+                    repeat: Infinity,
+                    ease: "easeInOut",
+                  }}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                  />
+                </motion.svg>
+                {t("scanControls.download")}
+              </>
+            )}
+          </span>
+        </motion.button>
+
+        {/* 向量化报告按钮 */}
         {currentScan && (
           <motion.button
-            onClick={handleDownloadReport}
-            disabled={isDownloading || !changeReport}
-            className={`px-4 py-2 rounded-md text-white transition-colors ${
-              isDownloading || !changeReport
-                ? "bg-gray-400 cursor-not-allowed"
-                : "bg-indigo-600 hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-            }`}
-            whileHover={{ scale: isDownloading || !changeReport ? 1 : 1.05 }}
-            whileTap={{ scale: isDownloading || !changeReport ? 1 : 0.95 }}
+            onClick={handleOpenVectorizeModal}
+            className="px-4 py-2 rounded-md text-white transition-colors bg-purple-600 hover:bg-purple-700 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
             transition={{ type: "spring", stiffness: 400, damping: 10 }}
           >
             <span className="flex items-center">
-              {isDownloading || scanStatus === "preparing" ? (
-                <>
-                  <motion.svg
-                    className="-ml-1 mr-2 h-5 w-5 text-white"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    animate={{
-                      rotate: 360,
-                      scale: [1, 1.1, 1],
-                    }}
-                    transition={{
-                      rotate: {
-                        duration: 1.5,
-                        repeat: Infinity,
-                        ease: "linear",
-                      },
-                      scale: {
-                        duration: 1,
-                        repeat: Infinity,
-                        ease: "easeInOut",
-                      },
-                    }}
-                  >
-                    <circle
-                      className="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      strokeWidth="4"
-                    ></circle>
-                    <path
-                      className="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    ></path>
-                  </motion.svg>
-                  <motion.span
-                    animate={{ opacity: [0.6, 1, 0.6] }}
-                    transition={{
-                      duration: 1.5,
-                      repeat: Infinity,
-                      ease: "easeInOut",
-                    }}
-                  >
-                    {scanStatus === "preparing"
-                      ? t("scanControls.preparingReport")
-                      : t("scanControls.downloading")}
-                  </motion.span>
-                </>
-              ) : (
-                <>
-                  <motion.svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-5 w-5 mr-2"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    animate={{
-                      y: [0, -2, 0, 2, 0],
-                    }}
-                    transition={{
-                      duration: 2,
-                      repeat: Infinity,
-                      ease: "easeInOut",
-                    }}
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                    />
-                  </motion.svg>
-                  {t("scanControls.download")}
-                </>
-              )}
+              <motion.svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5 mr-2"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                animate={{
+                  rotate: [0, 0, 10, -10, 0],
+                  scale: [1, 1.1, 1.1, 1.1, 1],
+                }}
+                transition={{
+                  duration: 3,
+                  repeat: Infinity,
+                  ease: "easeInOut",
+                }}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
+                />
+              </motion.svg>
+              {t("scanControls.vectorize")}
             </span>
           </motion.button>
         )}
@@ -829,6 +877,26 @@ export default function ScanControls() {
           </motion.div>
         )}
       </AnimatePresence>
+
+      {/* 向量化报告模态窗 */}
+      {showVectorizeModal && (
+        <div
+          className="fixed inset-0 z-[9999]"
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+          }}
+        >
+          <VectorizeModal onClose={handleCloseVectorizeModal} />
+        </div>
+      )}
     </div>
   );
 }