diff --git a/247_Contry/index.html b/247_Contry/index.html
index 9e5fc8f..6e90587 100644
--- a/247_Contry/index.html
+++ b/247_Contry/index.html
@@ -4,7 +4,11 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Nexus AI Sales | 无人销售智能中台</title>
+    <!-- Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="app"></div>
diff --git a/247_Contry/src/views/index/index.vue b/247_Contry/src/views/index/index.vue
index b2896f1..4b3b28f 100644
--- a/247_Contry/src/views/index/index.vue
+++ b/247_Contry/src/views/index/index.vue
@@ -1,346 +1,739 @@
 <template>
-    <!-- 全局容器：无滚动条 -->
-    <div class="flex h-screen w-screen bg-base-200 overflow-hidden font-sans text-base-content">
+  <div class="h-screen flex flex-col grid-bg text-slate-100 bg-slate-900 font-sans overflow-hidden">
+    <!-- 1. 顶部导航 (Global Header) -->
+    <header class="h-16 glass-panel border-b-0 flex items-center justify-between px-6 z-50">
+      <!-- Logo -->
+      <div class="flex items-center gap-3">
+        <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-lg shadow-primary/20">
+          <i class="ph-bold ph-brain text-white text-xl"></i>
+        </div>
+        <div>
+          <h1 class="font-bold text-lg tracking-wide leading-tight text-white">NEXUS <span class="text-primary">AI</span></h1>
+          <div class="text-[10px] text-slate-400 font-mono tracking-wider">SALES PILOT V1.0</div>
+        </div>
+      </div>
+      
+      <!-- 全局状态栏 -->
+      <div class="flex items-center gap-6">
+        <!-- 流量潮汐指示器 (核心业务点) -->
+        <div class="flex items-center gap-3 px-4 py-1.5 rounded-full bg-slate-800/80 border border-slate-700/50 backdrop-blur-sm">
+          <div class="flex flex-col items-end leading-none">
+            <span class="text-[10px] text-slate-400">TRAFFIC TIDE</span>
+            <span class="text-xs font-bold text-green-400">LOAD: LOW</span>
+          </div>
+          <span class="relative flex h-3 w-3">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
+          </span>
+        </div>
+        
+        <div class="divider divider-horizontal mx-0 h-8"></div>
+        
+        <!-- 用户头像 -->
+        <div class="flex items-center gap-3">
+          <div class="text-right hidden sm:block">
+            <div class="text-xs font-bold text-slate-200">Admin User</div>
+            <div class="text-[10px] text-slate-500">Super Admin</div>
+          </div>
+          <div class="avatar placeholder cursor-pointer">
+            <div class="bg-gradient-to-tr from-slate-700 to-slate-600 text-white rounded-full w-9 ring ring-primary ring-offset-base-100 ring-offset-2">
+              <span class="text-xs">PM</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
 
-        <!-- ========================================== -->
-        <!-- 1. 左侧：客户导航列表 (保持不变) -->
-        <!-- ========================================== -->
-        <aside class="w-80 flex flex-col bg-base-100 border-r border-base-200 z-20 shrink-0">
+    <div class="flex flex-1 overflow-hidden">
+      <!-- 2. 侧边栏导航 (Sidebar) -->
+      <aside class="w-64 glass-panel border-t-0 border-l-0 border-b-0 flex flex-col justify-between py-6 z-40">
+        <ul class="menu w-full px-3 gap-2">
+          <li v-for="item in navItems" :key="item.id">
+            <a 
+              @click="currentView = item.id"
+              :class="{'active bg-primary text-white shadow-lg shadow-primary/30': currentView === item.id, 'text-slate-400 hover:text-slate-100 hover:bg-slate-800': currentView !== item.id}"
+              class="rounded-lg font-medium transition-all py-3"
+            >
+              <i :class="['ph text-xl', item.icon, currentView === item.id ? 'ph-fill' : '']"></i>
+              {{ item.label }}
+            </a>
+          </li>
+        </ul>
+        
+        <!-- 底部警告卡片 -->
+        <div class="px-4 mb-4">
+          <div class="p-4 rounded-xl bg-gradient-to-br from-red-900/40 to-slate-900 border border-red-500/20 relative overflow-hidden group cursor-pointer hover:border-red-500/40 transition-all">
+            <div class="absolute -right-2 -top-2 w-16 h-16 bg-red-500/10 rounded-full blur-xl group-hover:bg-red-500/20 transition-all"></div>
+            <div class="flex items-center gap-2 text-red-400 mb-1">
+              <i class="ph-fill ph-warning-circle animate-pulse"></i>
+              <span class="text-xs font-bold uppercase tracking-wider">Intervention</span>
+            </div>
+            <div class="text-2xl font-bold text-white mb-1">3 <span class="text-sm font-normal text-slate-400">Waitings</span></div>
+            <div class="text-[10px] text-slate-500">人工接管队列 (异议/退费)</div>
+          </div>
+        </div>
+      </aside>
 
-            <!-- 顶部 Header -->
-            <div class="h-16 flex items-center justify-between px-4 border-b border-base-200 shrink-0">
-                <div class="flex items-center gap-2">
-                    <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white font-bold">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                            <path
-                                d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
-                        </svg>
-                    </div>
-                    <span class="font-bold text-lg tracking-tight">AI 销售控制台</span>
+      <!-- 3. 主内容区域 (Main Content) -->
+      <main class="flex-1 overflow-hidden relative bg-slate-950/50 p-6">
+        <transition name="fade" mode="out-in">
+          
+          <!-- View A: 全景看板 (Dashboard) -->
+          <div v-if="currentView === 'dashboard'" class="h-full flex flex-col gap-6 overflow-y-auto pr-2">
+            <!-- 核心指标卡片 -->
+            <div class="grid grid-cols-4 gap-6">
+              <div class="glass-panel rounded-2xl p-5 relative overflow-hidden group">
+                <div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity"><i class="ph-fill ph-currency-yen text-6xl text-primary"></i></div>
+                <div class="text-slate-400 text-xs font-bold tracking-wider uppercase mb-1">本周 GMV 预估</div>
+                <div class="text-3xl font-bold text-white mb-2">¥245,600</div>
+                <div class="flex items-center gap-2 text-xs">
+                  <span class="text-emerald-400 bg-emerald-400/10 px-1.5 py-0.5 rounded flex items-center gap-1"><i class="ph-bold ph-trend-up"></i> 1.2%</span>
+                  <span class="text-slate-500">转化率 (目标 1%)</span>
                 </div>
+              </div>
+              
+              <div class="glass-panel rounded-2xl p-5 relative overflow-hidden group">
+                <div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity"><i class="ph-fill ph-users-three text-6xl text-secondary"></i></div>
+                <div class="text-slate-400 text-xs font-bold tracking-wider uppercase mb-1">当前并发接待</div>
+                <div class="text-3xl font-bold text-white mb-2">842 <span class="text-sm font-normal text-slate-500">人</span></div>
+                <div class="flex items-center gap-2 text-xs">
+                  <span class="text-secondary bg-secondary/10 px-1.5 py-0.5 rounded">AI 负载: 42%</span>
+                  <span class="text-slate-500">系统健康</span>
+                </div>
+              </div>
+
+              <div class="glass-panel rounded-2xl p-5 relative overflow-hidden group">
+                <div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity"><i class="ph-fill ph-robot text-6xl text-accent"></i></div>
+                <div class="text-slate-400 text-xs font-bold tracking-wider uppercase mb-1">节省人力折算</div>
+                <div class="text-3xl font-bold text-white mb-2">34.5 <span class="text-sm font-normal text-slate-500">人/天</span></div>
+                <div class="flex items-center gap-2 text-xs">
+                  <span class="text-accent bg-accent/10 px-1.5 py-0.5 rounded">≈ 4个销售组</span>
+                  <span class="text-slate-500">效能提升</span>
+                </div>
+              </div>
+
+              <div class="glass-panel rounded-2xl p-5 relative overflow-hidden group">
+                <div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity"><i class="ph-fill ph-warning-octagon text-6xl text-error"></i></div>
+                <div class="text-slate-400 text-xs font-bold tracking-wider uppercase mb-1">人工干预率</div>
+                <div class="text-3xl font-bold text-white mb-2">4.8%</div>
+                <div class="flex items-center gap-2 text-xs">
+                  <span class="text-error bg-error/10 px-1.5 py-0.5 rounded">异议/退费</span>
+                  <span class="text-slate-500">主要原因</span>
+                </div>
+              </div>
             </div>
 
-            <!-- 垂直列表 -->
-            <div class="flex-1 overflow-y-auto p-2 space-y-2 custom-scrollbar">
-                <div v-for="stage in stages" :key="stage.id"
-                    class="collapse collapse-arrow border border-base-200 bg-base-100 rounded-box"
-                    :class="{ 'collapse-open': stage.id === activeStageId }">
-                    <input type="radio" name="stage-accordion" :checked="stage.id === activeStageId"
-                        @click="activeStageId = stage.id" />
-                    <div
-                        class="collapse-title min-h-[2.5rem] py-2 px-3 text-sm font-medium flex items-center justify-between hover:bg-base-200">
-                        <span class="flex items-center gap-2">
-                            <span class="w-2 h-2 rounded-full" :class="getStageColorDot(stage.color)"></span>
-                            {{ stage.name }}
+            <!-- 漏斗与流量图表 -->
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 h-[420px]">
+              <!-- 左侧：销售漏斗 -->
+              <div class="lg:col-span-1 glass-panel rounded-2xl p-6 flex flex-col">
+                <div class="flex justify-between items-center mb-6">
+                  <h3 class="font-bold text-white flex items-center gap-2"><i class="ph-fill ph-funnel text-primary"></i> 销售漏斗监控</h3>
+                  <button class="btn btn-xs btn-ghost text-slate-400"><i class="ph-bold ph-dots-three"></i></button>
+                </div>
+                <div class="flex-1 flex flex-col justify-center gap-4">
+                  <div v-for="(item, index) in funnelData" :key="index" class="relative group cursor-default">
+                    <div class="flex justify-between text-xs mb-1.5">
+                      <span class="text-slate-300 font-medium">{{ item.stage }}</span>
+                      <span class="text-slate-400 font-mono">{{ item.count }} <span class="opacity-50">/</span> <span :class="item.rate < 10 ? 'text-primary' : 'text-slate-400'">{{ item.rate }}%</span></span>
+                    </div>
+                    <div class="w-full bg-slate-800/50 rounded-full h-2.5 overflow-hidden border border-slate-700/50">
+                      <div 
+                        class="h-full rounded-full transition-all duration-1000 relative overflow-hidden" 
+                        :class="index > 4 ? 'bg-gradient-to-r from-primary to-accent' : 'bg-slate-600'"
+                        :style="{ width: item.rate + '%' }"
+                      >
+                        <div class="absolute inset-0 bg-white/20 w-full h-full animate-[shimmer_2s_infinite] translate-x-[-100%]" v-if="index > 4"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 右侧：流量潮汐监控 (CSS Chart) -->
+              <div class="lg:col-span-2 glass-panel rounded-2xl p-6 flex flex-col relative overflow-hidden">
+                <div class="flex justify-between items-start mb-4 z-10">
+                  <div>
+                    <h3 class="font-bold text-white flex items-center gap-2">
+                      <i class="ph-fill ph-waves text-blue-400"></i> 流量潮汐实时监控
+                    </h3>
+                    <p class="text-xs text-slate-500 mt-1">洋葱模型预测：当前处于爬坡期，预计 20:00 达到峰值</p>
+                  </div>
+                  <div class="flex gap-2">
+                    <div class="badge badge-primary badge-outline text-xs gap-1"><i class="ph-bold ph-lightning"></i> AI 响应: 1.2s</div>
+                    <div class="badge badge-secondary badge-outline text-xs gap-1"><i class="ph-bold ph-coin"></i> Token: $14.2/h</div>
+                  </div>
+                </div>
+                
+                <!-- 动态柱状图 -->
+                <div class="flex-1 flex items-end justify-between gap-1 z-10 px-1 pt-4 border-b border-slate-700/50">
+                  <div v-for="(h, i) in trafficData" :key="i" 
+                       class="w-full bg-blue-500/20 rounded-t-sm hover:bg-blue-500/60 transition-all duration-300 relative group"
+                       :style="{ height: h + '%' }">
+                     <!-- Hover Tooltip -->
+                     <div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-[10px] px-2 py-1 rounded border border-slate-600 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-20 shadow-xl">
+                       QPS: {{ Math.round(h * 3.5) }}
+                     </div>
+                  </div>
+                </div>
+                <!-- 底部时间轴 -->
+                <div class="flex justify-between text-[10px] text-slate-600 font-mono mt-2 z-10">
+                  <span>14:00</span>
+                  <span>14:15</span>
+                  <span>14:30</span>
+                  <span>14:45</span>
+                  <span>15:00</span>
+                </div>
+
+                <!-- 背景装饰 -->
+                <div class="absolute inset-0 z-0 bg-gradient-to-t from-blue-500/5 to-transparent pointer-events-none"></div>
+              </div>
+            </div>
+
+            <!-- 底部日志 -->
+            <div class="glass-panel rounded-2xl p-6 flex-1 min-h-[300px]">
+              <div class="flex justify-between items-center mb-4">
+                <h3 class="font-bold text-white flex items-center gap-2"><i class="ph-fill ph-list-dashes text-slate-400"></i> 系统事件日志</h3>
+                <div class="flex gap-2">
+                  <span class="loading loading-dots loading-xs text-slate-500"></span>
+                  <span class="text-xs text-slate-500 font-mono">LIVE</span>
+                </div>
+              </div>
+              <div class="overflow-x-auto">
+                <table class="table table-xs table-pin-rows">
+                  <thead>
+                    <tr class="text-slate-500 border-b border-slate-700/50">
+                      <th>TIMESTAMP</th>
+                      <th>EVENT TYPE</th>
+                      <th>CUSTOMER</th>
+                      <th>AI DECISION & ACTION</th>
+                      <th>STATUS</th>
+                    </tr>
+                  </thead>
+                  <tbody class="font-mono">
+                    <tr v-for="log in eventLogs" :key="log.id" class="hover:bg-slate-800/30 transition-colors border-slate-800/30 group">
+                      <td class="text-slate-500">{{ log.time }}</td>
+                      <td>
+                        <span class="badge badge-ghost badge-xs gap-1 border-slate-700 text-slate-300">
+                          {{ log.type }}
                         </span>
-                        <span class="opacity-50 text-xs">{{ getCustomersByStage(stage.id).length }}</span>
-                    </div>
-                    <div class="collapse-content px-0 pb-0">
-                        <div class="flex flex-col gap-1 p-1 bg-base-200/50">
-                            <div v-for="user in getCustomersByStage(stage.id)" :key="user.id"
-                                @click="selectCustomer(user)"
-                                class="p-3 rounded cursor-pointer border-l-4 transition-all hover:bg-base-100"
-                                :class="selectedCustomer?.id === user.id ? 'bg-white border-primary shadow-sm' : 'border-transparent opacity-80'">
-                                <div class="flex justify-between items-start mb-1">
-                                    <span class="font-bold text-sm">{{ user.name }}</span>
-                                    <span class="text-[10px] opacity-50">{{ user.time }}</span>
-                                </div>
-                                <div class="text-xs truncate opacity-70">{{ user.lastMsg }}</div>
-                                <div class="mt-2 flex gap-1">
-                                    <div class="badge badge-xs border-0"
-                                        :class="user.aiStatus === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'">
-                                        {{ user.aiStatus === 'active' ? 'AI' : '人工' }}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+                      </td>
+                      <td class="font-medium text-slate-300">{{ log.user }}</td>
+                      <td class="max-w-md truncate text-slate-400 group-hover:text-slate-200 transition-colors">
+                        <span class="text-primary mr-2">[{{log.model}}]</span>
+                        {{ log.action }}
+                      </td>
+                      <td>
+                        <span v-if="log.status === 'success'" class="text-emerald-400 flex items-center gap-1"><i class="ph-fill ph-check-circle"></i> OK</span>
+                        <span v-else-if="log.status === 'warning'" class="text-orange-400 flex items-center gap-1"><i class="ph-fill ph-warning"></i> MANUAL</span>
+                        <span v-else class="text-blue-400 flex items-center gap-1"><i class="ph-bold ph-spinner animate-spin"></i> RUNNING</span>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
-        </aside>
+          </div>
 
-        <!-- ========================================== -->
-        <!-- 2. 中间：核心对话监控 (放大版) -->
-        <!-- ========================================== -->
-        <main class="flex-1 flex flex-col bg-white border-r border-base-200 relative min-w-0">
-
-            <!-- 聊天头部 -->
-            <div class="h-16 flex items-center justify-between px-6 border-b border-base-200 bg-white shrink-0">
-                <div v-if="selectedCustomer">
-                    <div class="flex items-center gap-3">
-                        <div class="avatar placeholder">
-                            <div class="bg-neutral text-neutral-content rounded-full w-10">
-                                <span class="text-lg">{{ selectedCustomer.name[0] }}</span>
-                            </div>
-                        </div>
-                        <div>
-                            <div class="font-bold text-base">{{ selectedCustomer.name }}</div>
-                            <div class="text-xs text-base-content/50 flex items-center gap-2">
-                                <span>ID: {{ selectedCustomer.id }}</span>
-                                <span class="badge badge-xs badge-ghost">{{ selectedCustomer.tags.join(', ') }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- 核心开关 -->
-                <div v-if="selectedCustomer"
-                    class="flex items-center gap-3 bg-base-100 px-4 py-2 rounded-full border border-base-200">
-                    <div class="flex flex-col items-end">
-                        <span class="text-xs font-bold" :class="isAiActive ? 'text-success' : 'text-warning'">
-                            {{ isAiActive ? '● AI 自动托管中' : '● 人工强制接管' }}
-                        </span>
-                    </div>
-                    <input type="checkbox" class="toggle toggle-success" v-model="isAiActive" />
-                </div>
+          <!-- View B: SOP 编排中心 (Strategy) -->
+          <div v-else-if="currentView === 'strategy'" class="h-full flex flex-col gap-6">
+            <!-- 头部工具栏 -->
+            <div class="flex justify-between items-end pb-2 border-b border-slate-800">
+              <div>
+                <h2 class="text-2xl font-bold text-white mb-1 flex items-center gap-2">
+                  SOP 智能编排中心
+                  <div class="badge badge-primary badge-outline text-xs">v2.4.0</div>
+                </h2>
+                <p class="text-slate-400 text-xs">配置全链路各阶段的模型参数、提示词及上下文逻辑。</p>
+              </div>
+              <div class="flex gap-3">
+                <button class="btn btn-neutral btn-sm border-slate-700 text-slate-300 hover:text-white"><i class="ph ph-clock-counter-clockwise"></i> 历史版本</button>
+                <button class="btn btn-primary btn-sm shadow-lg shadow-primary/20" @click="saveConfig"><i class="ph ph-floppy-disk"></i> 发布策略配置</button>
+              </div>
             </div>
 
-            <!-- 聊天记录区域 -->
-            <div class="flex-1 overflow-y-auto p-6 bg-slate-50 space-y-6 custom-scrollbar relative">
-                <div v-if="!selectedCustomer"
-                    class="absolute inset-0 flex items-center justify-center text-base-content/30">
-                    <div class="text-center">
-                        <p>请选择左侧客户</p>
+            <div class="flex flex-1 gap-6 overflow-hidden">
+              <!-- 左侧：阶段选择器 -->
+              <div class="w-1/4 glass-panel rounded-2xl overflow-y-auto p-2 no-scrollbar">
+                <div class="px-4 py-3 text-xs font-bold text-slate-500 uppercase tracking-widest">Sales Pipeline</div>
+                <ul class="steps steps-vertical w-full gap-2">
+                  <li 
+                    v-for="(stage, index) in salesStages" 
+                    :key="stage.id"
+                    class="step cursor-pointer transition-all duration-300"
+                    :class="currentStageId === stage.id ? 'step-primary' : 'step-neutral'"
+                    @click="currentStageId = stage.id"
+                    :data-content="index + 1"
+                  >
+                    <div class="w-full text-left ml-3 p-3 rounded-xl border transition-all duration-200 group" 
+                         :class="currentStageId === stage.id ? 'bg-primary/10 border-primary shadow-[0_0_15px_rgba(99,102,241,0.2)]' : 'bg-slate-900/50 border-slate-700/50 hover:bg-slate-800 hover:border-slate-600'">
+                      <div class="font-bold text-sm text-slate-200 group-hover:text-white">{{ stage.name }}</div>
+                      <div class="text-[10px] text-slate-500 mt-1 line-clamp-1 group-hover:text-slate-400">{{ stage.desc }}</div>
                     </div>
+                  </li>
+                </ul>
+              </div>
+
+              <!-- 右侧：Prompt 编辑器 -->
+              <div class="flex-1 glass-panel rounded-2xl p-6 flex flex-col gap-6 overflow-y-auto pr-4">
+                <!-- 模型参数配置 -->
+                <div class="grid grid-cols-2 gap-6 p-4 bg-slate-900/50 rounded-xl border border-slate-800">
+                  <div class="form-control w-full">
+                    <label class="label pt-0"><span class="label-text font-bold text-slate-300 text-xs uppercase">Execution Model</span></label>
+                    <select class="select select-bordered select-sm w-full bg-slate-950 border-slate-700 text-slate-200" v-model="currentConfig.model">
+                      <option value="gpt-4-turbo">GPT-4 Turbo (高精度/逻辑强)</option>
+                      <option value="deepseek-chat">DeepSeek V3 (高性价比/中文优)</option>
+                      <option value="claude-3-opus">Claude 3 Opus (情感/共情强)</option>
+                    </select>
+                  </div>
+                  <div class="form-control w-full">
+                    <label class="label pt-0">
+                      <span class="label-text font-bold text-slate-300 text-xs uppercase">Temperature: {{ currentConfig.temp }}</span>
+                      <span class="label-text-alt text-[10px] text-slate-500">{{ currentConfig.temp > 0.7 ? '感性/发散' : '理性/收敛' }}</span>
+                    </label>
+                    <input type="range" min="0" max="1" step="0.1" v-model="currentConfig.temp" class="range range-xs range-primary" />
+                  </div>
                 </div>
 
-                <template v-else>
-                    <!-- 历史分割线 -->
-                    <div class="divider text-xs text-base-content/30">历史记录</div>
-
-                    <div class="chat chat-start">
-                        <div class="chat-image avatar">
-                            <div class="w-10 rounded-full bg-base-300 text-center leading-10 text-xs">{{
-                                selectedCustomer.name[0] }}</div>
-                        </div>
-                        <div class="chat-header text-xs opacity-50 mb-1">家长</div>
-                        <div class="chat-bubble bg-white text-base-content shadow-sm border border-base-200">
-                            老师，上次说的那个什么家庭教育直播，几点开始啊？我怕赶不上。
-                        </div>
+                <!-- 代码编辑器 -->
+                <div class="flex-1 flex flex-col min-h-[400px]">
+                  <div class="flex justify-between items-center mb-2">
+                    <label class="label p-0"><span class="label-text font-bold text-slate-300 text-xs uppercase flex items-center gap-2"><i class="ph-fill ph-code"></i> System Prompt</span></label>
+                    <div class="flex gap-2">
+                      <div class="badge badge-outline badge-accent text-[10px] h-5">Jinja2 Supported</div>
+                      <div class="badge badge-outline text-slate-500 text-[10px] h-5">{{ currentConfig.prompt.length }} chars</div>
                     </div>
-
-                    <div class="chat chat-end">
-                        <div class="chat-header text-xs opacity-50 mb-1">AI 助手</div>
-                        <div class="chat-bubble chat-bubble-primary text-white shadow-md">
-                            不用担心，直播是晚上8点开始哦。如果有事赶不上的话，明天也会生成回放链接发给您的。
-                        </div>
-                        <div class="chat-footer opacity-50 text-[10px] mt-1">AI 意图识别: 询问时间</div>
+                  </div>
+                  
+                  <div class="relative flex-1 rounded-xl overflow-hidden border border-slate-700/50 bg-[#0d1117] group focus-within:border-primary/50 transition-colors">
+                    <!-- 简单的行号模拟 -->
+                    <div class="absolute left-0 top-0 bottom-0 w-8 bg-slate-900/50 border-r border-slate-800 flex flex-col items-end pt-4 pr-2 text-slate-600 font-mono text-xs select-none leading-relaxed">
+                      <span v-for="n in 20" :key="n">{{n}}</span>
                     </div>
+                    <textarea 
+                      v-model="currentConfig.prompt"
+                      class="absolute inset-0 w-full h-full bg-transparent text-emerald-400 p-4 pl-10 font-mono text-sm resize-none focus:outline-none leading-relaxed selection:bg-emerald-900/50"
+                      spellcheck="false"
+                    ></textarea>
+                  </div>
+                </div>
 
-                    <div class="chat chat-start">
-                        <div class="chat-image avatar">
-                            <div class="w-10 rounded-full bg-base-300 text-center leading-10 text-xs">{{
-                                selectedCustomer.name[0] }}</div>
-                        </div>
-                        <div class="chat-bubble bg-white text-base-content shadow-sm border border-base-200">
-                            {{ selectedCustomer.lastMsg }}
-                        </div>
+                <!-- 工具挂载 -->
+                <div class="collapse collapse-arrow bg-slate-900/50 border border-slate-800 rounded-xl">
+                  <input type="checkbox" /> 
+                  <div class="collapse-title text-sm font-bold text-slate-300 flex items-center gap-2">
+                    <i class="ph-fill ph-wrench text-accent"></i> Function Calling (Tools)
+                  </div>
+                  <div class="collapse-content"> 
+                    <div class="flex flex-wrap gap-4 pt-2">
+                      <label class="cursor-pointer flex items-center gap-2 p-2 rounded hover:bg-slate-800 border border-slate-700/50 hover:border-primary/50 transition-all">
+                        <input type="checkbox" class="checkbox checkbox-primary checkbox-xs" checked />
+                        <span class="label-text text-xs text-slate-300">CRM档案查询</span>
+                      </label>
+                      <label class="cursor-pointer flex items-center gap-2 p-2 rounded hover:bg-slate-800 border border-slate-700/50 hover:border-primary/50 transition-all">
+                        <input type="checkbox" class="checkbox checkbox-primary checkbox-xs" />
+                        <span class="label-text text-xs text-slate-300">生成个性化报告</span>
+                      </label>
+                      <label class="cursor-pointer flex items-center gap-2 p-2 rounded hover:bg-slate-800 border border-slate-700/50 hover:border-primary/50 transition-all">
+                        <input type="checkbox" class="checkbox checkbox-primary checkbox-xs" checked />
+                        <span class="label-text text-xs text-slate-300">知识库检索 (RAG)</span>
+                      </label>
                     </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
 
-                    <!-- 系统日志插入到聊天流中 (替代流程图) -->
-                    <div class="w-full flex justify-center my-4">
-                        <div
-                            class="bg-base-200 text-base-content/60 text-xs px-3 py-1 rounded-full flex items-center gap-2">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24"
-                                stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                            </svg>
-                            系统: 检测到意向升级 (中 -> 高)，已推送到“活跃区”
-                        </div>
+          <!-- View C: 会话监控 (Monitor) -->
+          <div v-else-if="currentView === 'monitor'" class="h-full flex gap-6">
+            <!-- 用户列表 -->
+            <div class="w-80 glass-panel rounded-2xl flex flex-col overflow-hidden">
+              <div class="p-4 border-b border-slate-700/50 bg-slate-900/30">
+                <h3 class="font-bold text-white text-sm mb-3">实时活跃会话</h3>
+                <div class="relative">
+                  <i class="ph ph-magnifying-glass absolute left-3 top-2.5 text-slate-500"></i>
+                  <input class="input input-sm w-full bg-slate-950 border-slate-700 pl-9 text-xs focus:border-primary" placeholder="搜索家长姓名/ID..." />
+                </div>
+              </div>
+              <div class="flex-1 overflow-y-auto p-2 space-y-2">
+                <div v-for="user in activeUsers" :key="user.id" 
+                     class="p-3 rounded-xl cursor-pointer transition-all border border-transparent hover:border-slate-700"
+                     :class="user.active ? 'bg-primary/10 border-primary/30' : 'bg-slate-800/30 hover:bg-slate-800/80'"
+                >
+                  <div class="flex justify-between items-start mb-1">
+                    <div class="flex items-center gap-2">
+                      <div class="w-2 h-2 rounded-full" :class="user.risk ? 'bg-red-500 animate-pulse' : 'bg-green-500'"></div>
+                      <span class="font-bold text-sm text-slate-200">{{ user.name }}</span>
                     </div>
-                </template>
+                    <span class="text-[10px] text-slate-500">{{ user.time }}</span>
+                  </div>
+                  <div class="text-xs text-slate-400 truncate mb-2">{{ user.lastMsg }}</div>
+                  <div class="flex flex-wrap gap-1">
+                    <div class="badge badge-xs border-0 text-white" :class="getStageBadge(user.stage)">{{ user.stage }}</div>
+                    <div v-if="user.risk" class="badge badge-xs badge-error gap-1"><i class="ph-bold ph-warning"></i> 需人工</div>
+                  </div>
+                </div>
+              </div>
             </div>
 
-            <!-- 底部输入区域 -->
-            <div v-if="selectedCustomer" class="h-40 bg-white border-t border-base-200 p-4 shrink-0">
-                <div class="relative h-full">
-                    <textarea
-                        class="textarea textarea-bordered w-full h-full pr-24 resize-none text-base focus:outline-none focus:border-primary transition-colors"
-                        :class="{ 'textarea-disabled bg-base-100': isAiActive }"
-                        :placeholder="isAiActive ? '🚫 AI 托管中，输入框已锁定。请先切换到人工接管模式...' : '请输入回复内容，按 Enter 发送...'"
-                        :disabled="isAiActive"></textarea>
-
-                    <div class="absolute bottom-3 right-3 flex gap-2">
-                        <button class="btn btn-sm btn-ghost" :disabled="isAiActive">😊</button>
-                        <button class="btn btn-sm btn-primary px-6" :disabled="isAiActive">发送</button>
-                    </div>
+            <!-- 聊天窗口 -->
+            <div class="flex-1 flex flex-col glass-panel rounded-2xl overflow-hidden relative">
+              <!-- Chat Header -->
+              <div class="h-16 border-b border-slate-700/50 flex justify-between items-center px-6 bg-slate-900/50 backdrop-blur-md z-10">
+                <div>
+                  <div class="flex items-center gap-2">
+                    <span class="font-bold text-lg text-white">王梓涵妈妈</span>
+                    <div class="badge badge-primary badge-outline badge-xs">ID: 883921</div>
+                  </div>
+                  <div class="flex items-center gap-2 mt-0.5">
+                    <span class="relative flex h-2 w-2">
+                      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                      <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+                    </span>
+                    <span class="text-xs text-slate-400">AI 托管中 | 策略模型: Claude-3 Opus</span>
+                  </div>
                 </div>
+                <div class="flex gap-2">
+                  <button class="btn btn-error btn-xs" @click="toggleManual">
+                    <i class="ph-bold ph-hand-palm"></i> 强制接管
+                  </button>
+                  <button class="btn btn-neutral btn-xs border-slate-600">
+                    <i class="ph ph-file-text"></i> 画像
+                  </button>
+                </div>
+              </div>
+
+              <!-- Chat Content -->
+              <div class="flex-1 p-6 overflow-y-auto space-y-6 bg-gradient-to-b from-slate-900/50 to-slate-950" ref="chatBox">
+                <div v-for="msg in chatHistory" :key="msg.id" class="chat" :class="msg.role === 'ai' ? 'chat-start' : 'chat-end'">
+                  <div class="chat-image avatar">
+                    <div class="w-10 h-10 rounded-full border border-slate-600/50 p-1 flex items-center justify-center shadow-lg" 
+                         :class="msg.role === 'ai' ? 'bg-indigo-600' : 'bg-slate-700'">
+                      <i v-if="msg.role === 'ai'" class="ph-bold ph-robot text-xl text-white"></i>
+                      <i v-else class="ph-bold ph-user text-xl text-white"></i>
+                    </div>
+                  </div>
+                  
+                  <div class="chat-header text-[10px] text-slate-500 mb-1 flex items-center gap-2">
+                    {{ msg.role === 'ai' ? 'Nexus AI Agent' : '家长' }}
+                    <time class="opacity-50">{{ msg.time }}</time>
+                  </div>
+
+                  <!-- 思维链展示 (黑盒可视化) -->
+                  <div v-if="msg.role === 'ai' && msg.thought" class="mb-2 max-w-[90%]">
+                    <div class="p-3 bg-yellow-900/10 border border-yellow-700/30 rounded-lg text-xs text-yellow-500/90 font-mono shadow-inner relative overflow-hidden">
+                      <div class="absolute left-0 top-0 bottom-0 w-1 bg-yellow-600/50"></div>
+                      <div class="flex items-center gap-1.5 mb-1.5 opacity-80 font-bold uppercase tracking-wider text-[10px]">
+                        <i class="ph-bold ph-cpu"></i> 决策链路: {{ msg.stage }}
+                      </div>
+                      <div class="leading-relaxed opacity-90">> {{ msg.thought }}</div>
+                    </div>
+                  </div>
+
+                  <div class="chat-bubble shadow-xl text-sm leading-relaxed" 
+                       :class="msg.role === 'ai' ? 'chat-bubble-primary text-white' : 'chat-bubble-neutral bg-slate-800 text-slate-200'">
+                    {{ msg.content }}
+                  </div>
+                  
+                  <div v-if="msg.role === 'ai'" class="chat-footer opacity-40 text-[10px] mt-1 flex gap-2 font-mono">
+                    <span>Model: Claude-3</span>
+                    <span>Latency: 420ms</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Input Area -->
+              <div class="p-4 bg-slate-900 border-t border-slate-700/50">
+                <div class="relative">
+                  <input type="text" placeholder="输入内容以进行人工干预 (AI 将暂停响应)..." class="input input-bordered w-full bg-slate-950 border-slate-700 focus:border-primary pr-12 text-sm" />
+                  <button class="absolute right-1 top-1 btn btn-sm btn-primary rounded-lg aspect-square p-0"><i class="ph-bold ph-paper-plane-right text-lg"></i></button>
+                </div>
+              </div>
             </div>
-        </main>
-
-        <!-- ========================================== -->
-        <!-- 3. 右侧：控制面板与信息 (固定宽度) -->
-        <!-- ========================================== -->
-        <aside v-if="selectedCustomer" class="w-96 bg-base-100 border-l border-base-200 flex flex-col shrink-0">
-
-            <!-- 客户画像卡片 -->
-            <div class="p-5 border-b border-base-200 bg-base-50">
-                <h3 class="text-xs font-bold text-base-content/40 uppercase mb-4 tracking-wider">客户画像</h3>
-
-                <div class="grid grid-cols-2 gap-3 mb-4">
-                    <div class="bg-white border border-base-200 p-3 rounded-lg text-center shadow-sm">
-                        <div class="text-xs text-base-content/60 mb-1">成交意向</div>
-                        <div class="text-2xl font-black text-primary">{{ selectedCustomer.intent === '高' ? 92 : 65 }}
-                        </div>
-                    </div>
-                    <div class="bg-white border border-base-200 p-3 rounded-lg text-center shadow-sm">
-                        <div class="text-xs text-base-content/60 mb-1">当前阶段</div>
-                        <div class="text-sm font-bold mt-1">{{stages.find(s => s.id ===
-                            selectedCustomer.stage)?.name.split('/')[0]}}</div>
-                    </div>
-                </div>
-
-                <div class="space-y-2">
-                    <div class="flex justify-between text-xs">
-                        <span class="opacity-60">微信来源</span>
-                        <span>直播间转入</span>
-                    </div>
-                    <div class="flex justify-between text-xs">
-                        <span class="opacity-60">孩子年级</span>
-                        <span>初二 (14岁)</span>
-                    </div>
-                    <div class="flex flex-wrap gap-2 mt-3">
-                        <span v-for="tag in selectedCustomer.tags" :key="tag"
-                            class="badge badge-sm badge-outline bg-white">{{
-                                tag }}</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 工具箱 (垂直排列) -->
-            <div class="flex-1 overflow-y-auto p-5 custom-scrollbar">
-                <h3 class="text-xs font-bold text-base-content/40 uppercase mb-4 tracking-wider">快捷操作</h3>
-
-                <!-- 警告提示 -->
-                <div v-if="isAiActive" class="alert alert-warning shadow-sm text-xs py-2 mb-4">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-4 w-4" fill="none"
-                        viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                    </svg>
-                    <span>操作前请先关闭 AI</span>
-                </div>
-
-                <div class="space-y-4">
-                    <!-- 资料推送组 -->
-                    <div class="form-control">
-                        <label class="label pt-0"><span class="label-text font-bold text-xs">推送资料</span></label>
-                        <div class="join w-full">
-                            <select class="select select-bordered select-sm join-item w-full text-xs"
-                                :disabled="isAiActive">
-                                <option selected>Day1 直播回放链接</option>
-                                <option>《厌学心理》电子书</option>
-                                <option>价格表单 (6800元)</option>
-                            </select>
-                            <button class="btn btn-sm btn-primary join-item" :disabled="isAiActive">发送</button>
-                        </div>
-                    </div>
-
-                    <!-- 常用话术组 -->
-                    <div class="form-control">
-                        <label class="label pt-0"><span class="label-text font-bold text-xs">常用话术</span></label>
-                        <div class="flex flex-col gap-2">
-                            <button
-                                class="btn btn-sm btn-outline btn-block justify-start font-normal text-xs h-auto py-2"
-                                :disabled="isAiActive">
-                                "这确实让家长很头疼..." (共情)
-                            </button>
-                            <button
-                                class="btn btn-sm btn-outline btn-block justify-start font-normal text-xs h-auto py-2"
-                                :disabled="isAiActive">
-                                "咱们课程主要解决..." (产品)
-                            </button>
-                        </div>
-                    </div>
-
-                    <div class="divider my-2"></div>
-
-                    <!-- 强制干预 -->
-                    <div class="grid grid-cols-2 gap-3">
-                        <button class="btn btn-sm btn-warning btn-outline" :disabled="isAiActive">催付定金</button>
-                        <button class="btn btn-sm btn-error btn-outline" :disabled="isAiActive">拉黑/终止</button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 简易日志区 (替代流程图) -->
-            <div class="h-48 bg-base-900 border-t border-base-300 p-4 shrink-0 bg-base-200">
-                <h3 class="text-xs font-bold text-base-content/40 uppercase mb-2 tracking-wider flex justify-between">
-                    近期动态
-                    <span class="text-[10px] font-normal cursor-pointer hover:text-primary">查看全部 ></span>
-                </h3>
-                <div class="space-y-2 overflow-y-auto h-32 custom-scrollbar pr-1">
-                    <div class="text-[11px] flex gap-2">
-                        <span class="opacity-50 font-mono">10:42</span>
-                        <span class="text-success">工具调用成功: 发送资料</span>
-                    </div>
-                    <div class="text-[11px] flex gap-2">
-                        <span class="opacity-50 font-mono">10:40</span>
-                        <span>AI 识别意图: 索要资料</span>
-                    </div>
-                    <div class="text-[11px] flex gap-2">
-                        <span class="opacity-50 font-mono">09:15</span>
-                        <span class="text-blue-500">人工介入: 冻结 AI</span>
-                    </div>
-                </div>
-            </div>
-        </aside>
-
+          </div>
+        </transition>
+      </main>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 
-// --- 数据部分 (保持不变) ---
-const stages = [
-    { id: 'stage_1', name: '加微/浅建联', color: 'blue' },
-    { id: 'stage_2', name: '填表单/报告', color: 'purple' },
-    { id: 'stage_3', name: '课前促到课', color: 'indigo' },
-    { id: 'stage_4', name: '课中/活跃', color: 'orange' },
-    { id: 'stage_5', name: '待人工介入', color: 'red' },
-    { id: 'stage_6', name: '成交/合同', color: 'green' },
+const currentView = ref('dashboard');
+
+// 导航配置
+const navItems = [
+    { id: 'dashboard', label: '全景看板', icon: 'ph-chart-line-up' },
+    { id: 'monitor', label: '会话监控', icon: 'ph-chats-teardrop' },
+    { id: 'strategy', label: 'SOP配置', icon: 'ph-sliders-horizontal' },
+    { id: 'leads', label: '线索管理', icon: 'ph-users' },
+    { id: 'system', label: '系统设置', icon: 'ph-gear' }
 ];
 
-const customers = [
-    { id: 101, name: '李妈妈', stage: 'stage_4', intent: '高', aiStatus: 'active', lastMsg: '孩子正在看直播，挺喜欢的', tags: ['Day1', '厌学'], time: '1m' },
-    { id: 102, name: '王爸爸', stage: 'stage_5', intent: '中', aiStatus: 'frozen', lastMsg: '你们这个退费怎么退？', tags: ['价格敏感'], time: '2h' },
-    { id: 103, name: '张家长', stage: 'stage_1', intent: '低', aiStatus: 'active', lastMsg: '通过了好友请求', tags: ['新客'], time: '5h' },
-    { id: 105, name: '刘女士', stage: 'stage_4', intent: '中', aiStatus: 'active', lastMsg: '还没收到报告', tags: ['急切'], time: '1d' },
+// --- 业务数据 Mock ---
+
+// 1. 销售阶段 (SOP)
+const salesStages = [
+    { id: 'connect', name: '1. 浅建联 (加微/破冰)', desc: '初步接触，建立信任，发送欢迎语' },
+    { id: 'form', name: '2. 促填表单 (挖需)', desc: '引导填写信息，获取孩子情况' },
+    { id: 'report', name: '3. 生成报告/价值输出', desc: '基于表单生成诊断报告' },
+    { id: 'group', name: '4. 拉群/资料分发', desc: '入群动作及定点资料推送' },
+    { id: 'deep_connect', name: '5. 深度建联 (情感)', desc: '高情商对话，共情，解决焦虑' },
+    { id: 'pre_class', name: '6. 课前促到课', desc: '提醒上课，确保出勤率' },
+    { id: 'service', name: '7. 课程服务/盯课', desc: '课中互动，课后作业跟进' },
+    { id: 'objection', name: '8. 异议处理/Q&A', desc: '处理价格、效果等疑虑' },
+    { id: 'closing', name: '9. 促单/收定金', desc: '营造紧迫感，引导支付' }
 ];
+const currentStageId = ref('deep_connect');
 
-const activeStageId = ref('stage_4');
-const selectedCustomer = ref<any>(customers[0]);
-const isAiActive = ref(true);
+// 2. 策略配置 Mock
+// Define type for config to avoid TS errors
+interface Config {
+  model: string;
+  temp: number;
+  prompt: string;
+}
 
-const getCustomersByStage = (stageId: string) => customers.filter(c => c.stage === stageId);
-const getStageColorDot = (color: string) => {
-    const map: any = { blue: 'bg-blue-500', purple: 'bg-purple-500', indigo: 'bg-indigo-500', orange: 'bg-orange-500', red: 'bg-red-500', green: 'bg-green-500' };
-    return map[color] || 'bg-gray-500';
+const configs = ref<Record<string, Config>>({
+    'deep_connect': {
+        model: 'claude-3-opus',
+        temp: 0.8,
+        prompt: `## ROLE
+你是一个拥有10年经验的资深家庭教育顾问，名叫"小葱老师"。你的特点是极其善于共情，语气温柔但专业。
+
+## GOAL
+当前阶段是【深度建联】。你的目标不是直接卖课，而是与家长建立情感纽带，让他们觉得你是懂他们的。
+
+## CONTEXT
+家长刚刚填写完表单，显示孩子数学成绩下滑，家长非常焦虑。
+
+## INSTRUCTIONS
+1. 先肯定家长的付出，缓解焦虑。
+2. 不要像机器人一样说话，使用口语化表达（如“哎呀”、“其实我特别理解”）。
+3. 引导家长多说出孩子在家的具体表现。
+4. 如果家长提到退费或极度愤怒，输出特殊标记 [HUMAN_help]。
+
+## OUTPUT FORMAT
+JSON: { "thought": "分析...", "reply": "回复内容..." }`
+    }
+});
+
+// 监听 currentStageId 变化，确保配置已初始化
+watch(currentStageId, (newId) => {
+    if (!configs.value[newId]) {
+        configs.value[newId] = {
+            model: 'gpt-4-turbo',
+            temp: 0.5,
+            prompt: `## Stage: ${newId}\n## Loading default template...\nWaiting for configuration...`
+        };
+    }
+}, { immediate: true });
+
+const currentConfig = computed((): Config => {
+    return configs.value[currentStageId.value]!;
+});
+
+// 3. 聊天记录 Mock
+const chatHistory = ref([
+    { id: 1, role: 'user', content: '孩子最近回家都不说话，一问成绩就发脾气，我真的不知道该怎么办了...', time: '10:23 AM', stage: '', thought: '' },
+    { 
+        id: 2, 
+        role: 'ai', 
+        stage: '深度建联',
+        thought: '检测到家长焦虑情绪高涨（关键词：发脾气、不知道怎么办）。当前策略：主要使用情感安抚，暂不推荐课程。',
+        content: '哎呀，抱抱妈妈。其实看到您这么说，我特别能理解那种无力感。这说明孩子其实心里也有压力，只是不知道怎么排解。咱们先不急着谈成绩，这几天孩子除了发脾气，吃饭睡觉还正常吗？', 
+        time: '10:23 AM' 
+    },
+    { id: 3, role: 'user', content: '吃饭还行，就是晚上老是熬夜玩手机。', time: '10:24 AM', stage: '', thought: '' }
+]);
+
+// 4. 活跃用户 Mock
+const activeUsers = ref([
+    { id: 1, name: '王梓涵妈妈', time: '刚刚', lastMsg: '吃饭还行，就是晚上老是熬...', stage: '深度建联', risk: false, active: true },
+    { id: 2, name: '李浩宇爸爸', time: '2分钟前', lastMsg: '你们这个退费到底怎么弄？', stage: '异议处理', risk: true, active: false },
+    { id: 3, name: '张子轩家长', time: '5分钟前', lastMsg: '好的，我已经进群了。', stage: '拉群/资料', risk: false, active: false },
+    { id: 4, name: '陈果果', time: '12分钟前', lastMsg: '多少钱？', stage: '促单/收定金', risk: false, active: false },
+]);
+
+// 5. Dashboard Mock 数据
+const funnelData = ref([
+    { stage: '加微/浅建联', count: 1240, rate: 100 },
+    { stage: '填表单/出报告', count: 980, rate: 79 },
+    { stage: '进群/发资料', count: 850, rate: 68 },
+    { stage: '深度建联', count: 620, rate: 50 },
+    { stage: '课前促到课', count: 580, rate: 46 },
+    { stage: '付定金', count: 180, rate: 14.5 },
+    { stage: '付全款 (成交)', count: 98, rate: 7.9 },
+]);
+
+const trafficData = ref(Array.from({ length: 40 }, () => Math.floor(Math.random() * 60) + 20));
+
+const eventLogs = ref([
+    { id: 1, time: '14:23:01', type: '离开直播间', user: '陈子涵妈妈', model: 'DeepSeek', action: '识别为中途离场，触发【挽留】SOP', status: 'processing' },
+    { id: 2, time: '14:22:45', type: '提出异议', user: '刘浩宇爸爸', model: 'GPT-4', action: '用户提及"退费"，触发风控，转人工', status: 'warning' },
+    { id: 3, time: '14:21:12', type: '填表单', user: '张小龙家长', model: 'Claude-3', action: '表单解析完成，生成个性化诊断报告 PDF', status: 'success' },
+    { id: 4, time: '14:20:05', type: '发送消息', user: '王美丽', model: 'GPT-4', action: '深度建联对话：共情抚慰', status: 'success' },
+    { id: 5, time: '14:18:33', type: '系统事件', user: 'SYSTEM', model: 'Monitor', action: '检测到流量洪峰，自动扩容', status: 'success' },
+]);
+
+// --- 逻辑与动画 ---
+
+// 模拟实时数据流
+let timer: number | undefined;
+
+onMounted(() => {
+    timer = setInterval(() => {
+        // 更新流量图
+        trafficData.value.shift();
+        trafficData.value.push(Math.floor(Math.random() * 50) + 30);
+        
+        // 随机产生新日志
+        if (Math.random() > 0.6) {
+            const types = ['消息', '支付', '异议'];
+            const users = ['赵女士', '钱先生', '孙妈妈'];
+            const newLog = {
+                id: Date.now(),
+                time: new Date().toLocaleTimeString(),
+                type: types[Math.floor(Math.random() * 3)]!,
+                user: users[Math.floor(Math.random() * 3)]!,
+                model: 'GPT-4',
+                action: '执行自动化回复策略...',
+                status: 'success'
+            };
+            eventLogs.value.unshift(newLog);
+            if(eventLogs.value.length > 8) eventLogs.value.pop();
+        }
+    }, 2000);
+});
+
+onUnmounted(() => {
+    if (timer) clearInterval(timer);
+});
+
+const saveConfig = (event: Event) => {
+    const btn = event.currentTarget as HTMLElement;
+    if (!btn) return;
+    const originalHTML = btn.innerHTML;
+    btn.innerHTML = '<span class="loading loading-spinner loading-xs"></span> 发布中...';
+    setTimeout(() => {
+        btn.innerHTML = '<i class="ph-bold ph-check"></i> 已发布到生产环境';
+        btn.classList.add('btn-success');
+        setTimeout(() => {
+            btn.innerHTML = originalHTML;
+            btn.classList.remove('btn-success');
+        }, 2000);
+    }, 800);
 };
-const selectCustomer = (user: any) => {
-    selectedCustomer.value = user;
-    isAiActive.value = user.aiStatus === 'active';
+
+const getStageBadge = (stage: string) => {
+    const map: Record<string, string> = {
+        '深度建联': 'badge-primary bg-primary/20 text-primary border-0',
+        '异议处理': 'badge-warning bg-warning/20 text-warning border-0',
+        '拉群/资料': 'badge-ghost',
+        '促单/收定金': 'badge-accent bg-accent/20 text-accent border-0'
+    };
+    return map[stage] || 'badge-neutral';
+};
+
+const toggleManual = () => {
+    alert('已切断 AI 响应，工单已发送至企业微信。');
 };
 </script>
 
-<style scoped>
+<style>
+/* 玻璃拟态面板 */
+.glass-panel {
+    background: rgba(30, 41, 59, 0.6);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
 /* 滚动条美化 */
-.custom-scrollbar::-webkit-scrollbar {
-    width: 4px;
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: #0f172a; }
+::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #475569; }
+
+/* 视图切换动画 */
+.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
+.fade-enter-from { opacity: 0; transform: translateY(10px); }
+.fade-leave-to { opacity: 0; transform: translateY(-10px); }
+
+/* 网格背景 */
+.grid-bg {
+    background-image: 
+        linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px), 
+        linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
+    background-size: 40px 40px;
 }
 
-.custom-scrollbar::-webkit-scrollbar-track {
-    background: transparent;
+/* 自定义颜色覆盖 - 确保这些类优先级高于 DaisyUI 或 Tailwind */
+.text-primary { color: #6366f1 !important; }
+.bg-primary { background-color: #6366f1 !important; }
+.border-primary { border-color: #6366f1 !important; }
+
+.text-secondary { color: #ec4899 !important; }
+.bg-secondary { background-color: #ec4899 !important; }
+.border-secondary { border-color: #ec4899 !important; }
+
+.text-accent { color: #8b5cf6 !important; }
+.bg-accent { background-color: #8b5cf6 !important; }
+.border-accent { border-color: #8b5cf6 !important; }
+
+.bg-neutral { background-color: #1e293b !important; }
+
+/* 补充动画 */
+@keyframes shimmer {
+    100% { transform: translateX(100%); }
 }
 
-.custom-scrollbar::-webkit-scrollbar-thumb {
-    background: #d1d5db;
-    border-radius: 4px;
+/* 1. Table 表头去白底 */
+.table :where(thead, tfoot) {
+    background-color: transparent !important;
+    border-bottom-color: #334155 !important; /* border-slate-700 */
+    color: #94a3b8 !important; /* text-slate-400 */
+    font-size: 0.75rem; /* text-xs */
+}
+.table :where(thead, tfoot) tr {
+    background-color: transparent !important;
 }
 
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: #9ca3af;
+/* 2. Steps 组件颜色修复 */
+/* 连接线 */
+.steps-vertical .step:before {
+    background-color: #334155 !important; /* slate-700 */
+}
+/* 未激活状态圆圈 */
+.steps-vertical .step:after {
+    background-color: #0f172a !important; /* bg-slate-950 */
+    border-color: #475569 !important; /* border-slate-600 */
+    color: #94a3b8 !important; /* text-slate-400 */
+}
+/* 激活状态 (Primary) */
+.steps-vertical .step-primary:before {
+    background-color: #6366f1 !important; /* primary */
+}
+.steps-vertical .step-primary:after {
+    background-color: #6366f1 !important;
+    border-color: #6366f1 !important;
+    color: #ffffff !important;
+}
+
+/* 3. Badge Ghost 样式修复 */
+.badge-ghost {
+    background-color: rgba(148, 163, 184, 0.1) !important;
+    border-color: rgba(148, 163, 184, 0.2) !important;
+    color: #cbd5e1 !important;
+}
+
+/* 4. Select 下拉框背景修复 */
+select.select {
+    background-color: #020617 !important; /* slate-950 */
+    color: #e2e8f0 !important;
+    border-color: #334155 !important;
 }
 </style>
\ No newline at end of file
