496 lines
20 KiB
Vue
496 lines
20 KiB
Vue
<script>
|
|
/** 首页服务器：云/物理模块组各有查询器，每页 5 台；类型与页码形成签名，切换后不能沿用另一页的数据。 */
|
|
import "~/assets/styles/HomeServerPanel.Do7AgMDx.css";
|
|
import { toDisplayString } from "vue";
|
|
import { renderList } from "vue";
|
|
import { onMounted } from "vue";
|
|
import { onUnmounted } from "vue";
|
|
import { normalizeClass } from "vue";
|
|
import { watch } from "vue";
|
|
import { createBlock } from "vue";
|
|
import { ref } from "vue";
|
|
import { withCtx } from "vue";
|
|
import { createCommentVNode } from "vue";
|
|
import { createElementBlock } from "vue";
|
|
import { Fragment } from "vue";
|
|
import { createElementVNode } from "vue";
|
|
import { createTextVNode } from "vue";
|
|
import { unref } from "vue";
|
|
import { defineComponent } from "vue";
|
|
import { createVNode } from "vue";
|
|
import { openBlock } from "vue";
|
|
import { NuxtLink } from "#components";
|
|
import { useApi } from "~/lib/auth.js";
|
|
import button from "primevue/button";
|
|
import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
|
|
import message from "primevue/message";
|
|
import { n as product_name_n } from "~/lib/product-name.js";
|
|
import { c as dict_c } from "~/lib/dict.js";
|
|
import { l as dict_l } from "~/lib/dict.js";
|
|
import { r as dict_r } from "~/lib/dict.js";
|
|
import paginator from "primevue/paginator";
|
|
import ListEmpty from "~/components/ListEmpty.vue";
|
|
import { t as modules_t } from "~/lib/modules.js";
|
|
import tag from "primevue/tag";
|
|
import skeleton from "primevue/skeleton";
|
|
import { t as server_page_t } from "~/lib/server-page.js";
|
|
var ne = [`aria-busy`],
|
|
j = {
|
|
class: `home-card-head server-head`,
|
|
},
|
|
M = {
|
|
class: `home-tabs`,
|
|
role: `group`,
|
|
"aria-label": `服务器类型`,
|
|
},
|
|
N = [`aria-pressed`, `onClick`],
|
|
P = {
|
|
key: 0,
|
|
class: `server-cols`,
|
|
},
|
|
F = {
|
|
key: 2,
|
|
class: `home-list`,
|
|
},
|
|
I = [`inert`, `aria-disabled`],
|
|
L = {
|
|
class: `home-row-main`,
|
|
},
|
|
R = {
|
|
class: `home-row-title`,
|
|
},
|
|
z = {
|
|
class: `home-row-sub`,
|
|
},
|
|
B = {
|
|
class: `home-row-side server-due`,
|
|
},
|
|
V = [`inert`, `aria-disabled`],
|
|
H = Object.assign(
|
|
_plugin_vue_export_helper_t(
|
|
defineComponent({
|
|
__name: `HomeServerPanel`,
|
|
setup(h) {
|
|
let x = useApi(),
|
|
H = [
|
|
{
|
|
label: `云服务器`,
|
|
modules: modules_t.cloud,
|
|
to: `/cloud-servers`,
|
|
},
|
|
{
|
|
label: `物理服务器`,
|
|
modules: modules_t.dcim,
|
|
to: `/dedicated-servers`,
|
|
},
|
|
],
|
|
U = H.map((e) => server_page_t(x, e.modules)),
|
|
W = ref(0),
|
|
G = ref([]),
|
|
K = ref(!0),
|
|
q = ref(!1),
|
|
J = ref(``),
|
|
Y = ref(1),
|
|
X = ref(0),
|
|
Z = 0,
|
|
Q = ``;
|
|
// 新查询清空不匹配的旧页；同一查询重试失败可保留旧数据，但只有最新代次可更新状态。
|
|
async function $() {
|
|
let e = ++Z,
|
|
t = JSON.stringify([W.value, Y.value]);
|
|
(t !== Q && ((G.value = []), (X.value = 0), (q.value = !1)),
|
|
(K.value = !0),
|
|
(J.value = ``));
|
|
try {
|
|
let n = await U[W.value]({
|
|
module: H[W.value].modules.join(`,`),
|
|
page: Y.value,
|
|
limit: 5,
|
|
});
|
|
if (e !== Z) return;
|
|
((G.value = n.list ?? []),
|
|
(X.value = n.count ?? G.value.length),
|
|
(Q = t),
|
|
(q.value = !0));
|
|
} catch (t) {
|
|
if (e !== Z) return;
|
|
J.value = t instanceof Error ? t.message : `服务器加载失败`;
|
|
} finally {
|
|
e === Z && (K.value = !1);
|
|
}
|
|
}
|
|
// 加载中或列表出错时不继续分页，零基分页器事件转换为接口一基页码。
|
|
function re(e) {
|
|
if (!(K.value || J.value)) return ((Y.value = e.page + 1), $());
|
|
}
|
|
return (
|
|
watch(W, () => {
|
|
((Y.value = 1), $());
|
|
}),
|
|
onMounted($),
|
|
onUnmounted(() => {
|
|
Z += 1;
|
|
}),
|
|
// 错误时旧列表/分页使用 inert 禁止交互，重试入口仍可用；各实例展示计费状态与到期日。
|
|
(n, r) => {
|
|
let a = NuxtLink,
|
|
s = button,
|
|
h = message,
|
|
y = skeleton,
|
|
x = ListEmpty,
|
|
D = tag,
|
|
A = paginator;
|
|
return (
|
|
openBlock(),
|
|
createElementBlock(
|
|
`div`,
|
|
{
|
|
class: `home-card`,
|
|
"aria-busy": unref(K),
|
|
},
|
|
[
|
|
createElementVNode(`div`, j, [
|
|
(r[1] ||= createElementVNode(
|
|
`div`,
|
|
{
|
|
class: `home-card-title`,
|
|
},
|
|
`服务器`,
|
|
-1,
|
|
)),
|
|
createVNode(
|
|
a,
|
|
{
|
|
to: H[unref(W)].to,
|
|
class: `home-card-more`,
|
|
"aria-label": `查看全部${H[unref(W)].label}`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
...(r[0] ||= [
|
|
createElementVNode(
|
|
`i`,
|
|
{
|
|
class: `pi pi-angle-right`,
|
|
},
|
|
null,
|
|
-1,
|
|
),
|
|
]),
|
|
]),
|
|
_: 1,
|
|
},
|
|
8,
|
|
[`to`, `aria-label`],
|
|
),
|
|
]),
|
|
createElementVNode(`div`, M, [
|
|
(openBlock(),
|
|
createElementBlock(
|
|
Fragment,
|
|
null,
|
|
renderList(H, (t, n) =>
|
|
createElementVNode(
|
|
`button`,
|
|
{
|
|
key: t.label,
|
|
type: `button`,
|
|
class: normalizeClass([
|
|
`home-tab`,
|
|
{
|
|
active: unref(W) === n,
|
|
},
|
|
]),
|
|
"aria-pressed": unref(W) === n,
|
|
onClick: (e) => (W.value = n),
|
|
},
|
|
toDisplayString(t.label),
|
|
11,
|
|
N,
|
|
),
|
|
),
|
|
64,
|
|
)),
|
|
]),
|
|
unref(G).length || unref(K)
|
|
? (openBlock(),
|
|
createElementBlock(`div`, P, [
|
|
...(r[2] ||= [
|
|
createElementVNode(`span`, null, `名称`, -1),
|
|
createElementVNode(`span`, null, `到期时间`, -1),
|
|
createElementVNode(`span`, null, `计费状态`, -1),
|
|
]),
|
|
]))
|
|
: createCommentVNode(``, !0),
|
|
unref(J) && unref(q)
|
|
? (openBlock(),
|
|
createBlock(
|
|
h,
|
|
{
|
|
key: 1,
|
|
severity: `error`,
|
|
closable: !1,
|
|
role: `alert`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(J)), 1),
|
|
createVNode(
|
|
s,
|
|
{
|
|
label: `重新加载`,
|
|
icon: `pi pi-refresh`,
|
|
severity: `secondary`,
|
|
text: ``,
|
|
disabled: unref(K),
|
|
onClick: $,
|
|
},
|
|
null,
|
|
8,
|
|
[`disabled`],
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
unref(K) && !unref(q)
|
|
? (openBlock(),
|
|
createElementBlock(`div`, F, [
|
|
(openBlock(),
|
|
createElementBlock(
|
|
Fragment,
|
|
null,
|
|
renderList(5, (e) =>
|
|
createElementVNode(
|
|
`div`,
|
|
{
|
|
key: e,
|
|
class: `home-row-skeleton`,
|
|
},
|
|
[
|
|
createVNode(y, {
|
|
height: `14px`,
|
|
width: `45%`,
|
|
}),
|
|
createVNode(y, {
|
|
height: `12px`,
|
|
width: `30%`,
|
|
style: {
|
|
"margin-top": `8px`,
|
|
},
|
|
}),
|
|
],
|
|
),
|
|
),
|
|
64,
|
|
)),
|
|
]))
|
|
: unref(J) && !unref(q)
|
|
? (openBlock(),
|
|
createBlock(
|
|
x,
|
|
{
|
|
key: 3,
|
|
icon: `pi pi-exclamation-circle`,
|
|
title: `服务器加载失败`,
|
|
description: unref(J),
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createVNode(s, {
|
|
label: `重新加载`,
|
|
icon: `pi pi-refresh`,
|
|
severity: `secondary`,
|
|
outlined: ``,
|
|
onClick: $,
|
|
}),
|
|
]),
|
|
_: 1,
|
|
},
|
|
8,
|
|
[`description`],
|
|
))
|
|
: unref(G).length
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`div`,
|
|
{
|
|
key: 5,
|
|
class: `home-list`,
|
|
inert: unref(J) ? !0 : void 0,
|
|
"aria-disabled": !!unref(J),
|
|
},
|
|
[
|
|
(openBlock(!0),
|
|
createElementBlock(
|
|
Fragment,
|
|
null,
|
|
renderList(
|
|
unref(G),
|
|
(t) => (
|
|
openBlock(),
|
|
createBlock(
|
|
a,
|
|
{
|
|
key: t.id,
|
|
to: `/servers/server?id=${t.id}`,
|
|
class: `home-row`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createElementVNode(`div`, L, [
|
|
createElementVNode(
|
|
`div`,
|
|
R,
|
|
toDisplayString(
|
|
unref(product_name_n)(
|
|
t.product_name,
|
|
) || t.name,
|
|
),
|
|
1,
|
|
),
|
|
createElementVNode(
|
|
`div`,
|
|
z,
|
|
` #` +
|
|
toDisplayString(t.id) +
|
|
` / ` +
|
|
toDisplayString(t.name),
|
|
1,
|
|
),
|
|
]),
|
|
createElementVNode(
|
|
`span`,
|
|
B,
|
|
toDisplayString(
|
|
(`formatTime` in n
|
|
? n.formatTime
|
|
: unref(dict_r))(t.due_time),
|
|
),
|
|
1,
|
|
),
|
|
createVNode(
|
|
D,
|
|
{
|
|
value: (`statusLabel` in n
|
|
? n.statusLabel
|
|
: unref(dict_c))(t.status),
|
|
severity: (`statusSeverity` in n
|
|
? n.statusSeverity
|
|
: unref(dict_l))(t.status),
|
|
},
|
|
null,
|
|
8,
|
|
[`value`, `severity`],
|
|
),
|
|
]),
|
|
_: 2,
|
|
},
|
|
1032,
|
|
[`to`],
|
|
)
|
|
),
|
|
),
|
|
128,
|
|
)),
|
|
],
|
|
8,
|
|
I,
|
|
))
|
|
: (openBlock(),
|
|
createBlock(
|
|
x,
|
|
{
|
|
key: 4,
|
|
icon: `pi pi-server`,
|
|
title: `还没有${H[unref(W)].label}`,
|
|
description: `选购后实例会显示在这里`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createVNode(
|
|
a,
|
|
{
|
|
to: `/products`,
|
|
class: `home-button`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
...(r[3] ||= [
|
|
createElementVNode(
|
|
`i`,
|
|
{
|
|
class: `pi pi-plus`,
|
|
"aria-hidden": `true`,
|
|
},
|
|
null,
|
|
-1,
|
|
),
|
|
createTextVNode(`订购产品`, -1),
|
|
]),
|
|
]),
|
|
_: 1,
|
|
},
|
|
),
|
|
]),
|
|
_: 1,
|
|
},
|
|
8,
|
|
[`title`],
|
|
)),
|
|
unref(G).length || (unref(K) && !unref(q))
|
|
? (openBlock(),
|
|
createElementBlock(
|
|
`div`,
|
|
{
|
|
key: 6,
|
|
class: `server-pagination`,
|
|
inert: unref(K) || unref(J) ? !0 : void 0,
|
|
"aria-disabled": unref(K) || !!unref(J),
|
|
},
|
|
[
|
|
unref(K) && !unref(q)
|
|
? (openBlock(),
|
|
createBlock(y, {
|
|
key: 0,
|
|
height: `40px`,
|
|
}))
|
|
: (openBlock(),
|
|
createBlock(
|
|
A,
|
|
{
|
|
key: 1,
|
|
rows: 5,
|
|
"total-records": unref(X),
|
|
first: (unref(Y) - 1) * 5,
|
|
onPage: re,
|
|
},
|
|
null,
|
|
8,
|
|
[`total-records`, `first`],
|
|
)),
|
|
],
|
|
8,
|
|
V,
|
|
))
|
|
: createCommentVNode(``, !0),
|
|
],
|
|
8,
|
|
ne,
|
|
)
|
|
);
|
|
}
|
|
);
|
|
},
|
|
}),
|
|
[[`__scopeId`, `data-v-7ce76df7`]],
|
|
),
|
|
{
|
|
__name: `HomeServerPanel`,
|
|
},
|
|
);
|
|
export {};
|
|
export default H;
|
|
</script>
|