886 lines
25 KiB
Vue
886 lines
25 KiB
Vue
<template>
|
||
<div class="sticky top-0 z-10 shrink-0">
|
||
<Header>
|
||
<FBreadcrumbs :items="breadcrumbs" />
|
||
</Header>
|
||
</div>
|
||
|
||
<div
|
||
v-if="!$team.pg?.is_desk_user && !$session.hasSiteCreationAccess"
|
||
class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-gray-600"
|
||
>
|
||
<i-lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
|
||
<ErrorMessage message="您没有权限创建新站点" />
|
||
</div>
|
||
|
||
<div v-else class="mx-auto max-w-2xl px-5">
|
||
<div v-if="$resources.options.loading" class="py-4 text-base text-gray-600">
|
||
加载中...
|
||
</div>
|
||
<div v-if="$route.name === 'NewBenchSite' && !bench">
|
||
<div class="py-4 text-base text-gray-600">出错了</div>
|
||
</div>
|
||
<div v-else-if="options" class="space-y-12 pb-[50vh] pt-12">
|
||
<NewSiteAppSelector
|
||
:availableApps="selectedVersionAppOptions"
|
||
:siteOnPublicBench="!bench"
|
||
v-model="apps"
|
||
/>
|
||
<div v-if="showLocalisationSelector" class="space-y-4">
|
||
<div class="flex space-x-2">
|
||
<FormControl
|
||
label="安装本地合规应用？"
|
||
v-model="showLocalisationOption"
|
||
type="checkbox"
|
||
/>
|
||
<Tooltip
|
||
text="本地合规应用允许根据法定合规性创建交易。它们由社区合作伙伴维护。"
|
||
>
|
||
<i-lucide-info class="h-4 w-4 text-gray-500" />
|
||
</Tooltip>
|
||
</div>
|
||
<FormControl
|
||
class="w-1/2"
|
||
variant="outline"
|
||
:class="{ 'pointer-events-none opacity-50': !showLocalisationOption }"
|
||
label="选择国家"
|
||
v-model="selectedLocalisationCountry"
|
||
type="autocomplete"
|
||
:options="localisationAppCountries"
|
||
/>
|
||
</div>
|
||
<div v-if="!bench">
|
||
<div class="flex items-center justify-between">
|
||
<h2 class="text-base font-medium leading-6 text-gray-900">
|
||
选择 Jingrow 版本
|
||
</h2>
|
||
</div>
|
||
<div class="mt-2">
|
||
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||
<component
|
||
v-for="v in availableVersions"
|
||
:key="v.name"
|
||
:is="v.disabled ? 'Tooltip' : 'div'"
|
||
:text="
|
||
v.disabled && versionAppsMap[v.name]
|
||
? `此版本不适用于 ${$format.plural(
|
||
versionAppsMap[v.name].length,
|
||
'app',
|
||
'apps',
|
||
)} ${$format.commaAnd(versionAppsMap[v.name])}`
|
||
: ''
|
||
"
|
||
>
|
||
<button
|
||
:class="[
|
||
version === v.name
|
||
? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
|
||
: 'bg-white text-gray-900 hover:bg-gray-50',
|
||
v.disabled && 'opacity-50 hover:cursor-default',
|
||
'flex w-full cursor-pointer items-center justify-between rounded border border-gray-400 p-3 text-sm focus:outline-none',
|
||
]"
|
||
@click="
|
||
() => {
|
||
if (v.disabled) return;
|
||
version = v.name;
|
||
}
|
||
"
|
||
>
|
||
<span class="font-medium">{{ v.name }} </span>
|
||
<div
|
||
v-if="v.status === 'Develop'"
|
||
class="flex items-center gap-2"
|
||
>
|
||
<Tooltip
|
||
text="此版本正在开发中，可能存在错误。请勿用于生产站点。"
|
||
>
|
||
<i-lucide-info class="h-4 w-4 text-gray-500" />
|
||
</Tooltip>
|
||
<span class="ml-1 text-gray-600">
|
||
{{ v.status }}
|
||
</span>
|
||
</div>
|
||
</button>
|
||
</component>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="flex flex-col"
|
||
v-if="selectedVersion?.group?.clusters?.length"
|
||
>
|
||
<h2 class="text-base font-medium leading-6 text-gray-900">
|
||
选择地区
|
||
</h2>
|
||
<div class="mt-2 w-full space-y-2">
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<button
|
||
v-for="c in selectedVersion.group.clusters"
|
||
:key="c.name"
|
||
@click="cluster = c.name"
|
||
:class="[
|
||
cluster === c.name
|
||
? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
|
||
: 'bg-white text-gray-900 hover:bg-gray-50',
|
||
'flex w-full items-center rounded border p-3 text-left text-base text-gray-900',
|
||
]"
|
||
>
|
||
<div class="flex w-full items-center justify-between">
|
||
<div class="flex w-full items-center space-x-2">
|
||
<img v-if="c.image" :src="c.image" class="h-5 w-5" onerror="this.src='/assets/images/china-flag.png'; this.onerror=null;" />
|
||
<i-lucide-globe class="h-5 w-5 text-gray-600" v-else />
|
||
<span class="text-sm font-medium">
|
||
{{ c.title }}
|
||
</span>
|
||
</div>
|
||
<Badge v-if="c.beta" :label="c.beta ? 'Beta' : ''" />
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="selectedVersion && cluster">
|
||
<div class="flex items-center justify-between">
|
||
<h2 class="text-base font-medium leading-6 text-gray-900">
|
||
选择网站套餐计划
|
||
</h2>
|
||
</div>
|
||
<div class="mt-2">
|
||
<SitePlansCards
|
||
v-model="plan"
|
||
:isPrivateBenchSite="!!bench"
|
||
:isDedicatedServerSite="selectedVersion.group.is_dedicated_server"
|
||
:selectedCluster="cluster"
|
||
:selectedApps="apps"
|
||
:selectedVersion="version"
|
||
:hideRestrictedPlans="selectedLocalisationCountry"
|
||
/>
|
||
</div>
|
||
<div class="mt-4 text-xs text-gray-700">
|
||
<div
|
||
class="flex items-center rounded bg-gray-50 p-2 text-p-base font-medium text-gray-800"
|
||
>
|
||
<i-lucide-badge-check class="h-4 w-8 text-gray-600" />
|
||
<span class="ml-4">
|
||
安装使用 Jingrow 系统遇到任何问题请提交支持工单或联系在线客服。
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="selectedVersion && plan && cluster">
|
||
<h2 class="text-base font-medium leading-6 text-gray-900">
|
||
输入子域名
|
||
</h2>
|
||
<div class="mt-2 items-center">
|
||
<div class="col-span-2 flex w-full">
|
||
<input
|
||
class="dark:[color-scheme:dark] z-10 h-7 w-full flex-1 rounded rounded-r-none border border-[--surface-gray-2] bg-surface-gray-2 py-1.5 pl-2 pr-2 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3"
|
||
placeholder="子域名"
|
||
v-model="subdomain"
|
||
/>
|
||
<div class="flex items-center rounded-r bg-gray-100 px-4 text-base">
|
||
.{{ options.domain }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-1">
|
||
<div
|
||
v-if="$resources.subdomainExists.loading"
|
||
class="text-base text-gray-600"
|
||
>
|
||
正在检查...
|
||
</div>
|
||
<template
|
||
v-else-if="
|
||
!$resources.subdomainExists.error &&
|
||
$resources.subdomainExists.data != null
|
||
"
|
||
>
|
||
<div
|
||
v-if="$resources.subdomainExists.data"
|
||
class="text-sm text-green-600"
|
||
>
|
||
{{ subdomain }}.{{ options.domain }} 可用
|
||
</div>
|
||
<div v-else class="text-sm text-red-600">
|
||
{{ subdomain }}.{{ options.domain }} 不可用
|
||
</div>
|
||
</template>
|
||
<ErrorMessage :message="$resources.subdomainExists.error" />
|
||
</div>
|
||
</div>
|
||
<Summary
|
||
v-if="selectedVersion && cluster && plan && subdomain"
|
||
:options="siteSummaryOptions"
|
||
/>
|
||
<div
|
||
v-if="selectedVersion && cluster && plan"
|
||
class="flex flex-col space-y-4"
|
||
>
|
||
<FormControl
|
||
type="checkbox"
|
||
v-model="agreedToRegionConsent"
|
||
:label="`我同意我所选地区的法律适用于我和Jingrow。`"
|
||
/>
|
||
<FormControl
|
||
class="checkbox"
|
||
type="checkbox"
|
||
label="我同意将我的信息分享给本地合作伙伴"
|
||
@change="(val) => (shareDetailsConsent = val.target.checked)"
|
||
/>
|
||
<div v-if="formError" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
|
||
{{ formError }}
|
||
</div>
|
||
</div>
|
||
<div v-if="selectedVersion && cluster && plan && subdomain">
|
||
<Button
|
||
class="w-full"
|
||
variant="solid"
|
||
:disabled="!agreedToRegionConsent || !isSubdomainValid"
|
||
@click="checkBalanceAndCreateSite"
|
||
:loading="$resources.createOrder?.loading || false"
|
||
:loadingText="'正在创建订单...'"
|
||
>
|
||
创建站点
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Dialog
|
||
v-if="showAddPrepaidCreditsDialog"
|
||
v-model="showAddPrepaidCreditsDialog"
|
||
:options="{ title: '新建网站' }"
|
||
>
|
||
<template #body-content>
|
||
<div v-if="showBalanceMessage" class="mb-5 inline-flex gap-1.5 text-base text-gray-700">
|
||
<i-lucide-info class="h-4 w-4" />
|
||
<span>
|
||
您当前的余额不足，请先充值以创建新站点。至少需要充值 {{ $format.userCurrency(Math.ceil(requiredAmount - userBalance)) }}。
|
||
</span>
|
||
</div>
|
||
<BuyPrepaidCreditsForm
|
||
:minimumAmount="Math.ceil(requiredAmount - userBalance)"
|
||
:isOnboarding="false"
|
||
@success="onCreditAdded"
|
||
@cancel="showAddPrepaidCreditsDialog = false"
|
||
/>
|
||
</template>
|
||
</Dialog>
|
||
|
||
<div v-if="showOrderCheckout && !currentOrder" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
|
||
<div class="bg-white p-6 rounded-lg shadow-xl">
|
||
<p>正在加载支付界面...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<OrderCheckout
|
||
v-if="currentOrder"
|
||
v-model="showOrderCheckout"
|
||
:order="currentOrder"
|
||
@payment-success="onPaymentSuccess"
|
||
@payment-error="onPaymentError"
|
||
@close="resetCheckoutState"
|
||
/>
|
||
</template>
|
||
<script>
|
||
import {
|
||
Autocomplete,
|
||
ErrorMessage,
|
||
FeatherIcon,
|
||
FormControl,
|
||
TextInput,
|
||
Tooltip,
|
||
debounce,
|
||
Breadcrumbs,
|
||
getCachedDocumentResource,
|
||
Dialog,
|
||
} from 'jingrow-ui';
|
||
import SitePlansCards from '../components/SitePlansCards.vue';
|
||
import { validateSubdomain } from '../utils/site';
|
||
import Header from '../components/Header.vue';
|
||
import router from '../router';
|
||
import { plans } from '../data/plans';
|
||
import NewSiteAppSelector from '../components/site/NewSiteAppSelector.vue';
|
||
import Summary from '../components/Summary.vue';
|
||
import { DashboardError } from '../utils/error';
|
||
import { getCountry } from '../utils/country';
|
||
import BuyPrepaidCreditsForm from '../components/BuyPrepaidCreditsForm.vue';
|
||
import OrderCheckout from '../components/OrderCheckout.vue';
|
||
|
||
export default {
|
||
name: 'NewSite',
|
||
props: ['bench'],
|
||
components: {
|
||
FBreadcrumbs: Breadcrumbs,
|
||
NewSiteAppSelector,
|
||
SitePlansCards,
|
||
Autocomplete,
|
||
ErrorMessage,
|
||
FormControl,
|
||
FeatherIcon,
|
||
TextInput,
|
||
Tooltip,
|
||
Summary,
|
||
Header,
|
||
Dialog,
|
||
BuyPrepaidCreditsForm,
|
||
OrderCheckout,
|
||
},
|
||
data() {
|
||
return {
|
||
version: null,
|
||
subdomain: '',
|
||
cluster: null,
|
||
plan: null,
|
||
apps: [],
|
||
appPlans: {},
|
||
selectedApp: null,
|
||
closestCluster: null,
|
||
selectedLocalisationCountry: null,
|
||
showLocalisationOption: false,
|
||
showAppPlanSelectorDialog: false,
|
||
shareDetailsConsent: false,
|
||
agreedToRegionConsent: false,
|
||
showAddPrepaidCreditsDialog: false,
|
||
showBalanceMessage: false,
|
||
requiredAmount: 0,
|
||
userBalance: 0,
|
||
showOrderCheckout: false,
|
||
currentOrder: null,
|
||
formError: null,
|
||
siteFromOrder: null
|
||
};
|
||
},
|
||
watch: {
|
||
apps() {
|
||
this.version = this.autoSelectVersion();
|
||
this.cluster = null;
|
||
this.agreedToRegionConsent = false;
|
||
},
|
||
showLocalisationOption() {
|
||
if (this.showLocalisationOption) {
|
||
const localisationAppCountries = this.localisationAppCountries.map(
|
||
(c) => c.value,
|
||
);
|
||
|
||
if (
|
||
localisationAppCountries.includes(getCountry()) &&
|
||
!this.selectedLocalisationCountry
|
||
) {
|
||
this.selectedLocalisationCountry = { value: getCountry() };
|
||
}
|
||
} else {
|
||
this.selectedLocalisationCountry = null;
|
||
}
|
||
},
|
||
async version() {
|
||
this.cluster = null;
|
||
this.cluster = await this.getClosestCluster();
|
||
this.agreedToRegionConsent = false;
|
||
},
|
||
cluster() {
|
||
this.plan = null;
|
||
this.agreedToRegionConsent = false;
|
||
},
|
||
subdomain: {
|
||
handler: debounce(function (value) {
|
||
let invalidMessage = validateSubdomain(value);
|
||
this.$resources.subdomainExists.error = invalidMessage;
|
||
if (!invalidMessage) {
|
||
this.$resources.subdomainExists.submit();
|
||
}
|
||
}, 500),
|
||
},
|
||
closestCluster() {
|
||
this.cluster = this.closestCluster;
|
||
},
|
||
},
|
||
resources: {
|
||
options() {
|
||
return {
|
||
url: 'jcloud.api.site.options_for_new',
|
||
makeParams() {
|
||
return { for_bench: this.bench };
|
||
},
|
||
onSuccess() {
|
||
if (this.bench && this.options.versions.length > 0) {
|
||
this.version = this.options.versions[0].name;
|
||
}
|
||
},
|
||
auto: true,
|
||
};
|
||
},
|
||
subdomainExists() {
|
||
return {
|
||
url: 'jcloud.api.site.exists',
|
||
makeParams() {
|
||
return {
|
||
domain: this.options?.domain,
|
||
subdomain: this.subdomain,
|
||
};
|
||
},
|
||
validate() {
|
||
let error = validateSubdomain(this.subdomain);
|
||
if (error) {
|
||
return new DashboardError(error);
|
||
}
|
||
},
|
||
transform(data) {
|
||
return !Boolean(data);
|
||
},
|
||
};
|
||
},
|
||
userBalance() {
|
||
return {
|
||
url: 'jcloud.api.billing.get_balance_credit',
|
||
auto: true,
|
||
onSuccess(data) {
|
||
this.userBalance = data;
|
||
},
|
||
};
|
||
},
|
||
createOrder() {
|
||
return {
|
||
url: 'jcloud.api.billing.create_order',
|
||
makeParams() {
|
||
return {
|
||
title: `${this.subdomain}.${this.options?.domain}`,
|
||
description: `${this.plan.plan_title || this.plan.name}`,
|
||
total_amount: this._totalAmount || 0,
|
||
order_type: `新建网站`
|
||
};
|
||
},
|
||
validate() {
|
||
if (!this.subdomain) {
|
||
throw new DashboardError('请输入子域名');
|
||
}
|
||
if (!this._totalAmount || this._totalAmount <= 0) {
|
||
throw new DashboardError('订单金额必须大于0');
|
||
}
|
||
},
|
||
onSuccess(response) {
|
||
if (!response || !response.order) {
|
||
this.formError = '服务器返回数据格式错误';
|
||
return;
|
||
}
|
||
|
||
this.currentOrder = response.order;
|
||
this.$nextTick(() => {
|
||
this.showOrderCheckout = true;
|
||
});
|
||
},
|
||
onError(error) {
|
||
this.formError = error.message || '创建订单失败';
|
||
}
|
||
};
|
||
},
|
||
createSite() {
|
||
return {
|
||
url: 'jcloud.api.site.new',
|
||
makeParams() {
|
||
let appPlans = {};
|
||
for (let app of this.apps) {
|
||
if (app.plan) {
|
||
appPlans[app.app] = app.plan;
|
||
}
|
||
}
|
||
|
||
return {
|
||
site: {
|
||
name: this.subdomain,
|
||
apps: ['jingrow', ...this.apps.map((app) => app.app)],
|
||
localisation_country: this.showLocalisationSelector
|
||
? this.selectedLocalisationCountry?.value
|
||
: null,
|
||
version: this.selectedVersion.name,
|
||
group: this.selectedVersion.group.name,
|
||
cluster: this.cluster,
|
||
plan: this.plan.name,
|
||
share_details_consent: this.shareDetailsConsent,
|
||
selected_app_plans: appPlans,
|
||
order_id: this.currentOrder?.order_id || null
|
||
},
|
||
};
|
||
},
|
||
validate() {
|
||
if (!this.subdomain) {
|
||
throw new DashboardError('请输入子域名');
|
||
}
|
||
|
||
if (!this.agreedToRegionConsent) {
|
||
throw new DashboardError('请同意上述条款以创建站点');
|
||
}
|
||
|
||
if (this.currentOrder && !this.currentOrder.status) {
|
||
throw new DashboardError('未检测到订单状态，无法创建站点');
|
||
}
|
||
},
|
||
onSuccess: (site) => {
|
||
this.$router.push(`/sites/${this.subdomain}.${this.options?.domain}/overview`);
|
||
},
|
||
onError(error) {
|
||
this.formError = error.message || '站点创建失败，请联系客服';
|
||
}
|
||
};
|
||
},
|
||
},
|
||
computed: {
|
||
options() {
|
||
return this.$resources.options.data;
|
||
},
|
||
selectedVersion() {
|
||
return this.options?.versions.find((v) => v.name === this.version);
|
||
},
|
||
availableVersions() {
|
||
if (!this.apps.length || this.bench)
|
||
return this.options.versions.sort((a, b) =>
|
||
b.name.localeCompare(a.name),
|
||
);
|
||
|
||
let commonVersions = this.apps.reduce((acc, app) => {
|
||
if (!acc) return app.sources.map((s) => s.version);
|
||
return acc.filter((v) => app.sources.map((s) => s.version).includes(v));
|
||
}, null);
|
||
|
||
if (this.selectedLocalisationCountry) {
|
||
// temporary override since we don't have localisation app ready for v14
|
||
// TODO: remove this when localisation app is ready for v14
|
||
commonVersions = ['v1'];
|
||
this.version = 'v1';
|
||
}
|
||
|
||
return this.options.versions.map((v) => ({
|
||
...v,
|
||
disabled: !commonVersions.includes(v.name),
|
||
}));
|
||
},
|
||
selectedClusterTitle() {
|
||
return this.selectedVersion?.group?.clusters?.find(
|
||
(c) => c.name === this.cluster,
|
||
)?.title;
|
||
},
|
||
selectedVersionApps() {
|
||
let apps = [];
|
||
|
||
if (!this.bench)
|
||
apps = this.options.app_source_details.sort((a, b) =>
|
||
a.total_installs !== b.total_installs
|
||
? b.total_installs - a.total_installs
|
||
: a.app.localeCompare(b.app),
|
||
);
|
||
else if (!this.selectedVersion?.group?.bench_app_sources) apps = [];
|
||
else
|
||
apps = this.selectedVersion.group.bench_app_sources.map(
|
||
(app_source) => {
|
||
let app_source_details =
|
||
this.options.app_source_details[app_source];
|
||
|
||
let marketplace_details = app_source_details
|
||
? this.options.marketplace_details[app_sourcedetails.app]
|
||
: {};
|
||
|
||
return {
|
||
app_title: app_source,
|
||
...app_source_details,
|
||
...marketplace_details,
|
||
};
|
||
},
|
||
);
|
||
|
||
// 按总安装量排序，然后按名称排序
|
||
return apps.sort((a, b) => {
|
||
if (a.total_installs > b.total_installs) {
|
||
return -1;
|
||
} else if (a.total_installs < b.total_installs) {
|
||
return 1;
|
||
} else {
|
||
return a.app_title.localeCompare(b.app_title);
|
||
}
|
||
});
|
||
},
|
||
selectedVersionAppOptions() {
|
||
return this.selectedVersionApps.filter(
|
||
(app) => !this.localisationAppNames.includes(app.app),
|
||
);
|
||
},
|
||
showLocalisationSelector() {
|
||
if (
|
||
!this.selectedVersionApps ||
|
||
!this.localisationAppNames.length ||
|
||
!this.apps.length
|
||
)
|
||
return false;
|
||
|
||
const appsThatNeedLocalisation = this.selectedVersionApps.filter(
|
||
(app) => app.localisation_apps.length,
|
||
);
|
||
|
||
if (
|
||
appsThatNeedLocalisation.some((app) =>
|
||
this.apps.map((a) => a.app).includes(app.app),
|
||
)
|
||
)
|
||
return true;
|
||
|
||
return false;
|
||
},
|
||
localisationAppNames() {
|
||
if (!this.selectedVersionApps) return [];
|
||
const localisationAppDetails = this.selectedVersionApps.flatMap(
|
||
(app) => app.localisation_apps,
|
||
);
|
||
|
||
return localisationAppDetails
|
||
.map((app) => app?.marketplace_app)
|
||
.filter(Boolean);
|
||
},
|
||
localisationAppCountries() {
|
||
if (!this.selectedVersionApps) return [];
|
||
const localisationAppDetails = this.selectedVersionApps.flatMap(
|
||
(app) => app.localisation_apps,
|
||
);
|
||
return localisationAppDetails.map((app) => ({
|
||
label: app?.country,
|
||
value: app?.country,
|
||
}));
|
||
},
|
||
selectedPlan() {
|
||
if (!plans?.data) return;
|
||
return plans.data.find((p) => p.name === this.plan.name);
|
||
},
|
||
versionAppsMap() {
|
||
const versions = this.availableVersions.map((v) => v.name);
|
||
let problemAppVersions = {};
|
||
if (!this.bench)
|
||
for (let app of this.apps) {
|
||
const appVersions = app.sources.map((s) => s.version);
|
||
const problemVersions = versions.filter(
|
||
(version) => !appVersions.includes(version),
|
||
);
|
||
for (let version of problemVersions) {
|
||
if (!problemAppVersions[version]) {
|
||
problemAppVersions[version] = [];
|
||
}
|
||
problemAppVersions[version].push(app.app_title);
|
||
}
|
||
}
|
||
return problemAppVersions;
|
||
},
|
||
breadcrumbs() {
|
||
if (this.bench) {
|
||
let group = getCachedDocumentResource('Release Group', this.bench);
|
||
return [
|
||
{ label: '站点分组', route: '/groups' },
|
||
{
|
||
label: group ? group.pg.title : this.bench,
|
||
route: {
|
||
name: 'Release Group Detail',
|
||
params: { name: this.bench },
|
||
},
|
||
},
|
||
{
|
||
label: '新建站点',
|
||
route: {
|
||
name: 'Release Group New Site',
|
||
params: { bench: this.bench },
|
||
},
|
||
},
|
||
];
|
||
}
|
||
return [
|
||
{ label: '站点', route: '/sites' },
|
||
{ label: '新建站点', route: '/sites/new' },
|
||
];
|
||
},
|
||
_totalAmount() {
|
||
let total =
|
||
this.$team.pg.currency == 'CNY'
|
||
? this.selectedPlan.price_cny
|
||
: this.selectedPlan.price_usd;
|
||
|
||
for (let app of this.apps.filter((app) => app.plan)) {
|
||
total +=
|
||
this.$team.pg.currency == 'CNY'
|
||
? app.plan.price_cny
|
||
: app.plan.price_usd;
|
||
}
|
||
return total;
|
||
},
|
||
totalAmount() {
|
||
return this.$format.userCurrency(this._totalAmount);
|
||
},
|
||
totalPerMonth() {
|
||
return this.totalAmount;
|
||
},
|
||
totalPerDay() {
|
||
return this.$format.userCurrency(
|
||
this.$format.pricePerDay(this._totalAmount),
|
||
);
|
||
},
|
||
siteSummaryOptions() {
|
||
let appPlans = [];
|
||
for (let app of this.apps) {
|
||
appPlans.push(
|
||
`${
|
||
this.selectedVersionApps.find((a) => a.app === app.app).app_title
|
||
} ${
|
||
app.plan?.price_cny
|
||
? `- <span class="text-gray-600">${this.$format.userCurrency(
|
||
this.$team.pg.currency == 'CNY'
|
||
? app.plan.price_cny
|
||
: app.plan.price_usd,
|
||
)}</span>`
|
||
: ''
|
||
}`,
|
||
);
|
||
}
|
||
|
||
return [
|
||
{
|
||
label: 'Jingrow 版本',
|
||
value: this.selectedVersion?.name,
|
||
},
|
||
{
|
||
label: '区域',
|
||
value: this.selectedClusterTitle,
|
||
},
|
||
{
|
||
label: '站点 URL',
|
||
value: `${this.subdomain}.${this.options?.domain}`,
|
||
},
|
||
{
|
||
label: '站点计划',
|
||
value: this.selectedPlan.plan_title || this.plan.name,
|
||
},
|
||
{
|
||
label: '总计',
|
||
value: this.totalAmount,
|
||
condition: () => this._totalAmount,
|
||
},
|
||
];
|
||
},
|
||
isSubdomainValid() {
|
||
return this.$resources.subdomainExists.data === true &&
|
||
!this.$resources.subdomainExists.error &&
|
||
this.subdomain;
|
||
},
|
||
},
|
||
methods: {
|
||
async getClosestCluster() {
|
||
if (this.closestCluster) return this.closestCluster;
|
||
|
||
// 优先检查是否有中国地区的集群
|
||
const chinaCluster = this.selectedVersion?.group?.clusters.find(
|
||
c => c.title && c.title.includes('中国')
|
||
);
|
||
|
||
if (chinaCluster) {
|
||
this.closestCluster = chinaCluster.name;
|
||
return this.closestCluster;
|
||
}
|
||
|
||
let proxyServers = this.selectedVersion?.group?.clusters
|
||
.flatMap((c) => c.proxy_server || [])
|
||
.map((server) => server.name);
|
||
|
||
if (proxyServers.length > 0) {
|
||
this.findingClosestServer = true;
|
||
let promises = proxyServers.map((server) => this.getPingTime(server));
|
||
let results = await Promise.allSettled(promises);
|
||
let fastestServer = results.reduce((a, b) =>
|
||
a.value.pingTime < b.value.pingTime ? a : b,
|
||
);
|
||
let closestServer = fastestServer.value.server;
|
||
let closestCluster = this.selectedVersion?.group?.clusters.find(
|
||
(c) => c.proxy_server?.name === closestServer,
|
||
);
|
||
if (!this.closestCluster && closestCluster) {
|
||
this.closestCluster = closestCluster.name;
|
||
} else if (this.selectedVersion?.group?.clusters.length > 0) {
|
||
// 如果找不到最快的服务器，默认选择第一个集群
|
||
this.closestCluster = this.selectedVersion.group.clusters[0].name;
|
||
}
|
||
this.findingClosestServer = false;
|
||
} else if (this.selectedVersion?.group?.clusters.length > 0) {
|
||
this.closestCluster = this.selectedVersion.group.clusters[0].name;
|
||
}
|
||
return this.closestCluster;
|
||
},
|
||
async getPingTime(server) {
|
||
let pingTime = 999999;
|
||
try {
|
||
let t1 = new Date().getTime();
|
||
let r = await fetch(`https://${server}`);
|
||
let t2 = new Date().getTime();
|
||
pingTime = t2 - t1;
|
||
} catch (error) {
|
||
console.warn(error);
|
||
}
|
||
return { server, pingTime };
|
||
},
|
||
autoSelectVersion() {
|
||
if (!this.availableVersions) return null;
|
||
|
||
return this.availableVersions
|
||
.sort((a, b) => b.name.localeCompare(a.name))
|
||
.find((v) => !v.disabled)?.name;
|
||
},
|
||
async checkBalanceAndCreateSite() {
|
||
try {
|
||
this.formError = null;
|
||
|
||
if (!this.agreedToRegionConsent) {
|
||
this.formError = '请同意上述条款以创建站点';
|
||
return;
|
||
}
|
||
|
||
if (!this.subdomain) {
|
||
this.formError = '请输入子域名';
|
||
return;
|
||
}
|
||
|
||
if (!this.isSubdomainValid) {
|
||
this.formError = '子域名无效或已被占用';
|
||
return;
|
||
}
|
||
|
||
this.$resources.createOrder.submit();
|
||
} catch (error) {
|
||
this.formError = `创建订单失败: ${error.message || '请稍后再试'}`;
|
||
}
|
||
},
|
||
onPaymentSuccess(order) {
|
||
this.showOrderCheckout = false;
|
||
this.currentOrder = {
|
||
...this.currentOrder,
|
||
...order,
|
||
status: '已支付'
|
||
};
|
||
this.siteFromOrder = order.site;
|
||
this.$resources.createSite.submit();
|
||
},
|
||
onPaymentError(error) {
|
||
this.formError = "支付失败: " + (error.message || "未知错误");
|
||
|
||
if (error.message && error.message.includes('余额不足')) {
|
||
this.requiredAmount = this._totalAmount || 0;
|
||
this.showBalanceMessage = true;
|
||
this.showAddPrepaidCreditsDialog = true;
|
||
}
|
||
|
||
this.showOrderCheckout = false;
|
||
},
|
||
resetCheckoutState() {
|
||
this.showOrderCheckout = false;
|
||
this.currentOrder = null;
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.checkbox:deep(label) {
|
||
color: theme('colors.gray.700') !important;
|
||
line-height: 1.5;
|
||
}
|
||
</style> |