1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-12-31 11:53:22 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: Change wget page style (#8016)
Some checks failed
SonarCloud Scan / SonarCloud (push) Failing after -10s
Details

Browse source
This commit is contained in:
zhengkunwang 2025-02-26 18:16:54 +08:00 • committed by GitHub
parent ec363ac157
commit 34df745d1c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 68 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
frontend/src/views/host/file-management/process/index.vue
View file

@ -6,15 +6,47 @@
:before-close="handleClose"
:title="$t('file.downloadProcess')"
>
<div v-for="(value, index) in res" :key="index">
<span>{{ value['percent'] === 100 ? $t('file.downloadSuccess') : $t('file.downloading') }}</span>
<MsgInfo :info="value['name']" width="250" />
<el-progress v-if="value['total'] == 0" :percentage="100" :indeterminate="true" :duration="1" />
<el-progress v-else :text-inside="true" :stroke-width="15" :percentage="value['percent']"></el-progress>
<span>
{{ getFileSize(value['written']) }}/
<span v-if="value['total'] > 0">{{ getFileSize(value['total']) }}</span>
</span>
<div class="space-y-4 p-4">
<div
v-for="(value, index) in res"
:key="index"
class="bg-white rounded-lg p-4 shadow-sm border border-gray-100 transition-all duration-200 hover:shadow-md"
:class="{ completed: value.percent === 100 }"
>
<div class="flex items-center gap-3">
<div class="flex-1">
<MsgInfo :info="value.name" class="text-gray-700" />
<div class="text-gray-500">
{{ value.percent === 100 ? $t('file.downloadSuccess') : $t('file.downloading') }}
</div>
</div>
</div>
<div class="space-y-2">
<div class="flex justify-end text-gray-500 mb-1">
<span>{{ getFileSize(value.written) }}</span>
<span v-if="value.total > 0" class="text-gray-400">/{{ getFileSize(value.total) }}</span>
</div>
<div class="w-full">
<el-progress
v-if="value.total === 0 && value.percent != 100"
:percentage="100"
:indeterminate="true"
:duration="1"
class="progress-bar"
:stroke-width="8"
:show-text="false"
/>
<el-progress
v-else
:percentage="value.percent"
:stroke-width="8"
class="progress-bar"
:status="value.percent === 100 ? 'success' : ''"
/>
</div>
</div>
</div>
</div>
</el-dialog>
</template>
@ -108,3 +140,30 @@ const onOpen = () => {
getKeys();
};
</script>
<style type="scss" scoped>
.download-item.completed {
@apply bg-green-50/50;
}
.progress-bar {
:deep(.el-progress-bar__outer) {
@apply rounded-full bg-gray-100;
}
:deep(.el-progress-bar__inner) {
@apply rounded-full transition-all duration-300;
}
}
@keyframes bounce {
0%,
100% {
transform: translateY(-10%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
</style>