284 lines
10 KiB
TypeScript
284 lines
10 KiB
TypeScript
|
"use client"
|
|||
|
|
|
|||
|
|
import type React from "react"
|
|||
|
|
|
|||
|
|
import { useState } from "react"
|
|||
|
|
import { Button } from "@/components/ui/button"
|
|||
|
|
import { Input } from "@/components/ui/input"
|
|||
|
|
import { Label } from "@/components/ui/label"
|
|||
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
|||
|
|
import { Badge } from "@/components/ui/badge"
|
|||
|
|
import { X, Plus } from "lucide-react"
|
|||
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|||
|
|
|
|||
|
|
interface AnalysisSettingsProps {
|
|||
|
|
formData: any
|
|||
|
|
updateFormData: (data: any) => void
|
|||
|
|
onNext: () => void
|
|||
|
|
onBack: () => void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function AnalysisSettings({ formData, updateFormData, onNext, onBack }: AnalysisSettingsProps) {
|
|||
|
|
const [analysisType, setAnalysisType] = useState<string>(formData.analysisType || "both")
|
|||
|
|
const [keyword, setKeyword] = useState("")
|
|||
|
|
const [promptWord, setPromptWord] = useState("")
|
|||
|
|
const [keywords, setKeywords] = useState<string[]>(formData.keywords || [])
|
|||
|
|
const [promptWords, setPromptWords] = useState<string[]>(formData.promptWords || [])
|
|||
|
|
const [activeTab, setActiveTab] = useState("friends")
|
|||
|
|
|
|||
|
|
const handleAddKeyword = () => {
|
|||
|
|
if (keyword.trim() && !keywords.includes(keyword.trim())) {
|
|||
|
|
const newKeywords = [...keywords, keyword.trim()]
|
|||
|
|
setKeywords(newKeywords)
|
|||
|
|
updateFormData({ keywords: newKeywords })
|
|||
|
|
setKeyword("")
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleRemoveKeyword = (index: number) => {
|
|||
|
|
const newKeywords = keywords.filter((_, i) => i !== index)
|
|||
|
|
setKeywords(newKeywords)
|
|||
|
|
updateFormData({ keywords: newKeywords })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleAddPromptWord = () => {
|
|||
|
|
if (promptWord.trim() && !promptWords.includes(promptWord.trim())) {
|
|||
|
|
const newPromptWords = [...promptWords, promptWord.trim()]
|
|||
|
|
setPromptWords(newPromptWords)
|
|||
|
|
updateFormData({ promptWords: newPromptWords })
|
|||
|
|
setPromptWord("")
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleRemovePromptWord = (index: number) => {
|
|||
|
|
const newPromptWords = promptWords.filter((_, i) => i !== index)
|
|||
|
|
setPromptWords(newPromptWords)
|
|||
|
|
updateFormData({ promptWords: newPromptWords })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleTypeChange = (value: string) => {
|
|||
|
|
setAnalysisType(value)
|
|||
|
|
updateFormData({ analysisType: value })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleKeyDown = (e: React.KeyboardEvent, type: "keyword" | "prompt") => {
|
|||
|
|
if (e.key === "Enter") {
|
|||
|
|
e.preventDefault()
|
|||
|
|
if (type === "keyword") {
|
|||
|
|
handleAddKeyword()
|
|||
|
|
} else {
|
|||
|
|
handleAddPromptWord()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleContinue = () => {
|
|||
|
|
updateFormData({
|
|||
|
|
analysisType,
|
|||
|
|
keywords,
|
|||
|
|
promptWords,
|
|||
|
|
})
|
|||
|
|
onNext()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const suggestedKeywords = ["美妆", "护肤", "彩妆", "健身", "教育", "培训", "金融", "投资", "旅游", "美食"]
|
|||
|
|
const suggestedPrompts = ["人群属性", "喜好分析", "消费能力", "兴趣爱好", "活跃度", "社交特征"]
|
|||
|
|
|
|||
|
|
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>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<Label className="text-base font-medium">分析类型</Label>
|
|||
|
|
<RadioGroup value={analysisType} onValueChange={handleTypeChange} className="mt-2 space-y-3">
|
|||
|
|
<div className="flex items-start space-x-2">
|
|||
|
|
<RadioGroupItem value="friends" id="friends" />
|
|||
|
|
<div className="grid gap-1.5">
|
|||
|
|
<Label htmlFor="friends" className="font-medium">
|
|||
|
|
好友信息分析
|
|||
|
|
</Label>
|
|||
|
|
<p className="text-sm text-gray-500">分析微信号下所有好友的昵称及微信信息，基于指定用户词进行筛选分析</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-start space-x-2">
|
|||
|
|
<RadioGroupItem value="moments" id="moments" />
|
|||
|
|
<div className="grid gap-1.5">
|
|||
|
|
<Label htmlFor="moments" className="font-medium">
|
|||
|
|
朋友圈内容分析
|
|||
|
|
</Label>
|
|||
|
|
<p className="text-sm text-gray-500">
|
|||
|
|
运用AI技术对所有用户朋友圈内容进行分析，通过提示词辅助深入剖析用户类型
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-start space-x-2">
|
|||
|
|
<RadioGroupItem value="both" id="both" />
|
|||
|
|
<div className="grid gap-1.5">
|
|||
|
|
<Label htmlFor="both" className="font-medium">
|
|||
|
|
综合分析（推荐）
|
|||
|
|
</Label>
|
|||
|
|
<p className="text-sm text-gray-500">同时分析好友信息和朋友圈内容，获得更全面的数据洞察</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</RadioGroup>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
|||
|
|
<TabsList className="grid w-full grid-cols-2">
|
|||
|
|
<TabsTrigger value="friends">好友分析设置</TabsTrigger>
|
|||
|
|
<TabsTrigger value="moments">朋友圈分析设置</TabsTrigger>
|
|||
|
|
</TabsList>
|
|||
|
|
|
|||
|
|
<TabsContent value="friends" className="space-y-4 pt-4">
|
|||
|
|
<div>
|
|||
|
|
<Label htmlFor="keywords" className="text-base font-medium">
|
|||
|
|
用户关键词
|
|||
|
|
</Label>
|
|||
|
|
<p className="text-sm text-gray-500 mt-1 mb-2">
|
|||
|
|
设置用于筛选好友的关键词，例如"美妆"将筛选出昵称或微信信息中与美妆相关的好友
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<Input
|
|||
|
|
id="keywords"
|
|||
|
|
value={keyword}
|
|||
|
|
onChange={(e) => setKeyword(e.target.value)}
|
|||
|
|
onKeyDown={(e) => handleKeyDown(e, "keyword")}
|
|||
|
|
placeholder="输入关键词并回车"
|
|||
|
|
className="flex-1"
|
|||
|
|
/>
|
|||
|
|
<Button type="button" onClick={handleAddKeyword} disabled={!keyword.trim()}>
|
|||
|
|
<Plus className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{keywords.length > 0 && (
|
|||
|
|
<div className="flex flex-wrap gap-2 mt-3">
|
|||
|
|
{keywords.map((kw, index) => (
|
|||
|
|
<Badge key={index} variant="secondary" className="pl-2 pr-1 py-1 flex items-center gap-1">
|
|||
|
|
{kw}
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => handleRemoveKeyword(index)}
|
|||
|
|
className="ml-1 rounded-full hover:bg-gray-200 p-0.5"
|
|||
|
|
>
|
|||
|
|
<X className="h-3 w-3" />
|
|||
|
|
</button>
|
|||
|
|
</Badge>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="mt-3">
|
|||
|
|
<p className="text-sm text-gray-500 mb-2">推荐关键词：</p>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{suggestedKeywords.map((kw) => (
|
|||
|
|
<Badge
|
|||
|
|
key={kw}
|
|||
|
|
variant="outline"
|
|||
|
|
className="cursor-pointer hover:bg-gray-100"
|
|||
|
|
onClick={() => {
|
|||
|
|
if (!keywords.includes(kw)) {
|
|||
|
|
const newKeywords = [...keywords, kw]
|
|||
|
|
setKeywords(newKeywords)
|
|||
|
|
updateFormData({ keywords: newKeywords })
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{kw}
|
|||
|
|
</Badge>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</TabsContent>
|
|||
|
|
|
|||
|
|
<TabsContent value="moments" className="space-y-4 pt-4">
|
|||
|
|
<div>
|
|||
|
|
<Label htmlFor="promptWords" className="text-base font-medium">
|
|||
|
|
分析提示词
|
|||
|
|
</Label>
|
|||
|
|
<p className="text-sm text-gray-500 mt-1 mb-2">
|
|||
|
|
设置辅助AI分析的提示词，如"人群属性"、"喜好分析"等，帮助深入剖析用户类型
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<Input
|
|||
|
|
id="promptWords"
|
|||
|
|
value={promptWord}
|
|||
|
|
onChange={(e) => setPromptWord(e.target.value)}
|
|||
|
|
onKeyDown={(e) => handleKeyDown(e, "prompt")}
|
|||
|
|
placeholder="输入提示词并回车"
|
|||
|
|
className="flex-1"
|
|||
|
|
/>
|
|||
|
|
<Button type="button" onClick={handleAddPromptWord} disabled={!promptWord.trim()}>
|
|||
|
|
<Plus className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{promptWords.length > 0 && (
|
|||
|
|
<div className="flex flex-wrap gap-2 mt-3">
|
|||
|
|
{promptWords.map((pw, index) => (
|
|||
|
|
<Badge key={index} variant="secondary" className="pl-2 pr-1 py-1 flex items-center gap-1">
|
|||
|
|
{pw}
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => handleRemovePromptWord(index)}
|
|||
|
|
className="ml-1 rounded-full hover:bg-gray-200 p-0.5"
|
|||
|
|
>
|
|||
|
|
<X className="h-3 w-3" />
|
|||
|
|
</button>
|
|||
|
|
</Badge>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="mt-3">
|
|||
|
|
<p className="text-sm text-gray-500 mb-2">推荐提示词：</p>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{suggestedPrompts.map((pw) => (
|
|||
|
|
<Badge
|
|||
|
|
key={pw}
|
|||
|
|
variant="outline"
|
|||
|
|
className="cursor-pointer hover:bg-gray-100"
|
|||
|
|
onClick={() => {
|
|||
|
|
if (!promptWords.includes(pw)) {
|
|||
|
|
const newPromptWords = [...promptWords, pw]
|
|||
|
|
setPromptWords(newPromptWords)
|
|||
|
|
updateFormData({ promptWords: newPromptWords })
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{pw}
|
|||
|
|
</Badge>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</TabsContent>
|
|||
|
|
</Tabs>
|
|||
|
|
|
|||
|
|
<div className="flex justify-between pt-4">
|
|||
|
|
<Button variant="outline" onClick={onBack}>
|
|||
|
|
返回
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
onClick={handleContinue}
|
|||
|
|
disabled={
|
|||
|
|
((analysisType === "friends" || analysisType === "both") && keywords.length === 0) ||
|
|||
|
|
((analysisType === "moments" || analysisType === "both") && promptWords.length === 0)
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
继续
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|