From 97f0d99538f9cb877f13f7798104b4c266bf2411 Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Tue, 18 Oct 2022 18:12:11 +0800 Subject: [PATCH] feat: add support for displaying and installing uninstalled themes (halo-dev/console#648) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### What type of PR is this? /kind feature /milestone 2.0 #### What this PR does / why we need it: 支持显示和安装**未安装**的主题，以方便主题开发的时候，创建主题资源。适配 https://github.com/halo-dev/halo/pull/2586 #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/2554 #### Screenshots: image #### Special notes for your reviewer: /cc @halo-dev/sig-halo-console 测试方式： 1. 需要 `pnpm install` 2. Halo 需要切换到 https://github.com/halo-dev/halo/pull/2586 PR 的分支。 3. 在本地的 `~/halo-dev/themes` 创建新的主题，需要包含 `themes.yaml`，或者将现有的主题直接下载到 `~/halo-dev/themes` 4. 检查后台主题管理的主题列表中是否显示了未安装的主题，以及测试是否可以安装成功。 #### Does this PR introduce a user-facing change? ```release-note 支持显示和安装未安装的主题，以方便主题开发的时候，创建主题资源。 ``` --- .../themes/components/ThemeListModal.vue | 421 ++++++++++++------ 1 file changed, 288 insertions(+), 133 deletions(-) diff --git a/src/modules/interface/themes/components/ThemeListModal.vue b/src/modules/interface/themes/components/ThemeListModal.vue index 308cde515..2dfb74db8 100644 --- a/src/modules/interface/themes/components/ThemeListModal.vue +++ b/src/modules/interface/themes/components/ThemeListModal.vue @@ -11,10 +11,12 @@ import { VEntity, VEntityField, VStatusDot, + VTabItem, + VTabs, } from "@halo-dev/components"; import LazyImage from "@/components/image/LazyImage.vue"; import ThemeInstallModal from "./ThemeInstallModal.vue"; -import { ref, watch } from "vue"; +import { computed, ref, watch } from "vue"; import type { Theme } from "@halo-dev/api-client"; import { apiClient } from "@/utils/api-client"; import { usePermission } from "@/utils/permission"; @@ -41,15 +43,22 @@ const emit = defineEmits<{ (event: "select", theme: Theme | null): void; }>(); -const themes = ref([]); +const activeTab = ref("installed"); +const themes = ref([] as Theme[]); const loading = ref(false); const themeInstall = ref(false); +const creating = ref(false); + +const modalTitle = computed(() => { + return activeTab.value === "installed" ? "已安装的主题" : "未安装的主题"; +}); const handleFetchThemes = async () => { try { loading.value = true; - const { data } = - await apiClient.extension.theme.listthemeHaloRunV1alpha1Theme(); + const { data } = await apiClient.theme.listThemes({ + uninstalled: activeTab.value !== "installed", + }); themes.value = data.items; } catch (e) { console.error("Failed to fetch themes", e); @@ -58,6 +67,13 @@ const handleFetchThemes = async () => { } }; +watch( + () => activeTab.value, + () => { + handleFetchThemes(); + } +); + const handleUninstall = async (theme: Theme, deleteExtensions?: boolean) => { Dialog.warning({ title: `${ @@ -99,6 +115,27 @@ const handleUninstall = async (theme: Theme, deleteExtensions?: boolean) => { }); }; +const handleCreateTheme = async (theme: Theme) => { + try { + creating.value = true; + + const { data } = + await apiClient.extension.theme.createthemeHaloRunV1alpha1Theme({ + theme, + }); + + // create theme settings + apiClient.theme.reloadThemeSetting({ name: data.metadata.name }); + + activeTab.value = "installed"; + } catch (error) { + console.error("Failed to create theme", error); + } finally { + creating.value = false; + handleFetchThemes(); + } +}; + const onVisibleChange = (visible: boolean) => { emit("update:visible", visible); if (!visible) { @@ -131,143 +168,261 @@ defineExpose({ :visible="visible" :width="888" height="calc(100vh - 20px)" - title="已安装的主题" + :title="modalTitle" @update:visible="onVisibleChange" > - - - - -
    -
  • - + -