优化域名解析列表页排版

This commit is contained in:
jingrow 2025-08-04 20:53:51 +08:00
parent 41412190ef
commit 88e8491720

View File

@ -3,8 +3,6 @@
<!-- 标题和操作按钮 --> <!-- 标题和操作按钮 -->
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<h2 class="text-lg font-medium text-gray-900">DNS解析记录</h2>
<p class="mt-1 text-sm text-gray-500">管理域名的DNS解析记录</p>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<Button <Button
@ -32,7 +30,7 @@
size="sm" size="sm"
> >
<PlusIcon class="h-4 w-4 mr-1" /> <PlusIcon class="h-4 w-4 mr-1" />
添加 添加记录
</Button> </Button>
</div> </div>
</div> </div>
@ -357,7 +355,7 @@ export default {
dnsRecords: [], dnsRecords: [],
pagination: { pagination: {
pageno: 1, pageno: 1,
limit: 5, limit: 10,
total: 0, total: 0,
pagecount: 0 pagecount: 0
}, },
@ -387,11 +385,15 @@ export default {
this.loading = false; this.loading = false;
if (response.status === 'success' && response.data) { if (response.status === 'success' && response.data) {
// //
this.dnsRecords = (response.data.items || []).map(record => ({ const records = (response.data.items || []).map(record => ({
...record, ...record,
editing: false, editing: false,
isNew: false isNew: false
})); }));
//
this.dnsRecords = this.sortRecordsByType(records);
this.pagination = { this.pagination = {
pageno: response.data.pageno || 1, pageno: response.data.pageno || 1,
limit: response.data.limit || 20, limit: response.data.limit || 20,
@ -456,7 +458,7 @@ export default {
// //
addNewRow() { addNewRow() {
this.dnsRecords.push({ const newRecord = {
id: null, // ID id: null, // ID
item: '', item: '',
type: 'A', type: 'A',
@ -466,7 +468,11 @@ export default {
level: 10, level: 10,
editing: true, // editing: true, //
isNew: true isNew: true
}); };
//
this.dnsRecords.push(newRecord);
this.dnsRecords = this.sortRecordsByType(this.dnsRecords);
}, },
// //
@ -715,6 +721,15 @@ export default {
// DNS
sortRecordsByType(records) {
return records.sort((a, b) => {
const typeA = a.type || '';
const typeB = b.type || '';
return typeA.localeCompare(typeB);
});
},
// //
getVisiblePages() { getVisiblePages() {
const current = this.pagination.pageno; const current = this.pagination.pageno;