feat: 初始版本 - 家庭收纳管理系统

- 创建 Next.js 14 + TypeScript + TailwindCSS 项目
- 集成 Shadcn/ui 组件库
- 实现物品列表和详情展示
- 实现分类管理功能
- 实现位置管理功能
- 实现搜索和筛选功能
- 添加模拟数据

技术栈：Next.js 14, React, TailwindCSS, Shadcn/ui

src/app/globals.css

@@ -4,6 +4,40 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
 @layer utilities {
   .text-balance {
     text-wrap: balance;

src/app/page.tsx

@@ -1,100 +1,57 @@
-import Image from "next/image";
+"use client";
+
+import { useState } from "react";
+import { items, categories, locations } from "@/data/mockData";
+import ItemList from "@/components/items/ItemList";
+import CategoryManager from "@/components/categories/CategoryManager";
+import LocationManager from "@/components/locations/LocationManager";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
+  const [activeTab, setActiveTab] = useState("items");
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* 头部 */}
+      <header className="bg-white shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 py-6">
+          <h1 className="text-3xl font-bold text-gray-900">
+            🏠 家庭收纳管理系统
+          </h1>
+          <p className="text-gray-600 mt-2">
+            轻松管理家中物品，快速找到所需
+          </p>
         </div>
+      </header>
+
+      {/* 主内容 */}
+      <main className="max-w-7xl mx-auto px-4 py-8">
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <TabsList className="grid w-full grid-cols-3 mb-8">
+            <TabsTrigger value="items">📦 物品管理</TabsTrigger>
+            <TabsTrigger value="categories">🏷️ 分类管理</TabsTrigger>
+            <TabsTrigger value="locations">📍 位置管理</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="items" className="space-y-4">
+            <ItemList items={items} categories={categories} locations={locations} />
+          </TabsContent>
+
+          <TabsContent value="categories" className="space-y-4">
+            <CategoryManager categories={categories} />
+          </TabsContent>
+
+          <TabsContent value="locations" className="space-y-4">
+            <LocationManager locations={locations} />
+          </TabsContent>
+        </Tabs>
       </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
+
+      {/* 页脚 */}
+      <footer className="bg-white border-t mt-12">
+        <div className="max-w-7xl mx-auto px-4 py-6 text-center text-gray-500 text-sm">
+          家庭收纳管理系统 © 2024 | Built with Next.js + TailwindCSS + Shadcn/ui
+        </div>
       </footer>
     </div>
   );

src/components/categories/CategoryManager.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { Category } from "@/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useState } from "react";
+
+interface CategoryManagerProps {
+  categories: Category[];
+  onAdd?: (category: Omit<Category, "id">) => void;
+  onEdit?: (category: Category) => void;
+  onDelete?: (id: string) => void;
+}
+
+const icons = ["📱", "📚", "👕", "🍳", "🔧", "✏️", "🎮", "🏀", "🎵", "📷"];
+const colors = [
+  "bg-blue-500",
+  "bg-green-500",
+  "bg-purple-500",
+  "bg-orange-500",
+  "bg-gray-500",
+  "bg-yellow-500",
+  "bg-red-500",
+  "bg-pink-500",
+  "bg-indigo-500",
+  "bg-teal-500",
+];
+
+export default function CategoryManager({
+  categories,
+  onAdd,
+  onEdit,
+  onDelete,
+}: CategoryManagerProps) {
+  const [isAddOpen, setIsAddOpen] = useState(false);
+  const [newCategory, setNewCategory] = useState({
+    name: "",
+    icon: "📱",
+    color: "bg-blue-500",
+  });
+
+  const handleAdd = () => {
+    if (onAdd && newCategory.name) {
+      onAdd(newCategory as Omit<Category, "id">);
+      setNewCategory({ name: "", icon: "📱", color: "bg-blue-500" });
+      setIsAddOpen(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">分类管理</h2>
+        <Dialog open={isAddOpen} onOpenChange={setIsAddOpen}>
+          <DialogTrigger asChild>
+            <Button>添加分类</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>添加新分类</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4 pt-4">
+              <div>
+                <label className="text-sm font-medium mb-2 block">名称</label>
+                <Input
+                  value={newCategory.name}
+                  onChange={(e) =>
+                    setNewCategory({ ...newCategory, name: e.target.value })
+                  }
+                  placeholder="输入分类名称"
+                />
+              </div>
+              <div>
+                <label className="text-sm font-medium mb-2 block">图标</label>
+                <div className="flex flex-wrap gap-2">
+                  {icons.map((icon) => (
+                    <Button
+                      key={icon}
+                      variant={newCategory.icon === icon ? "default" : "outline"}
+                      size="sm"
+                      onClick={() => setNewCategory({ ...newCategory, icon })}
+                    >
+                      {icon}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <label className="text-sm font-medium mb-2 block">颜色</label>
+                <div className="flex flex-wrap gap-2">
+                  {colors.map((color) => (
+                    <Button
+                      key={color}
+                      variant={newCategory.color === color ? "default" : "outline"}
+                      size="sm"
+                      className={color}
+                      onClick={() => setNewCategory({ ...newCategory, color })}
+                    />
+                  ))}
+                </div>
+              </div>
+              <Button onClick={handleAdd} className="w-full">
+                确认添加
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {categories.map((category) => (
+          <Card key={category.id}>
+            <CardHeader className="pb-2">
+              <div className="flex justify-between items-center">
+                <CardTitle className="text-lg flex items-center gap-2">
+                  <Badge className={category.color}>{category.icon}</Badge>
+                  {category.name}
+                </CardTitle>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="flex gap-2">
+                <Button variant="outline" size="sm" onClick={() => onEdit?.(category)}>
+                  编辑
+                </Button>
+                <Button variant="destructive" size="sm" onClick={() => onDelete?.(category.id)}>
+                  删除
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/items/ItemDetailDialog.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { Item, Category, Location } from "@/types";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+
+interface ItemDetailDialogProps {
+  item: Item;
+  category?: Category;
+  location?: Location;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function ItemDetailDialog({
+  item,
+  category,
+  location,
+  open,
+  onOpenChange,
+}: ItemDetailDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            {category && (
+              <Badge className={category.color}>{category.icon}</Badge>
+            )}
+            <DialogTitle className="text-2xl">{item.name}</DialogTitle>
+          </div>
+        </DialogHeader>
+
+        <div className="space-y-4 mt-4">
+          {/* 基本信息 */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-500 mb-2">描述</h3>
+            <p className="text-gray-700">{item.description}</p>
+          </div>
+
+          {/* 分类和位置 */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <h3 className="text-sm font-semibold text-gray-500 mb-2">分类</h3>
+              <div className="flex items-center gap-2">
+                {category && (
+                  <>
+                    <span className="text-2xl">{category.icon}</span>
+                    <span className="text-gray-700">{category.name}</span>
+                  </>
+                )}
+              </div>
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold text-gray-500 mb-2">位置</h3>
+              <div className="flex items-center gap-2">
+                <span className="text-xl">📍</span>
+                <div>
+                  <p className="text-gray-700">{location?.name}</p>
+                  <p className="text-xs text-gray-500">{location?.path}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 数量信息 */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-500 mb-2">数量</h3>
+            <p className="text-gray-700 text-lg">
+              {item.quantity} {item.unit}
+            </p>
+          </div>
+
+          {/* 标签 */}
+          {item.tags.length > 0 && (
+            <div>
+              <h3 className="text-sm font-semibold text-gray-500 mb-2">标签</h3>
+              <div className="flex flex-wrap gap-2">
+                {item.tags.map((tag, index) => (
+                  <Badge key={index} variant="secondary">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 时间信息 */}
+          <div className="grid grid-cols-2 gap-4 pt-4 border-t">
+            <div>
+              <h3 className="text-xs text-gray-500">创建时间</h3>
+              <p className="text-sm text-gray-700">{item.createdAt}</p>
+            </div>
+            <div>
+              <h3 className="text-xs text-gray-500">更新时间</h3>
+              <p className="text-sm text-gray-700">{item.updatedAt}</p>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/items/ItemList.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { useState } from "react";
+import { Item, Category, Location } from "@/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import ItemDetailDialog from "./ItemDetailDialog";
+
+interface ItemListProps {
+  items: Item[];
+  categories: Category[];
+  locations: Location[];
+}
+
+export default function ItemList({ items, categories, locations }: ItemListProps) {
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string>("all");
+  const [selectedLocation, setSelectedLocation] = useState<string>("all");
+  const [selectedItem, setSelectedItem] = useState<Item | null>(null);
+  const [isDetailOpen, setIsDetailOpen] = useState(false);
+
+  // 筛选物品
+  const filteredItems = items.filter((item) => {
+    const matchKeyword =
+      searchKeyword === "" ||
+      item.name.toLowerCase().includes(searchKeyword.toLowerCase()) ||
+      item.description.toLowerCase().includes(searchKeyword.toLowerCase()) ||
+      item.tags.some((tag) => tag.toLowerCase().includes(searchKeyword.toLowerCase()));
+
+    const matchCategory = selectedCategory === "all" || item.categoryId === selectedCategory;
+    const matchLocation = selectedLocation === "all" || item.locationId === selectedLocation;
+
+    return matchKeyword && matchCategory && matchLocation;
+  });
+
+  const getCategoryById = (id: string) => categories.find((c) => c.id === id);
+  const getLocationById = (id: string) => locations.find((l) => l.id === id);
+
+  const handleItemClick = (item: Item) => {
+    setSelectedItem(item);
+    setIsDetailOpen(true);
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 搜索和筛选 */}
+      <div className="flex flex-wrap gap-4">
+        <Input
+          placeholder="搜索物品名称、描述或标签..."
+          value={searchKeyword}
+          onChange={(e) => setSearchKeyword(e.target.value)}
+          className="max-w-sm"
+        />
+        <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="全部分类" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部分类</SelectItem>
+            {categories.map((category) => (
+              <SelectItem key={category.id} value={category.id}>
+                {category.icon} {category.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Select value={selectedLocation} onValueChange={setSelectedLocation}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="全部位置" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部位置</SelectItem>
+            {locations.map((location) => (
+              <SelectItem key={location.id} value={location.id}>
+                {location.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 物品列表 */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {filteredItems.map((item) => {
+          const category = getCategoryById(item.categoryId);
+          const location = getLocationById(item.locationId);
+          return (
+            <Card
+              key={item.id}
+              className="cursor-pointer hover:shadow-lg transition-shadow"
+              onClick={() => handleItemClick(item)}
+            >
+              <CardHeader className="pb-2">
+                <div className="flex justify-between items-start">
+                  <CardTitle className="text-lg">{item.name}</CardTitle>
+                  {category && (
+                    <Badge className={category.color}>{category.icon}</Badge>
+                  )}
+                </div>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-gray-500 mb-2 line-clamp-2">
+                  {item.description}
+                </p>
+                <div className="flex justify-between items-center text-sm">
+                  <span className="text-gray-600">
+                    📍 {location?.name || "未知位置"}
+                  </span>
+                  <span className="text-gray-600">
+                    数量：{item.quantity} {item.unit}
+                  </span>
+                </div>
+                {item.tags.length > 0 && (
+                  <div className="flex flex-wrap gap-1 mt-2">
+                    {item.tags.map((tag, index) => (
+                      <Badge key={index} variant="secondary" className="text-xs">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {filteredItems.length === 0 && (
+        <div className="text-center py-12 text-gray-500">
+          没有找到匹配的物品
+        </div>
+      )}
+
+      {/* 物品详情弹窗 */}
+      {selectedItem && (
+        <ItemDetailDialog
+          item={selectedItem}
+          category={getCategoryById(selectedItem.categoryId)}
+          location={getLocationById(selectedItem.locationId)}
+          open={isDetailOpen}
+          onOpenChange={setIsDetailOpen}
+        />
+      )}
+    </div>
+  );
+}

src/components/locations/LocationManager.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useState } from "react";
+import { Location } from "@/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface LocationManagerProps {
+  locations: Location[];
+  onAdd?: (location: Omit<Location, "id" | "path">) => void;
+  onEdit?: (location: Location) => void;
+  onDelete?: (id: string) => void;
+}
+
+export default function LocationManager({
+  locations,
+  onAdd,
+  onEdit,
+  onDelete,
+}: LocationManagerProps) {
+  const [isAddOpen, setIsAddOpen] = useState(false);
+  const [newLocation, setNewLocation] = useState({
+    name: "",
+    code: "",
+    parentId: "" as string | undefined,
+  });
+
+  const handleAdd = () => {
+    if (onAdd && newLocation.name && newLocation.code) {
+      onAdd(newLocation);
+      setNewLocation({ name: "", code: "", parentId: undefined });
+      setIsAddOpen(false);
+    }
+  };
+
+  // 获取父位置的路径
+  const getParentPath = (parentId?: string) => {
+    if (!parentId) return "";
+    const parent = locations.find((l) => l.id === parentId);
+    return parent ? parent.path + "/" : "";
+  };
+
+  // 筛选可作为父级的位置（一级位置）
+  const parentLocations = locations.filter((l) => !l.parentId);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">位置管理</h2>
+        <Dialog open={isAddOpen} onOpenChange={setIsAddOpen}>
+          <DialogTrigger asChild>
+            <Button>添加位置</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>添加新位置</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4 pt-4">
+              <div>
+                <label className="text-sm font-medium mb-2 block">名称</label>
+                <Input
+                  value={newLocation.name}
+                  onChange={(e) =>
+                    setNewLocation({ ...newLocation, name: e.target.value })
+                  }
+                  placeholder="例如：客厅、卧室"
+                />
+              </div>
+              <div>
+                <label className="text-sm font-medium mb-2 block">编码</label>
+                <Input
+                  value={newLocation.code}
+                  onChange={(e) =>
+                    setNewLocation({ ...newLocation, code: e.target.value.toUpperCase() })
+                  }
+                  placeholder="例如：LR、BR"
+                />
+              </div>
+              <div>
+                <label className="text-sm font-medium mb-2 block">父位置（可选）</label>
+                <Select
+                  value={newLocation.parentId}
+                  onValueChange={(value) =>
+                    setNewLocation({ ...newLocation, parentId: value || undefined })
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="选择父位置" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="">无（一级位置）</SelectItem>
+                    {parentLocations.map((location) => (
+                      <SelectItem key={location.id} value={location.id}>
+                        {location.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              {newLocation.name && newLocation.code && (
+                <div className="text-sm text-gray-500">
+                  完整路径：{getParentPath(newLocation.parentId)}
+                  {newLocation.name}
+                </div>
+              )}
+              <Button onClick={handleAdd} className="w-full">
+                确认添加
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {locations.map((location) => (
+          <Card key={location.id}>
+            <CardHeader className="pb-2">
+              <div className="flex justify-between items-start">
+                <div>
+                  <CardTitle className="text-lg">{location.name}</CardTitle>
+                  <p className="text-xs text-gray-500">{location.code}</p>
+                </div>
+                {location.parentId && (
+                  <span className="text-xs bg-gray-100 px-2 py-1 rounded">子位置</span>
+                )}
+              </div>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-gray-600 mb-3">路径：{location.path}</p>
+              <div className="flex gap-2">
+                <Button variant="outline" size="sm" onClick={() => onEdit?.(location)}>
+                  编辑
+                </Button>
+                <Button variant="destructive" size="sm" onClick={() => onDelete?.(location.id)}>
+                  删除
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

src/components/ui/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-base leading-none font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/ui/select.tsx

@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

src/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/components/ui/tabs.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

src/data/mockData.ts

@@ -0,0 +1,123 @@
+import { Item, Category, Location } from "@/types";
+
+// 模拟分类数据
+export const categories: Category[] = [
+  { id: "1", name: "电子产品", icon: "📱", color: "bg-blue-500" },
+  { id: "2", name: "书籍", icon: "📚", color: "bg-green-500" },
+  { id: "3", name: "衣物", icon: "👕", color: "bg-purple-500" },
+  { id: "4", name: "厨房用品", icon: "🍳", color: "bg-orange-500" },
+  { id: "5", name: "工具", icon: "🔧", color: "bg-gray-500" },
+  { id: "6", name: "文具", icon: "✏️", color: "bg-yellow-500" },
+];
+
+// 模拟位置数据
+export const locations: Location[] = [
+  { id: "1", name: "客厅", code: "LR", path: "客厅" },
+  { id: "2", name: "卧室", code: "BR", path: "卧室" },
+  { id: "3", name: "书房", code: "ST", path: "书房" },
+  { id: "4", name: "厨房", code: "KT", path: "厨房" },
+  { id: "5", name: "储物间", code: "STR", path: "储物间" },
+  { id: "6", name: "衣柜 A", code: "WD-A", parentId: "2", path: "卧室/衣柜 A" },
+  { id: "7", name: "书架 B", code: "BK-B", parentId: "3", path: "书房/书架 B" },
+  { id: "8", name: "橱柜 C", code: "CB-C", parentId: "4", path: "厨房/橱柜 C" },
+];
+
+// 模拟物品数据
+export const items: Item[] = [
+  {
+    id: "1",
+    name: "MacBook Pro",
+    description: "2023 款 14 寸，M3 Pro 芯片",
+    categoryId: "1",
+    locationId: "3",
+    quantity: 1,
+    unit: "台",
+    tags: ["电脑", "工作"],
+    createdAt: "2024-01-15",
+    updatedAt: "2024-01-15",
+  },
+  {
+    id: "2",
+    name: "iPhone 15 Pro",
+    description: "256GB 原色钛金属",
+    categoryId: "1",
+    locationId: "1",
+    quantity: 1,
+    unit: "台",
+    tags: ["手机", "通讯"],
+    createdAt: "2024-02-20",
+    updatedAt: "2024-02-20",
+  },
+  {
+    id: "3",
+    name: "设计心理学",
+    description: "唐·诺曼经典著作",
+    categoryId: "2",
+    locationId: "7",
+    quantity: 1,
+    unit: "本",
+    tags: ["设计", "产品"],
+    createdAt: "2023-06-10",
+    updatedAt: "2023-06-10",
+  },
+  {
+    id: "4",
+    name: "冬季外套",
+    description: "北面羽绒服，黑色 L 码",
+    categoryId: "3",
+    locationId: "6",
+    quantity: 2,
+    unit: "件",
+    tags: ["冬季", "外套"],
+    createdAt: "2023-11-01",
+    updatedAt: "2023-11-01",
+  },
+  {
+    id: "5",
+    name: "不粘锅套装",
+    description: "双立人三件套",
+    categoryId: "4",
+    locationId: "8",
+    quantity: 1,
+    unit: "套",
+    tags: ["厨具", "烹饪"],
+    createdAt: "2024-03-01",
+    updatedAt: "2024-03-01",
+  },
+  {
+    id: "6",
+    name: "螺丝刀套装",
+    description: "小米精修螺丝刀",
+    categoryId: "5",
+    locationId: "5",
+    quantity: 1,
+    unit: "套",
+    tags: ["工具", "维修"],
+    createdAt: "2023-08-15",
+    updatedAt: "2023-08-15",
+  },
+  {
+    id: "7",
+    name: "iPad Air",
+    description: "第五代 64GB 蓝色",
+    categoryId: "1",
+    locationId: "1",
+    quantity: 1,
+    unit: "台",
+    tags: ["平板", "娱乐"],
+    createdAt: "2023-05-20",
+    updatedAt: "2023-05-20",
+  },
+  {
+    id: "8",
+    name: "笔记本",
+    description: "Moleskine 经典黑色",
+    categoryId: "6",
+    locationId: "3",
+    quantity: 5,
+    unit: "本",
+    tags: ["文具", "记录"],
+    createdAt: "2024-01-10",
+    updatedAt: "2024-01-10",
+  },
+];

src/types/index.ts

@@ -0,0 +1,40 @@
+// 物品类型
+export interface Item {
+  id: string;
+  name: string;
+  description: string;
+  categoryId: string;
+  locationId: string;
+  quantity: number;
+  unit: string;
+  imageUrl?: string;
+  tags: string[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+// 分类类型
+export interface Category {
+  id: string;
+  name: string;
+  icon: string;
+  color: string;
+  parentId?: string;
+}
+
+// 位置类型
+export interface Location {
+  id: string;
+  name: string;
+  code: string;
+  parentId?: string;
+  path: string;
+}
+
+// 搜索筛选条件
+export interface SearchFilters {
+  keyword?: string;
+  categoryId?: string;
+  locationId?: string;
+  tags?: string[];
+}