first commit

2026-01-09 12:54:53 +05:30
commit 7ccf44f7da
1070 changed files with 113036 additions and 0 deletions
--- a/resources/frontend/core/components/AppImage.vue
+++ b/resources/frontend/core/components/AppImage.vue
@@ -0,0 +1,158 @@
+<template>
+    <div>
+        <transition appear mode="out-in" name="fade">
+            <Skeleton v-if="!loaded" />
+            <template v-else>
+                <component :is="openable ? 'a' : 'div'" :href="url" target="_blank">
+                    <svg
+                        v-if="error"
+                        class="error-image"
+                        viewBox="0 0 280 162"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                    >
+                        <rect height="162" width="280" />
+                        <path
+                            d="M140,30.59c-27.85,0-50.41,22.56-50.41,50.41s22.56,50.41,50.41,50.41s50.41-22.56,50.41-50.41
+                            S167.85,30.59,140,30.59z M140,121.65c-22.42,0-40.65-18.23-40.65-40.65S117.58,40.35,140,40.35S180.65,58.58,180.65,81
+                            S162.42,121.65,140,121.65z M123.74,77.75c3.6,0,6.5-2.91,6.5-6.5s-2.91-6.5-6.5-6.5s-6.5,2.91-6.5,6.5S120.14,77.75,123.74,77.75z
+                            M156.26,64.74c-3.6,0-6.5,2.91-6.5,6.5s2.91,6.5,6.5,6.5c3.6,0,6.5-2.91,6.5-6.5S159.86,64.74,156.26,64.74z M140,90.76
+                            c-8.17,0-15.85,3.6-21.1,9.88c-1.73,2.07-1.44,5.14,0.63,6.87c2.07,1.71,5.14,1.44,6.87-0.63c3.37-4.05,8.33-6.38,13.6-6.38
+                            s10.22,2.32,13.6,6.38c1.65,1.97,4.7,2.42,6.87,0.63c2.07-1.73,2.34-4.8,0.63-6.87C155.85,94.35,148.17,90.76,140,90.76z"
+                        />
+                    </svg>
+                    <lazy-component v-else-if="lazy">
+                        <img :src="url" alt="screenshot" @click="$emit('click', $event)" @error="handleError" />
+                    </lazy-component>
+                    <img v-else :src="url" alt="screenshot" @click="$emit('click', $event)" @error="handleError" />
+                </component>
+            </template>
+        </transition>
+    </div>
+</template>
+
+<script>
+    import axios from '@/config/app';
+    import { Skeleton } from 'vue-loading-skeleton';
+
+    export default {
+        name: 'AppImage',
+        props: {
+            src: {
+                type: String,
+                required: true,
+            },
+            lazy: {
+                type: Boolean,
+                default: false,
+            },
+            openable: {
+                type: Boolean,
+                default: false,
+            },
+        },
+        data() {
+            const baseUrl =
+                this.src.indexOf('http') === 0
+                    ? ''
+                    : (process.env.VUE_APP_API_URL !== 'null'
+                          ? process.env.VUE_APP_API_URL
+                          : `${window.location.origin}/api`) + '/';
+
+            const url = baseUrl + this.src;
+
+            return {
+                error: this.src === 'none',
+                loaded: this.src === 'none',
+                url,
+                baseUrl,
+            };
+        },
+        components: {
+            Skeleton,
+        },
+        methods: {
+            load() {
+                if (this.error) return;
+
+                if (this.src === 'none') {
+                    this.error = true;
+                    return;
+                }
+
+                this.loaded = false;
+
+                if (this.url) {
+                    URL.revokeObjectURL(this.url);
+                    this.url = null;
+                }
+
+                if (this.src) {
+                    axios
+                        .get(this.src, {
+                            responseType: 'blob',
+                            muteError: true,
+                        })
+                        .then(({ data }) => {
+                            this.url = URL.createObjectURL(data);
+                        })
+                        .catch(() => {
+                            this.error = true;
+                        })
+                        .finally(() => {
+                            this.loaded = true;
+                        });
+                }
+            },
+            handleError() {
+                this.error = true;
+            },
+        },
+        mounted() {
+            this.load();
+        },
+        beforeDestroy() {
+            if (this.url) {
+                URL.revokeObjectURL(this.url);
+                this.url = null;
+            }
+        },
+        watch: {
+            src() {
+                this.error = false;
+                this.load();
+            },
+        },
+    };
+</script>
+
+<style lang="scss" scoped>
+    img {
+        width: 100%;
+        object-fit: cover;
+        background-color: $gray-5;
+    }
+
+    .fade-enter-active,
+    .fade-leave-active {
+        transition: opacity 0.4s;
+    }
+
+    .fade-enter,
+    .fade-leave-to {
+        opacity: 0;
+    }
+
+    .error-image {
+        rect {
+            fill: $gray-4;
+        }
+
+        path {
+            fill: $red-1;
+        }
+    }
+</style>