From 7fb2511ba4ca14b67de4006a22ba9e91f934b5e5 Mon Sep 17 00:00:00 2001
From: mozzie <himozzie@foxmail.com>
Date: Mon, 2 Sep 2024 10:06:06 +0800
Subject: [PATCH] feat: menubar

---
 apps/desktop/package.json                   |  1 +
 apps/desktop/src/components/ui/progress.tsx | 28 +++++++++++++++++++++
 apps/desktop/src/pages/Datasource/index.tsx |  5 ++--
 apps/desktop/src/pages/Layout.tsx           | 18 ++++++-------
 pnpm-lock.yaml                              | 26 +++++++++++++++++++
 5 files changed, 65 insertions(+), 13 deletions(-)
 create mode 100644 apps/desktop/src/components/ui/progress.tsx

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index a671feb..34b3da8 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -19,6 +19,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-menubar": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
diff --git a/apps/desktop/src/components/ui/progress.tsx b/apps/desktop/src/components/ui/progress.tsx
new file mode 100644
index 0000000..4fc3b47
--- /dev/null
+++ b/apps/desktop/src/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/apps/desktop/src/pages/Datasource/index.tsx b/apps/desktop/src/pages/Datasource/index.tsx
index 1f8ffd5..efeeaa9 100644
--- a/apps/desktop/src/pages/Datasource/index.tsx
+++ b/apps/desktop/src/pages/Datasource/index.tsx
@@ -1,6 +1,8 @@
 import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
 import { useEffect, useState } from "react";
 
+
 interface ScanProgress {
   percentage: number;
 }
@@ -36,8 +38,7 @@ export const Datasource = () => {
         <Button onClick={() => window.ipcRenderer.send("scan-dicom")}>
           上传
         </Button>
-        <div>{progress?.percentage}</div>
-        <div>{JSON.stringify(result)}</div>
+        <Progress value={progress?.percentage} />
       </div>
     </div>
   );
diff --git a/apps/desktop/src/pages/Layout.tsx b/apps/desktop/src/pages/Layout.tsx
index f5e707f..b6650cd 100644
--- a/apps/desktop/src/pages/Layout.tsx
+++ b/apps/desktop/src/pages/Layout.tsx
@@ -1,26 +1,22 @@
 import { Toaster } from "@/components/ui/toaster";
 import { LeftDocker } from "./LeftDocker";
 import { Outlet } from "react-router-dom";
+import { MenuBar } from "./MenuBar";
 
 const LayoutMain = () => {
   const platform =
     document.querySelector("html")?.getAttribute("platform") ?? "macos";
   // const titleBarStyles =
   //   platform === "macos" ? "pl-[5rem] pr-[.5rem]" : "pl-[.5rem]";
-  const titleBarStyles = platform === "macos" ? "px-[.5rem]" : "pl-[.5rem]";
+  const titleBarStyles = platform === "macos" ? "pl-[80px]" : "pl-[.5rem]";
 
   return (
     <div className="h-full">
-      <div
-        className={`title-bar drag h-[36px] flex ${
-          platform === "macos" ? "justify-center" : ""
-        }`}
-      >
-        <div
-          className={`inline-flex no-drag items-center justify-between ${titleBarStyles}`}
-        >
-          <img src="logo.svg" className="h-[20px]" />
-          <span className="pl-2 text-xs">CVPilot Tool</span>
+      <div className={`title-bar drag h-[36px] flex`}>
+        <div className={`inline-flex no-drag items-center ${titleBarStyles}`}>
+          {platform !== "macos" && <img src="logo.svg" className="h-[20px]" />}
+          <MenuBar />
+          {/* <span className="pl-2 text-xs">CVPilot Tool</span> */}
         </div>
       </div>
       <div className="relative h-[calc(100%-36px)]">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 669fdd3..1de1e5e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,6 +34,9 @@ importers:
       '@radix-ui/react-menubar':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-progress':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-radio-group':
         specifier: ^1.2.0
         version: 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1044,6 +1047,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-progress@1.1.0':
+    resolution: {integrity: sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-radio-group@1.2.0':
     resolution: {integrity: sha512-yv+oiLaicYMBpqgfpSPw6q+RyXlLdIpQWDHZbUKURxe+nEh53hFXPPlfhfQQtYkS5MMK/5IWIa76SksleQZSzw==}
     peerDependencies:
@@ -4989,6 +5005,16 @@ snapshots:
       '@types/react': 18.3.4
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-progress@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.4
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-radio-group@1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0