From 57ec43bedcaf09bca966101349b9e1e93ceccfc6 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 28 Jul 2023 10:21:09 +0800
Subject: [PATCH] feat: add download tips in plugin and theme installation
 modal (#4314)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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
在安装主题和插件的界面中添加下载源的提示。
```
---
 .../components/common/AppDownloadAlert.vue    | 41 +++++++++++++++++++
 console/src/locales/en.yaml                   |  5 +++
 console/src/locales/zh-CN.yaml                |  5 +++
 console/src/locales/zh-TW.yaml                |  5 +++
 .../themes/components/ThemeUploadModal.vue    |  4 ++
 .../plugins/components/PluginUploadModal.vue  |  5 +++
 6 files changed, 65 insertions(+)
 create mode 100644 console/src/components/common/AppDownloadAlert.vue

diff --git a/console/src/components/common/AppDownloadAlert.vue b/console/src/components/common/AppDownloadAlert.vue
new file mode 100644
index 000000000..6f1d9fd1a
--- /dev/null
+++ b/console/src/components/common/AppDownloadAlert.vue
@@ -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>
diff --git a/console/src/locales/en.yaml b/console/src/locales/en.yaml
index 26a52cf2f..6d8acc9a4 100644
--- a/console/src/locales/en.yaml
+++ b/console/src/locales/en.yaml
@@ -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
diff --git a/console/src/locales/zh-CN.yaml b/console/src/locales/zh-CN.yaml
index 2f8972733..99cb80dca 100644
--- a/console/src/locales/zh-CN.yaml
+++ b/console/src/locales/zh-CN.yaml
@@ -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: 已从缓存中恢复未保存的内容
diff --git a/console/src/locales/zh-TW.yaml b/console/src/locales/zh-TW.yaml
index e151dfbf7..d395f8c28 100644
--- a/console/src/locales/zh-TW.yaml
+++ b/console/src/locales/zh-TW.yaml
@@ -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: 已從緩存中恢復未保存的內容
diff --git a/console/src/modules/interface/themes/components/ThemeUploadModal.vue b/console/src/modules/interface/themes/components/ThemeUploadModal.vue
index 73bbae910..b58064421 100644
--- a/console/src/modules/interface/themes/components/ThemeUploadModal.vue
+++ b/console/src/modules/interface/themes/components/ThemeUploadModal.vue
@@ -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="{
diff --git a/console/src/modules/system/plugins/components/PluginUploadModal.vue b/console/src/modules/system/plugins/components/PluginUploadModal.vue
index 7b074b89d..7f381f1c2 100644
--- a/console/src/modules/system/plugins/components/PluginUploadModal.vue
+++ b/console/src/modules/system/plugins/components/PluginUploadModal.vue
@@ -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="{