|
| 1 | +<template> |
| 2 | + <ModalWrapper :visible="props.visible" @close="emit('close')"> |
| 3 | + <div class="container"> |
| 4 | + <div class="top-bar"> |
| 5 | + <div>{{ t('text.downloadMultipleTip') }}</div> |
| 6 | + <div class="right"> |
| 7 | + <button |
| 8 | + type="button" |
| 9 | + :disabled="making" |
| 10 | + class="download-btn" |
| 11 | + @click="make" |
| 12 | + > |
| 13 | + {{ |
| 14 | + making |
| 15 | + ? `${t('text.downloadingMultiple')}(${madeCount}/${ |
| 16 | + avatarList?.length |
| 17 | + })` |
| 18 | + : t(`text.downloadMultiple`) |
| 19 | + }} |
| 20 | + </button> |
| 21 | + </div> |
| 22 | + </div> |
| 23 | + |
| 24 | + <div class="content-box"> |
| 25 | + <PerfectScrollbar |
| 26 | + style="height: 100%; overflow: hidden" |
| 27 | + :options="{ suppressScrollX: false }" |
| 28 | + > |
| 29 | + <div class="content"> |
| 30 | + <template v-for="(opt, i) in props.avatarList" :key="i"> |
| 31 | + <div |
| 32 | + class="avatar-box" |
| 33 | + :style="{ opacity: making && i + 1 > madeCount ? 0.5 : 1 }" |
| 34 | + > |
| 35 | + <VueColorAvatar :id="`avatar-${i}`" :option="opt" :size="280" /> |
| 36 | + </div> |
| 37 | + </template> |
| 38 | + </div> |
| 39 | + </PerfectScrollbar> |
| 40 | + </div> |
| 41 | + </div> |
| 42 | + </ModalWrapper> |
| 43 | +</template> |
| 44 | + |
| 45 | +<script lang="ts" setup> |
| 46 | +import { ref } from 'vue' |
| 47 | +import { useI18n } from 'vue-i18n' |
| 48 | +
|
| 49 | +import PerfectScrollbar from '@/components/PerfectScrollbar.vue' |
| 50 | +import VueColorAvatar from '@/components/VueColorAvatar.vue' |
| 51 | +import type { AvatarOption } from '@/types' |
| 52 | +import { recordEvent } from '@/utils/ga' |
| 53 | +
|
| 54 | +import { name as appName } from '../../../package.json' |
| 55 | +import ModalWrapper from './ModalWrapper.vue' |
| 56 | +
|
| 57 | +const props = defineProps<{ visible?: boolean; avatarList?: AvatarOption[] }>() |
| 58 | +
|
| 59 | +const emit = defineEmits<{ |
| 60 | + (e: 'close'): void |
| 61 | +}>() |
| 62 | +
|
| 63 | +const { t } = useI18n() |
| 64 | +
|
| 65 | +const making = ref(false) |
| 66 | +const madeCount = ref(0) |
| 67 | +
|
| 68 | +async function make() { |
| 69 | + if (props.avatarList && !making.value) { |
| 70 | + making.value = true |
| 71 | + madeCount.value = 1 |
| 72 | +
|
| 73 | + const html2canvas = (await import('html2canvas')).default |
| 74 | +
|
| 75 | + const { default: JSZip } = await import('jszip') |
| 76 | + const jsZip = new JSZip() |
| 77 | +
|
| 78 | + for (let i = 0; i <= props.avatarList.length; i += 1) { |
| 79 | + const dom = window.document.querySelector(`#avatar-${i}`) |
| 80 | +
|
| 81 | + if (dom instanceof HTMLElement) { |
| 82 | + const canvas = await html2canvas(dom, { |
| 83 | + backgroundColor: null, |
| 84 | + }) |
| 85 | +
|
| 86 | + const dataUrl = canvas.toDataURL().replace('data:image/png;base64,', '') |
| 87 | + jsZip.file(`${i + 1}.png`, dataUrl, { base64: true }) |
| 88 | + madeCount.value = madeCount.value += 1 |
| 89 | + } |
| 90 | + } |
| 91 | +
|
| 92 | + const base64 = await jsZip.generateAsync({ type: 'base64' }) |
| 93 | +
|
| 94 | + making.value = false |
| 95 | + madeCount.value = 0 |
| 96 | +
|
| 97 | + const a = window.document.createElement('a') |
| 98 | + a.href = 'data:application/zip;base64,' + base64 |
| 99 | + a.download = `${appName}.zip` |
| 100 | + a.click() |
| 101 | +
|
| 102 | + recordEvent('click_download_multiple', { |
| 103 | + event_category: 'click', |
| 104 | + }) |
| 105 | + } |
| 106 | +} |
| 107 | +</script> |
| 108 | + |
| 109 | +<style lang="scss" scoped> |
| 110 | +@use 'src/styles/var'; |
| 111 | +
|
| 112 | +.container { |
| 113 | + position: absolute; |
| 114 | + top: 50%; |
| 115 | + left: 50%; |
| 116 | + height: max(90vh, 1000px); |
| 117 | + overflow: hidden; |
| 118 | + background-color: lighten(var.$color-dark, 3); |
| 119 | + border-radius: 1rem; |
| 120 | + transform: translate(-50%, -50%); |
| 121 | +
|
| 122 | + $top-bar-height: 3.5rem; |
| 123 | +
|
| 124 | + .top-bar { |
| 125 | + position: absolute; |
| 126 | + right: 0; |
| 127 | + left: 0; |
| 128 | + z-index: 10; |
| 129 | + display: flex; |
| 130 | + align-items: center; |
| 131 | + height: $top-bar-height; |
| 132 | + padding: 1rem 2rem; |
| 133 | + background-color: lighten(var.$color-dark, 6); |
| 134 | +
|
| 135 | + .right { |
| 136 | + display: flex; |
| 137 | + align-items: center; |
| 138 | + margin-left: auto; |
| 139 | +
|
| 140 | + .download-btn { |
| 141 | + display: flex; |
| 142 | + align-items: center; |
| 143 | + justify-content: center; |
| 144 | + height: 2rem; |
| 145 | + margin-left: 1rem; |
| 146 | + padding: 0 1rem; |
| 147 | + color: #fff; |
| 148 | + background-color: var.$color-accent; |
| 149 | + border-radius: 0.4rem; |
| 150 | + cursor: pointer; |
| 151 | +
|
| 152 | + &:disabled, |
| 153 | + &[disabled] { |
| 154 | + color: rgba(#fff, 0.8); |
| 155 | + cursor: default; |
| 156 | + } |
| 157 | + } |
| 158 | + } |
| 159 | + } |
| 160 | +
|
| 161 | + .content-box { |
| 162 | + height: 100%; |
| 163 | + padding: $top-bar-height 0rem 0rem 0rem; |
| 164 | + } |
| 165 | +
|
| 166 | + .content { |
| 167 | + z-index: 10; |
| 168 | + display: grid; |
| 169 | + grid-auto-rows: min-content; |
| 170 | + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| 171 | + gap: 2rem; |
| 172 | + justify-content: space-between; |
| 173 | + width: max(85vw, 1280px); |
| 174 | + padding: 2rem; |
| 175 | +
|
| 176 | + .avatar-box { |
| 177 | + display: flex; |
| 178 | + align-items: center; |
| 179 | + justify-content: center; |
| 180 | + } |
| 181 | + } |
| 182 | +} |
| 183 | +</style> |
0 commit comments