From ea95107713c7e8d896329d8ed5b7943d4f5b2ae3 Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Sat, 19 Jul 2025 02:17:17 +0000
Subject: [PATCH] refactor: streamline mobile interface for data analysis focus

Remove settings, optimize mobile layout, highlight data analysis features
Use generic company names, simulate today's timeline, responsive design

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
---
 app/components/BottomNav.tsx         |  13 +-
 app/components/MobileSidebar.tsx     | 135 ++---
 app/user-portrait/page.tsx           | 279 ++++++----
 app/user-value/page.tsx              | 442 +++++++++-------
 components/tag-rules/rule-editor.tsx | 730 +++++++++++++++++++--------
 dependencies.ts                      |   3 +
 package.json                         |   2 +
 pnpm-lock.yaml                       |  46 ++
 8 files changed, 1072 insertions(+), 578 deletions(-)
 create mode 100644 dependencies.ts

diff --git a/app/components/BottomNav.tsx b/app/components/BottomNav.tsx
index c084a13..7139222 100644
--- a/app/components/BottomNav.tsx
+++ b/app/components/BottomNav.tsx
@@ -2,14 +2,13 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { Home, Users, BarChart3, Database, Settings } from "lucide-react"
+import { Home, Users, Target, Database } from "lucide-react"
 
 const navItems = [
-  { href: "/", icon: Home, label: "首页" },
+  { href: "/", icon: Home, label: "概览" },
+  { href: "/data-integration", icon: Database, label: "数据集成" },
   { href: "/user-portrait", icon: Users, label: "用户画像" },
-  { href: "/user-value", icon: BarChart3, label: "用户估值" },
-  { href: "/data-platform", icon: Database, label: "数据中台" },
-  { href: "/settings", icon: Settings, label: "设置" },
+  { href: "/user-value", icon: Target, label: "价值评估" },
 ]
 
 export default function BottomNav() {
@@ -25,11 +24,11 @@ export default function BottomNav() {
             <Link
               key={item.href}
               href={item.href}
-              className={`flex flex-col items-center justify-center px-3 py-2 rounded-xl transition-all duration-300 min-w-0 flex-1 ${
+              className={`flex flex-col items-center justify-center px-2 py-2 rounded-xl transition-all duration-300 min-w-0 flex-1 ${
                 isActive ? "glass-heavy text-blue-600 scale-105" : "text-gray-600 hover:glass-light hover:text-blue-500"
               }`}
             >
-              <item.icon className={`h-5 w-5 mb-1 ${isActive ? "text-blue-600" : ""}`} />
+              <item.icon className={`h-4 w-4 mb-1 ${isActive ? "text-blue-600" : ""}`} />
               <span className="text-xs font-medium truncate">{item.label}</span>
             </Link>
           )
diff --git a/app/components/MobileSidebar.tsx b/app/components/MobileSidebar.tsx
index 78f0986..6a6e162 100644
--- a/app/components/MobileSidebar.tsx
+++ b/app/components/MobileSidebar.tsx
@@ -7,7 +7,6 @@ import { cn } from "@/lib/utils"
 import {
   Database,
   LayoutDashboard,
-  Settings,
   Users,
   Target,
   X,
@@ -28,7 +27,7 @@ interface MobileSidebarProps {
 export default function MobileSidebar({ isOpen, onClose }: MobileSidebarProps) {
   const pathname = usePathname()
   const [expandedSections, setExpandedSections] = useState({
-    "user-portrait": true,
+    "user-portrait": false,
     "user-value": false,
   })
 
@@ -53,55 +52,63 @@ export default function MobileSidebar({ isOpen, onClose }: MobileSidebarProps) {
 
   const navItems = [
     {
-      title: "概览",
+      title: "数据概览",
       href: "/",
-      icon: <LayoutDashboard className="h-5 w-5" />,
+      icon: <LayoutDashboard className="h-4 w-4" />,
       primary: true,
+      description: "平台整体数据分析",
     },
     {
       title: "数据集成",
       href: "/data-integration",
-      icon: <Database className="h-5 w-5" />,
+      icon: <Database className="h-4 w-4" />,
       primary: true,
       tag: "核心",
+      description: "多源数据整合平台",
     },
     {
       title: "用户画像",
       href: "/user-portrait",
-      icon: <Users className="h-5 w-5" />,
+      icon: <Users className="h-4 w-4" />,
       primary: true,
       expandable: true,
       section: "user-portrait",
+      description: "用户标签与分群分析",
       children: [
         {
-          title: "用户词",
-          href: "/user-portrait/user-keywords",
-          icon: <Tag className="h-4 w-4" />,
+          title: "流量关键词",
+          href: "/user-portrait/keywords",
+          icon: <Tag className="h-3 w-3" />,
+          description: "关键词价值评估",
         },
         {
           title: "标签管理",
           href: "/user-portrait/tags",
-          icon: <Tag className="h-4 w-4" />,
+          icon: <Tag className="h-3 w-3" />,
+          description: "用户标签分类",
         },
       ],
     },
     {
-      title: "用户估值",
+      title: "价值评估",
       href: "/user-value",
-      icon: <Target className="h-5 w-5" />,
+      icon: <Target className="h-4 w-4" />,
       primary: true,
       expandable: true,
       section: "user-value",
+      description: "用户价值分析模型",
       children: [
         {
           title: "估值模型",
           href: "/user-value/model",
-          icon: <BarChart3 className="h-4 w-4" />,
+          icon: <BarChart3 className="h-3 w-3" />,
+          description: "RFM价值模型",
         },
         {
-          title: "用户升级路径",
+          title: "升级路径",
           href: "/user-value/upgrade-paths",
-          icon: <TrendingUp className="h-4 w-4" />,
+          icon: <TrendingUp className="h-3 w-3" />,
+          description: "用户价值提升",
         },
       ],
     },
@@ -110,9 +117,9 @@ export default function MobileSidebar({ isOpen, onClose }: MobileSidebarProps) {
   const getTagColor = (tag: string) => {
     switch (tag) {
       case "核心":
-        return "glass-light text-orange-700 border-orange-200"
+        return "bg-blue-100 text-blue-700 border-blue-200"
       default:
-        return "glass-light text-gray-700 border-gray-200"
+        return "bg-gray-100 text-gray-700 border-gray-200"
     }
   }
 
@@ -130,56 +137,63 @@ export default function MobileSidebar({ isOpen, onClose }: MobileSidebarProps) {
       {/* 侧边栏 */}
       <div
         className={cn(
-          "fixed left-0 top-0 h-full w-80 glass-nav safe-area-top safe-area-left z-50 transition-transform duration-300 ease-out",
+          "fixed left-0 top-0 h-full w-72 glass-nav safe-area-top safe-area-left z-50 transition-transform duration-300 ease-out",
           isOpen ? "translate-x-0" : "-translate-x-full",
         )}
       >
         {/* 头部 */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-white/20">
-          <div className="flex items-center space-x-3">
-            <div className="w-8 h-8 rounded-lg glass-light flex items-center justify-center">
-              <Database className="h-5 w-5 text-blue-600" />
+        <div className="flex items-center justify-between px-4 py-3 border-b border-white/20">
+          <div className="flex items-center space-x-2">
+            <div className="w-6 h-6 rounded-lg glass-light flex items-center justify-center">
+              <Database className="h-4 w-4 text-blue-600" />
             </div>
-            <h1 className="text-lg font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-              用户数字资产中台
+            <h1 className="text-sm font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+              数据资产中台
             </h1>
           </div>
-          <Button variant="ghost" size="icon" onClick={onClose} className="glass-light rounded-xl">
-            <X className="h-5 w-5" />
+          <Button variant="ghost" size="icon" onClick={onClose} className="glass-light rounded-lg h-8 w-8">
+            <X className="h-4 w-4" />
           </Button>
         </div>
 
         {/* 导航菜单 */}
-        <div className="flex-1 overflow-y-auto py-4">
-          <nav className="space-y-2 px-4">
+        <div className="flex-1 overflow-y-auto py-2">
+          <nav className="space-y-1 px-3">
             {navItems.map((item) => (
               <div key={item.href}>
                 <div
                   className={cn(
-                    "flex items-center px-4 py-3 text-sm font-medium rounded-xl transition-all duration-300 group",
+                    "flex items-center px-3 py-2 text-xs font-medium rounded-lg transition-all duration-300 group",
                     pathname === item.href
                       ? "glass-heavy text-blue-700 shadow-glass"
                       : "glass-light text-gray-700 hover:glass-heavy hover:text-blue-600",
                   )}
                 >
-                  <Link href={item.href} onClick={onClose} className="flex items-center flex-1">
-                    <div className="transition-colors duration-300">{item.icon}</div>
-                    <div className="flex-1 flex items-center justify-between ml-3">
-                      <span className="font-medium">{item.title}</span>
-                      {item.tag && (
-                        <Badge className={cn("text-xs px-2 py-1 rounded-lg", getTagColor(item.tag))}>{item.tag}</Badge>
-                      )}
+                  <Link href={item.href} onClick={onClose} className="flex items-center flex-1 min-w-0">
+                    <div className="transition-colors duration-300 flex-shrink-0">{item.icon}</div>
+                    <div className="flex-1 ml-2 min-w-0">
+                      <div className="flex items-center justify-between">
+                        <span className="font-medium truncate">{item.title}</span>
+                        {item.tag && (
+                          <Badge
+                            className={cn("text-xs px-1.5 py-0.5 rounded ml-1 flex-shrink-0", getTagColor(item.tag))}
+                          >
+                            {item.tag}
+                          </Badge>
+                        )}
+                      </div>
+                      <p className="text-xs text-gray-500 truncate mt-0.5">{item.description}</p>
                     </div>
                   </Link>
                   {item.expandable && (
                     <button
                       onClick={() => toggleSection(item.section!)}
-                      className="ml-2 p-1 hover:bg-white/20 rounded-lg transition-colors duration-200"
+                      className="ml-1 p-1 hover:bg-white/20 rounded transition-colors duration-200 flex-shrink-0"
                     >
                       {expandedSections[item.section!] ? (
-                        <ChevronDown className="h-4 w-4" />
+                        <ChevronDown className="h-3 w-3" />
                       ) : (
-                        <ChevronRight className="h-4 w-4" />
+                        <ChevronRight className="h-3 w-3" />
                       )}
                     </button>
                   )}
@@ -187,21 +201,26 @@ export default function MobileSidebar({ isOpen, onClose }: MobileSidebarProps) {
 
                 {/* 子菜单 */}
                 {item.children && expandedSections[item.section!] && (
-                  <div className="ml-6 mt-2 space-y-1">
+                  <div className="ml-4 mt-1 space-y-1">
                     {item.children.map((subItem) => (
                       <Link
                         key={subItem.href}
                         href={subItem.href}
                         onClick={onClose}
                         className={cn(
-                          "flex items-center px-3 py-2 text-sm rounded-lg transition-all duration-300",
+                          "flex items-center px-2 py-1.5 text-xs rounded transition-all duration-300",
                           pathname === subItem.href
                             ? "glass-light text-blue-600 shadow-glass-sm"
                             : "text-gray-600 hover:glass-light hover:text-blue-500",
                         )}
                       >
-                        <div className="mr-3 text-gray-400 transition-colors duration-300">{subItem.icon}</div>
-                        <span>{subItem.title}</span>
+                        <div className="mr-2 text-gray-400 transition-colors duration-300 flex-shrink-0">
+                          {subItem.icon}
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <p className="font-medium truncate">{subItem.title}</p>
+                          <p className="text-xs text-gray-500 truncate">{subItem.description}</p>
+                        </div>
                       </Link>
                     ))}
                   </div>
@@ -211,21 +230,21 @@ export default function MobileSidebar({ isOpen, onClose }: MobileSidebarProps) {
           </nav>
         </div>
 
-        {/* 底部设置 */}
-        <div className="border-t border-white/20 p-4">
-          <Link
-            href="/settings"
-            onClick={onClose}
-            className={cn(
-              "flex items-center px-4 py-2 text-xs font-medium rounded-lg transition-all duration-300 w-full",
-              pathname === "/settings"
-                ? "glass-heavy text-blue-700 shadow-glass"
-                : "glass-light text-gray-600 hover:glass-heavy hover:text-blue-500",
-            )}
-          >
-            <Settings className="h-4 w-4 transition-colors duration-300" />
-            <span className="ml-2">设置</span>
-          </Link>
+        {/* 底部信息 */}
+        <div className="border-t border-white/20 p-3">
+          <div className="glass-light rounded-lg p-2">
+            <div className="flex items-center justify-between text-xs">
+              <span className="text-gray-600">数据同步</span>
+              <div className="flex items-center">
+                <div className="w-2 h-2 bg-green-500 rounded-full mr-1"></div>
+                <span className="text-green-600">正常</span>
+              </div>
+            </div>
+            <div className="flex items-center justify-between text-xs mt-1">
+              <span className="text-gray-600">最后更新</span>
+              <span className="text-gray-500">2分钟前</span>
+            </div>
+          </div>
         </div>
       </div>
     </>
diff --git a/app/user-portrait/page.tsx b/app/user-portrait/page.tsx
index 735ad64..71f1b6e 100644
--- a/app/user-portrait/page.tsx
+++ b/app/user-portrait/page.tsx
@@ -38,48 +38,48 @@ export default function UserPortrait() {
     userList: true,
   })
 
-  // 使用真实的用户数据
+  // 使用通用公司名称和当天时间线的用户数据
   const mockUsers = [
     {
       id: "1",
-      name: "李明华",
-      company: "阿里巴巴集团",
+      name: "张明华",
+      company: "科技创新有限公司",
       avatar: "/placeholder.svg?height=40&width=40",
       tags: ["高价值", "技术决策者", "活跃用户", "iOS用户", "企业级客户"],
       category: "企业服务",
       pool: "私域池",
-      lastActive: "2024-01-18",
+      lastActive: "今天 14:30",
       value: 28500,
       rfmScore: 95,
       wechatAccounts: [
-        { id: "wx1", name: "李明华", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号", "活跃"] },
-        { id: "wx2", name: "李明华工作号", avatar: "/placeholder.svg?height=40&width=40", tags: ["工作账号"] },
+        { id: "wx1", name: "张明华", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号", "活跃"] },
+        { id: "wx2", name: "张明华工作号", avatar: "/placeholder.svg?height=40&width=40", tags: ["工作账号"] },
       ],
     },
     {
       id: "2",
-      name: "张雨婷",
-      company: "腾讯科技",
+      name: "李雨婷",
+      company: "数字营销公司",
       avatar: "/placeholder.svg?height=40&width=40",
       tags: ["中高价值", "产品经理", "内容创作者", "Android用户"],
       category: "内容营销",
       pool: "公域池",
-      lastActive: "2024-01-17",
+      lastActive: "今天 13:45",
       value: 15800,
       rfmScore: 78,
       wechatAccounts: [
-        { id: "wx3", name: "张雨婷", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号"] },
+        { id: "wx3", name: "李雨婷", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号"] },
       ],
     },
     {
       id: "3",
       name: "王建国",
-      company: "字节跳动",
+      company: "软件开发工作室",
       avatar: "/placeholder.svg?height=40&width=40",
       tags: ["高价值", "技术专家", "开源贡献者", "MacOS用户"],
       category: "技术社区",
       pool: "私域池",
-      lastActive: "2024-01-16",
+      lastActive: "今天 12:20",
       value: 32400,
       rfmScore: 89,
       wechatAccounts: [
@@ -89,12 +89,12 @@ export default function UserPortrait() {
     {
       id: "4",
       name: "刘思琪",
-      company: "美团点评",
+      company: "数据分析咨询",
       avatar: "/placeholder.svg?height=40&width=40",
       tags: ["中价值", "运营专家", "数据分析师", "Windows用户"],
       category: "数据分析",
       pool: "私域池",
-      lastActive: "2024-01-15",
+      lastActive: "今天 11:15",
       value: 18900,
       rfmScore: 72,
       wechatAccounts: [
@@ -104,12 +104,12 @@ export default function UserPortrait() {
     {
       id: "5",
       name: "陈浩然",
-      company: "京东集团",
+      company: "云计算服务商",
       avatar: "/placeholder.svg?height=40&width=40",
       tags: ["高价值", "架构师", "技术领导", "Linux用户"],
       category: "技术架构",
       pool: "私域池",
-      lastActive: "2024-01-14",
+      lastActive: "今天 10:30",
       value: 45600,
       rfmScore: 93,
       wechatAccounts: [
@@ -120,12 +120,12 @@ export default function UserPortrait() {
     {
       id: "6",
       name: "周欣妍",
-      company: "滴滴出行",
+      company: "用户体验设计",
       avatar: "/placeholder.svg?height=40&width=40",
       tags: ["中价值", "UI设计师", "用户体验", "iOS用户"],
       category: "设计创意",
       pool: "公域池",
-      lastActive: "2024-01-13",
+      lastActive: "今天 09:45",
       value: 12300,
       rfmScore: 65,
       wechatAccounts: [
@@ -135,12 +135,12 @@ export default function UserPortrait() {
     {
       id: "7",
       name: "马志强",
-      company: "华为技术",
+      company: "企业解决方案",
       avatar: "/placeholder.svg?height=40&width=40",
       tags: ["高价值", "解决方案专家", "B2B销售", "Android用户"],
       category: "企业解决方案",
       pool: "私域池",
-      lastActive: "2024-01-12",
+      lastActive: "今天 08:20",
       value: 38700,
       rfmScore: 87,
       wechatAccounts: [
@@ -150,12 +150,12 @@ export default function UserPortrait() {
     {
       id: "8",
       name: "赵丽娟",
-      company: "小米科技",
+      company: "品牌营销策划",
       avatar: "/placeholder.svg?height=40&width=40",
       tags: ["中高价值", "市场营销", "品牌推广", "iOS用户"],
       category: "品牌营销",
       pool: "公域池",
-      lastActive: "2024-01-11",
+      lastActive: "今天 07:30",
       value: 21500,
       rfmScore: 76,
       wechatAccounts: [
@@ -167,17 +167,17 @@ export default function UserPortrait() {
 
   const [users, setUsers] = useState(mockUsers)
 
-  // 用户词统计
-  const userKeywordStats = {
+  // 流量关键词统计
+  const keywordStats = {
     totalKeywords: 156,
     activeKeywords: 124,
     coverage: 89.4,
     topKeywords: [
-      { keyword: "技术", count: 45, trend: "+12%" },
-      { keyword: "产品", count: 38, trend: "+8%" },
-      { keyword: "运营", count: 32, trend: "+15%" },
-      { keyword: "设计", count: 28, trend: "+6%" },
-      { keyword: "市场", count: 25, trend: "+10%" },
+      { keyword: "技术解决方案", count: 45, trend: "+12%", value: "高" },
+      { keyword: "数据分析", count: 38, trend: "+8%", value: "中高" },
+      { keyword: "用户体验", count: 32, trend: "+15%", value: "中" },
+      { keyword: "品牌营销", count: 28, trend: "+6%", value: "中高" },
+      { keyword: "企业服务", count: 25, trend: "+10%", value: "高" },
     ],
   }
 
@@ -237,81 +237,98 @@ export default function UserPortrait() {
     }))
   }
 
+  const getValueColor = (value: string) => {
+    switch (value) {
+      case "高":
+        return "bg-green-100 text-green-800"
+      case "中高":
+        return "bg-blue-100 text-blue-800"
+      case "中":
+        return "bg-yellow-100 text-yellow-800"
+      default:
+        return "bg-gray-100 text-gray-800"
+    }
+  }
+
   return (
-    <div className="container mx-auto py-6 space-y-6">
+    <div className="container mx-auto py-4 md:py-6 space-y-4 md:space-y-6">
       <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
         <div>
-          <h1 className="text-3xl font-bold tracking-tight">用户画像</h1>
-          <p className="text-muted-foreground">全面的用户数据分析和管理</p>
+          <h1 className="text-2xl md:text-3xl font-bold tracking-tight">用户画像</h1>
+          <p className="text-sm md:text-base text-muted-foreground">数据驱动的用户分析平台</p>
         </div>
         <div className="flex gap-2">
-          <Button>
+          <Button size="sm" className="flex-1 md:flex-none">
             <UserPlus className="mr-2 h-4 w-4" />
             导入用户
           </Button>
-          <Button variant="outline">
+          <Button variant="outline" size="sm" className="flex-1 md:flex-none bg-transparent">
             <Download className="mr-2 h-4 w-4" />
-            导出数据
+            导出
           </Button>
         </div>
       </div>
 
-      {/* 用户词管理 */}
+      {/* 流量关键词管理 */}
       <Collapsible
         open={expandedSections.userKeywords}
         onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, userKeywords: open }))}
       >
         <Card className="border shadow-sm">
           <CollapsibleTrigger className="w-full">
-            <CardHeader className="hover:bg-gray-50 transition-colors cursor-pointer">
+            <CardHeader className="hover:bg-gray-50 transition-colors cursor-pointer py-3 md:py-4">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
-                  <Tag className="h-5 w-5 text-blue-600" />
+                  <Tag className="h-4 w-4 md:h-5 md:w-5 text-blue-600" />
                   <div className="text-left">
-                    <CardTitle>用户词管理</CardTitle>
-                    <CardDescription>用户关键词分析和管理</CardDescription>
+                    <CardTitle className="text-base md:text-lg">流量关键词</CardTitle>
+                    <CardDescription className="text-xs md:text-sm">关键词价值评估与分类</CardDescription>
                   </div>
                 </div>
                 {expandedSections.userKeywords ? (
-                  <ChevronDown className="h-5 w-5" />
+                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                 ) : (
-                  <ChevronRight className="h-5 w-5" />
+                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                 )}
               </div>
             </CardHeader>
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <CardContent className="pt-0">
-              <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
-                <div className="bg-blue-50 p-3 rounded-lg">
-                  <p className="text-sm font-medium text-blue-600">总关键词</p>
-                  <p className="text-2xl font-bold text-blue-900">{userKeywordStats.totalKeywords}</p>
+            <CardContent className="pt-0 px-4 md:px-6">
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mb-4">
+                <div className="bg-blue-50 p-2 md:p-3 rounded-lg">
+                  <p className="text-xs md:text-sm font-medium text-blue-600">总关键词</p>
+                  <p className="text-lg md:text-2xl font-bold text-blue-900">{keywordStats.totalKeywords}</p>
                 </div>
-                <div className="bg-green-50 p-3 rounded-lg">
-                  <p className="text-sm font-medium text-green-600">活跃关键词</p>
-                  <p className="text-2xl font-bold text-green-900">{userKeywordStats.activeKeywords}</p>
+                <div className="bg-green-50 p-2 md:p-3 rounded-lg">
+                  <p className="text-xs md:text-sm font-medium text-green-600">活跃关键词</p>
+                  <p className="text-lg md:text-2xl font-bold text-green-900">{keywordStats.activeKeywords}</p>
                 </div>
-                <div className="bg-purple-50 p-3 rounded-lg">
-                  <p className="text-sm font-medium text-purple-600">覆盖率</p>
-                  <p className="text-2xl font-bold text-purple-900">{userKeywordStats.coverage}%</p>
+                <div className="bg-purple-50 p-2 md:p-3 rounded-lg">
+                  <p className="text-xs md:text-sm font-medium text-purple-600">覆盖率</p>
+                  <p className="text-lg md:text-2xl font-bold text-purple-900">{keywordStats.coverage}%</p>
                 </div>
-                <div className="bg-orange-50 p-3 rounded-lg">
+                <div className="bg-orange-50 p-2 md:p-3 rounded-lg">
                   <Button
                     variant="outline"
-                    className="w-full h-full bg-transparent"
-                    onClick={() => router.push("/user-portrait/user-keywords")}
+                    size="sm"
+                    className="w-full h-full bg-transparent text-xs md:text-sm"
+                    onClick={() => router.push("/user-portrait/keywords")}
                   >
-                    <Settings className="mr-2 h-4 w-4" />
-                    管理关键词
+                    <Settings className="mr-1 md:mr-2 h-3 w-3 md:h-4 md:w-4" />
+                    管理
                   </Button>
                 </div>
               </div>
-              <div className="grid grid-cols-1 md:grid-cols-5 gap-2">
-                {userKeywordStats.topKeywords.map((item, index) => (
-                  <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
-                    <span className="text-sm font-medium">{item.keyword}</span>
-                    <div className="text-right">
-                      <p className="text-sm font-bold">{item.count}</p>
+              <div className="space-y-2">
+                {keywordStats.topKeywords.map((item, index) => (
+                  <div key={index} className="flex items-center justify-between p-2 md:p-3 bg-gray-50 rounded">
+                    <div className="flex items-center gap-2 min-w-0 flex-1">
+                      <span className="text-xs md:text-sm font-medium truncate">{item.keyword}</span>
+                      <Badge className={`text-xs ${getValueColor(item.value)}`}>{item.value}</Badge>
+                    </div>
+                    <div className="text-right flex-shrink-0">
+                      <p className="text-xs md:text-sm font-bold">{item.count}</p>
                       <p className="text-xs text-green-600">{item.trend}</p>
                     </div>
                   </div>
@@ -329,54 +346,55 @@ export default function UserPortrait() {
       >
         <Card className="border shadow-sm">
           <CollapsibleTrigger className="w-full">
-            <CardHeader className="hover:bg-gray-50 transition-colors cursor-pointer">
+            <CardHeader className="hover:bg-gray-50 transition-colors cursor-pointer py-3 md:py-4">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
-                  <Tag className="h-5 w-5 text-purple-600" />
+                  <Tag className="h-4 w-4 md:h-5 md:w-5 text-purple-600" />
                   <div className="text-left">
-                    <CardTitle>标签管理</CardTitle>
-                    <CardDescription>用户标签分类和管理</CardDescription>
+                    <CardTitle className="text-base md:text-lg">标签管理</CardTitle>
+                    <CardDescription className="text-xs md:text-sm">用户标签分类与管理</CardDescription>
                   </div>
                 </div>
                 {expandedSections.tagManagement ? (
-                  <ChevronDown className="h-5 w-5" />
+                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                 ) : (
-                  <ChevronRight className="h-5 w-5" />
+                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                 )}
               </div>
             </CardHeader>
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <CardContent className="pt-0">
-              <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
-                <div className="bg-purple-50 p-3 rounded-lg">
-                  <p className="text-sm font-medium text-purple-600">总标签数</p>
-                  <p className="text-2xl font-bold text-purple-900">{tagStats.totalTags}</p>
+            <CardContent className="pt-0 px-4 md:px-6">
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mb-4">
+                <div className="bg-purple-50 p-2 md:p-3 rounded-lg">
+                  <p className="text-xs md:text-sm font-medium text-purple-600">总标签数</p>
+                  <p className="text-lg md:text-2xl font-bold text-purple-900">{tagStats.totalTags}</p>
                 </div>
-                <div className="bg-blue-50 p-3 rounded-lg">
-                  <p className="text-sm font-medium text-blue-600">活跃标签</p>
-                  <p className="text-2xl font-bold text-blue-900">{tagStats.activeTags}</p>
+                <div className="bg-blue-50 p-2 md:p-3 rounded-lg">
+                  <p className="text-xs md:text-sm font-medium text-blue-600">活跃标签</p>
+                  <p className="text-lg md:text-2xl font-bold text-blue-900">{tagStats.activeTags}</p>
                 </div>
-                <div className="bg-green-50 p-3 rounded-lg">
-                  <p className="text-sm font-medium text-green-600">覆盖率</p>
-                  <p className="text-2xl font-bold text-green-900">{tagStats.coverage}%</p>
+                <div className="bg-green-50 p-2 md:p-3 rounded-lg">
+                  <p className="text-xs md:text-sm font-medium text-green-600">覆盖率</p>
+                  <p className="text-lg md:text-2xl font-bold text-green-900">{tagStats.coverage}%</p>
                 </div>
-                <div className="bg-orange-50 p-3 rounded-lg">
+                <div className="bg-orange-50 p-2 md:p-3 rounded-lg">
                   <Button
                     variant="outline"
-                    className="w-full h-full bg-transparent"
+                    size="sm"
+                    className="w-full h-full bg-transparent text-xs md:text-sm"
                     onClick={() => router.push("/user-portrait/tags")}
                   >
-                    <Settings className="mr-2 h-4 w-4" />
-                    管理标签
+                    <Settings className="mr-1 md:mr-2 h-3 w-3 md:h-4 md:w-4" />
+                    管理
                   </Button>
                 </div>
               </div>
               <div className="grid grid-cols-1 md:grid-cols-5 gap-2">
                 {tagStats.topTags.map((item, index) => (
                   <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
-                    <Badge className={item.color}>{item.tag}</Badge>
-                    <span className="text-sm font-bold">{item.count}</span>
+                    <Badge className={`${item.color} text-xs`}>{item.tag}</Badge>
+                    <span className="text-xs font-bold ml-2">{item.count}</span>
                   </div>
                 ))}
               </div>
@@ -392,35 +410,41 @@ export default function UserPortrait() {
       >
         <Card className="border shadow-sm">
           <CollapsibleTrigger className="w-full">
-            <CardHeader className="hover:bg-gray-50 transition-colors cursor-pointer">
+            <CardHeader className="hover:bg-gray-50 transition-colors cursor-pointer py-3 md:py-4">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
-                  <Users className="h-5 w-5 text-green-600" />
+                  <Users className="h-4 w-4 md:h-5 md:w-5 text-green-600" />
                   <div className="text-left">
-                    <CardTitle>用户列表</CardTitle>
-                    <CardDescription>查看和管理所有用户 ({filteredUsers.length})</CardDescription>
+                    <CardTitle className="text-base md:text-lg">用户列表</CardTitle>
+                    <CardDescription className="text-xs md:text-sm">
+                      用户数据管理 ({filteredUsers.length})
+                    </CardDescription>
                   </div>
                 </div>
-                {expandedSections.userList ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+                {expandedSections.userList ? (
+                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
+                ) : (
+                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
+                )}
               </div>
             </CardHeader>
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <CardContent className="pt-0">
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+            <CardContent className="pt-0 px-4 md:px-6">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-4 mb-4 md:mb-6">
                 <div className="relative">
                   <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                   <Input
                     type="search"
                     placeholder="搜索用户、公司或标签..."
-                    className="pl-8"
+                    className="pl-8 text-sm"
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
                   />
                 </div>
 
                 <Select value={selectedCategory} onValueChange={setSelectedCategory}>
-                  <SelectTrigger>
+                  <SelectTrigger className="text-sm">
                     <SelectValue placeholder="选择场景分类" />
                   </SelectTrigger>
                   <SelectContent>
@@ -433,7 +457,7 @@ export default function UserPortrait() {
                 </Select>
 
                 <Select value={selectedPool} onValueChange={setSelectedPool}>
-                  <SelectTrigger>
+                  <SelectTrigger className="text-sm">
                     <SelectValue placeholder="选择流量池" />
                   </SelectTrigger>
                   <SelectContent>
@@ -446,7 +470,66 @@ export default function UserPortrait() {
                 </Select>
               </div>
 
-              <div className="overflow-x-auto">
+              <div className="space-y-3 md:hidden">
+                {/* 移动端卡片布局 */}
+                {filteredUsers.map((user) => (
+                  <div key={user.id} className="bg-white border rounded-lg p-3 space-y-2">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <Avatar className="h-8 w-8">
+                          <img src={user.avatar || "/placeholder.svg"} alt={user.name} />
+                        </Avatar>
+                        <div>
+                          <p className="font-medium text-sm">{user.name}</p>
+                          <p className="text-xs text-gray-500">{user.company}</p>
+                        </div>
+                      </div>
+                      <Badge
+                        className={
+                          user.rfmScore >= 90
+                            ? "bg-green-100 text-green-800"
+                            : user.rfmScore >= 80
+                              ? "bg-blue-100 text-blue-800"
+                              : user.rfmScore >= 70
+                                ? "bg-yellow-100 text-yellow-800"
+                                : "bg-gray-100 text-gray-800"
+                        }
+                      >
+                        {user.rfmScore}
+                      </Badge>
+                    </div>
+                    <div className="flex items-center justify-between text-xs">
+                      <span className="text-gray-500">{user.lastActive}</span>
+                      <span className="font-medium">¥{user.value.toLocaleString()}</span>
+                    </div>
+                    <div className="flex flex-wrap gap-1">
+                      {user.tags.slice(0, 3).map((tag, index) => (
+                        <Badge key={index} variant="outline" className="text-xs">
+                          {tag}
+                        </Badge>
+                      ))}
+                      {user.tags.length > 3 && (
+                        <Badge variant="outline" className="text-xs">
+                          +{user.tags.length - 3}
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <Button variant="ghost" size="sm" onClick={() => handleWechatClick(user.id)} className="text-xs">
+                        <MessageCircle className="h-3 w-3 mr-1" />
+                        {user.wechatAccounts.length}个账号
+                      </Button>
+                      <Button variant="outline" size="sm" onClick={() => handleUserClick(user.id)} className="text-xs">
+                        <Eye className="h-3 w-3 mr-1" />
+                        查看
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* 桌面端表格布局 */}
+              <div className="hidden md:block overflow-x-auto">
                 <table className="w-full">
                   <thead>
                     <tr className="bg-gray-50">
diff --git a/app/user-value/page.tsx b/app/user-value/page.tsx
index c9ac019..36c98a3 100644
--- a/app/user-value/page.tsx
+++ b/app/user-value/page.tsx
@@ -27,12 +27,12 @@ import {
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
 
-// 真实用户数据
+// 使用通用公司名称和当天时间线的用户数据
 const mockUsers = [
   {
     id: "1",
-    name: "李明华",
-    company: "阿里巴巴集团",
+    name: "张明华",
+    company: "科技创新有限公司",
     recency: 1,
     frequency: 28,
     monetary: 45600,
@@ -42,11 +42,12 @@ const mockUsers = [
     upgradeFromDays: 45,
     nextUpgrade: "VIP客户",
     upgradeProbability: 85,
+    lastActive: "今天 14:30",
   },
   {
     id: "2",
-    name: "张雨婷",
-    company: "腾讯科技",
+    name: "李雨婷",
+    company: "数字营销公司",
     recency: 3,
     frequency: 22,
     monetary: 32800,
@@ -56,11 +57,12 @@ const mockUsers = [
     upgradeFromDays: 28,
     nextUpgrade: "白金会员",
     upgradeProbability: 78,
+    lastActive: "今天 13:45",
   },
   {
     id: "3",
     name: "王建国",
-    company: "字节跳动",
+    company: "软件开发工作室",
     recency: 2,
     frequency: 25,
     monetary: 38900,
@@ -70,11 +72,12 @@ const mockUsers = [
     upgradeFromDays: 38,
     nextUpgrade: "企业VIP",
     upgradeProbability: 82,
+    lastActive: "今天 12:20",
   },
   {
     id: "4",
     name: "刘思琪",
-    company: "美团点评",
+    company: "数据分析咨询",
     recency: 7,
     frequency: 18,
     monetary: 25400,
@@ -84,11 +87,12 @@ const mockUsers = [
     upgradeFromDays: 12,
     nextUpgrade: "高价值用户",
     upgradeProbability: 68,
+    lastActive: "今天 11:15",
   },
   {
     id: "5",
     name: "陈浩然",
-    company: "京东集团",
+    company: "云计算服务商",
     recency: 4,
     frequency: 20,
     monetary: 28700,
@@ -98,11 +102,12 @@ const mockUsers = [
     upgradeFromDays: 22,
     nextUpgrade: "高价值用户",
     upgradeProbability: 72,
+    lastActive: "今天 10:30",
   },
   {
     id: "6",
     name: "周欣妍",
-    company: "滴滴出行",
+    company: "用户体验设计",
     recency: 12,
     frequency: 15,
     monetary: 18600,
@@ -112,11 +117,12 @@ const mockUsers = [
     upgradeFromDays: 8,
     nextUpgrade: "中高价值用户",
     upgradeProbability: 55,
+    lastActive: "今天 09:45",
   },
   {
     id: "7",
     name: "马志强",
-    company: "华为技术",
+    company: "企业解决方案",
     recency: 6,
     frequency: 16,
     monetary: 22100,
@@ -126,11 +132,12 @@ const mockUsers = [
     upgradeFromDays: 15,
     nextUpgrade: "中高价值用户",
     upgradeProbability: 61,
+    lastActive: "今天 08:20",
   },
   {
     id: "8",
     name: "赵丽娟",
-    company: "小米科技",
+    company: "品牌营销策划",
     recency: 15,
     frequency: 12,
     monetary: 15800,
@@ -140,6 +147,7 @@ const mockUsers = [
     upgradeFromDays: 5,
     nextUpgrade: "中高价值用户",
     upgradeProbability: 45,
+    lastActive: "今天 07:30",
   },
 ]
 
@@ -186,33 +194,33 @@ export default function UserValuePage() {
   }
 
   return (
-    <div className="container mx-auto p-4 space-y-6">
+    <div className="container mx-auto p-4 space-y-4 md:space-y-6">
       {/* 页面标题和工具栏 */}
       <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
         <div>
-          <h1 className="text-3xl font-bold">用户估值</h1>
-          <p className="text-muted-foreground mt-1">用户价值评估与升级路径分析</p>
+          <h1 className="text-2xl md:text-3xl font-bold">价值评估</h1>
+          <p className="text-sm md:text-base text-muted-foreground mt-1">用户价值分析与升级路径</p>
         </div>
         <div className="flex flex-wrap gap-2">
           <Select value={timeRange} onValueChange={setTimeRange}>
-            <SelectTrigger className="w-[140px]">
-              <SelectValue placeholder="选择时间范围" />
+            <SelectTrigger className="w-[120px] md:w-[140px] text-sm">
+              <SelectValue placeholder="时间范围" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="7days">最近7天</SelectItem>
-              <SelectItem value="30days">最近30天</SelectItem>
-              <SelectItem value="90days">最近90天</SelectItem>
+              <SelectItem value="7days">近7天</SelectItem>
+              <SelectItem value="30days">近30天</SelectItem>
+              <SelectItem value="90days">近90天</SelectItem>
             </SelectContent>
           </Select>
-          <Button variant="outline" size="icon">
+          <Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
             <Filter className="h-4 w-4" />
           </Button>
-          <Button variant="outline" size="icon">
+          <Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
             <RefreshCw className="h-4 w-4" />
           </Button>
-          <Button variant="outline">
+          <Button variant="outline" size="sm" className="hidden md:flex bg-transparent">
             <Download className="mr-2 h-4 w-4" />
-            导出报告
+            导出
           </Button>
         </div>
       </div>
@@ -224,118 +232,122 @@ export default function UserValuePage() {
       >
         <Card className="border-none shadow-md">
           <CollapsibleTrigger className="w-full">
-            <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b hover:from-green-100 hover:to-emerald-100 transition-colors cursor-pointer">
+            <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b hover:from-green-100 hover:to-emerald-100 transition-colors cursor-pointer py-3 md:py-4">
               <div className="flex justify-between items-center">
                 <div className="flex items-center gap-3">
-                  <Target className="h-5 w-5 text-green-600" />
+                  <Target className="h-4 w-4 md:h-5 md:w-5 text-green-600" />
                   <div className="text-left">
-                    <CardTitle>用户估值概览</CardTitle>
-                    <CardDescription>用户价值评估整体情况</CardDescription>
+                    <CardTitle className="text-base md:text-lg">价值概览</CardTitle>
+                    <CardDescription className="text-xs md:text-sm">用户价值评估整体情况</CardDescription>
                   </div>
                 </div>
-                {expandedSections.overview ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+                {expandedSections.overview ? (
+                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
+                ) : (
+                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
+                )}
               </div>
             </CardHeader>
           </CollapsibleTrigger>
           <CollapsibleContent>
             <CardContent className="p-4">
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
                 <Card className="bg-gradient-to-br from-green-50 to-emerald-50 border-none shadow-sm">
-                  <CardContent className="p-4">
+                  <CardContent className="p-3 md:p-4">
                     <div className="flex justify-between items-start">
                       <div>
-                        <div className="text-sm font-medium text-green-600">平均用户估值</div>
-                        <div className="text-2xl font-bold mt-2">¥3,248</div>
-                        <div className="text-sm text-green-600 mt-1 flex items-center">
-                          <ArrowUpRight className="h-4 w-4 mr-1" />
-                          较上月增长 8.2%
+                        <div className="text-xs md:text-sm font-medium text-green-600">平均估值</div>
+                        <div className="text-lg md:text-2xl font-bold mt-1 md:mt-2">¥3,248</div>
+                        <div className="text-xs text-green-600 mt-1 flex items-center">
+                          <ArrowUpRight className="h-3 w-3 md:h-4 md:w-4 mr-1" />
+                          +8.2%
                         </div>
                       </div>
-                      <div className="bg-green-100 p-2 rounded-full">
-                        <Target className="h-5 w-5 text-green-600" />
+                      <div className="bg-green-100 p-1.5 md:p-2 rounded-full">
+                        <Target className="h-3 w-3 md:h-5 md:w-5 text-green-600" />
                       </div>
                     </div>
-                    <div className="mt-3">
+                    <div className="mt-2 md:mt-3">
                       <div className="flex justify-between text-xs mb-1">
-                        <span>预期目标</span>
+                        <span>目标</span>
                         <span>94%</span>
                       </div>
-                      <Progress value={94} className="h-1.5 bg-green-100" />
+                      <Progress value={94} className="h-1 md:h-1.5 bg-green-100" />
                     </div>
                   </CardContent>
                 </Card>
 
                 <Card className="bg-gradient-to-br from-purple-50 to-pink-50 border-none shadow-sm">
-                  <CardContent className="p-4">
+                  <CardContent className="p-3 md:p-4">
                     <div className="flex justify-between items-start">
                       <div>
-                        <div className="text-sm font-medium text-purple-600">高价值用户</div>
-                        <div className="text-2xl font-bold mt-2">45,678</div>
-                        <div className="text-sm text-green-600 mt-1 flex items-center">
-                          <ArrowUpRight className="h-4 w-4 mr-1" />
-                          较上月增长 12.3%
+                        <div className="text-xs md:text-sm font-medium text-purple-600">高价值用户</div>
+                        <div className="text-lg md:text-2xl font-bold mt-1 md:mt-2">45,678</div>
+                        <div className="text-xs text-green-600 mt-1 flex items-center">
+                          <ArrowUpRight className="h-3 w-3 md:h-4 md:w-4 mr-1" />
+                          +12.3%
                         </div>
                       </div>
-                      <div className="bg-purple-100 p-2 rounded-full">
-                        <TrendingUp className="h-5 w-5 text-purple-600" />
+                      <div className="bg-purple-100 p-1.5 md:p-2 rounded-full">
+                        <TrendingUp className="h-3 w-3 md:h-5 md:w-5 text-purple-600" />
                       </div>
                     </div>
-                    <div className="mt-3">
+                    <div className="mt-2 md:mt-3">
                       <div className="flex justify-between text-xs mb-1">
-                        <span>占总用户比例</span>
+                        <span>占比</span>
                         <span>28.6%</span>
                       </div>
-                      <Progress value={28.6} className="h-1.5 bg-purple-100" />
+                      <Progress value={28.6} className="h-1 md:h-1.5 bg-purple-100" />
                     </div>
                   </CardContent>
                 </Card>
 
                 <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-none shadow-sm">
-                  <CardContent className="p-4">
+                  <CardContent className="p-3 md:p-4">
                     <div className="flex justify-between items-start">
                       <div>
-                        <div className="text-sm font-medium text-blue-600">用户价值增长率</div>
-                        <div className="text-2xl font-bold mt-2">15.8%</div>
-                        <div className="text-sm text-green-600 mt-1 flex items-center">
-                          <ArrowUpRight className="h-4 w-4 mr-1" />
-                          较上月提升 2.1%
+                        <div className="text-xs md:text-sm font-medium text-blue-600">价值增长率</div>
+                        <div className="text-lg md:text-2xl font-bold mt-1 md:mt-2">15.8%</div>
+                        <div className="text-xs text-green-600 mt-1 flex items-center">
+                          <ArrowUpRight className="h-3 w-3 md:h-4 md:w-4 mr-1" />
+                          +2.1%
                         </div>
                       </div>
-                      <div className="bg-blue-100 p-2 rounded-full">
-                        <BarChart3 className="h-5 w-5 text-blue-600" />
+                      <div className="bg-blue-100 p-1.5 md:p-2 rounded-full">
+                        <BarChart3 className="h-3 w-3 md:h-5 md:w-5 text-blue-600" />
                       </div>
                     </div>
-                    <div className="mt-3">
+                    <div className="mt-2 md:mt-3">
                       <div className="flex justify-between text-xs mb-1">
                         <span>行业平均</span>
                         <span>11.2%</span>
                       </div>
-                      <Progress value={141} className="h-1.5 bg-blue-100" />
+                      <Progress value={141} className="h-1 md:h-1.5 bg-blue-100" />
                     </div>
                   </CardContent>
                 </Card>
 
                 <Card className="bg-gradient-to-br from-amber-50 to-yellow-50 border-none shadow-sm">
-                  <CardContent className="p-4">
+                  <CardContent className="p-3 md:p-4">
                     <div className="flex justify-between items-start">
                       <div>
-                        <div className="text-sm font-medium text-amber-600">用户升级率</div>
-                        <div className="text-2xl font-bold mt-2">12.5%</div>
-                        <div className="text-sm text-green-600 mt-1 flex items-center">
-                          <ArrowUpRight className="h-4 w-4 mr-1" />
-                          较上月提升 1.8%
+                        <div className="text-xs md:text-sm font-medium text-amber-600">升级率</div>
+                        <div className="text-lg md:text-2xl font-bold mt-1 md:mt-2">12.5%</div>
+                        <div className="text-xs text-green-600 mt-1 flex items-center">
+                          <ArrowUpRight className="h-3 w-3 md:h-4 md:w-4 mr-1" />
+                          +1.8%
                         </div>
                       </div>
-                      <div className="bg-amber-100 p-2 rounded-full">
-                        <Users className="h-5 w-5 text-amber-600" />
+                      <div className="bg-amber-100 p-1.5 md:p-2 rounded-full">
+                        <Users className="h-3 w-3 md:h-5 md:w-5 text-amber-600" />
                       </div>
                     </div>
-                    <div className="mt-3">
+                    <div className="mt-2 md:mt-3">
                       <div className="flex justify-between text-xs mb-1">
                         <span>目标</span>
                         <span>15%</span>
                       </div>
-                      <Progress value={83} className="h-1.5 bg-amber-100" />
+                      <Progress value={83} className="h-1 md:h-1.5 bg-amber-100" />
                     </div>
                   </CardContent>
                 </Card>
@@ -352,13 +364,13 @@ export default function UserValuePage() {
       >
         <Card className="border-none shadow-md">
           <CollapsibleTrigger className="w-full">
-            <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b hover:from-blue-100 hover:to-indigo-100 transition-colors cursor-pointer">
+            <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b hover:from-blue-100 hover:to-indigo-100 transition-colors cursor-pointer py-3 md:py-4">
               <div className="flex justify-between items-center">
                 <div className="flex items-center gap-3">
-                  <BarChart3 className="h-5 w-5 text-blue-600" />
+                  <BarChart3 className="h-4 w-4 md:h-5 md:w-5 text-blue-600" />
                   <div className="text-left">
-                    <CardTitle className="flex items-center gap-2">
-                      RFM用户价值模型
+                    <CardTitle className="flex items-center gap-2 text-base md:text-lg">
+                      RFM估值模型
                       <Button
                         variant="ghost"
                         size="sm"
@@ -366,44 +378,48 @@ export default function UserValuePage() {
                           e.stopPropagation()
                           setShowModelDialog(true)
                         }}
-                        className="h-6 w-6 p-0"
+                        className="h-5 w-5 md:h-6 md:w-6 p-0"
                       >
-                        <HelpCircle className="h-4 w-4" />
+                        <HelpCircle className="h-3 w-3 md:h-4 md:w-4" />
                       </Button>
                     </CardTitle>
-                    <CardDescription>基于用户行为的价值评估模型</CardDescription>
+                    <CardDescription className="text-xs md:text-sm">基于用户行为的价值评估</CardDescription>
                   </div>
                 </div>
-                {expandedSections.model ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+                {expandedSections.model ? (
+                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
+                ) : (
+                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
+                )}
               </div>
             </CardHeader>
           </CollapsibleTrigger>
           <CollapsibleContent>
             <CardContent className="p-4">
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
                 <div className="space-y-2">
-                  <h3 className="font-semibold flex items-center">
-                    <span className="bg-red-100 text-red-800 w-6 h-6 rounded-full flex items-center justify-center mr-2">
+                  <h3 className="font-semibold flex items-center text-sm md:text-base">
+                    <span className="bg-red-100 text-red-800 w-5 h-5 md:w-6 md:h-6 rounded-full flex items-center justify-center mr-2 text-xs md:text-sm">
                       R
                     </span>
-                    Recency (最近消费时间)
+                    最近消费时间
                   </h3>
-                  <p className="text-sm text-muted-foreground">用户最近一次交易的时间间隔，时间越短价值越高。</p>
-                  <div className="bg-gray-50 p-3 rounded-md">
-                    <div className="text-sm">
-                      <div className="flex justify-between mb-1">
+                  <p className="text-xs md:text-sm text-muted-foreground">时间间隔越短价值越高</p>
+                  <div className="bg-gray-50 p-2 md:p-3 rounded-md">
+                    <div className="text-xs md:text-sm space-y-1">
+                      <div className="flex justify-between">
                         <span>1-3天</span>
                         <span className="font-medium">5分</span>
                       </div>
-                      <div className="flex justify-between mb-1">
+                      <div className="flex justify-between">
                         <span>4-7天</span>
                         <span className="font-medium">4分</span>
                       </div>
-                      <div className="flex justify-between mb-1">
+                      <div className="flex justify-between">
                         <span>8-14天</span>
                         <span className="font-medium">3分</span>
                       </div>
-                      <div className="flex justify-between mb-1">
+                      <div className="flex justify-between">
                         <span>15-30天</span>
                         <span className="font-medium">2分</span>
                       </div>
@@ -416,28 +432,28 @@ export default function UserValuePage() {
                 </div>
 
                 <div className="space-y-2">
-                  <h3 className="font-semibold flex items-center">
-                    <span className="bg-green-100 text-green-800 w-6 h-6 rounded-full flex items-center justify-center mr-2">
+                  <h3 className="font-semibold flex items-center text-sm md:text-base">
+                    <span className="bg-green-100 text-green-800 w-5 h-5 md:w-6 md:h-6 rounded-full flex items-center justify-center mr-2 text-xs md:text-sm">
                       F
                     </span>
-                    Frequency (消费频率)
+                    消费频率
                   </h3>
-                  <p className="text-sm text-muted-foreground">用户在一段时间内的交易次数，频率越高价值越高。</p>
-                  <div className="bg-gray-50 p-3 rounded-md">
-                    <div className="text-sm">
-                      <div className="flex justify-between mb-1">
+                  <p className="text-xs md:text-sm text-muted-foreground">频率越高价值越高</p>
+                  <div className="bg-gray-50 p-2 md:p-3 rounded-md">
+                    <div className="text-xs md:text-sm space-y-1">
+                      <div className="flex justify-between">
                         <span>25次以上/月</span>
                         <span className="font-medium">5分</span>
                       </div>
-                      <div className="flex justify-between mb-1">
+                      <div className="flex justify-between">
                         <span>20-24次/月</span>
                         <span className="font-medium">4分</span>
                       </div>
-                      <div className="flex justify-between mb-1">
+                      <div className="flex justify-between">
                         <span>15-19次/月</span>
                         <span className="font-medium">3分</span>
                       </div>
-                      <div className="flex justify-between mb-1">
+                      <div className="flex justify-between">
                         <span>10-14次/月</span>
                         <span className="font-medium">2分</span>
                       </div>
@@ -450,28 +466,28 @@ export default function UserValuePage() {
                 </div>
 
                 <div className="space-y-2">
-                  <h3 className="font-semibold flex items-center">
-                    <span className="bg-blue-100 text-blue-800 w-6 h-6 rounded-full flex items-center justify-center mr-2">
+                  <h3 className="font-semibold flex items-center text-sm md:text-base">
+                    <span className="bg-blue-100 text-blue-800 w-5 h-5 md:w-6 md:h-6 rounded-full flex items-center justify-center mr-2 text-xs md:text-sm">
                       M
                     </span>
-                    Monetary (消费金额)
+                    消费金额
                   </h3>
-                  <p className="text-sm text-muted-foreground">用户在一段时间内的消费金额，金额越高价值越高。</p>
-                  <div className="bg-gray-50 p-3 rounded-md">
-                    <div className="text-sm">
-                      <div className="flex justify-between mb-1">
+                  <p className="text-xs md:text-sm text-muted-foreground">金额越高价值越高</p>
+                  <div className="bg-gray-50 p-2 md:p-3 rounded-md">
+                    <div className="text-xs md:text-sm space-y-1">
+                      <div className="flex justify-between">
                         <span>30000元以上</span>
                         <span className="font-medium">5分</span>
                       </div>
-                      <div className="flex justify-between mb-1">
+                      <div className="flex justify-between">
                         <span>20000-29999元</span>
                         <span className="font-medium">4分</span>
                       </div>
-                      <div className="flex justify-between mb-1">
+                      <div className="flex justify-between">
                         <span>10000-19999元</span>
                         <span className="font-medium">3分</span>
                       </div>
-                      <div className="flex justify-between mb-1">
+                      <div className="flex justify-between">
                         <span>5000-9999元</span>
                         <span className="font-medium">2分</span>
                       </div>
@@ -484,28 +500,28 @@ export default function UserValuePage() {
                 </div>
               </div>
 
-              <div className="mt-6">
-                <h3 className="font-semibold mb-3">RFM评分等级</h3>
-                <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
-                  <div className="bg-green-100 p-3 rounded-md text-center">
-                    <p className="font-medium text-green-800">高价值用户</p>
-                    <p className="text-sm text-green-700">85-100分</p>
+              <div className="mt-4 md:mt-6">
+                <h3 className="font-semibold mb-3 text-sm md:text-base">RFM评分等级</h3>
+                <div className="grid grid-cols-2 md:grid-cols-5 gap-2 md:gap-3">
+                  <div className="bg-green-100 p-2 md:p-3 rounded-md text-center">
+                    <p className="font-medium text-green-800 text-xs md:text-sm">高价值用户</p>
+                    <p className="text-xs text-green-700">85-100分</p>
                   </div>
-                  <div className="bg-blue-100 p-3 rounded-md text-center">
-                    <p className="font-medium text-blue-800">中高价值用户</p>
-                    <p className="text-sm text-blue-700">70-84分</p>
+                  <div className="bg-blue-100 p-2 md:p-3 rounded-md text-center">
+                    <p className="font-medium text-blue-800 text-xs md:text-sm">中高价值用户</p>
+                    <p className="text-xs text-blue-700">70-84分</p>
                   </div>
-                  <div className="bg-yellow-100 p-3 rounded-md text-center">
-                    <p className="font-medium text-yellow-800">中等价值用户</p>
-                    <p className="text-sm text-yellow-700">55-69分</p>
+                  <div className="bg-yellow-100 p-2 md:p-3 rounded-md text-center">
+                    <p className="font-medium text-yellow-800 text-xs md:text-sm">中等价值用户</p>
+                    <p className="text-xs text-yellow-700">55-69分</p>
                   </div>
-                  <div className="bg-gray-100 p-3 rounded-md text-center">
-                    <p className="font-medium text-gray-800">低价值用户</p>
-                    <p className="text-sm text-gray-700">40-54分</p>
+                  <div className="bg-gray-100 p-2 md:p-3 rounded-md text-center">
+                    <p className="font-medium text-gray-800 text-xs md:text-sm">低价值用户</p>
+                    <p className="text-xs text-gray-700">40-54分</p>
                   </div>
-                  <div className="bg-red-100 p-3 rounded-md text-center">
-                    <p className="font-medium text-red-800">流失风险用户</p>
-                    <p className="text-sm text-red-700">0-39分</p>
+                  <div className="bg-red-100 p-2 md:p-3 rounded-md text-center">
+                    <p className="font-medium text-red-800 text-xs md:text-sm">流失风险用户</p>
+                    <p className="text-xs text-red-700">0-39分</p>
                   </div>
                 </div>
               </div>
@@ -521,35 +537,75 @@ export default function UserValuePage() {
       >
         <Card className="border-none shadow-md">
           <CollapsibleTrigger className="w-full">
-            <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b hover:from-purple-100 hover:to-pink-100 transition-colors cursor-pointer">
+            <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b hover:from-purple-100 hover:to-pink-100 transition-colors cursor-pointer py-3 md:py-4">
               <div className="flex justify-between items-center">
                 <div className="flex items-center gap-3">
-                  <Users className="h-5 w-5 text-purple-600" />
+                  <Users className="h-4 w-4 md:h-5 md:w-5 text-purple-600" />
                   <div className="text-left">
-                    <CardTitle>用户价值分析</CardTitle>
-                    <CardDescription>用户价值分布与详细数据 ({filteredUsers.length})</CardDescription>
+                    <CardTitle className="text-base md:text-lg">价值分析</CardTitle>
+                    <CardDescription className="text-xs md:text-sm">
+                      用户价值详细数据 ({filteredUsers.length})
+                    </CardDescription>
                   </div>
                 </div>
-                {expandedSections.analysis ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+                {expandedSections.analysis ? (
+                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
+                ) : (
+                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
+                )}
               </div>
             </CardHeader>
           </CollapsibleTrigger>
           <CollapsibleContent>
             <CardContent className="p-4">
               <div className="mb-4">
-                <div className="relative w-64">
+                <div className="relative w-full md:w-64">
                   <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                   <Input
                     type="search"
                     placeholder="搜索用户或公司..."
-                    className="pl-8"
+                    className="pl-8 text-sm"
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
                   />
                 </div>
               </div>
 
-              <div className="rounded-md border">
+              {/* 移动端卡片布局 */}
+              <div className="space-y-3 md:hidden">
+                {filteredUsers.map((user) => (
+                  <div key={user.id} className="bg-white border rounded-lg p-3 space-y-2">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="font-medium text-sm">{user.name}</p>
+                        <p className="text-xs text-gray-500">{user.company}</p>
+                      </div>
+                      <Badge className={`${getRFMLevelColor(user.level)} text-xs`}>{user.rfmScore}</Badge>
+                    </div>
+                    <div className="grid grid-cols-3 gap-2 text-xs">
+                      <div className="text-center">
+                        <p className="text-gray-500">R值</p>
+                        <p className="font-medium">{user.recency}天</p>
+                      </div>
+                      <div className="text-center">
+                        <p className="text-gray-500">F值</p>
+                        <p className="font-medium">{user.frequency}次</p>
+                      </div>
+                      <div className="text-center">
+                        <p className="text-gray-500">M值</p>
+                        <p className="font-medium">¥{(user.monetary / 1000).toFixed(0)}K</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-gray-500">{user.lastActive}</span>
+                      <span className="text-xs text-green-600">{user.growth}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* 桌面端表格布局 */}
+              <div className="hidden md:block rounded-md border">
                 <Table>
                   <TableHeader>
                     <TableRow>
@@ -593,13 +649,13 @@ export default function UserValuePage() {
       >
         <Card className="border-none shadow-md">
           <CollapsibleTrigger className="w-full">
-            <CardHeader className="bg-gradient-to-r from-orange-50 to-red-50 border-b hover:from-orange-100 hover:to-red-100 transition-colors cursor-pointer">
+            <CardHeader className="bg-gradient-to-r from-orange-50 to-red-50 border-b hover:from-orange-100 hover:to-red-100 transition-colors cursor-pointer py-3 md:py-4">
               <div className="flex justify-between items-center">
                 <div className="flex items-center gap-3">
-                  <TrendingUp className="h-5 w-5 text-orange-600" />
+                  <TrendingUp className="h-4 w-4 md:h-5 md:w-5 text-orange-600" />
                   <div className="text-left">
-                    <CardTitle className="flex items-center gap-2">
-                      用户升级路径分析
+                    <CardTitle className="flex items-center gap-2 text-base md:text-lg">
+                      升级路径分析
                       <Button
                         variant="ghost"
                         size="sm"
@@ -607,45 +663,45 @@ export default function UserValuePage() {
                           e.stopPropagation()
                           setShowUpgradeDialog(true)
                         }}
-                        className="h-6 w-6 p-0"
+                        className="h-5 w-5 md:h-6 md:w-6 p-0"
                       >
-                        <HelpCircle className="h-4 w-4" />
+                        <HelpCircle className="h-3 w-3 md:h-4 md:w-4" />
                       </Button>
                     </CardTitle>
-                    <CardDescription>用户价值提升路径与策略</CardDescription>
+                    <CardDescription className="text-xs md:text-sm">用户价值提升路径与策略</CardDescription>
                   </div>
                 </div>
                 {expandedSections.upgradePaths ? (
-                  <ChevronDown className="h-5 w-5" />
+                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                 ) : (
-                  <ChevronRight className="h-5 w-5" />
+                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                 )}
               </div>
             </CardHeader>
           </CollapsibleTrigger>
           <CollapsibleContent>
             <CardContent className="p-4">
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-4 mb-4 md:mb-6">
                 <Card className="bg-white shadow-sm">
                   <CardHeader className="pb-2">
-                    <CardTitle className="text-lg flex items-center">
-                      <Target className="h-5 w-5 mr-2 text-green-600" />
-                      升级潜力分析
+                    <CardTitle className="text-sm md:text-lg flex items-center">
+                      <Target className="h-4 w-4 md:h-5 md:w-5 mr-2 text-green-600" />
+                      升级潜力
                     </CardTitle>
                   </CardHeader>
-                  <CardContent>
-                    <div className="space-y-2">
+                  <CardContent className="text-xs md:text-sm">
+                    <div className="space-y-1 md:space-y-2">
                       <div className="flex justify-between items-center">
-                        <span className="text-sm">高潜力用户</span>
-                        <span className="text-sm font-medium">2,345</span>
+                        <span>高潜力用户</span>
+                        <span className="font-medium">2,345</span>
                       </div>
                       <div className="flex justify-between items-center">
-                        <span className="text-sm">中潜力用户</span>
-                        <span className="text-sm font-medium">5,678</span>
+                        <span>中潜力用户</span>
+                        <span className="font-medium">5,678</span>
                       </div>
                       <div className="flex justify-between items-center">
-                        <span className="text-sm">低潜力用户</span>
-                        <span className="text-sm font-medium">1,234</span>
+                        <span>低潜力用户</span>
+                        <span className="font-medium">1,234</span>
                       </div>
                     </div>
                   </CardContent>
@@ -653,24 +709,24 @@ export default function UserValuePage() {
 
                 <Card className="bg-white shadow-sm">
                   <CardHeader className="pb-2">
-                    <CardTitle className="text-lg flex items-center">
-                      <Layers className="h-5 w-5 mr-2 text-blue-600" />
+                    <CardTitle className="text-sm md:text-lg flex items-center">
+                      <Layers className="h-4 w-4 md:h-5 md:w-5 mr-2 text-blue-600" />
                       升级成功率
                     </CardTitle>
                   </CardHeader>
-                  <CardContent>
-                    <div className="space-y-2">
+                  <CardContent className="text-xs md:text-sm">
+                    <div className="space-y-1 md:space-y-2">
                       <div className="flex justify-between items-center">
-                        <span className="text-sm">本月升级率</span>
-                        <span className="text-sm font-medium">12.5%</span>
+                        <span>本月升级率</span>
+                        <span className="font-medium">12.5%</span>
                       </div>
                       <div className="flex justify-between items-center">
-                        <span className="text-sm">平均升级周期</span>
-                        <span className="text-sm font-medium">28天</span>
+                        <span>平均升级周期</span>
+                        <span className="font-medium">28天</span>
                       </div>
                       <div className="flex justify-between items-center">
-                        <span className="text-sm">预期升级用户</span>
-                        <span className="text-sm font-medium">1,856</span>
+                        <span>预期升级用户</span>
+                        <span className="font-medium">1,856</span>
                       </div>
                     </div>
                   </CardContent>
@@ -678,54 +734,54 @@ export default function UserValuePage() {
 
                 <Card className="bg-white shadow-sm">
                   <CardHeader className="pb-2">
-                    <CardTitle className="text-lg flex items-center">
-                      <Tag className="h-5 w-5 mr-2 text-purple-600" />
-                      升级价值贡献
+                    <CardTitle className="text-sm md:text-lg flex items-center">
+                      <Tag className="h-4 w-4 md:h-5 md:w-5 mr-2 text-purple-600" />
+                      价值贡献
                     </CardTitle>
                   </CardHeader>
-                  <CardContent>
-                    <div className="space-y-2">
+                  <CardContent className="text-xs md:text-sm">
+                    <div className="space-y-1 md:space-y-2">
                       <div className="flex justify-between items-center">
-                        <span className="text-sm">升级价值增长</span>
-                        <span className="text-sm font-medium">¥2.3M</span>
+                        <span>升级价值增长</span>
+                        <span className="font-medium">¥2.3M</span>
                       </div>
                       <div className="flex justify-between items-center">
-                        <span className="text-sm">平均用户价值提升</span>
-                        <span className="text-sm font-medium">¥1,245</span>
+                        <span>平均价值提升</span>
+                        <span className="font-medium">¥1,245</span>
                       </div>
                       <div className="flex justify-between items-center">
-                        <span className="text-sm">ROI提升</span>
-                        <span className="text-sm font-medium">35.8%</span>
+                        <span>ROI提升</span>
+                        <span className="font-medium">35.8%</span>
                       </div>
                     </div>
                   </CardContent>
                 </Card>
               </div>
 
-              <div className="space-y-4">
-                <h3 className="text-lg font-medium">个人升级路径推荐</h3>
-                <div className="space-y-3">
+              <div className="space-y-3 md:space-y-4">
+                <h3 className="text-sm md:text-lg font-medium">个人升级路径推荐</h3>
+                <div className="space-y-2 md:space-y-3">
                   {filteredUsers.slice(0, 5).map((user) => (
                     <div
                       key={user.id}
-                      className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50"
+                      className="flex flex-col md:flex-row md:items-center justify-between p-3 md:p-4 border rounded-lg hover:bg-gray-50 space-y-2 md:space-y-0"
                     >
-                      <div className="flex items-center gap-4">
+                      <div className="flex items-center gap-3 md:gap-4">
                         <div>
-                          <p className="font-medium">{user.name}</p>
-                          <p className="text-sm text-gray-500">{user.company}</p>
+                          <p className="font-medium text-sm md:text-base">{user.name}</p>
+                          <p className="text-xs md:text-sm text-gray-500">{user.company}</p>
                         </div>
-                        <Badge className={getRFMLevelColor(user.level)}>{user.level}</Badge>
+                        <Badge className={`${getRFMLevelColor(user.level)} text-xs`}>{user.level}</Badge>
                       </div>
-                      <div className="flex items-center gap-4">
-                        <div className="text-right">
-                          <p className="text-sm font-medium">下一级别: {user.nextUpgrade}</p>
-                          <p className="text-sm text-gray-500">升级概率: {user.upgradeProbability}%</p>
+                      <div className="flex flex-col md:flex-row items-start md:items-center gap-2 md:gap-4">
+                        <div className="text-left md:text-right">
+                          <p className="text-xs md:text-sm font-medium">下一级别: {user.nextUpgrade}</p>
+                          <p className="text-xs text-gray-500">升级概率: {user.upgradeProbability}%</p>
                         </div>
-                        <div className="w-24">
-                          <Progress value={user.upgradeProbability} className="h-2" />
+                        <div className="w-full md:w-24">
+                          <Progress value={user.upgradeProbability} className="h-1.5 md:h-2" />
                         </div>
-                        <Button variant="outline" size="sm">
+                        <Button variant="outline" size="sm" className="text-xs bg-transparent">
                           查看策略
                         </Button>
                       </div>
diff --git a/components/tag-rules/rule-editor.tsx b/components/tag-rules/rule-editor.tsx
index f7e31a4..f8dcc6f 100644
--- a/components/tag-rules/rule-editor.tsx
+++ b/components/tag-rules/rule-editor.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
@@ -9,269 +9,555 @@ 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"
+import { Separator } from "@/components/ui/separator"
+import { AlertCircle, Plus, X, Save, TestTube } from "lucide-react"
+import { Alert, AlertDescription } from "@/components/ui/alert"
 
-interface RuleEditorProps {
-  ruleId: string | null
+interface TagRule {
+  id?: string
+  name: string
+  description: string
+  conditions: RuleCondition[]
+  actions: RuleAction[]
+  priority: number
+  enabled: boolean
+  schedule?: RuleSchedule
 }
 
-export function RuleEditor({ ruleId }: RuleEditorProps) {
-  const [rule, setRule] = useState({
+interface RuleCondition {
+  field: string
+  operator: string
+  value: string
+  logicalOperator?: "AND" | "OR"
+}
+
+interface RuleAction {
+  type: "add_tag" | "remove_tag" | "update_field"
+  target: string
+  value: string
+}
+
+interface RuleSchedule {
+  type: "immediate" | "scheduled" | "recurring"
+  startTime?: string
+  interval?: string
+}
+
+interface RuleEditorProps {
+  ruleId?: string
+  onSave: (rule: TagRule) => void
+  onCancel: () => void
+}
+
+export function RuleEditor({ ruleId, onSave, onCancel }: RuleEditorProps) {
+  const [rule, setRule] = useState<TagRule>({
     name: "",
     description: "",
-    targetTag: "",
-    condition: "",
-    priority: "2",
-    status: "draft",
-    sql: "",
+    conditions: [{ field: "", operator: "", value: "" }],
+    actions: [{ type: "add_tag", target: "", value: "" }],
+    priority: 1,
+    enabled: true,
   })
-  const [activeTab, setActiveTab] = useState("visual")
-  const [validationResult, setValidationResult] = useState<{
-    isValid: boolean
-    message: string
-  } | null>(null)
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [testResults, setTestResults] = useState<any>(null)
+  const [validationErrors, setValidationErrors] = useState<string[]>([])
+
+  const fieldOptions = [
+    { value: "user_type", label: "用户类型" },
+    { value: "registration_date", label: "注册日期" },
+    { value: "last_login", label: "最后登录" },
+    { value: "purchase_amount", label: "购买金额" },
+    { value: "activity_score", label: "活跃度评分" },
+    { value: "device_type", label: "设备类型" },
+    { value: "location", label: "地理位置" },
+    { value: "age", label: "年龄" },
+    { value: "gender", label: "性别" },
+  ]
+
+  const operatorOptions = [
+    { value: "equals", label: "等于" },
+    { value: "not_equals", label: "不等于" },
+    { value: "greater_than", label: "大于" },
+    { value: "less_than", label: "小于" },
+    { value: "contains", label: "包含" },
+    { value: "not_contains", label: "不包含" },
+    { value: "starts_with", label: "开始于" },
+    { value: "ends_with", label: "结束于" },
+    { value: "in_range", label: "在范围内" },
+  ]
 
   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)
+      loadRule(ruleId)
     }
   }, [ruleId])
 
-  const handleValidate = () => {
-    // 模拟验证逻辑
-    if (rule.condition.trim() === "") {
-      setValidationResult({
-        isValid: false,
-        message: "规则条件不能为空",
+  const loadRule = async (id: string) => {
+    setIsLoading(true)
+    try {
+      // 模拟API调用
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      // 这里应该从API加载规则数据
+      setRule({
+        id,
+        name: "示例规则",
+        description: "这是一个示例规则",
+        conditions: [{ field: "user_type", operator: "equals", value: "premium" }],
+        actions: [{ type: "add_tag", target: "tag", value: "高价值用户" }],
+        priority: 1,
+        enabled: true,
       })
-      return
+    } catch (error) {
+      console.error("加载规则失败:", error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const validateRule = (): string[] => {
+    const errors: string[] = []
+
+    if (!rule.name.trim()) {
+      errors.push("规则名称不能为空")
     }
 
-    if (activeTab === "sql" && rule.sql.trim() === "") {
-      setValidationResult({
-        isValid: false,
-        message: "SQL 语句不能为空",
-      })
-      return
+    if (rule.conditions.length === 0) {
+      errors.push("至少需要一个条件")
     }
 
-    // 模拟验证成功
-    setValidationResult({
-      isValid: true,
-      message: "规则验证通过，可以保存或执行",
+    rule.conditions.forEach((condition, index) => {
+      if (!condition.field || !condition.operator || !condition.value) {
+        errors.push(`条件 ${index + 1} 不完整`)
+      }
     })
+
+    if (rule.actions.length === 0) {
+      errors.push("至少需要一个动作")
+    }
+
+    rule.actions.forEach((action, index) => {
+      if (!action.target || !action.value) {
+        errors.push(`动作 ${index + 1} 不完整`)
+      }
+    })
+
+    return errors
   }
 
   const handleSave = () => {
-    // 这里应该是保存规则的逻辑
-    console.log("保存规则:", rule)
-    // 模拟保存成功
-    alert("规则保存成功")
+    const errors = validateRule()
+    setValidationErrors(errors)
+
+    if (errors.length === 0) {
+      onSave(rule)
+    }
   }
 
-  const handleExecute = () => {
-    // 这里应该是执行规则的逻辑
-    console.log("执行规则:", rule)
-    // 模拟执行成功
-    alert("规则执行成功，影响用户 1250 人")
+  const handleTest = async () => {
+    setIsLoading(true)
+    try {
+      // 模拟测试规则
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+      setTestResults({
+        matchedUsers: 156,
+        estimatedImpact: "将为156个用户添加标签",
+        executionTime: "预计执行时间: 2分钟",
+      })
+    } catch (error) {
+      console.error("测试规则失败:", error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const addCondition = () => {
+    setRule({
+      ...rule,
+      conditions: [...rule.conditions, { field: "", operator: "", value: "" }],
+    })
+  }
+
+  const removeCondition = (index: number) => {
+    const newConditions = rule.conditions.filter((_, i) => i !== index)
+    setRule({ ...rule, conditions: newConditions })
+  }
+
+  const updateCondition = (index: number, field: keyof RuleCondition, value: string) => {
+    const newConditions = [...rule.conditions]
+    newConditions[index] = { ...newConditions[index], [field]: value }
+    setRule({ ...rule, conditions: newConditions })
+  }
+
+  const addAction = () => {
+    setRule({
+      ...rule,
+      actions: [...rule.actions, { type: "add_tag", target: "", value: "" }],
+    })
+  }
+
+  const removeAction = (index: number) => {
+    const newActions = rule.actions.filter((_, i) => i !== index)
+    setRule({ ...rule, actions: newActions })
+  }
+
+  const updateAction = (index: number, field: keyof RuleAction, value: string) => {
+    const newActions = [...rule.actions]
+    newActions[index] = { ...newActions[index], [field]: value }
+    setRule({ ...rule, actions: newActions })
+  }
+
+  if (isLoading && !rule.name) {
+    return (
+      <Card>
+        <CardContent className="flex items-center justify-center h-64">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
+            <p>加载规则中...</p>
+          </div>
+        </CardContent>
+      </Card>
+    )
   }
 
   return (
     <Card>
       <CardHeader>
         <CardTitle>{ruleId ? "编辑规则" : "创建新规则"}</CardTitle>
-        <CardDescription>
-          {ruleId ? "修改现有标签规则" : "创建新的标签生成规则"}
-        </CardDescription>
+        <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"
-              />
+      <CardContent>
+        <Tabs defaultValue="basic" className="w-full">
+          <TabsList className="grid w-full grid-cols-4">
+            <TabsTrigger value="basic">基本信息</TabsTrigger>
+            <TabsTrigger value="conditions">条件设置</TabsTrigger>
+            <TabsTrigger value="actions">动作设置</TabsTrigger>
+            <TabsTrigger value="schedule">执行计划</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="basic" className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="name">规则名称</Label>
+                <Input
+                  id="name"
+                  value={rule.name}
+                  onChange={(e) => setRule({ ...rule, name: e.target.value })}
+                  placeholder="输入规则名称"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="priority">优先级</Label>
+                <Select
+                  value={rule.priority.toString()}
+                  onValueChange={(value) => setRule({ ...rule, priority: Number.parseInt(value) })}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="1">高 (1)</SelectItem>
+                    <SelectItem value="2">中 (2)</SelectItem>
+                    <SelectItem value="3">低 (3)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
             </div>
-            <div>
-              <Label htmlFor="rule-description">规则描述</Label>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">规则描述</Label>
               <Textarea
-                id="rule-description"
+                id="description"
                 value={rule.description}
                 onChange={(e) => setRule({ ...rule, description: e.target.value })}
-                className="mt-1"
+                placeholder="描述这个规则的用途和逻辑"
+                rows={3}
               />
             </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="flex items-center space-x-2">
+              <Switch
+                id="enabled"
+                checked={rule.enabled}
+                onCheckedChange={(checked) => setRule({ ...rule, enabled: checked })}
               />
-              <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>
+              <Label htmlFor="enabled">启用规则</Label>
+            </div>
+          </TabsContent>
 
-        {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>
+          <TabsContent value="conditions" className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h3 className="text-lg font-medium">触发条件</h3>
+              <Button onClick={addCondition} size="sm">
+                <Plus className="h-4 w-4 mr-2" />
+                添加条件
+              </Button>
+            </div>
+
+            <div className="space-y-4">
+              {rule.conditions.map((condition, index) => (
+                <div key={index} className="border rounded-lg p-4 space-y-4">
+                  <div className="flex items-center justify-between">
+                    <h4 className="font-medium">条件 {index + 1}</h4>
+                    {rule.conditions.length > 1 && (
+                      <Button variant="ghost" size="sm" onClick={() => removeCondition(index)}>
+                        <X className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </div>
+
+                  <div className="grid grid-cols-3 gap-4">
+                    <div className="space-y-2">
+                      <Label>字段</Label>
+                      <Select value={condition.field} onValueChange={(value) => updateCondition(index, "field", value)}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="选择字段" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {fieldOptions.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label>操作符</Label>
+                      <Select
+                        value={condition.operator}
+                        onValueChange={(value) => updateCondition(index, "operator", value)}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="选择操作符" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {operatorOptions.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label>值</Label>
+                      <Input
+                        value={condition.value}
+                        onChange={(e) => updateCondition(index, "value", e.target.value)}
+                        placeholder="输入比较值"
+                      />
+                    </div>
+                  </div>
+
+                  {index < rule.conditions.length - 1 && (
+                    <div className="flex items-center space-x-2">
+                      <Label>逻辑关系:</Label>
+                      <Select
+                        value={condition.logicalOperator || "AND"}
+                        onValueChange={(value) => updateCondition(index, "logicalOperator", value)}
+                      >
+                        <SelectTrigger className="w-20">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="AND">AND</SelectItem>
+                          <SelectItem value="OR">OR</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </TabsContent>
+
+          <TabsContent value="actions" className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h3 className="text-lg font-medium">执行动作</h3>
+              <Button onClick={addAction} size="sm">
+                <Plus className="h-4 w-4 mr-2" />
+                添加动作
+              </Button>
+            </div>
+
+            <div className="space-y-4">
+              {rule.actions.map((action, index) => (
+                <div key={index} className="border rounded-lg p-4 space-y-4">
+                  <div className="flex items-center justify-between">
+                    <h4 className="font-medium">动作 {index + 1}</h4>
+                    {rule.actions.length > 1 && (
+                      <Button variant="ghost" size="sm" onClick={() => removeAction(index)}>
+                        <X className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </div>
+
+                  <div className="grid grid-cols-3 gap-4">
+                    <div className="space-y-2">
+                      <Label>动作类型</Label>
+                      <Select value={action.type} onValueChange={(value) => updateAction(index, "type", value)}>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="add_tag">添加标签</SelectItem>
+                          <SelectItem value="remove_tag">移除标签</SelectItem>
+                          <SelectItem value="update_field">更新字段</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label>目标</Label>
+                      <Input
+                        value={action.target}
+                        onChange={(e) => updateAction(index, "target", e.target.value)}
+                        placeholder={
+                          action.type === "add_tag" || action.type === "remove_tag" ? "标签名称" : "字段名称"
+                        }
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label>值</Label>
+                      <Input
+                        value={action.value}
+                        onChange={(e) => updateAction(index, "value", e.target.value)}
+                        placeholder="输入值"
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </TabsContent>
+
+          <TabsContent value="schedule" className="space-y-4">
+            <h3 className="text-lg font-medium">执行计划</h3>
+
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label>执行类型</Label>
+                <Select
+                  value={rule.schedule?.type || "immediate"}
+                  onValueChange={(value) =>
+                    setRule({
+                      ...rule,
+                      schedule: { ...rule.schedule, type: value as any },
+                    })
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="immediate">立即执行</SelectItem>
+                    <SelectItem value="scheduled">定时执行</SelectItem>
+                    <SelectItem value="recurring">周期执行</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {rule.schedule?.type === "scheduled" && (
+                <div className="space-y-2">
+                  <Label>执行时间</Label>
+                  <Input
+                    type="datetime-local"
+                    value={rule.schedule.startTime || ""}
+                    onChange={(e) =>
+                      setRule({
+                        ...rule,
+                        schedule: { ...rule.schedule, startTime: e.target.value },
+                      })
+                    }
+                  />
+                </div>
+              )}
+
+              {rule.schedule?.type === "recurring" && (
+                <div className="space-y-2">
+                  <Label>执行间隔</Label>
+                  <Select
+                    value={rule.schedule.interval || "daily"}
+                    onValueChange={(value) =>
+                      setRule({
+                        ...rule,
+                        schedule: { ...rule.schedule, interval: value },
+                      })
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="hourly">每小时</SelectItem>
+                      <SelectItem value="daily">每天</SelectItem>
+                      <SelectItem value="weekly">每周</SelectItem>
+                      <SelectItem value="monthly">每月</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+            </div>
+          </TabsContent>
+        </Tabs>
+
+        <Separator className="my-6" />
+
+        {validationErrors.length > 0 && (
+          <Alert className="mb-4">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>
+              <ul className="list-disc list-inside">
+                {validationErrors.map((error, index) => (
+                  <li key={index}>{error}</li>
+                ))}
+              </ul>
+            </AlertDescription>
           </Alert>
         )}
+
+        {testResults && (
+          <Alert className="mb-4">
+            <TestTube className="h-4 w-4" />
+            <AlertDescription>
+              <div className="space-y-1">
+                <p>
+                  <strong>匹配用户:</strong> {testResults.matchedUsers}
+                </p>
+                <p>
+                  <strong>预期影响:</strong> {testResults.estimatedImpact}
+                </p>
+                <p>
+                  <strong>执行时间:</strong> {testResults.executionTime}
+                </p>
+              </div>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <Button variant="outline" onClick={handleTest} disabled={isLoading}>
+              <TestTube className="h-4 w-4 mr-2" />
+              {isLoading ? "测试中..." : "测试规则"}
+            </Button>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Button variant="outline" onClick={onCancel}>
+              取消
+            </Button>
+            <Button onClick={handleSave} disabled={isLoading}>
+              <Save className="h-4 w-4 mr-2" />
+              保存规则
+            </Button>
+          </div>
+        </div>
       </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>
   )
 }
diff --git a/dependencies.ts b/dependencies.ts
new file mode 100644
index 0000000..48cd41e
--- /dev/null
+++ b/dependencies.ts
@@ -0,0 +1,3 @@
+// 强制安装缺失的依赖包
+import "cmdk"
+import "@radix-ui/react-separator"
diff --git a/package.json b/package.json
index 393f5f6..21cde87 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@radix-ui/react-radio-group": "latest",
     "@radix-ui/react-scroll-area": "latest",
     "@radix-ui/react-select": "latest",
+    "@radix-ui/react-separator": "latest",
     "@radix-ui/react-slider": "latest",
     "@radix-ui/react-slot": "latest",
     "@radix-ui/react-switch": "latest",
@@ -33,6 +34,7 @@
     "@tanstack/react-virtual": "latest",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "latest",
     "d3": "latest",
     "date-fns": "latest",
     "docx": "latest",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e71931a..1d5ddcc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,9 @@ importers:
       '@radix-ui/react-select':
         specifier: latest
         version: 2.2.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-separator':
+        specifier: latest
+        version: 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       '@radix-ui/react-slider':
         specifier: latest
         version: 1.3.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -80,6 +83,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      cmdk:
+        specifier: latest
+        version: 1.1.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       d3:
         specifier: latest
         version: 7.9.0
@@ -732,6 +738,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-separator@1.1.7':
+    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slider@1.3.5':
     resolution: {integrity: sha512-rkfe2pU2NBAYfGaxa3Mqosi7VZEWX5CxKaanRv0vZd4Zhl9fvQrg0VM93dv3xGLGfrHuoTRF3JXH8nb9g+B3fw==}
     peerDependencies:
@@ -1352,6 +1371,12 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -3770,6 +3795,15 @@ snapshots:
       '@types/react': 18.0.0
       '@types/react-dom': 18.0.0
 
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
   '@radix-ui/react-slider@1.3.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@radix-ui/number': 1.1.1
@@ -4373,6 +4407,18 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  cmdk@1.1.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4