images store part

front/app.config.ts

@@ -1,6 +1,6 @@
 export default defineAppConfig({
     ui: {
         primary: 'pink',
-        gray: 'cool'
+        gray: 'stone'
     }
 })

front/app.vue

@@ -5,10 +5,10 @@ import Logo from 'assets/logo.svg'
 <template>
   <div class="container">
     <div class="header">
-      <div class="logo">
+      <NuxtLink to="/" class="logo">
         <Logo />
-      </div>
-      <NuxtLink to="/">Инвентаризация</NuxtLink>
+        Инвентаризация
+      </NuxtLink>
     </div>
     <div class="sidebar">
       <Sidebar />

front/assets/main.scss

@@ -15,10 +15,6 @@
         @apply text-lg;
     }
 
-    a[href]:not([class*=text]) {
-        // @apply text-primary-500 hover:text-primary-600
-    }
-
     .container {
         @apply grid grid-cols-12 mx-auto gap-4
     }
@@ -27,6 +23,9 @@
         @apply col-span-12 flex gap-2 p-2.5 border-b border-primary-700 bg-gradient-to-l from-primary-700;
         .logo {
             @apply text-2xl;
+            svg {
+                @apply text-3xl inline-block;
+            }
         }
     }
 
@@ -39,7 +38,7 @@
     }
 
     .page-header {
-        @apply border-b border-primary-200 dark:border-primary-950 py-4 bg-gradient-to-l from-primary-200 dark:from-primary-950;
+        @apply border-b border-primary-200 dark:border-primary-950 py-2.5 bg-gradient-to-l from-primary-200 dark:from-primary-950;
     }
 
     dl {

front/components/getImage.vue

@@ -1,28 +1,27 @@
 <script setup lang="ts">
+import { useImagesStore } from '~/store/images';
+
 const props = defineProps(['file_id'])
+const imagesStore = useImagesStore()
 
-import { apiBase } from '~/helpers';
-const headers = new Headers();
-headers.append("Content-Type", "application/json");
-
+const img = ref(imagesStore.getImage(props.file_id))
 const isOpen = ref(false)
-const file_url = ref()
 
-const file_url_data = await $fetch(`${apiBase}/tgbot/items/get_image/${props.file_id}/`, { headers })
-if ((file_url_data as string[]).length > 0) {
-    file_url.value = (file_url_data as string[])[0]
-}
 const openImage = () => {
     isOpen.value = !isOpen.value
 }
+console.log(imagesStore.getImage(props.file_id))
+watch(imagesStore, () => {
+    img.value = imagesStore.getImage(props.file_id)
+}, { deep: true })
 </script>
 <template>
-    <template v-if="file_url">
+    <template v-if="img.result">
         <a href="#">
             <Icon name="i-mdi-image" @click="openImage" />
         </a>
         <UModal v-model="isOpen">
-            <img :src="file_url" />
+            <img :src="img.result" />
         </UModal>
     </template>
 </template>

front/components/sidebar.vue

@@ -20,5 +20,5 @@ const links = [
 ]
 </script>
 <template>
-    <UVerticalNavigation :links="links" />
+    <UVerticalNavigation :links="links"  />
 </template>

front/store/images.ts

@@ -8,14 +8,13 @@ export const useImagesStore = defineStore('images', {
     state: () => ({ list: {} as imagesList }),
     actions: {
         getImage(name: string) {
-            if (this.list[name]) {
-                return this.list[name].result
-            } else {
+            if (!this.list[name]) {
                 this.list[name] = {
                     status: 'idle',
                     result: 'https://media.istockphoto.com/id/1490517357/photo/scientists-are-researching-and-analyzing-harmful-contaminants-in-the-laboratory.webp?s=170667a&w=0&k=20&c=Fh4t-P_b-a1QxwyBUzUa0AuLp8FLNyLy4hl4HUm82Ao='
                 }
             }
+            return this.list[name]
         },
     },
 })