前端: 添加顶部导航栏组件

frontend/src/renderer/components/Header.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Layout, Input, Avatar, Dropdown } from 'antd';
+import { UserOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons';
+
+const { Header: AntHeader } = Layout;
+
+function Header() {
+  const menuItems = [
+    { key: 'settings', icon: <SettingOutlined />, label: '设置' },
+    { key: 'logout', icon: <LogoutOutlined />, label: '退出登录' },
+  ];
+
+  return (
+    <AntHeader style={{ background: '#1890ff', padding: '0 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+      <span style={{ color: 'white', fontSize: '18px', fontWeight: 'bold' }}>CloudDisk</span>
+      
+      <Input 
+        placeholder="搜索文件..." 
+        style={{ width: '300px', marginLeft: '20px' }} 
+      />
+      
+      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '16px' }}>
+        <Dropdown menu={{ items: menuItems }} placement="bottomRight">
+          <Avatar icon={<UserOutlined />} style={{ cursor: 'pointer' }} />
+        </Dropdown>
+      </div>
+    </AntHeader>
+  );
+}
+
+export default Header;