ui: 修改stackviewport滚动条样式

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

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 className="absolute left-0 right-0 top-0 text-end">
-                        <div>
-                          {index + 1}/{imageIds.length}
-                        </div>
                         <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 />