From 218ad6bbe0a91a97c32026f62651d173df89c0bb Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Fri, 18 Jul 2025 01:06:18 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20refactor(ui):=20scope=20table=20?=
 =?UTF-8?q?scrolling=20to=20console=20cards=20&=20refine=20overall=20layou?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary
Implement a dedicated, reusable scrolling mechanism for all console-table pages while keeping header and sidebar fixed, plus related layout improvements.

Key Changes
• Added `.table-scroll-card` utility class
 – Provides flex column layout and internal vertical scrolling
 – Desktop height: `calc(100vh - 110px)`; Mobile (<768 px) height: `calc(100vh - 77px)`
 – Hides scrollbars cross-browser (`-ms-overflow-style`, `scrollbar-width`, `::-webkit-scrollbar`)
• Replaced global `.semi-card` scrolling rules with `.table-scroll-card` to avoid affecting non-table cards
• Updated table components (Channels, Tokens, Users, Logs, MjLogs, TaskLogs, Redemptions) to use the new class
• PageLayout
 – Footer is now suppressed for all `/console` routes
 – Confirmed only central content area scrolls; header & sidebar remain fixed
• Restored hidden scrollbar rules for `.semi-layout-content` and removed unnecessary global overrides
• Minor CSS cleanup & comment improvements for readability

Result
Console table pages now fill the viewport with smooth, internal scrolling and no visible scrollbars, while other cards and pages remain unaffected.
---
 web/src/components/auth/LoginForm.js          |  2 +-
 .../components/auth/PasswordResetConfirm.js   |  2 +-
 web/src/components/auth/PasswordResetForm.js  |  2 +-
 web/src/components/auth/RegisterForm.js       |  2 +-
 web/src/components/layout/PageLayout.js       |  2 +-
 .../components/settings/PersonalSetting.js    |  2 +-
 web/src/components/table/ChannelsTable.js     |  2 +-
 web/src/components/table/LogsTable.js         |  2 +-
 web/src/components/table/MjLogsTable.js       |  2 +-
 web/src/components/table/RedemptionsTable.js  |  2 +-
 web/src/components/table/TaskLogsTable.js     |  2 +-
 web/src/components/table/TokensTable.js       |  2 +-
 web/src/components/table/UsersTable.js        |  2 +-
 web/src/index.css                             | 35 +++++++++++++++----
 web/src/pages/About/index.js                  |  2 +-
 web/src/pages/Channel/index.js                |  2 +-
 web/src/pages/Chat/index.js                   |  2 +-
 web/src/pages/Chat2Link/index.js              |  2 +-
 web/src/pages/Detail/index.js                 |  2 +-
 web/src/pages/Home/index.js                   |  2 +-
 web/src/pages/Log/index.js                    |  2 +-
 web/src/pages/Midjourney/index.js             |  2 +-
 web/src/pages/NotFound/index.js               |  2 +-
 web/src/pages/Playground/index.js             |  2 +-
 web/src/pages/Pricing/index.js                |  2 +-
 web/src/pages/Redemption/index.js             |  2 +-
 web/src/pages/Setting/index.js                |  2 +-
 web/src/pages/Setup/index.js                  |  2 +-
 web/src/pages/Task/index.js                   |  2 +-
 web/src/pages/Token/index.js                  |  2 +-
 web/src/pages/TopUp/index.js                  |  2 +-
 web/src/pages/User/index.js                   |  2 +-
 32 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/web/src/components/auth/LoginForm.js b/web/src/components/auth/LoginForm.js
index ae7fc0fc..16cece25 100644
--- a/web/src/components/auth/LoginForm.js
+++ b/web/src/components/auth/LoginForm.js
@@ -523,7 +523,7 @@ const LoginForm = () => {
       {/* 背景模糊晕染球 */}
       <div className="blur-ball blur-ball-indigo" style={{ top: '-80px', right: '-80px', transform: 'none' }} />
       <div className="blur-ball blur-ball-teal" style={{ top: '50%', left: '-120px' }} />
-      <div className="w-full max-w-sm mt-[64px]">
+      <div className="w-full max-w-sm mt-[60px]">
         {showEmailLogin || !(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth)
           ? renderEmailLoginForm()
           : renderOAuthOptions()}
diff --git a/web/src/components/auth/PasswordResetConfirm.js b/web/src/components/auth/PasswordResetConfirm.js
index 5fbd1fc5..9b454f76 100644
--- a/web/src/components/auth/PasswordResetConfirm.js
+++ b/web/src/components/auth/PasswordResetConfirm.js
@@ -82,7 +82,7 @@ const PasswordResetConfirm = () => {
       {/* 背景模糊晕染球 */}
       <div className="blur-ball blur-ball-indigo" style={{ top: '-80px', right: '-80px', transform: 'none' }} />
       <div className="blur-ball blur-ball-teal" style={{ top: '50%', left: '-120px' }} />
-      <div className="w-full max-w-sm mt-[64px]">
+      <div className="w-full max-w-sm mt-[60px]">
         <div className="flex flex-col items-center">
           <div className="w-full max-w-md">
             <div className="flex items-center justify-center mb-6 gap-2">
diff --git a/web/src/components/auth/PasswordResetForm.js b/web/src/components/auth/PasswordResetForm.js
index 033989e0..fcbd9189 100644
--- a/web/src/components/auth/PasswordResetForm.js
+++ b/web/src/components/auth/PasswordResetForm.js
@@ -82,7 +82,7 @@ const PasswordResetForm = () => {
       {/* 背景模糊晕染球 */}
       <div className="blur-ball blur-ball-indigo" style={{ top: '-80px', right: '-80px', transform: 'none' }} />
       <div className="blur-ball blur-ball-teal" style={{ top: '50%', left: '-120px' }} />
-      <div className="w-full max-w-sm mt-[64px]">
+      <div className="w-full max-w-sm mt-[60px]">
         <div className="flex flex-col items-center">
           <div className="w-full max-w-md">
             <div className="flex items-center justify-center mb-6 gap-2">
diff --git a/web/src/components/auth/RegisterForm.js b/web/src/components/auth/RegisterForm.js
index 9d213a60..6d8a9466 100644
--- a/web/src/components/auth/RegisterForm.js
+++ b/web/src/components/auth/RegisterForm.js
@@ -540,7 +540,7 @@ const RegisterForm = () => {
       {/* 背景模糊晕染球 */}
       <div className="blur-ball blur-ball-indigo" style={{ top: '-80px', right: '-80px', transform: 'none' }} />
       <div className="blur-ball blur-ball-teal" style={{ top: '50%', left: '-120px' }} />
-      <div className="w-full max-w-sm mt-[64px]">
+      <div className="w-full max-w-sm mt-[60px]">
         {showEmailRegister || !(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth)
           ? renderEmailRegisterForm()
           : renderOAuthOptions()}
diff --git a/web/src/components/layout/PageLayout.js b/web/src/components/layout/PageLayout.js
index 7ef42eb7..365df7da 100644
--- a/web/src/components/layout/PageLayout.js
+++ b/web/src/components/layout/PageLayout.js
@@ -23,7 +23,7 @@ const PageLayout = () => {
   const { i18n } = useTranslation();
   const location = useLocation();
 
-  const shouldHideFooter = location.pathname === '/console/playground' || location.pathname.startsWith('/console/chat');
+  const shouldHideFooter = location.pathname.startsWith('/console');
 
   const shouldInnerPadding = location.pathname.includes('/console') &&
     !location.pathname.startsWith('/console/chat') &&
diff --git a/web/src/components/settings/PersonalSetting.js b/web/src/components/settings/PersonalSetting.js
index 7e2b85fd..fda43d7d 100644
--- a/web/src/components/settings/PersonalSetting.js
+++ b/web/src/components/settings/PersonalSetting.js
@@ -379,7 +379,7 @@ const PersonalSetting = () => {
   };
 
   return (
-    <div className="bg-gray-50 mt-[64px]">
+    <div className="bg-gray-50 mt-[60px]">
       <div className="flex justify-center">
         <div className="w-full">
           {/* 主卡片容器 */}
diff --git a/web/src/components/table/ChannelsTable.js b/web/src/components/table/ChannelsTable.js
index fba5db79..d49f23de 100644
--- a/web/src/components/table/ChannelsTable.js
+++ b/web/src/components/table/ChannelsTable.js
@@ -1902,7 +1902,7 @@ const ChannelsTable = () => {
       />
 
       <Card
-        className="!rounded-2xl"
+        className="table-scroll-card !rounded-2xl"
         title={renderHeader()}
         shadows='always'
         bordered={false}
diff --git a/web/src/components/table/LogsTable.js b/web/src/components/table/LogsTable.js
index bff87675..a59b9128 100644
--- a/web/src/components/table/LogsTable.js
+++ b/web/src/components/table/LogsTable.js
@@ -1202,7 +1202,7 @@ const LogsTable = () => {
     <>
       {renderColumnSelector()}
       <Card
-        className='!rounded-2xl mb-4'
+        className='table-scroll-card !rounded-2xl mb-4'
         title={
           <div className='flex flex-col w-full'>
             <Spin spinning={loadingStat}>
diff --git a/web/src/components/table/MjLogsTable.js b/web/src/components/table/MjLogsTable.js
index 57e221d9..af7d1a1e 100644
--- a/web/src/components/table/MjLogsTable.js
+++ b/web/src/components/table/MjLogsTable.js
@@ -799,7 +799,7 @@ const LogsTable = () => {
       {renderColumnSelector()}
       <Layout>
         <Card
-          className="!rounded-2xl mb-4"
+          className="table-scroll-card !rounded-2xl mb-4"
           title={
             <div className="flex flex-col w-full">
               <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full">
diff --git a/web/src/components/table/RedemptionsTable.js b/web/src/components/table/RedemptionsTable.js
index b463294e..6e096b84 100644
--- a/web/src/components/table/RedemptionsTable.js
+++ b/web/src/components/table/RedemptionsTable.js
@@ -574,7 +574,7 @@ const RedemptionsTable = () => {
       ></EditRedemption>
 
       <Card
-        className="!rounded-2xl"
+        className="table-scroll-card !rounded-2xl"
         title={renderHeader()}
         shadows='always'
         bordered={false}
diff --git a/web/src/components/table/TaskLogsTable.js b/web/src/components/table/TaskLogsTable.js
index ba4dcd50..86e63b35 100644
--- a/web/src/components/table/TaskLogsTable.js
+++ b/web/src/components/table/TaskLogsTable.js
@@ -649,7 +649,7 @@ const LogsTable = () => {
       {renderColumnSelector()}
       <Layout>
         <Card
-          className="!rounded-2xl mb-4"
+          className="table-scroll-card !rounded-2xl mb-4"
           title={
             <div className="flex flex-col w-full">
               <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full">
diff --git a/web/src/components/table/TokensTable.js b/web/src/components/table/TokensTable.js
index ac7fca92..09e180b1 100644
--- a/web/src/components/table/TokensTable.js
+++ b/web/src/components/table/TokensTable.js
@@ -872,7 +872,7 @@ const TokensTable = () => {
       ></EditToken>
 
       <Card
-        className="!rounded-2xl"
+        className="table-scroll-card !rounded-2xl"
         title={renderHeader()}
         shadows='always'
         bordered={false}
diff --git a/web/src/components/table/UsersTable.js b/web/src/components/table/UsersTable.js
index 193e1d65..c85395f0 100644
--- a/web/src/components/table/UsersTable.js
+++ b/web/src/components/table/UsersTable.js
@@ -639,7 +639,7 @@ const UsersTable = () => {
       ></EditUser>
 
       <Card
-        className="!rounded-2xl"
+        className="table-scroll-card !rounded-2xl"
         title={renderHeader()}
         shadows='always'
         bordered={false}
diff --git a/web/src/index.css b/web/src/index.css
index 791b853e..742ec5ca 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -14,22 +14,16 @@
 }
 
 /* ==================== 全局基础样式 ==================== */
-/* 侧边栏宽度相关的 CSS 变量，配合 .sidebar-collapsed 类和媒体查询实现响应式布局 */
 :root {
   --sidebar-width: 180px;
-  /* 展开时宽度 */
-  --sidebar-width-collapsed: 60px;  /* 折叠后宽度，显示图标栏 */
-  /* 折叠后宽度 */
+  --sidebar-width-collapsed: 60px;
   --sidebar-current-width: var(--sidebar-width);
 }
 
-/* 当 body 上存在 .sidebar-collapsed 类时，使用折叠宽度 */
 body.sidebar-collapsed {
   --sidebar-current-width: var(--sidebar-width-collapsed);
 }
 
-/* 移除了在移动端强制设为 0 的限制，改由 React 控制是否渲染侧边栏以实现显示/隐藏 */
-
 body {
   font-family: Lato, 'Helvetica Neue', Arial, Helvetica, 'Microsoft YaHei', sans-serif;
   color: var(--semi-color-text-0);
@@ -615,4 +609,31 @@ html:not(.dark) .blur-ball-indigo {
 
 html:not(.dark) .blur-ball-teal {
   opacity: 0.2;
+}
+
+/* ==================== 表格卡片滚动设置 ==================== */
+.table-scroll-card {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 110px);
+  max-height: calc(100vh - 110px);
+}
+
+.table-scroll-card .semi-card-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.table-scroll-card .semi-card-body::-webkit-scrollbar {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .table-scroll-card {
+    height: calc(100vh - 77px);
+    max-height: calc(100vh - 77px);
+  }
 }
\ No newline at end of file
diff --git a/web/src/pages/About/index.js b/web/src/pages/About/index.js
index 5ca96d97..ca9578ad 100644
--- a/web/src/pages/About/index.js
+++ b/web/src/pages/About/index.js
@@ -105,7 +105,7 @@ const About = () => {
   );
 
   return (
-    <div className="mt-[64px] px-2">
+    <div className="mt-[60px] px-2">
       {aboutLoaded && about === '' ? (
         <div className="flex justify-center items-center h-screen p-8">
           <Empty
diff --git a/web/src/pages/Channel/index.js b/web/src/pages/Channel/index.js
index d8425bd3..b041334a 100644
--- a/web/src/pages/Channel/index.js
+++ b/web/src/pages/Channel/index.js
@@ -3,7 +3,7 @@ import ChannelsTable from '../../components/table/ChannelsTable';
 
 const File = () => {
   return (
-    <div className="mt-[64px] px-2">
+    <div className="mt-[60px] px-2">
       <ChannelsTable />
     </div>
   );
diff --git a/web/src/pages/Chat/index.js b/web/src/pages/Chat/index.js
index 4b354752..52e91526 100644
--- a/web/src/pages/Chat/index.js
+++ b/web/src/pages/Chat/index.js
@@ -42,7 +42,7 @@ const ChatPage = () => {
       allow='camera;microphone'
     />
   ) : (
-    <div className="fixed inset-0 w-screen h-screen flex items-center justify-center bg-white/80 z-[1000] mt-[64px]">
+    <div className="fixed inset-0 w-screen h-screen flex items-center justify-center bg-white/80 z-[1000] mt-[60px]">
       <div className="flex flex-col items-center">
         <Spin
           size="large"
diff --git a/web/src/pages/Chat2Link/index.js b/web/src/pages/Chat2Link/index.js
index 30ec785a..f46bbd50 100644
--- a/web/src/pages/Chat2Link/index.js
+++ b/web/src/pages/Chat2Link/index.js
@@ -17,7 +17,7 @@ const chat2page = () => {
   }
 
   return (
-    <div className="mt-[64px] px-2">
+    <div className="mt-[60px] px-2">
       <h3>正在加载，请稍候...</h3>
     </div>
   );
diff --git a/web/src/pages/Detail/index.js b/web/src/pages/Detail/index.js
index b5553cbf..704093bb 100644
--- a/web/src/pages/Detail/index.js
+++ b/web/src/pages/Detail/index.js
@@ -1120,7 +1120,7 @@ const Detail = (props) => {
   }, []);
 
   return (
-    <div className="bg-gray-50 h-full mt-[64px] px-2">
+    <div className="bg-gray-50 h-full mt-[60px] px-2">
       <div className="flex items-center justify-between mb-4">
         <h2
           className="text-2xl font-semibold text-gray-800 transition-opacity duration-1000 ease-in-out"
diff --git a/web/src/pages/Home/index.js b/web/src/pages/Home/index.js
index 0cf8dea1..582410d4 100644
--- a/web/src/pages/Home/index.js
+++ b/web/src/pages/Home/index.js
@@ -274,7 +274,7 @@ const Home = () => {
               className="w-full h-screen border-none"
             />
           ) : (
-            <div className="mt-[64px]" dangerouslySetInnerHTML={{ __html: homePageContent }} />
+            <div className="mt-[60px]" dangerouslySetInnerHTML={{ __html: homePageContent }} />
           )}
         </div>
       )}
diff --git a/web/src/pages/Log/index.js b/web/src/pages/Log/index.js
index 74c570bb..fa919964 100644
--- a/web/src/pages/Log/index.js
+++ b/web/src/pages/Log/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import LogsTable from '../../components/table/LogsTable';
 
 const Token = () => (
-  <div className="mt-[64px] px-2">
+  <div className="mt-[60px] px-2">
     <LogsTable />
   </div>
 );
diff --git a/web/src/pages/Midjourney/index.js b/web/src/pages/Midjourney/index.js
index 71d4c3a8..67d9f76c 100644
--- a/web/src/pages/Midjourney/index.js
+++ b/web/src/pages/Midjourney/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import MjLogsTable from '../../components/table/MjLogsTable';
 
 const Midjourney = () => (
-  <div className="mt-[64px] px-2">
+  <div className="mt-[60px] px-2">
     <MjLogsTable />
   </div>
 );
diff --git a/web/src/pages/NotFound/index.js b/web/src/pages/NotFound/index.js
index c64b5a40..c6c9e96c 100644
--- a/web/src/pages/NotFound/index.js
+++ b/web/src/pages/NotFound/index.js
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 const NotFound = () => {
   const { t } = useTranslation();
   return (
-    <div className="flex justify-center items-center h-screen p-8 mt-[64px]">
+    <div className="flex justify-center items-center h-screen p-8 mt-[60px]">
       <Empty
         image={<IllustrationNotFound style={{ width: 250, height: 250 }} />}
         darkModeImage={<IllustrationNotFoundDark style={{ width: 250, height: 250 }} />}
diff --git a/web/src/pages/Playground/index.js b/web/src/pages/Playground/index.js
index 9a41bc18..345959a1 100644
--- a/web/src/pages/Playground/index.js
+++ b/web/src/pages/Playground/index.js
@@ -352,7 +352,7 @@ const Playground = () => {
   }, [setMessage, saveMessagesImmediately]);
 
   return (
-    <div className="h-full bg-gray-50 mt-[64px]">
+    <div className="h-full bg-gray-50 mt-[60px]">
       <Layout style={{ height: '100%', background: 'transparent' }} className="flex flex-col md:flex-row">
         {(showSettings || !isMobile) && (
           <Layout.Sider
diff --git a/web/src/pages/Pricing/index.js b/web/src/pages/Pricing/index.js
index b4183534..eaaf640d 100644
--- a/web/src/pages/Pricing/index.js
+++ b/web/src/pages/Pricing/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ModelPricing from '../../components/table/ModelPricing.js';
 
 const Pricing = () => (
-  <div className="mt-[64px] px-2">
+  <div className="mt-[60px] px-2">
     <ModelPricing />
   </div>
 );
diff --git a/web/src/pages/Redemption/index.js b/web/src/pages/Redemption/index.js
index b55f8fdc..44bb1c87 100644
--- a/web/src/pages/Redemption/index.js
+++ b/web/src/pages/Redemption/index.js
@@ -3,7 +3,7 @@ import RedemptionsTable from '../../components/table/RedemptionsTable';
 
 const Redemption = () => {
   return (
-    <div className="mt-[64px] px-2">
+    <div className="mt-[60px] px-2">
       <RedemptionsTable />
     </div>
   );
diff --git a/web/src/pages/Setting/index.js b/web/src/pages/Setting/index.js
index 43907826..a74e9b97 100644
--- a/web/src/pages/Setting/index.js
+++ b/web/src/pages/Setting/index.js
@@ -150,7 +150,7 @@ const Setting = () => {
     }
   }, [location.search]);
   return (
-    <div className="mt-[64px] px-2">
+    <div className="mt-[60px] px-2">
       <Layout>
         <Layout.Content>
           <Tabs
diff --git a/web/src/pages/Setup/index.js b/web/src/pages/Setup/index.js
index c0cf4aaf..bca92506 100644
--- a/web/src/pages/Setup/index.js
+++ b/web/src/pages/Setup/index.js
@@ -133,7 +133,7 @@ const Setup = () => {
   };
 
   return (
-    <div className="bg-gray-50 mt-[64px]">
+    <div className="bg-gray-50 mt-[60px]">
       <Layout>
         <Layout.Content>
           <div className="flex justify-center px-4 py-8">
diff --git a/web/src/pages/Task/index.js b/web/src/pages/Task/index.js
index 4e3a9af4..261bd7da 100644
--- a/web/src/pages/Task/index.js
+++ b/web/src/pages/Task/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import TaskLogsTable from '../../components/table/TaskLogsTable.js';
 
 const Task = () => (
-  <div className="mt-[64px] px-2">
+  <div className="mt-[60px] px-2">
     <TaskLogsTable />
   </div>
 );
diff --git a/web/src/pages/Token/index.js b/web/src/pages/Token/index.js
index 33921eb6..5f825741 100644
--- a/web/src/pages/Token/index.js
+++ b/web/src/pages/Token/index.js
@@ -3,7 +3,7 @@ import TokensTable from '../../components/table/TokensTable';
 
 const Token = () => {
   return (
-    <div className="mt-[64px] px-2">
+    <div className="mt-[60px] px-2">
       <TokensTable />
     </div>
   );
diff --git a/web/src/pages/TopUp/index.js b/web/src/pages/TopUp/index.js
index dc986077..6fb57fe3 100644
--- a/web/src/pages/TopUp/index.js
+++ b/web/src/pages/TopUp/index.js
@@ -382,7 +382,7 @@ const TopUp = () => {
   };
 
   return (
-    <div className='mx-auto relative min-h-screen lg:min-h-0 mt-[64px]'>
+    <div className='mx-auto relative min-h-screen lg:min-h-0 mt-[60px]'>
       {/* 划转模态框 */}
       <Modal
         title={
diff --git a/web/src/pages/User/index.js b/web/src/pages/User/index.js
index dfe7de81..12b6f4ee 100644
--- a/web/src/pages/User/index.js
+++ b/web/src/pages/User/index.js
@@ -3,7 +3,7 @@ import UsersTable from '../../components/table/UsersTable';
 
 const User = () => {
   return (
-    <div className="mt-[64px] px-2">
+    <div className="mt-[60px] px-2">
       <UsersTable />
     </div>
   );