mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-14 06:57:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

show hint while loading the image

Browse Source
This commit is contained in:
MaysWind
2025-09-29 19:19:35 +08:00
parent 564c9e1d95
commit 46dd2888a6
16 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/AIImageRecognitionSheet.vue
+8 -1
View File
@@ -15,7 +15,8 @@
style="height: 400px" @click="showOpenImage">
<img height="400px" :src="imageSrc" v-if="imageSrc" />
<div class="image-container-background display-flex justify-content-center align-items-center padding-horizontal" v-if="!imageSrc">
<span>{{ tt('Click here to select a receipt or transaction image') }}</span>
<span v-if=!loading>{{ tt('Click here to select a receipt or transaction image') }}</span>
<span v-else-if="loading">{{ tt('Loading image...') }}</span>
</div>
</div>
</f7-page-content>
@@ -65,12 +66,18 @@ const imageFile = ref<File | null>(null);
const imageSrc = ref<string | undefined>(undefined);
function loadImage(file: File): void {
loading.value = true;
imageFile.value = null;
imageSrc.value = undefined;
compressJpgImage(file, 1280, 1280, 0.8).then(blob => {
imageFile.value = KnownFileType.JPG.createFileFromBlob(blob, "image");
imageSrc.value = URL.createObjectURL(blob);
loading.value = false;
}).catch(error => {
imageFile.value = null;
imageSrc.value = undefined;
loading.value = false;
logger.error('failed to compress image', error);
showToast('Unable to load image');
});
src/locales/de.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "Unable to recognize image",
"Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
"Release to load image": "Release to load image",
"Loading image...": "Loading image...",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Kategorie",
"Secondary Category": "Secondary Category",
src/locales/en.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "Unable to recognize image",
"Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
"Release to load image": "Release to load image",
"Loading image...": "Loading image...",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Category",
"Secondary Category": "Secondary Category",
src/locales/es.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "Unable to recognize image",
"Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
"Release to load image": "Release to load image",
"Loading image...": "Loading image...",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Categoría",
"Secondary Category": "Secondary Category",
src/locales/fr.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "Impossible de reconnaître l'image",
"Drag and drop a receipt or transaction image here, or click to select one": "Glissez-déposez un reçu ou une image de transaction ici, ou cliquez pour en sélectionner une",
"Release to load image": "Relâchez pour charger l'image",
"Loading image...": "Loading image...",
"Click here to select a receipt or transaction image": "Cliquez ici pour sélectionner un reçu ou une image de transaction",
"Category": "Catégorie",
"Secondary Category": "Catégorie secondaire",
src/locales/it.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "Unable to recognize image",
"Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
"Release to load image": "Release to load image",
"Loading image...": "Loading image...",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Categoria",
"Secondary Category": "Categoria secondaria",
src/locales/ja.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "Unable to recognize image",
"Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
"Release to load image": "Release to load image",
"Loading image...": "Loading image...",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "カテゴリ",
"Secondary Category": "二次カテゴリ",
src/locales/nl.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "Unable to recognize image",
"Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
"Release to load image": "Release to load image",
"Loading image...": "Loading image...",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Categorie",
"Secondary Category": "Secundaire categorie",
src/locales/pt_BR.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "Unable to recognize image",
"Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
"Release to load image": "Release to load image",
"Loading image...": "Loading image...",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Categoria",
"Secondary Category": "Categoria Secundária",
src/locales/ru.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "Unable to recognize image",
"Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
"Release to load image": "Release to load image",
"Loading image...": "Loading image...",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Категория",
"Secondary Category": "Secondary Category",
src/locales/th.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "ไม่สามารถจดจำรูปภาพได้",
"Drag and drop a receipt or transaction image here, or click to select one": "ลากและวางใบเสร็จหรือรูปภาพรายการที่นี่ หรือคลิกเพื่อเลือก",
"Release to load image": "ปล่อยเพื่อโหลดรูปภาพ",
"Loading image...": "Loading image...",
"Click here to select a receipt or transaction image": "คลิกที่นี่เพื่อเลือกใบเสร็จหรือรูปภาพรายการ",
"Category": "หมวดหมู่",
"Secondary Category": "หมวดหมู่รอง",
src/locales/uk.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "Unable to recognize image",
"Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
"Release to load image": "Release to load image",
"Loading image...": "Loading image...",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Категорія",
"Secondary Category": "Вторинна категорія",
src/locales/vi.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "Unable to recognize image",
"Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
"Release to load image": "Release to load image",
"Loading image...": "Loading image...",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Danh mục",
"Secondary Category": "Secondary Category",
src/locales/zh_Hans.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "无法识别图片",
"Drag and drop a receipt or transaction image here, or click to select one": "拖拽收据或交易图片到此处，或点击选择图片",
"Release to load image": "释放以加载图片",
"Loading image...": "正在加载图片...",
"Click here to select a receipt or transaction image": "点击这里选择收据或交易图片",
"Category": "分类",
"Secondary Category": "二级分类",
src/locales/zh_Hant.json
+1
View File
@@ -1737,6 +1737,7 @@
"Unable to recognize image": "無法識別圖片",
"Drag and drop a receipt or transaction image here, or click to select one": "將收據或交易圖片拖放到此處，或點擊以選擇圖片",
"Release to load image": "放開以載入圖片",
"Loading image...": "正在載入圖片...",
"Click here to select a receipt or transaction image": "點擊這裡選擇收據或交易圖片",
"Category": "分類",
"Secondary Category": "次分類",
src/views/desktop/transactions/list/dialogs/AIImageRecognitionDialog.vue
+9 -2
View File
@@ -15,8 +15,9 @@
@drop.prevent="onDrop">
<div class="d-flex w-100 fill-height justify-center align-center justify-content-center px-4"
:class="{ 'dropzone': true, 'dropzone-dragover': isDragOver }" style="height: 480px">
<h3 class="pa-2 bg-grey-200" v-if="!imageFile && !isDragOver">{{ tt('Drag and drop a receipt or transaction image here, or click to select one') }}</h3>
<h3 class="pa-2 bg-grey-200" v-if="isDragOver">{{ tt('Release to load image') }}</h3>
<h3 class="pa-2 bg-grey-200" v-if="!loading && !imageFile && !isDragOver">{{ tt('Drag and drop a receipt or transaction image here, or click to select one') }}</h3>
<h3 class="pa-2 bg-grey-200" v-if="!loading && isDragOver">{{ tt('Release to load image') }}</h3>
<h3 class="pa-2" v-if="loading">{{ tt('Loading image...') }}</h3>
</div>
<v-img height="480px" :class="{ 'cursor-pointer': !loading && !recognizing && !isDragOver }"
:src="imageSrc" @click="showOpenImageDialog">
@@ -85,12 +86,18 @@ const imageSrc = ref<string | undefined>(undefined);
const isDragOver = ref<boolean>(false);
function loadImage(file: File): void {
loading.value = true;
imageFile.value = null;
imageSrc.value = undefined;
compressJpgImage(file, 1280, 1280, 0.8).then(blob => {
imageFile.value = KnownFileType.JPG.createFileFromBlob(blob, "image");
imageSrc.value = URL.createObjectURL(blob);
loading.value = false;
}).catch(error => {
imageFile.value = null;
imageSrc.value = undefined;
loading.value = false;
logger.error('failed to compress image', error);
snackbar.value?.showError('Unable to load image');
});