🎨 refactor(ui): scope table scrolling to console cards & refine overall layout

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/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

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>
   );

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"

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>
   );

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"

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>
       )}

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>
 );

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>
 );

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 }} />}

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

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>
 );

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>
   );

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

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">

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>
 );

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>
   );

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={

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>
   );