<script setup lang="ts">
|
import { computed } from 'vue';
|
import { useAppStore } from '@/store/modules/app';
|
import { $t } from '@/locales';
|
import pkg from '~/package.json';
|
|
const appStore = useAppStore();
|
|
const column = computed(() => (appStore.isMobile ? 1 : 2));
|
|
interface PkgJson {
|
name: string;
|
version: string;
|
dependencies: PkgVersionInfo[];
|
devDependencies: PkgVersionInfo[];
|
}
|
|
interface PkgVersionInfo {
|
name: string;
|
version: string;
|
}
|
|
const { name, version, dependencies, devDependencies } = pkg;
|
|
function transformVersionData(tuple: [string, string]): PkgVersionInfo {
|
const [$name, $version] = tuple;
|
return {
|
name: $name,
|
version: $version
|
};
|
}
|
|
const pkgJson: PkgJson = {
|
name,
|
version,
|
dependencies: Object.entries(dependencies).map(item => transformVersionData(item)),
|
devDependencies: Object.entries(devDependencies).map(item => transformVersionData(item))
|
};
|
|
const latestBuildTime = BUILD_TIME;
|
|
function toLink(url: string) {
|
window.open(url, '_blank');
|
}
|
</script>
|
|
<template>
|
<NSpace vertical :size="16">
|
<NCard :title="$t('page.about.title')" :bordered="false" size="small" segmented class="card-wrapper">
|
<template #header-extra>
|
<div class="flex gap-3px">
|
<ButtonIcon
|
icon="simple-icons:github"
|
:tooltip-content="`GitHub ${$t('page.about.projectInfo.repositoryLink')}`"
|
@click="toLink('https://github.com/m-xlsea/ruoyi-plus-soybean')"
|
/>
|
<ButtonIcon
|
class="color-#da203e"
|
icon="simple-icons:gitcode"
|
:tooltip-content="`GitCode ${$t('page.about.projectInfo.repositoryLink')}`"
|
@click="toLink('https://gitcode.com/xlsea/ruoyi-plus-soybean')"
|
/>
|
<ButtonIcon
|
class="color-#c71d23"
|
icon="simple-icons:gitee"
|
:tooltip-content="`Gitee ${$t('page.about.projectInfo.repositoryLink')}`"
|
@click="toLink('https://gitee.com/xlsea/ruoyi-plus-soybean')"
|
/>
|
</div>
|
</template>
|
<p>{{ $t('page.about.introduction') }}</p>
|
</NCard>
|
<NCard :title="$t('page.about.projectInfo.title')" :bordered="false" size="small" segmented class="card-wrapper">
|
<NDescriptions label-placement="left" bordered size="small" :column="column">
|
<NDescriptionsItem :label="$t('page.about.projectInfo.version')">
|
<NTag type="primary">{{ pkgJson.version }}</NTag>
|
</NDescriptionsItem>
|
<NDescriptionsItem :label="$t('page.about.projectInfo.latestBuildTime')">
|
<NTag type="primary">{{ latestBuildTime }}</NTag>
|
</NDescriptionsItem>
|
<NDescriptionsItem :label="$t('page.about.projectInfo.documentLink')">
|
<a class="text-primary" :href="pkg.homepage" target="_blank" rel="noopener noreferrer">
|
{{ $t('page.about.projectInfo.documentLink') }}
|
</a>
|
</NDescriptionsItem>
|
<NDescriptionsItem :label="$t('page.about.projectInfo.previewLink')">
|
<a class="text-primary" :href="pkg.website" target="_blank" rel="noopener noreferrer">
|
{{ $t('page.about.projectInfo.previewLink') }}
|
</a>
|
</NDescriptionsItem>
|
</NDescriptions>
|
</NCard>
|
<NCard :title="$t('page.about.prdDep')" :bordered="false" size="small" segmented class="card-wrapper">
|
<NDescriptions label-placement="left" bordered size="small" :column="column">
|
<NDescriptionsItem v-for="item in pkgJson.dependencies" :key="item.name" :label="item.name">
|
{{ item.version }}
|
</NDescriptionsItem>
|
</NDescriptions>
|
</NCard>
|
<NCard :title="$t('page.about.devDep')" :bordered="false" size="small" segmented class="card-wrapper">
|
<NDescriptions label-placement="left" bordered size="small" :column="column">
|
<NDescriptionsItem v-for="item in pkgJson.devDependencies" :key="item.name" :label="item.name">
|
{{ item.version }}
|
</NDescriptionsItem>
|
</NDescriptions>
|
</NCard>
|
</NSpace>
|
</template>
|
|
<style scoped></style>
|
