support receiving images from the Web Share Target API Level 2 and directly opening AI image recognition on mobile version

src/views/desktop/MainLayout.vue

@@ -220,8 +220,11 @@ import { useDesktopPageStore } from '@/stores/desktopPage.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { ThemeType } from '@/core/theme.ts';
+
+import { getShareCacheImageBlob } from '@/lib/cache.ts';
 import { isUserScheduledTransactionEnabled } from '@/lib/server_settings.ts';
 import { getSystemTheme, setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
+import logger from '@/lib/logger.ts';
 
 import {
     mdiMenu,
@@ -300,6 +303,14 @@ function handleNavScroll(e: Event): void {
     isVerticalNavScrolled.value = (e.target as HTMLElement).scrollTop > 0;
 }
 
+function clearShareImageCache(): void {
+    getShareCacheImageBlob().then(blob => {
+        if (blob) {
+            logger.warn('desktop version does not support receving shared image, the share image cache has been cleared');
+        }
+    });
+}
+
 function lock(): void {
     rootStore.lock();
     router.replace('/unlock');
@@ -334,6 +345,8 @@ function logout(): void {
 function showAddDialogInTransactionListPage(): void {
     desktopPageStore.setShowAddTransactionDialogInTransactionList();
 }
+
+clearShareImageCache();
 </script>
 
 <style>

src/views/mobile/HomePage.vue

@@ -206,13 +206,16 @@
             </f7-list>
         </f7-popover>
 
-        <a-i-image-recognition-sheet v-model:show="showAIReceiptImageRecognitionSheet"
+        <a-i-image-recognition-sheet ref="aiImageRecognitionSheet"
+                                     v-model:show="showAIReceiptImageRecognitionSheet"
                                      @recognition:change="onReceiptRecognitionChanged"/>
     </f7-page>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import AIImageRecognitionSheet from '@/components/mobile/AIImageRecognitionSheet.vue';
+
+import { ref, computed, useTemplateRef } from 'vue';
 import type { Router } from 'framework7/types';
 
 import { useI18n } from '@/locales/helpers.ts';
@@ -230,8 +233,11 @@ import { TransactionTemplate } from '@/models/transaction_template.ts';
 import type { RecognizedReceiptImageResponse } from '@/models/large_language_model.ts';
 
 import { isUserLogined, isUserUnlocked } from '@/lib/userstate.ts';
+import { getShareCacheImageBlob } from '@/lib/cache.ts';
 import { isTransactionFromAIImageRecognitionEnabled } from '@/lib/server_settings.ts';
 
+type AIImageRecognitionSheetType = InstanceType<typeof AIImageRecognitionSheet>;
+
 const props = defineProps<{
     f7router: Router.Router;
 }>();
@@ -252,6 +258,8 @@ const transactionCategoriesStore = useTransactionCategoriesStore();
 const transactionTemplatesStore = useTransactionTemplatesStore();
 const overviewStore = useOverviewStore();
 
+const aiImageRecognitionSheet = useTemplateRef<AIImageRecognitionSheetType>('aiImageRecognitionSheet');
+
 const loading = ref<boolean>(true);
 const showTransactionTemplatePopover = ref<boolean>(false);
 const showAIReceiptImageRecognitionSheet = ref<boolean>(false);
@@ -272,13 +280,19 @@ function init(): void {
         loading.value = true;
 
         const promises = [
+            getShareCacheImageBlob(),
             accountsStore.loadAllAccounts({ force: false }),
             transactionCategoriesStore.loadAllCategories({ force: false }),
             transactionTemplatesStore.loadAllTemplates({ templateType: TemplateType.Normal.type,  force: false }),
             overviewStore.loadTransactionOverview({ force: false })
         ];
 
-        Promise.all(promises).then(() => {
+        Promise.all(promises).then(responses => {
+            if (responses[0] && responses[0] instanceof Blob) {
+                aiImageRecognitionSheet.value?.loadImage(responses[0]);
+                showAIReceiptImageRecognitionSheet.value = true;
+            }
+
             loading.value = false;
         }).catch(error => {
             loading.value = false;