root
162abdc97c
- Add Prettier 3 with prettier-plugin-organize-imports (sorts/removes unused imports) - Add ESLint 10 flat config with typescript-eslint + eslint-plugin-vue + eslint-config-prettier - Add root scripts: format, format:check, lint, lint:fix - Reformat 257 files across admin-web, ops-web, desktop-client, packages - Remove unused locals/exports flagged by --noUnusedLocals/--noUnusedParameters - Fix duplicate localTabLabel key, surrogate-pair regex u-flag, NBSP literal in regex - Skip server/ (Go) and apps/browser-extension/ (deprecated per ADR) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import { useImageUploadProgress } from '@/lib/image-webp'
|
|
|
|
const { t } = useI18n()
|
|
const progress = useImageUploadProgress()
|
|
|
|
const stageLabel = computed(() => {
|
|
if (!progress.visible) {
|
|
return ''
|
|
}
|
|
return t(`common.imageUploadProgress.stages.${progress.stage}`)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<transition name="image-upload-progress">
|
|
<div v-if="progress.visible" class="image-upload-progress">
|
|
<div class="image-upload-progress__card">
|
|
<div class="image-upload-progress__header">
|
|
<strong>{{ t('common.imageUploadProgress.title') }}</strong>
|
|
<span>{{ progress.percent }}%</span>
|
|
</div>
|
|
<div class="image-upload-progress__file" :title="progress.fileName">
|
|
{{ progress.fileName }}
|
|
</div>
|
|
<div class="image-upload-progress__stage">
|
|
{{ stageLabel }}
|
|
</div>
|
|
<a-progress
|
|
:percent="progress.percent"
|
|
:show-info="false"
|
|
size="small"
|
|
status="active"
|
|
stroke-color="#1677ff"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.image-upload-progress {
|
|
position: fixed;
|
|
right: 24px;
|
|
top: 30px;
|
|
z-index: 3200;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.image-upload-progress__card {
|
|
width: min(360px, calc(100vw - 32px));
|
|
padding: 16px 18px;
|
|
border: 1px solid rgba(20, 37, 63, 0.08);
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
box-shadow: 0 16px 44px rgba(15, 23, 42, 0.14);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.image-upload-progress__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
color: #0f172a;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.image-upload-progress__file {
|
|
overflow: hidden;
|
|
color: #0f172a;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.image-upload-progress__stage {
|
|
margin: 6px 0 10px;
|
|
color: #475569;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.image-upload-progress-enter-active,
|
|
.image-upload-progress-leave-active {
|
|
transition: all 0.18s ease;
|
|
}
|
|
|
|
.image-upload-progress-enter-from,
|
|
.image-upload-progress-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
</style>
|