修复添加修改删除域名解析记录无效的问题

dashboard/src2/components/JsiteDomainDNSRecords.vue

@@ -3,7 +3,7 @@
 		<!-- 标题和操作按钮 -->
 		<div class="flex items-center justify-between">
 			<div>
-				<h2 class="text-lg font-medium text-gray-900">域名解析记录</h2>
+				<h2 class="text-lg font-medium text-gray-900">DNS解析记录</h2>
 				<p class="mt-1 text-sm text-gray-500">管理域名的DNS解析记录</p>
 			</div>
 			<div class="flex gap-2">
@@ -17,12 +17,12 @@
 					刷新
 				</Button>
 				<Button 
-					@click="showAddRecordDialog"
+					@click="addNewRow"
 					variant="solid"
 					size="sm"
 				>
 					<PlusIcon class="h-4 w-4 mr-1" />
-					添加记录
+					添加行
 				</Button>
 			</div>
 		</div>
@@ -47,7 +47,7 @@
 		</div>
 
 		<!-- DNS记录列表 -->
-		<div v-else-if="dnsRecords.length > 0" class="space-y-4">
+		<div v-else-if="!loading && !error" 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">
@@ -56,16 +56,19 @@
 								<input type="checkbox" class="rounded border-gray-300" />
 							</th>
 							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-								主机名
+								编号
 							</th>
 							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-								类型
+								主机名 *
 							</th>
 							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-								线路类型
+								类型 *
 							</th>
 							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-								对应值
+								线路
+							</th>
+							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+								对应值 *
 							</th>
 							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
 								TTL
@@ -77,43 +80,125 @@
 								状态
 							</th>
 							<th class="px-4 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">
+						<!-- 现有记录 -->
+						<tr v-for="(record, index) in dnsRecords" :key="record.id || `temp-${index}`" class="hover:bg-gray-50">
 							<td class="px-4 py-4 whitespace-nowrap">
 								<input type="checkbox" class="rounded border-gray-300" />
 							</td>
-							<td class="px-4 py-4 whitespace-nowrap text-sm  text-gray-900">
+							<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">
-								{{ record.item }}
+								{{ index + 1 }}
 							</td>
 							<td class="px-4 py-4 whitespace-nowrap">
-								<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" 
+								<!-- 主机名编辑 -->
-									:class="{
+								<div v-if="record.editing" class="flex items-center space-x-2">
-										'bg-green-100 text-green-800': record.type === 'A',
+									<input 
-										'bg-blue-100 text-blue-800': record.type === 'AAAA',
+										v-model="record.item" 
-										'bg-yellow-100 text-yellow-800': record.type === 'CNAME',
+										type="text" 
-										'bg-purple-100 text-purple-800': record.type === 'MX',
+										class="w-24 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-										'bg-gray-100 text-gray-800': record.type === 'TXT',
+										placeholder="主机名"
-										'bg-orange-100 text-orange-800': record.type === 'NS',
+									/>
-										'bg-gray-100 text-gray-800': !record.type
+								</div>
-									}">
+								<div v-else class="text-sm text-gray-900">
-									{{ record.type || '未知' }}
+									{{ record.item || '-' }}
-								</span>
+								</div>
 							</td>
-							<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+							<td class="px-4 py-4 whitespace-nowrap">
-								默认
+								<!-- 类型编辑 -->
+								<div v-if="record.editing" class="flex items-center space-x-2">
+									<select 
+										v-model="record.type" 
+										class="w-20 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+									>
+										<option value="A">A</option>
+										<option value="AAAA">AAAA</option>
+										<option value="CNAME">CNAME</option>
+										<option value="MX">MX</option>
+										<option value="TXT">TXT</option>
+										<option value="SRV">SRV</option>
+									</select>
+								</div>
+								<div v-else>
+									<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" 
+										:class="{
+											'bg-green-100 text-green-800': record.type === 'A',
+											'bg-blue-100 text-blue-800': record.type === 'AAAA',
+											'bg-yellow-100 text-yellow-800': record.type === 'CNAME',
+											'bg-purple-100 text-purple-800': record.type === 'MX',
+											'bg-gray-100 text-gray-800': record.type === 'TXT',
+											'bg-orange-100 text-orange-800': record.type === 'SRV',
+											'bg-gray-100 text-gray-800': !record.type
+										}">
+										{{ record.type || '未知' }}
+									</span>
+								</div>
 							</td>
-							<td class="px-4 py-4 whitespace-nowrap text-sm  text-gray-900 max-w-xs truncate" :title="record.value">
+							<td class="px-4 py-4 whitespace-nowrap">
-								{{ record.value }}
+								<!-- 线路编辑 -->
+								<div v-if="record.editing" class="flex items-center space-x-2">
+									<select 
+										v-model="record.line" 
+										class="w-20 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+									>
+										<option value="">默认</option>
+										<option value="LTEL">电信</option>
+										<option value="LCNC">联通</option>
+										<option value="LMOB">移动</option>
+										<option value="LEDU">教育网</option>
+										<option value="LSEO">搜索引擎</option>
+									</select>
+								</div>
+								<div v-else class="text-sm text-gray-500">
+									{{ getLineDisplayName(record.line) }}
+								</div>
 							</td>
-							<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+							<td class="px-4 py-4 whitespace-nowrap">
-								{{ record.ttl || '600' }}
+								<!-- 对应值编辑 -->
+								<div v-if="record.editing" class="flex items-center space-x-2">
+									<input 
+										v-model="record.value" 
+										type="text" 
+										class="w-32 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+										placeholder="记录值"
+									/>
+								</div>
+								<div v-else class="text-sm text-gray-900 max-w-xs truncate" :title="record.value">
+									{{ record.value || '-' }}
+								</div>
 							</td>
-							<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+							<td class="px-4 py-4 whitespace-nowrap">
-								{{ record.type === 'MX' && record.level ? record.level : '-' }}
+								<!-- TTL编辑 -->
+								<div v-if="record.editing" class="flex items-center space-x-2">
+									<input 
+										v-model="record.ttl" 
+										type="number" 
+										min="60" 
+										max="86400"
+										class="w-20 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+									/>
+								</div>
+								<div v-else class="text-sm text-gray-500">
+									{{ record.ttl || '600' }}
+								</div>
+							</td>
+							<td class="px-4 py-4 whitespace-nowrap">
+								<!-- 优先级编辑 -->
+								<div v-if="record.editing" class="flex items-center space-x-2">
+									<input 
+										v-model="record.level" 
+										type="number" 
+										min="1" 
+										max="100"
+										class="w-16 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+									/>
+								</div>
+								<div v-else class="text-sm text-gray-500">
+									{{ record.type === 'MX' && record.level ? record.level : '-' }}
+								</div>
 							</td>
 							<td class="px-4 py-4 whitespace-nowrap text-sm">
 								<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
@@ -123,12 +208,40 @@
 							<td class="px-4 py-4 whitespace-nowrap text-sm">
 								<div class="flex items-center space-x-1">
 									<Button 
+										v-if="!record.editing"
 										@click="editRecord(record)"
 										variant="ghost"
 										size="sm"
 										class="text-blue-600 hover:text-blue-700"
 									>
-										修改
+										✏️
+									</Button>
+									<Button 
+										v-if="record.editing"
+										@click="saveRecord(record)"
+										variant="ghost"
+										size="sm"
+										class="text-green-600 hover:text-green-700"
+									>
+										保存
+									</Button>
+									<Button 
+										v-if="record.editing"
+										@click="cancelEdit(record)"
+										variant="ghost"
+										size="sm"
+										class="text-gray-600 hover:text-gray-700"
+									>
+										取消
+									</Button>
+									<Button 
+										v-if="!record.editing && !record.isNew"
+										@click="deleteRecord(record)"
+										variant="ghost"
+										size="sm"
+										class="text-red-600 hover:text-red-700"
+									>
+										删除
 									</Button>
 								</div>
 							</td>
@@ -187,12 +300,12 @@
 		</div>
 
 		<!-- 空状态 -->
-		<div v-else class="text-center py-12">
+		<div v-else-if="!loading && !error && dnsRecords.length === 0" 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">
+				<Button @click="addNewRow" variant="solid">
 					<PlusIcon class="h-4 w-4 mr-1" />
 					添加记录
 				</Button>
@@ -253,7 +366,12 @@ export default {
 					onSuccess: (response) => {
 						this.loading = false;
 						if (response.status === 'success' && response.data) {
-							this.dnsRecords = response.data.items || [];
+							// 为每个记录添加编辑状态
+							this.dnsRecords = (response.data.items || []).map(record => ({
+								...record,
+								editing: false,
+								isNew: false
+							}));
 							this.pagination = {
 								pageno: response.data.pageno || 1,
 								limit: response.data.limit || 20,
@@ -303,27 +421,130 @@ export default {
 			return variantMap[type] || 'default';
 		},
 
-		// 显示添加记录对话框
+		// 获取线路显示名称
-		showAddRecordDialog() {
+		getLineDisplayName(line) {
-			const JsiteDomainAddDNSRecordDialog = defineAsyncComponent(() => import('./JsiteDomainAddDNSRecordDialog.vue'));
+			const lineMap = {
-			
+				'LTEL': '电信',
-			renderDialog(h(JsiteDomainAddDNSRecordDialog, {
+				'LCNC': '联通',
-				domain: this.domain,
+				'LMOB': '移动',
-				domainDoc: this.$domain.pg,
+				'LEDU': '教育网',
-				onSuccess: this.onRecordAdded
+				'LSEO': '搜索引擎',
-			}));
+				'': '默认'
+			};
+			return lineMap[line] || line;
+		},
+
+		// 添加新行
+		addNewRow() {
+			this.dnsRecords.push({
+				id: null, // 新增记录没有ID
+				item: '',
+				type: 'A',
+				line: '',
+				value: '',
+				ttl: 600,
+				level: 10,
+				editing: true, // 新增记录直接进入编辑模式
+				isNew: true
+			});
 		},
 
 		// 编辑记录
 		editRecord(record) {
-			const JsiteDomainEditDNSRecordDialog = defineAsyncComponent(() => import('./JsiteDomainEditDNSRecordDialog.vue'));
+			// 保存原始值用于取消编辑
-			
+			record._original = { ...record };
-			renderDialog(h(JsiteDomainEditDNSRecordDialog, {
+			record.editing = true;
-				domain: this.domain,
+			record.isNew = false; // 确保不是新增记录
-				domainDoc: this.$domain.pg,
+		},
-				record: record,
+
-				onSuccess: this.onRecordUpdated
+		// 保存记录
-			}));
+		async saveRecord(record) {
+			if (!record.item || !record.type || !record.value) {
+				toast.error('主机名、类型和记录值不能为空');
+				return;
+			}
+
+			// 验证TTL值
+			if (record.ttl < 60 || record.ttl > 86400) {
+				toast.error('TTL值必须在60~86400秒之间');
+				return;
+			}
+
+			// 验证优先级
+			if (record.level < 1 || record.level > 100) {
+				toast.error('优先级必须在1~100之间');
+				return;
+			}
+
+			try {
+				let url, params;
+
+				if (record.isNew) {
+					// 新增记录
+					url = 'jcloud.api.domain_west.west_domain_add_dns_record';
+					params = {
+						domain: this.$domain.pg.domain,
+						record_type: record.type,
+						host: record.item,
+						value: record.value,
+						ttl: record.ttl,
+						level: record.level,
+						line: record.line
+					};
+				} else {
+					// 修改记录
+					url = 'jcloud.api.domain_west.west_domain_modify_dns_record';
+					params = {
+						domain: this.$domain.pg.domain,
+						record_id: record.id,
+						value: record.value,
+						ttl: record.ttl,
+						level: record.level,
+						line: record.line
+					};
+				}
+
+				const request = createResource({
+					url: url,
+					params: params,
+					onSuccess: (response) => {
+						if (response.status === 'success') {
+							toast.success('DNS记录保存成功');
+							record.editing = false;
+							record.isNew = false;
+							// 重新加载记录列表
+							this.loadDNSRecords();
+						} else {
+							toast.error(response.message || '保存DNS记录失败');
+						}
+					},
+					onError: (error) => {
+						toast.error(getToastErrorMessage(error));
+					}
+				});
+				request.submit();
+			} catch (error) {
+				toast.error('保存DNS记录失败');
+				console.error('保存DNS记录失败:', error);
+			}
+		},
+
+		// 取消编辑
+		cancelEdit(record) {
+			if (record.isNew) {
+				// 如果是新增记录，直接删除
+				const index = this.dnsRecords.indexOf(record);
+				if (index > -1) {
+					this.dnsRecords.splice(index, 1);
+				}
+			} else {
+				// 如果是编辑中的记录，恢复其原始值
+				if (record._original) {
+					Object.assign(record, record._original);
+					delete record._original;
+				}
+				record.editing = false;
+			}
 		},
 
 		// 删除记录
@@ -350,10 +571,14 @@ export default {
 						domain: this.$domain.pg.domain,
 						record_id: record.id
 					},
-					onSuccess: () => {
+					onSuccess: (response) => {
-						toast.success('DNS记录删除成功');
+						if (response.status === 'success') {
-						hide();
+							toast.success('DNS记录删除成功');
-						this.loadDNSRecords();
+							hide();
+							this.loadDNSRecords();
+						} else {
+							toast.error(response.message || '删除DNS记录失败');
+						}
 					},
 					onError: (error) => {
 						toast.error(getToastErrorMessage(error));
@@ -364,18 +589,6 @@ export default {
 				toast.error('删除DNS记录失败');
 				console.error('删除DNS记录失败:', error);
 			}
-		},
-
-		// 记录添加成功回调
-		onRecordAdded() {
-			toast.success('DNS记录添加成功');
-			this.loadDNSRecords();
-		},
-
-		// 记录更新成功回调
-		onRecordUpdated() {
-			toast.success('DNS记录更新成功');
-			this.loadDNSRecords();
 		}
 	},
 	computed: {