akanyan/STARTLINER
3
5
Fork 3
Code Issues Pull Requests 1 Projects Releases 29 Wiki Activity

feat: internationalization

Browse Source
This commit is contained in:
あかニャン
2025-04-22 21:34:55 +00:00
parent 58c692a879
commit ce03668252
36 changed files with 1069 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/components/ProfileList.vue
View File

@ -2,12 +2,17 @@
import { Ref, ref } from 'vue';
import Button from 'primevue/button';
import Dialog from 'primevue/dialog';
import Select from 'primevue/select';
import SelectButton from 'primevue/selectbutton';
import ToggleSwitch from 'primevue/toggleswitch';
import * as path from '@tauri-apps/api/path';
import { open } from '@tauri-apps/plugin-dialog';
import ProfileListEntry from './ProfileListEntry.vue';
import { invoke } from '../invoke';
import { useClientStore, useGeneralStore, usePrfStore } from '../stores';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const prf = usePrfStore();
const client = useClientStore();
@ -61,7 +66,7 @@ const importPick = async () => {
directory: false,
filters: [
{
name: 'STARTLINER template',
name: t('profile.template'),
extensions: ['zip'],
},
],
@ -117,42 +122,94 @@ const importPick = async () => {
</div>
</div>
</Dialog>
<div v-if="prf.list.length === 0">
Welcome to STARTLINER! Start by creating a profile.
</div>
<div class="mt-4 flex flex-row flex-wrap align-middle gap-4">
<Button
label="O.N.G.E.K.I. profile"
icon="pi pi-file-plus"
class="ongeki-button profile-button"
@click="() => prf.create('ongeki')"
/>
<Button
label="CHUNITHM profile"
icon="pi pi-file-plus"
class="chunithm-button profile-button"
@click="() => prf.create('chunithm')"
/>
</div>
<div class="mt-4 flex flex-row flex-wrap align-middle gap-4">
<Button
label="Import template"
icon="pi pi-file-import"
class="import-button profile-button"
@click="() => importPick()"
/>
<Button
:disabled="prf.current === null"
label="Export template"
icon="pi pi-file-export"
class="profile-button"
@click="() => openExportDialog()"
/>
</div>
<div class="mt-12 flex flex-col flex-wrap align-middle gap-4">
<div v-for="p in prf.list">
<ProfileListEntry :p="p" />
<div style="float: left">
<div v-if="prf.list.length === 0">
{{ t('profile.welcome') }}
</div>
<div class="mt-4 flex flex-row flex-wrap align-middle gap-4">
<Button
:label="t('profile.create', { game: t('game.ongeki') })"
icon="pi pi-file-plus"
class="ongeki-button profile-button"
@click="() => prf.create('ongeki')"
/>
<Button
:label="t('profile.create', { game: t('game.chunithm') })"
icon="pi pi-file-plus"
class="chunithm-button profile-button"
@click="() => prf.create('chunithm')"
/>
</div>
<div class="mt-4 flex flex-row flex-wrap align-middle gap-4">
<Button
label="Import template"
icon="pi pi-file-import"
class="import-button profile-button"
@click="() => importPick()"
/>
<Button
:disabled="prf.current === null"
label="Export template"
icon="pi pi-file-export"
class="profile-button"
@click="() => openExportDialog()"
/>
</div>
<div class="mt-12 flex flex-col flex-wrap align-middle gap-4">
<div v-for="p in prf.list">
<ProfileListEntry :p="p" />
</div>
</div>
</div>
<div style="float: right" class="mr-5 mt-3 flex flex-col gap-4 items-end">
<div>
<div class="pi pi-language mr-2"></div>
<Select
:model-value="client.locale"
@update:model-value="async (v) => await client.setLocale(v)"
style="width: 200px"
:options="[
{ title: 'English', value: 'en' },
// { title: '日本語', value: 'ja' },
]"
size="small"
option-label="title"
option-value="value"
></Select>
</div>
<SelectButton
style="height: 50px"
v-model="client.scaleModel"
:options="[
{ title: 'S', size: '0.8em', value: 's' },
{ title: 'M', size: '1.0em', value: 'm' },
{ title: 'L', size: '1.2em', value: 'l' },
{ title: 'XL', size: '1.4em', value: 'xl' },
]"
:allow-empty="false"
option-label="title"
option-value="value"
><template #option="slotProps">
<div :style="{ fontSize: slotProps.option.size }">
{{ slotProps.option.title }}
</div>
</template></SelectButton
>
<SelectButton
style="height: 50px"
:model-value="client.theme"
@update:model-value="(v) => client.setTheme(v)"
:options="[
{ title: 'System', value: 'system', icon: 'pi pi-home' },
{ title: 'Light', value: 'light', icon: 'pi pi-sun' },
{ title: 'Dark', value: 'dark', icon: 'pi pi-moon' },
]"
:allow-empty="false"
option-label="title"
option-value="value"
><template #option="slotProps">
<div :class="slotProps.option.icon"></div> </template
></SelectButton>
</div>
</template>