From cdf5ffa0a82305ca26fca04d172e6bd8a62258d8 Mon Sep 17 00:00:00 2001 From: shuai Date: Mon, 17 Apr 2023 18:32:43 +0800 Subject: [PATCH] feat: add custome sidebar fucntion --- i18n/en_US.yaml | 3 +++ ui/src/common/interface.ts | 1 + ui/src/components/CustomSidebar/index.tsx | 11 +++++++++++ ui/src/components/index.ts | 2 ++ ui/src/pages/Admin/CssAndHtml/index.tsx | 14 ++++++++++++++ ui/src/pages/Questions/Detail/index.tsx | 3 ++- ui/src/pages/Questions/index.tsx | 8 +++++++- ui/src/pages/Tags/Detail/index.tsx | 3 ++- ui/src/stores/customize.ts | 3 +++ 9 files changed, 45 insertions(+), 3 deletions(-) create mode 100644 ui/src/components/CustomSidebar/index.tsx diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml index f71662ae..f73d4f94 100644 --- a/i18n/en_US.yaml +++ b/i18n/en_US.yaml @@ -1420,6 +1420,9 @@ ui: footer: label: Footer text: This will insert before . + sidebar: + label: Sidebar + text: This will insert in sidebar. login: page_title: Login membership: diff --git a/ui/src/common/interface.ts b/ui/src/common/interface.ts index 8fc79f91..4256203f 100644 --- a/ui/src/common/interface.ts +++ b/ui/src/common/interface.ts @@ -385,6 +385,7 @@ export interface AdminSettingsCustom { custom_head: string; custom_header: string; custom_footer: string; + custom_sidebar: string; } export interface AdminSettingsLogin { diff --git a/ui/src/components/CustomSidebar/index.tsx b/ui/src/components/CustomSidebar/index.tsx new file mode 100644 index 00000000..5beccb51 --- /dev/null +++ b/ui/src/components/CustomSidebar/index.tsx @@ -0,0 +1,11 @@ +import { memo } from 'react'; + +import { customizeStore } from '@/stores'; + +const Index = () => { + const { custom_sidebar } = customizeStore((state) => state); + if (!custom_sidebar) return null; + return
; +}; + +export default memo(Index); diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts index 1a241857..840d3f4a 100644 --- a/ui/src/components/index.ts +++ b/ui/src/components/index.ts @@ -38,6 +38,7 @@ import Counts from './Counts'; import QuestionList from './QuestionList'; import HotQuestions from './HotQuestions'; import HttpErrorContent from './HttpErrorContent'; +import CustomSidebar from './CustomSidebar'; export { Avatar, @@ -82,5 +83,6 @@ export { QuestionList, HotQuestions, HttpErrorContent, + CustomSidebar, }; export type { EditorRef, JSONSchema, UISchema }; diff --git a/ui/src/pages/Admin/CssAndHtml/index.tsx b/ui/src/pages/Admin/CssAndHtml/index.tsx index e309ae50..e53abeef 100644 --- a/ui/src/pages/Admin/CssAndHtml/index.tsx +++ b/ui/src/pages/Admin/CssAndHtml/index.tsx @@ -31,6 +31,11 @@ const Index: FC = () => { title: t('header.label'), description: t('header.text'), }, + custom_sidebar: { + type: 'string', + title: t('sidebar.label'), + description: t('sidebar.text'), + }, custom_footer: { type: 'string', title: t('footer.label'), @@ -60,6 +65,13 @@ const Index: FC = () => { className: ['fs-14', 'font-monospace'], }, }, + custom_sidebar: { + 'ui:widget': 'textarea', + 'ui:options': { + rows: 10, + className: ['fs-14', 'font-monospace'], + }, + }, custom_footer: { 'ui:widget': 'textarea', 'ui:options': { @@ -77,6 +89,7 @@ const Index: FC = () => { custom_css: formData.custom_css.value, custom_head: formData.custom_head.value, custom_header: formData.custom_header.value, + custom_sidebar: formData.custom_sidebar.value, custom_footer: formData.custom_footer.value, }; @@ -103,6 +116,7 @@ const Index: FC = () => { formMeta.custom_css.value = setting.custom_css; formMeta.custom_head.value = setting.custom_head; formMeta.custom_header.value = setting.custom_header; + formMeta.custom_sidebar.value = setting.custom_sidebar; formMeta.custom_footer.value = setting.custom_footer; setFormData(formMeta); } diff --git a/ui/src/pages/Questions/Detail/index.tsx b/ui/src/pages/Questions/Detail/index.tsx index 67686258..23925ba9 100644 --- a/ui/src/pages/Questions/Detail/index.tsx +++ b/ui/src/pages/Questions/Detail/index.tsx @@ -8,7 +8,7 @@ import { } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import { Pagination } from '@/components'; +import { Pagination, CustomSidebar } from '@/components'; import { loggedUserInfoStore, toastStore } from '@/stores'; import { scrollToElementTop } from '@/utils'; import { usePageTags, usePageUsers } from '@/hooks'; @@ -256,6 +256,7 @@ const Index = () => { )} + diff --git a/ui/src/pages/Questions/index.tsx b/ui/src/pages/Questions/index.tsx index 77dbd99c..306f7605 100644 --- a/ui/src/pages/Questions/index.tsx +++ b/ui/src/pages/Questions/index.tsx @@ -4,7 +4,12 @@ import { useMatch, Link, useSearchParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { usePageTags } from '@/hooks'; -import { FollowingTags, QuestionList, HotQuestions } from '@/components'; +import { + FollowingTags, + QuestionList, + HotQuestions, + CustomSidebar, +} from '@/components'; import { siteInfoStore, loggedUserInfoStore } from '@/stores'; import { useQuestionList } from '@/services'; import * as Type from '@/common/interface'; @@ -44,6 +49,7 @@ const Questions: FC = () => { /> + {!loggedUser.username && (
diff --git a/ui/src/pages/Tags/Detail/index.tsx b/ui/src/pages/Tags/Detail/index.tsx index 84bd7fe2..37daf4a8 100644 --- a/ui/src/pages/Tags/Detail/index.tsx +++ b/ui/src/pages/Tags/Detail/index.tsx @@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'; import { usePageTags } from '@/hooks'; import * as Type from '@/common/interface'; -import { FollowingTags } from '@/components'; +import { FollowingTags, CustomSidebar } from '@/components'; import { useTagInfo, useFollow, @@ -152,6 +152,7 @@ const Questions: FC = () => { + diff --git a/ui/src/stores/customize.ts b/ui/src/stores/customize.ts index 209f6024..c2dbfb5e 100644 --- a/ui/src/stores/customize.ts +++ b/ui/src/stores/customize.ts @@ -5,11 +5,13 @@ interface IType { custom_head: string; custom_header: string; custom_footer: string; + custom_sidebar: string; update: (params: { custom_css?: string; custom_head?: string; custom_header?: string; custom_footer?: string; + custom_sidebar?: string; }) => void; } @@ -18,6 +20,7 @@ const loginSetting = create((set) => ({ custom_head: '', custom_header: '', custom_footer: '', + custom_sidebar: '', update: (params) => set((state) => { return {