feat: add shop dashboard order overview, income stats, and rule settings pages

2026-02-20 23:04:38 +08:00
parent 1362a29755
commit 7e632ce092
4 changed files with 386 additions and 1 deletions
@@ -0,0 +1,143 @@
+"use client"
+
+import { Save } from "lucide-react"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { mockShops } from "@/lib/mock-data"
+
+export default function ShopRulesPage() {
+  const shop = mockShops[0]
+
+  const [allowMultiShop, setAllowMultiShop] = useState(shop.allowMultiShop)
+  const [allowIndependentOrders, setAllowIndependentOrders] = useState(shop.allowIndependentOrders)
+  const [dispatchMode, setDispatchMode] = useState(shop.dispatchMode)
+  const [commissionType, setCommissionType] = useState(shop.commissionType)
+  const [commissionValue, setCommissionValue] = useState(shop.commissionValue.toString())
+
+  const handleSave = () => {
+    alert("设置已保存")
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">规则设置</h1>
+        <Button onClick={handleSave}>
+          <Save className="mr-2 h-4 w-4" />
+          保存设置
+        </Button>
+      </div>
+
+      <div className="grid gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">员工权限</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="flex items-center justify-between space-x-2">
+              <Label htmlFor="allow-multi-shop" className="flex flex-col space-y-1">
+                <span>允许员工同时挂靠其他店铺</span>
+                <span className="font-normal text-sm text-muted-foreground">
+                  开启后，员工可以同时加入其他店铺接单
+                </span>
+              </Label>
+              <Switch
+                id="allow-multi-shop"
+                checked={allowMultiShop}
+                onCheckedChange={setAllowMultiShop}
+              />
+            </div>
+            <div className="flex items-center justify-between space-x-2">
+              <Label htmlFor="allow-independent" className="flex flex-col space-y-1">
+                <span>允许员工独立接单</span>
+                <span className="font-normal text-sm text-muted-foreground">
+                  开启后，员工可以在店铺外独立接单
+                </span>
+              </Label>
+              <Switch
+                id="allow-independent"
+                checked={allowIndependentOrders}
+                onCheckedChange={setAllowIndependentOrders}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">派单设置</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label>派单模式</Label>
+              <Select
+                value={dispatchMode}
+                onValueChange={(v: "manual" | "auto") => setDispatchMode(v)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="manual">手动指派</SelectItem>
+                  <SelectItem value="auto">自动匹配</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-sm text-muted-foreground">
+                手动指派需要店主确认分配；自动匹配将根据打手状态自动分单
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">抽成设置</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label>抽成方式</Label>
+                <Select
+                  value={commissionType}
+                  onValueChange={(v: "fixed" | "percentage") => setCommissionType(v)}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="fixed">按单固定金额</SelectItem>
+                    <SelectItem value="percentage">百分比抽成</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label>抽成数值</Label>
+                <div className="relative">
+                  <Input
+                    type="number"
+                    value={commissionValue}
+                    onChange={(e) => setCommissionValue(e.target.value)}
+                  />
+                  <div className="absolute right-3 top-2.5 text-sm text-muted-foreground">
+                    {commissionType === "percentage" ? "%" : "元"}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}