fix: admin share ui (#7265)

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/src/components/common/fixed-width-table.js

@@ -0,0 +1,49 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+const FixedWidthTable = ({ className, headers, theadOptions = {}, children }) => {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const fixedWidth = useMemo(() => headers.reduce((pre, cur) => cur.isFixed ? cur.width + pre : pre, 0), [headers]);
+
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const handleResize = () => {
+      if (!container) return;
+      setContainerWidth(container.offsetWidth);
+    };
+    const resizeObserver = new ResizeObserver(handleResize);
+    container && resizeObserver.observe(container);
+
+    return () => {
+      container && resizeObserver.unobserve(container);
+    };
+  }, []);
+
+  return (
+    <table ref={containerRef} className={className}>
+      <thead { ...theadOptions }>
+        <tr>
+          {headers.map((header, index) => {
+            const { width, isFixed, children: thChildren, className } = header;
+            const validWidth = isFixed ? width : (containerWidth - fixedWidth) * width;
+            return (<th key={index} style={{ width: validWidth }} className={className}>{thChildren}</th>);
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {children}
+      </tbody>
+    </table>
+  );
+};
+
+FixedWidthTable.propTypes = {
+  className: PropTypes.string,
+  headers: PropTypes.array,
+  theadOptions: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
+};
+
+export default FixedWidthTable;