Skip to content

Commit 288fcad

Browse files
shatian114shatian114
committed
refactor: 优化下载页面的加载数据状态
1 parent db32ae6 commit 288fcad

File tree

1 file changed

+128
-118
lines changed

1 file changed

+128
-118
lines changed

‎src/pages/download/Index.vue

+128-118
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,10 @@ onMounted(() => {
5353
});
5454
})
5555
.catch((err) => {
56-
ElMessage.warning('获取版本信息失败')
56+
ElMessage.warning("版本信息获取失败");
5757
console.log("获取异常: ", err);
58-
}).finally(() => {
58+
})
59+
.finally(() => {
5960
loading.value = false;
6061
});
6162
});
@@ -135,6 +136,7 @@ const xingxia2List = ref([
135136
]);
136137
137138
function getAntongDate() {
139+
if (versionArch.value.length == 0) return '...'
138140
let dateStr = versionArch.value.filter((v) => v.arch == "amd64")[0].date;
139141
return `${dateStr.substring(0, 4)}/${dateStr.substring(
140142
4,
@@ -155,143 +157,152 @@ function getNewVersioArch(arch) {
155157
</script>
156158

157159
<template>
158-
<div v-loading="loading">
159-
<div class="pl-[1px] flex flex-col" v-if="versionArch.length > 0">
160-
<category-second title="系统下载" />
161-
<div class="flex flex-col flex-1">
162-
<div class="flex flex-row">
163-
<div class="flex flex-row w-[47%] justify-around bg-white px-[1rem]">
164-
<div class="pt-[4.5rem] min-w-[96px] w-[30%]">
165-
<img
166-
src="/assets/download/aosc-os-web.svg"
167-
style="width: 150px"
168-
/>
160+
<div class="pl-[1px] flex flex-col">
161+
<category-second title="系统下载" />
162+
<div class="flex flex-col flex-1">
163+
<div class="flex flex-row">
164+
<div class="flex flex-row w-[47%] justify-around bg-white px-[1rem]">
165+
<div class="pt-[4.5rem] min-w-[96px] w-[30%]">
166+
<img src="/assets/download/aosc-os-web.svg" style="width: 150px" />
167+
</div>
168+
<div class="download-container my-[2rem]">
169+
<div class="text-aosc-os">
170+
<p style="font-size: 32pt">安同 OS</p>
171+
<p style="font-size: 14pt">称心得意的桌面操作系统</p>
172+
<p style="font-size: 10pt">
173+
{{ getAntongDate() }}·
174+
<span class="cursor-pointer" @click="toUrl('/aosc-os/relnote')"
175+
>发行说明</span
176+
>·
177+
<span
178+
class="cursor-pointer"
179+
@click="toUrl('/aosc-os/requirements')"
180+
>配置需求</span
181+
>
182+
</p>
169183
</div>
170-
<div class="download-container my-[2rem]">
171-
<div class="text-aosc-os">
172-
<p style="font-size: 32pt">安同 OS</p>
173-
<p style="font-size: 14pt">称心得意的桌面操作系统</p>
174-
<p style="font-size: 10pt">
175-
{{ getAntongDate() }}·
176-
<span
177-
class="cursor-pointer"
178-
@click="toUrl('/aosc-os/relnote')"
179-
>发行说明</span
180-
>·
181-
<span
182-
class="cursor-pointer"
183-
@click="toUrl('/aosc-os/requirements')"
184-
>配置需求</span
185-
>
186-
</p>
187-
</div>
188-
<div class="button-container-aoscos buttons-col">
184+
<div
185+
class="button-container-aoscos buttons-col"
186+
v-loading="loading"
187+
>
188+
<div
189+
class="button-container-aoscos buttons-col"
190+
v-if="versionArch.length > 0"
191+
>
189192
<span v-for="item in antong1List" :key="item.title">
190193
<download-button :isaInfo="item"></download-button>
191194
</span>
192195
</div>
193-
<span style="font-size: 10pt; display: flex; text-align: right"
194-
>二级架构、Docker 及虚拟机镜像等其他下载</span
195-
>
196196
</div>
197+
<span style="font-size: 10pt; display: flex; text-align: right"
198+
>二级架构、Docker 及虚拟机镜像等其他下载</span
199+
>
197200
</div>
198-
<div class="afterglow px-[1rem]">
199-
<div class="download-container my-[2rem]">
200-
<div class="text-afterglow">
201-
<p style="font-size: 32pt; color: #fff">星霞 OS</p>
202-
<p style="font-size: 14pt; color: #fff">老设备也能发光发热</p>
203-
<p style="font-size: 10pt; color: #fff">敬请期待...</p>
204-
</div>
205-
<!-- <div class="button-container-afterglow buttons-col">
201+
</div>
202+
<div class="afterglow px-[1rem]">
203+
<div class="download-container my-[2rem]">
204+
<div class="text-afterglow">
205+
<p style="font-size: 32pt; color: #fff">星霞 OS</p>
206+
<p style="font-size: 14pt; color: #fff">老设备也能发光发热</p>
207+
<p style="font-size: 10pt; color: #fff">敬请期待...</p>
208+
</div>
209+
<!-- <div class="button-container-afterglow buttons-col">
206210
<span v-for="item in xingxia1List" :key="item.title">
207211
<download-button
208212
v-if="item.info != undefined"
209213
:isaInfo="item"
210214
></download-button>
211215
</span>
212216
</div> -->
213-
</div>
214-
<div class="pt-[4.5rem] min-w-[96px] w-[30%]">
215-
<img src="/assets/download/afterglow-web.svg" />
216-
</div>
217+
</div>
218+
<div class="pt-[4.5rem] min-w-[96px] w-[30%]">
219+
<img src="/assets/download/afterglow-web.svg" />
217220
</div>
218221
</div>
219222
</div>
223+
</div>
220224

221-
<div class="livekit-container w-[100%] flex flex-row">
222-
<div id="livekit-title" class="flex flex-col pl-[2rem] py-[1rem]">
223-
<p>
224-
<span id="livekit" class="text-[24pt] leading-none">LiveKit</span>
225-
<span id="livekit-alt" class="flex leading-6 text-[14pt]"
226-
>安同 OS 安装及救援环境</span
227-
>
228-
<span id="livekit" class="text-[16pt] leading-8"
229-
>功能完备，应不时之需</span
230-
>
231-
</p>
232-
<p>
233-
<a href="#">发行说明</a>
234-
<span class="px-[.25rem]">·</span>
235-
<a href="#">配置需求</a>
236-
</p>
237-
</div>
238-
<div
239-
id="livekit-buttons"
240-
class="buttons-col flex flex-col justify-between gap-2 mb-[1rem] pr-[8rem] ml-auto"
241-
>
242-
<div class="button-container-aoscos buttons-col">
225+
<div class="livekit-container w-[100%] flex flex-row">
226+
<div id="livekit-title" class="flex flex-col pl-[2rem] py-[1rem]">
227+
<p>
228+
<span id="livekit" class="text-[24pt] leading-none">LiveKit</span>
229+
<span id="livekit-alt" class="flex leading-6 text-[14pt]"
230+
>安同 OS 安装及救援环境</span
231+
>
232+
<span id="livekit" class="text-[16pt] leading-8"
233+
>功能完备，应不时之需</span
234+
>
235+
</p>
236+
<p>
237+
<a href="#">发行说明</a>
238+
<span class="px-[.25rem]">·</span>
239+
<a href="#">配置需求</a>
240+
</p>
241+
</div>
242+
<div
243+
id="livekit-buttons"
244+
class="buttons-col flex flex-col justify-between gap-2 mb-[1rem] pr-[8rem] ml-auto"
245+
>
246+
<div class="button-container-aoscos buttons-col" v-loading="loading">
247+
<div
248+
class="button-container-aoscos buttons-col"
249+
v-if="versionArch.length > 0"
250+
>
243251
<span v-for="item in antong1List" :key="item.title">
244252
<download-button :isaInfo="item"></download-button>
245253
</span>
246254
</div>
247255
</div>
248256
</div>
249-
<div class="wsl-container w-[100%] flex flex-row min-h-[12rem]">
250-
<div id="wsl-title" class="flex flex-col pl-[2rem] py-[1rem]">
251-
<p>
252-
<span id="wsl" class="text-[24pt] leading-none">WSL 环境</span>
253-
<span id="wsl-alt" class="flex leading-6 text-[14pt]"
254-
>适用于 WSL 的安同 OS</span
255-
>
256-
<span id="wsl-description" class="text-[16pt] leading-8"
257-
>Windows 与安同双双联手，生产力触手可及</span
258-
>
259-
</p>
260-
<p>
261-
<a href="#">发行说明</a>
262-
<span class="px-[.25rem]">·</span>
263-
<a href="#">配置需求</a>
264-
</p>
265-
</div>
266-
<div
267-
id="wsl-buttons"
268-
class="buttons-col flex flex-col justify-between gap-2 my-[1rem] pr-[8rem] ml-auto"
269-
>
270-
<ms-store-badge
271-
class="mt-auto h-[60px]"
272-
style="max-width: 224px"
273-
productid="9NMDF21NV65Z"
274-
window-mode="popup"
275-
theme="dark"
276-
language="en-us"
277-
animation="on"
257+
</div>
258+
<div class="wsl-container w-[100%] flex flex-row min-h-[12rem]">
259+
<div id="wsl-title" class="flex flex-col pl-[2rem] py-[1rem]">
260+
<p>
261+
<span id="wsl" class="text-[24pt] leading-none">WSL 环境</span>
262+
<span id="wsl-alt" class="flex leading-6 text-[14pt]"
263+
>适用于 WSL 的安同 OS</span
278264
>
279-
</ms-store-badge>
280-
</div>
265+
<span id="wsl-description" class="text-[16pt] leading-8"
266+
>Windows 与安同双双联手，生产力触手可及</span
267+
>
268+
</p>
269+
<p>
270+
<a href="#">发行说明</a>
271+
<span class="px-[.25rem]">·</span>
272+
<a href="#">配置需求</a>
273+
</p>
274+
</div>
275+
<div
276+
id="wsl-buttons"
277+
class="buttons-col flex flex-col justify-between gap-2 my-[1rem] pr-[8rem] ml-auto"
278+
>
279+
<ms-store-badge
280+
class="mt-auto h-[60px]"
281+
style="max-width: 224px"
282+
productid="9NMDF21NV65Z"
283+
window-mode="popup"
284+
theme="dark"
285+
language="en-us"
286+
animation="on"
287+
>
288+
</ms-store-badge>
281289
</div>
290+
</div>
282291

283-
<category-second title="安同 OS（二级架构）" />
284-
<div class="pt-[20px] pb-[30px] px-[30px]">
285-
<div class="text-[14pt] mb-[20px]">
286-
安同OS支持支持众多处理器微架构，除x86-64、AArch64及龙架构外，我们还支持一众存量较少或软件支持尚未完善的架构供各位玩家试用和评估。
287-
</div>
288-
<div class="flex justify-between">
292+
<category-second title="安同 OS（二级架构）" />
293+
<div class="pt-[20px] pb-[30px] px-[30px]">
294+
<div class="text-[14pt] mb-[20px]">
295+
安同OS支持支持众多处理器微架构，除x86-64、AArch64及龙架构外，我们还支持一众存量较少或软件支持尚未完善的架构供各位玩家试用和评估。
296+
</div>
297+
<div class="w-full" v-loading="loading">
298+
<div class="flex justify-between" v-if="versionArch.length > 0">
289299
<span v-for="item in antong2List" :key="item.title">
290300
<download-button v-if="item.info != undefined" :isaInfo="item" />
291301
</span>
292302
</div>
293303
</div>
294-
<!-- <category-second title="星霞 OS（其他版本）" />
304+
</div>
305+
<!-- <category-second title="星霞 OS（其他版本）" />
295306
<div class="pt-[20px] pb-[30px] px-[30px]">
296307
<div class="text-[14pt] mb-[20px]">
297308
星霞OS支持许多来自不同年代和不同形式的设备，点击下方对应您设备的下载按钮即可。
@@ -305,18 +316,17 @@ function getNewVersioArch(arch) {
305316
</span>
306317
</div>
307318
</div> -->
308-
<category-second title="容器镜像" />
309-
<div class="pt-[20px] pb-[30px] px-[30px]">
310-
<div class="text-[14pt] mb-[20px]">
311-
我们为Docker用户提供了容器镜像，您可以通过如下命令抓取安同OS容器
312-
</div>
313-
<VCodeBlock
314-
code="docker pull aosc/aosc-os"
315-
lang="shell"
316-
highlightjs
317-
theme="github"
318-
/>
319+
<category-second title="容器镜像" />
320+
<div class="pt-[20px] pb-[30px] px-[30px]">
321+
<div class="text-[14pt] mb-[20px]">
322+
我们为Docker用户提供了容器镜像，您可以通过如下命令抓取安同OS容器
319323
</div>
324+
<VCodeBlock
325+
code="docker pull aosc/aosc-os"
326+
lang="shell"
327+
highlightjs
328+
theme="github"
329+
/>
320330
</div>
321331
</div>
322332
</template>

0 commit comments

Comments
 (0)