273 lines
9.5 KiB
Vue
273 lines
9.5 KiB
Vue
<script>
|
|
/** 首页到期提醒：查询未来 7 天内实例，按 due_time 升序展示最多 5 台，并再次过滤请求期间已到期的记录。 */
|
|
import "~/assets/styles/HomeExpiringPanel.Ckflw2Hv.css";
|
|
import { toDisplayString } from "vue";
|
|
import { renderList } from "vue";
|
|
import { onMounted } from "vue";
|
|
import { createBlock } from "vue";
|
|
import { ref } from "vue";
|
|
import { withCtx } 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 { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
|
|
import { r as dict_r } from "~/lib/dict.js";
|
|
import ListEmpty from "~/components/ListEmpty.vue";
|
|
import skeleton from "primevue/skeleton";
|
|
var b = {
|
|
class: `home-card`,
|
|
},
|
|
x = {
|
|
key: 0,
|
|
class: `home-list`,
|
|
},
|
|
S = {
|
|
key: 3,
|
|
class: `home-list`,
|
|
},
|
|
C = {
|
|
class: `home-row-main`,
|
|
},
|
|
w = {
|
|
class: `home-row-title col-mono`,
|
|
},
|
|
T = {
|
|
class: `home-row-sub`,
|
|
},
|
|
E = {
|
|
class: `due-badge`,
|
|
},
|
|
D = 7,
|
|
O = 5,
|
|
k = Object.assign(
|
|
_plugin_vue_export_helper_t(
|
|
defineComponent({
|
|
__name: `HomeExpiringPanel`,
|
|
setup(d) {
|
|
let g = useApi(),
|
|
k = ref([]),
|
|
A = ref(!0),
|
|
j = ref(``);
|
|
// 分页收集到足够实例或达到返回总量后停止；最后按到期时间排序并裁剪，不把全部资源一次塞入首页。
|
|
onMounted(async () => {
|
|
try {
|
|
let e = Math.floor(Date.now() / 1e3),
|
|
t = e + D * 86400,
|
|
n = [],
|
|
r = 1,
|
|
i = 0;
|
|
for (; n.length < O;) {
|
|
let a = await g.get(`/host`, {
|
|
page: r,
|
|
limit: 100,
|
|
orderby: `due_time`,
|
|
sort: `asc`,
|
|
start_time: e,
|
|
end_time: t,
|
|
}),
|
|
o = a.list ?? [];
|
|
if (
|
|
(n.push(
|
|
...o.filter(
|
|
(e) =>
|
|
Number(e.due_time) > Date.now() / 1e3 &&
|
|
Number(e.due_time) <= t,
|
|
),
|
|
),
|
|
(i += o.length),
|
|
!o.length ||
|
|
(a.count === void 0
|
|
? o.length < 100
|
|
: i >= Number(a.count)))
|
|
)
|
|
break;
|
|
r++;
|
|
}
|
|
k.value = n
|
|
.filter((e) => Number(e.due_time) > Date.now() / 1e3)
|
|
.sort((e, t) => Number(e.due_time) - Number(t.due_time))
|
|
.slice(0, O);
|
|
} catch (e) {
|
|
j.value = e instanceof Error ? e.message : `到期实例加载失败`;
|
|
} finally {
|
|
A.value = !1;
|
|
}
|
|
});
|
|
// 秒级到期时间转毫秒后向上取整为提示天数，不修改真实计费截止时间。
|
|
function M(e) {
|
|
return e ? Math.ceil((e * 1e3 - Date.now()) / 864e5) : 0;
|
|
}
|
|
// 骨架、错误、空态与有效实例互斥展示；列表每行进入实例详情。
|
|
return (n, i) => {
|
|
let d = skeleton,
|
|
h = ListEmpty,
|
|
g = NuxtLink;
|
|
return (
|
|
openBlock(),
|
|
createElementBlock(`div`, b, [
|
|
createElementVNode(
|
|
`div`,
|
|
{
|
|
class: `home-card-head`,
|
|
},
|
|
[
|
|
(i[0] ||= createElementVNode(
|
|
`div`,
|
|
{
|
|
class: `home-card-title`,
|
|
},
|
|
[
|
|
createElementVNode(`i`, {
|
|
class: `pi pi-clock`,
|
|
}),
|
|
createTextVNode(`到期提醒`),
|
|
],
|
|
-1,
|
|
)),
|
|
createElementVNode(
|
|
`span`,
|
|
{
|
|
class: `home-card-more`,
|
|
},
|
|
toDisplayString(D) + ` 天内`,
|
|
),
|
|
],
|
|
),
|
|
unref(A)
|
|
? (openBlock(),
|
|
createElementBlock(`div`, x, [
|
|
(openBlock(),
|
|
createElementBlock(
|
|
Fragment,
|
|
null,
|
|
renderList(2, (e) =>
|
|
createElementVNode(
|
|
`div`,
|
|
{
|
|
key: e,
|
|
class: `home-row-skeleton`,
|
|
},
|
|
[
|
|
createVNode(d, {
|
|
height: `14px`,
|
|
width: `50%`,
|
|
}),
|
|
createVNode(d, {
|
|
height: `12px`,
|
|
width: `30%`,
|
|
style: {
|
|
"margin-top": `8px`,
|
|
},
|
|
}),
|
|
],
|
|
),
|
|
),
|
|
64,
|
|
)),
|
|
]))
|
|
: unref(j)
|
|
? (openBlock(),
|
|
createBlock(
|
|
h,
|
|
{
|
|
key: 1,
|
|
icon: `pi pi-exclamation-circle`,
|
|
title: `加载失败`,
|
|
description: unref(j),
|
|
},
|
|
null,
|
|
8,
|
|
[`description`],
|
|
))
|
|
: unref(k).length
|
|
? (openBlock(),
|
|
createElementBlock(`div`, S, [
|
|
(openBlock(!0),
|
|
createElementBlock(
|
|
Fragment,
|
|
null,
|
|
renderList(
|
|
unref(k),
|
|
(t) => (
|
|
openBlock(),
|
|
createBlock(
|
|
g,
|
|
{
|
|
key: t.id,
|
|
to: `/servers/server?id=${t.id}`,
|
|
class: `home-row`,
|
|
},
|
|
{
|
|
default: withCtx(() => [
|
|
createElementVNode(`div`, C, [
|
|
createElementVNode(
|
|
`div`,
|
|
w,
|
|
toDisplayString(t.name),
|
|
1,
|
|
),
|
|
createElementVNode(
|
|
`div`,
|
|
T,
|
|
`到期 ` +
|
|
toDisplayString(
|
|
(`formatTime` in n
|
|
? n.formatTime
|
|
: unref(dict_r))(t.due_time),
|
|
),
|
|
1,
|
|
),
|
|
]),
|
|
createElementVNode(
|
|
`span`,
|
|
E,
|
|
toDisplayString(M(t.due_time)) +
|
|
` 天后 `,
|
|
1,
|
|
),
|
|
]),
|
|
_: 2,
|
|
},
|
|
1032,
|
|
[`to`],
|
|
)
|
|
),
|
|
),
|
|
128,
|
|
)),
|
|
]))
|
|
: (openBlock(),
|
|
createBlock(
|
|
h,
|
|
{
|
|
key: 2,
|
|
icon: `pi pi-check-circle`,
|
|
title: `暂无即将到期的实例`,
|
|
description: `${D} 天内有实例到期时会在这里提醒你`,
|
|
},
|
|
null,
|
|
8,
|
|
[`description`],
|
|
)),
|
|
])
|
|
);
|
|
};
|
|
},
|
|
}),
|
|
[[`__scopeId`, `data-v-9017f053`]],
|
|
),
|
|
{
|
|
__name: `HomeExpiringPanel`,
|
|
},
|
|
);
|
|
export {};
|
|
export default k;
|
|
</script>
|