refactor: overhaul UI for streamlined user experience

Redesign navigation, home overview, user portrait, and valuation pages
with improved functionality and responsive design.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>

components/tag-rules/rule-editor.tsx

@@ -0,0 +1,277 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
+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 { Switch } from "@/components/ui/switch"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { AlertTriangle, Check } from "lucide-react"
+
+interface RuleEditorProps {
+  ruleId: string | null
+}
+
+export function RuleEditor({ ruleId }: RuleEditorProps) {
+  const [rule, setRule] = useState({
+    name: "",
+    description: "",
+    targetTag: "",
+    condition: "",
+    priority: "2",
+    status: "draft",
+    sql: "",
+  })
+  const [activeTab, setActiveTab] = useState("visual")
+  const [validationResult, setValidationResult] = useState<{
+    isValid: boolean
+    message: string
+  } | null>(null)
+
+  useEffect(() => {
+    if (ruleId) {
+      // 这里应该是获取规则详情的逻辑
+      // 模拟从服务器获取数据
+      setTimeout(() => {
+        setRule({
+          name: "高价值用户识别",
+          description: "根据用户消费金额和频次识别高价值用户",
+          targetTag: "高价值用户",
+          condition: "消费金额 > 5000 AND 消费频次 > 10",
+          priority: "1",
+          status: "active",
+          sql: "SELECT user_id FROM user_behavior WHERE total_amount > 5000 AND purchase_count > 10",
+        })
+      }, 300)
+    }
+  }, [ruleId])
+
+  const handleValidate = () => {
+    // 模拟验证逻辑
+    if (rule.condition.trim() === "") {
+      setValidationResult({
+        isValid: false,
+        message: "规则条件不能为空",
+      })
+      return
+    }
+
+    if (activeTab === "sql" && rule.sql.trim() === "") {
+      setValidationResult({
+        isValid: false,
+        message: "SQL 语句不能为空",
+      })
+      return
+    }
+
+    // 模拟验证成功
+    setValidationResult({
+      isValid: true,
+      message: "规则验证通过，可以保存或执行",
+    })
+  }
+
+  const handleSave = () => {
+    // 这里应该是保存规则的逻辑
+    console.log("保存规则:", rule)
+    // 模拟保存成功
+    alert("规则保存成功")
+  }
+
+  const handleExecute = () => {
+    // 这里应该是执行规则的逻辑
+    console.log("执行规则:", rule)
+    // 模拟执行成功
+    alert("规则执行成功，影响用户 1250 人")
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{ruleId ? "编辑规则" : "创建新规则"}</CardTitle>
+        <CardDescription>
+          {ruleId ? "修改现有标签规则" : "创建新的标签生成规则"}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="grid grid-cols-2 gap-6">
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="rule-name">规则名称</Label>
+              <Input
+                id="rule-name"
+                value={rule.name}
+                onChange={(e) => setRule({ ...rule, name: e.target.value })}
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <Label htmlFor="rule-description">规则描述</Label>
+              <Textarea
+                id="rule-description"
+                value={rule.description}
+                onChange={(e) => setRule({ ...rule, description: e.target.value })}
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <Label htmlFor="target-tag">目标标签</Label>
+              <Input
+                id="target-tag"
+                value={rule.targetTag}
+                onChange={(e) => setRule({ ...rule, targetTag: e.target.value })}
+                className="mt-1"
+              />
+            </div>
+          </div>
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="rule-priority">优先级</Label>
+              <Select
+                value={rule.priority}
+                onValueChange={(value) => setRule({ ...rule, priority: value })}
+              >
+                <SelectTrigger className="mt-1">
+                  <SelectValue placeholder="选择优先级" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1">1 - 高</SelectItem>
+                  <SelectItem value="2">2 - 中</SelectItem>
+                  <SelectItem value="3">3 - 低</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label htmlFor="rule-status">规则状态</Label>
+              <div className="flex items-center space-x-2 mt-1">
+                <Switch
+                  id="rule-status"
+                  checked={rule.status === "active"}
+                  onCheckedChange={(checked) => setRule({ ...rule, status: checked ? "active" : "draft" })}
+                />
+                <Label htmlFor="rule-status">
+                  {rule.status === "active" ? "启用" : "草稿"}
+                </Label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <Label>规则定义</Label>
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="visual">可视化编辑</TabsTrigger>
+              <TabsTrigger value="sql">SQL 编辑</TabsTrigger>
+            </TabsList>
+            <TabsContent value="visual" className="space-y-4 mt-4">
+              <Textarea
+                value={rule.condition}
+                onChange={(e) => setRule({ ...rule, condition: e.target.value })}
+                placeholder="例如: 消费金额 > 5000 AND 消费频次 > 10"
+                className="min-h-[200px]"
+              />
+              <div className="bg-gray-50 p-4 rounded-md">
+                <h4 className="text-sm font-medium mb-2">可用字段</h4>
+                <div className="grid grid-cols-3 gap-2">
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " 消费金额" })}>
+                    消费金额
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " 消费频次" })}>
+                    消费频次
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " 最近登录时间" })}>
+                    最近登录时间
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " 活跃度" })}>
+                    活跃度
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " 注册时间" })}>
+                    注册时间
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " 年龄" })}>
+                    年龄
+                  </Button>
+                </div>
+                <h4 className="text-sm font-medium mt-4 mb-2">操作符</h4>
+                <div className="grid grid-cols-4 gap-2">
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " >" })}>
+                    大于 (>)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " <" })}>
+                    小于 (<)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " =" })}>
+                    等于 (=)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " !=" })}>
+                    不等于 (!=)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " AND" })}>
+                    与 (AND)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " OR" })}>
+                    或 (OR)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " NOT" })}>
+                    非 (NOT)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " IN" })}>
+                    包含 (IN)
+                  </Button>
+                </div>
+              </div>
+            </TabsContent>
+            <TabsContent value="sql" className="space-y-4 mt-4">
+              <Textarea
+                value={rule.sql}
+                onChange={(e) => setRule({ ...rule, sql: e.target.value })}
+                placeholder="输入 SQL 查询语句"
+                className="min-h-[200px] font-mono"
+              />
+              <div className="bg-gray-50 p-4 rounded-md">
+                <h4 className="text-sm font-medium mb-2">SQL 模板</h4>
+                <div className="text-xs font-mono bg-gray-100 p-2 rounded">
+                  SELECT user_id FROM user_behavior WHERE total_amount > 5000 AND purchase_count > 10
+                </div>
+                <p className="text-xs text-gray-500 mt-2">
+                  SQL 查询必须返回 user_id 字段，用于标识需要打标签的用户。
+                </p>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </div>
+
+        {validationResult && (
+          <Alert variant={validationResult.isValid ? "default" : "destructive"}>
+            {validationResult.isValid ? (
+              <Check className="h-4 w-4" />
+            ) : (
+              <AlertTriangle className="h-4 w-4" />
+            )}
+            <AlertTitle>{validationResult.isValid ? "验证通过" : "验证失败"}</AlertTitle>
+            <AlertDescription>{validationResult.message}</AlertDescription>
+          </Alert>
+        )}
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <div className="flex space-x-2">
+          <Button variant="outline" onClick={handleValidate}>
+            验证规则
+          </Button>
+        </div>
+        <div className="flex space-x-2">
+          <Button variant="outline">取消</Button>
+          <Button onClick={handleSave}>保存规则</Button>
+          <Button variant="default" className="bg-green-600 hover:bg-green-700" onClick={handleExecute}>
+            执行规则
+          </Button>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}

components/tag-rules/rule-execution-history.tsx

@@ -0,0 +1,258 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent } from "@/components/ui/card"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search, Filter, Calendar, FileText } from "lucide-react"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+
+interface ExecutionRecord {
+  id: string
+  ruleName: string
+  executionTime: string
+  duration: string
+  status: "success" | "failed" | "running"
+  affectedUsers: number
+  executedBy: string
+}
+
+const mockExecutionHistory: ExecutionRecord[] = [
+  {
+    id: "exec-001",
+    ruleName: "高价值用户识别",
+    executionTime: "2023-07-21 15:30:45",
+    duration: "45秒",
+    status: "success",
+    affectedUsers: 1250,
+    executedBy: "系统自动",
+  },
+  {
+    id: "exec-002",
+    ruleName: "游戏爱好者标记",
+    executionTime: "2023-07-21 14:45:12",
+    duration: "38秒",
+    status: "success",
+    affectedUsers: 2840,
+    executedBy: "系统自动",
+  },
+  {
+    id: "exec-003",
+    ruleName: "流失风险预警",
+    executionTime: "2023-07-21 13:20:33",
+    duration: "52秒",
+    status: "success",
+    affectedUsers: 890,
+    executedBy: "系统自动",
+  },
+  {
+    id: "exec-004",
+    ruleName: "高价值用户识别",
+    executionTime: "2023-07-20 15:30:18",
+    duration: "47秒",
+    status: "success",
+    affectedUsers: 1235,
+    executedBy: "系统自动",
+  },
+  {
+    id: "exec-005",
+    ruleName: "周末活跃用户",
+    executionTime: "2023-07-20 12:15:42",
+    duration: "1分15秒",
+    status: "success",
+    affectedUsers: 3520,
+    executedBy: "admin",
+  },
+  {
+    id: "exec-006",
+    ruleName: "潜在高转化用户",
+    executionTime: "2023-07-19 16:45:30",
+    duration: "2分08秒",
+    status: "failed",
+    affectedUsers: 0,
+    executedBy: "admin",
+  },
+  {
+    id: "exec-007",
+    ruleName: "高价值用户识别",
+    executionTime: "2023-07-19 15:30:22",
+    duration: "46秒",
+    status: "success",
+    affectedUsers: 1228,
+    executedBy: "系统自动",
+  },
+]
+
+export function RuleExecutionHistory() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedRecord, setSelectedRecord] = useState<ExecutionRecord | null>(null)
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false)
+
+  const filteredHistory = mockExecutionHistory.filter(
+    (record) =>
+      record.ruleName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      record.executedBy.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  const getStatusBadge = (status: ExecutionRecord["status"]) => {
+    switch (status) {
+      case "success":
+        return <Badge className="bg-green-100 text-green-800">成功</Badge>
+      case "failed":
+        return <Badge className="bg-red-100 text-red-800">失败</Badge>
+      case "running":
+        return <Badge className="bg-blue-100 text-blue-800">执行中</Badge>
+    }
+  }
+
+  const handleViewDetails = (record: ExecutionRecord) => {
+    setSelectedRecord(record)
+    setIsDetailsOpen(true)
+  }
+
+  return (
+    <>
+      <Card>
+        <CardContent className="p-6">
+          <div className="flex justify-between items-center mb-6">
+            <h3 className="text-lg font-medium">规则执行历史</h3>
+            <div className="flex space-x-2">
+              <div className="relative w-64">
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  type="text"
+                  placeholder="搜索规则名称或执行人..."
+                  className="pl-8"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+              <Button variant="outline" size="icon">
+                <Filter className="h-4 w-4" />
+              </Button>
+              <Button variant="outline" size="icon">
+                <Calendar className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>执行ID</TableHead>
+                <TableHead>规则名称</TableHead>
+                <TableHead>执行时间</TableHead>
+                <TableHead>耗时</TableHead>
+                <TableHead>状态</TableHead>
+                <TableHead>影响用户数</TableHead>
+                <TableHead>执行人</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredHistory.map((record) => (
+                <TableRow key={record.id}>
+                  <TableCell className="font-mono text-xs">{record.id}</TableCell>
+                  <TableCell>{record.ruleName}</TableCell>
+                  <TableCell>{record.executionTime}</TableCell>
+                  <TableCell>{record.duration}</TableCell>
+                  <TableCell>{getStatusBadge(record.status)}</TableCell>
+                  <TableCell>{record.affectedUsers.toLocaleString()}</TableCell>
+                  <TableCell>{record.executedBy}</TableCell>
+                  <TableCell className="text-right">
+                    <Button variant="ghost" size="sm" onClick={() => handleViewDetails(record)}>
+                      <FileText className="h-4 w-4 mr-2" />
+                      详情
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* 执行详情对话框 */}
+      <Dialog open={isDetailsOpen} onOpenChange={setIsDetailsOpen}>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>执行详情</DialogTitle>
+            <DialogDescription>规则执行的详细信息</DialogDescription>
+          </DialogHeader>
+          {selectedRecord && (
+            <div className="space-y-4 py-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <p className="text-sm font-medium text-gray-500">执行ID</p>
+                  <p className="font-mono">{selectedRecord.id}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-500">规则名称</p>
+                  <p>{selectedRecord.ruleName}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-500">执行时间</p>
+                  <p>{selectedRecord.executionTime}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-500">耗时</p>
+                  <p>{selectedRecord.duration}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-500">状态</p>
+                  <p>{getStatusBadge(selectedRecord.status)}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-500">影响用户数</p>
+                  <p>{selectedRecord.affectedUsers.toLocaleString()}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-500">执行人</p>
+                  <p>{selectedRecord.executedBy}</p>
+                </div>
+              </div>
+
+              <div>
+                <p className="text-sm font-medium text-gray-500 mb-2">执行日志</p>
+                <div className="bg-gray-50 p-4 rounded-md font-mono text-xs h-40 overflow-y-auto">
+                  {selectedRecord.status === "success" ? (
+                    <>
+                      <p>
+                        [INFO] {selectedRecord.executionTime} - 开始执行规则 "{selectedRecord.ruleName}"
+                      </p>
+                      <p>[INFO] {selectedRecord.executionTime} - 规则条件解析完成</p>
+                      <p>[INFO] {selectedRecord.executionTime} - 开始查询符合条件的用户</p>
+                      <p>
+                        [INFO] {selectedRecord.executionTime} - 查询完成，找到 {selectedRecord.affectedUsers}{" "}
+                        个符合条件的用户
+                      </p>
+                      <p>[INFO] {selectedRecord.executionTime} - 开始为用户打标签</p>
+                      <p>[INFO] {selectedRecord.executionTime} - 标签应用完成</p>
+                      <p>
+                        [INFO] {selectedRecord.executionTime} - 规则执行成功，耗时 {selectedRecord.duration}
+                      </p>
+                    </>
+                  ) : (
+                    <>
+                      <p>
+                        [INFO] {selectedRecord.executionTime} - 开始执行规则 "{selectedRecord.ruleName}"
+                      </p>
+                      <p>[INFO] {selectedRecord.executionTime} - 规则条件解析完成</p>
+                      <p>[INFO] {selectedRecord.executionTime} - 开始查询符合条件的用户</p>
+                      <p>[ERROR] {selectedRecord.executionTime} - 查询执行失败: 数据库连接超时</p>
+                      <p>
+                        [ERROR] {selectedRecord.executionTime} - 规则执行失败，耗时 {selectedRecord.duration}
+                      </p>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}