feat:react搞好了,开始搞php

This commit is contained in:
许永平
2025-07-03 16:31:19 +08:00
parent 932cdceab3
commit 32bd56d502
5 changed files with 105 additions and 114 deletions

View File

@@ -1,4 +0,0 @@
{
"presets": ["next/babel"]
}

View File

@@ -1,105 +0,0 @@
"use client";
import React, { useState } from "react";
import { ExcelImporter } from "@/components/ExcelImporter";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Code } from "@/components/ui/code";
import { Separator } from "@/components/ui/separator";
interface ImportedData {
mobile: number;
from: string;
alias: string;
}
export default function ExcelImportDemo() {
const [importedData, setImportedData] = useState<ImportedData[]>([]);
const [showData, setShowData] = useState(false);
const handleImport = (data: ImportedData[]) => {
setImportedData(data);
setShowData(true);
console.log("导入的数据:", data);
};
return (
<div className="container mx-auto py-10 space-y-8">
<div className="flex flex-col space-y-2">
<h1 className="text-2xl font-bold">Excel导入演示</h1>
<p className="text-gray-500">
Excel文件导入功能Excel中的手机号码
</p>
</div>
<Separator />
<div className="grid gap-8 md:grid-cols-2">
<div>
<h2 className="text-xl font-semibold mb-4">Excel文件</h2>
<ExcelImporter onImport={handleImport} />
</div>
<div>
<h2 className="text-xl font-semibold mb-4"></h2>
<Card className="p-4">
{importedData.length > 0 ? (
<div className="space-y-4">
<p> {importedData.length} </p>
<div className="bg-gray-100 p-4 rounded-md overflow-auto max-h-[400px]">
<pre className="text-sm">
{JSON.stringify(importedData, null, 2)}
</pre>
</div>
<div className="flex justify-end">
<Button
variant={showData ? "default" : "outline"}
onClick={() => setShowData(!showData)}
>
{showData ? "隐藏数据" : "显示数据"}
</Button>
</div>
</div>
) : (
<div className="text-center py-8 text-gray-500">
<p></p>
<p className="text-sm mt-2">Excel文件并点击确认导入</p>
</div>
)}
</Card>
</div>
</div>
<Separator />
<div className="space-y-4">
<h2 className="text-xl font-semibold">使</h2>
<div className="grid gap-6 md:grid-cols-2">
<Card className="p-4 space-y-2">
<h3 className="font-medium"></h3>
<ul className="list-disc pl-5 space-y-1 text-sm">
<li>.xlsx和.xls格式的Excel文件</li>
<li>"手机号码""来源""微信号"</li>
<li></li>
<li>"确认导入"</li>
</ul>
</Card>
<Card className="p-4 space-y-2">
<h3 className="font-medium"></h3>
<Code className="text-xs">
{`{
mobile: "手机号码", // 必填
from: "来源", // 选填
alias: "微信号" // 选填
}`}
</Code>
<p className="text-sm text-gray-500">
</p>
</Card>
</div>
</div>
</div>
);
}

View File

@@ -1,5 +0,0 @@
import { NextResponse } from "next/server"
export async function GET(request: Request) {
return NextResponse.json({ message: "场景获客API" })
}

View File

@@ -64,6 +64,7 @@
"tailwind-merge": "^2.5.5",
"tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.6",
"xlsx": "^0.18.5",
"zod": "^3.24.1"
},
"devDependencies": {
@@ -2613,6 +2614,15 @@
"@types/react": "^19.0.0"
}
},
"node_modules/adler-32": {
"version": "1.3.1",
"resolved": "https://registry.npmmirror.com/adler-32/-/adler-32-1.3.1.tgz",
"integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/align-text": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
@@ -2951,6 +2961,19 @@
"node": ">=0.10.0"
}
},
"node_modules/cfb": {
"version": "1.2.2",
"resolved": "https://registry.npmmirror.com/cfb/-/cfb-1.2.2.tgz",
"integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
"license": "Apache-2.0",
"dependencies": {
"adler-32": "~1.3.0",
"crc-32": "~1.2.0"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
@@ -3062,6 +3085,15 @@
"react-dom": "^18 || ^19 || ^19.0.0-rc"
}
},
"node_modules/codepage": {
"version": "1.15.0",
"resolved": "https://registry.npmmirror.com/codepage/-/codepage-1.15.0.tgz",
"integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/color": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -3119,6 +3151,18 @@
"resolved": "https://registry.npmjs.org/contour_plot/-/contour_plot-0.0.1.tgz",
"integrity": "sha512-Nil2HI76Xux6sVGORvhSS8v66m+/h5CwFkBJDO+U5vWaMdNC0yXNCsGDPbzPhvqOEU5koebhdEvD372LI+IyLw=="
},
"node_modules/crc-32": {
"version": "1.2.2",
"resolved": "https://registry.npmmirror.com/crc-32/-/crc-32-1.2.2.tgz",
"integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
"license": "Apache-2.0",
"bin": {
"crc32": "bin/crc32.njs"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/cross-spawn": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3961,6 +4005,15 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/frac": {
"version": "1.1.2",
"resolved": "https://registry.npmmirror.com/frac/-/frac-1.1.2.tgz",
"integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/fraction.js": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -6131,6 +6184,18 @@
"source-map": "0.1.32"
}
},
"node_modules/ssf": {
"version": "0.11.2",
"resolved": "https://registry.npmmirror.com/ssf/-/ssf-0.11.2.tgz",
"integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
"license": "Apache-2.0",
"dependencies": {
"frac": "~1.1.2"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/streamsearch": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -6936,6 +7001,24 @@
"node": ">= 0.8.0"
}
},
"node_modules/wmf": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/wmf/-/wmf-1.0.2.tgz",
"integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/word": {
"version": "0.3.0",
"resolved": "https://registry.npmmirror.com/word/-/word-0.3.0.tgz",
"integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/wordwrap": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
@@ -7079,6 +7162,27 @@
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
},
"node_modules/xlsx": {
"version": "0.18.5",
"resolved": "https://registry.npmmirror.com/xlsx/-/xlsx-0.18.5.tgz",
"integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
"license": "Apache-2.0",
"dependencies": {
"adler-32": "~1.3.0",
"cfb": "~1.2.1",
"codepage": "~1.15.0",
"crc-32": "~1.2.1",
"ssf": "~0.11.2",
"wmf": "~1.0.1",
"word": "~0.3.0"
},
"bin": {
"xlsx": "bin/xlsx.njs"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/yaml": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",

View File

@@ -65,6 +65,7 @@
"tailwind-merge": "^2.5.5",
"tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.6",
"xlsx": "^0.18.5",
"zod": "^3.24.1"
},
"devDependencies": {