add fallbacks

This commit is contained in:
FineArchs 2024-09-30 18:18:52 +09:00
parent 1684ca2568
commit 45f0853686
1 changed files with 17 additions and 11 deletions

View File

@ -6,13 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div class="_gaps_m" :class="$style.extInstallerRoot"> <div class="_gaps_m" :class="$style.extInstallerRoot">
<div :class="$style.extInstallerIconWrapper"> <div :class="$style.extInstallerIconWrapper">
<i v-if="extension.type === 'plugin'" class="ti ti-plug"></i> <i v-if="isPlugin" class="ti ti-plug"></i>
<i v-else-if="extension.type === 'theme'" class="ti ti-palette"></i> <i v-else-if="isTheme" class="ti ti-palette"></i>
<!-- 拡張用 -->
<i v-else class="ti ti-download"></i> <i v-else class="ti ti-download"></i>
</div> </div>
<h2 :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].title }}</h2> <h2 :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].title }}</h2>
<div :class="$style.extInstallerNormDesc">{{ i18n.ts._externalResourceInstaller.checkVendorBeforeInstall }}</div> <div :class="$style.extInstallerNormDesc">{{ i18n.ts._externalResourceInstaller.checkVendorBeforeInstall }}</div>
<MkInfo v-if="extension.type === 'plugin'" :warn="true">{{ i18n.ts._plugin.installWarn }}</MkInfo> <MkInfo v-if="isPlugin" :warn="true">{{ i18n.ts._plugin.installWarn }}</MkInfo>
<FormSection> <FormSection>
<template #label>{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].metaTitle }}</template> <template #label>{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].metaTitle }}</template>
<div class="_gaps_s"> <div class="_gaps_s">
@ -26,25 +27,26 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #value>{{ extension.meta.author }}</template> <template #value>{{ extension.meta.author }}</template>
</MkKeyValue> </MkKeyValue>
</FormSplit> </FormSplit>
<MkKeyValue v-if="extension.type === 'plugin'"> <MkKeyValue v-if="isPlugin">
<template #key>{{ i18n.ts.description }}</template> <template #key>{{ i18n.ts.description }}</template>
<template #value>{{ extension.meta.description }}</template> <template #value>{{ extension.meta.description ?? i18n.ts.none }}</template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue v-if="extension.type === 'plugin'"> <MkKeyValue v-if="isPlugin">
<template #key>{{ i18n.ts.version }}</template> <template #key>{{ i18n.ts.version }}</template>
<template #value>{{ extension.meta.version }}</template> <template #value>{{ extension.meta.version }}</template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue v-if="extension.type === 'plugin'"> <MkKeyValue v-if="isPlugin">
<template #key>{{ i18n.ts.permission }}</template> <template #key>{{ i18n.ts.permission }}</template>
<template #value> <template #value>
<ul :class="$style.extInstallerKVList"> <ul v-if="extension.meta.permissions && extension.meta.permissions.length > 0" :class="$style.extInstallerKVList">
<li v-for="permission in extension.meta.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li> <li v-for="permission in extension.meta.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li>
</ul> </ul>
<template v-else>{{ i18n.ts.none }}</template>
</template> </template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue v-if="extension.type === 'theme' && extension.meta.base"> <MkKeyValue v-if="isTheme">
<template #key>{{ i18n.ts._externalResourceInstaller._meta.base }}</template> <template #key>{{ i18n.ts._externalResourceInstaller._meta.base }}</template>
<template #value>{{ i18n.ts[extension.meta.base] }}</template> <template #value>{{ i18n.ts[extension.meta.base ?? 'none'] }}</template>
</MkKeyValue> </MkKeyValue>
<MkFolder> <MkFolder>
<template #icon><i class="ti ti-code"></i></template> <template #icon><i class="ti ti-code"></i></template>
@ -81,9 +83,9 @@ export type Extension = {
raw: string; raw: string;
meta: { meta: {
name: string; name: string;
version: string;
author: string; author: string;
description?: string; description?: string;
version?: string;
permissions?: string[]; permissions?: string[];
config?: Record<string, any>; config?: Record<string, any>;
}; };
@ -98,6 +100,7 @@ export type Extension = {
}; };
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormSplit from '@/components/form/split.vue'; import FormSplit from '@/components/form/split.vue';
@ -108,6 +111,9 @@ import MkFolder from '@/components/MkFolder.vue';
import MkKeyValue from '@/components/MkKeyValue.vue'; import MkKeyValue from '@/components/MkKeyValue.vue';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
const isPlugin = computed(() => props.extension.type === 'plugin');
const isTheme = computed(() => props.extension.type === 'theme');
const props = defineProps<{ const props = defineProps<{
extension: Extension; extension: Extension;
url?: string; url?: string;