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