feat: add cluster detail page

src/components/scroller-modal/gs-drawer.tsx

@@ -1,15 +1,40 @@
 import { useEscHint } from '@/hooks/use-esc-hint';
-import { Drawer, type DrawerProps } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import { Button, Drawer, type DrawerProps } from 'antd';
 
 const ScrollerModal = (props: DrawerProps) => {
+  const { title, closable = true, ...restProps } = props;
   const { EscHint } = useEscHint({
     enabled: !props.keyboard && props.open
   });
-
+  const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
+    props.onClose?.(e);
+  };
   return (
     <>
-      <Drawer {...props}>
-        {props.children}
+      <Drawer
+        {...restProps}
+        closable={false}
+        title={
+          <div className="flex-between flex-center">
+            <span
+              style={{
+                color: 'var(--ant-color-text)',
+                fontWeight: 'var(--font-weight-medium)',
+                fontSize: 'var(--font-size-middle)'
+              }}
+            >
+              {title}
+            </span>
+            {closable && (
+              <Button type="text" size="small" onClick={handleCancel}>
+                <CloseOutlined></CloseOutlined>
+              </Button>
+            )}
+          </div>
+        }
+      >
+        {restProps.children}
         {EscHint}
       </Drawer>
     </>