From a46a1f6db894715e6dc82c7f679175b35ffe1930 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 9 Aug 2025 19:29:30 +0800
Subject: [PATCH] =?UTF-8?q?dashboard=E6=9C=8D=E5=8A=A1=E5=99=A8=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E5=A2=9E=E5=8A=A0=E9=98=B2=E7=81=AB=E5=A2=99?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=A1=B5=E5=B9=B6=E5=AE=9E=E7=8E=B0=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/JsiteServerFirewallRules.vue   | 606 ++++++++++++++++++
 dashboard/src2/objects/jsite_server.js        |   9 +
 2 files changed, 615 insertions(+)
 create mode 100644 dashboard/src2/components/JsiteServerFirewallRules.vue

diff --git a/dashboard/src2/components/JsiteServerFirewallRules.vue b/dashboard/src2/components/JsiteServerFirewallRules.vue
new file mode 100644
index 0000000..645a37c
--- /dev/null
+++ b/dashboard/src2/components/JsiteServerFirewallRules.vue
@@ -0,0 +1,606 @@
+<template>
+	<div class="space-y-6">
+		<!-- 标题和操作按钮 -->
+		<div class="flex items-center justify-between">
+			<div>
+			</div>
+			<div class="flex gap-2">
+				<Button 
+					@click="refreshRules"
+					:loading="$resources.firewallRules.loading"
+					variant="outline"
+					size="sm"
+				>
+					<RefreshCwIcon class="h-4 w-4 mr-1" />
+					刷新
+				</Button>
+				<Button 
+					v-if="selectedRules.length > 0"
+					@click="batchDeleteRules"
+					variant="outline"
+					size="sm"
+					class="text-red-600 hover:text-red-700"
+				>
+					<Trash2Icon class="h-4 w-4 mr-1" />
+					删除选中 ({{ selectedRules.length }})
+				</Button>
+				<Button 
+					@click="addNewRow"
+					variant="solid"
+					size="sm"
+				>
+					<PlusIcon class="h-4 w-4 mr-1" />
+					添加规则
+				</Button>
+			</div>
+		</div>
+
+		<!-- 加载状态 -->
+		<div v-if="$resources.firewallRules.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">正在加载防火墙规则...</span>
+			</div>
+		</div>
+
+		<!-- 错误状态 -->
+		<div v-else-if="$resources.firewallRules.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">{{ $resources.firewallRules.error }}</p>
+				</div>
+			</div>
+		</div>
+
+		<!-- 防火墙规则列表 -->
+		<div v-else-if="!$resources.firewallRules.loading && !$resources.firewallRules.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">
+						<tr>
+							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+								<input 
+									type="checkbox" 
+									class="rounded border-gray-300" 
+									:checked="isAllSelected"
+									:indeterminate="isIndeterminate"
+									@change="toggleSelectAll"
+								/>
+							</th>
+							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+								规则ID
+							</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">
+								来源IP
+							</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>
+						</tr>
+					</thead>
+					<tbody class="bg-white divide-y divide-gray-200">
+						<!-- 现有规则 -->
+						<tr v-for="(rule, index) in firewallRules" :key="rule.rule_id || `temp-${index}`" class="hover:bg-gray-50">
+							<td class="px-4 py-4 whitespace-nowrap">
+								<input 
+									type="checkbox" 
+									class="rounded border-gray-300" 
+									:checked="selectedRules.includes(String(rule.rule_id))"
+									@change="toggleRuleSelection(rule.rule_id)"
+									:disabled="rule.isNew"
+								/>
+							</td>
+							<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">
+								{{ rule.rule_id || '-' }}
+							</td>
+							<td class="px-4 py-4 whitespace-nowrap">
+								<!-- 协议编辑 -->
+								<div v-if="rule.editing" class="flex items-center space-x-2">
+									<select 
+										v-model="rule.protocol" 
+										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="TCP">TCP</option>
+										<option value="UDP">UDP</option>
+										<option value="ICMP">ICMP</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-blue-100 text-blue-800': rule.protocol === 'TCP',
+											'bg-green-100 text-green-800': rule.protocol === 'UDP',
+											'bg-yellow-100 text-yellow-800': rule.protocol === 'ICMP',
+											'bg-gray-100 text-gray-800': !rule.protocol
+										}">
+										{{ rule.protocol || '未知' }}
+									</span>
+								</div>
+							</td>
+							<td class="px-4 py-4 whitespace-nowrap">
+								<!-- 端口范围编辑 -->
+								<div v-if="rule.editing" class="flex items-center space-x-2">
+									<input 
+										v-model="rule.port" 
+										type="text" 
+										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"
+										placeholder="端口范围"
+									/>
+								</div>
+								<div v-else class="text-sm text-gray-900">
+									{{ rule.port || '-' }}
+								</div>
+							</td>
+							<td class="px-4 py-4 whitespace-nowrap">
+								<div class="text-sm text-gray-900 max-w-xs truncate" :title="rule.source_ip">
+									{{ rule.source_ip || '0.0.0.0/0' }}
+								</div>
+							</td>
+							<td class="px-4 py-4 whitespace-nowrap">
+								<!-- 备注编辑 -->
+								<div v-if="rule.editing" class="flex items-center space-x-2">
+									<input 
+										v-model="rule.remark" 
+										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-500 max-w-xs truncate" :title="rule.remark">
+									{{ rule.remark || '-' }}
+								</div>
+							</td>
+							<td class="px-4 py-4 whitespace-nowrap text-sm">
+								<div class="flex items-center space-x-1">
+									<Button 
+										v-if="rule.editing"
+										@click="saveRule(rule)"
+										variant="ghost"
+										size="sm"
+										class="text-green-600 hover:text-green-700"
+									>
+										保存
+									</Button>
+									<Button 
+										v-if="rule.editing"
+										@click="cancelEdit(rule)"
+										variant="ghost"
+										size="sm"
+										class="text-gray-600 hover:text-gray-700"
+									>
+										取消
+									</Button>
+									<Button 
+										v-if="!rule.editing && !rule.isNew"
+										@click="deleteRule(rule)"
+										variant="ghost"
+										size="sm"
+										class="text-red-600 hover:text-red-700"
+									>
+										删除
+									</Button>
+								</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+
+			<!-- 分页 -->
+			<div v-if="pagination.total > pagination.limit" class="flex flex-col items-center space-y-4">
+				<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"
+						class="px-3"
+					>
+						←
+					</Button>
+					<div class="flex items-center space-x-1">
+						<Button 
+							v-for="page in getVisiblePages()" 
+							:key="page"
+							@click="changePage(page)"
+							:class="[
+								'px-3 py-1 text-sm rounded',
+								page === pagination.pageno 
+									? '!bg-[#1fc76f] text-white' 
+									: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
+							]"
+							:disabled="page === pagination.pageno"
+						>
+							{{ page }}
+						</Button>
+					</div>
+					<Button 
+						@click="changePage(pagination.pageno + 1)"
+						:disabled="pagination.pageno >= pagination.pagecount"
+						variant="outline"
+						size="sm"
+						class="px-3"
+					>
+						→
+					</Button>
+				</div>
+			</div>
+		</div>
+
+		<!-- 空状态 -->
+		<div v-else-if="!$resources.firewallRules.loading && !$resources.firewallRules.error && firewallRules.length === 0" class="text-center py-12">
+			<ShieldIcon class="mx-auto h-12 w-12 text-gray-400" />
+			<h3 class="mt-2 text-sm font-medium text-gray-900">暂无防火墙规则</h3>
+			<p class="mt-1 text-sm text-gray-500">开始添加您的第一个防火墙规则</p>
+			<div class="mt-6">
+				<Button @click="addNewRow" 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 ShieldIcon from '~icons/lucide/shield';
+import SettingsIcon from '~icons/lucide/settings';
+
+export default {
+	name: 'JsiteServerFirewallRules',
+	props: ['server'],
+	data() {
+		return {
+			firewallRules: [],
+			pagination: {
+				pageno: 1,
+				limit: 10,
+				total: 0,
+				pagecount: 0
+			},
+			selectedRules: [] // 用于存储选中的规则ID
+		};
+	},
+	resources: {
+		firewallRules() {
+			return {
+				url: 'jcloud.api.aliyun_server_light.get_aliyun_firewall_rules',
+				params: {
+					instance_id: this.$jsiteServer.pg?.instance_id,
+					region_id: this.$jsiteServer.pg?.region
+				},
+				auto: true,
+				onSuccess: (response) => {
+					if (response.success && response.data) {
+						// 直接使用API返回的防火墙规则数据
+						const firewallRules = response.data.firewall_rules || [];
+						this.firewallRules = firewallRules.map(rule => ({
+							rule_id: rule.rule_id,
+							protocol: rule.protocol,
+							port: rule.port,
+							source_ip: rule.source_ip,
+							remark: rule.remark,
+							editing: false,
+							isNew: false
+						}));
+						
+						// 简单分页处理
+						const total = this.firewallRules.length;
+						const limit = this.pagination.limit;
+						const pageno = this.pagination.pageno;
+						const start = (pageno - 1) * limit;
+						const end = start + limit;
+						
+						this.pagination = {
+							pageno: pageno,
+							limit: limit,
+							total: total,
+							pagecount: Math.ceil(total / limit)
+						};
+						
+						// 对当前页的数据进行切片
+						this.firewallRules = this.firewallRules.slice(start, end);
+					} else {
+						this.error = response.message || '获取防火墙规则失败';
+					}
+				},
+				onError: (error) => {
+					this.error = getToastErrorMessage(error);
+				}
+			};
+		}
+	},
+	methods: {
+		// 刷新规则
+		refreshRules() {
+			this.$resources.firewallRules.reload();
+		},
+
+		// 切换页面
+		changePage(page) {
+			if (page >= 1 && page <= this.pagination.pagecount) {
+				this.pagination.pageno = page;
+				this.$resources.firewallRules.reload();
+			}
+		},
+
+		// 添加新行
+		addNewRow() {
+			const newRule = {
+				rule_id: null,
+				protocol: 'TCP',
+				port: '',
+				source_ip: '0.0.0.0/0',
+				remark: '',
+				editing: true,
+				isNew: true
+			};
+			
+			// 添加新规则到最前面
+			this.firewallRules.unshift(newRule);
+		},
+
+		// 保存规则
+		async saveRule(rule) {
+			if (!rule.protocol || !rule.port) {
+				toast.error('协议和端口不能为空');
+				return;
+			}
+
+			try {
+				const request = createResource({
+					url: 'jcloud.api.aliyun_server_light.create_aliyun_firewall_rule',
+					params: {
+						instance_id: this.$jsiteServer.pg.instance_id,
+						rule_protocol: rule.protocol,
+						port: rule.port,
+						remark: rule.remark,
+						region_id: this.$jsiteServer.pg.region
+					},
+					onSuccess: (response) => {
+						if (response.success) {
+							toast.success('防火墙规则保存成功');
+							rule.editing = false;
+							rule.isNew = false;
+							// 重新加载规则列表
+							setTimeout(() => {
+								this.$resources.firewallRules.reload();
+							}, 1000);
+						} else {
+							toast.error(response.message || '保存防火墙规则失败');
+						}
+					},
+					onError: (error) => {
+						toast.error(getToastErrorMessage(error));
+					}
+				});
+				request.submit();
+			} catch (error) {
+				toast.error('保存防火墙规则失败');
+				console.error('保存防火墙规则失败:', error);
+			}
+		},
+
+		// 取消编辑
+		cancelEdit(rule) {
+			if (rule.isNew) {
+				// 如果是新增规则，直接删除
+				const index = this.firewallRules.indexOf(rule);
+				if (index > -1) {
+					this.firewallRules.splice(index, 1);
+				}
+			} else {
+				// 如果是编辑中的规则，恢复其原始值
+				if (rule._original) {
+					Object.assign(rule, rule._original);
+					delete rule._original;
+				}
+				rule.editing = false;
+			}
+		},
+
+		// 删除规则
+		deleteRule(rule) {
+			confirmDialog({
+				title: '删除防火墙规则',
+				message: `确定要删除这条防火墙规则吗？\n协议: ${rule.protocol}\n端口: ${rule.port}`,
+				primaryAction: {
+					label: '确定',
+					variant: 'solid',
+					class: 'bg-black text-white hover:bg-gray-800',
+					onClick: ({ hide }) => {
+						this.performDeleteRule(rule, hide);
+					}
+				}
+			});
+		},
+
+		// 执行删除规则
+		async performDeleteRule(rule, hide) {
+			try {
+				const request = createResource({
+					url: 'jcloud.api.aliyun_server_light.delete_aliyun_firewall_rules',
+					params: {
+						instance_id: this.$jsiteServer.pg.instance_id,
+						region_id: this.$jsiteServer.pg.region,
+						rule_ids: [rule.rule_id]
+					},
+					onSuccess: (response) => {
+						if (response.success) {
+							toast.success('防火墙规则删除成功');
+							hide();
+							setTimeout(() => {
+								this.$resources.firewallRules.reload();
+							}, 1000);
+						} else {
+							toast.error(response.message || '删除防火墙规则失败');
+						}
+					},
+					onError: (error) => {
+						toast.error(getToastErrorMessage(error));
+					}
+				});
+				request.submit();
+			} catch (error) {
+				toast.error('删除防火墙规则失败');
+				console.error('删除防火墙规则失败:', error);
+			}
+		},
+
+		// 批量删除规则
+		async batchDeleteRules() {
+			if (this.selectedRules.length === 0) {
+				toast.info('请选择要删除的规则');
+				return;
+			}
+
+			confirmDialog({
+				title: '批量删除防火墙规则',
+				message: `确定要删除选中的 ${this.selectedRules.length} 条防火墙规则吗？`,
+				primaryAction: {
+					label: '确定',
+					variant: 'solid',
+					class: 'bg-black text-white hover:bg-gray-800',
+					onClick: ({ hide }) => {
+						this.performBatchDeleteRules(this.selectedRules, hide);
+					}
+				}
+			});
+		},
+
+		// 执行批量删除规则
+		async performBatchDeleteRules(ruleIds, hide) {
+			const validRuleIds = ruleIds.filter(id => id);
+			
+			if (validRuleIds.length === 0) {
+				toast.error('没有有效的规则可以删除');
+				return;
+			}
+			
+			try {
+				const request = createResource({
+					url: 'jcloud.api.aliyun_server_light.delete_aliyun_firewall_rules',
+					params: {
+						instance_id: this.$jsiteServer.pg.instance_id,
+						region_id: this.$jsiteServer.pg.region,
+						rule_ids: validRuleIds
+					},
+					onSuccess: (response) => {
+						if (response.success) {
+							toast.success(response.message || `批量删除 ${validRuleIds.length} 条防火墙规则成功`);
+							hide();
+							setTimeout(() => {
+								this.$resources.firewallRules.reload();
+							}, 1000);
+							this.selectedRules = []; // 清空选中
+						} else {
+							toast.error(response.message || '批量删除防火墙规则失败');
+						}
+					},
+					onError: (error) => {
+						toast.error(getToastErrorMessage(error));
+					}
+				});
+				request.submit();
+			} catch (error) {
+				toast.error('批量删除防火墙规则失败');
+				console.error('批量删除防火墙规则失败:', error);
+			}
+		},
+
+		// 切换规则选中状态
+		toggleRuleSelection(ruleId) {
+			if (!ruleId) return;
+			
+			const ruleIdStr = String(ruleId);
+			const index = this.selectedRules.indexOf(ruleIdStr);
+			if (index > -1) {
+				this.selectedRules.splice(index, 1);
+			} else {
+				this.selectedRules.push(ruleIdStr);
+			}
+		},
+
+		// 全选/取消全选
+		toggleSelectAll(event) {
+			const checkbox = event.target;
+			if (checkbox.checked) {
+				this.selectedRules = this.firewallRules
+					.filter(rule => rule.rule_id && !rule.isNew)
+					.map(rule => String(rule.rule_id));
+			} else {
+				this.selectedRules = [];
+			}
+		},
+
+		// 获取可见的页码
+		getVisiblePages() {
+			const current = this.pagination.pageno;
+			const total = this.pagination.pagecount;
+			const pages = [];
+			
+			if (total <= 5) {
+				for (let i = 1; i <= total; i++) {
+					pages.push(i);
+				}
+			} else {
+				const start = Math.max(1, current - 2);
+				const end = Math.min(total, current + 2);
+				
+				for (let i = start; i <= end; i++) {
+					pages.push(i);
+				}
+			}
+			
+			return pages;
+		}
+	},
+	computed: {
+		$jsiteServer() {
+			return getCachedDocumentResource('Jsite Server', this.server);
+		},
+		
+		// 判断是否全选
+		isAllSelected() {
+			const validRules = this.firewallRules.filter(rule => rule.rule_id && !rule.isNew);
+			return validRules.length > 0 && this.selectedRules.length === validRules.length;
+		},
+
+		// 判断是否半选
+		isIndeterminate() {
+			const validRules = this.firewallRules.filter(rule => rule.rule_id && !rule.isNew);
+			return this.selectedRules.length > 0 && this.selectedRules.length < validRules.length;
+		}
+	},
+	mounted() {
+		// 组件会自动加载防火墙规则，因为resources设置了auto: true
+	}
+};
+</script> 
\ No newline at end of file
diff --git a/dashboard/src2/objects/jsite_server.js b/dashboard/src2/objects/jsite_server.js
index b82bccb..71760df 100644
--- a/dashboard/src2/objects/jsite_server.js
+++ b/dashboard/src2/objects/jsite_server.js
@@ -272,6 +272,15 @@ export default {
 				props: jsiteServer => {
 					return { server: jsiteServer.pg?.name };
 				}
+			},
+			{
+				label: '防火墙',
+				route: 'firewall',
+				type: 'Component',
+				component: defineAsyncComponent(() => import('../components/JsiteServerFirewallRules.vue')),
+				props: jsiteServer => {
+					return { server: jsiteServer.pg?.name };
+				}
 			}
 		],
 		fields: [