From 7bde20a51584e2746d8fa1425a56496d3220459c Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Thu, 4 Aug 2022 09:44:13 +0800 Subject: [PATCH] feat: add theme settings support (#593) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Ryan Wang #### 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/2299 /hold until https://github.com/halo-dev/halo/pull/2299 merge #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/2298 #### Screenshots: |image|image| | ---- | ---- | #### Special notes for your reviewer: 测试方式： 1. Halo 后端需要 checkout 到 https://github.com/halo-dev/halo/pull/2299 分支。 2. 将被测主题放置在 `~/halo-next/themes`，可以使用 https://github.com/ruibaby/theme-astro-starter 3. 使用主题内的 `theme.yaml` 和 `settings.yaml` 创建 `Theme` 和 `Setting` 的资源。 4. admin 需要 checkout 到当前 PR 的分支，启动开发服务之后在主题列表即可启用该主题。 5. 测试保存和更新主题配置。 #### Does this PR introduce a user-facing change? ```release-note None ``` --- package.json | 2 +- packages/shared/package.json | 5 +- packages/shared/src/core/plugins.ts | 2 +- packages/shared/src/layouts/BasicLayout.vue | 21 +- packages/shared/src/layouts/PluginLayout.vue | 4 +- .../src/layouts/SystemSettingsLayout.vue | 2 +- .../shared/src/layouts/UserProfileLayout.vue | 4 +- packages/shared/src/types/plugin.ts | 2 +- pnpm-lock.yaml | 12 +- src/formkit/theme.ts | 8 +- src/modules/interface/themes/ThemeDetail.vue | 362 +++++++----------- src/modules/interface/themes/ThemeSetting.vue | 98 +++++ .../interface/themes/layouts/ThemeLayout.vue | 246 ++++++++++++ src/modules/interface/themes/module.ts | 13 +- src/modules/system/plugins/PluginSetting.vue | 2 +- tsconfig.app.json | 2 +- 16 files changed, 527 insertions(+), 258 deletions(-) create mode 100644 src/modules/interface/themes/ThemeSetting.vue create mode 100644 src/modules/interface/themes/layouts/ThemeLayout.vue diff --git a/package.json b/package.json index ec93d3c2..689fb43b 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@formkit/vue": "1.0.0-beta.10", "@halo-dev/admin-api": "^1.1.0", "@halo-dev/admin-shared": "workspace:*", - "@halo-dev/api-client": "^0.0.7", + "@halo-dev/api-client": "^0.0.8", "@halo-dev/components": "workspace:*", "@vueuse/components": "^8.9.4", "@vueuse/core": "^8.9.4", diff --git a/packages/shared/package.json b/packages/shared/package.json index 59641352..e8692539 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -7,7 +7,8 @@ ], "scripts": { "dev": "vite build --watch", - "build": "vite build" + "build": "vite build", + "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false" }, "keywords": [], "author": { @@ -35,7 +36,7 @@ "homepage": "https://github.com/halo-dev/halo-admin/tree/next/shared/components#readme", "license": "MIT", "dependencies": { - "@halo-dev/api-client": "^0.0.7", + "@halo-dev/api-client": "^0.0.8", "@halo-dev/components": "workspace:*", "axios": "^0.27.2" }, diff --git a/packages/shared/src/core/plugins.ts b/packages/shared/src/core/plugins.ts index 8e3003d5..6fa5e635 100644 --- a/packages/shared/src/core/plugins.ts +++ b/packages/shared/src/core/plugins.ts @@ -1,4 +1,4 @@ -import type { Plugin } from "@/types/plugin"; +import type { Plugin } from "../types/plugin"; export function definePlugin(plugin: Plugin): Plugin { return plugin; diff --git a/packages/shared/src/layouts/BasicLayout.vue b/packages/shared/src/layouts/BasicLayout.vue index b8a5756c..74e4c88c 100644 --- a/packages/shared/src/layouts/BasicLayout.vue +++ b/packages/shared/src/layouts/BasicLayout.vue @@ -8,14 +8,14 @@ import { VRoutesMenu, VTag, } from "@halo-dev/components"; -import type { MenuGroupType, MenuItemType } from "@/types/menus"; +import type { MenuGroupType, MenuItemType } from "../types/menus"; import type { User } from "@halo-dev/api-client"; import logo from "@/assets/logo.svg"; import { RouterView, useRoute, useRouter } from "vue-router"; import { computed, inject, ref } from "vue"; -const menus = inject("menus"); -const minimenus = inject("minimenus"); +const menus = inject("menus"); +const minimenus = inject("minimenus"); const route = useRoute(); const router = useRouter(); @@ -58,12 +58,12 @@ const currentRole = computed(() => {
-
- +
+
- {{ currentUser.spec.displayName }} + {{ currentUser?.spec.displayName }}
@@ -89,14 +89,15 @@ const currentRole = computed(() => {
{ class="is-active is-active0 flex h-10 w-10 flex-col items-center justify-center" >
- +
- {{ menu.name }} + {{ menu?.name }}
diff --git a/packages/shared/src/layouts/PluginLayout.vue b/packages/shared/src/layouts/PluginLayout.vue index f379272d..a1f46a92 100644 --- a/packages/shared/src/layouts/PluginLayout.vue +++ b/packages/shared/src/layouts/PluginLayout.vue @@ -5,9 +5,9 @@ import { RouterView, useRoute, useRouter } from "vue-router"; import type { Ref } from "vue"; import { onMounted, provide, ref, watch } from "vue"; import type { Plugin } from "@halo-dev/api-client"; -import type { FormKitSetting, FormKitSettingSpec } from "@/types/formkit"; +import type { FormKitSetting, FormKitSettingSpec } from "../types/formkit"; import { BasicLayout } from "../layouts"; -import { apiClient } from "@/utils/api-client"; +import { apiClient } from "../utils/api-client"; interface PluginTab { id: string; diff --git a/packages/shared/src/layouts/SystemSettingsLayout.vue b/packages/shared/src/layouts/SystemSettingsLayout.vue index 53bb6e71..1d618223 100644 --- a/packages/shared/src/layouts/SystemSettingsLayout.vue +++ b/packages/shared/src/layouts/SystemSettingsLayout.vue @@ -1,5 +1,5 @@ diff --git a/src/modules/interface/themes/ThemeSetting.vue b/src/modules/interface/themes/ThemeSetting.vue new file mode 100644 index 00000000..7192f8d2 --- /dev/null +++ b/src/modules/interface/themes/ThemeSetting.vue @@ -0,0 +1,98 @@ + + diff --git a/src/modules/interface/themes/layouts/ThemeLayout.vue b/src/modules/interface/themes/layouts/ThemeLayout.vue new file mode 100644 index 00000000..303ac800 --- /dev/null +++ b/src/modules/interface/themes/layouts/ThemeLayout.vue @@ -0,0 +1,246 @@ + + diff --git a/src/modules/interface/themes/module.ts b/src/modules/interface/themes/module.ts index 10f0916c..bb345b69 100644 --- a/src/modules/interface/themes/module.ts +++ b/src/modules/interface/themes/module.ts @@ -1,5 +1,7 @@ -import { BasicLayout, BlankLayout, definePlugin } from "@halo-dev/admin-shared"; +import { BlankLayout, definePlugin } from "@halo-dev/admin-shared"; +import ThemeLayout from "./layouts/ThemeLayout.vue"; import ThemeDetail from "./ThemeDetail.vue"; +import ThemeSetting from "./ThemeSetting.vue"; import Visual from "./Visual.vue"; import { IconPalette } from "@halo-dev/components"; @@ -9,13 +11,18 @@ export default definePlugin({ routes: [ { path: "/theme", - component: BasicLayout, + component: ThemeLayout, children: [ { path: "", - name: "Theme", + name: "ThemeDetail", component: ThemeDetail, }, + { + path: "settings/:group", + name: "ThemeSetting", + component: ThemeSetting, + }, ], }, { diff --git a/src/modules/system/plugins/PluginSetting.vue b/src/modules/system/plugins/PluginSetting.vue index aea0b2f5..c274d1d6 100644 --- a/src/modules/system/plugins/PluginSetting.vue +++ b/src/modules/system/plugins/PluginSetting.vue @@ -115,7 +115,7 @@ onMounted(() => { }); watch([() => plugin.value, () => group?.value], () => { - handleFetchConfigMap(); + handleFetchSettings(); handleFetchConfigMap(); }); diff --git a/tsconfig.app.json b/tsconfig.app.json index e3c18da7..8eb06694 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -1,7 +1,7 @@ { "extends": "@vue/tsconfig/tsconfig.web.json", "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/*"], + "exclude": ["src/**/__tests__/*", "packages/**/*"], "compilerOptions": { "baseUrl": ".", "composite": true,