AI没帮我提交这些,我手动提交一下吧
This commit is contained in:
@@ -6,6 +6,7 @@ import About from './components/About';
|
|||||||
import CreatePost from './components/CreatePost';
|
import CreatePost from './components/CreatePost';
|
||||||
import PostCard from './components/PostCard';
|
import PostCard from './components/PostCard';
|
||||||
import ImageViewer from './components/ImageViewer';
|
import ImageViewer from './components/ImageViewer';
|
||||||
|
import Panel from './components/Panel';
|
||||||
import { fetchArticles, reset_identity_token, getSiteNotice, type Article } from './api';
|
import { fetchArticles, reset_identity_token, getSiteNotice, type Article } from './api';
|
||||||
import { useLayout } from './context/LayoutContext';
|
import { useLayout } from './context/LayoutContext';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
@@ -313,6 +314,7 @@ function App() {
|
|||||||
>
|
>
|
||||||
<Route index element={<Home onPreviewImage={openImageViewer} />} />
|
<Route index element={<Home onPreviewImage={openImageViewer} />} />
|
||||||
<Route path="create" element={<CreatePost />} />
|
<Route path="create" element={<CreatePost />} />
|
||||||
|
<Route path="panel" element={<Panel />} />
|
||||||
<Route path="about" element={<About />} />
|
<Route path="about" element={<About />} />
|
||||||
<Route path="*" element={<NotFound />} />
|
<Route path="*" element={<NotFound />} />
|
||||||
</Route>
|
</Route>
|
||||||
|
|||||||
56
front/src/components/Panel.tsx
Normal file
56
front/src/components/Panel.tsx
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { makeStyles, tokens, Tab, TabList, Text } from '@fluentui/react-components';
|
||||||
|
|
||||||
|
const useStyles = makeStyles({
|
||||||
|
container: {
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: '1200px',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: tokens.spacingVerticalL,
|
||||||
|
},
|
||||||
|
tabs: {
|
||||||
|
borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
|
||||||
|
paddingBottom: tokens.spacingVerticalS,
|
||||||
|
},
|
||||||
|
section: {
|
||||||
|
paddingTop: tokens.spacingVerticalM,
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
color: tokens.colorNeutralForeground3,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const Panel: React.FC = () => {
|
||||||
|
const styles = useStyles();
|
||||||
|
const [tab, setTab] = React.useState<'posts' | 'comments' | 'drive' | 'settings'>('posts');
|
||||||
|
|
||||||
|
const titleMap: Record<'posts' | 'comments' | 'drive' | 'settings', string> = {
|
||||||
|
posts: '投稿',
|
||||||
|
comments: '评论',
|
||||||
|
drive: '网盘',
|
||||||
|
settings: '设置',
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<TabList
|
||||||
|
className={styles.tabs}
|
||||||
|
selectedValue={tab}
|
||||||
|
onTabSelect={(_, data) => setTab(data.value as typeof tab)}
|
||||||
|
>
|
||||||
|
<Tab value="posts">投稿</Tab>
|
||||||
|
<Tab value="comments">评论</Tab>
|
||||||
|
<Tab value="drive">网盘</Tab>
|
||||||
|
<Tab value="settings">设置</Tab>
|
||||||
|
</TabList>
|
||||||
|
|
||||||
|
<div className={styles.section}>
|
||||||
|
<Text weight="semibold">{titleMap[tab]}</Text>
|
||||||
|
<Text className={styles.placeholder}>这里是 {titleMap[tab]} 的占位内容</Text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Panel;
|
||||||
@@ -89,7 +89,7 @@ const useStyles = makeStyles({
|
|||||||
const menuItems = [
|
const menuItems = [
|
||||||
{ path: '/', icon: Home24Regular, label: '主页' },
|
{ path: '/', icon: Home24Regular, label: '主页' },
|
||||||
{ path: '/create', icon: Add24Regular, label: '投稿' },
|
{ path: '/create', icon: Add24Regular, label: '投稿' },
|
||||||
{ path: '/dashboard', icon: Person24Regular, label: '用户设置' },
|
{ path: '/panel', icon: Person24Regular, label: '用户设置' },
|
||||||
{ path: '/admin', icon: Settings24Regular, label: '管理面板' },
|
{ path: '/admin', icon: Settings24Regular, label: '管理面板' },
|
||||||
{ path: '/about', icon: Info24Regular, label: '关于' },
|
{ path: '/about', icon: Info24Regular, label: '关于' },
|
||||||
];
|
];
|
||||||
|
|||||||
Reference in New Issue
Block a user