zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use system control to take photo or select an image

Browse Source
This commit is contained in:
MaysWind
2025-09-21 12:00:11 +08:00
parent 5d88287ae2
commit 02514fc457
13 changed files with 25 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/AIImageRecognitionSheet.vue
+13 -29
View File
@@ -4,33 +4,23 @@
<f7-toolbar>
<div class="swipe-handler"></div>
<div class="left">
<f7-link :class="{ 'disabled': loading || recognizing }" :text="tt('Choose from Library')" @click="showOpenImage"></f7-link>
<f7-link :class="{ 'disabled': loading || recognizing }" :text="tt('Cancel')" @click="cancel"></f7-link>
</div>
<div class="right">
<f7-link :class="{ 'disabled': loading || recognizing }" :text="tt('Take Photo')" @click="showCamera"></f7-link>
<f7-link :class="{ 'disabled': loading || recognizing || !imageFile }" :text="tt('Recognize')" @click="confirm"></f7-link>
</div>
</f7-toolbar>
<f7-page-content class="margin-top no-padding-top">
<div class="padding-horizontal padding-bottom">
<div class="image-container display-flex justify-content-center width-100 margin-bottom" style="height: 240px">
<img height="240px" :src="imageSrc" v-if="imageSrc" />
<div class="image-container-background display-flex justify-content-center align-items-center" v-if="!imageSrc">
<span>{{ tt('Please select a receipt or transaction image first') }}</span>
</div>
</div>
<f7-button large fill color="primary"
:class="{ 'disabled': loading || recognizing || !imageFile }"
:text="tt('Recognize')"
@click="confirm">
</f7-button>
<div class="margin-top text-align-center">
<f7-link :class="{ 'disabled': loading || recognizing }" @click="cancel" :text="tt('Cancel')"></f7-link>
<f7-page-content>
<div class="image-container display-flex justify-content-center"
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" v-if="!imageSrc">
<span>{{ tt('Click here to select a receipt or transaction image') }}</span>
</div>
</div>
</f7-page-content>
<input ref="imageInput" type="file" style="display: none" :accept="SUPPORTED_IMAGE_EXTENSIONS" @change="openImage($event)" />
<input ref="cameraInput" type="file" style="display: none" :accept="SUPPORTED_IMAGE_EXTENSIONS" capture="environment" @change="openImage($event)" />
<input ref="imageInput" type="file" style="display: none" :accept="`${SUPPORTED_IMAGE_EXTENSIONS};capture=camera`" @change="openImage($event)" />
</f7-sheet>
</template>
@@ -66,7 +56,6 @@ const { showToast } = useI18nUIComponents();
const transactionsStore = useTransactionsStore();
const imageInput = useTemplateRef<HTMLInputElement>('imageInput');
const cameraInput = useTemplateRef<HTMLInputElement>('cameraInput');
const loading = ref<boolean>(false);
const recognizing = ref<boolean>(false);
@@ -93,14 +82,6 @@ function showOpenImage(): void {
imageInput.value?.click();
}
function showCamera(): void {
if (loading.value || recognizing.value) {
return;
}
cameraInput.value?.click();
}
function openImage(event: Event): void {
if (!event || !event.target) {
return;
@@ -176,6 +157,9 @@ function onSheetClosed(): void {
.image-container-background {
width: 100%;
height: 100%;
background-color: var(--f7-page-bg-color);
> span {
font-size: var(--f7-input-font-size);
}
}
</style>
src/locales/de.json
+1 -3
View File
@@ -1725,13 +1725,11 @@
"Duplicate (With Geographic Location)": "Duplicate (With Geographic Location)",
"Duplicate (With Time and Geographic Location)": "Duplicate (With Time and Geographic Location)",
"AI Image Recognition": "AI Image Recognition",
"Choose from Library": "Choose from Library",
"Take Photo": "Take Photo",
"Unable to load image": "Unable to load image",
"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",
"Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Kategorie",
"Secondary Category": "Secondary Category",
"Expense Category": "Expense Category",
src/locales/en.json
+1 -3
View File
@@ -1725,13 +1725,11 @@
"Duplicate (With Geographic Location)": "Duplicate (With Geographic Location)",
"Duplicate (With Time and Geographic Location)": "Duplicate (With Time and Geographic Location)",
"AI Image Recognition": "AI Image Recognition",
"Choose from Library": "Choose from Library",
"Take Photo": "Take Photo",
"Unable to load image": "Unable to load image",
"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",
"Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Category",
"Secondary Category": "Secondary Category",
"Expense Category": "Expense Category",
src/locales/es.json
+1 -3
View File
@@ -1725,13 +1725,11 @@
"Duplicate (With Geographic Location)": "Duplicate (With Geographic Location)",
"Duplicate (With Time and Geographic Location)": "Duplicate (With Time and Geographic Location)",
"AI Image Recognition": "AI Image Recognition",
"Choose from Library": "Choose from Library",
"Take Photo": "Take Photo",
"Unable to load image": "Unable to load image",
"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",
"Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
"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",
"Expense Category": "Expense Category",
src/locales/it.json
+1 -3
View File
@@ -1725,13 +1725,11 @@
"Duplicate (With Geographic Location)": "Duplica (con posizione geografica)",
"Duplicate (With Time and Geographic Location)": "Duplica (con ora e posizione geografica)",
"AI Image Recognition": "AI Image Recognition",
"Choose from Library": "Choose from Library",
"Take Photo": "Take Photo",
"Unable to load image": "Unable to load image",
"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",
"Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Categoria",
"Secondary Category": "Categoria secondaria",
"Expense Category": "Expense Category",
src/locales/ja.json
+1 -3
View File
@@ -1725,13 +1725,11 @@
"Duplicate (With Geographic Location)": "複製（地理座標を含む）",
"Duplicate (With Time and Geographic Location)": "複製（時間と地理座標を含む）",
"AI Image Recognition": "AI Image Recognition",
"Choose from Library": "Choose from Library",
"Take Photo": "Take Photo",
"Unable to load image": "Unable to load image",
"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",
"Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "カテゴリ",
"Secondary Category": "二次カテゴリ",
"Expense Category": "Expense Category",
src/locales/nl.json
+1 -3
View File
@@ -1725,13 +1725,11 @@
"Duplicate (With Geographic Location)": "Dupliceren (met geografische locatie)",
"Duplicate (With Time and Geographic Location)": "Dupliceren (met tijd en locatie)",
"AI Image Recognition": "AI Image Recognition",
"Choose from Library": "Choose from Library",
"Take Photo": "Take Photo",
"Unable to load image": "Unable to load image",
"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",
"Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Categorie",
"Secondary Category": "Secundaire categorie",
"Expense Category": "Uitgavecategorie",
src/locales/pt_BR.json
+1 -3
View File
@@ -1725,13 +1725,11 @@
"Duplicate (With Geographic Location)": "Duplicar (Com Localização Geográfica)",
"Duplicate (With Time and Geographic Location)": "Duplicar (Com Tempo e Localização Geográfica)",
"AI Image Recognition": "AI Image Recognition",
"Choose from Library": "Choose from Library",
"Take Photo": "Take Photo",
"Unable to load image": "Unable to load image",
"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",
"Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
"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",
"Expense Category": "Expense Category",
src/locales/ru.json
+1 -3
View File
@@ -1725,13 +1725,11 @@
"Duplicate (With Geographic Location)": "Duplicate (With Geographic Location)",
"Duplicate (With Time and Geographic Location)": "Duplicate (With Time and Geographic Location)",
"AI Image Recognition": "AI Image Recognition",
"Choose from Library": "Choose from Library",
"Take Photo": "Take Photo",
"Unable to load image": "Unable to load image",
"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",
"Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Категория",
"Secondary Category": "Secondary Category",
"Expense Category": "Expense Category",
src/locales/uk.json
+1 -3
View File
@@ -1725,13 +1725,11 @@
"Duplicate (With Geographic Location)": "Дублювати (з геолокацією)",
"Duplicate (With Time and Geographic Location)": "Дублювати (з часом і геолокацією)",
"AI Image Recognition": "AI Image Recognition",
"Choose from Library": "Choose from Library",
"Take Photo": "Take Photo",
"Unable to load image": "Unable to load image",
"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",
"Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
"Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
"Category": "Категорія",
"Secondary Category": "Вторинна категорія",
"Expense Category": "Expense Category",
src/locales/vi.json
+1 -3
View File
@@ -1725,13 +1725,11 @@
"Duplicate (With Geographic Location)": "Duplicate (With Geographic Location)",
"Duplicate (With Time and Geographic Location)": "Duplicate (With Time and Geographic Location)",
"AI Image Recognition": "AI Image Recognition",
"Choose from Library": "Choose from Library",
"Take Photo": "Take Photo",
"Unable to load image": "Unable to load image",
"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",
"Please select a receipt or transaction image first": "Please select a receipt or transaction image first",
"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",
"Expense Category": "Expense Category",
src/locales/zh_Hans.json
+1 -3
View File
@@ -1725,13 +1725,11 @@
"Duplicate (With Geographic Location)": "复制 (含地理位置)",
"Duplicate (With Time and Geographic Location)": "复制 (含时间和地理位置)",
"AI Image Recognition": "AI识图",
"Choose from Library": "从图库选择",
"Take Photo": "拍照",
"Unable to load image": "无法加载图片",
"Unable to recognize image": "无法识别图片",
"Drag and drop a receipt or transaction image here, or click to select one": "拖拽收据或交易图片到此处，或点击选择图片",
"Release to load image": "释放以加载图片",
"Please select a receipt or transaction image first": "请先选择收据或交易图片",
"Click here to select a receipt or transaction image": "点击这里选择收据或交易图片",
"Category": "分类",
"Secondary Category": "二级分类",
"Expense Category": "支出分类",
src/locales/zh_Hant.json
+1 -3
View File
@@ -1725,13 +1725,11 @@
"Duplicate (With Geographic Location)": "複製 (含地理位置)",
"Duplicate (With Time and Geographic Location)": "複製 (含時間和地理位置)",
"AI Image Recognition": "AI識圖",
"Choose from Library": "從相簿選擇",
"Take Photo": "拍照",
"Unable to load image": "無法載入圖片",
"Unable to recognize image": "無法識別圖片",
"Drag and drop a receipt or transaction image here, or click to select one": "將收據或交易圖片拖放到此處，或點擊以選擇圖片",
"Release to load image": "放開以載入圖片",
"Please select a receipt or transaction image first": "請先選擇收據或交易圖片",
"Click here to select a receipt or transaction image": "點擊這裡選擇收據或交易圖片",
"Category": "分類",
"Secondary Category": "次分類",
"Expense Category": "支出分類",