fix(web): height calculate

2026-03-27 12:02:50 +08:00
parent 9ae1d2f0d9
commit 6f7fee18c9
64 changed files with 545 additions and 569 deletions
--- a/web/src/components/Empty/BodyWrapper.tsx
+++ b/web/src/components/Empty/BodyWrapper.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-02 15:02:47 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-02 15:47:24
+ * @Last Modified time: 2026-03-26 14:58:24
 */
 /**
 * BodyWrapper Component
--- a/web/src/components/Header/index.module.css
+++ b/web/src/components/Header/index.module.css
@@ -3,7 +3,6 @@
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 16px 20px;
-  height: 64px;
  color: #212332;
  z-index: 0;
  font-size: 14px;
--- a/web/src/components/Layout/AuthLayout.tsx
+++ b/web/src/components/Layout/AuthLayout.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-02 15:11:02 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-03 18:43:42
+ * @Last Modified time: 2026-03-26 15:01:02
 */
 /**
 * AuthLayout Component
@@ -54,14 +54,14 @@ const AuthLayout: FC = () => {
  }, []);

  return (
-    <Layout style={{ minHeight: '100vh' }}>
+    <Layout className="rb:min-h-screen!">
      {/* Sidebar navigation */}
      <Sider />
-      <Layout style={{maxHeight: '100vh', width: '100vh', overflowY: 'auto' }}>
+      <Layout className="rb:max-h-screen! rb:w-screen! rb:overflow-y-auto!">
        {/* Header with breadcrumbs and user menu */}
        <AppHeader />
        {/* Main content area - renders child routes */}
-        <Content style={{ padding: '0 12px 20px 12px', zIndex: 0 }}>
+        <Content className="rb:px-3! rb:pb-3! rb:z-0! rb:flex-1!">
          <Outlet />
        </Content> 
      </Layout>
--- a/web/src/components/Layout/AuthSpaceLayout.tsx
+++ b/web/src/components/Layout/AuthSpaceLayout.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-02 15:11:43 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-05 14:57:08
+ * @Last Modified time: 2026-03-26 15:00:54
 */
 /**
 * AuthSpaceLayout Component
@@ -56,14 +56,14 @@ const AuthSpaceLayout: FC = () => {
  }, []);

  return (
-    <Layout style={{ minHeight: '100vh' }}>
+    <Layout className="rb:min-h-screen!">
      {/* Sidebar navigation configured for space mode */}
      <Sider source="space" />
-      <Layout style={{maxHeight: '100vh', width: '100vh', overflowY: 'auto' }}>
+      <Layout className="rb:max-h-screen! rb:w-screen! rb:overflow-y-auto!">
        {/* Header with breadcrumbs and user menu configured for space mode */}
        <AppHeader source="space" />
        {/* Main content area for knowledge base pages - renders child routes */}
-        <Content style={{ padding: '0 12px 12px 12px', zIndex: 0, height: 'calc(100vh - 64px)', overflowY: 'auto' }}>
+        <Content className="rb:px-3! rb:pb-3! rb:z-0! rb:flex-1! rb:overflow-y-auto!">
          <Outlet />
        </Content> 
      </Layout>
--- a/web/src/components/Layout/BasicAuthLayout.tsx
+++ b/web/src/components/Layout/BasicAuthLayout.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-02 15:12:42 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-28 17:28:41
+ * @Last Modified time: 2026-03-26 15:36:25
 */
 /**
 * BasicAuthLayout Component
@@ -35,7 +35,7 @@ const BasicAuthLayout: FC = () => {
  }, [getUserInfo]);

  return (
-    <div className="rb:relative rb:h-full rb:w-full">
+    <div className="rb:relative rb:min-h-screen rb:w-screen">
      {/* Render child routes without additional UI */}
      <Outlet />
    </div>
--- a/web/src/components/Layout/PageHeader.tsx
+++ b/web/src/components/Layout/PageHeader.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-10 11:08:27 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-24 11:19:48
+ * @Last Modified time: 2026-03-26 15:38:31
 */
 /*
 * PageHeader Component
@@ -43,7 +43,7 @@ const PageHeader: FC<ConfigHeaderProps> = ({
 }) => {
  return (
    // Main header container: full width, 64px height, flex layout with space between
-    <Header className={`rb:w-full rb:h-16 rb:grid rb:grid-cols-${extra && centerContent ? '3' : ((extra && !centerContent) || (!extra && centerContent)) ? '2': 1} rb:gap-6 rb:px-4! rb:bg-white!`}>
+    <Header className={`rb:w-full rb:h-16! rb:grid rb:grid-cols-${extra && centerContent ? '3' : ((extra && !centerContent) || (!extra && centerContent)) ? '2': 1} rb:gap-6 rb:px-4! rb:bg-white!`}>
      <Flex align="center" gap={8}>
        {avatarUrl
          ? <img src={avatarUrl} alt={avatarUrl} className="rb:size-8 rb:rounded-lg rb:mr-2" />
@@ -58,7 +58,7 @@ const PageHeader: FC<ConfigHeaderProps> = ({
        {operation}
      </Flex>

-      {centerContent && <Flex align="center">
+      {centerContent && <Flex align="center" justify="center">
        {centerContent}
      </Flex>}
      {/* Right section: Extra content (buttons, filters, etc.) */}
--- a/web/src/components/PageScrollList/index.tsx
+++ b/web/src/components/PageScrollList/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-02 15:18:19 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-19 20:47:34
+ * @Last Modified time: 2026-03-26 14:43:33
 */
 /**
 * PageScrollList Component
@@ -56,9 +56,10 @@ interface PageScrollListProps<T, Q = Record<string, unknown>> {
  /** Additional CSS classes */
  className?: string;
  needLoading?: boolean;
+  heightClass?: string;
 }

-const heightClass = 'rb:h-[calc(100vh-124px)]!';
+const defaultHeightClass = 'rb:h-[calc(100vh-116px)]!';

 /** Infinite scroll list component with pagination support */
 const PageScrollList = forwardRef(<T, Q = Record<string, unknown>>({
@@ -68,6 +69,7 @@ const PageScrollList = forwardRef(<T, Q = Record<string, unknown>>({
  column = 4,
  className = '',
  needLoading = true,
+  heightClass,
 }: PageScrollListProps<T, Q>, ref: React.Ref<PageScrollListRef>) => {
  /** Expose refresh method to parent component */
  useImperativeHandle(ref, () => ({
@@ -140,13 +142,13 @@ const PageScrollList = forwardRef(<T, Q = Record<string, unknown>>({
      <div
        ref={scrollRef}
        id="scrollableDiv"
-        className={`rb:overflow-y-auto rb:overflow-x-hidden ${heightClass} ${className}`}
+        className={`rb:overflow-y-auto rb:overflow-x-hidden ${heightClass || defaultHeightClass} ${className}`}
      >
        <InfiniteScroll
          dataLength={data.length}
          next={() => loadMoreData()}
          hasMore={hasMore}
-          loader={loading && needLoading ? <PageLoading className={heightClass} /> : false}
+          loader={loading && needLoading ? <PageLoading className={heightClass || defaultHeightClass} /> : false}
          // endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
          scrollableTarget="scrollableDiv"
          className='rb:h-full!'
@@ -162,7 +164,7 @@ const PageScrollList = forwardRef(<T, Q = Record<string, unknown>>({
                </Col>
              ))}
            </Row>
-          ) : !loading ? <PageEmpty className={heightClass} /> : null}
+          ) : !loading ? <PageEmpty className={heightClass || defaultHeightClass} /> : null}
        </InfiniteScroll>
      </div>
    </>
--- a/web/src/components/Table/index.tsx
+++ b/web/src/components/Table/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-02 15:29:46 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-25 17:11:55
+ * @Last Modified time: 2026-03-26 14:52:23
 */
 /**
 * RbTable Component
@@ -199,7 +199,7 @@ const RbTable = forwardRef(<T = Record<string, unknown>, Q = Record<string, unkn
    if (scrollY !== undefined) {
      config.y = scrollY;
    } else if (isScroll) {
-      config.y = 'calc(100vh - 232px)';
+      config.y = 'calc(100vh - 224px)';
    }

    return Object.keys(config).length > 0 ? config : undefined;