refactor: restructure navigation and module layout
Reorganize navigation and module structure based on new requirements. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
192
components/dialogs/publish-api-dialog.tsx
Normal file
192
components/dialogs/publish-api-dialog.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Code, Plus, X } from "lucide-react"
|
||||
|
||||
interface PublishApiDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
}
|
||||
|
||||
export function PublishApiDialog({ open, onOpenChange }: PublishApiDialogProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
description: "",
|
||||
endpoint: "/api/v1/",
|
||||
method: "GET",
|
||||
params: [] as { name: string; type: string; required: boolean; desc: string }[],
|
||||
rateLimit: "1000",
|
||||
})
|
||||
|
||||
const addParam = () => {
|
||||
setFormData({
|
||||
...formData,
|
||||
params: [...formData.params, { name: "", type: "string", required: false, desc: "" }],
|
||||
})
|
||||
}
|
||||
|
||||
const removeParam = (index: number) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
params: formData.params.filter((_, i) => i !== index),
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
console.log("发布API:", formData)
|
||||
onOpenChange(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Code className="w-5 h-5" />
|
||||
发布API服务
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4 max-h-[60vh] overflow-y-auto">
|
||||
<div className="space-y-2">
|
||||
<Label>API名称</Label>
|
||||
<Input
|
||||
placeholder="例如：用户画像查询API"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>API描述</Label>
|
||||
<Textarea
|
||||
placeholder="描述API的功能和用途"
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="col-span-2 space-y-2">
|
||||
<Label>Endpoint</Label>
|
||||
<Input
|
||||
placeholder="/api/v1/..."
|
||||
value={formData.endpoint}
|
||||
onChange={(e) => setFormData({ ...formData, endpoint: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Method</Label>
|
||||
<Select value={formData.method} onValueChange={(value) => setFormData({ ...formData, method: value })}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="GET">GET</SelectItem>
|
||||
<SelectItem value="POST">POST</SelectItem>
|
||||
<SelectItem value="PUT">PUT</SelectItem>
|
||||
<SelectItem value="DELETE">DELETE</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>请求参数</Label>
|
||||
<Button variant="outline" size="sm" onClick={addParam}>
|
||||
<Plus className="w-3 h-3 mr-1" />
|
||||
添加参数
|
||||
</Button>
|
||||
</div>
|
||||
{formData.params.length === 0 ? (
|
||||
<div className="p-4 border border-dashed rounded-lg text-center text-gray-500 text-sm">
|
||||
点击"添加参数"定义API参数
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{formData.params.map((param, index) => (
|
||||
<div key={index} className="flex items-center gap-2 p-3 bg-gray-50 rounded-lg">
|
||||
<Input
|
||||
className="w-28"
|
||||
placeholder="参数名"
|
||||
value={param.name}
|
||||
onChange={(e) => {
|
||||
const newParams = [...formData.params]
|
||||
newParams[index].name = e.target.value
|
||||
setFormData({ ...formData, params: newParams })
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
value={param.type}
|
||||
onValueChange={(value) => {
|
||||
const newParams = [...formData.params]
|
||||
newParams[index].type = value
|
||||
setFormData({ ...formData, params: newParams })
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-24">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="string">string</SelectItem>
|
||||
<SelectItem value="number">number</SelectItem>
|
||||
<SelectItem value="boolean">boolean</SelectItem>
|
||||
<SelectItem value="array">array</SelectItem>
|
||||
<SelectItem value="object">object</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
variant={param.required ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const newParams = [...formData.params]
|
||||
newParams[index].required = !param.required
|
||||
setFormData({ ...formData, params: newParams })
|
||||
}}
|
||||
>
|
||||
{param.required ? "必填" : "可选"}
|
||||
</Button>
|
||||
<Input
|
||||
className="flex-1"
|
||||
placeholder="参数说明"
|
||||
value={param.desc}
|
||||
onChange={(e) => {
|
||||
const newParams = [...formData.params]
|
||||
newParams[index].desc = e.target.value
|
||||
setFormData({ ...formData, params: newParams })
|
||||
}}
|
||||
/>
|
||||
<Button variant="ghost" size="sm" onClick={() => removeParam(index)}>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>速率限制（次/分钟）</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={formData.rateLimit}
|
||||
onChange={(e) => setFormData({ ...formData, rateLimit: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleSubmit}>发布API</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user