feat: 完成授权和代码规范检测页面

lexmin0412 · Jun 2, 2024 · a5ea1cb · a5ea1cb
1 parent 8e9fc01
commit a5ea1cb
Show file tree

Hide file tree

Showing 11 changed files with 500 additions and 84 deletions.
diff --git a/app/api/repos/route.ts b/app/api/repos/route.ts
@@ -40,3 +40,14 @@ export async function POST(request: Request) {
 	const finalRes = JSON.stringify(formattedRes, null, 2)
 	return NextResponse.json(finalRes);
 }
+
+export async function GET(request: Request) {
+
+	const { searchParams } = new URL(request.url)
+	const userName = searchParams.get('userName')
+	console.log('userName', userName)
+
+	const res = await (await fetch(`https://api.github.com/users/${userName}/repos`)).json()
+
+	return NextResponse.json(res);
+}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -0,0 +1,68 @@
+async function getData() {
+	const res = await fetch("https://api.github.com/users/lexmin0412/repos");
+	// The return value is *not* serialized
+	// You can return Date, Map, Set, etc.
+
+	if (!res.ok) {
+		// This will activate the closest `error.js` Error Boundary
+		throw new Error("Failed to fetch data");
+	}
+
+	const repoList = await res.json();
+
+	return repoList?.map((item) => {
+		return {
+			name: item.name,
+			description: item.description,
+			href: item.html_url,
+		};
+	});
+}
+
+interface IItemProps {
+	name: string;
+	href: string;
+	description: string;
+}
+
+const Item = (props: IItemProps) => {
+	return (
+		<div
+			key={props.name}
+			className="group relative flex gap-x-6 py-4 border-0 border-b border-solid border-gray-700"
+		>
+			<div>
+				<a href={props.href} className="text-white" target='_blank'>
+					<div className="flex items-center">
+						<div className="bg-green-200 rounded-[50%] w-2 h-2 flex items-center justify-center mr-2">
+							<div className="bg-green-500 rounded-[50%] w-1 h-1" />
+						</div>
+						<div className="font-semibold">{props.name}</div>
+					</div>
+					<span className="absolute inset-0" />
+				</a>
+				<p className="mt-1 text-gray-600">{props.description}</p>
+			</div>
+		</div>
+	);
+};
+
+export default async function Dashboard() {
+	const item = {
+		name: "名称",
+		description: "描述",
+		href: "/",
+	};
+
+	const data = await getData();
+
+	console.log("data11", data);
+
+	return (
+		<div className="h-full overflow-auto px-2">
+			{data.map((item) => {
+				return <Item key={item.name} {...item} />;
+			})}
+		</div>
+	);
+}
diff --git a/app/globals.css b/app/globals.css
@@ -17,6 +17,7 @@
 }
 
 body {
+	height: 100vh;
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(
       to bottom,

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,10 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import IconGithub from "./../components/icons/github";
+import Logo from "../assets/logo.png";
+import Image from "next/image";
 import "./globals.css";
+import Sidebar from "@/components/sidebar";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -14,9 +18,29 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
+		<html lang="en">
+			<body
+				className={`${inter.className} text-white flex items-center h-screen`}
+			>
+				<div className="h-full w-60 bg-[#192231]">
+					<div className="flex items-center justify-between h-20 px-4">
+						<Image src={Logo} alt="Woodpecker Logo" width={32} height={32} />
+						<a href="https://github.com/lexmin0412/woodpecker" target="_blank">
+							<IconGithub className="text-sm w-9 h-9" />
+						</a>
+					</div>
+					<Sidebar />
+				</div>
+
+				<div className="bg-[#1F2937] h-full overflow-hidden flex-1 flex flex-col">
+					<header className="flex items-center justify-between px-6 h-20 border-b border-solid border-gray-700">
+						<input type="search" placeholder='请输入仓库名' className='bg-gray-800 text-white border-gray-700 px-4 outline-none border-solid border  h-10 leading-10 text-sm rounded-3xl w-60'	 />
+					</header>
+					<div className="p-6 flex-1 overflow-auto">{children}</div>
+				</div>
+			</body>
+		</html>
+	);
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,39 +1,92 @@
-import Editor from "@/components/editor";
 import React from "react";
 
-console.log('process.cwd', process.cwd())
+console.log("process.cwd", process.cwd());
 
 export default async function Home() {
+	return (
+		<div className="flex min-h-full flex-1 flex-col justify-center p-6 lg:px-8">
+			<div className="flex-1 flex flex-col items-center justify-center">
+				<div className="sm:mx-auto sm:w-full sm:max-w-sm">
+					<img
+						className="mx-auto h-10 w-auto"
+						src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
+						alt="Your Company"
+					/>
+					<h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+						Github 登录
+					</h2>
+				</div>
 
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-12">
-      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-        <a
-          href="https://github.com/lexmin0412/woodpecker"
-          target="_blank"
-          className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30"
-        >
-          <code className="font-mono text-2xl font-bold cursor-pointer">
-            Woodpecker
-          </code>
-        </a>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://github.com/lexmin0412"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By Lexmin0412
-          </a>
-        </div>
-      </div>
+				<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+					<form className="space-y-6" action="/dashboard" method="POST">
+						<div>
+							<label
+								htmlFor="email"
+								className="block text-sm font-medium leading-6 text-gray-900"
+							>
+								Github UserName
+							</label>
+							<div className="mt-2">
+								<input
+									id="email"
+									name="email"
+									type="text"
+									autoComplete="email"
+									required
+									className="block w-full px-2 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+								/>
+							</div>
+						</div>
 
-      <div className="relative text-4xl font-bold">
-        你的代码仓库健康检查工具。
-      </div>
+						<div>
+							<div className="flex items-center justify-between">
+								<label
+									htmlFor="password"
+									className="block text-sm font-medium leading-6 text-gray-900"
+								>
+									Github Access Token（选填）
+								</label>
+								<div className="text-sm">
+									<a
+										href="#"
+										className="font-semibold text-indigo-600 hover:text-indigo-500"
+									>
+										如何获取?
+									</a>
+								</div>
+							</div>
+							<div className="mt-2">
+								<input
+									id="password"
+									name="password"
+									type="password"
+									autoComplete="current-password"
+									className="block w-full px-2 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+								/>
+							</div>
+						</div>
 
-      <Editor />
-    </main>
-  );
+						<div>
+							<button
+								type="submit"
+								className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+							>
+								Sign in
+							</button>
+						</div>
+					</form>
+
+					<p className="mt-10 text-center text-sm text-gray-500">
+						不是 Github 项目?{" "}
+						<a
+							href="#"
+							className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
+						>
+							使用其他方式
+						</a>
+					</p>
+				</div>
+			</div>
+		</div>
+	);
 }
diff --git a/assets/logo.png b/assets/logo.png