首次提交by MimoCode

2026-06-15 14:50:15 +08:00
parent 584b31da50
commit ead13f863c
166 changed files with 14908 additions and 1 deletions
@@ -0,0 +1,92 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { NavBar, TabBar, Badge } from 'antd-mobile';
+import { 
+  AppOutline, 
+  SearchOutline, 
+  AddCircleOutline,
+  SetOutline,
+  BellOutline 
+} from 'antd-mobile-icons';
+import { useNotificationStore } from '../../stores';
+import './index.css';
+
+interface LayoutProps {
+  children: React.ReactNode;
+  title?: string;
+  showBack?: boolean;
+  showTabBar?: boolean;
+}
+
+const Layout: React.FC<LayoutProps> = ({ 
+  children, 
+  title = '药箱',
+  showBack = false,
+  showTabBar = true 
+}) => {
+  const navigate = useNavigate();
+  const { unreadCount } = useNotificationStore();
+  
+  const tabs = [
+    {
+      key: '/',
+      title: '首页',
+      icon: <AppOutline />
+    },
+    {
+      key: '/medicines',
+      title: '药品',
+      icon: <SearchOutline />
+    },
+    {
+      key: '/quick-dispense',
+      title: '取药',
+      icon: <AddCircleOutline />
+    },
+    {
+      key: '/notifications',
+      title: '通知',
+      icon: <Badge content={unreadCount > 0 ? unreadCount : null}>
+        <BellOutline />
+      </Badge>
+    },
+    {
+      key: '/settings',
+      title: '设置',
+      icon: <SetOutline />
+    }
+  ];
+  
+  const handleTabChange = (key: string) => {
+    navigate(key);
+  };
+  
+  return (
+    <div className="layout">
+      <div className="layout-header">
+        <NavBar 
+          onBack={showBack ? () => navigate(-1) : undefined}
+          backArrow={showBack}
+        >
+          {title}
+        </NavBar>
+      </div>
+      
+      <div className="layout-content">
+        {children}
+      </div>
+      
+      {showTabBar && (
+        <div className="layout-tabbar">
+          <TabBar activeKey={tabs.find(t => window.location.pathname.startsWith(t.key))?.key || '/'} onChange={handleTabChange}>
+            {tabs.map(item => (
+              <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
+            ))}
+          </TabBar>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Layout;