From 71b62d9bdfa04353c1030e31d7ee9007f0cabd44 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Tue, 29 Jul 2025 00:45:26 +0800
Subject: [PATCH] =?UTF-8?q?dashbaord=E5=A2=9E=E5=8A=A0Jsite=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E5=99=A8=E8=AF=A6=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src2/components/JsiteServerOverview.vue   | 238 ++++++++++++++++++
 dashboard/src2/objects/jsite_server.js        |   6 +-
 2 files changed, 243 insertions(+), 1 deletion(-)
 create mode 100644 dashboard/src2/components/JsiteServerOverview.vue

diff --git a/dashboard/src2/components/JsiteServerOverview.vue b/dashboard/src2/components/JsiteServerOverview.vue
new file mode 100644
index 0000000..f322746
--- /dev/null
+++ b/dashboard/src2/components/JsiteServerOverview.vue
@@ -0,0 +1,238 @@
+<template>
+	<div
+		v-if="$jsiteServer?.pg"
+		class="grid grid-cols-1 items-start gap-5 lg:grid-cols-2"
+	>
+		<!-- 左侧区块：基本信息 -->
+		<div class="col-span-1 space-y-5">
+			<!-- 服务器状态卡片 -->
+			<div class="rounded-md border">
+				<div class="h-12 border-b px-5 py-4">
+					<h2 class="text-lg font-medium text-gray-900">服务器状态</h2>
+				</div>
+				<div class="p-5">
+					<div class="flex h-full flex-col sm:flex-row sm:items-center sm:justify-between">
+						<div class="mb-4 sm:mb-0">
+							<div class="flex items-center">
+								<span class="text-base font-medium text-gray-900">
+									{{ getStatusText($jsiteServer.pg.status) }}
+								</span>
+								<Badge
+									:label="getStatusText($jsiteServer.pg.status)"
+									:variant="getStatusVariant($jsiteServer.pg.status)"
+									class="ml-2"
+								/>
+							</div>
+							
+							<div v-if="$jsiteServer.pg.end_date" class="mt-2 inline-flex items-center rounded-full bg-amber-50 px-4 py-2 text-sm font-medium text-amber-800">
+								<i-lucide-clock class="mr-1.5 h-4 w-4 text-amber-500" />
+								到期时间：{{ $format.date($jsiteServer.pg.end_date) }}
+							</div>
+						</div>
+						<div class="flex gap-2">
+							<Button 
+								v-if="$jsiteServer.pg.status === 'Running'"
+								@click="rebootServer"
+								:loading="$jsiteServer.reboot.loading"
+								class="px-5 !bg-orange-500 !hover:bg-orange-600 !text-white"
+							>
+								重启
+							</Button>
+							<Button 
+								@click="renameServer"
+								class="bg-gray-100 text-gray-700 hover:bg-gray-200"
+							>
+								重命名
+							</Button>
+						</div>
+					</div>
+				</div>
+			</div>
+			
+			<!-- 服务器信息 -->
+			<div class="rounded-md border">
+				<div class="h-12 border-b px-5 py-4">
+					<h2 class="text-lg font-medium text-gray-900">服务器信息</h2>
+				</div>
+				<div>
+					<div
+						v-for="info in serverInformation"
+						:key="info.label"
+						class="flex items-center px-5 py-3 last:pb-5 even:bg-gray-50/70"
+					>
+						<div class="w-1/3 text-base text-gray-600">{{ info.label }}</div>
+						<div
+							class="flex w-2/3 items-center space-x-2 text-base text-gray-900"
+						>
+							<div v-if="info.prefix">
+								<component :is="info.prefix" />
+							</div>
+							<span>
+								{{ info.value }}
+							</span>
+							<div v-if="info.suffix">
+								<component :is="info.suffix" />
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		
+		<!-- 右侧区块：配置信息 -->
+		<div class="col-span-1 space-y-5">
+			<!-- 服务器配置 -->
+			<div class="rounded-md border">
+				<div class="h-12 border-b px-5 py-4">
+					<h2 class="text-lg font-medium text-gray-900">服务器配置</h2>
+				</div>
+				<div class="p-5">
+					<div class="grid grid-cols-2 gap-4">
+						<div class="text-center">
+							<div class="text-2xl font-bold text-blue-600">{{ $jsiteServer.pg.cpu || '未知' }}</div>
+							<div class="text-sm text-gray-600">CPU核心</div>
+						</div>
+						<div class="text-center">
+							<div class="text-2xl font-bold text-green-600">{{ $jsiteServer.pg.memory || '未知' }}GB</div>
+							<div class="text-sm text-gray-600">内存</div>
+						</div>
+						<div class="text-center">
+							<div class="text-2xl font-bold text-purple-600">{{ $jsiteServer.pg.disk_size || '未知' }}GB</div>
+							<div class="text-sm text-gray-600">磁盘</div>
+						</div>
+						<div class="text-center">
+							<div class="text-2xl font-bold text-orange-600">{{ $jsiteServer.pg.bandwidth || '未知' }}Mbps</div>
+							<div class="text-sm text-gray-600">带宽</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			
+			<!-- SSH连接信息 -->
+			<div class="rounded-md border">
+				<div class="h-12 border-b px-5 py-4">
+					<h2 class="text-lg font-medium text-gray-900">SSH连接</h2>
+				</div>
+				<div class="p-5">
+					<div class="space-y-3">
+						<div class="flex justify-between">
+							<span class="text-gray-600">公网IP:</span>
+							<span class="font-mono text-gray-900">{{ $jsiteServer.pg.public_ip || '未分配' }}</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-gray-600">SSH端口:</span>
+							<span class="font-mono text-gray-900">{{ $jsiteServer.pg.ssh_port || '22' }}</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-gray-600">SSH用户:</span>
+							<span class="font-mono text-gray-900">{{ $jsiteServer.pg.ssh_user || 'root' }}</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-gray-600">密钥对:</span>
+							<span class="font-mono text-gray-900">{{ $jsiteServer.pg.key_pair_name || '未设置' }}</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { getCachedDocumentResource, Badge, Tooltip } from 'jingrow-ui';
+import { h, defineAsyncComponent } from 'vue';
+import { toast } from 'vue-sonner';
+import InfoIcon from '~icons/lucide/info';
+import { getToastErrorMessage } from '../utils/toast';
+
+export default {
+	name: 'JsiteServerOverview',
+	props: ['server'],
+	components: {
+		Badge,
+	},
+	methods: {
+		getStatusText(status) {
+			const statusMap = {
+				'Pending': '待处理',
+				'Starting': '启动中',
+				'Running': '运行中',
+				'Stopping': '停止中',
+				'Stopped': '已停止',
+				'Resetting': '重置中',
+				'Upgrading': '升级中',
+				'Disabled': '已禁用'
+			};
+			return statusMap[status] || status;
+		},
+		getStatusVariant(status) {
+			const variantMap = {
+				'Pending': 'warning',
+				'Starting': 'warning',
+				'Running': 'success',
+				'Stopping': 'warning',
+				'Stopped': 'danger',
+				'Resetting': 'warning',
+				'Upgrading': 'warning',
+				'Disabled': 'danger'
+			};
+			return variantMap[status] || 'default';
+		},
+		rebootServer() {
+			toast.promise(
+				this.$jsiteServer.reboot.submit(),
+				{
+					loading: '正在重启服务器...',
+					success: '服务器重启命令已发送',
+					error: (e) => getToastErrorMessage(e),
+				},
+			);
+		},
+		renameServer() {
+			// 这里可以实现重命名功能
+			toast.info('重命名功能待实现');
+		},
+	},
+	computed: {
+		serverInformation() {
+			return [
+				{
+					label: '服务器名称',
+					value: this.$jsiteServer.pg?.title || this.$jsiteServer.pg?.name,
+				},
+				{
+					label: '实例ID',
+					value: this.$jsiteServer.pg?.instance_id || '未分配',
+				},
+				{
+					label: '订单ID',
+					value: this.$jsiteServer.pg?.order_id || '未分配',
+				},
+				{
+					label: '区域',
+					value: this.$jsiteServer.pg?.region || '未知',
+				},
+				{
+					label: '系统',
+					value: this.$jsiteServer.pg?.system || '未知',
+				},
+				{
+					label: '套餐ID',
+					value: this.$jsiteServer.pg?.planid || '未知',
+				},
+				{
+					label: '镜像ID',
+					value: this.$jsiteServer.pg?.image_id || '未知',
+				},
+				{
+					label: '购买时长',
+					value: this.$jsiteServer.pg?.period ? `${this.$jsiteServer.pg.period}个月` : '未知',
+				},
+			];
+		},
+		$jsiteServer() {
+			return getCachedDocumentResource('Jsite Server', this.server);
+		},
+	},
+};
+</script> 
\ No newline at end of file
diff --git a/dashboard/src2/objects/jsite_server.js b/dashboard/src2/objects/jsite_server.js
index 44e703f..32035c6 100644
--- a/dashboard/src2/objects/jsite_server.js
+++ b/dashboard/src2/objects/jsite_server.js
@@ -197,7 +197,11 @@ export default {
 			{
 				label: '概览',
 				route: '',
-				type: 'fields'
+				type: 'Component',
+				component: defineAsyncComponent(() => import('../components/JsiteServerOverview.vue')),
+				props: jsiteServer => {
+					return { server: jsiteServer.pg?.name };
+				}
 			}
 		],
 		fields: [