mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-24 09:13:50 +02:00
Moved some button to tools tab
This commit is contained in:
pa
Natsumi
@@ -31,7 +31,7 @@
|
||||
<el-icon class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['image'] }"
|
||||
><ArrowRight
|
||||
/></el-icon>
|
||||
<span class="category-title">{{ t('view.tools.image.header') }}</span>
|
||||
<span class="category-title">{{ t('view.tools.pictures.header') }}</span>
|
||||
</div>
|
||||
<div class="tools-grid" v-show="!categoryCollapsed['image']">
|
||||
<el-card :body-style="{ padding: '0px' }" class="tool-card">
|
||||
@@ -40,8 +40,10 @@
|
||||
<i class="ri-screenshot-2-line"></i>
|
||||
</div>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">{{ t('view.tools.image.screenshot') }}</div>
|
||||
<div class="tool-description">{{ t('view.tools.image.screenshot_description') }}</div>
|
||||
<div class="tool-name">{{ t('view.tools.pictures.screenshot') }}</div>
|
||||
<div class="tool-description">
|
||||
{{ t('view.tools.pictures.screenshot_description') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -51,8 +53,38 @@
|
||||
<i class="ri-multi-image-line"></i>
|
||||
</div>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">{{ t('view.tools.image.inventory') }}</div>
|
||||
<div class="tool-description">{{ t('view.tools.image.inventory_description') }}</div>
|
||||
<div class="tool-name">{{ t('view.tools.pictures.inventory') }}</div>
|
||||
<div class="tool-description">
|
||||
{{ t('view.tools.pictures.inventory_description') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card :body-style="{ padding: '0px' }" class="tool-card">
|
||||
<div class="tool-content" @click="openVrcPhotosFolder">
|
||||
<div class="tool-icon">
|
||||
<i class="ri-folder-image-line"></i>
|
||||
</div>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">{{ t('view.tools.pictures.pictures.vrc_photos') }}</div>
|
||||
<div class="tool-description">
|
||||
{{ t('view.tools.pictures.pictures.vrc_photos_description') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card :body-style="{ padding: '0px' }" class="tool-card">
|
||||
<div class="tool-content" @click="openVrcScreenshotsFolder">
|
||||
<div class="tool-icon">
|
||||
<i class="ri-folder-image-line"></i>
|
||||
</div>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">
|
||||
{{ t('view.tools.pictures.pictures.steam_screenshots') }}
|
||||
</div>
|
||||
<div class="tool-description">
|
||||
{{ t('view.tools.pictures.pictures.steam_screenshots_description') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -64,17 +96,60 @@
|
||||
<el-icon class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['user'] }"
|
||||
><ArrowRight
|
||||
/></el-icon>
|
||||
<span class="category-title">{{ t('view.tools.user.header') }}</span>
|
||||
<span class="category-title">{{ t('view.tools.export.header') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="tools-grid" v-show="!categoryCollapsed['user']">
|
||||
<el-card :body-style="{ padding: '0px' }" class="tool-card">
|
||||
<div class="tool-content" @click="showExportDiscordNamesDialog">
|
||||
<div class="tool-icon">
|
||||
<i class="ri-discord-line"></i>
|
||||
</div>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">{{ t('view.tools.export.discord_names') }}</div>
|
||||
<div class="tool-description">
|
||||
{{ t('view.tools.user.discord_names_description') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card :body-style="{ padding: '0px' }" class="tool-card">
|
||||
<div class="tool-content" @click="showNoteExportDialog">
|
||||
<div class="tool-icon">
|
||||
<i class="ri-user-shared-line"></i>
|
||||
</div>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">{{ t('view.tools.user.export_notes') }}</div>
|
||||
<div class="tool-description">{{ t('view.tools.user.export_notes_description') }}</div>
|
||||
<div class="tool-name">{{ t('view.tools.export.export_notes') }}</div>
|
||||
<div class="tool-description">
|
||||
{{ t('view.tools.export.export_notes_description') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card :body-style="{ padding: '0px' }" class="tool-card">
|
||||
<div class="tool-content" @click="showExportFriendsListDialog">
|
||||
<div class="tool-icon">
|
||||
<i class="ri-user-shared-line"></i>
|
||||
</div>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">{{ t('view.tools.export.export_friend_list') }}</div>
|
||||
<div class="tool-description">
|
||||
{{ t('view.tools.user.export_friend_list_description') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card :body-style="{ padding: '0px' }" class="tool-card">
|
||||
<div class="tool-content" @click="showExportAvatarsListDialog">
|
||||
<div class="tool-icon">
|
||||
<i class="ri-user-shared-line"></i>
|
||||
</div>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">{{ t('view.tools.export.export_own_avatars') }}</div>
|
||||
<div class="tool-description">
|
||||
{{ t('view.tools.user.export_own_avatars_description') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -93,27 +168,40 @@
|
||||
:isNoteExportDialogVisible="isNoteExportDialogVisible"
|
||||
@close="isNoteExportDialogVisible = false" />
|
||||
<GalleryDialog />
|
||||
<ExportDiscordNamesDialog
|
||||
v-model:discordNamesDialogVisible="isExportDiscordNamesDialogVisible"
|
||||
:friends="friends" />
|
||||
<ExportFriendsListDialog
|
||||
v-model:isExportFriendsListDialogVisible="isExportFriendsListDialogVisible"
|
||||
:friends="friends" />
|
||||
<ExportAvatarsListDialog v-model:isExportAvatarsListDialogVisible="isExportAvatarsListDialogVisible" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ArrowRight } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ref, defineAsyncComponent, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useUiStore, useGalleryStore } from '../../stores';
|
||||
import { useUiStore, useGalleryStore, useFriendStore } from '../../stores';
|
||||
|
||||
const GroupCalendarDialog = defineAsyncComponent(() => import('./dialogs/GroupCalendarDialog.vue'));
|
||||
const ScreenshotMetadataDialog = defineAsyncComponent(() => import('./dialogs/ScreenshotMetadataDialog.vue'));
|
||||
const NoteExportDialog = defineAsyncComponent(() => import('./dialogs/NoteExportDialog.vue'));
|
||||
const GalleryDialog = defineAsyncComponent(() => import('./dialogs/GalleryDialog.vue'));
|
||||
|
||||
const ExportDiscordNamesDialog = defineAsyncComponent(() => import('./dialogs/ExportDiscordNamesDialog.vue'));
|
||||
const ExportFriendsListDialog = defineAsyncComponent(() => import('./dialogs/ExportFriendsListDialog.vue'));
|
||||
const ExportAvatarsListDialog = defineAsyncComponent(() => import('./dialogs/ExportAvatarsListDialog.vue'));
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const uiStore = useUiStore();
|
||||
const { showGalleryDialog } = useGalleryStore();
|
||||
const { menuActiveIndex } = storeToRefs(uiStore);
|
||||
const { friends } = storeToRefs(useFriendStore());
|
||||
|
||||
const categoryCollapsed = ref({
|
||||
group: false,
|
||||
@@ -124,6 +212,9 @@
|
||||
const isGroupCalendarDialogVisible = ref(false);
|
||||
const isScreenshotMetadataDialogVisible = ref(false);
|
||||
const isNoteExportDialogVisible = ref(false);
|
||||
const isExportDiscordNamesDialogVisible = ref(false);
|
||||
const isExportFriendsListDialogVisible = ref(false);
|
||||
const isExportAvatarsListDialogVisible = ref(false);
|
||||
|
||||
const isShowToolsTab = computed(() => menuActiveIndex.value === 'tools');
|
||||
|
||||
@@ -142,6 +233,50 @@
|
||||
const toggleCategory = (category) => {
|
||||
categoryCollapsed.value[category] = !categoryCollapsed.value[category];
|
||||
};
|
||||
|
||||
function showExportDiscordNamesDialog() {
|
||||
isExportDiscordNamesDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function showExportFriendsListDialog() {
|
||||
isExportFriendsListDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function showExportAvatarsListDialog() {
|
||||
isExportAvatarsListDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function openVrcPhotosFolder() {
|
||||
AppApi.OpenVrcPhotosFolder().then((result) => {
|
||||
if (result) {
|
||||
ElMessage({
|
||||
message: 'Folder opened',
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
ElMessage({
|
||||
message: "Folder dosn't exist",
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openVrcScreenshotsFolder() {
|
||||
AppApi.OpenVrcScreenshotsFolder().then((result) => {
|
||||
if (result) {
|
||||
ElMessage({
|
||||
message: 'Folder opened',
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
ElMessage({
|
||||
message: "Folder dosn't exist",
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
105
src/views/Tools/dialogs/ExportAvatarsListDialog.vue
Normal file
105
src/views/Tools/dialogs/ExportAvatarsListDialog.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<el-dialog v-model="isVisible" :title="t('dialog.export_own_avatars.header')" width="650px">
|
||||
<el-input
|
||||
v-model="exportAvatarsListCsv"
|
||||
v-loading="loading"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="15"
|
||||
resize="none"
|
||||
readonly
|
||||
style="margin-top: 15px"
|
||||
@click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { avatarRequest } from '../../../api';
|
||||
import { processBulk } from '../../../service/request';
|
||||
import { useAvatarStore, useUserStore } from '../../../stores';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { applyAvatar, cachedAvatars } = useAvatarStore();
|
||||
const { currentUser } = storeToRefs(useUserStore());
|
||||
|
||||
const props = defineProps({
|
||||
isExportAvatarsListDialogVisible: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const exportAvatarsListCsv = ref('');
|
||||
const loading = ref(false);
|
||||
|
||||
const isVisible = computed({
|
||||
get() {
|
||||
return props.isExportAvatarsListDialogVisible;
|
||||
},
|
||||
set(value) {
|
||||
emit('update:isExportAvatarsListDialogVisible', value);
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:isExportAvatarsListDialogVisible']);
|
||||
|
||||
watch(
|
||||
() => props.isExportAvatarsListDialogVisible,
|
||||
(value) => {
|
||||
if (value) {
|
||||
initExportAvatarsListDialog();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function initExportAvatarsListDialog() {
|
||||
loading.value = true;
|
||||
for (const ref of cachedAvatars.values()) {
|
||||
if (ref.authorId === currentUser.value.id) {
|
||||
cachedAvatars.delete(ref.id);
|
||||
}
|
||||
}
|
||||
const params = {
|
||||
n: 50,
|
||||
offset: 0,
|
||||
sort: 'updated',
|
||||
order: 'descending',
|
||||
releaseStatus: 'all',
|
||||
user: 'me'
|
||||
};
|
||||
const map = new Map();
|
||||
processBulk({
|
||||
fn: avatarRequest.getAvatars,
|
||||
N: -1,
|
||||
params,
|
||||
handle: (args) => {
|
||||
for (const json of args.json) {
|
||||
const ref = applyAvatar(json);
|
||||
map.set(ref.id, ref);
|
||||
}
|
||||
},
|
||||
done: () => {
|
||||
const avatars = Array.from(map.values());
|
||||
if (Array.isArray(avatars) === false) {
|
||||
return;
|
||||
}
|
||||
const lines = ['AvatarID,AvatarName'];
|
||||
const _ = function (str) {
|
||||
if (/[\x00-\x1f,"]/.test(str) === true) {
|
||||
return `"${str.replace(/"/g, '""')}"`;
|
||||
}
|
||||
return str;
|
||||
};
|
||||
for (const avatar of avatars) {
|
||||
lines.push(`${_(avatar.id)},${_(avatar.name)}`);
|
||||
}
|
||||
exportAvatarsListCsv.value = lines.join('\n');
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
100
src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
Normal file
100
src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="x-dialog"
|
||||
:model-value="discordNamesDialogVisible"
|
||||
:title="t('dialog.discord_names.header')"
|
||||
width="650px"
|
||||
@close="closeDialog">
|
||||
<div style="font-size: 12px">
|
||||
{{ t('dialog.discord_names.description') }}
|
||||
</div>
|
||||
<el-input
|
||||
v-model="discordNamesContent"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="15"
|
||||
resize="none"
|
||||
readonly
|
||||
style="margin-top: 15px" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useUserStore } from '../../../stores';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { currentUser } = storeToRefs(useUserStore());
|
||||
|
||||
const props = defineProps({
|
||||
discordNamesDialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
friends: {
|
||||
type: Map,
|
||||
default: () => new Map()
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.discordNamesDialogVisible,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
showDiscordNamesContent();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits(['update:discordNamesDialogVisible']);
|
||||
|
||||
const discordNamesContent = ref('');
|
||||
|
||||
function showDiscordNamesContent() {
|
||||
const { friends } = currentUser.value;
|
||||
if (Array.isArray(friends) === false) {
|
||||
return;
|
||||
}
|
||||
const lines = ['DisplayName,DiscordName'];
|
||||
const _ = function (str) {
|
||||
if (/[\x00-\x1f,"]/.test(str) === true) {
|
||||
return `"${str.replace(/"/g, '""')}"`;
|
||||
}
|
||||
return str;
|
||||
};
|
||||
for (const userId of friends) {
|
||||
const { ref } = props.friends.get(userId);
|
||||
let discord = '';
|
||||
if (typeof ref === 'undefined') {
|
||||
continue;
|
||||
}
|
||||
const name = ref.displayName;
|
||||
if (ref.statusDescription) {
|
||||
const statusRegex = /(?:discord|dc|dis)(?: |=|:|˸|;)(.*)/gi.exec(ref.statusDescription);
|
||||
if (statusRegex) {
|
||||
discord = statusRegex[1];
|
||||
}
|
||||
}
|
||||
if (!discord && ref.bio) {
|
||||
const bioRegex = /(?:discord|dc|dis)(?: |=|:|˸|;)(.*)/gi.exec(ref.bio);
|
||||
if (bioRegex) {
|
||||
discord = bioRegex[1];
|
||||
}
|
||||
}
|
||||
if (!discord) {
|
||||
continue;
|
||||
}
|
||||
discord = discord.trim();
|
||||
lines.push(`${_(name)},${_(discord)}`);
|
||||
}
|
||||
discordNamesContent.value = lines.join('\n');
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
emit('update:discordNamesDialogVisible', false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
97
src/views/Tools/dialogs/ExportFriendsListDialog.vue
Normal file
97
src/views/Tools/dialogs/ExportFriendsListDialog.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<el-dialog :title="t('dialog.export_friends_list.header')" v-model="isVisible" width="650px">
|
||||
<el-tabs type="card">
|
||||
<el-tab-pane :label="t('dialog.export_friends_list.csv')">
|
||||
<el-input
|
||||
v-model="exportFriendsListCsv"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="15"
|
||||
resize="none"
|
||||
readonly
|
||||
style="margin-top: 15px"
|
||||
@click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="t('dialog.export_friends_list.json')">
|
||||
<el-input
|
||||
v-model="exportFriendsListJson"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:rows="15"
|
||||
resize="none"
|
||||
readonly
|
||||
style="margin-top: 15px"
|
||||
@click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
import { useUserStore } from '../../../stores';
|
||||
|
||||
const props = defineProps({
|
||||
friends: {
|
||||
type: Map,
|
||||
required: true
|
||||
},
|
||||
isExportFriendsListDialogVisible: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(['update:isExportFriendsListDialogVisible']);
|
||||
|
||||
const { currentUser } = storeToRefs(useUserStore());
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const exportFriendsListCsv = ref('');
|
||||
const exportFriendsListJson = ref('');
|
||||
|
||||
const isVisible = computed({
|
||||
get() {
|
||||
return props.isExportFriendsListDialogVisible;
|
||||
},
|
||||
set(value) {
|
||||
emit('update:isExportFriendsListDialogVisible', value);
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.isExportFriendsListDialogVisible,
|
||||
(value) => {
|
||||
if (value) {
|
||||
initExportFriendsListDialog();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function initExportFriendsListDialog() {
|
||||
const { friends } = currentUser.value;
|
||||
if (Array.isArray(friends) === false) {
|
||||
return;
|
||||
}
|
||||
const lines = ['UserID,DisplayName,Memo'];
|
||||
const _ = function (str) {
|
||||
if (/[\x00-\x1f,"]/.test(str) === true) {
|
||||
return `"${str.replace(/"/g, '""')}"`;
|
||||
}
|
||||
return str;
|
||||
};
|
||||
const friendsList = [];
|
||||
for (const userId of friends) {
|
||||
const ref = props.friends.get(userId);
|
||||
const name = (typeof ref !== 'undefined' && ref.name) || '';
|
||||
const memo = (typeof ref !== 'undefined' && ref.memo.replace(/\n/g, ' ')) || '';
|
||||
lines.push(`${_(userId)},${_(name)},${_(memo)}`);
|
||||
friendsList.push(userId);
|
||||
}
|
||||
exportFriendsListJson.value = JSON.stringify({ friends: friendsList }, null, 4);
|
||||
exportFriendsListCsv.value = lines.join('\n');
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user