From c42115a0adce0f9af2ba40bdd81dad1cc969aaa8 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sun, 3 Aug 2025 19:55:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9F=9F=E5=90=8D=E8=A7=A3?=
 =?UTF-8?q?=E6=9E=90=E6=A0=87=E7=AD=BE=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JsiteDomainAddDNSRecordDialog.vue         | 246 +++++++++++++
 .../src2/components/JsiteDomainDNSRecords.vue | 347 ++++++++++++++++++
 .../JsiteDomainEditDNSRecordDialog.vue        | 259 +++++++++++++
 dashboard/src2/objects/domain.js              |   9 +
 jcloud/api/domain_west.py                     |  29 +-
 5 files changed, 887 insertions(+), 3 deletions(-)
 create mode 100644 dashboard/src2/components/JsiteDomainAddDNSRecordDialog.vue
 create mode 100644 dashboard/src2/components/JsiteDomainDNSRecords.vue
 create mode 100644 dashboard/src2/components/JsiteDomainEditDNSRecordDialog.vue

diff --git a/dashboard/src2/components/JsiteDomainAddDNSRecordDialog.vue b/dashboard/src2/components/JsiteDomainAddDNSRecordDialog.vue
new file mode 100644
index 0000000..070c5f7
--- /dev/null
+++ b/dashboard/src2/components/JsiteDomainAddDNSRecordDialog.vue
@@ -0,0 +1,246 @@
+<template>
+	<Dialog>
+		<DialogContent class="sm:max-w-[500px]">
+			<DialogHeader>
+				<DialogTitle>添加DNS记录</DialogTitle>
+				<DialogDescription>
+					为域名 {{ domainDoc?.domain }} 添加新的DNS解析记录
+				</DialogDescription>
+			</DialogHeader>
+
+			<form @submit.prevent="submitForm" class="space-y-4">
+				<!-- 记录类型 -->
+				<div class="space-y-2">
+					<Label for="record-type">记录类型</Label>
+					<Select v-model="form.record_type" required>
+						<SelectTrigger>
+							<SelectValue placeholder="选择记录类型" />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="A">A - IPv4地址</SelectItem>
+							<SelectItem value="AAAA">AAAA - IPv6地址</SelectItem>
+							<SelectItem value="CNAME">CNAME - 别名</SelectItem>
+							<SelectItem value="MX">MX - 邮件交换</SelectItem>
+							<SelectItem value="TXT">TXT - 文本记录</SelectItem>
+							<SelectItem value="NS">NS - 域名服务器</SelectItem>
+						</SelectContent>
+					</Select>
+				</div>
+
+				<!-- 主机记录 -->
+				<div class="space-y-2">
+					<Label for="host">主机记录</Label>
+					<Input 
+						id="host"
+						v-model="form.host"
+						placeholder="例如: www 或 @ (留空表示根域名)"
+						required
+					/>
+					<p class="text-xs text-gray-500">
+						@ 表示根域名，www 表示 www.yourdomain.com
+					</p>
+				</div>
+
+				<!-- 记录值 -->
+				<div class="space-y-2">
+					<Label for="value">记录值</Label>
+					<Input 
+						id="value"
+						v-model="form.value"
+						:placeholder="getValuePlaceholder()"
+						required
+					/>
+					<p class="text-xs text-gray-500">
+						{{ getValueDescription() }}
+					</p>
+				</div>
+
+				<!-- TTL -->
+				<div class="space-y-2">
+					<Label for="ttl">TTL (秒)</Label>
+					<Input 
+						id="ttl"
+						v-model.number="form.ttl"
+						type="number"
+						min="60"
+						max="86400"
+						placeholder="600"
+					/>
+					<p class="text-xs text-gray-500">
+						建议值：600秒 (10分钟) 到 86400秒 (24小时)
+					</p>
+				</div>
+
+				<!-- MX优先级 (仅MX记录显示) -->
+				<div v-if="form.record_type === 'MX'" class="space-y-2">
+					<Label for="mx-priority">MX优先级</Label>
+					<Input 
+						id="mx-priority"
+						v-model.number="form.mx_priority"
+						type="number"
+						min="0"
+						max="65535"
+						placeholder="10"
+					/>
+					<p class="text-xs text-gray-500">
+						数值越小优先级越高，建议值：10
+					</p>
+				</div>
+			</form>
+
+			<DialogFooter>
+				<Button @click="$emit('close')" variant="outline">
+					取消
+				</Button>
+				<Button @click="submitForm" :loading="loading" variant="solid">
+					添加记录
+				</Button>
+			</DialogFooter>
+		</DialogContent>
+	</Dialog>
+</template>
+
+<script>
+import { 
+	Dialog, 
+	DialogContent, 
+	DialogHeader, 
+	DialogTitle, 
+	DialogDescription, 
+	DialogFooter,
+	Button,
+	Input,
+	Label,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+	createResource
+} from 'jingrow-ui';
+import { toast } from 'vue-sonner';
+import { getToastErrorMessage } from '../utils/toast';
+
+export default {
+	name: 'JsiteDomainAddDNSRecordDialog',
+	props: ['domain', 'domainDoc', 'onSuccess'],
+	emits: ['close'],
+	data() {
+		return {
+			loading: false,
+			form: {
+				record_type: 'A',
+				host: '',
+				value: '',
+				ttl: 600,
+				mx_priority: 10
+			}
+		};
+	},
+	methods: {
+		// 获取记录值占位符
+		getValuePlaceholder() {
+			const placeholders = {
+				'A': '例如: 192.168.1.1',
+				'AAAA': '例如: 2001:db8::1',
+				'CNAME': '例如: example.com',
+				'MX': '例如: mail.example.com',
+				'TXT': '例如: 验证字符串',
+				'NS': '例如: ns1.example.com'
+			};
+			return placeholders[this.form.record_type] || '';
+		},
+
+		// 获取记录值描述
+		getValueDescription() {
+			const descriptions = {
+				'A': '输入IPv4地址，如：192.168.1.1',
+				'AAAA': '输入IPv6地址，如：2001:db8::1',
+				'CNAME': '输入目标域名，如：example.com',
+				'MX': '输入邮件服务器域名，如：mail.example.com',
+				'TXT': '输入文本内容，常用于域名验证',
+				'NS': '输入域名服务器地址，如：ns1.example.com'
+			};
+			return descriptions[this.form.record_type] || '';
+		},
+
+		// 验证表单
+		validateForm() {
+			if (!this.form.record_type) {
+				toast.error('请选择记录类型');
+				return false;
+			}
+			if (!this.form.value) {
+				toast.error('请输入记录值');
+				return false;
+			}
+			if (this.form.ttl < 60 || this.form.ttl > 86400) {
+				toast.error('TTL值必须在60-86400秒之间');
+				return false;
+			}
+			if (this.form.record_type === 'MX' && (this.form.mx_priority < 0 || this.form.mx_priority > 65535)) {
+				toast.error('MX优先级必须在0-65535之间');
+				return false;
+			}
+			return true;
+		},
+
+		// 提交表单
+		async submitForm() {
+			if (!this.validateForm()) {
+				return;
+			}
+
+			this.loading = true;
+
+			try {
+				// 构建记录数据
+				const recordData = {
+					type: this.form.record_type,
+					host: this.form.host || '@',
+					value: this.form.value,
+					ttl: this.form.ttl
+				};
+
+				// 如果是MX记录，添加优先级
+				if (this.form.record_type === 'MX') {
+					recordData.level = this.form.mx_priority;
+				}
+
+				const request = createResource({
+					url: 'jcloud.api.domain_west.west_domain_add_dns_record',
+					params: {
+						domain: this.domainDoc.domain,
+						record_type: this.form.record_type,
+						host: this.form.host || '@',
+						value: this.form.value,
+						ttl: this.form.ttl,
+						level: this.form.mx_priority
+					},
+					onSuccess: (response) => {
+						this.loading = false;
+						if (response.status === 'success') {
+							toast.success('DNS记录添加成功');
+							this.$emit('close');
+							if (this.onSuccess) {
+								this.onSuccess();
+							}
+						} else {
+							toast.error(response.message || '添加DNS记录失败');
+						}
+					},
+					onError: (error) => {
+						this.loading = false;
+						toast.error(getToastErrorMessage(error));
+					}
+				});
+				request.submit();
+			} catch (error) {
+				this.loading = false;
+				toast.error('添加DNS记录失败');
+				console.error('添加DNS记录失败:', error);
+			}
+		}
+	}
+};
+</script>
\ No newline at end of file
diff --git a/dashboard/src2/components/JsiteDomainDNSRecords.vue b/dashboard/src2/components/JsiteDomainDNSRecords.vue
new file mode 100644
index 0000000..719da8d
--- /dev/null
+++ b/dashboard/src2/components/JsiteDomainDNSRecords.vue
@@ -0,0 +1,347 @@
+<template>
+	<div class="space-y-6">
+		<!-- 标题和操作按钮 -->
+		<div class="flex items-center justify-between">
+			<div>
+				<h2 class="text-lg font-medium text-gray-900">域名解析记录</h2>
+				<p class="mt-1 text-sm text-gray-500">管理域名的DNS解析记录</p>
+			</div>
+			<div class="flex gap-2">
+				<Button 
+					@click="refreshRecords"
+					:loading="loading"
+					variant="outline"
+					size="sm"
+				>
+					<RefreshCwIcon class="h-4 w-4 mr-1" />
+					刷新
+				</Button>
+				<Button 
+					@click="showAddRecordDialog"
+					variant="solid"
+					size="sm"
+				>
+					<PlusIcon class="h-4 w-4 mr-1" />
+					添加记录
+				</Button>
+			</div>
+		</div>
+
+		<!-- 加载状态 -->
+		<div v-if="loading" class="flex items-center justify-center py-12">
+			<div class="flex items-center space-x-2">
+				<Loader2Icon class="h-5 w-5 animate-spin text-gray-500" />
+				<span class="text-gray-500">正在加载DNS记录...</span>
+			</div>
+		</div>
+
+		<!-- 错误状态 -->
+		<div v-else-if="error" class="rounded-md border border-red-200 bg-red-50 p-4">
+			<div class="flex items-center">
+				<AlertCircleIcon class="h-5 w-5 text-red-400 mr-2" />
+				<div>
+					<h3 class="text-sm font-medium text-red-800">加载失败</h3>
+					<p class="text-sm text-red-700 mt-1">{{ error }}</p>
+				</div>
+			</div>
+		</div>
+
+		<!-- DNS记录列表 -->
+		<div v-else-if="dnsRecords.length > 0" class="space-y-4">
+			<div class="overflow-hidden rounded-md border border-gray-200">
+				<table class="min-w-full divide-y divide-gray-200">
+					<thead class="bg-gray-50">
+						<tr>
+							<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+								类型
+							</th>
+							<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+								主机记录
+							</th>
+							<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+								记录值
+							</th>
+							<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+								TTL
+							</th>
+							<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+								操作
+							</th>
+						</tr>
+					</thead>
+					<tbody class="bg-white divide-y divide-gray-200">
+						<tr v-for="record in dnsRecords" :key="record.id" class="hover:bg-gray-50">
+							<td class="px-6 py-4 whitespace-nowrap">
+								<Badge :variant="getRecordTypeVariant(record.type)">
+									{{ record.type }}
+								</Badge>
+							</td>
+							<td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
+								{{ record.item || record.host || '@' }}
+							</td>
+							<td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
+								{{ record.value }}
+							</td>
+							<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+								{{ record.ttl || '600' }}
+								<span v-if="record.type === 'MX' && record.level" class="ml-2 text-xs text-blue-600">
+									(优先级: {{ record.level }})
+								</span>
+							</td>
+							<td class="px-6 py-4 whitespace-nowrap text-sm">
+								<div class="flex items-center space-x-2">
+									<Button 
+										@click="editRecord(record)"
+										variant="ghost"
+										size="sm"
+									>
+										<EditIcon class="h-4 w-4" />
+									</Button>
+									<Button 
+										@click="deleteRecord(record)"
+										variant="ghost"
+										size="sm"
+										class="text-red-600 hover:text-red-700"
+									>
+										<Trash2Icon class="h-4 w-4" />
+									</Button>
+								</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+
+			<!-- 分页 -->
+			<div v-if="pagination.total > pagination.limit" class="flex items-center justify-between">
+				<div class="text-sm text-gray-700">
+					显示第 {{ (pagination.pageno - 1) * pagination.limit + 1 }} - 
+					{{ Math.min(pagination.pageno * pagination.limit, pagination.total) }} 条，
+					共 {{ pagination.total }} 条记录
+				</div>
+				<div class="flex items-center space-x-2">
+					<Button 
+						@click="changePage(pagination.pageno - 1)"
+						:disabled="pagination.pageno <= 1"
+						variant="outline"
+						size="sm"
+					>
+						上一页
+					</Button>
+					<span class="text-sm text-gray-700">
+						{{ pagination.pageno }} / {{ pagination.pagecount }}
+					</span>
+					<Button 
+						@click="changePage(pagination.pageno + 1)"
+						:disabled="pagination.pageno >= pagination.pagecount"
+						variant="outline"
+						size="sm"
+					>
+						下一页
+					</Button>
+				</div>
+			</div>
+		</div>
+
+		<!-- 空状态 -->
+		<div v-else class="text-center py-12">
+			<GlobeIcon class="mx-auto h-12 w-12 text-gray-400" />
+			<h3 class="mt-2 text-sm font-medium text-gray-900">暂无DNS记录</h3>
+			<p class="mt-1 text-sm text-gray-500">开始添加您的第一个DNS解析记录</p>
+			<div class="mt-6">
+				<Button @click="showAddRecordDialog" variant="solid">
+					<PlusIcon class="h-4 w-4 mr-1" />
+					添加记录
+				</Button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { getCachedDocumentResource, Badge, Button, createResource } from 'jingrow-ui';
+import { h, defineAsyncComponent } from 'vue';
+import { toast } from 'vue-sonner';
+import { getToastErrorMessage } from '../utils/toast';
+import { renderDialog, confirmDialog } from '../utils/components';
+import RefreshCwIcon from '~icons/lucide/refresh-cw';
+import PlusIcon from '~icons/lucide/plus';
+import Loader2Icon from '~icons/lucide/loader-2';
+import AlertCircleIcon from '~icons/lucide/alert-circle';
+import EditIcon from '~icons/lucide/edit';
+import Trash2Icon from '~icons/lucide/trash-2';
+import GlobeIcon from '~icons/lucide/globe';
+
+export default {
+	name: 'JsiteDomainDNSRecords',
+	props: ['domain'],
+	data() {
+		return {
+			loading: false,
+			error: null,
+			dnsRecords: [],
+			pagination: {
+				pageno: 1,
+				limit: 20,
+				total: 0,
+				pagecount: 0
+			}
+		};
+	},
+	methods: {
+		// 获取DNS记录
+		async loadDNSRecords() {
+			if (!this.$domain.pg?.domain) {
+				this.error = '域名信息不存在';
+				return;
+			}
+
+			this.loading = true;
+			this.error = null;
+
+			try {
+				const request = createResource({
+					url: 'jcloud.api.domain_west.get_west_domain_dns_records',
+					params: {
+						domain: this.$domain.pg.domain,
+						limit: this.pagination.limit,
+						pageno: this.pagination.pageno
+					},
+					onSuccess: (response) => {
+						this.loading = false;
+						if (response.status === 'success' && response.data) {
+							this.dnsRecords = response.data.items || [];
+							this.pagination = {
+								pageno: response.data.pageno || 1,
+								limit: response.data.limit || 20,
+								total: response.data.total || 0,
+								pagecount: response.data.pagecount || 0
+							};
+						} else {
+							this.error = response.message || '获取DNS记录失败';
+						}
+					},
+					onError: (error) => {
+						this.loading = false;
+						this.error = getToastErrorMessage(error);
+					}
+				});
+				request.submit();
+			} catch (error) {
+				this.loading = false;
+				this.error = '获取DNS记录时发生错误';
+				console.error('加载DNS记录失败:', error);
+			}
+		},
+
+		// 刷新记录
+		refreshRecords() {
+			this.loadDNSRecords();
+		},
+
+		// 切换页面
+		changePage(page) {
+			if (page >= 1 && page <= this.pagination.pagecount) {
+				this.pagination.pageno = page;
+				this.loadDNSRecords();
+			}
+		},
+
+		// 获取记录类型样式
+		getRecordTypeVariant(type) {
+			const variantMap = {
+				'A': 'success',
+				'AAAA': 'info',
+				'CNAME': 'warning',
+				'MX': 'primary',
+				'TXT': 'secondary',
+				'NS': 'default'
+			};
+			return variantMap[type] || 'default';
+		},
+
+		// 显示添加记录对话框
+		showAddRecordDialog() {
+			const JsiteDomainAddDNSRecordDialog = defineAsyncComponent(() => import('./JsiteDomainAddDNSRecordDialog.vue'));
+			
+			renderDialog(h(JsiteDomainAddDNSRecordDialog, {
+				domain: this.domain,
+				domainDoc: this.$domain.pg,
+				onSuccess: this.onRecordAdded
+			}));
+		},
+
+		// 编辑记录
+		editRecord(record) {
+			const JsiteDomainEditDNSRecordDialog = defineAsyncComponent(() => import('./JsiteDomainEditDNSRecordDialog.vue'));
+			
+			renderDialog(h(JsiteDomainEditDNSRecordDialog, {
+				domain: this.domain,
+				domainDoc: this.$domain.pg,
+				record: record,
+				onSuccess: this.onRecordUpdated
+			}));
+		},
+
+		// 删除记录
+		deleteRecord(record) {
+			confirmDialog({
+				title: '删除DNS记录',
+				message: `确定要删除这条DNS记录吗？\n类型: ${record.type}\n主机记录: ${record.item || record.host || '@'}\n记录值: ${record.value}`,
+				primaryAction: {
+					label: '删除',
+					variant: 'danger',
+					onClick: ({ hide }) => {
+						this.performDeleteRecord(record, hide);
+					}
+				}
+			});
+		},
+
+		// 执行删除记录
+		async performDeleteRecord(record, hide) {
+			try {
+				const request = createResource({
+					url: 'jcloud.api.domain_west.west_domain_delete_dns_record',
+					params: {
+						domain: this.$domain.pg.domain,
+						record_id: record.id
+					},
+					onSuccess: () => {
+						toast.success('DNS记录删除成功');
+						hide();
+						this.loadDNSRecords();
+					},
+					onError: (error) => {
+						toast.error(getToastErrorMessage(error));
+					}
+				});
+				request.submit();
+			} catch (error) {
+				toast.error('删除DNS记录失败');
+				console.error('删除DNS记录失败:', error);
+			}
+		},
+
+		// 记录添加成功回调
+		onRecordAdded() {
+			toast.success('DNS记录添加成功');
+			this.loadDNSRecords();
+		},
+
+		// 记录更新成功回调
+		onRecordUpdated() {
+			toast.success('DNS记录更新成功');
+			this.loadDNSRecords();
+		}
+	},
+	computed: {
+		$domain() {
+			return getCachedDocumentResource('Jsite Domain', this.domain);
+		}
+	},
+	mounted() {
+		this.loadDNSRecords();
+	}
+};
+</script>
\ No newline at end of file
diff --git a/dashboard/src2/components/JsiteDomainEditDNSRecordDialog.vue b/dashboard/src2/components/JsiteDomainEditDNSRecordDialog.vue
new file mode 100644
index 0000000..3d21515
--- /dev/null
+++ b/dashboard/src2/components/JsiteDomainEditDNSRecordDialog.vue
@@ -0,0 +1,259 @@
+<template>
+	<Dialog>
+		<DialogContent class="sm:max-w-[500px]">
+			<DialogHeader>
+				<DialogTitle>编辑DNS记录</DialogTitle>
+				<DialogDescription>
+					编辑域名 {{ domainDoc?.domain }} 的DNS解析记录
+				</DialogDescription>
+			</DialogHeader>
+
+			<form @submit.prevent="submitForm" class="space-y-4">
+				<!-- 记录类型 -->
+				<div class="space-y-2">
+					<Label for="record-type">记录类型</Label>
+					<Select v-model="form.record_type" required>
+						<SelectTrigger>
+							<SelectValue placeholder="选择记录类型" />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="A">A - IPv4地址</SelectItem>
+							<SelectItem value="AAAA">AAAA - IPv6地址</SelectItem>
+							<SelectItem value="CNAME">CNAME - 别名</SelectItem>
+							<SelectItem value="MX">MX - 邮件交换</SelectItem>
+							<SelectItem value="TXT">TXT - 文本记录</SelectItem>
+							<SelectItem value="NS">NS - 域名服务器</SelectItem>
+						</SelectContent>
+					</Select>
+				</div>
+
+				<!-- 主机记录 -->
+				<div class="space-y-2">
+					<Label for="host">主机记录</Label>
+					<Input 
+						id="host"
+						v-model="form.host"
+						placeholder="例如: www 或 @ (留空表示根域名)"
+						required
+					/>
+					<p class="text-xs text-gray-500">
+						@ 表示根域名，www 表示 www.yourdomain.com
+					</p>
+				</div>
+
+				<!-- 记录值 -->
+				<div class="space-y-2">
+					<Label for="value">记录值</Label>
+					<Input 
+						id="value"
+						v-model="form.value"
+						:placeholder="getValuePlaceholder()"
+						required
+					/>
+					<p class="text-xs text-gray-500">
+						{{ getValueDescription() }}
+					</p>
+				</div>
+
+				<!-- TTL -->
+				<div class="space-y-2">
+					<Label for="ttl">TTL (秒)</Label>
+					<Input 
+						id="ttl"
+						v-model.number="form.ttl"
+						type="number"
+						min="60"
+						max="86400"
+						placeholder="600"
+					/>
+					<p class="text-xs text-gray-500">
+						建议值：600秒 (10分钟) 到 86400秒 (24小时)
+					</p>
+				</div>
+
+				<!-- MX优先级 (仅MX记录显示) -->
+				<div v-if="form.record_type === 'MX'" class="space-y-2">
+					<Label for="mx-priority">MX优先级</Label>
+					<Input 
+						id="mx-priority"
+						v-model.number="form.mx_priority"
+						type="number"
+						min="0"
+						max="65535"
+						placeholder="10"
+					/>
+					<p class="text-xs text-gray-500">
+						数值越小优先级越高，建议值：10
+					</p>
+				</div>
+			</form>
+
+			<DialogFooter>
+				<Button @click="$emit('close')" variant="outline">
+					取消
+				</Button>
+				<Button @click="submitForm" :loading="loading" variant="solid">
+					保存修改
+				</Button>
+			</DialogFooter>
+		</DialogContent>
+	</Dialog>
+</template>
+
+<script>
+import { 
+	Dialog, 
+	DialogContent, 
+	DialogHeader, 
+	DialogTitle, 
+	DialogDescription, 
+	DialogFooter,
+	Button,
+	Input,
+	Label,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+	createResource
+} from 'jingrow-ui';
+import { toast } from 'vue-sonner';
+import { getToastErrorMessage } from '../utils/toast';
+
+export default {
+	name: 'JsiteDomainEditDNSRecordDialog',
+	props: ['domain', 'domainDoc', 'record', 'onSuccess'],
+	emits: ['close'],
+	data() {
+		return {
+			loading: false,
+			form: {
+				record_type: 'A',
+				host: '',
+				value: '',
+				ttl: 600,
+				mx_priority: 10
+			}
+		};
+	},
+	methods: {
+		// 初始化表单数据
+		initForm() {
+			if (this.record) {
+				this.form = {
+					record_type: this.record.type || 'A',
+					host: this.record.item || this.record.host || '',
+					value: this.record.value || '',
+					ttl: this.record.ttl || 600,
+					mx_priority: this.record.level || this.record.mx_priority || 10
+				};
+			}
+		},
+
+		// 获取记录值占位符
+		getValuePlaceholder() {
+			const placeholders = {
+				'A': '例如: 192.168.1.1',
+				'AAAA': '例如: 2001:db8::1',
+				'CNAME': '例如: example.com',
+				'MX': '例如: mail.example.com',
+				'TXT': '例如: 验证字符串',
+				'NS': '例如: ns1.example.com'
+			};
+			return placeholders[this.form.record_type] || '';
+		},
+
+		// 获取记录值描述
+		getValueDescription() {
+			const descriptions = {
+				'A': '输入IPv4地址，如：192.168.1.1',
+				'AAAA': '输入IPv6地址，如：2001:db8::1',
+				'CNAME': '输入目标域名，如：example.com',
+				'MX': '输入邮件服务器域名，如：mail.example.com',
+				'TXT': '输入文本内容，常用于域名验证',
+				'NS': '输入域名服务器地址，如：ns1.example.com'
+			};
+			return descriptions[this.form.record_type] || '';
+		},
+
+		// 验证表单
+		validateForm() {
+			if (!this.form.record_type) {
+				toast.error('请选择记录类型');
+				return false;
+			}
+			if (!this.form.value) {
+				toast.error('请输入记录值');
+				return false;
+			}
+			if (this.form.ttl < 60 || this.form.ttl > 86400) {
+				toast.error('TTL值必须在60-86400秒之间');
+				return false;
+			}
+			if (this.form.record_type === 'MX' && (this.form.mx_priority < 0 || this.form.mx_priority > 65535)) {
+				toast.error('MX优先级必须在0-65535之间');
+				return false;
+			}
+			return true;
+		},
+
+		// 提交表单
+		async submitForm() {
+			if (!this.validateForm()) {
+				return;
+			}
+
+			this.loading = true;
+
+			try {
+				// 构建记录数据
+				const recordData = {
+					id: this.record.id,
+					type: this.form.record_type,
+					host: this.form.host || '@',
+					value: this.form.value,
+					ttl: this.form.ttl
+				};
+
+				// 如果是MX记录，添加优先级
+				if (this.form.record_type === 'MX') {
+					recordData.level = this.form.mx_priority;
+				}
+
+				const request = createResource({
+					url: 'jcloud.api.domain_west.west_domain_modify_dns',
+					params: {
+						domain: this.domainDoc.domain,
+						records: [recordData]
+					},
+					onSuccess: (response) => {
+						this.loading = false;
+						if (response.status === 'success') {
+							toast.success('DNS记录更新成功');
+							this.$emit('close');
+							if (this.onSuccess) {
+								this.onSuccess();
+							}
+						} else {
+							toast.error(response.message || '更新DNS记录失败');
+						}
+					},
+					onError: (error) => {
+						this.loading = false;
+						toast.error(getToastErrorMessage(error));
+					}
+				});
+				request.submit();
+			} catch (error) {
+				this.loading = false;
+				toast.error('更新DNS记录失败');
+				console.error('更新DNS记录失败:', error);
+			}
+		}
+	},
+	mounted() {
+		this.initForm();
+	}
+};
+</script>
\ No newline at end of file
diff --git a/dashboard/src2/objects/domain.js b/dashboard/src2/objects/domain.js
index 6ee8f19..2731a20 100644
--- a/dashboard/src2/objects/domain.js
+++ b/dashboard/src2/objects/domain.js
@@ -174,6 +174,15 @@ export default {
 				props: domain => {
 					return { domain: domain.pg?.name };
 				}
+			},
+			{
+				label: '域名解析',
+				route: 'dns',
+				type: 'Component',
+				component: defineAsyncComponent(() => import('../components/JsiteDomainDNSRecords.vue')),
+				props: domain => {
+					return { domain: domain.pg?.name };
+				}
 			}
 		],
 		fields: [
diff --git a/jcloud/api/domain_west.py b/jcloud/api/domain_west.py
index ea1c75d..a02a700 100644
--- a/jcloud/api/domain_west.py
+++ b/jcloud/api/domain_west.py
@@ -312,7 +312,7 @@ class WestDomain:
         return self._make_request('/domain/?act=modifydns', 'POST', body_params=body_params)
     
     def add_dns_record(self, domain: str, record_type: str, 
-                      host: str, value: str, ttl: int = 600) -> Dict[str, Any]:
+                      host: str, value: str, ttl: int = 600, level: int = 10) -> Dict[str, Any]:
         """
         添加DNS记录
         
@@ -322,6 +322,7 @@ class WestDomain:
             host: 主机记录
             value: 记录值
             ttl: TTL值
+            level: 优先级（MX记录使用）
         """
         record = {
             'type': record_type,
@@ -329,6 +330,11 @@ class WestDomain:
             'value': value,
             'ttl': ttl,
         }
+        
+        # 如果是MX记录，添加优先级
+        if record_type == 'MX':
+            record['level'] = level
+            
         return self.modify_dns_records(domain, [record])
     
     def delete_dns_record(self, domain: str, record_id: str) -> Dict[str, Any]:
@@ -829,7 +835,23 @@ def west_domain_modify_dns(**data):
     if not records:
         return {"status": "error", "message": "缺少DNS记录参数"}
     
-    return client.modify_dns_records(domain, records)
+    # 处理记录数据，确保MX记录有正确的优先级字段
+    processed_records = []
+    for record in records:
+        processed_record = {
+            'type': record.get('type'),
+            'host': record.get('host'),
+            'value': record.get('value'),
+            'ttl': record.get('ttl', 600)
+        }
+        
+        # 如果是MX记录，添加优先级
+        if record.get('type') == 'MX':
+            processed_record['level'] = record.get('level', 10)
+            
+        processed_records.append(processed_record)
+    
+    return client.modify_dns_records(domain, processed_records)
 
 
 @jingrow.whitelist()
@@ -844,11 +866,12 @@ def west_domain_add_dns_record(**data):
     host = data.get('host')
     value = data.get('value')
     ttl = data.get('ttl', 600)
+    level = data.get('level', 10)
     
     if not all([domain, record_type, host, value]):
         return {"status": "error", "message": "缺少必要参数"}
     
-    return client.add_dns_record(domain, record_type, host, value, ttl)
+    return client.add_dns_record(domain, record_type, host, value, ttl, level)
 
 
 @jingrow.whitelist()