feat: 优化排版，完善获取git提交记录以及预览功能

src/components/GitRepo/index.tsx

@@ -1,17 +1,9 @@
 import type React from "react";
 import { useState } from "react";
-import {
-  Card,
-  Input,
-  Button,
-  List,
-  Space,
-  Modal,
-  Checkbox,
-  message,
-  Tooltip,
-} from "antd";
-import { open } from "@tauri-apps/plugin-dialog";
+import { Card, Button, List, Checkbox, Tooltip } from "antd";
+import AddRepoModal from "./AddRepoModal";
+import GenerateReportModal from "./GenerateReportModal";
+import type { ReportType } from "../../types/types";
 
 interface GitRepoFormData {
   repoPath: string;
@@ -22,53 +14,33 @@ interface GitRepoProps {
   onAddRepo: (repo: GitRepoFormData) => void;
   repos: GitRepoFormData[];
   className?: string;
+  onGenerateReport: (reportType: ReportType, useAI: boolean) => void;
+  onReposSelect?: (selectedRepos: string[]) => void;
 }
 
-const GitRepo: React.FC<GitRepoProps> = ({ onAddRepo, repos: initialRepos, className }) => {
-  const [name, setName] = useState("");
-  const [repoPath, setRepoPath] = useState("");
+const GitRepo: React.FC<GitRepoProps> = ({
+  onAddRepo,
+  repos: initialRepos,
+  className,
+  onGenerateReport,
+  onReposSelect,
+}) => {
   const [repos, setRepos] = useState<GitRepoFormData[]>(() => {
-    const savedRepos = localStorage.getItem('gitRepos');
+    const savedRepos = localStorage.getItem("gitRepos");
     return savedRepos ? JSON.parse(savedRepos) : initialRepos;
   });
 
-  const handleSubmit = () => {
-    if (!repoPath) {
-      message.warning("请选择仓库路径");
-      return;
-    }
-    if (!name) {
-      message.warning("请输入仓库名称");
-      return;
-    }
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleModalSubmit = (repoPath: string, name: string) => {
     const newRepo = { name, repoPath };
     const updatedRepos = [...repos, newRepo];
-    localStorage.setItem('gitRepos', JSON.stringify(updatedRepos));
+    localStorage.setItem("gitRepos", JSON.stringify(updatedRepos));
     setRepos(updatedRepos);
     onAddRepo(newRepo);
-    setName("");
-    setRepoPath("");
+    setIsModalOpen(false);
   };
 
-  const handleSelectDirectory = async () => {
-    try {
-      const selected = await open({
-        directory: true,
-        multiple: false,
-        title: "选择Git仓库目录",
-      });
-      console.log("选择的目录:", selected);
-
-      if (selected) {
-        setRepoPath(selected);
-      }
-    } catch (error) {
-      console.error("选择目录失败:", error);
-    }
-  };
-
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
   const showModal = () => {
     setIsModalOpen(true);
   };
@@ -78,41 +50,33 @@ const GitRepo: React.FC<GitRepoProps> = ({ onAddRepo, repos: initialRepos, class
   };
 
   const [selectedRepos, setSelectedRepos] = useState<string[]>([]);
+  const [isGenerateModalOpen, setIsGenerateModalOpen] = useState(false);
+
   const handleCheckboxChange = (checkedValues: string[]) => {
     setSelectedRepos(checkedValues);
+    onReposSelect?.(checkedValues);
     console.log("选中的仓库:", checkedValues);
   };
 
+  const handleGenerateReport = (reportType: ReportType, useAI: boolean) => {
+    console.log("生成报告:", { reportType, useAI, selectedRepos });
+    setIsGenerateModalOpen(false);
+    onGenerateReport(reportType, useAI);
+  };
+
   return (
     <div className={className}>
       <Card title="Git仓库" className="size-full">
-        <Modal
-          title="添加Git仓库"
-          open={isModalOpen}
+        <AddRepoModal
+          isOpen={isModalOpen}
           onCancel={handleCancel}
-          footer={
-            <Button type="primary" onClick={handleSubmit}>
-              添加仓库
-            </Button>
-          }
-        >
-          <div className="repo-inputs">
-            <Space.Compact style={{ width: "100%", marginBottom: 16 }}>
-              <Input
-                placeholder="选择Git仓库本地路径"
-                value={repoPath}
-                readOnly
-              />
-              <Button onClick={handleSelectDirectory}>选择目录</Button>
-            </Space.Compact>
-            <Input
-              placeholder="请输入仓库名称"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              style={{ marginBottom: 16 }}
-            />
-          </div>
-        </Modal>
+          onSubmit={handleModalSubmit}
+        />
+        <GenerateReportModal
+          open={isGenerateModalOpen}
+          onCancel={() => setIsGenerateModalOpen(false)}
+          onSubmit={handleGenerateReport}
+        />
 
         <Checkbox.Group
           className="size-full"
@@ -141,7 +105,12 @@ const GitRepo: React.FC<GitRepoProps> = ({ onAddRepo, repos: initialRepos, class
             footer={
               selectedRepos.length > 0 && (
                 <div className="flex justify-end items-center">
-                  <Button type="primary">同步</Button>
+                  <Button
+                    type="primary"
+                    onClick={() => setIsGenerateModalOpen(true)}
+                  >
+                    生成预览
+                  </Button>
                 </div>
               )
             }