Skip to content

Commit a4c875d

Browse files
sunnylqmsunnylqm
committed
optimise layout
1 parent 8b89bd6 commit a4c875d

8 files changed

Lines changed: 233 additions & 97 deletions

File tree

‎src/pages/admin-apps.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
Button,
55
Card,
66
Form,
7+
Grid,
78
Input,
89
Modal,
910
message,
@@ -13,6 +14,7 @@ import {
1314
Table,
1415
Typography,
1516
} from 'antd';
17+
import type { ColumnsType } from 'antd/es/table';
1618
import dayjs from 'dayjs';
1719
import { useEffect, useState } from 'react';
1820
import { adminApi } from '@/services/admin-api';
@@ -21,6 +23,8 @@ const { Title } = Typography;
2123

2224
export const Component = () => {
2325
const queryClient = useQueryClient();
26+
const screens = Grid.useBreakpoint();
27+
const isMobile = !screens.md;
2428
const [searchKeyword, setSearchKeyword] = useState('');
2529
const [debouncedSearch, setDebouncedSearch] = useState('');
2630
const [isModalOpen, setIsModalOpen] = useState(false);
@@ -86,11 +90,12 @@ export const Component = () => {
8690
}
8791
};
8892

89-
const columns = [
93+
const columns: ColumnsType<AdminApp> = [
9094
{
9195
title: 'ID',
9296
dataIndex: 'id',
9397
key: 'id',
98+
responsive: ['md'],
9499
width: 60,
95100
},
96101
{
@@ -105,8 +110,8 @@ export const Component = () => {
105110
key: 'appKey',
106111
width: 200,
107112
render: (key: string) => (
108-
<Space>
109-
<span className="font-mono text-xs">{key}</span>
113+
<Space wrap size={[4, 8]}>
114+
<span className="font-mono text-xs break-all">{key}</span>
110115
<Button
111116
type="text"
112117
size="small"
@@ -142,19 +147,22 @@ export const Component = () => {
142147
title: '用户ID',
143148
dataIndex: 'userId',
144149
key: 'userId',
150+
responsive: ['lg'],
145151
width: 80,
146152
},
147153
{
148154
title: '状态',
149155
dataIndex: 'status',
150156
key: 'status',
157+
responsive: ['md'],
151158
width: 80,
152159
render: (status: string | null) => status || '-',
153160
},
154161
{
155162
title: '忽略构建时间',
156163
dataIndex: 'ignoreBuildTime',
157164
key: 'ignoreBuildTime',
165+
responsive: ['lg'],
158166
width: 120,
159167
render: (v: string | null) => (
160168
<span className={v === 'enabled' ? 'text-green-600' : ''}>
@@ -166,6 +174,7 @@ export const Component = () => {
166174
title: '创建时间',
167175
dataIndex: 'createdAt',
168176
key: 'createdAt',
177+
responsive: ['lg'],
169178
width: 160,
170179
render: (date: string | undefined) =>
171180
date ? dayjs(date).format('YYYY-MM-DD HH:mm') : '-',
@@ -208,15 +217,21 @@ export const Component = () => {
208217
dataSource={data?.data || []}
209218
columns={columns}
210219
rowKey="id"
211-
pagination={{ pageSize: 20 }}
212-
scroll={{ x: 1000 }}
220+
size={isMobile ? 'small' : 'middle'}
221+
pagination={
222+
isMobile
223+
? { pageSize: 10, simple: true }
224+
: { pageSize: 20, showSizeChanger: true }
225+
}
226+
scroll={{ x: 760 }}
213227
/>
214228
</Spin>
215229
</Card>
216230

217231
<Modal
218232
title={`编辑应用: ${editingApp?.name}`}
219233
open={isModalOpen}
234+
width={isMobile ? 'calc(100vw - 32px)' : 600}
220235
onCancel={() => setIsModalOpen(false)}
221236
footer={[
222237
<Button key="cancel" onClick={() => setIsModalOpen(false)}>
@@ -231,7 +246,6 @@ export const Component = () => {
231246
保存
232247
</Button>,
233248
]}
234-
width={600}
235249
>
236250
<Form form={form} layout="vertical" className="mt-4">
237251
<Space className="w-full" direction="vertical" size="middle">

‎src/pages/admin-config.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
Button,
55
Card,
66
Form,
7+
Grid,
78
Input,
89
Modal,
910
message,
@@ -13,6 +14,7 @@ import {
1314
Table,
1415
Typography,
1516
} from 'antd';
17+
import type { ColumnsType } from 'antd/es/table';
1618
import { useCallback, useEffect, useRef, useState } from 'react';
1719
import {
1820
type Content,
@@ -31,9 +33,11 @@ interface ConfigItem {
3133

3234
// JSON Editor wrapper component
3335
const JsonEditorWrapper = ({
36+
height = 300,
3437
value,
3538
onChange,
3639
}: {
40+
height?: number;
3741
value: string;
3842
onChange: (value: string) => void;
3943
}) => {
@@ -81,11 +85,13 @@ const JsonEditorWrapper = ({
8185
}
8286
}, [value]);
8387

84-
return <div ref={containerRef} style={{ height: 300 }} />;
88+
return <div ref={containerRef} style={{ height }} />;
8589
};
8690

8791
export const Component = () => {
8892
const queryClient = useQueryClient();
93+
const screens = Grid.useBreakpoint();
94+
const isMobile = !screens.md;
8995
const [isModalOpen, setIsModalOpen] = useState(false);
9096
const [editingItem, setEditingItem] = useState<ConfigItem | null>(null);
9197
const [form] = Form.useForm();
@@ -156,7 +162,7 @@ export const Component = () => {
156162
[refetch],
157163
);
158164

159-
const columns = [
165+
const columns: ColumnsType<ConfigItem> = [
160166
{
161167
title: 'Key',
162168
dataIndex: 'key',
@@ -167,6 +173,7 @@ export const Component = () => {
167173
title: 'Value',
168174
dataIndex: 'value',
169175
key: 'value',
176+
responsive: ['sm'],
170177
render: (value: string) => {
171178
try {
172179
const parsed = JSON.parse(value);
@@ -222,6 +229,7 @@ export const Component = () => {
222229
dataSource={configList}
223230
columns={columns}
224231
rowKey="key"
232+
size={isMobile ? 'small' : 'middle'}
225233
pagination={false}
226234
scroll={{ x: 720 }}
227235
/>
@@ -231,6 +239,7 @@ export const Component = () => {
231239
<Modal
232240
title={editingItem ? '编辑配置' : '添加配置'}
233241
open={isModalOpen}
242+
width={isMobile ? 'calc(100vw - 32px)' : 700}
234243
onCancel={() => setIsModalOpen(false)}
235244
footer={[
236245
<Button key="cancel" onClick={() => setIsModalOpen(false)}>
@@ -245,7 +254,6 @@ export const Component = () => {
245254
保存
246255
</Button>,
247256
]}
248-
width={700}
249257
>
250258
<Form form={form} layout="vertical">
251259
<Form.Item
@@ -256,7 +264,11 @@ export const Component = () => {
256264
<Input disabled={!!editingItem} placeholder="配置键名" />
257265
</Form.Item>
258266
<Form.Item label="Value (JSON)">
259-
<JsonEditorWrapper value={jsonValue} onChange={setJsonValue} />
267+
<JsonEditorWrapper
268+
height={isMobile ? 220 : 300}
269+
value={jsonValue}
270+
onChange={setJsonValue}
271+
/>
260272
</Form.Item>
261273
</Form>
262274
</Modal>

‎src/pages/admin-users.tsx‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
Card,
66
DatePicker,
77
Form,
8+
Grid,
89
Input,
910
Modal,
1011
message,
@@ -14,6 +15,7 @@ import {
1415
Table,
1516
Typography,
1617
} from 'antd';
18+
import type { ColumnsType } from 'antd/es/table';
1719
import dayjs from 'dayjs';
1820
import { useEffect, useRef, useState } from 'react';
1921
import {
@@ -45,9 +47,11 @@ const defaultPremiumQuotaText = JSON.stringify(quotas.premium, null, 2);
4547

4648
// JSON Editor wrapper component for quota editing
4749
const JsonEditorWrapper = ({
50+
height = 200,
4851
value,
4952
onChange,
5053
}: {
54+
height?: number;
5155
value: string;
5256
onChange: (value: string) => void;
5357
}) => {
@@ -95,11 +99,13 @@ const JsonEditorWrapper = ({
9599
}
96100
}, [value]);
97101

98-
return <div ref={containerRef} style={{ height: 200 }} />;
102+
return <div ref={containerRef} style={{ height }} />;
99103
};
100104

101105
export const Component = () => {
102106
const queryClient = useQueryClient();
107+
const screens = Grid.useBreakpoint();
108+
const isMobile = !screens.md;
103109
const [searchKeyword, setSearchKeyword] = useState('');
104110
const [debouncedSearch, setDebouncedSearch] = useState('');
105111
const [isModalOpen, setIsModalOpen] = useState(false);
@@ -181,11 +187,12 @@ export const Component = () => {
181187
}
182188
};
183189

184-
const columns = [
190+
const columns: ColumnsType<AdminUser> = [
185191
{
186192
title: 'ID',
187193
dataIndex: 'id',
188194
key: 'id',
195+
responsive: ['md'],
189196
width: 80,
190197
},
191198
{
@@ -202,6 +209,7 @@ export const Component = () => {
202209
title: '状态',
203210
dataIndex: 'status',
204211
key: 'status',
212+
responsive: ['sm'],
205213
width: 100,
206214
render: (status: string) => (
207215
<span
@@ -215,13 +223,15 @@ export const Component = () => {
215223
title: '套餐',
216224
dataIndex: 'tier',
217225
key: 'tier',
226+
responsive: ['sm'],
218227
width: 120,
219228
render: (tier: string) => tierLabelMap.get(tier) || tier || '-',
220229
},
221230
{
222231
title: '套餐过期时间',
223232
dataIndex: 'tierExpiresAt',
224233
key: 'tierExpiresAt',
234+
responsive: ['lg'],
225235
width: 180,
226236
render: (date: string | null) =>
227237
date ? dayjs(date).format('YYYY-MM-DD HH:mm') : '-',
@@ -230,6 +240,7 @@ export const Component = () => {
230240
title: '自定义配额',
231241
dataIndex: 'quota',
232242
key: 'quota',
243+
responsive: ['md'],
233244
width: 100,
234245
render: (quota: Quota | null) => (quota ? '有' : '-'),
235246
},
@@ -271,15 +282,21 @@ export const Component = () => {
271282
dataSource={data?.data || []}
272283
columns={columns}
273284
rowKey="id"
274-
pagination={{ pageSize: 20 }}
275-
scroll={{ x: 900 }}
285+
size={isMobile ? 'small' : 'middle'}
286+
pagination={
287+
isMobile
288+
? { pageSize: 10, simple: true }
289+
: { pageSize: 20, showSizeChanger: true }
290+
}
291+
scroll={{ x: 760 }}
276292
/>
277293
</Spin>
278294
</Card>
279295

280296
<Modal
281297
title={`编辑用户: ${editingUser?.email}`}
282298
open={isModalOpen}
299+
width={isMobile ? 'calc(100vw - 32px)' : 600}
283300
onCancel={() => setIsModalOpen(false)}
284301
footer={[
285302
<Button key="cancel" onClick={() => setIsModalOpen(false)}>
@@ -294,7 +311,6 @@ export const Component = () => {
294311
保存
295312
</Button>,
296313
]}
297-
width={600}
298314
>
299315
<Form form={form} layout="vertical" className="mt-4">
300316
<Space className="w-full" direction="vertical" size="middle">
@@ -330,7 +346,11 @@ export const Component = () => {
330346
label="自定义配额 (JSON，留空则使用默认配额)"
331347
className="mb-0!"
332348
>
333-
<JsonEditorWrapper value={quotaValue} onChange={setQuotaValue} />
349+
<JsonEditorWrapper
350+
height={isMobile ? 180 : 200}
351+
value={quotaValue}
352+
onChange={setQuotaValue}
353+
/>
334354
</Form.Item>
335355
</Space>
336356
</Form>

0 commit comments

Comments
 (0)