feat: add download tips in plugin and theme installation modal (#4314)

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.8.x

#### What this PR does / why we need it:

在安装主题和插件的界面中添加下载源的提示。

<img width="631" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/f28d0f24-8c65-4589-a5c0-32fea3a2bd2b">

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/4307

#### Does this PR introduce a user-facing change?

```release-note
在安装主题和插件的界面中添加下载源的提示。
```
pull/4322/head
Ryan Wang 2023-07-28 10:21:09 +08:00 committed by GitHub
parent 150e9975ba
commit 57ec43bedc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 0 deletions

View File

@ -0,0 +1,41 @@
<script lang="ts" setup>
import { VAlert } from "@halo-dev/components";
</script>
<template>
<VAlert :title="$t('core.common.text.tip')" :closable="false">
<template #description>
<p>{{ $t("core.components.app_download_alert.description") }}</p>
<ul class="mt-1.5 list-inside list-decimal space-y-1">
<i18n-t
keypath="core.components.app_download_alert.sources.app_store"
tag="li"
>
<template #url>
<a
href="https://halo.run/store/apps"
target="_blank"
class="underline-offset-2 hover:text-gray-900 hover:underline"
>
https://halo.run/store/apps
</a>
</template>
</i18n-t>
<i18n-t
keypath="core.components.app_download_alert.sources.github"
tag="li"
>
<template #url>
<a
href="https://github.com/halo-sigs/awesome-halo"
target="_blank"
class="underline-offset-2 hover:text-gray-900 hover:underline"
>
https://github.com/halo-sigs/awesome-halo
</a>
</template>
</i18n-t>
</ul>
</template>
</VAlert>
</template>

View File

@ -1151,6 +1151,11 @@ core:
size_label: items per page
social_auth_providers:
title: Third-party login
app_download_alert:
description: "Themes and plugins for Halo can be downloaded at the following addresses:"
sources:
app_store: "Official App Store: {url}"
github: "GitHub: {url}"
composables:
content_cache:
toast_recovered: Recovered unsaved content from cache

View File

@ -1151,6 +1151,11 @@ core:
size_label: 条 / 页
social_auth_providers:
title: 三方登录
app_download_alert:
description: Halo 的主题和插件可以在以下地址下载:
sources:
app_store: "官方应用市场:{url}"
github: "GitHub{url}"
composables:
content_cache:
toast_recovered: 已从缓存中恢复未保存的内容

View File

@ -1151,6 +1151,11 @@ core:
size_label: 條 / 頁
social_auth_providers:
title: 三方登入
app_download_alert:
description: Halo 的主題和插件可以在以下地址下載:
sources:
app_store: "官方應用市場:{url}"
github: "GitHub{url}"
composables:
content_cache:
toast_recovered: 已從緩存中恢復未保存的內容

View File

@ -17,6 +17,7 @@ import { apiClient } from "@/utils/api-client";
import { useRouteQuery } from "@vueuse/router";
import { submitForm } from "@formkit/core";
import type { ErrorResponse, UppyFile } from "@uppy/core";
import AppDownloadAlert from "@/components/common/AppDownloadAlert.vue";
const { t } = useI18n();
const queryClient = useQueryClient();
@ -234,6 +235,9 @@ watch(
>
<VTabs v-model:active-id="activeTabId" type="outline" class="!rounded-none">
<VTabItem id="local" :label="$t('core.theme.upload_modal.tabs.local')">
<div class="pb-3">
<AppDownloadAlert />
</div>
<UppyUpload
v-if="uploadVisible"
:restrictions="{

View File

@ -16,6 +16,7 @@ import { useI18n } from "vue-i18n";
import { useQueryClient } from "@tanstack/vue-query";
import { useRouteQuery } from "@vueuse/router";
import { submitForm } from "@formkit/core";
import AppDownloadAlert from "@/components/common/AppDownloadAlert.vue";
const { t } = useI18n();
const queryClient = useQueryClient();
@ -248,6 +249,10 @@ watch(
>
<VTabs v-model:active-id="activeTabId" type="outline" class="!rounded-none">
<VTabItem id="local" :label="$t('core.plugin.upload_modal.tabs.local')">
<div class="pb-3">
<AppDownloadAlert />
</div>
<UppyUpload
v-if="uploadVisible"
:restrictions="{