update: setup home page ui

src-tauri/Cargo.lock

@@ -2,6 +2,27 @@
 # It is not intended for manual editing.
 version = 3
 
+[[package]]
+name = "CS工具箱"
+version = "0.0.1"
+dependencies = [
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-build",
+ "tauri-plugin-clipboard-manager",
+ "tauri-plugin-dialog",
+ "tauri-plugin-fs",
+ "tauri-plugin-global-shortcut",
+ "tauri-plugin-http",
+ "tauri-plugin-notification",
+ "tauri-plugin-os",
+ "tauri-plugin-process",
+ "tauri-plugin-shell",
+ "window-vibrancy",
+ "winreg",
+]
+
 [[package]]
 name = "addr2line"
 version = "0.22.0"
@@ -68,27 +89,6 @@ version = "1.0.89"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "86fdf8605db99b54d3cd748a44c6d04df638eb5dafb219b135d0149bd0db01f6"
 
-[[package]]
-name = "app"
-version = "0.1.0"
-dependencies = [
- "serde",
- "serde_json",
- "tauri",
- "tauri-build",
- "tauri-plugin-clipboard-manager",
- "tauri-plugin-dialog",
- "tauri-plugin-fs",
- "tauri-plugin-global-shortcut",
- "tauri-plugin-http",
- "tauri-plugin-notification",
- "tauri-plugin-os",
- "tauri-plugin-process",
- "tauri-plugin-shell",
- "window-vibrancy",
- "winreg",
-]
-
 [[package]]
 name = "arboard"
 version = "3.4.1"

src-tauri/Cargo.toml

@@ -1,11 +1,11 @@
 [package]
-name = "app"
+name = "CS工具箱"
-version = "0.1.0"
+version = "0.0.1"
 description = "A Tauri App"
-authors = ["you"]
+authors = ["Purp1e"]
 license = ""
 repository = ""
-default-run = "app"
+default-run = "CS工具箱"
 edition = "2021"
 rust-version = "1.66"
 

src-tauri/tauri.conf.json

@@ -50,11 +50,13 @@
       {
         "fullscreen": false,
         "resizable": true,
-        "title": "CS Toolbox",
+        "title": "CS工具箱",
-        "width": 976,
+        "width": 920,
         "height": 720,
-        "minWidth": 600,
+        "minWidth": 920,
-        "minHeight": 480,
+        "minHeight": 720,
+        "maxWidth": 1440,
+        "maxHeight": 960,
         "decorations": false,
         "transparent": true,
         "theme": "Light",

src/app/(main)/home/page.tsx

@@ -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>
+    <section className="flex flex-col h-full gap-4">
-      <Notice />
+      <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>
   );
 };

src/app/(main)/layout.tsx

@@ -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}

src/components/cstb/CommonDir.tsx

@@ -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;

src/components/cstb/FastLaunch.tsx

@@ -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;

src/components/cstb/ForceQuit.tsx

@@ -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;

src/components/cstb/LaunchOption.tsx

@@ -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;

src/components/cstb/Notice.tsx

@@ -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>

src/components/cstb/PowerPlan.tsx

@@ -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;

src/components/cstb/SmartTranser.tsx

@@ -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;

src/components/window/Card.tsx

@@ -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 };

src/components/window/Header.tsx

@@ -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>
   );

src/components/window/ToolButton.tsx

@@ -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>;
+};