feat: 实现前端管理看板与移动端扫码视图组件

frontend/src/components/layout/AppLayout.tsx

@@ -0,0 +1,49 @@
+import { NavLink, Outlet } from "react-router-dom";
+import { ScanLine, ClipboardList, Bell, User } from "lucide-react";
+
+/** 底部导航 Tab 配置 */
+const TABS = [
+  { path: "/scan", label: "扫码干活", icon: ScanLine },
+  { path: "/tasks", label: "我的任务", icon: ClipboardList },
+  { path: "/notifications", label: "消息", icon: Bell },
+  { path: "/profile", label: "我的", icon: User },
+] as const;
+
+/** 导航栏高度（供页面计算偏移量） */
+export const TAB_BAR_HEIGHT = 64; // px（h-16）
+
+export default function AppLayout() {
+  return (
+    <div className="flex h-dvh flex-col bg-gray-50">
+      {/* ======== 主内容区 ======== */}
+      <main className="flex-1 overflow-y-auto">
+        <Outlet />
+      </main>
+
+      {/* ======== 底部导航栏 ======== */}
+      <nav
+        className="fixed bottom-0 z-50 w-full border-t border-gray-200 bg-white pb-safe"
+        style={{ height: TAB_BAR_HEIGHT }}
+      >
+        <div className="mx-auto flex h-full max-w-lg items-center justify-around">
+          {TABS.map(({ path, label, icon: Icon }) => (
+            <NavLink
+              key={path}
+              to={path}
+              className={({ isActive }) =>
+                `flex flex-col items-center gap-0.5 px-3 py-1 transition-colors ${
+                  isActive
+                    ? "text-blue-600"
+                    : "text-gray-400 hover:text-gray-600"
+                }`
+              }
+            >
+              <Icon size={22} strokeWidth={2} />
+              <span className="text-[10px] font-medium leading-none">{label}</span>
+            </NavLink>
+          ))}
+        </div>
+      </nav>
+    </div>
+  );
+}