添加了postsPanel作为通用帖子显示板,增加了对jest测试的配置,添加了论坛主页,设定了论坛全局框架,设定了论坛基础主题色及主题切换、字号切换逻辑
Change-Id: I9fad0cf577088adb00c9850d405ccd23e6072413
diff --git a/src/views/frame/frame.tsx b/src/views/frame/frame.tsx
new file mode 100644
index 0000000..c0c2e0e
--- /dev/null
+++ b/src/views/frame/frame.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { Outlet } from "react-router";
+import { useEffect, useState } from "react";
+import {
+ SearchOutlined,
+ FontSizeOutlined,
+ MessageOutlined,
+ SunOutlined,
+ MoonOutlined
+ } from "@ant-design/icons";
+import style from "./frame.module.css";
+import logo from "&/assets/logo.png";
+import { useAppDispatch } from "@/hooks/store";
+import { useSelector } from "react-redux";
+const Frame:React.FC = () => {
+
+ const dispatch = useAppDispatch();
+
+ const showSearch = useSelector((state: any) => state.setting.showSearch);
+ const theme= useSelector((state: any) => state.setting.theme);
+ const toggleSearch = () => {
+ dispatch({ type: "setting/toggleSearch" });
+ }
+
+ const toggleFontSize = () => {
+ dispatch({ type: "setting/toggleFontSize" });
+ };
+
+ const toggleTheme = () => {
+ dispatch({ type: "setting/toggleTheme" });
+ };
+
+
+ return (
+ <div style={{ display: 'block', height: '100vh' }}>
+ <header className={style.header}>
+ <img className={style.logo} src={logo} alt="website logo"></img>
+ {showSearch && (<input className={style.searchInput} placeholder="输入关键词进行搜索"/>)}
+ <div className={style.toollist}>
+ <SearchOutlined onClick={toggleSearch}/>
+ <FontSizeOutlined onClick={toggleFontSize}/>
+ <MessageOutlined />
+ {theme === 'dark' ? <MoonOutlined onClick={toggleTheme}/> : <SunOutlined onClick={toggleTheme}/>}
+ </div>
+ </header>
+ <div className={style.container}>
+ <Outlet/>
+ </div>
+
+
+ </div>
+ );
+}
+
+export default Frame;
\ No newline at end of file