From f4e779462ac1baa09597410d0d2d60f4e73efb51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= Date: Tue, 17 Dec 2024 12:33:44 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=AF=B4=E8=AF=B4=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Theme/components/RecordTheme/index.tsx | 72 ++++++ .../Theme/components/SynthesisTheme/index.tsx | 197 ++++++++++++++++ src/pages/Setup/components/Theme/index.tsx | 212 ++---------------- src/types/app/project.d.ts | 4 +- 4 files changed, 289 insertions(+), 196 deletions(-) create mode 100644 src/pages/Setup/components/Theme/components/RecordTheme/index.tsx create mode 100644 src/pages/Setup/components/Theme/components/SynthesisTheme/index.tsx diff --git a/src/pages/Setup/components/Theme/components/RecordTheme/index.tsx b/src/pages/Setup/components/Theme/components/RecordTheme/index.tsx new file mode 100644 index 0000000..89d7b86 --- /dev/null +++ b/src/pages/Setup/components/Theme/components/RecordTheme/index.tsx @@ -0,0 +1,72 @@ +import { useEffect, useState } from 'react'; +import { Spin, Form, notification, Input, Button } from 'antd'; +import { LoadingOutlined } from '@ant-design/icons'; +import { Theme } from '@/types/app/project'; +import { editConfigDataAPI, getConfigDataAPI } from '@/api/Project'; + +const RecordTheme = () => { + const [loading, setLoading] = useState(false); + // const [theme, setTheme] = useState({} as Theme); + + const [form] = Form.useForm(); + + const getLayoutData = async () => { + setLoading(true); + + const { data } = await getConfigDataAPI("layout"); + + // setTheme(data); + + form.setFieldsValue({ + record_name: data.record_name, + record_info: data.record_info + }); + + setLoading(false); + }; + + useEffect(() => { + getLayoutData(); + }, []); + + const editThemeData = async (values: { record_name: string, record_info: string }) => { + setLoading(true); + + await editConfigDataAPI("layout", values); + + notification.success({ + message: '成功', + description: '🎉 修改主题成功', + }); + + setLoading(false); + }; + + return ( + <> + }> +

说说配置

+ +
+
+ + + + + + + + + +
+
+ + + ); +}; + +export default RecordTheme; \ No newline at end of file diff --git a/src/pages/Setup/components/Theme/components/SynthesisTheme/index.tsx b/src/pages/Setup/components/Theme/components/SynthesisTheme/index.tsx new file mode 100644 index 0000000..95b3a1b --- /dev/null +++ b/src/pages/Setup/components/Theme/components/SynthesisTheme/index.tsx @@ -0,0 +1,197 @@ +import { useState, useEffect } from 'react'; +import { notification, Divider, Input, Alert, Button, Spin, Form } from 'antd'; +import { PictureOutlined, LoadingOutlined, CloudUploadOutlined } from '@ant-design/icons'; +import { editConfigDataAPI, getConfigDataAPI } from '@/api/Project'; +import { Theme } from '@/types/app/project'; +import FileUpload from '@/components/FileUpload'; + +const SynthesisTheme = () => { + const [loading, setLoading] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); + const [theme, setTheme] = useState({} as Theme); + + const [form] = Form.useForm(); + + const onSidebar = (value: string) => { + const rightSidebar = JSON.parse(theme.right_sidebar || '[]'); + const index = rightSidebar.indexOf(value); + index > -1 ? rightSidebar.splice(index, 1) : rightSidebar.push(value); + setTheme({ ...theme, right_sidebar: JSON.stringify(rightSidebar) }); + }; + + const getLayoutData = async () => { + setLoading(true); + + const { data } = await getConfigDataAPI("layout"); + setTheme(data); + + form.setFieldsValue({ + light_logo: data.light_logo, + dark_logo: data.dark_logo, + swiper_image: data.swiper_image, + swiper_text: data.swiper_text ? JSON.parse(data.swiper_text).join('\n') : '', + social: data.social, + covers: data.covers ? JSON.parse(data.covers).join("\n") : '', + reco_article: data.reco_article ? JSON.parse(data.reco_article).join("\n") : '', + }); + + setLoading(false); + }; + + useEffect(() => { + getLayoutData(); + }, []); + + const editThemeData = async (values: any) => { + setLoading(true); + + const updatedLayout = { + ...theme, + ...values, + swiper_text: JSON.stringify(values.swiper_text.split('\n')), + covers: JSON.stringify(values.covers.split('\n')), + reco_article: JSON.stringify(values.reco_article.split('\n')), + }; + + await editConfigDataAPI("layout", updatedLayout); + + notification.success({ + message: '成功', + description: '🎉 修改主题成功', + }); + + setLoading(false); + }; + + const getFile = (name: string) => { + return new URL(`../../image/${name}.png`, import.meta.url).href; + }; + + const UploadBtn = () => ( + setIsModalOpen(true)} /> + ); + + return ( + <> + }> +

综合配置

+ +
+
+ 亮色主题 Logo + + } + addonAfter={} + size='large' + placeholder="请输入亮色Logo地址" + /> + + + + 暗色主题 Logo + + } + addonAfter={} + size='large' + placeholder="请输入暗色Logo地址" + /> + + + + 首页背景图 + + } + addonAfter={} + size='large' + placeholder="请输入背景图地址" + /> + + + + 打字机文本 + + + + + + 社交网站 + + + + + + 文章随机封面 + + + + + + 作者推荐文章 + + + + + + 侧边栏 +
+
+ {['author', 'randomArticle', 'newComments', 'hotArticle'].map((item) => ( +
onSidebar(item)}> +

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

+ +
+ ))} +
+
+ + 文章布局 +
+
+ {['classics', 'card', 'waterfall'].map((item) => ( +
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' ? '卡片布局' : '瀑布流布局'} +

+ +
+ ))} +
+
+ + + +
+ + + setTheme({ ...theme, swiper_image: url.join("\n") })} + onCancel={() => setIsModalOpen(false)} + /> + + ); +}; + +export default SynthesisTheme; \ 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 a01dd03..1af9c9c 100644 --- a/src/pages/Setup/components/Theme/index.tsx +++ b/src/pages/Setup/components/Theme/index.tsx @@ -1,205 +1,27 @@ -import { useState, useEffect } from 'react'; -import { notification, Divider, Input, Alert, Button, Spin, Segmented, Form } from 'antd'; -import { PictureOutlined, LoadingOutlined, CloudUploadOutlined } from '@ant-design/icons'; -import { editConfigDataAPI, getConfigDataAPI } from '@/api/Project'; -import { Theme } from '@/types/app/project'; -import FileUpload from '@/components/FileUpload'; +import { useState } from 'react'; +import { Segmented } from 'antd'; +import SynthesisTheme from './components/SynthesisTheme'; +import RecordTheme from './components/RecordTheme'; const ThemePage = () => { - const [loading, setLoading] = useState(false); - const [isModalOpen, setIsModalOpen] = useState(false); - const [theme, setTheme] = useState({} as Theme); const [current, setCurrent] = useState("综合配置"); - const [form] = Form.useForm(); - - const onSidebar = (value: string) => { - const rightSidebar = JSON.parse(theme.right_sidebar || '[]'); - const index = rightSidebar.indexOf(value); - index > -1 ? rightSidebar.splice(index, 1) : rightSidebar.push(value); - setTheme({ ...theme, right_sidebar: JSON.stringify(rightSidebar) }); - }; - - const getLayoutData = async () => { - setLoading(true); - - const { data } = await getConfigDataAPI("layout"); - setTheme(data); - - form.setFieldsValue({ - light_logo: data.light_logo, - dark_logo: data.dark_logo, - swiper_image: data.swiper_image, - swiper_text: data.swiper_text ? JSON.parse(data.swiper_text).join('\n') : '', - social: data.social, - covers: data.covers ? JSON.parse(data.covers).join("\n") : '', - reco_article: data.reco_article ? JSON.parse(data.reco_article).join("\n") : '', - }); - - setLoading(false); - }; - - useEffect(() => { - getLayoutData(); - }, []); - - const editLayoutData = async (values: any) => { - setLoading(true); - - const updatedLayout = { - ...theme, - ...values, - swiper_text: JSON.stringify(values.swiper_text.split('\n')), - covers: JSON.stringify(values.covers.split('\n')), - reco_article: JSON.stringify(values.reco_article.split('\n')), - }; - - await editConfigDataAPI("layout", updatedLayout); - - notification.success({ - message: '成功', - description: '🎉 修改主题成功', - }); - - setLoading(false); - }; - - const getFile = (name: string) => { - return new URL(`./image/${name}.png`, import.meta.url).href; - }; - - const UploadBtn = () => ( - setIsModalOpen(true)} /> - ); - return ( <> - }> -

主题配置

- - size="large" - options={['综合配置', '说说配置']} - onChange={setCurrent} - className='md:ml-10 mb-4' - /> -
- {current === "综合配置" && ( -
- 亮色主题 Logo - - } - addonAfter={} - size='large' - placeholder="请输入亮色Logo地址" - /> - - - - 暗色主题 Logo - - } - addonAfter={} - size='large' - placeholder="请输入暗色Logo地址" - /> - - - - 首页背景图 - - } - addonAfter={} - size='large' - placeholder="请输入背景图地址" - /> - - - - 打字机文本 - - - - - - 社交网站 - - - - - - 文章随机封面 - - - - - - 作者推荐文章 - - - - - - 侧边栏 -
-
- {['author', 'randomArticle', 'newComments', 'hotArticle'].map((item) => ( -
onSidebar(item)}> -

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

- -
- ))} -
-
- - 文章布局 -
-
- {['classics', 'card', 'waterfall'].map((item) => ( -
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' ? '卡片布局' : '瀑布流布局'} -

- -
- ))} -
-
- - - - )} -
- - - setTheme({ ...theme, swiper_image: url.join("\n") })} - onCancel={() => setIsModalOpen(false)} + + size="large" + options={['综合配置', '说说配置']} + onChange={setCurrent} + className='md:ml-10 mb-4' /> + + {current === "综合配置" && ( + + )} + + {current === "说说配置" && ( + + )} ); }; diff --git a/src/types/app/project.d.ts b/src/types/app/project.d.ts index 89aee0a..de12f32 100644 --- a/src/types/app/project.d.ts +++ b/src/types/app/project.d.ts @@ -36,7 +36,9 @@ export interface Theme { swiper_text: string, reco_article: string, social: string, - covers: string + covers: string, + record_name: string, + record_info: string } // 其他配置