AI没帮我提交这些,我手动提交一下吧
This commit is contained in:
@@ -6,6 +6,7 @@ import About from './components/About';
|
||||
import CreatePost from './components/CreatePost';
|
||||
import PostCard from './components/PostCard';
|
||||
import ImageViewer from './components/ImageViewer';
|
||||
import Panel from './components/Panel';
|
||||
import { fetchArticles, reset_identity_token, getSiteNotice, type Article } from './api';
|
||||
import { useLayout } from './context/LayoutContext';
|
||||
import './App.css';
|
||||
@@ -313,6 +314,7 @@ function App() {
|
||||
>
|
||||
<Route index element={<Home onPreviewImage={openImageViewer} />} />
|
||||
<Route path="create" element={<CreatePost />} />
|
||||
<Route path="panel" element={<Panel />} />
|
||||
<Route path="about" element={<About />} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</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 = [
|
||||
{ path: '/', icon: Home24Regular, label: '主页' },
|
||||
{ path: '/create', icon: Add24Regular, label: '投稿' },
|
||||
{ path: '/dashboard', icon: Person24Regular, label: '用户设置' },
|
||||
{ path: '/panel', icon: Person24Regular, label: '用户设置' },
|
||||
{ path: '/admin', icon: Settings24Regular, label: '管理面板' },
|
||||
{ path: '/about', icon: Info24Regular, label: '关于' },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user