From b062a71234609446f337a1e23a8261df47343190 Mon Sep 17 00:00:00 2001 From: "haitao(lj)" Date: Sat, 10 Dec 2022 14:45:25 +0800 Subject: [PATCH] feat(admin/theme): Complete theme api interfacing --- i18n/en_US.yaml | 2 +- ui/src/common/constants.ts | 2 +- ui/src/common/interface.ts | 10 +++++ ui/src/components/FollowingTags/index.tsx | 5 ++- ui/src/pages/Admin/Themes/index.tsx | 48 +++++++++++++++++------ ui/src/pages/Admin/index.tsx | 2 + ui/src/router/routes.ts | 2 +- ui/src/services/admin/settings.ts | 10 +++++ 8 files changed, 63 insertions(+), 18 deletions(-) diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml index 1587c02d..b0d5e02c 100644 --- a/i18n/en_US.yaml +++ b/i18n/en_US.yaml @@ -982,7 +982,7 @@ ui: seo: SEO customize: Customize themes: Themes - css_and_html: CSS/HTML + css-html: CSS/HTML login: Login admin: admin_header: diff --git a/ui/src/common/constants.ts b/ui/src/common/constants.ts index 067bb88b..23844d4f 100644 --- a/ui/src/common/constants.ts +++ b/ui/src/common/constants.ts @@ -60,7 +60,7 @@ export const ADMIN_NAV_MENUS = [ name: 'themes', }, { - name: 'css_and_html', + name: 'css-html', }, ], }, diff --git a/ui/src/common/interface.ts b/ui/src/common/interface.ts index c6aa42a5..1144dae6 100644 --- a/ui/src/common/interface.ts +++ b/ui/src/common/interface.ts @@ -346,6 +346,16 @@ export interface AdminSettingsSeo { robots: string; } +export type themeConfig = { + navbar_style: string; + primary_color: string; + [k: string]: string | number; +}; +export interface AdminSettingsTheme { + theme: string; + theme_config: Record; +} + /** * @description interface for Activity */ diff --git a/ui/src/components/FollowingTags/index.tsx b/ui/src/components/FollowingTags/index.tsx index 3b7f64dd..2ae65602 100644 --- a/ui/src/components/FollowingTags/index.tsx +++ b/ui/src/components/FollowingTags/index.tsx @@ -35,7 +35,6 @@ const Index: FC = () => { if (!tryLoggedAndActivated().ok) { return null; } - return isEdit ? ( @@ -80,7 +79,9 @@ const Index: FC = () => { <>
{t('follow_tag_tip')}
- + )} diff --git a/ui/src/pages/Admin/Themes/index.tsx b/ui/src/pages/Admin/Themes/index.tsx index 5514dc14..cbec8607 100644 --- a/ui/src/pages/Admin/Themes/index.tsx +++ b/ui/src/pages/Admin/Themes/index.tsx @@ -2,7 +2,7 @@ import { FC, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import type * as Type from '@/common/interface'; -import { getSeoSetting, putSeoSetting } from '@/services'; +import { getThemeSetting, putThemeSetting } from '@/services'; import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components'; import { useToast } from '@/hooks'; import { handleFormError } from '@/utils'; @@ -21,6 +21,7 @@ const Index: FC = () => { description: t('themes.text'), enum: ['default'], enumNames: ['Default'], + default: 'default', }, navbar_style: { type: 'string', @@ -33,6 +34,7 @@ const Index: FC = () => { type: 'string', title: t('primary_color.label'), description: t('primary_color.text'), + default: '#ffffff', }, }, }; @@ -49,17 +51,22 @@ const Index: FC = () => { }, }, }; + const [themeSetting, setThemeSetting] = useState(); const [formData, setFormData] = useState(initFormData(schema)); - const onSubmit = (evt) => { evt.preventDefault(); evt.stopPropagation(); - - const reqParams: Type.AdminSettingsSeo = { - robots: formData.robots.value, + const themeName = formData.themes.value; + const reqParams: Type.AdminSettingsTheme = { + theme: themeName, + theme_config: { + [themeName]: { + navbar_style: formData.navbar_style.value, + primary_color: formData.primary_color.value, + }, + }, }; - - putSeoSetting(reqParams) + putThemeSetting(reqParams) .then(() => { Toast.onShow({ msg: t('update', { keyPrefix: 'toast' }), @@ -75,17 +82,32 @@ const Index: FC = () => { }; useEffect(() => { - getSeoSetting().then((setting) => { + getThemeSetting().then((setting) => { if (setting) { - // const formMeta = { ...formData }; - // formMeta.robots.value = setting.robots; - // setFormData(formMeta); + setThemeSetting(setting); + const themeName = setting.theme; + const themeConfig = setting.theme_config[themeName]; + const formMeta = { ...formData }; + formMeta.themes.value = themeName; + formMeta.navbar_style.value = themeConfig?.navbar_style; + formMeta.primary_color.value = themeConfig?.primary_color; + setFormData({ ...formMeta }); } }); }, []); - const handleOnChange = (data) => { - setFormData(data); + const handleOnChange = (cd) => { + console.log('cd: ', cd); + setFormData(cd); + const themeConfig = themeSetting?.theme_config[cd.themes.value]; + if (themeConfig) { + themeConfig.navbar_style = cd.navbar_style.value; + themeConfig.primary_color = cd.primary_color.value; + setThemeSetting({ + theme: themeSetting?.theme, + theme_config: themeSetting?.theme_config, + }); + } }; return ( diff --git a/ui/src/pages/Admin/index.tsx b/ui/src/pages/Admin/index.tsx index 5841235f..7bc1cb50 100644 --- a/ui/src/pages/Admin/index.tsx +++ b/ui/src/pages/Admin/index.tsx @@ -16,6 +16,8 @@ const formPaths = [ 'branding', 'legal', 'write', + 'themes', + 'css-html', ]; const Index: FC = () => { diff --git a/ui/src/router/routes.ts b/ui/src/router/routes.ts index 154dfa9d..e09071ff 100644 --- a/ui/src/router/routes.ts +++ b/ui/src/router/routes.ts @@ -242,7 +242,7 @@ const routes: RouteNode[] = [ page: 'pages/Admin/Themes', }, { - path: 'css_and_html', + path: 'css-html', page: 'pages/Admin/CssAndHtml', }, { diff --git a/ui/src/services/admin/settings.ts b/ui/src/services/admin/settings.ts index d4b366bb..191b6700 100644 --- a/ui/src/services/admin/settings.ts +++ b/ui/src/services/admin/settings.ts @@ -109,3 +109,13 @@ export const getSeoSetting = () => { export const putSeoSetting = (params: Type.AdminSettingsSeo) => { return request.put('/answer/admin/api/siteinfo/seo', params); }; + +export const getThemeSetting = () => { + return request.get( + '/answer/admin/api/siteinfo/theme', + ); +}; + +export const putThemeSetting = (params: Type.AdminSettingsTheme) => { + return request.put('/answer/admin/api/siteinfo/theme', params); +};