refactor: dialogs (#1224)

* refactor: dialogs * fix: storeAvatarImage * FriendLog.vue * FriendLog.vue * FriendLog.vue * GameLog.vue * fix: next day button jumping to the wrong date * sync master * fix: launchGame * Notification.vue * Feed.vue * Search.vue * Profile.vue * PlayerList.vue * Login.vue * utils * update dialog * del gameLog.pug * fix * fix: group role cannot be displayed currently * fix: "Hide Friends in Same Instance" hides players in unrelated private instances (#1210) * fix * fix: "Hide Friends in Same Instance" does not work when "Split Favorite Friends" is enabled * fix Notification.vue message * fix: deleteFavoriteNoConfirm * fix: feed status style * fix: infinite loading when deleting note * fix: private players will not be hidden when 'Hide Friends in Same Instance', and 'Hide Friends in Same Instance' will not work when 'Split Favorite Friends'
2026-04-21 15:53:50 +02:00 · 2025-05-14 19:01:15 +09:00
parent 5ca028b30a
commit e792ed481b
130 changed files with 14208 additions and 10462 deletions
--- a/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
+++ b/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
@@ -0,0 +1,136 @@
+<template>
+    <safe-dialog
+        class="x-dialog"
+        :visible.sync="gallerySelectDialog.visible"
+        :title="t('dialog.gallery_select.header')"
+        width="100%"
+        append-to-body>
+        <div>
+            <span>{{ t('dialog.gallery_select.gallery') }}</span>
+            <span style="color: #909399; font-size: 12px; margin-left: 5px">{{ galleryTable.length }}/64</span>
+            <br />
+            <input
+                id="GalleryUploadButton"
+                type="file"
+                accept="image/*"
+                style="display: none"
+                @change="onFileChangeGallery" />
+            <el-button-group>
+                <el-button type="default" size="small" icon="el-icon-close" @click="selectImageGallerySelect('', '')">{{
+                    t('dialog.gallery_select.none')
+                }}</el-button>
+                <el-button type="default" size="small" icon="el-icon-refresh" @click="refreshGalleryTable">{{
+                    t('dialog.gallery_select.refresh')
+                }}</el-button>
+                <el-button
+                    type="default"
+                    size="small"
+                    icon="el-icon-upload2"
+                    :disabled="!API.currentUser.$isVRCPlus"
+                    @click="displayGalleryUpload"
+                    >{{ t('dialog.gallery_select.upload') }}</el-button
+                >
+            </el-button-group>
+            <br />
+            <div
+                v-for="image in galleryTable"
+                v-if="image.versions && image.versions.length > 0"
+                :key="image.id"
+                class="x-friend-item"
+                style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
+                <div
+                    v-if="image.versions[image.versions.length - 1].file.url"
+                    class="vrcplus-icon"
+                    @click="selectImageGallerySelect(image.versions[image.versions.length - 1].file.url, image.id)">
+                    <img v-lazy="image.versions[image.versions.length - 1].file.url" class="avatar" />
+                </div>
+            </div>
+        </div>
+    </safe-dialog>
+</template>
+
+<script setup>
+    import { inject, getCurrentInstance } from 'vue';
+
+    import { useI18n } from 'vue-i18n-bridge';
+    import { vrcPlusImageRequest } from '../../../api';
+    const { t } = useI18n();
+
+    const { proxy } = getCurrentInstance();
+    const { $message } = proxy;
+
+    const API = inject('API');
+
+    const props = defineProps({
+        gallerySelectDialog: {
+            type: Object,
+            required: true
+        },
+        galleryTable: {
+            type: Array,
+            required: true
+        }
+    });
+
+    const emit = defineEmits(['refreshGalleryTable']);
+
+    function selectImageGallerySelect(imageUrl, fileId) {
+        const D = props.gallerySelectDialog;
+        D.selectedFileId = fileId;
+        D.selectedImageUrl = imageUrl;
+        D.visible = false;
+    }
+
+    function displayGalleryUpload() {
+        document.getElementById('GalleryUploadButton').click();
+    }
+
+    function onFileChangeGallery(e) {
+        const clearFile = function () {
+            if (document.querySelector('#GalleryUploadButton')) {
+                document.querySelector('#GalleryUploadButton').value = '';
+            }
+        };
+        const files = e.target.files || e.dataTransfer.files;
+        if (!files.length) {
+            return;
+        }
+        if (files[0].size >= 100000000) {
+            // 100MB
+            $message({
+                message: t('message.file.too_large'),
+                type: 'error'
+            });
+            clearFile();
+            return;
+        }
+        if (!files[0].type.match(/image.*/)) {
+            $message({
+                message: t('message.file.not_image'),
+                type: 'error'
+            });
+            clearFile();
+            return;
+        }
+        const r = new FileReader();
+        r.onload = function () {
+            const base64Body = btoa(r.result);
+            vrcPlusImageRequest.uploadGalleryImage(base64Body).then((args) => {
+                $message({
+                    message: t('message.gallery.uploaded'),
+                    type: 'success'
+                });
+                // API.$on('GALLERYIMAGE:ADD')
+                if (Object.keys(props.galleryTable).length !== 0) {
+                    props.galleryTable.unshift(args.json);
+                }
+                return args;
+            });
+        };
+        r.readAsBinaryString(files[0]);
+        clearFile();
+    }
+    function refreshGalleryTable() {
+        emit('refreshGalleryTable');
+    }
+</script>