jcloud/dashboard/src2/components/Onboarding.vue

<template>
	<div class="mx-auto max-w-2xl rounded-lg border-0 px-2 sm:border sm:p-8">
		<div class="prose prose-sm max-w-none">
			<h1 class="text-2xl font-semibold">欢迎来到 今果 Jingrow</h1>
			<p>
				今果 Jingrow让您能够轻松管理站点和应用程序，通过一个易于使用的仪表板，提供强大的功能，如自动备份、自定义域名、SSL 证书、自定义应用程序、自动更新等。
			</p>
		</div>
		<p class="mt-6 text-base text-gray-800">
			您距离创建第一个站点仅一步之遥。
		</p>
		<div class="mt-6 space-y-6">
			<!-- 步骤 1 - 账户已创建 -->
			<div class="rounded-md">
				<div>
					<div class="flex items-center justify-between space-x-2">
						<div class="flex items-center space-x-2">
							<TextInsideCircle>1</TextInsideCircle>
							<span class="text-base font-medium"> 账户已创建 </span>
						</div>
						<div
							class="grid h-4 w-4 place-items-center rounded-full bg-green-500/90"
						>
							<i-lucide-check class="h-3 w-3 text-white" />
						</div>
					</div>
				</div>
			</div>
			
			<!-- 步骤 2 - 添加支付方式 -->
			<div class="rounded-md">
				<div v-if="!$team.pg.payment_mode">
					<div class="flex items-center space-x-2">
						<TextInsideCircle>2</TextInsideCircle>
						<span class="text-base font-medium"> 余额充值 </span>
					</div>

					<div class="mt-4 pl-7">
						<div class="mt-2 w-full">
							<div class="mt-10">
								<BuyPrepaidCreditsForm
									:isOnboarding="true"
									@success="onBuyCreditsSuccess"
								/>
							</div>
						</div>
					</div>
				</div>
				<!-- 支付方式已添加 -->
				<div v-else>
					<div class="flex items-center justify-between space-x-2">
						<div class="flex items-center space-x-2">
							<TextInsideCircle>2</TextInsideCircle>
							<span
								class="text-base font-medium"
								v-if="$team.pg.payment_mode === 'Card'"
							>
								自动扣费设置已完成
							</span>
							<span
								class="text-base font-medium"
								v-if="$team.pg.payment_mode === 'Prepaid Credits'"
							>
								余额支付已开通
							</span>
						</div>
						<div
							class="grid h-4 w-4 place-items-center rounded-full bg-green-500/90"
						>
							<i-lucide-check class="h-3 w-3 text-white" />
						</div>
					</div>
					<div
						class="mt-1.5 pl-7 text-p-base text-gray-800"
						v-if="$team.pg.payment_mode === 'Prepaid Credits'"
					>
						账户余额: {{ $format.userCurrency($team.pg.balance) }}
					</div>
				</div>
			</div>
			
			<!-- 步骤 3 - 创建站点 -->
			<div v-if="pendingSiteRequest" class="rounded-md">
				<div class="flex items-center justify-between space-x-2">
					<div class="flex items-center space-x-2">
						<TextInsideCircle>3</TextInsideCircle>
						<span
							class="text-base font-medium"
							v-if="pendingSiteRequest.status == 'Error'"
						>
							创建您的 {{ pendingSiteRequest.title }} 试用站点时出错
						</span>
						<span class="text-base font-medium" v-else>
							创建您的 {{ pendingSiteRequest.title }} 试用站点
						</span>
					</div>
				</div>
				<div class="mt-2 pl-7" v-if="pendingSiteRequest.status == 'Error'">
					<p class="mt-2 text-p-base text-gray-800">
						请点击下方按钮联系 今果 Jingrow支持团队。
					</p>
					<Button class="mt-2" link="/support"> 联系支持 </Button>
				</div>
				<div class="mt-2 pl-7" v-else>
					<p class="mt-2 text-p-base text-gray-800">
						您可以点击下方按钮免费试用 {{ pendingSiteRequest.title }} 应用程序。
					</p>
					<Button
						class="mt-2"
						:route="{
							name: 'SignupSetup',
							params: { productId: pendingSiteRequest.product_trial },
							query: {
								account_request: pendingSiteRequest.account_request,
							},
						}"
					>
						继续
					</Button>
				</div>
			</div>
			<div v-else-if="trialSite" class="rounded-md">
				<div class="flex items-center justify-between space-x-2">
					<div class="flex items-center space-x-2">
						<TextInsideCircle>3</TextInsideCircle>
						<span class="text-base font-medium">
							您的试用站点已准备就绪
						</span>
					</div>
					<div
						class="grid h-4 w-4 place-items-center rounded-full bg-green-500/90"
					>
						<i-lucide-check class="h-3 w-3 text-white" />
					</div>
				</div>
				<div class="pl-7">
					<div class="mt-2">
						<a
							class="flex items-center text-base font-medium underline"
							:href="`https://${trialSite.host_name || trialSite.name}`"
							target="_blank"
						>
							https://{{ trialSite.host_name || trialSite.name }}
							<i-lucide-external-link class="ml-1 h-3.5 w-3.5 text-gray-800" />
						</a>
					</div>
					<p class="mt-2 text-p-base text-gray-800">
						您的试用将于
						<span class="font-medium">
							{{ $format.date(trialSite.trial_end_date, 'LL') }} </span
						> 到期。立即设置账单以确保您的站点访问不受影响。
					</p>
				</div>
			</div>
			<div v-else class="rounded-md">
				<div class="flex items-center space-x-2">
					<TextInsideCircle>3</TextInsideCircle>
					<div class="text-base font-medium">创建您的第一个站点</div>
				</div>

				<Button class="ml-7 mt-4" :route="'/sites/new'">
					创建
				</Button>
			</div>
		</div>
	</div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
import TextInsideCircle from './TextInsideCircle.vue';

export default {
	name: 'Onboarding',
	emits: ['payment-mode-added'],
	components: {
		BuyPrepaidCreditsForm: defineAsyncComponent(
			() => import('./BuyPrepaidCreditsForm.vue'),
		),
		TextInsideCircle,
	},
	methods: {
		onBuyCreditsSuccess() {
			this.$team.reload();
			this.$emit('payment-mode-added');
		},
	},
	computed: {
		pendingSiteRequest() {
			return this.$team.pg.pending_site_request;
		},
		trialSite() {
			return this.$team.pg.trial_sites?.[0];
		},
	},
};
</script>