From e5bf5685cfa6f1f4675bae3ccd5532d042392742 Mon Sep 17 00:00:00 2001
From: mozzie <himozzie@foxmail.com>
Date: Thu, 19 Sep 2024 16:08:16 +0800
Subject: [PATCH] =?UTF-8?q?ui:=20=E4=BF=AE=E6=94=B9stackviewport=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/desktop/src/pages/Viewer/index.css | 11 +++++++++++
 apps/desktop/src/pages/Viewer/index.tsx | 12 +++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 apps/desktop/src/pages/Viewer/index.css

diff --git a/apps/desktop/src/pages/Viewer/index.css b/apps/desktop/src/pages/Viewer/index.css
new file mode 100644
index 0000000..880401a
--- /dev/null
+++ b/apps/desktop/src/pages/Viewer/index.css
@@ -0,0 +1,11 @@
+.stack-slider {
+  >span:first-child{
+    height: 8px;
+    border-radius: 0;
+  }
+  [role="slider"] {
+    width: 16px;
+    height: 8px;
+    border-radius: 0;
+  }
+}
\ No newline at end of file
diff --git a/apps/desktop/src/pages/Viewer/index.tsx b/apps/desktop/src/pages/Viewer/index.tsx
index c54d3d0..36d86e8 100644
--- a/apps/desktop/src/pages/Viewer/index.tsx
+++ b/apps/desktop/src/pages/Viewer/index.tsx
@@ -34,6 +34,7 @@ import { stackViewportId } from "./StackViewer/index.config";
 import { ToolBarMenu } from "./ToolBarMenu";
 import { Model3DViewer } from "./ModelViewer";
 import useMultiResizeObserver from "./useMultiResizeObserver";
+import "./index.css";
 
 const {
   ToolGroupManager,
@@ -269,22 +270,23 @@ export const Viewer = () => {
                   <div className="w-full h-full flex flex-col relative">
                     <div ref={stackViewportRef} className="w-full flex-grow" />
                     {imageIds && (
-                      <div className="absolute w-1/2 left-1/2 transform -translate-x-1/2 bottom-4">
-                        <div>
-                          {index + 1}/{imageIds.length}
-                        </div>
+                      <div className="absolute left-0 right-0 top-0 text-end">
                         <Slider
                           value={[index]}
                           min={0}
                           max={imageIds.length - 1}
                           step={1}
+                          className="stack-slider"
                           onValueChange={onChangeIndex}
                         />
+                        <div className="text-xs">
+                          {index + 1}/{imageIds.length}
+                        </div>
                       </div>
                     )}
                   </div>
                 </ResizablePanel>
-                <ResizableHandle withHandle />
+                <ResizableHandle withHandle={false} />
                 <ResizablePanel defaultSize={50}>
                   <div className="w-full h-full">
                     <Model3DViewer />