323 lines
12 KiB
TypeScript
323 lines
12 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||
import { ShoppingBag, Database, BarChart, Settings } from "lucide-react"
|
||
|
||
interface StrategySelectionProps {
|
||
formData: any
|
||
updateFormData: (data: any) => void
|
||
onNext: () => void
|
||
onBack: () => void
|
||
}
|
||
|
||
export function StrategySelection({ formData, updateFormData, onNext, onBack }: StrategySelectionProps) {
|
||
const [strategyType, setStrategyType] = useState<string>(formData.strategyType || "")
|
||
const [jdConfig, setJdConfig] = useState({
|
||
username: formData.strategyConfig?.username || "",
|
||
password: formData.strategyConfig?.password || "",
|
||
memberLevel: formData.strategyConfig?.memberLevel || "all",
|
||
})
|
||
const [yisiConfig, setYisiConfig] = useState({
|
||
apiKey: formData.strategyConfig?.apiKey || "",
|
||
apiEndpoint: formData.strategyConfig?.apiEndpoint || "https://api.yisi.com/user-profile",
|
||
analysisDepth: formData.strategyConfig?.analysisDepth || "basic",
|
||
})
|
||
const [dbConfig, setDbConfig] = useState({
|
||
connectionString: formData.strategyConfig?.connectionString || "",
|
||
tableName: formData.strategyConfig?.tableName || "",
|
||
matchFields: formData.strategyConfig?.matchFields || "phone,wechatId",
|
||
})
|
||
const [customConfig, setCustomConfig] = useState({
|
||
name: formData.strategyConfig?.name || "",
|
||
description: formData.strategyConfig?.description || "",
|
||
})
|
||
|
||
const getStrategyName = () => {
|
||
switch (strategyType) {
|
||
case "jd":
|
||
return "京东会员识别"
|
||
case "yisi":
|
||
return "易思用户画像"
|
||
case "database":
|
||
return "数据库客户匹配"
|
||
case "custom":
|
||
return customConfig.name || "自定义策略"
|
||
default:
|
||
return ""
|
||
}
|
||
}
|
||
|
||
const getStrategyConfig = () => {
|
||
switch (strategyType) {
|
||
case "jd":
|
||
return jdConfig
|
||
case "yisi":
|
||
return yisiConfig
|
||
case "database":
|
||
return dbConfig
|
||
case "custom":
|
||
return customConfig
|
||
default:
|
||
return {}
|
||
}
|
||
}
|
||
|
||
const handleContinue = () => {
|
||
updateFormData({
|
||
strategyType,
|
||
strategyName: getStrategyName(),
|
||
strategyConfig: getStrategyConfig(),
|
||
})
|
||
onNext()
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h2 className="text-xl font-semibold mb-1">选择优化策略</h2>
|
||
<p className="text-gray-500 text-sm">选择用于流量池优化的策略插件</p>
|
||
</div>
|
||
|
||
<RadioGroup
|
||
value={strategyType}
|
||
onValueChange={setStrategyType}
|
||
className="grid grid-cols-1 md:grid-cols-2 gap-4"
|
||
>
|
||
<div>
|
||
<RadioGroupItem value="jd" id="jd" className="peer sr-only" />
|
||
<Label
|
||
htmlFor="jd"
|
||
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-blue-500 [&:has([data-state=checked])]:border-blue-500 cursor-pointer"
|
||
>
|
||
<ShoppingBag className="mb-3 h-6 w-6 text-orange-500" />
|
||
<div className="text-center">
|
||
<p className="font-medium">京东会员识别</p>
|
||
<p className="text-sm text-gray-500">识别流量池中的京东会员用户</p>
|
||
</div>
|
||
</Label>
|
||
</div>
|
||
|
||
<div>
|
||
<RadioGroupItem value="yisi" id="yisi" className="peer sr-only" />
|
||
<Label
|
||
htmlFor="yisi"
|
||
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-blue-500 [&:has([data-state=checked])]:border-blue-500 cursor-pointer"
|
||
>
|
||
<BarChart className="mb-3 h-6 w-6 text-blue-500" />
|
||
<div className="text-center">
|
||
<p className="font-medium">易思接口</p>
|
||
<p className="text-sm text-gray-500">通过易思API分析用户画像</p>
|
||
</div>
|
||
</Label>
|
||
</div>
|
||
|
||
<div>
|
||
<RadioGroupItem value="database" id="database" className="peer sr-only" />
|
||
<Label
|
||
htmlFor="database"
|
||
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-blue-500 [&:has([data-state=checked])]:border-blue-500 cursor-pointer"
|
||
>
|
||
<Database className="mb-3 h-6 w-6 text-green-500" />
|
||
<div className="text-center">
|
||
<p className="font-medium">数据库匹配</p>
|
||
<p className="text-sm text-gray-500">与现有客户数据库进行匹配</p>
|
||
</div>
|
||
</Label>
|
||
</div>
|
||
|
||
<div>
|
||
<RadioGroupItem value="custom" id="custom" className="peer sr-only" />
|
||
<Label
|
||
htmlFor="custom"
|
||
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-blue-500 [&:has([data-state=checked])]:border-blue-500 cursor-pointer"
|
||
>
|
||
<Settings className="mb-3 h-6 w-6 text-purple-500" />
|
||
<div className="text-center">
|
||
<p className="font-medium">自定义策略</p>
|
||
<p className="text-sm text-gray-500">创建自定义的优化策略</p>
|
||
</div>
|
||
</Label>
|
||
</div>
|
||
</RadioGroup>
|
||
|
||
{strategyType === "jd" && (
|
||
<Card>
|
||
<CardContent className="p-4 space-y-4">
|
||
<h3 className="font-medium">京东会员识别配置</h3>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="jd-username">京东账号</Label>
|
||
<Input
|
||
id="jd-username"
|
||
value={jdConfig.username}
|
||
onChange={(e) => setJdConfig({ ...jdConfig, username: e.target.value })}
|
||
placeholder="输入京东账号"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="jd-password">京东密码</Label>
|
||
<Input
|
||
id="jd-password"
|
||
type="password"
|
||
value={jdConfig.password}
|
||
onChange={(e) => setJdConfig({ ...jdConfig, password: e.target.value })}
|
||
placeholder="输入京东密码"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="jd-level">会员等级筛选</Label>
|
||
<select
|
||
id="jd-level"
|
||
value={jdConfig.memberLevel}
|
||
onChange={(e) => setJdConfig({ ...jdConfig, memberLevel: e.target.value })}
|
||
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background"
|
||
>
|
||
<option value="all">所有会员</option>
|
||
<option value="plus">PLUS会员</option>
|
||
<option value="vip">VIP会员</option>
|
||
<option value="regular">普通会员</option>
|
||
</select>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{strategyType === "yisi" && (
|
||
<Card>
|
||
<CardContent className="p-4 space-y-4">
|
||
<h3 className="font-medium">易思接口配置</h3>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="yisi-apikey">API密钥</Label>
|
||
<Input
|
||
id="yisi-apikey"
|
||
value={yisiConfig.apiKey}
|
||
onChange={(e) => setYisiConfig({ ...yisiConfig, apiKey: e.target.value })}
|
||
placeholder="输入易思API密钥"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="yisi-endpoint">API端点</Label>
|
||
<Input
|
||
id="yisi-endpoint"
|
||
value={yisiConfig.apiEndpoint}
|
||
onChange={(e) => setYisiConfig({ ...yisiConfig, apiEndpoint: e.target.value })}
|
||
placeholder="输入API端点URL"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="yisi-depth">分析深度</Label>
|
||
<select
|
||
id="yisi-depth"
|
||
value={yisiConfig.analysisDepth}
|
||
onChange={(e) => setYisiConfig({ ...yisiConfig, analysisDepth: e.target.value })}
|
||
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background"
|
||
>
|
||
<option value="basic">基础分析</option>
|
||
<option value="standard">标准分析</option>
|
||
<option value="deep">深度分析</option>
|
||
</select>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{strategyType === "database" && (
|
||
<Card>
|
||
<CardContent className="p-4 space-y-4">
|
||
<h3 className="font-medium">数据库匹配配置</h3>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="db-connection">连接字符串</Label>
|
||
<Input
|
||
id="db-connection"
|
||
value={dbConfig.connectionString}
|
||
onChange={(e) => setDbConfig({ ...dbConfig, connectionString: e.target.value })}
|
||
placeholder="输入数据库连接字符串"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="db-table">表名</Label>
|
||
<Input
|
||
id="db-table"
|
||
value={dbConfig.tableName}
|
||
onChange={(e) => setDbConfig({ ...dbConfig, tableName: e.target.value })}
|
||
placeholder="输入表名"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="db-fields">匹配字段</Label>
|
||
<Input
|
||
id="db-fields"
|
||
value={dbConfig.matchFields}
|
||
onChange={(e) => setDbConfig({ ...dbConfig, matchFields: e.target.value })}
|
||
placeholder="输入匹配字段，用逗号分隔"
|
||
/>
|
||
<p className="text-xs text-gray-500">多个字段用逗号分隔，如：phone,wechatId</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{strategyType === "custom" && (
|
||
<Card>
|
||
<CardContent className="p-4 space-y-4">
|
||
<h3 className="font-medium">自定义策略配置</h3>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="custom-name">策略名称</Label>
|
||
<Input
|
||
id="custom-name"
|
||
value={customConfig.name}
|
||
onChange={(e) => setCustomConfig({ ...customConfig, name: e.target.value })}
|
||
placeholder="输入策略名称"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="custom-desc">策略描述</Label>
|
||
<textarea
|
||
id="custom-desc"
|
||
value={customConfig.description}
|
||
onChange={(e) => setCustomConfig({ ...customConfig, description: e.target.value })}
|
||
placeholder="输入策略描述"
|
||
className="w-full min-h-[100px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background"
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
<div className="flex justify-between pt-4">
|
||
<Button variant="outline" onClick={onBack}>
|
||
返回
|
||
</Button>
|
||
<Button
|
||
onClick={handleContinue}
|
||
disabled={
|
||
!strategyType ||
|
||
(strategyType === "jd" && (!jdConfig.username || !jdConfig.password)) ||
|
||
(strategyType === "yisi" && !yisiConfig.apiKey) ||
|
||
(strategyType === "database" && (!dbConfig.connectionString || !dbConfig.tableName)) ||
|
||
(strategyType === "custom" && !customConfig.name)
|
||
}
|
||
>
|
||
继续
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|