jcloud/dashboard/src2/components/JsiteServerOverview.vue

<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 v-if="$jsiteServer.pg.plan_price" class="text-lg font-bold text-green-600">
								¥{{ $jsiteServer.pg.plan_price }}/月
							</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 
								@click="renewServer"
								:loading="$jsiteServer.renew?.loading"
								class="px-5 !bg-[#1fc76f] !hover:bg-[#1bb85f] !text-white"
							>
								续费
							</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="space-y-3">
						<div class="flex justify-between items-center">
							<span class="text-gray-600">CPU核心:</span>
							<span class="text-lg font-semibold text-blue-600">{{ $jsiteServer.pg.cpu || '未知' }}</span>
						</div>
						<div class="flex justify-between items-center">
							<span class="text-gray-600">内存:</span>
							<span class="text-lg font-semibold text-green-600">{{ $jsiteServer.pg.memory || '未知' }}GB</span>
						</div>
						<div class="flex justify-between items-center">
							<span class="text-gray-600">磁盘:</span>
							<span class="text-lg font-semibold text-purple-600">{{ $jsiteServer.pg.disk_size || '未知' }}GB</span>
						</div>
						<div class="flex justify-between items-center">
							<span class="text-gray-600">带宽:</span>
							<span class="text-lg font-semibold text-orange-600">{{ $jsiteServer.pg.bandwidth || '未知' }}Mbps</span>
						</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.password || '未设置' }}</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 class="flex justify-between">
							<span class="text-gray-600">私钥:</span>
							<span class="font-mono text-gray-900">{{ $jsiteServer.pg.private_key || '未设置' }}</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';
		},
		getRegionText(region) {
			const regionMap = {
				'cn-qingdao': '华北1（青岛）',
				'cn-beijing': '华北2（北京）',
				'cn-zhangjiakou': '华北3（张家口）',
				'cn-huhehaote': '华北5（呼和浩特）',
				'cn-hangzhou': '华东1（杭州）',
				'cn-shanghai': '华东2（上海）',
				'cn-shenzhen': '华南1（深圳）',
				'cn-heyuan': '华南2（河源）',
				'cn-chengdu': '西南1（成都）',
				'cn-guangzhou': '华南3（广州）',
				'cn-wulanchabu': '华北6（乌兰察布）',
				'cn-nanjing': '华东5（南京）',
				'cn-fuzhou': '华东6（福州）',
				'cn-wuhan-lr': '华中1（武汉）',
				'cn-hongkong': '中国香港',
				'ap-southeast-1': '新加坡',
				'ap-southeast-3': '马来西亚（吉隆坡）',
				'ap-southeast-5': '印度尼西亚（雅加达）',
				'ap-northeast-1': '日本（东京）',
				'us-west-1': '美国（硅谷）',
				'us-east-1': '美国（弗吉尼亚）',
				'eu-central-1': '德国（法兰克福）',
				'eu-west-1': '英国（伦敦）',
				'ap-southeast-6': '菲律宾（马尼拉）',
				'ap-southeast-7': '泰国（曼谷）',
				'ap-northeast-2': '韩国（首尔）'
			};
			return regionMap[region] || region;
		},
		renewServer() {
			toast.promise(
				this.$jsiteServer.renew?.submit() || Promise.resolve(),
				{
					loading: '正在处理续费请求...',
					success: '续费请求已提交',
					error: (e) => getToastErrorMessage(e),
				},
			);
		},
	},
	computed: {
		serverInformation() {
			return [
				{
					label: '服务器名称',
					value: this.$jsiteServer.pg?.title || this.$jsiteServer.pg?.name,
				},
				{
					label: '实例ID',
					value: this.$jsiteServer.pg?.instance_id || '未分配',
				},
				{
					label: '状态',
					value: this.getStatusText(this.$jsiteServer.pg?.status),
				},
				{
					label: '区域',
					value: this.getRegionText(this.$jsiteServer.pg?.region),
				},
				{
					label: '系统',
					value: this.$jsiteServer.pg?.system || '未知',
				},
			];
		},
		$jsiteServer() {
			return getCachedDocumentResource('Jsite Server', this.server);
		},
	},
};
</script>