From da06d204fca5ce93e16a96b27934b3af67b8b0f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= Date: Fri, 29 Nov 2024 01:43:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E9=85=8D=E7=BD=AE=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 5 +- src/api/Project.ts | 24 ++-------- src/pages/Setup/components/Theme/index.tsx | 53 ++++++++++++---------- src/pages/Setup/components/Web/index.tsx | 4 +- src/stores/modules/web.ts | 3 +- src/types/app/project.d.ts | 14 +++--- 6 files changed, 46 insertions(+), 57 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 2ddf673..a04be0d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,8 +6,9 @@ import { ConfigProvider } from 'antd'; import RouteList from './components/RouteList'; import "@/styles/customAntd.scss" -import { getWebDataAPI } from '@/api/Project'; +import { getConfigDataAPI } from '@/api/Project'; import { useWebStore } from './stores'; +import { Web } from './types/app/project'; function App() { useAuthRedirect() @@ -22,7 +23,7 @@ function App() { // 获取网站数据并把数据共享给全局方便使用 const setWeb = useWebStore(state => state.setWeb) const getWebData = async () => { - const { data } = await getWebDataAPI(); + const { data } = await getConfigDataAPI("web"); setWeb(data) }; useEffect(() => { diff --git a/src/api/Project.ts b/src/api/Project.ts index 0550c93..e48c8e5 100644 --- a/src/api/Project.ts +++ b/src/api/Project.ts @@ -1,23 +1,7 @@ import Request from '@/utils/request' -import { System, Web, Theme, Other } from '@/types/app/project' -// 获取系统配置信息 -export const getSystemDataAPI = () => Request("GET", "/project/system") +// 获取项目配置 +export const getConfigDataAPI = (type: string) => Request("GET", `/config/list/${type}`) -// 获取网站配置信息 -export const getWebDataAPI = () => Request("GET", "/project/web") - -// 修改网站配置信息 -export const editWebDataAPI = (data: Web) => Request("PATCH", "/project/web", { data }) - -// 获取主题配置信息 -export const getThemeDataAPI = () => Request("GET", "/project/theme") - -// 修改主题配置信息 -export const editThemeDataAPI = (data: Theme) => Request("PATCH", "/project/theme", { data }) - -// 获取其他配置信息 -export const getOtherDataAPI = () => Request("GET", "/project/other") - -// 修改其他配置信息 -export const editOtherDataAPI = (data: Other) => Request("PATCH", "/project/other", { data }) \ No newline at end of file +// 修改项目配置 +export const editConfigDataAPI = (type: string, data: object) => Request<{ [string: string]: string }>("PATCH", `/config/${type}`, { data }) \ No newline at end of file diff --git a/src/pages/Setup/components/Theme/index.tsx b/src/pages/Setup/components/Theme/index.tsx index 58f4749..ced8cfe 100644 --- a/src/pages/Setup/components/Theme/index.tsx +++ b/src/pages/Setup/components/Theme/index.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from 'react'; import { notification, Divider, Input, Alert, Button, Spin } from 'antd'; import { PictureOutlined, LoadingOutlined, CloudUploadOutlined } from '@ant-design/icons'; -import { editThemeDataAPI, getThemeDataAPI } from '@/api/Project'; +import { editConfigDataAPI, getConfigDataAPI } from '@/api/Project'; import { Theme } from '@/types/app/project'; import FileUpload from '@/components/FileUpload'; @@ -16,23 +16,24 @@ const ThemePage = () => { const [theme, setTheme] = useState({} as Theme); const onSidebar = (value: string) => { - const rightSidebar = JSON.parse(theme.rightSidebar || '[]'); + const rightSidebar = JSON.parse(theme.right_sidebar || '[]'); const index = rightSidebar.indexOf(value); index > -1 ? rightSidebar.splice(index, 1) : rightSidebar.push(value) - setTheme({ ...theme, rightSidebar: JSON.stringify(rightSidebar) }); + setTheme({ ...theme, right_sidebar: JSON.stringify(rightSidebar) }); }; const getLayoutData = async () => { setLoading(true); - const { data } = await getThemeDataAPI(); - setTheme(data); + const { data } = await getConfigDataAPI("layout"); + console.log(data.social); - setSwiperText(data.swiperText ? JSON.parse(data.swiperText).join('\n') : ''); - setSocial(data.social ? JSON.parse(data.social).join("\n") : ''); + setTheme(data); + setSwiperText(data.swiper_text ? JSON.parse(data.swiper_text).join('\n') : ''); + setSocial(data.social ? JSON.parse(data.social)?.map((item: { name: string, url: string }) => JSON.stringify(item))?.join('\n') : ''); setCover(data.covers ? JSON.parse(data.covers).join("\n") : ''); - setRecoArticle(data.recoArticle ? JSON.parse(data.recoArticle).join("\n") : ''); - + setRecoArticle(data.reco_article ? JSON.parse(data.reco_article).join("\n") : ''); + setLoading(false); }; @@ -43,6 +44,10 @@ const ThemePage = () => { const editLayoutData = async () => { setLoading(true); + console.log(JSON.stringify(social.split('\n')),11111); + console.log(JSON.stringify(social.split('\n')),2222); + + const updatedLayout = { ...theme, swiperText: JSON.stringify(swiperText.split('\n')), @@ -51,7 +56,7 @@ const ThemePage = () => { recoArticle: JSON.stringify(recoArticle.split('\n')) }; - await editThemeDataAPI(updatedLayout); + await editConfigDataAPI("layout", updatedLayout); notification.success({ message: '成功', description: '🎉 修改主题成功', @@ -79,43 +84,43 @@ const ThemePage = () => { 亮色主题 Logo
setTheme({ ...theme, lightLogo: e.target.value })} + value={theme.light_logo} + onChange={(e) => setTheme({ ...theme, light_logo: e.target.value })} prefix={} addonAfter={} size='large' placeholder="请输入亮色Logo地址" className='customizeAntdInputAddonAfter' /> - +
暗色主题 Logo
setTheme({ ...theme, darkLogo: e.target.value })} + value={theme.dark_logo} + onChange={(e) => setTheme({ ...theme, dark_logo: e.target.value })} prefix={} addonAfter={} size='large' placeholder="请输入暗色Logo地址" className='customizeAntdInputAddonAfter' /> - +
首页背景图
setTheme({ ...theme, swiperImage: e.target.value })} + value={theme.swiper_image} + onChange={(e) => setTheme({ ...theme, swiper_image: e.target.value })} prefix={} addonAfter={} size='large' placeholder="请输入背景图地址" className='customizeAntdInputAddonAfter' /> - +
打字机文本 @@ -170,8 +175,8 @@ const ThemePage = () => {
{['author', 'randomArticle', 'newComments', 'hotArticle'].map((item) => ( -
onSidebar(item)}> -

+

onSidebar(item)}> +

{item === 'author' ? '作者信息模块' : item === 'hotArticle' ? '作者推荐模块' : item === 'randomArticle' ? '随机推荐模块' : '最新评论模块'}

@@ -185,8 +190,8 @@ const ThemePage = () => {
{['classics', 'card', 'waterfall'].map((item) => ( -
setTheme({ ...theme, isArticleLayout: item })} className={`item flex flex-col items-center p-4 m-4 border-2 rounded cursor-pointer ${theme.isArticleLayout === item ? 'border-primary' : 'border-[#eee]'}`}> -

+

setTheme({ ...theme, is_article_layout: item })} className={`item flex flex-col items-center p-4 m-4 border-2 rounded cursor-pointer ${theme.is_article_layout === item ? 'border-primary' : 'border-[#eee]'}`}> +

{item === 'classics' ? '经典布局' : item === 'card' ? '卡片布局' : '瀑布流布局'}

@@ -203,7 +208,7 @@ const ThemePage = () => { setTheme({ ...theme, swiperImage: url.join("\n") })} + onSuccess={(url: string[]) => setTheme({ ...theme, swiper_image: url.join("\n") })} onCancel={() => setIsModalOpen(false)} /> diff --git a/src/pages/Setup/components/Web/index.tsx b/src/pages/Setup/components/Web/index.tsx index 5271f8d..d00102d 100644 --- a/src/pages/Setup/components/Web/index.tsx +++ b/src/pages/Setup/components/Web/index.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { Form, Input, Button, message } from 'antd'; -import { editWebDataAPI } from '@/api/Project'; +import { editConfigDataAPI } from '@/api/Project'; import { Web } from '@/types/app/project' import { useWebStore } from '@/stores'; @@ -13,7 +13,7 @@ const WebPage = () => { const onSubmit = async (values: Web) => { setLoading(true); - await editWebDataAPI(values); + await editConfigDataAPI("web", values); message.success("🎉 编辑网站成功"); setWeb(values) diff --git a/src/stores/modules/web.ts b/src/stores/modules/web.ts index 0b485eb..90695f5 100644 --- a/src/stores/modules/web.ts +++ b/src/stores/modules/web.ts @@ -9,5 +9,4 @@ interface WebStore { export default create((set) => ({ web: {} as Web, setWeb: (data: Web) => set(() => ({ web: data })), -}) -); +})); \ No newline at end of file diff --git a/src/types/app/project.d.ts b/src/types/app/project.d.ts index de1e61e..94dfeba 100644 --- a/src/types/app/project.d.ts +++ b/src/types/app/project.d.ts @@ -33,13 +33,13 @@ export type RightSidebar = "author" | "hotArticle" | "randomArticle" | "newComme // 主题配置 export interface Theme { - isArticleLayout: string, - rightSidebar: string, - lightLogo: string, - darkLogo: string, - swiperImage: string, - swiperText: string, - recoArticle: string, + is_article_layout: string, + right_sidebar: string, + light_logo: string, + dark_logo: string, + swiper_image: string, + swiper_text: string, + reco_article: string, social: string, covers: string }