添加回收站页面并可以通过导航显示

src/layouts/BasicLayout.tsx

@@ -14,6 +14,7 @@ import RegisterPage from '@/pages/patient/register';
 import WorklistPage from '@/pages/patient/worklist';
 import HistorylistPage from '@/pages/patient/HistoryList';
 import ArchivelistPage from '@/pages/patient/ArchiveList';
+import BinPage from '@/pages/patient/Bin';
 
 // import { Link } from 'react-router-dom';
 // import { MenuOutlined } from '@ant-design/icons';
@@ -49,7 +50,8 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({ children }) => {
         'register':<RegisterPage />,
         'worklist':<WorklistPage />,
         'historylist':<HistorylistPage />,
-        'archivelist':<ArchivelistPage />
+        'archivelist':<ArchivelistPage />,
+        'bin':<BinPage />
     };
     //感知菜单项点击
     const handleMenuClick=(key:string)=>{

src/pages/patient/Bin.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Row, Col, Button, Drawer, Grid, Pagination } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import WorklistTable from './components/WorklistTable';
+import ArchiveOperationPanel from './components/ArchiveOperationPanel';
+import BinOperationPanel from './components/BinOperationPanel';
+
+const { useBreakpoint } = Grid;
+
+const BinPage: React.FC = () => {
+  const screens = useBreakpoint();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+
+  return (
+    <div className="p-4">
+      {screens.xs ? (
+        <>
+          <WorklistTable />
+          <Button
+            type="primary"
+            shape="circle"
+            icon={<SettingOutlined />}
+            className="fixed bottom-6 right-6 z-50"
+            onClick={() => setDrawerVisible(true)}
+          />
+          <Drawer
+            title="操作面板"
+            placement="left"
+            onClose={() => setDrawerVisible(false)}
+            open={drawerVisible}
+            width={300}
+          >
+            <BinOperationPanel />
+          </Drawer>
+        </>
+      ) : (
+        <Row gutter={16}>
+          <Col span={screens.lg ? 18 : screens.md ? 20 : 24}>
+            <WorklistTable />
+            <div className="flex justify-center mt-4">
+                <Pagination defaultCurrent={1} total={50} />
+            </div>
+          </Col>
+          <Col span={screens.lg ? 6 : screens.md ? 4 : 0}>
+            <BinOperationPanel />
+          </Col>
+        </Row>
+      )}
+    </div>
+  );
+};
+
+export default BinPage;

src/pages/patient/components/BinActionPanel.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { Row, Col, Tooltip, Button, Progress, Space, Typography, Card, theme } from "antd";
+import { DeleteOutlined, RollbackOutlined, RestOutlined } from "@ant-design/icons";
+
+const { Text } = Typography;
+
+interface BinActionPanelProps {
+  totalCapacity: number; // 总容量，单位GB
+  freeSpace: number;     // 剩余空间，单位GB
+  binCapacity: number;   // 回收站容量，单位GB
+  onDelete: () => void;
+  onRestore: () => void;
+  onEmpty: () => void;
+}
+
+const BinActionPanel: React.FC<BinActionPanelProps> = ({
+  totalCapacity,
+  freeSpace,
+  binCapacity,
+  onDelete,
+  onRestore,
+  onEmpty,
+}) => {
+  const usedSpace = totalCapacity - freeSpace;
+  const usedPercent = Math.round((usedSpace / totalCapacity) * 100);
+  const binPercent = Math.round((binCapacity / totalCapacity) * 100);
+
+  // 使用Card组件和theme.token适配多主题
+  return (
+    <Card
+      style={{ borderRadius: 8 }}
+      bodyStyle={{ padding: 24 }}
+      bordered={false}
+    >
+      <Space direction="vertical" size="middle" style={{ width: "100%" }}>
+        <Space direction="vertical" size={4} style={{ width: "100%" }}>
+          <Text strong>磁盘容量：</Text>
+          <Text type="secondary">{totalCapacity} GB</Text>
+          <Progress percent={usedPercent} size="small" showInfo={false} />
+        </Space>
+        <Space direction="vertical" size={4} style={{ width: "100%" }}>
+          <Text strong>剩余空间：</Text>
+          <Text type="secondary">{freeSpace} GB</Text>
+        </Space>
+        <Space direction="vertical" size={4} style={{ width: "100%" }}>
+          <Text strong>回收站容量：</Text>
+          <Text type="secondary">{binCapacity} GB</Text>
+          <Progress percent={binPercent} size="small" showInfo={false} strokeColor="#faad14" />
+        </Space>
+        <Row justify="center">
+          <Space>
+            <Tooltip title="删除">
+              <Button
+                type="primary"
+                shape="circle"
+                icon={<DeleteOutlined />}
+                onClick={onDelete}
+                danger
+              />
+            </Tooltip>
+            <Tooltip title="恢复">
+              <Button
+                type="default"
+                shape="circle"
+                icon={<RollbackOutlined />}
+                onClick={onRestore}
+              />
+            </Tooltip>
+            <Tooltip title="清空">
+              <Button
+                type="default"
+                shape="circle"
+                icon={<RestOutlined />}
+                onClick={onEmpty}
+              />
+            </Tooltip>
+          </Space>
+        </Row>
+      </Space>
+    </Card>
+  );
+};
+
+export default BinActionPanel;

src/pages/patient/components/BinOperationPanel.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import SearchPanel from './SearchPanel';
+import BinActionPanel from './BinActionPanel';
+
+const BinOperationPanel: React.FC = () => {
+  return (
+    <div className="w-full">
+      <SearchPanel />
+    <div className="mt-4">
+      <BinActionPanel
+        totalCapacity={1000}
+        freeSpace={500}
+        binCapacity={100}
+        onDelete={() => {}}
+        onRestore={() => {}}
+        onEmpty={() => {}}
+      />
+    </div>
+    </div>
+  );
+};
+
+export default BinOperationPanel;