wangxiaoji
/
TuringToken
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

统一控制台页面布局：替换 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 等全部控制台页面
This commit is contained in:
wangxiaoji 2026-07-01 15:18:35 +08:00
parent 001ed4c17f
commit 6a210b9667
26 changed files with 123 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
web/src/components/model-deployments/DeploymentAccessGuard.jsx
View File

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

4
web/src/components/settings/PersonalSetting.jsx
View File

@ -555,7 +555,8 @@ const PersonalSetting = () => {
return ( 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} /> <UserInfoHeader t={t} userState={userState} />
@ -676,6 +677,7 @@ const PersonalSetting = () => {
turnstileSiteKey={turnstileSiteKey} turnstileSiteKey={turnstileSiteKey}
setTurnstileToken={setTurnstileToken} setTurnstileToken={setTurnstileToken}
/> />
</div>
</div> </div>
); );
}; };

2
web/src/index.css vendored
View File

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

4
web/src/pages/About/index.jsx
View File

@ -133,7 +133,8 @@ const About = () => {
); );
return ( 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 === '' ? ( {aboutLoaded && about === '' ? (
<div className='flex justify-center items-center h-screen p-8'> <div className='flex justify-center items-center h-screen p-8'>
<Empty <Empty
@ -166,6 +167,7 @@ const About = () => {
)} )}
</> </>
)} )}
</div>
</div> </div>
); );
}; };

6
web/src/pages/Channel/index.jsx
View File

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

2
web/src/pages/Dashboard/index.jsx
View File

@ -22,7 +22,7 @@ import Dashboard from '../../components/dashboard';
const Detail = () => ( const Detail = () => (
<div className='min-h-full pb-16 pt-20 text-slate-900 dark:text-white'> <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 /> <Dashboard />
</div> </div>
</div> </div>

4
web/src/pages/DistributorAdmin.jsx
View File

@ -1128,7 +1128,8 @@ export default function DistributorAdmin() {
); );
return ( 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> <Typography.Title heading={3}>{t('代理管理中心')}</Typography.Title>
<Tabs <Tabs
@ -1975,6 +1976,7 @@ export default function DistributorAdmin() {
}} }}
/> />
</Modal> </Modal>
</div>
</div> </div>
); );
} }

2
web/src/pages/DistributorApply.jsx
View File

@ -268,7 +268,7 @@ export default function DistributorApply() {
if (isDist) { if (isDist) {
return ( 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'> <div className='w-full max-w-3xl px-1'>
<ApplyStatusNotice variant='success' className='w-full'> <ApplyStatusNotice variant='success' className='w-full'>
{t('您已是代理，无需再次申请')} {t('您已是代理，无需再次申请')}

4
web/src/pages/DistributorCenter.jsx
View File

@ -668,7 +668,8 @@ export default function DistributorCenter() {
} }
return ( 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'> <Title heading={3} className='mb-8'>
{t('代理分销')} {t('代理分销')}
</Title> </Title>
@ -1196,6 +1197,7 @@ export default function DistributorCenter() {
</div> </div>
) : null} ) : null}
</Modal> </Modal>
</div>
</div> </div>
); );
} }

6
web/src/pages/Log/index.jsx
View File

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

6
web/src/pages/Midjourney/index.jsx
View File

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

6
web/src/pages/Model/index.jsx
View File

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

6
web/src/pages/ModelDeployment/index.jsx
View File

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

6
web/src/pages/ModelHeat/index.jsx
View File

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

6
web/src/pages/Redemption/index.jsx
View File

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

4
web/src/pages/Setting/index.jsx
View File

@ -217,7 +217,8 @@ const Setting = () => {
} }
}, [location.search]); }, [location.search]);
return ( 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>
<Layout.Content> <Layout.Content>
<Tabs <Tabs
@ -234,6 +235,7 @@ const Setting = () => {
</Tabs> </Tabs>
</Layout.Content> </Layout.Content>
</Layout> </Layout>
</div>
</div> </div>
); );
}; };

6
web/src/pages/Subscription/index.jsx
View File

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

8
web/src/pages/Supplier/Apply/index.jsx
View File

@ -112,8 +112,8 @@ const SupplierApplyPage = () => {
if (loading) { if (loading) {
return ( return (
<div <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' /> <Spin size='large' />
</div> </div>
@ -121,7 +121,8 @@ const SupplierApplyPage = () => {
} }
return ( 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 <SupplierApplicationModal
visible={showApplicationModal} visible={showApplicationModal}
handleClose={handleModalClose} handleClose={handleModalClose}
@ -220,6 +221,7 @@ const SupplierApplyPage = () => {
</Empty> </Empty>
</div> </div>
)} )}
</div>
</div> </div>
); );
}; };

8
web/src/pages/Supplier/Channel/index.jsx
View File

@ -48,7 +48,8 @@ const SupplierChannelContent = () => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( 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 */} {/* Modals */}
<ColumnSelectorModal {...channelsData} /> <ColumnSelectorModal {...channelsData} />
<EditTagModal <EditTagModal
@ -116,6 +117,7 @@ const SupplierChannelContent = () => {
> >
<ChannelsTable {...channelsData} /> <ChannelsTable {...channelsData} />
</CardPro> </CardPro>
</div>
</div> </div>
); );
}; };
@ -126,7 +128,8 @@ const SupplierChannelPage = () => {
if (!isSupplier()) { if (!isSupplier()) {
return ( 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 <div
className='flex items-center justify-center' className='flex items-center justify-center'
style={{ minHeight: 'calc(100vh - 360px)' }} style={{ minHeight: 'calc(100vh - 360px)' }}
@ -153,6 +156,7 @@ const SupplierChannelPage = () => {
</Empty> </Empty>
</div> </div>
</div> </div>
</div>
); );
} }

8
web/src/pages/Supplier/Dashboard/index.jsx
View File

@ -282,7 +282,8 @@ export default function SupplierDashboardPage() {
if (!canAccess) { if (!canAccess) {
return ( 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 <div
className='flex items-center justify-center' className='flex items-center justify-center'
style={{ minHeight: 'calc(100vh - 360px)' }} style={{ minHeight: 'calc(100vh - 360px)' }}
@ -307,12 +308,14 @@ export default function SupplierDashboardPage() {
</Button> </Button>
</Empty> </Empty>
</div> </div>
</div>
</div> </div>
); );
} }
return ( 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'> <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 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'> <div className='flex items-center gap-2 min-w-0'>
@ -450,6 +453,7 @@ export default function SupplierDashboardPage() {
/> />
</Card> </Card>
</Spin> </Spin>
</div>
</div> </div>
); );
} }

8
web/src/pages/Supplier/PricingSettings/index.jsx
View File

@ -157,7 +157,8 @@ const SupplierPricingSettingsContent = () => {
}, []); }, []);
return ( 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'> <Spin spinning={loading} size='large'>
<Card style={{ marginTop: '10px' }}> <Card style={{ marginTop: '10px' }}>
<Tabs type='card' defaultActiveKey='visual'> <Tabs type='card' defaultActiveKey='visual'>
@ -177,6 +178,7 @@ const SupplierPricingSettingsContent = () => {
</Tabs> </Tabs>
</Card> </Card>
</Spin> </Spin>
</div>
</div> </div>
); );
}; };
@ -190,7 +192,8 @@ const PricingSettingsPage = () => {
if (!isSupplier()) { if (!isSupplier()) {
return ( 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 <div
className='flex items-center justify-center' className='flex items-center justify-center'
style={{ minHeight: 'calc(100vh - 360px)' }} style={{ minHeight: 'calc(100vh - 360px)' }}
@ -217,6 +220,7 @@ const PricingSettingsPage = () => {
</Empty> </Empty>
</div> </div>
</div> </div>
</div>
); );
} }

6
web/src/pages/SupplierAdmin/application/index.jsx
View File

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

6
web/src/pages/SupplierAdmin/list/index.jsx
View File

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

6
web/src/pages/Task/index.jsx
View File

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

6
web/src/pages/Token/index.jsx
View File

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

6
web/src/pages/User/index.jsx
View File

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