first commit

app/move-car/display/page.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+
+import { toast } from "sonner";
+import { Car, Phone, Bell, Info } from "lucide-react";
+
+export default function MoveCarDisplay() {
+  const [plateNumber, setPlateNumber] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [token, setToken] = useState("");
+  const [uid, setUid] = useState("");
+  const [newEnergy, setNewEnergy] = useState(false);
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    setPlateNumber(urlParams.get("plateNumber") || "");
+    setPhoneNumber(urlParams.get("phoneNumber") || "");
+    setToken(urlParams.get("token") || "");
+    setUid(urlParams.get("uid") || "");
+    setNewEnergy(urlParams.get("new") === "true");
+  }, []);
+
+  const notifyOwner = () => {
+    const currentTime = new Date().getTime();
+    const lastNotifyTimeKey = "lastNotifyTime" + plateNumber;
+    const lastNotifyTime = localStorage.getItem(lastNotifyTimeKey);
+    const timeDifference = lastNotifyTime
+      ? (currentTime - parseInt(lastNotifyTime)) / 1000
+      : 0;
+
+    if (lastNotifyTime && timeDifference < 60) {
+      toast.warning("您已发送过通知，请1分钟后再次尝试。");
+      return;
+    }
+
+    const promise = fetch("https://wxpusher.zjiecode.com/api/send/message", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        appToken: token,
+        content: "您好，有人需要您挪车，请及时处理。",
+        contentType: 1,
+        uids: [uid],
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.code === 1000) {
+          localStorage.setItem(lastNotifyTimeKey, currentTime.toString());
+          return "通知已发送！";
+        } else {
+          throw new Error("通知发送失败");
+        }
+      });
+      
+    toast.promise(promise, {
+      loading: '正在发送通知...',
+      success: (data) => data,
+      error: '通知发送失败，请稍后重试',
+    });
+  };
+
+  const callNumber = () => {
+    window.location.href = "tel:" + phoneNumber;
+  };
+
+  return (
+    <div className="space-y-4 max-w-md mx-auto pt-4 px-2">
+      {/* 车牌展示区域 */}
+      <div className="flex justify-center py-2">
+        <div
+          className={`relative flex h-32 w-full items-center justify-center overflow-hidden rounded-lg border-[3px] shadow-xl ${
+            newEnergy
+              ? "border-black/80 bg-linear-to-b from-[#F0F3F5] to-[#42C063] text-black"
+              : "border-white bg-[#003399] text-white"
+          }`}
+        >
+           {/* 装饰性反光效果 */}
+          <div className="pointer-events-none absolute inset-0 bg-linear-to-br from-white/20 to-transparent opacity-50" />
+          
+          {/* 车牌边框内饰线 (仅蓝牌显示) */}
+          {!newEnergy && (
+             <div className="absolute inset-1 rounded-md border border-white/50" />
+          )}
+
+          <div className="relative z-10 flex items-center gap-1 font-mono text-5xl font-bold tracking-widest">
+            <span>{plateNumber.slice(0, 2)}</span>
+            {newEnergy ? (
+                 <span className="mx-1 h-2 w-2 rounded-full bg-current opacity-20" /> 
+            ) : (
+                 <span className="mx-2 h-2 w-2 rounded-full bg-current opacity-80" />
+            )}
+            <span>{plateNumber.slice(2)}</span>
+          </div>
+          
+           {/* 新能源标志水印 (仅绿牌显示) */}
+           {newEnergy && (
+               <div className="absolute -bottom-6 -right-6 rotate-12 opacity-10">
+                   <Car className="h-24 w-24" />
+               </div>
+           )}
+        </div>
+      </div>
+
+        {/* 车辆信息 */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium flex items-center gap-2 text-muted-foreground">
+              <Info className="h-4 w-4" />
+              车辆信息
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-3 gap-2 text-sm">
+              <div className="text-muted-foreground">临时停靠</div>
+              <div className="col-span-2 font-medium">请多关照</div>
+              
+              <div className="text-muted-foreground">车牌号码</div>
+              <div className="col-span-2 font-medium font-mono">{plateNumber}</div>
+              
+              <div className="text-muted-foreground">联系电话</div>
+              <div className="col-span-2 font-medium font-mono">{phoneNumber}</div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 操作按钮 */}
+        <Card className="border-t-4 border-t-primary/20">
+            <CardHeader>
+                <CardTitle className="text-center">联系车主</CardTitle>
+            </CardHeader>
+          <CardContent className="space-y-3">
+            {uid && token && (
+              <Button
+                size="lg"
+                className={`w-full gap-2 text-lg h-14 ${
+                    newEnergy 
+                    ? "bg-emerald-600 hover:bg-emerald-700 shadow-emerald-200 dark:shadow-none" 
+                    : "bg-blue-600 hover:bg-blue-700 shadow-blue-200 dark:shadow-none"
+                } shadow-xl transition-all hover:scale-[1.02] active:scale-[0.98]`}
+                onClick={notifyOwner}
+              >
+                <Bell className="h-5 w-5" />
+                微信通知车主
+              </Button>
+            )}
+
+            <Button
+              size="lg"
+              variant={uid && token ? "outline" : "default"}
+              className={`w-full gap-2 text-lg h-14 ${!(uid && token) ? (newEnergy 
+                    ? "bg-emerald-600 hover:bg-emerald-700 shadow-emerald-200 dark:shadow-none shadow-xl transition-all hover:scale-[1.02] active:scale-[0.98]" 
+                    : "bg-blue-600 hover:bg-blue-700 shadow-blue-200 dark:shadow-none shadow-xl transition-all hover:scale-[1.02] active:scale-[0.98]") : ""}`}
+              onClick={callNumber}
+            >
+              <Phone className="h-5 w-5" />
+              一键拨打电话
+            </Button>
+          </CardContent>
+        </Card>
+
+        {/* 温馨提示 */}
+        <div className="px-4 py-2 bg-muted/50 rounded-lg text-xs text-center text-muted-foreground">
+           💡 温馨提示：请文明用车，合理停放。如需挪车，请耐心等待车主回应。
+        </div>
+      </div>
+  );
+}

app/move-car/page.tsx

@@ -0,0 +1,347 @@
+"use client";
+
+import { useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { QRCodeSVG } from "qrcode.react";
+import { Car, MessageSquare, QrCode, Info, Copy, Zap, RotateCcw } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { toast } from "sonner";
+
+
+const formSchema = z.object({
+  plateNumber: z.string().min(1, "请输入车牌号"),
+  phoneNumber: z
+    .string()
+    .min(1, "请输入联系电话")
+    .regex(/^1[3-9]\d{9}$/, "请输入有效的手机号"),
+  token: z.string(),
+  uid: z.string(),
+  newEnergy: z.boolean(),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export default function MoveCar() {
+  const [generatedUrl, setGeneratedUrl] = useState("");
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      plateNumber: "",
+      phoneNumber: "",
+      token: "",
+      uid: "",
+      newEnergy: false,
+    },
+  });
+
+  const onSubmit = (values: FormValues) => {
+    const url = new URL(window.location.href + "/display");
+    url.searchParams.append("plateNumber", values.plateNumber);
+    url.searchParams.append("phoneNumber", values.phoneNumber);
+    if (values.token) url.searchParams.append("token", values.token);
+    if (values.uid) url.searchParams.append("uid", values.uid);
+    if (values.newEnergy) url.searchParams.append("new", "true");
+    setGeneratedUrl(url.toString());
+    toast.success("码牌生成成功");
+  };
+
+  const copyUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(generatedUrl);
+      toast.success("链接已复制到剪贴板");
+    } catch {
+      toast.error("复制失败");
+    }
+  };
+
+  const resetForm = () => {
+    form.reset();
+    setGeneratedUrl("");
+  };
+
+  return (
+    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
+      {/* Page Header */}
+      <div className="flex items-center space-x-4 border-b pb-4">
+        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-amber-400 to-amber-600 shadow-lg">
+          <Car className="h-6 w-6 text-white" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">挪车码牌生成器</h1>
+          <p className="text-muted-foreground">
+            生成专属挪车码牌，让他人轻松联系您，支持微信推送通知
+          </p>
+        </div>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Left: Form */}
+        <div>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2 text-base">
+                    <Car className="h-4 w-4" />
+                    车辆信息
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="plateNumber"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>车牌号</FormLabel>
+                        <FormControl>
+                          <Input placeholder="如：京A12345" {...field} className="text-lg" />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="phoneNumber"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>联系电话</FormLabel>
+                        <FormControl>
+                          <Input placeholder="如：13800138000" {...field} className="text-lg" />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="newEnergy"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4 shadow-sm">
+                        <div className="space-y-0.5">
+                          <FormLabel className="text-base flex items-center gap-2">
+                            <Zap className="h-4 w-4 text-emerald-500" />
+                            新能源车辆
+                          </FormLabel>
+                          <FormDescription>
+                            勾选此项将在码牌上显示新能源标识
+                          </FormDescription>
+                        </div>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2 text-base">
+                    <MessageSquare className="h-4 w-4" />
+                    微信推送设置（可选）
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <Alert className="bg-blue-50/50 dark:bg-blue-950/20 text-blue-900 dark:text-blue-200 border-blue-200 dark:border-blue-800">
+                    <Info className="h-4 w-4" />
+                    <AlertTitle>提示</AlertTitle>
+                    <AlertDescription>
+                      配置微信推送后，当有人扫码时您将收到通知
+                    </AlertDescription>
+                  </Alert>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <FormField
+                      control={form.control}
+                      name="token"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="flex items-center gap-1">
+                            Token
+                            <TooltipProvider>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <Info className="h-3 w-3 text-muted-foreground" />
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p>WxPusher的应用Token</p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </TooltipProvider>
+                          </FormLabel>
+                          <FormControl>
+                            <Input placeholder="应用Token" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name="uid"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="flex items-center gap-1">
+                            UID
+                            <TooltipProvider>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <Info className="h-3 w-3 text-muted-foreground" />
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p>用户的UID</p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </TooltipProvider>
+                          </FormLabel>
+                          <FormControl>
+                            <Input placeholder="用户UID" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                  <div className="text-xs text-muted-foreground text-right">
+                    需要微信推送？
+                    <a
+                      href="https://wxpusher.zjiecode.com/docs/#/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary hover:underline ml-1"
+                    >
+                      查看配置文档 →
+                    </a>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <div className="flex gap-4">
+                <Button type="submit" size="lg" className="flex-1 gap-2">
+                  <QrCode className="h-4 w-4" />
+                  生成挪车码牌
+                </Button>
+                <Button type="button" variant="outline" size="lg" onClick={resetForm} className="gap-2">
+                  <RotateCcw className="h-4 w-4" />
+                  重置
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+
+        {/* Right: Preview */}
+        <div>
+          <Card className="h-full flex flex-col">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-base">
+                <QrCode className="h-4 w-4" />
+                {generatedUrl ? "生成成功" : "预览区域"}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="flex-1 flex flex-col justify-center">
+              {generatedUrl ? (
+                <div className="space-y-6">
+                  <Alert variant="default" className="border-emerald-200 bg-emerald-50 dark:bg-emerald-950/20 text-emerald-900 dark:text-emerald-200">
+                    <Info className="h-4 w-4" />
+                    <AlertTitle>码牌生成成功！</AlertTitle>
+                    <AlertDescription>
+                      扫描二维码或点击链接查看码牌
+                    </AlertDescription>
+                  </Alert>
+
+                  <div className="flex flex-col items-center gap-4 p-8 bg-white rounded-xl shadow-sm border mx-auto">
+                    <QRCodeSVG value={generatedUrl} size={200} />
+                    <span className="text-sm text-muted-foreground">扫码查看码牌</span>
+                  </div>
+
+                  <div className="space-y-2">
+                    <span className="text-sm font-medium">码牌链接：</span>
+                    <div className="p-3 bg-muted rounded-md break-all text-xs font-mono">
+                      {generatedUrl}
+                    </div>
+                    <Button onClick={copyUrl} className="w-full gap-2" variant="secondary">
+                      <Copy className="h-4 w-4" />
+                      复制链接
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex flex-col items-center justify-center py-12 text-muted-foreground space-y-4">
+                  <QrCode className="h-16 w-16 opacity-20" />
+                  <p>填写完信息后，二维码将在这里显示</p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Info Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <span className="text-xl">💡</span> 使用说明
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-6 md:grid-cols-3">
+            <div className="space-y-2">
+              <h4 className="font-medium text-sm">功能特点</h4>
+              <ul className="list-disc pl-4 text-xs text-muted-foreground space-y-1">
+                <li>快速生成专属挪车码牌</li>
+                <li>支持新能源车辆标识</li>
+                <li>可选微信推送功能</li>
+                <li>移动端友好的码牌展示</li>
+              </ul>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium text-sm">使用步骤</h4>
+              <ol className="list-decimal pl-4 text-xs text-muted-foreground space-y-1">
+                <li>填写车牌号和联系电话</li>
+                <li>选择是否为新能源车辆</li>
+                <li>可选配置微信推送</li>
+                <li>点击生成按钮获取码牌</li>
+                <li>将二维码放置在车内</li>
+              </ol>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium text-sm">微信推送配置</h4>
+              <ul className="list-disc pl-4 text-xs text-muted-foreground space-y-1">
+                <li>访问 WxPusher 官网注册应用</li>
+                <li>获取应用 Token 和用户 UID</li>
+                <li>关注微信公众号绑定账号</li>
+                <li>配置后可收到扫码通知</li>
+              </ul>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}