Merge pull request #1 from martinwq997/submit-button

xizheyin · web-flow · commit f6563229bf49 · 2024-10-23T15:22:14.000+08:00
feat
diff --git a/app/api/cves/route.ts b/app/api/cves/route.ts
@@ -32,7 +32,7 @@ const generateRandomCVE = (): CVE => {
 
 export async function GET() {
   try {
-    const randomCVEs = Array.from({ length: 5 }, generateRandomCVE);
+    const randomCVEs = Array.from({ length: 7 }, generateRandomCVE);
     return NextResponse.json(randomCVEs);
   } catch (error) {
     return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
diff --git a/app/api/submit/route.ts b/app/api/submit/route.ts
@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from 'next/server';
+import pool from '../../lib/db'; // 导入数据库连接池
+
+export async function POST(req: NextRequest) {
+    try {
+        const { content } = await req.json(); // 解析请求体中的 JSON 数据
+
+        if (!content) {
+            return NextResponse.json({ error: '内容不能为空' }, { status: 400 });
+        }
+
+        const client = await pool.connect(); // 获取数据库连接
+        // 假设我们将内容插入到名为 'submissions' 的表中
+        await client.query('INSERT INTO submissions (content) VALUES ($1)', [content]);
+        client.release(); // 释放连接
+
+        return NextResponse.json({ message: '内容提交成功！' }, { status: 200 });
+    } catch (error) {
+        console.error('提交错误:', error);
+        return NextResponse.json({ error: '内部服务器错误' }, { status: 500 });
+    }
+}
diff --git a/app/programs/[name]/[version]/page.tsx b/app/programs/[name]/[version]/page.tsx
@@ -6,20 +6,20 @@ import Header from '../../../../components/Header';
 import Footer from '../../../../components/Footer';
 import CrateInfoCard from '../../../../components/CrateInfoCard';
 import DependenciesList, { Dependency } from '../../../../components/DependenciesList';
-import DependencyGraph, {GraphDependency} from '../../../../components/DependencyGraph';
+import DependencyGraph, { GraphDependency } from '../../../../components/DependencyGraph';
 import VulnerabilitiesList, { Vulnerability } from '../../../../components/VulnerabilitiesList';
 import SecurityAdvisories from '../../../../components/SecurityAdvisories';
 import BenchmarkResults from '../../../../components/BenchmarkResults';
 import VersionsSelector from '../../../../components/VersionsSelector';
 import { CrateInfo } from '@/app/lib/crate_info';
 
-
+//异步获取依赖树
 async function fetchDependencyTree(name: string, version: string) {
     const response = await fetch(`/api/crates/${name}/${version}`);
     const versionData = await response.json();
-    
+
     const dependencies = versionData.dependencies || [];
-    
+
     const dependenciesDetails = await Promise.all(dependencies.map(async (subDep: { name: string; version: string; }) => {
         return fetchDependencyTree(subDep.name, subDep.version);
     }));
@@ -49,31 +49,31 @@ const CratePage = () => {
 
 
     useEffect(() => {
-       
+
         fetch(`/api/crates/${crateName}`)
             .then(response => response.json())
             .then(data => {
                 setCrateInfo(data.crateInfo || {});
                 setVersions(data.versions || []);
-            
+
                 setBenchmarks(data.benchmarks || []);
             })
             .catch(error => {
                 console.error('Error fetching data:', error);
             });
-    
+
     }, [crateName, currentVersion]);
- 
-    useEffect(()=>{
+
+    useEffect(() => {
         fetch(`/api/crates/${name}/${version}`)
-        .then(response => response.json())
-        .then(data => {
-            setVulnerabilities(data.vulnerabilities);
-            setDependencies(data.dependencies);
-        })
-        .catch(error => {
-            console.error('Error fetching data:', error);
-        });
+            .then(response => response.json())
+            .then(data => {
+                setVulnerabilities(data.vulnerabilities);
+                setDependencies(data.dependencies);
+            })
+            .catch(error => {
+                console.error('Error fetching data:', error);
+            });
 
 
     }, [crateName, currentVersion]);
@@ -89,7 +89,7 @@ const CratePage = () => {
                 console.error('Error fetching dependency tree:', error);
             }
         }
-    
+
         if (crateName && currentVersion) {
             loadDependencies();
         }
@@ -113,7 +113,7 @@ const CratePage = () => {
             <Header onBack={() => window.history.back()} />
             <main className="flex-grow overflow-y-auto bg-gray-100">
                 <div className="container mx-auto p-2 flex">
-                    <div className="w-full md:w-2/3 pr-2">                        
+                    <div className="w-full md:w-2/3 pr-2">
                         <CrateInfoCard crateInfo={crateInfo} />
                         <SecurityAdvisories vulnerabilities={vulnerabilities} />
                         <VulnerabilitiesList vulnerabilities={vulnerabilities} />
@@ -126,7 +126,7 @@ const CratePage = () => {
                             crateName={crateInfo.name}
                             onVersionChange={handleVersionChange}
                         />
-                        
+
                         <DependenciesList dependencies={dependencies} onDependencyClick={handleDependencyClick} />
                         <DependencyGraph crateName={name} currentVersion={version} dependencies={graphDependencies} />
                     </div>
diff --git a/app/programs/page.tsx b/app/programs/page.tsx
@@ -2,12 +2,14 @@
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
 
+//接口定义-Rust程序的结构
 interface ObjectData {
   name: string;
   description: string;
   category: string;
 }
 
+//接口定义-描述CVE数据的结构
 interface CVE {
   id: string;
   description: string;
@@ -16,15 +18,24 @@ interface CVE {
 }
 
 const ProgramsPage = () => {
-  const [objects, setObjects] = useState<ObjectData[]>([]);
-  const [cveData, setCveData] = useState<CVE[]>([]);
+  const [objects, setObjects] = useState<ObjectData[]>([]); //从接口获取Rust程序数据
+  const [cveData, setCveData] = useState<CVE[]>([]); //从接口获取CVE数据
 
+  //获取数据
   useEffect(() => {
-    fetch('/api/crates')
+    fetch('/api/crates') //这里应调用后端接口：GET http://localhost:6888/api/crates  （？）
       .then(response => response.json())
-      .then(data => setObjects(data));
+      .then(data => {
+        console.log('Fetched crates data:', data); //调试输出
+        if (Array.isArray(data)) {
+          setObjects(data);
+        } else {
+          console.error('Crates data is not an array:', data);
+          setObjects([]);//如果不是数组，设置为空数组
+        }
+      });
 
-      fetch('/api/cves')
+    fetch('/api/cves') //这里应调用后端接口： GET http://localhost:6888/api/crates/{name} （？）
       .then(response => {
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
@@ -69,7 +80,7 @@ const ProgramsPage = () => {
           <h1 className="text-3xl font-bold mb-4">CVE List</h1>
           <ul className="grid grid-cols-1 gap-4">
             {cveData.map((cve) => (
-              <li key={cve.id} className="bg-white shadow-md rounded-lg p-4 transition-transform transform hover:scale-105">
+              <li key={cve.id} className="bg-white shadow-md rounded-lg p-4 transition-transform transform hover:scale-105">{/* 这里transform hover:scale-105和submit弹窗有冲突 */}
                 <Link href={`programs/cves/${cve.id}`} className="text-xl font-bold text-blue-500 hover:text-blue-600">
                   {cve.id}
                 </Link>
diff --git a/app/ui/programs/nav-links.tsx b/app/ui/programs/nav-links.tsx
@@ -5,6 +5,8 @@ import {
   HomeIcon,
   DocumentDuplicateIcon,
 } from '@heroicons/react/24/outline';
+import { PaperAirplaneIcon } from '@heroicons/react/24/outline';
+import { useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import clsx from 'clsx';
@@ -23,6 +25,46 @@ const links = [
 
 export default function NavLinks() {
   const pathname = usePathname();
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+
+  const [file, setFile] = useState<File | null>(null);
+  const [isGithubLink, setIsGithubLink] = useState(true); // 控制输入类型
+
+  //暂定上传数据类型为react表单类型
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const formData = new FormData();
+    if (isGithubLink) {
+      formData.append('githubLink', inputValue);
+    } else if (file) {
+      formData.append('file', file);
+    }
+
+    try {
+      //用fetch向服务器发声POST请求，提交用户输入的内容
+      const response = await fetch('/api/submi', {  // 待替换为服务器API
+        method: 'POST',
+        //请求体，将对象转换为json字符串
+        body: formData,
+      });
+      //响应处理，根据响应结果显示提示信息，并重置输入框或关闭弹窗
+      if (response.ok) {
+        alert('内容提交成功！');//提交成功后重置输入框的值，并关闭弹窗
+        setInputValue('');
+        setFile(null);
+        setModalOpen(false);
+      } else {
+        alert('提交失败，请重试。');
+      }
+    } catch (error) {
+      console.error('提交错误:', error);
+      alert('提交失败，请检查网络连接。');
+    }
+  };
+
+  //渲染部分
   return (
     <>
       {links.map((link) => {
@@ -43,6 +85,104 @@ export default function NavLinks() {
           </Link>
         );
       })}
+
+      {/* 提交按钮 */}
+      {/* <button
+        onClick={() => setModalOpen(true)}
+        className="mt-4 flex h-[48px] w-full items-center justify-center rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600"
+      >
+        Submit
+      </button> */}
+
+
+
+      {/* submit按钮 */}
+      <button
+        onClick={() => setModalOpen(true)} //点击打开弹窗
+        className={clsx(
+          'mt-4 flex h-[48px] items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium text-gray-800 hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3'
+        )}
+      >
+        <PaperAirplaneIcon className="w-6" /> {/* 使用的图标 */}
+        Submit
+      </button>
+
+      {/* 弹窗 条件渲染，isModalOpen为true才渲染*/}
+      {isModalOpen && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+          <div className="bg-white p-6 rounded-md w-96 ">
+            <h2 className="text-lg font-bold mb-4">Submit Crates</h2>
+            {/* 表单元素，包裹输入控件和提交按钮 */}
+            <form onSubmit={handleSubmit}> {/* 将表单的提交事件绑定到handleSubmit函数，处理用户提交逻辑 */}
+              <div className="mb-4">
+                <label>
+                  <input
+                    type="radio"
+                    value="github"
+                    checked={isGithubLink}
+                    onChange={() => setIsGithubLink(true)}
+                  />
+                  GitHub Link
+                </label>
+                <label className="ml-4">
+                  <input
+                    type="radio"
+                    value="zip"
+                    checked={!isGithubLink}
+                    onChange={() => setIsGithubLink(false)}
+                  />
+                  Upload ZIP File
+                </label>
+              </div>
+
+              {isGithubLink ? (
+                <input
+                  type="url"
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  className="w-full p-2 border rounded-md"
+                  placeholder="Enter GitHub URL..."
+                  required
+                />
+              ) : (
+                <div>
+                  {/*<label className="block mb-2">Select a ZIP file:</label>*/}
+                  <input
+                    type="file"
+                    accept=".zip"
+                    onChange={(e) => {
+                      const selectedFile = e.target.files?.[0]; // 使用可选链操作符检查 files 是否为 null
+                      if (selectedFile) {
+                        setFile(selectedFile);
+                      } else {
+                        setFile(null); // 如果没有文件选择，清空文件状态
+                      }
+                    }}
+                    className="w-full p-2 border rounded-md"
+                    required
+                  />
+                </div>
+              )}
+
+              <div className="flex justify-end mt-4">
+                <button
+                  type="button"
+                  onClick={() => setModalOpen(false)}
+                  className="mr-2 rounded-md bg-gray-300 p-2"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="rounded-md bg-blue-600 text-white p-2"
+                >
+                  Submit
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
     </>
   );
-}
+}
