统一控制台页面布局：替换 mt-[60px] px-2 为统一 min-h-full pb-16 pt-20 + max-w-[1400px] 居中容器

涉及页面：Channel、Token、Redemption、Log、Task、Midjourney、Model、ModelHeat、ModelDeployment、Subscription、User、Setting、Supplier Dashboard/Apply/Channel/PricingSettings、SupplierAdmin list/application、About、DistributorAdmin/Center/Apply、DeploymentAccessGuard、PersonalSetting、Dashboard 等全部控制台页面

web/src/components/model-deployments/DeploymentAccessGuard.jsx

@@ -43,22 +43,25 @@ const DeploymentAccessGuard = ({
 
   if (loading) {
     return (
-      <div className='mt-[60px] px-2'>
+      <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+        <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <Card loading={true} style={{ minHeight: '400px' }}>
           <div style={{ textAlign: 'center', padding: '50px 0' }}>
             <Text type='secondary'>{t('加载设置中...')}</Text>
           </div>
         </Card>
         </div>
+      </div>
     );
   }
 
   if (!isEnabled) {
     return (
+      <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+        <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <div
-        className='mt-[60px] px-4'
           style={{
-          minHeight: 'calc(100vh - 60px)',
+            minHeight: 'calc(100vh - 160px)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -277,18 +280,22 @@ const DeploymentAccessGuard = ({
           </Card>
         </div>
         </div>
+        </div>
+      </div>
     );
   }
 
   if (connectionLoading || (connectionOk === null && !connectionError)) {
     return (
-      <div className='mt-[60px] px-2'>
+      <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+        <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <Card loading={true} style={{ minHeight: '400px' }}>
           <div style={{ textAlign: 'center', padding: '50px 0' }}>
             <Text type='secondary'>{t('正在检查 io.net 连接...')}</Text>
           </div>
         </Card>
         </div>
+      </div>
     );
   }
 
@@ -301,10 +308,11 @@ const DeploymentAccessGuard = ({
     const detail = connectionError?.message || '';
 
     return (
+      <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+        <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <div
-        className='mt-[60px] px-4'
           style={{
-          minHeight: 'calc(100vh - 60px)',
+            minHeight: 'calc(100vh - 160px)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -403,6 +411,8 @@ const DeploymentAccessGuard = ({
           </Card>
         </div>
         </div>
+        </div>
+      </div>
     );
   }
 

web/src/components/settings/PersonalSetting.jsx

@@ -555,7 +555,8 @@ const PersonalSetting = () => {
 
 
   return (
-    <div className='mx-auto mt-[60px] max-w-[1400px] px-4 pb-16 sm:px-6 lg:px-10'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
       {/* 顶部用户信息区域 */}
       <UserInfoHeader t={t} userState={userState} />
 
@@ -677,6 +678,7 @@ const PersonalSetting = () => {
         setTurnstileToken={setTurnstileToken}
       />
       </div>
+    </div>
   );
 };
 

web/src/index.css

@@ -1187,7 +1187,7 @@ html.dark .home-distributor-cta-btn {
 .distributor-apply-page-root {
   position: fixed;
   z-index: 1;
-  top: 64px;
+  top: 80px;
   right: 0;
   bottom: 0;
   left: 0;

web/src/pages/About/index.jsx

@@ -133,7 +133,8 @@ const About = () => {
   );
 
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
       {aboutLoaded && about === '' ? (
         <div className='flex justify-center items-center h-screen p-8'>
           <Empty
@@ -167,6 +168,7 @@ const About = () => {
         </>
       )}
       </div>
+    </div>
   );
 };
 

web/src/pages/Channel/index.jsx

@@ -38,9 +38,11 @@ const File = () => {
   }, [editId]);
 
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <ChannelsTable />
       </div>
+    </div>
   );
 };
 

web/src/pages/Dashboard/index.jsx

@@ -22,7 +22,7 @@ import Dashboard from '../../components/dashboard';
 
 const Detail = () => (
   <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
-    <div className='w-full max-w-[1400px] px-4 sm:px-6 lg:px-10 ml-4 lg:ml-10'>
+    <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
       <Dashboard />
     </div>
   </div>

web/src/pages/DistributorAdmin.jsx

@@ -1128,7 +1128,8 @@ export default function DistributorAdmin() {
   );
 
   return (
-    <div className='mt-[60px] px-2 pb-16'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
       <Typography.Title heading={3}>{t('代理管理中心')}</Typography.Title>
 
       <Tabs
@@ -1976,5 +1977,6 @@ export default function DistributorAdmin() {
         />
       </Modal>
       </div>
+    </div>
   );
 }

web/src/pages/DistributorApply.jsx

@@ -268,7 +268,7 @@ export default function DistributorApply() {
 
   if (isDist) {
     return (
-      <div className='distributor-apply-page-root'>
+      <div className='distributor-apply-page-root text-slate-900 dark:text-white'>
         <div className='w-full max-w-3xl px-1'>
           <ApplyStatusNotice variant='success' className='w-full'>
             {t('您已是代理，无需再次申请')}

web/src/pages/DistributorCenter.jsx

@@ -668,7 +668,8 @@ export default function DistributorCenter() {
   }
 
   return (
-    <div className='mt-14 px-4 pb-16 max-w-7xl mx-auto'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
       <Title heading={3} className='mb-8'>
         {t('代理分销')}
       </Title>
@@ -1197,5 +1198,6 @@ export default function DistributorCenter() {
         ) : null}
       </Modal>
       </div>
+    </div>
   );
 }

web/src/pages/Log/index.jsx

@@ -21,9 +21,11 @@ import React from 'react';
 import UsageLogsTable from '../../components/table/usage-logs';
 
 const Token = () => (
-  <div className='mt-[60px] px-2'>
+  <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+    <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
       <UsageLogsTable />
     </div>
+  </div>
 );
 
 export default Token;

web/src/pages/Midjourney/index.jsx

@@ -21,9 +21,11 @@ import React from 'react';
 import MjLogsTable from '../../components/table/mj-logs';
 
 const Midjourney = () => (
-  <div className='mt-[60px] px-2'>
+  <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+    <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
       <MjLogsTable />
     </div>
+  </div>
 );
 
 export default Midjourney;

web/src/pages/Model/index.jsx

@@ -36,9 +36,11 @@ const ModelPage = () => {
   }, [editId, modelName]);
 
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <ModelsTable />
       </div>
+    </div>
   );
 };
 

web/src/pages/ModelDeployment/index.jsx

@@ -41,9 +41,11 @@ const ModelDeploymentPage = () => {
       connectionError={connectionError}
       onRetry={() => testConnection()}
     >
-      <div className='mt-[60px] px-2'>
+      <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+        <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
           <DeploymentsTable />
         </div>
+      </div>
     </DeploymentAccessGuard>
   );
 };

web/src/pages/ModelHeat/index.jsx

@@ -22,9 +22,11 @@ import CombinedHeatConfig from './CombinedHeatConfig';
 
 const ModelHeat = () => {
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <CombinedHeatConfig />
       </div>
+    </div>
   );
 };
 

web/src/pages/Redemption/index.jsx

@@ -22,9 +22,11 @@ import RedemptionsTable from '../../components/table/redemptions';
 
 const Redemption = () => {
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <RedemptionsTable />
       </div>
+    </div>
   );
 };
 

web/src/pages/Setting/index.jsx

@@ -217,7 +217,8 @@ const Setting = () => {
     }
   }, [location.search]);
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
       <Layout>
         <Layout.Content>
           <Tabs
@@ -235,6 +236,7 @@ const Setting = () => {
         </Layout.Content>
       </Layout>
       </div>
+    </div>
   );
 };
 

web/src/pages/Subscription/index.jsx

@@ -22,9 +22,11 @@ import SubscriptionsPage from '../../components/table/subscriptions';
 
 const Subscription = () => {
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <SubscriptionsPage />
       </div>
+    </div>
   );
 };
 

web/src/pages/Supplier/Apply/index.jsx

@@ -112,8 +112,8 @@ const SupplierApplyPage = () => {
   if (loading) {
     return (
       <div
-        className='mt-[60px] px-2 flex items-center justify-center'
+        className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white flex items-center justify-center'
-        style={{ minHeight: 'calc(100vh - 360px)' }}
+        style={{ minHeight: 'calc(100vh - 200px)' }}
       >
         <Spin size='large' />
       </div>
@@ -121,7 +121,8 @@ const SupplierApplyPage = () => {
   }
 
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
       <SupplierApplicationModal
         visible={showApplicationModal}
         handleClose={handleModalClose}
@@ -221,6 +222,7 @@ const SupplierApplyPage = () => {
         </div>
       )}
       </div>
+    </div>
   );
 };
 

web/src/pages/Supplier/Channel/index.jsx

@@ -48,7 +48,8 @@ const SupplierChannelContent = () => {
   const { t } = useTranslation();
 
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
       {/* Modals */}
       <ColumnSelectorModal {...channelsData} />
       <EditTagModal
@@ -117,6 +118,7 @@ const SupplierChannelContent = () => {
         <ChannelsTable {...channelsData} />
       </CardPro>
       </div>
+    </div>
   );
 };
 
@@ -126,7 +128,8 @@ const SupplierChannelPage = () => {
 
   if (!isSupplier()) {
     return (
-      <div className='mt-[60px] px-2'>
+      <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <div
           className='flex items-center justify-center'
           style={{ minHeight: 'calc(100vh - 360px)' }}
@@ -153,6 +156,7 @@ const SupplierChannelPage = () => {
           </Empty>
         </div>
       </div>
+      </div>
     );
   }
 

web/src/pages/Supplier/Dashboard/index.jsx

@@ -282,7 +282,8 @@ export default function SupplierDashboardPage() {
 
   if (!canAccess) {
     return (
-      <div className='mt-[60px] px-2'>
+      <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+        <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <div
           className='flex items-center justify-center'
           style={{ minHeight: 'calc(100vh - 360px)' }}
@@ -308,11 +309,13 @@ export default function SupplierDashboardPage() {
           </Empty>
         </div>
         </div>
+      </div>
     );
   }
 
   return (
-    <div className='mt-[60px] w-full max-w-[1600px] mx-auto px-3 sm:px-4 lg:px-6 pb-6'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
       <Spin spinning={loading} size='large'>
         <div className='flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between mb-3'>
           <div className='flex items-center gap-2 min-w-0'>
@@ -451,5 +454,6 @@ export default function SupplierDashboardPage() {
         </Card>
       </Spin>
       </div>
+    </div>
   );
 }

web/src/pages/Supplier/PricingSettings/index.jsx

@@ -157,7 +157,8 @@ const SupplierPricingSettingsContent = () => {
   }, []);
 
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
       <Spin spinning={loading} size='large'>
         <Card style={{ marginTop: '10px' }}>
           <Tabs type='card' defaultActiveKey='visual'>
@@ -178,6 +179,7 @@ const SupplierPricingSettingsContent = () => {
         </Card>
       </Spin>
       </div>
+    </div>
   );
 };
 
@@ -190,7 +192,8 @@ const PricingSettingsPage = () => {
 
   if (!isSupplier()) {
     return (
-      <div className='mt-[60px] px-2'>
+      <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <div
           className='flex items-center justify-center'
           style={{ minHeight: 'calc(100vh - 360px)' }}
@@ -217,6 +220,7 @@ const PricingSettingsPage = () => {
           </Empty>
         </div>
       </div>
+      </div>
     );
   }
 

web/src/pages/SupplierAdmin/application/index.jsx

@@ -22,9 +22,11 @@ import SupplierApplicationsPage from '../../../components/table/supplier-applica
 
 const SupplierApplication = () => {
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <SupplierApplicationsPage />
       </div>
+    </div>
   );
 };
 

web/src/pages/SupplierAdmin/list/index.jsx

@@ -22,9 +22,11 @@ import SuppliersPage from '../../../components/table/suppliers';
 
 const Suppliers = () => {
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <SuppliersPage />
       </div>
+    </div>
   );
 };
 

web/src/pages/Task/index.jsx

@@ -21,9 +21,11 @@ import React from 'react';
 import TaskLogsTable from '../../components/table/task-logs';
 
 const Task = () => (
-  <div className='mt-[60px] px-2'>
+  <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+    <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
       <TaskLogsTable />
     </div>
+  </div>
 );
 
 export default Task;

web/src/pages/Token/index.jsx

@@ -22,9 +22,11 @@ import TokensTable from '../../components/table/tokens';
 
 const Token = () => {
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <TokensTable />
       </div>
+    </div>
   );
 };
 

web/src/pages/User/index.jsx

@@ -22,9 +22,11 @@ import UsersTable from '../../components/table/users';
 
 const User = () => {
   return (
-    <div className='mt-[60px] px-2'>
+    <div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'>
+      <div className='mx-auto w-full max-w-[1400px] px-4 sm:px-6 lg:px-10'>
         <UsersTable />
       </div>
+    </div>
   );
 };