diff --git a/components/tag-rules/rule-editor.tsx b/components/tag-rules/rule-editor.tsx index 945b550..a6a26c9 100644 --- a/components/tag-rules/rule-editor.tsx +++ b/components/tag-rules/rule-editor.tsx @@ -1,5 +1,13 @@ "use client" +import { useState, useEffect } from "react" +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" +import { Button } from "@/components/ui/button" +import { Badge } from "@/components/ui/badge" +import { Plus, Trash2 } from "lucide-react" + interface RuleCondition { field: string operator: string @@ -14,4 +22,153 @@ interface TagRule { conditions: RuleCondition[] actions: { addTags: string[] - removeTags + removeTags: string[] + } +} + +/** + * 简易标签规则编辑器 + * 只实现基本字段编辑与本地状态保存,后端持久化可在后续迭代中接入 + */ +export function RuleEditor({ ruleId }: { ruleId: string | null }) { + const [rule, setRule] = useState(null) + + // ❗️此处仅示例:真实项目应替换为 API 请求 + useEffect(() => { + if (!ruleId) { + setRule(null) + return + } + // 模拟异步加载 + setTimeout(() => { + setRule({ + id: ruleId, + name: "示例规则", + description: "这是一个示例规则,用于演示编辑器", + conditions: [ + { field: "orderAmount", operator: ">", value: "500", logicalOperator: "AND" }, + { field: "loginDays", operator: "<", value: "30" }, + ], + actions: { addTags: ["高价值用户"], removeTags: [] }, + }) + }, 300) + }, [ruleId]) + + if (!ruleId) { + return ( + + + 请选择要编辑的规则 + + + ) + } + + if (!rule) { + return ( + + + 加载中... + + + ) + } + + // === 内部更新函数 === + const updateRule = (partial: Partial) => setRule((prev) => (prev ? { ...prev, ...partial } : prev)) + + const addCondition = () => + updateRule({ + conditions: [...rule.conditions, { field: "", operator: "=", value: "" }], + }) + + const removeCondition = (index: number) => + updateRule({ + conditions: rule.conditions.filter((_, i) => i !== index), + }) + + const saveRule = () => { + // TODO: 调用后端保存 + console.log("保存规则:", rule) + } + + return ( + + + 编辑规则:{rule.name} + + + {/* 基本信息 */} +
+ + updateRule({ name: e.target.value })} /> +
+
+ +