cstb/cstb-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

update: setup layouts and basic ui

Browse Source
This commit is contained in:
purp1e
2024-09-20 23:15:42 +08:00
parent d092be3370
commit 09707cd5f6
29 changed files with 433 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/(main)/console/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Page() {
return <div>Console</div>;
}

3
src/app/(main)/gear/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Page() {
return <div>Gear</div>;
}

13
src/app/(main)/home/page.tsx Normal file
View File

@@ -0,0 +1,13 @@
"use client";
import Notice from "@/components/cstb/Notice";
const Home = () => {
return (
<section>
<Notice />
</section>
);
};
export default Home;

25
src/app/(main)/layout.tsx Normal file
View File

@@ -0,0 +1,25 @@
import Header from "@/components/window/Header";
import Nav from "@/components/window/Nav";
import SideBar from "@/components/window/SideBar";
export default function BaseLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="bg-[#f1f0f2] h-screen w-full">
<Nav />
<div className="flex flex-col w-full h-full">
<SideBar />
<main className="pb-5 pr-5 ml-20">
<Header />
{children}
</main>
</div>
</div>
);
}

3
src/app/(main)/movie/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Page() {
return <div>Movie</div>;
}

3
src/app/(main)/preference/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Page() {
return <div>Preference</div>;
}

3
src/app/(main)/tool/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Page() {
return <div>Tool</div>;
}

0
src/pages/_app.tsx → src/app/_app.tsx
View File

2
src/styles/globals.css → src/app/globals.css
View File

@@ -6,6 +6,8 @@ html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background: transparent;

19
src/app/layout.tsx Normal file
View File

@@ -0,0 +1,19 @@
export const metadata = {
title: "CS工具箱",
description: "Generated by Next.js",
icons: ["/favicon.ico"],
};
import "./globals.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}

20
src/app/page.tsx Normal file
View File

@@ -0,0 +1,20 @@
"use client";
import { useRouter } from "next/navigation";
const Home = () => {
const router = useRouter();
return (
<main className="bg-[#f1f0f2] h-screen w-full flex flex-col gap-6 items-center justify-center">
<h1 className="text-4xl font-bold text-zinc-800">CS 工具箱</h1>
<button
onClick={() => router.push("/home")}
className="px-4 py-1 rounded bg-zinc-200"
>
进入
</button>
</main>
);
};
export default Home;

47
src/pages/index.tsx → src/app/test/page.tsx
View File

@@ -1,39 +1,30 @@
import { Card } from "@/components/Card"
import { CardButton } from "@/components/CardButton"
import { useGlobalShortcut } from "@/hooks/tauri/shortcuts"
import { invoke } from "@tauri-apps/api/core"
import type { NextPage } from "next"
import Head from "next/head"
import Image from "next/image"
import { useCallback, useState } from "react"
"use client"
import { CardButton } from "@/components/test/CardButton";
import { useGlobalShortcut } from "@/hooks/tauri/shortcuts";
import { invoke } from "@tauri-apps/api/core";
import { useCallback, useState } from "react";
const Home: NextPage = () => {
export default function Page() {
const [buttonDesc, setButtonDesc] = useState<string>(
"Waiting to be clicked. This calls 'on_button_clicked' from Rust.",
)
"Waiting to be clicked. This calls 'on_button_clicked' from Rust."
);
const onButtonClick = () => {
invoke<string>("on_button_clicked")
.then((value) => {
setButtonDesc(value)
setButtonDesc(value);
})
.catch(() => {
setButtonDesc("Failed to invoke Rust command 'on_button_clicked'")
})
}
setButtonDesc("Failed to invoke Rust command 'on_button_clicked'");
});
};
const shortcutHandler = useCallback(() => {
console.log("Ctrl+P was pressed!")
}, [])
useGlobalShortcut("CommandOrControl+P", shortcutHandler)
console.log("Ctrl+P was pressed!");
}, []);
useGlobalShortcut("CommandOrControl+P", shortcutHandler);
return (
<div className="flex flex-col ">
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="flex flex-col">
<main className="flex flex-col items-center justify-center flex-1 py-8">
<h1 className="m-0 text-6xl text-center">
Welcome to{" "}
@@ -62,10 +53,6 @@ const Home: NextPage = () => {
/>
</div>
</main>
</div>
)
);
}
export default Home

5
src/components/cstb/CommonDir.tsx Normal file
View File

@@ -0,0 +1,5 @@
const CommonDir = () => {
return <div>CommonDir</div>;
};
export default CommonDir;

5
src/components/cstb/FastLaunch.tsx Normal file
View File

@@ -0,0 +1,5 @@
const FastLaunch = () => {
return <div>FastLaunch</div>;
};
export default FastLaunch;

5
src/components/cstb/LaunchOption.tsx Normal file
View File

@@ -0,0 +1,5 @@
const LaunchOption = () => {
return <div>LaunchOption</div>;
};
export default LaunchOption;

26
src/components/cstb/Notice.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { VolumeNotice } from "@icon-park/react";
import {
CardHeader,
CardIcon,
CardTool,
CardBody,
Card,
} from "@/components/window/Card";
const Notice = () => {
return (
<Card>
<CardHeader>
<CardIcon>
<VolumeNotice /> 公告
</CardIcon>
<CardTool>
<p>2021年10月16日</p>
</CardTool>
</CardHeader>
<CardBody>不会真的有人要更新CSGO工具箱吧，不会吧不会吧 xswl</CardBody>
</Card>
);
};
export default Notice;

5
src/components/cstb/PowerPlan.tsx Normal file
View File

@@ -0,0 +1,5 @@
const PowerPlan = () => {
return <div>PowerPlan</div>;
};
export default PowerPlan;

5
src/components/cstb/SmartTranser.tsx Normal file
View File

@@ -0,0 +1,5 @@
const SmartTransfer = () => {
return <div>SmartTransfer</div>;
};
export default SmartTransfer;

2
src/components/Card.tsx → src/components/test/Card.tsx
View File

@@ -13,7 +13,7 @@ export const Card: React.FC<CardProps> = ({
href={url}
target="_blank"
rel="noopener noreferrer"
className="m-4 max-w-xs rounded-xl border border-gray-200 p-6 text-left text-inherit transition-colors hover:border-blue-600 hover:text-blue-600 focus:border-blue-600 focus:text-blue-600 active:border-blue-600 active:text-blue-600"
className="max-w-xs p-6 m-4 text-left transition-colors border border-gray-200 rounded-xl text-inherit hover:border-blue-600 hover:text-blue-600 focus:border-blue-600 focus:text-blue-600 active:border-blue-600 active:text-blue-600"
>
<h2 className="mb-4 text-2xl">{title} &rarr;</h2>
<p className="m-0 text-xl">{description}</p>

0
src/components/CardButton.tsx → src/components/test/CardButton.tsx
View File

42
src/components/window/Card.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { ReactNode } from "react";
interface CardProps {
children: ReactNode;
}
const Card = ({ children }: CardProps) => {
return (
<div
className="dark:from-black/10 dark:to-black/5 dark:border-white/[6%] px-4 pt-3 pb-4 flex flex-col gap-2 border rounded-lg bg-gradient-to-br from-white/90 to-white/80 border-black/[6%]"
data-tauri-drag-region
>
{children}
</div>
);
};
const CardHeader = ({ children }: CardProps) => {
return (
<div className="flex items-center gap-2.5 tracking-wide">{children}</div>
);
};
const CardIcon = ({ children }: CardProps) => {
return (
<div className="flex gap-1.5 items-center font-semibold">{children}</div>
);
};
const CardTool = ({ children }: CardProps) => {
return (
<div className="flex items-center justify-end flex-grow gap-2">
{children}
</div>
);
};
const CardBody = ({ children }: CardProps) => {
return <div className="text-sm tracking-wide text-zinc-800">{children}</div>;
};
export { Card, CardHeader, CardIcon, CardTool, CardBody };

14
src/components/window/Header.tsx Normal file
View File

@@ -0,0 +1,14 @@
const Header = () => {
return (
<div className="pt-6 select-none pb-9" data-tauri-drag-region>
<h1 className="text-xl font-medium tracking-wide w-fit">
Faze.Rop紫本人
</h1>
<p className="text-sm font-light tracking-wide text-zinc-400 w-fit">
本周使用CSGO工具箱 62小时
</p>
</div>
);
};
export default Header;

67
src/components/window/Nav.tsx Normal file
View File

@@ -0,0 +1,67 @@
"use client"
import { RocketOne, Minus, Close, Square } from "@icon-park/react";
import { relaunch, exit } from "@tauri-apps/plugin-process";
import { getCurrentWindow } from "@tauri-apps/api/window";
// import { invoke } from "@tauri-apps/api/core";
const Nav = () => {
const close = async () => {
// (await window.hideOnClose) ? getCurrent().hide() : exit();
await exit();
};
const minimize = () => {
getCurrentWindow()
.minimize()
.then(() => {
console.log("minimized");
})
.catch((err: unknown) => {
console.error(err);
});
};
const toggleMaximize = async () => {
const current = getCurrentWindow()
const maximized = await current.isMaximized()
maximized ? current.unmaximize() : current.maximize()
}
const reset = async () => {
await relaunch();
};
return (
<nav
className="absolute top-0 right-0 flex flex-row h-16 gap-0.5 p-4"
data-tauri-drag-region
>
<button
className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
onClick={reset}
>
<RocketOne size={16} />
</button>
<button
className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
onClick={minimize}
>
<Minus size={16} />
</button>
<button
className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
onClick={toggleMaximize}
>
<Square size={16} />
</button>
<button
className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
onClick={close}
>
<Close size={16} />
</button>
</nav>
);
};
export default Nav;

90
src/components/window/SideBar.tsx Normal file
View File

@@ -0,0 +1,90 @@
"use client"
import { ReactNode } from "react";
import clsx from "clsx";
import {
Home,
MonitorOne,
Movie,
Setting,
Terminal,
Toolkit,
} from "@icon-park/react";
import { useRouter } from "next/navigation";
interface SideButtonProps {
className?: string;
children?: ReactNode;
}
const SideButton = ({ className, children, ...rest }: SideButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
return (
<button
className={clsx(
className,
"p-2.5 hover:bg-black/5 rounded-lg transition"
)}
{...rest}
>
{children}
</button>
);
};
const Avatar = () => {
const router = useRouter();
return (
<div onClick={() => router.push('/test')} className="w-12 h-12 bg-gray-700 rounded-full cursor-pointer">
<img src="favicon.ico" alt="avatar" draggable={false} />
</div>
);
};
const SideBar = () => {
const router = useRouter();
return (
<div
className="absolute left-0 flex flex-col w-20 h-full select-none py-7"
data-tauri-drag-region
>
<section className="mx-auto">
<Avatar />
</section>
<section
className="flex flex-col items-center justify-center h-full gap-5"
data-tauri-drag-region
>
<SideButton onClick={() => router.push("/home")}>
<Home size={24} />
</SideButton>
<SideButton onClick={() => router.push("/tool")}>
<Toolkit size={24} />
</SideButton>
<SideButton onClick={() => router.push("/console")}>
<Terminal size={24} />
</SideButton>
<SideButton onClick={() => router.push("/gear")}>
<MonitorOne size={24} />
</SideButton>
<SideButton onClick={() => router.push("/movie")}>
<Movie size={24} />
</SideButton>
<SideButton onClick={() => router.push("/preference")}>
<Setting size={24} />
</SideButton>
</section>
<div
className="mx-auto text-sm text-center text-zinc-500"
data-tauri-drag-region
>
<p>版本号</p>
<p>0.0.1</p>
</div>
</div>
);
};
export default SideBar;