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

update: setup home page ui

Browse Source
This commit is contained in:
purp1e
2024-09-21 00:25:31 +08:00
parent 2898416add
commit f9a4427c2f
15 changed files with 240 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/(main)/home/page.tsx
View File

@@ -1,11 +1,29 @@
"use client";
import CommonDir from "@/components/cstb/CommonDir";
import FastLaunch from "@/components/cstb/FastLaunch";
import ForceQuit from "@/components/cstb/ForceQuit";
import LaunchOption from "@/components/cstb/LaunchOption";
import Notice from "@/components/cstb/Notice";
import PowerPlan from "@/components/cstb/PowerPlan";
import SmartTransfer from "@/components/cstb/SmartTranser";
const Home = () => {
return (
<section>
<Notice />
<section className="flex flex-col h-full gap-4">
<div className="flex flex-grow w-full gap-4">
<Notice />
<SmartTransfer />
</div>
<CommonDir />
<LaunchOption />
<div className="flex w-full gap-4">
<PowerPlan />
<ForceQuit />
<FastLaunch />
</div>
</section>
);
};

4
src/app/(main)/layout.tsx
View File

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

36
src/components/cstb/CommonDir.tsx
View File

@@ -1,5 +1,39 @@
import { FolderFocusOne } from "@icon-park/react";
import { Card, CardHeader, CardIcon, CardBody } from "../window/Card";
interface RoundedButtonProps {
children?: React.ReactNode;
}
const RoundedButton = ({ children }: RoundedButtonProps) => {
return (
<button className="flex items-center justify-center px-3 py-1 transition rounded-full min-w-fit active:scale-95 hover:bg-black/10 text-zinc-700 bg-black/5">
{children}
</button>
);
};
const CommonDir = () => {
return <div>CommonDir</div>;
return (
<Card>
<CardHeader>
<CardIcon>
<FolderFocusOne /> 常用目录
</CardIcon>
</CardHeader>
<CardBody>
<div className="flex gap-2.5">
<RoundedButton>Steam安装位置</RoundedButton>
<RoundedButton>CS2游戏目录</RoundedButton>
<RoundedButton>地图文件</RoundedButton>
<RoundedButton>游戏CFG目录</RoundedButton>
<RoundedButton>个人CFG目录</RoundedButton>
<RoundedButton>完美平台录像</RoundedButton>
<RoundedButton>5E平台录像</RoundedButton>
</div>
</CardBody>
</Card>
);
};
export default CommonDir;

23
src/components/cstb/FastLaunch.tsx
View File

@@ -1,5 +1,26 @@
import { TakeOff } from "@icon-park/react";
import { Card, CardHeader, CardIcon, CardBody } from "../window/Card";
const FastLaunch = () => {
return <div>FastLaunch</div>;
return (
<Card>
<CardHeader>
<CardIcon>
<TakeOff /> 快捷启动
</CardIcon>
</CardHeader>
<CardBody>
<div className="flex gap-2">
<button className="px-5 font-medium py-1.5 transition bg-red-200 rounded-full">
启动国服
</button>
<button className="px-5 font-medium py-1.5 transition bg-orange-200 rounded-full">
启动国际服
</button>
</div>
</CardBody>
</Card>
);
};
export default FastLaunch;

22
src/components/cstb/ForceQuit.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { Power, VolumeNotice } from "@icon-park/react";
import { Card, CardHeader, CardIcon, CardTool, CardBody } from "../window/Card";
const ForceQuit = () => {
return (
<Card>
<CardHeader>
<CardIcon>
<Power /> 强制退出
</CardIcon>
</CardHeader>
<CardBody>
<div className="flex gap-2">
<button className="px-5 font-medium py-1.5 transition bg-blue-200 rounded-full">关闭Steam</button>
<button className="px-5 font-medium py-1.5 transition bg-orange-200 rounded-full">关闭CS2</button>
</div>
</CardBody>
</Card>
);
};
export default ForceQuit;

40
src/components/cstb/LaunchOption.tsx
View File

@@ -1,5 +1,43 @@
import { Plus, SettingConfig, Switch } from "@icon-park/react";
import { Card, CardHeader, CardIcon, CardTool, CardBody } from "../window/Card";
import { useState } from "react";
import { ToolButton } from "../window/ToolButton";
const LaunchOption = () => {
return <div>LaunchOption</div>;
const [LaunchOption, setLaunchOption] = useState<string>(
"-high -refresh 120 -novid -nojoy -tickrate 128 +cl_cmdrate 128 +cl_updaterate 128 +exec auto.cfg +test"
);
return (
<Card>
<CardHeader>
<CardIcon>
<SettingConfig /> 启动选项
</CardIcon>
<CardTool>
<ToolButton>1</ToolButton>
<ToolButton>2</ToolButton>
<ToolButton>3</ToolButton>
<ToolButton>
<Plus />
添加
</ToolButton>
<ToolButton>
<Switch />
切换模式
</ToolButton>
</CardTool>
</CardHeader>
<CardBody>
<textarea
placeholder="请输入启动选项"
value={LaunchOption}
onChange={(e) => setLaunchOption(e.target.value)}
className="w-full font-mono text-base bg-transparent outline-none resize-none min-h-20"
/>
</CardBody>
</Card>
);
};
export default LaunchOption;

8
src/components/cstb/Notice.tsx
View File

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

27
src/components/cstb/PowerPlan.tsx
View File

@@ -1,5 +1,30 @@
import { BatteryCharge, Refresh } from "@icon-park/react";
import { Card, CardHeader, CardIcon, CardTool, CardBody } from "../window/Card";
import { ToolButton } from "../window/ToolButton";
const PowerPlan = () => {
return <div>PowerPlan</div>;
return (
<Card>
<CardHeader>
<CardIcon>
<BatteryCharge /> 电源计划
</CardIcon>
<CardTool>
<ToolButton>
<Refresh />
刷新
</ToolButton>
</CardTool>
</CardHeader>
<CardBody>
<div className="flex p-0.5 bg-black/5 gap-2 rounded-full">
<button className="flex-1 px-2 py-1 transition rounded-full bg-black/5">高性能</button>
<button className="flex-1 px-2 py-1 transition rounded-full">平衡</button>
<button className="flex-1 px-2 py-1 transition rounded-full">节能</button>
</div>
</CardBody>
</Card>
);
};
export default PowerPlan;

25
src/components/cstb/SmartTranser.tsx
View File

@@ -1,5 +1,28 @@
import { FolderConversion, FolderPlus } from "@icon-park/react";
import { Card, CardHeader, CardIcon, CardTool, CardBody } from "../window/Card";
import { ToolButton } from "../window/ToolButton";
const SmartTransfer = () => {
return <div>SmartTransfer</div>;
return (
<Card>
<CardHeader>
<CardIcon>
<FolderConversion /> 智能中转
</CardIcon>
<CardTool>
<ToolButton>
<FolderPlus /> 选择文件{" "}
</ToolButton>
</CardTool>
</CardHeader>
<CardBody>
<div className="flex flex-col items-center justify-center w-full h-full p-5 text-lg font-medium transition rounded-lg cursor-pointer bg-black/5 hover:bg-black/10">
<p>点击或拖拽</p>
<p>智能中转 .dem .cfg</p>
</div>
</CardBody>
</Card>
);
};
export default SmartTransfer;

7
src/components/window/Card.tsx
View File

@@ -1,13 +1,14 @@
import { ReactNode } from "react";
interface CardProps {
children: ReactNode;
children?: ReactNode;
className?: string;
}
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%]"
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 w-full rounded-lg bg-gradient-to-br from-white/90 to-white/80 border-black/[6%]"
data-tauri-drag-region
>
{children}
@@ -36,7 +37,7 @@ const CardTool = ({ children }: CardProps) => {
};
const CardBody = ({ children }: CardProps) => {
return <div className="text-sm tracking-wide text-zinc-800">{children}</div>;
return <div className="w-full h-full text-sm tracking-wide text-zinc-800">{children}</div>;
};
export { Card, CardHeader, CardIcon, CardTool, CardBody };

2
src/components/window/Header.tsx
View File

@@ -5,7 +5,7 @@ const Header = () => {
Faze.Rop紫本人
</h1>
<p className="text-sm font-light tracking-wide text-zinc-400 w-fit">
本周使用CSGO工具箱 62小时
本周使用CS工具箱 114 小时
</p>
</div>
);

8
src/components/window/ToolButton.tsx Normal file
View File

@@ -0,0 +1,8 @@
import { ReactNode } from "react";
interface ToolButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
children?: ReactNode;
}
export const ToolButton = ({ children, ...rest }: ToolButtonProps) => {
return <button className="flex gap-0.5 active:scale-95 items-center min-w-7 justify-center px-2 py-1.5 bg-black/5 transition hover:bg-black/10 rounded-md text-sm leading-none" {...rest}>{children}</button>;
};