feat: yaml editor

2025-10-13 14:40:26 +08:00
parent e863b84016
commit 54703c67c1
48 changed files with 2062 additions and 246 deletions
@@ -0,0 +1,51 @@
+import useOverlayScroller from '@/hooks/use-overlay-scroller';
+import React from 'react';
+import './style.less';
+
+const ColumnWrapper: React.FC<any> = ({
+  children,
+  footer,
+  maxHeight,
+  paddingBottom = 50
+}) => {
+  const scroller = React.useRef<any>(null);
+  const { initialize } = useOverlayScroller({
+    options: {
+      scrollbars: {
+        autoHide: 'move'
+      }
+    }
+  });
+
+  React.useEffect(() => {
+    if (scroller.current) {
+      initialize(scroller.current);
+    }
+  }, []);
+
+  return (
+    <>
+      <div
+        className="column-wrapper-footer"
+        style={{ height: maxHeight || '100%' }}
+      >
+        <div
+          className="column-wrapper"
+          ref={scroller}
+          style={{ padding: '16px 24px' }}
+        >
+          <div
+            style={{
+              paddingBottom: footer ? paddingBottom : 0
+            }}
+          >
+            {children}
+          </div>
+        </div>
+        {footer && <div className="footer">{footer}</div>}
+      </div>
+    </>
+  );
+};
+
+export default ColumnWrapper;
@@ -0,0 +1,31 @@
+.column-wrapper {
+  flex: 1;
+  position: relative;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.simplebar-scrollbar::before {
+  width: var(--scrollbar-size);
+  background: var(--scrollbar-handle-bg);
+}
+
+.column-wrapper-footer {
+  flex: 1;
+  display: flex;
+  position: relative;
+
+  .column-wrapper {
+    border-left: none;
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    padding-block: 0;
+    background-color: var(--ant-color-bg-elevated);
+  }
+}