Add localization support to Tools page and update translation (#1375)

* Add tools tab and group calendar localization support

* Update japanese translation
This commit is contained in:
Yuki
2025-09-13 08:40:11 +09:00
committed by GitHub
parent d09f8fa54a
commit d115d3bde7
5 changed files with 129 additions and 57 deletions

View File

@@ -1,7 +1,7 @@
<template>
<div id="chart" class="x-container" v-show="isShowToolsTab">
<div class="options-container" style="margin-top: 0">
<span class="header">Tools</span>
<span class="header">{{ t('view.tools.header') }}</span>
<div class="tool-categories">
<div class="tool-category">
@@ -9,7 +9,7 @@
<el-icon class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['group'] }"
><ArrowRight
/></el-icon>
<span class="category-title">Group</span>
<span class="category-title">{{ t('view.tools.group.header') }}</span>
</div>
<div class="tools-grid" v-show="!categoryCollapsed['group']">
<el-card :body-style="{ padding: '0px' }" class="tool-card">
@@ -18,8 +18,8 @@
<i class="ri-calendar-event-line"></i>
</div>
<div class="tool-info">
<div class="tool-name">Calendar</div>
<div class="tool-description">Group Events Calendar</div>
<div class="tool-name">{{ t('view.tools.group.calendar') }}</div>
<div class="tool-description">{{ t('view.tools.group.calendar_description') }}</div>
</div>
</div>
</el-card>
@@ -31,7 +31,7 @@
<el-icon class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['image'] }"
><ArrowRight
/></el-icon>
<span class="category-title">Image</span>
<span class="category-title">{{ t('view.tools.image.header') }}</span>
</div>
<div class="tools-grid" v-show="!categoryCollapsed['image']">
<el-card :body-style="{ padding: '0px' }" class="tool-card">
@@ -40,8 +40,8 @@
<i class="ri-screenshot-2-line"></i>
</div>
<div class="tool-info">
<div class="tool-name">Screenshot Management</div>
<div class="tool-description">Manage screenshots and view metadata</div>
<div class="tool-name">{{ t('view.tools.image.screenshot') }}</div>
<div class="tool-description">{{ t('view.tools.image.screenshot_description') }}</div>
</div>
</div>
</el-card>
@@ -51,8 +51,8 @@
<i class="ri-multi-image-line"></i>
</div>
<div class="tool-info">
<div class="tool-name">VRC+ Images & Inventory Management</div>
<div class="tool-description">Manage VRC+ Images & Inventory</div>
<div class="tool-name">{{ t('view.tools.image.inventory') }}</div>
<div class="tool-description">{{ t('view.tools.image.inventory_description') }}</div>
</div>
</div>
</el-card>
@@ -64,7 +64,7 @@
<el-icon class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['user'] }"
><ArrowRight
/></el-icon>
<span class="category-title">User</span>
<span class="category-title">{{ t('view.tools.user.header') }}</span>
</div>
<div class="tools-grid" v-show="!categoryCollapsed['user']">
<el-card :body-style="{ padding: '0px' }" class="tool-card">
@@ -73,8 +73,8 @@
<i class="ri-user-shared-line"></i>
</div>
<div class="tool-info">
<div class="tool-name">Export User Notes</div>
<div class="tool-description">Export VRCX user memos to VRChat notes</div>
<div class="tool-name">{{ t('view.tools.user.export_notes') }}</div>
<div class="tool-description">{{ t('view.tools.user.export_notes_description') }}</div>
</div>
</div>
</el-card>
@@ -100,6 +100,7 @@
<script setup>
import { ArrowRight } from '@element-plus/icons-vue';
import { ref, defineAsyncComponent, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { useUiStore, useGalleryStore } from '../../stores';
@@ -108,6 +109,8 @@
const NoteExportDialog = defineAsyncComponent(() => import('./dialogs/NoteExportDialog.vue'));
const GalleryDialog = defineAsyncComponent(() => import('./dialogs/GalleryDialog.vue'));
const { t } = useI18n();
const uiStore = useUiStore();
const { showGalleryDialog } = useGalleryStore();
const { menuActiveIndex } = storeToRefs(uiStore);

View File

@@ -14,19 +14,21 @@
</div>
</template>
<el-descriptions-item label="Category">{{
capitalizeFirst(event.category)
}}</el-descriptions-item>
<el-descriptions-item label="Interested User">
<el-descriptions-item :label="t('dialog.group_calendar.event_card.category')">
{{ capitalizeFirst(event.category) }}
</el-descriptions-item>
<el-descriptions-item :label="t('dialog.group_calendar.event_card.interested_user')">
{{ event.interestedUserCount }}
</el-descriptions-item>
<el-descriptions-item label="Close Instance After End">
<el-descriptions-item :label="t('dialog.group_calendar.event_card.close_time')">
{{ event.closeInstanceAfterEndMinutes + ' min' }}
</el-descriptions-item>
<el-descriptions-item label="Created Date">{{
dayjs(event.createdAt).format('YYYY-MM-DD HH:mm')
}}</el-descriptions-item>
<el-descriptions-item label="Description">{{ event.description }}</el-descriptions-item>
<el-descriptions-item :label="t('dialog.group_calendar.event_card.created')">
{{ dayjs(event.createdAt).format('YYYY-MM-DD HH:mm') }}
</el-descriptions-item>
<el-descriptions-item :label="t('dialog.group_calendar.event_card.description')">
{{ event.description }}
</el-descriptions-item>
</el-descriptions>
<template #reference>
<div class="event-title-content" @click="onGroupClick">
@@ -53,9 +55,11 @@
<script setup>
import { Check } from '@element-plus/icons-vue';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import dayjs from 'dayjs';
import { useGroupStore } from '../../../stores';
const { t } = useI18n();
const { cachedGroups, showGroupDialog } = useGroupStore();
const props = defineProps({

View File

@@ -3,7 +3,6 @@
class="x-dialog"
:model-value="visible"
:title="t('dialog.group_calendar.header')"
:show-close="false"
width="90vw"
height="80vh"
@close="closeDialog">
@@ -11,7 +10,7 @@
<div class="dialog-title-container">
<span>{{ t('dialog.group_calendar.header') }}</span>
<el-button @click="toggleViewMode" type="primary" size="small" class="view-toggle-btn">
{{ viewMode === 'timeline' ? 'List View' : 'Calendar View' }}
{{ viewMode === 'timeline' ? t('dialog.group_calendar.list_view') : t('dialog.group_calendar.calendar_view') }}
</el-button>
</div>
</template>
@@ -36,7 +35,7 @@
</div>
</el-timeline-item>
</el-timeline>
<div v-else>No events found</div>
<div v-else>{{ t('dialog.group_calendar.no_events') }}</div>
</div>
<div class="calendar-container">
@@ -69,7 +68,7 @@
<div class="search-container">
<el-input
v-model="searchQuery"
placeholder="Search groups or events..."
:placeholder="t('dialog.group_calendar.search_placeholder')"
clearable
size="small"
prefix-:icon="Search"
@@ -99,7 +98,7 @@
</div>
</div>
<div v-else class="no-events">
{{ searchQuery ? 'No matching events found' : 'No events this month' }}
{{ searchQuery ? t('dialog.group_calendar.search_no_matching') : t('dialog.group_calendar.search_no_this_month') }}
</div>
</div>
</div>