feat: 国际化功能基础实现

This commit is contained in:
alger
2025-01-23 11:02:55 +08:00
parent 599b0251af
commit 174428b386
14 changed files with 189 additions and 17 deletions
@@ -33,7 +33,7 @@
<!-- 标签页切换 -->
<n-tabs v-model:value="activeTab" class="flex-1" type="line" animated>
<n-tab-pane name="songs" tab="热门歌曲">
<n-tab-pane name="songs" :tab="$t('artist.songs')">
<div ref="songListRef" class="songs-list">
<n-scrollbar style="max-height: 61vh" :size="5" @scroll="handleSongScroll">
<div class="song-list-content">
@@ -44,14 +44,14 @@
:list="true"
@play="handlePlay"
/>
<div v-if="songLoading" class="loading-more">加载中...</div>
<div v-if="songLoading" class="loading-more">{{ $t('common.loading') }}</div>
</div>
<play-bottom />
</n-scrollbar>
</div>
</n-tab-pane>
<n-tab-pane name="albums" tab="专辑">
<n-tab-pane name="albums" :tab="$t('artist.albums')">
<div ref="albumListRef" class="albums-list">
<n-scrollbar style="max-height: 61vh" :size="5" @scroll="handleAlbumScroll">
<div class="albums-grid">
@@ -69,14 +69,14 @@
type: '专辑'
}"
/>
<div v-if="albumLoading" class="loading-more">加载中...</div>
<div v-if="albumLoading" class="loading-more">{{ $t('common.loading') }}</div>
</div>
<play-bottom />
</n-scrollbar>
</div>
</n-tab-pane>
<n-tab-pane name="about" tab="艺人介绍">
<n-tab-pane name="about" :tab="$t('artist.description')">
<div class="artist-description">
<n-scrollbar style="max-height: 60vh">
<div class="description-content" v-html="artistInfo?.briefDesc"></div>
@@ -5,7 +5,7 @@
<template #icon>
<i class="ri-refresh-line"></i>
</template>
刷新列表
{{ $t('donation.refresh') }}
</n-button>
</div>
<div class="donation-grid" :class="{ 'grid-expanded': isExpanded }">
@@ -78,27 +78,27 @@
<div class="p-6 rounded-lg shadow-lg bg-light dark:bg-gray-800">
<div class="description text-center text-sm text-gray-700 dark:text-gray-200">
<p>您的捐赠将用于支持开发和维护工作包括但不限于服务器维护域名续费等</p>
<p>留言时可留下您的邮箱或 github名称</p>
<p>{{ $t('donation.description') }}</p>
<p>{{ $t('donation.message') }}</p>
</div>
<div class="flex justify-between">
<div class="flex flex-col items-center gap-2">
<n-image
:src="alipay"
alt="支付宝收款码"
:alt="$t('common.alipay')"
class="w-60 h-60 rounded-lg cursor-none"
preview-disabled
/>
<span class="text-sm text-gray-700 dark:text-gray-200">支付宝</span>
<span class="text-sm text-gray-700 dark:text-gray-200">{{ $t('common.alipay') }}</span>
</div>
<div class="flex flex-col items-center gap-2">
<n-image
:src="wechat"
alt="微信收款码"
:alt="$t('common.wechat')"
class="w-60 h-60 rounded-lg cursor-none"
preview-disabled
/>
<span class="text-sm text-gray-700 dark:text-gray-200">微信支付</span>
<span class="text-sm text-gray-700 dark:text-gray-200">{{ $t('common.wechat') }}</span>
</div>
</div>
</div>