统一控制台页面布局：替换 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,27 +43,30 @@ 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='mt-[60px] px-4'
-        style={{
-          minHeight: 'calc(100vh - 60px)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
+      <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
+          style={{
+            minHeight: 'calc(100vh - 160px)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
         <div
           style={{
             maxWidth: '600px',
@@ -276,18 +279,22 @@ const DeploymentAccessGuard = ({
             </Text>
           </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,15 +308,16 @@ const DeploymentAccessGuard = ({
     const detail = connectionError?.message || '';
 
     return (
-      <div
-        className='mt-[60px] px-4'
-        style={{
-          minHeight: 'calc(100vh - 60px)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
+      <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
+          style={{
+            minHeight: 'calc(100vh - 160px)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
         <div
           style={{
             maxWidth: '600px',
@@ -402,6 +410,8 @@ const DeploymentAccessGuard = ({
             </div>
           </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} />
 
@@ -676,6 +677,7 @@ const PersonalSetting = () => {
         turnstileSiteKey={turnstileSiteKey}
         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
@@ -166,6 +167,7 @@ const About = () => {
           )}
         </>
       )}
+      </div>
     </div>
   );
 };

web/src/pages/Channel/index.jsx

@@ -38,8 +38,10 @@ const File = () => {
   }, [editId]);
 
   return (
-    <div className='mt-[60px] px-2'>
-      <ChannelsTable />
+    <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
@@ -1975,6 +1976,7 @@ 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>
@@ -1196,6 +1197,7 @@ export default function DistributorCenter() {
           </div>
         ) : null}
       </Modal>
+      </div>
     </div>
   );
 }

web/src/pages/Log/index.jsx

@@ -21,8 +21,10 @@ import React from 'react';
 import UsageLogsTable from '../../components/table/usage-logs';
 
 const Token = () => (
-  <div className='mt-[60px] px-2'>
-    <UsageLogsTable />
+  <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>
 );
 

web/src/pages/Midjourney/index.jsx

@@ -21,8 +21,10 @@ import React from 'react';
 import MjLogsTable from '../../components/table/mj-logs';
 
 const Midjourney = () => (
-  <div className='mt-[60px] px-2'>
-    <MjLogsTable />
+  <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>
 );
 

web/src/pages/Model/index.jsx

@@ -36,8 +36,10 @@ const ModelPage = () => {
   }, [editId, modelName]);
 
   return (
-    <div className='mt-[60px] px-2'>
-      <ModelsTable />
+    <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,8 +41,10 @@ const ModelDeploymentPage = () => {
       connectionError={connectionError}
       onRetry={() => testConnection()}
     >
-      <div className='mt-[60px] px-2'>
-        <DeploymentsTable />
+      <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,8 +22,10 @@ import CombinedHeatConfig from './CombinedHeatConfig';
 
 const ModelHeat = () => {
   return (
-    <div className='mt-[60px] px-2'>
-      <CombinedHeatConfig />
+    <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,8 +22,10 @@ import RedemptionsTable from '../../components/table/redemptions';
 
 const Redemption = () => {
   return (
-    <div className='mt-[60px] px-2'>
-      <RedemptionsTable />
+    <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
@@ -234,6 +235,7 @@ const Setting = () => {
           </Tabs>
         </Layout.Content>
       </Layout>
+      </div>
     </div>
   );
 };

web/src/pages/Subscription/index.jsx

@@ -22,8 +22,10 @@ import SubscriptionsPage from '../../components/table/subscriptions';
 
 const Subscription = () => {
   return (
-    <div className='mt-[60px] px-2'>
-      <SubscriptionsPage />
+    <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'
-        style={{ minHeight: 'calc(100vh - 360px)' }}
+        className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white flex items-center justify-center'
+        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}
@@ -220,6 +221,7 @@ const SupplierApplyPage = () => {
           </Empty>
         </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
@@ -116,6 +117,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)' }}
@@ -307,12 +308,14 @@ export default function SupplierDashboardPage() {
             </Button>
           </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'>
@@ -450,6 +453,7 @@ 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'>
@@ -177,6 +178,7 @@ const SupplierPricingSettingsContent = () => {
           </Tabs>
         </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,8 +22,10 @@ import SupplierApplicationsPage from '../../../components/table/supplier-applica
 
 const SupplierApplication = () => {
   return (
-    <div className='mt-[60px] px-2'>
-      <SupplierApplicationsPage />
+    <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,8 +22,10 @@ import SuppliersPage from '../../../components/table/suppliers';
 
 const Suppliers = () => {
   return (
-    <div className='mt-[60px] px-2'>
-      <SuppliersPage />
+    <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,8 +21,10 @@ import React from 'react';
 import TaskLogsTable from '../../components/table/task-logs';
 
 const Task = () => (
-  <div className='mt-[60px] px-2'>
-    <TaskLogsTable />
+  <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>
 );
 

web/src/pages/Token/index.jsx

@@ -22,8 +22,10 @@ import TokensTable from '../../components/table/tokens';
 
 const Token = () => {
   return (
-    <div className='mt-[60px] px-2'>
-      <TokensTable />
+    <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,8 +22,10 @@ import UsersTable from '../../components/table/users';
 
 const User = () => {
   return (
-    <div className='mt-[60px] px-2'>
-      <UsersTable />
+    <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>
   );
 };