feat: 炫酷的登录页

src/pages/plant/exchange/Config.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react'
+import { Plus, Search, Edit, Trash2, Gift, MoreHorizontal } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Label } from '@/components/ui/label'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Textarea } from '@/components/ui/textarea'
+
+const mockItems = [
+  { id: '1', name: '多肉植物盆栽', icon: '🪴', points: 500, stock: 50, sold: 23, category: '绿植', isActive: true, description: '精选多肉植物，含陶瓷花盆' },
+  { id: '2', name: '园艺工具套装', icon: '🔧', points: 800, stock: 30, sold: 12, category: '工具', isActive: true, description: '包含铲子、剪刀、喷壶' },
+  { id: '3', name: '植物生长灯', icon: '💡', points: 1200, stock: 20, sold: 8, category: '设备', isActive: true, description: 'LED全光谱补光灯' },
+  { id: '4', name: '有机肥料包', icon: '🌿', points: 300, stock: 100, sold: 67, category: '肥料', isActive: true, description: '天然有机肥料 500g' },
+  { id: '5', name: '花盆三件套', icon: '🏺', points: 600, stock: 0, sold: 45, category: '花盆', isActive: false, description: '陶瓷花盆 大中小三件套' },
+  { id: '6', name: '种子礼盒', icon: '🌱', points: 200, stock: 200, sold: 156, category: '种子', isActive: true, description: '含向日葵、薄荷、薰衣草种子各一包' },
+]
+
+export default function ExchangeConfigPage() {
+  const [items] = useState(mockItems)
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [search, setSearch] = useState('')
+
+  const filtered = items.filter(i => !search || i.name.includes(search))
+
+  return (
+    <div className="space-y-6 animate-fadeIn">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">兑换配置</h1>
+        <p className="text-muted-foreground mt-1">管理积分商城的兑换商品，配置积分价格和库存。</p>
+      </div>
+
+      <Card className="border-border/60 shadow-soft">
+        <CardHeader className="pb-3 border-b border-border/40">
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+            <CardTitle className="text-lg flex items-center gap-2">
+              <Gift className="h-5 w-5 text-primary" /> 商品列表
+              <Badge variant="secondary" className="text-xs">{filtered.length}</Badge>
+            </CardTitle>
+            <div className="flex items-center gap-3">
+              <div className="relative">
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input placeholder="搜索商品..." className="pl-9 w-48 h-9" value={search} onChange={e => setSearch(e.target.value)} />
+              </div>
+              <Button size="sm" onClick={() => setDialogOpen(true)} className="h-9 gap-1.5">
+                <Plus className="h-4 w-4" /> 新增商品
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="p-0">
+          <Table>
+            <TableHeader className="bg-muted/30">
+              <TableRow>
+                <TableHead className="pl-6 w-[60px]">图标</TableHead>
+                <TableHead>商品名称</TableHead>
+                <TableHead>分类</TableHead>
+                <TableHead>兑换积分</TableHead>
+                <TableHead>库存 / 已兑</TableHead>
+                <TableHead>状态</TableHead>
+                <TableHead className="w-[60px]" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filtered.map(item => (
+                <TableRow key={item.id} className="group hover:bg-muted/20">
+                  <TableCell className="pl-6 text-2xl">{item.icon}</TableCell>
+                  <TableCell>
+                    <div><span className="font-medium">{item.name}</span></div>
+                    <div className="text-xs text-muted-foreground truncate max-w-[200px]">{item.description}</div>
+                  </TableCell>
+                  <TableCell><Badge variant="outline" className="bg-primary/5">{item.category}</Badge></TableCell>
+                  <TableCell><span className="font-mono text-amber-600 font-semibold">{item.points}</span></TableCell>
+                  <TableCell>
+                    <span className={`font-mono text-sm ${item.stock === 0 ? 'text-red-500' : 'text-foreground'}`}>
+                      {item.stock}
+                    </span>
+                    <span className="text-muted-foreground mx-1">/</span>
+                    <span className="font-mono text-sm text-muted-foreground">{item.sold}</span>
+                  </TableCell>
+                  <TableCell>
+                    {item.isActive
+                      ? <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 shadow-none">上架</Badge>
+                      : <Badge variant="secondary" className="shadow-none">下架</Badge>}
+                  </TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-8 w-8 opacity-0 group-hover:opacity-100">
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem><Edit className="mr-2 h-4 w-4" /> 编辑</DropdownMenuItem>
+                        <DropdownMenuItem className="text-red-500"><Trash2 className="mr-2 h-4 w-4" /> 删除</DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>新增兑换商品</DialogTitle>
+            <DialogDescription>配置商品信息、积分价格和库存数量。</DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label className="text-right">商品名称</Label>
+              <Input className="col-span-3" placeholder="如: 多肉植物盆栽" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label className="text-right">兑换积分</Label>
+              <Input className="col-span-3" type="number" placeholder="500" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label className="text-right">库存</Label>
+              <Input className="col-span-3" type="number" placeholder="100" />
+            </div>
+            <div className="grid grid-cols-4 items-start gap-4">
+              <Label className="text-right pt-2">描述</Label>
+              <Textarea className="col-span-3" placeholder="商品描述..." rows={3} />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDialogOpen(false)}>取消</Button>
+            <Button onClick={() => setDialogOpen(false)}>保存</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}