diff --git a/front/src/App.tsx b/front/src/App.tsx
index 9d4ff19..65f465a 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -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() {
>
} />
} />
+ } />
} />
} />
diff --git a/front/src/components/Panel.tsx b/front/src/components/Panel.tsx
new file mode 100644
index 0000000..63829e8
--- /dev/null
+++ b/front/src/components/Panel.tsx
@@ -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 (
+
+
setTab(data.value as typeof tab)}
+ >
+ 投稿
+ 评论
+ 网盘
+ 设置
+
+
+
+ {titleMap[tab]}
+ 这里是 {titleMap[tab]} 的占位内容
+
+
+ );
+};
+
+export default Panel;
diff --git a/front/src/layouts/components/Sidebar.tsx b/front/src/layouts/components/Sidebar.tsx
index 1156c67..dd6a40a 100644
--- a/front/src/layouts/components/Sidebar.tsx
+++ b/front/src/layouts/components/Sidebar.tsx
@@ -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: '关于' },
];