@@ -0,0 +1,981 @@
<!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< title > 客源列表 · 私客 · Fonrey 房睿< / title >
< meta name = "viewport" content = "width=1280" >
< script src = "https://cdn.tailwindcss.com" > < / script >
< script src = "https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer > < / script >
< script >
tailwind . config = {
theme : {
extend : {
colors : {
primary : {
50 : '#F0FDFA' , 100 : '#CCFBF1' , 200 : '#99F6E4' ,
500 : '#14B8A6' , 600 : '#0F766E' , 700 : '#115E59' , 800 : '#134E4A' ,
} ,
neutral : {
50 : '#F8FAFC' , 100 : '#F1F5F9' , 200 : '#E2E8F0' , 300 : '#CBD5E1' ,
400 : '#94A3B8' , 500 : '#64748B' , 600 : '#475569' , 700 : '#334155' ,
800 : '#1E293B' , 900 : '#0F172A' ,
} ,
success : { 50 : '#F0FDF4' , 600 : '#16A34A' } ,
warning : { 50 : '#FFFBEB' , 600 : '#D97706' } ,
danger : { 50 : '#FEF2F2' , 600 : '#DC2626' } ,
info : { 50 : '#EFF6FF' , 600 : '#2563EB' } ,
} ,
fontFamily : {
sans : [ 'Inter' , 'PingFang SC' , 'Microsoft YaHei' , 'sans-serif' ] ,
} ,
}
}
}
< / script >
< style >
body { font-family : 'Inter' , 'PingFang SC' , 'Microsoft YaHei' , sans-serif ; }
. tabular-nums { font-variant-numeric : tabular-nums ; }
[ x-cloak ] { display : none !important ; }
:: -webkit-scrollbar { width : 6 px ; height : 6 px }
:: -webkit-scrollbar-thumb { background : #CBD5E1 ; border-radius : 4 px }
:: -webkit-scrollbar-thumb : hover { background : #94A3B8 }
< / style >
< / head >
< body class = "bg-neutral-50 text-neutral-700 text-sm antialiased" >
<!-- ============ 顶部导航 ============ -->
< header class = "fixed top-0 left-0 right-0 h-14 z-30 bg-primary-800 flex items-center justify-between" >
<!-- 左区: Logo -->
< div class = "flex items-center gap-2 px-4 w-60 shrink-0" >
< div class = "w-7 h-7 rounded-md bg-primary-500 flex items-center justify-center text-white font-semibold text-sm" > F< / div >
< span class = "font-semibold text-white text-base" > Fonrey · 房睿< / span >
< / div >
<!-- 中区:主导航 + 搜索 -->
< div class = "flex items-center gap-4 flex-1 px-2" >
< nav class = "flex items-center gap-1 text-sm" >
< a href = "#" class = "px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white transition-colors" > 工作台< / a >
< a href = "#" class = "px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white transition-colors" > 房源< / a >
< a href = "#" class = "px-3 py-1.5 rounded-md bg-primary-600 text-white font-medium" > 客源< / a >
< a href = "#" class = "px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white transition-colors" > 营销< / a >
< a href = "#" class = "px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white transition-colors" > 交易< / a >
< a href = "#" class = "px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white transition-colors" > 数据< / a >
< a href = "#" class = "px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white transition-colors" > 人事< / a >
< a href = "#" class = "px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white transition-colors" > 系统< / a >
< / nav >
<!-- 全局搜索 -->
< div class = "max-w-xs w-full relative" >
< svg class = "w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-primary-300" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m21 21-4.3-4.3M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z" / > < / svg >
< input type = "text" placeholder = "搜索房源 / 客户 / 楼盘 ⌘K"
class = "w-full pl-9 pr-3 py-1.5 text-sm rounded-md bg-primary-700/60 border border-transparent text-white placeholder:text-primary-300 hover:bg-primary-700 focus:bg-white focus:text-neutral-700 focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 focus:outline-none focus:placeholder:text-neutral-400 transition-all" >
< / div >
< / div >
<!-- 右区:工具 -->
< div class = "flex items-center gap-1 px-4 shrink-0" >
< button class = "relative p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md transition-colors" >
< svg class = "w-5 h-5" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022 23.848 23.848 0 0 0 5.454 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" / > < / svg >
< span class = "absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-danger-600" > < / span >
< / button >
< button class = "p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md transition-colors" >
< svg class = "w-5 h-5" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" / > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" / > < / svg >
< / button >
< div class = "flex items-center gap-2 pl-3 ml-1 border-l border-primary-700" >
< div class = "w-7 h-7 rounded-full bg-primary-600 text-white flex items-center justify-center text-xs font-semibold" > WS< / div >
< span class = "text-sm font-medium text-primary-100" > 魏深< / span >
< / div >
< / div >
< / div >
< / header >
<!-- ============ 左侧导航栏 ============ -->
< aside class = "fixed left-0 top-14 h-[calc(100vh-56px)] w-60 z-20 border-r border-neutral-200 bg-white" >
< nav class = "p-3 space-y-0.5" >
< div class = "px-2 pt-2 pb-1 text-xs font-medium text-neutral-500 uppercase tracking-wide" > 客源管理< / div >
< a href = "#" class = "flex items-center gap-2 px-2 py-1.5 rounded-md bg-primary-50 text-primary-700 font-medium" >
< svg class = "w-4 h-4" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" / > < / svg >
私客列表
< / a >
< a href = "#" class = "flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100" > 公客池< / a >
< a href = "#" class = "flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100" > 成交客< / a >
< a href = "#" class = "flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100" > 已删客源< / a >
< / nav >
< / aside >
<!-- ============ 主内容区 ============ -->
< main x-data = "clientListApp()" class = "ml-60 pt-[72px] min-h-screen bg-neutral-50" >
< div class = "px-6 py-4" >
<!-- ======== 一级 Tab 导航 ======== -->
< div class = "flex items-center justify-between border-b border-neutral-200 bg-neutral-50 sticky top-14 z-20 -mx-6 px-6 pt-1" >
< div class = "flex items-center gap-0" >
< a href = "#" class = "px-4 py-3 text-sm border-b-2 border-primary-600 text-primary-600 font-medium whitespace-nowrap" > 私客< / a >
< a href = "#" class = "px-4 py-3 text-sm border-b-2 border-transparent text-neutral-500 hover:text-neutral-700 whitespace-nowrap transition-colors" > 资料客< / a >
< a href = "#" class = "px-4 py-3 text-sm border-b-2 border-transparent text-neutral-500 hover:text-neutral-700 whitespace-nowrap transition-colors" > 营销客< / a >
< a href = "#" class = "px-4 py-3 text-sm border-b-2 border-transparent text-neutral-500 hover:text-neutral-700 whitespace-nowrap transition-colors" > 成交客< / a >
< a href = "#" class = "px-4 py-3 text-sm border-b-2 border-transparent text-neutral-500 hover:text-neutral-700 whitespace-nowrap transition-colors" > 公客< / a >
< / div >
<!-- 右侧操作区 -->
< div class = "flex items-center gap-4 text-sm pb-1" >
< span class = "text-neutral-500" >
私客与成交客重复:
< a href = "#" class = "text-info-600 hover:underline font-medium" > 3< / a >
< / span >
< span class = "text-neutral-500" >
私客与公客重复:
< a href = "#" class = "text-info-600 hover:underline font-medium" > 7< / a >
< / span >
< a href = "#" class = "text-neutral-500 hover:text-neutral-700 transition-colors" > 已删客源< / a >
< a href = "/clients/private/create/"
class = "inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary-600 hover:bg-primary-700 text-white text-sm font-medium rounded-lg transition-colors" >
< svg class = "w-4 h-4" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M12 4.5v15m7.5-7.5h-15" / > < / svg >
新增私客
< / a >
< / div >
< / div >
<!-- ======== 二级 Tab 导航 ======== -->
< div class = "mt-3 flex items-center gap-1 p-1 bg-neutral-100 rounded-lg w-fit" >
< template x-for = "tab in tabs" :key = "tab.key" >
< button
:class = "activeTab === tab.key
? 'bg-white text-primary-700 shadow-sm font-semibold'
: 'text-neutral-600 hover:bg-white/60'"
class = "px-4 py-1.5 text-sm rounded-md transition-all flex items-center gap-1"
@ click = "activeTab = tab.key" >
< span x-text = "tab.label" > < / span >
< span x-show = "tab.count !== null"
class = "bg-neutral-200 text-neutral-600 text-xs px-1.5 py-0.5 rounded-full tabular-nums"
x-text = "tab.count" > < / span >
< / button >
< / template >
< / div >
<!-- ======== 搜索 + 筛选区 ======== -->
< div class = "bg-white rounded-lg border border-neutral-200 px-4 py-3 mt-3" >
<!-- 搜索行 -->
< div class = "flex items-center gap-3" >
<!-- 范围选择器 -->
< select class = "text-sm text-neutral-600 border border-neutral-300 rounded-lg px-3 py-2 bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40 shrink-0" >
< option > 客户信息< / option >
< option > 客源编号< / option >
< option > 小区名称< / option >
< / select >
<!-- 搜索框 -->
< div class = "relative flex-1 max-w-lg" >
< svg class = "w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m21 21-4.3-4.3M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z" / > < / svg >
< input type = "search"
placeholder = "输入客源姓名 / 号码 / 号码后4位 / 客源编号 / 备注信息"
class = "w-full pl-9 pr-10 py-2 border border-neutral-300 rounded-lg text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40" >
< button class = "absolute right-1 top-1/2 -translate-y-1/2 bg-primary-600 hover:bg-primary-700 text-white w-8 h-8 rounded-md flex items-center justify-center transition-colors" >
< svg class = "w-4 h-4" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m21 21-4.3-4.3M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z" / > < / svg >
< / button >
< / div >
<!-- 已存搜索 -->
< div x-data = "{ open: false }" class = "relative shrink-0" >
< button @ click = "open = !open"
class = "text-sm text-neutral-500 hover:text-neutral-700 flex items-center gap-1 transition-colors" >
< svg class = "w-4 h-4" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" / > < / svg >
< span > 3条已存搜索< / span >
< svg class = "w-3 h-3" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m19.5 8.25-7.5 7.5-7.5-7.5" / > < / svg >
< / button >
< div x-show = "open" x-cloak @ click . outside = "open = false"
class = "absolute left-0 top-full mt-1 w-64 bg-white shadow-lg border border-neutral-200 rounded-lg z-50 py-1" >
< div class = "px-3 py-2 text-xs text-neutral-400 border-b border-neutral-100" > 已存搜索条件< / div >
< a href = "#" class = "flex items-center justify-between px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50" >
< span > 求购·A级·宝山< / span >
< button class = "text-neutral-400 hover:text-danger-600 ml-2" >
< svg class = "w-3.5 h-3.5" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M6 18 18 6M6 6l12 12" / > < / svg >
< / button >
< / a >
< a href = "#" class = "flex items-center justify-between px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50" >
< span > 7日活跃·与我相关< / span >
< button class = "text-neutral-400 hover:text-danger-600 ml-2" >
< svg class = "w-3.5 h-3.5" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M6 18 18 6M6 6l12 12" / > < / svg >
< / button >
< / a >
< a href = "#" class = "flex items-center justify-between px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50" >
< span > 即将掉公·近30天录入< / span >
< button class = "text-neutral-400 hover:text-danger-600 ml-2" >
< svg class = "w-3.5 h-3.5" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M6 18 18 6M6 6l12 12" / > < / svg >
< / button >
< / a >
< div class = "px-3 py-2 border-t border-neutral-100" >
< button class = "text-xs text-primary-600 hover:underline" > 保存当前筛选条件< / button >
< / div >
< / div >
< / div >
<!-- 收起/展开筛选 -->
< button @ click = "showFilters = !showFilters"
class = "ml-auto text-sm text-neutral-500 hover:text-primary-600 flex items-center gap-1 shrink-0 transition-colors" >
< span x-text = "showFilters ? '收起筛选' : '展开筛选'" > < / span >
< svg class = "w-4 h-4 transition-transform" :class = "showFilters ? 'rotate-180' : ''" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m19.5 8.25-7.5 7.5-7.5-7.5" / > < / svg >
< / button >
< / div >
<!-- 筛选区(可折叠) -->
< div x-show = "showFilters"
x-transition:enter = "transition ease-out duration-150"
x-transition:enter-start = "opacity-0 -translate-y-1"
x-transition:enter-end = "opacity-100 translate-y-0"
x-transition:leave = "transition ease-in duration-100"
x-transition:leave-start = "opacity-100 translate-y-0"
x-transition:leave-end = "opacity-0 -translate-y-1"
class = "mt-3 space-y-2.5 border-t border-neutral-100 pt-3" >
<!-- 快捷筛选行 -->
< div class = "flex items-center gap-5 text-sm" >
< span class = "text-neutral-400 text-xs w-6 shrink-0" > 常用< / span >
< label class = "flex items-center gap-1.5 cursor-pointer text-neutral-600 hover:text-primary-600 transition-colors" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > 即将掉公
< / label >
< div class = "flex items-center gap-1.5" >
< span class = "text-neutral-600" > 录入时间< / span >
< select class = "text-sm border-0 text-neutral-600 bg-transparent cursor-pointer focus:outline-none hover:text-primary-600 pr-4" >
< option value = "" > 不限< / option >
< option > 今天< / option >
< option > 最近7天< / option >
< option > 最近30天< / option >
< option > 自定义< / option >
< / select >
< / div >
< label class = "flex items-center gap-1.5 cursor-pointer text-neutral-600 hover:text-primary-600 transition-colors" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > 与我相关
< svg class = "w-3.5 h-3.5 text-neutral-400" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" / > < / svg >
< / label >
< label class = "flex items-center gap-1.5 cursor-pointer text-neutral-600 hover:text-primary-600 transition-colors" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > 我部门相关
< svg class = "w-3.5 h-3.5 text-neutral-400" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" / > < / svg >
< / label >
< / div >
<!-- 状态筛选行 -->
< div class = "flex items-center flex-wrap gap-x-2 gap-y-1.5 text-sm" >
< span class = "text-neutral-400 text-xs w-6 shrink-0" > 状态< / span >
< template x-for = "opt in statusOptions" :key = "opt.value" >
< button
:class = "activeStatus === opt.value
? 'bg-primary-600 text-white border-primary-600'
: 'border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600'"
class = "px-3 py-1 text-xs border rounded-md transition-colors"
@ click = "activeStatus = opt.value"
x-text = "opt.label" >
< / button >
< / template >
< / div >
<!-- 需求类型筛选行 -->
< div class = "flex items-center flex-wrap gap-x-2 gap-y-1.5 text-sm" >
< span class = "text-neutral-400 text-xs w-6 shrink-0" > 需求< / span >
< button class = "px-3 py-1 text-xs bg-primary-600 text-white border border-primary-600 rounded-md" > 不限< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 二手< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 新房< / button >
< / div >
<!-- 等级筛选行 -->
< div class = "flex items-center flex-wrap gap-x-2 gap-y-1.5 text-sm" >
< span class = "text-neutral-400 text-xs w-6 shrink-0" > 等级< / span >
< button class = "px-3 py-1 text-xs bg-primary-600 text-white border border-primary-600 rounded-md" > 不限< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > A(急迫)< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > B(较强)< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > C(一般)< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > D(较弱)< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > E(暂不)< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 未填写< / button >
< / div >
<!-- 位置筛选行 -->
< div class = "flex items-center flex-wrap gap-x-2 gap-y-1.5 text-sm" >
< span class = "text-neutral-400 text-xs w-6 shrink-0" > 位置< / span >
< button class = "px-3 py-1 text-xs bg-primary-600 text-white border border-primary-600 rounded-md" > 不限< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 宝山< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 崇明< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 奉贤< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 虹口< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 黄浦< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 嘉定< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 金山< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 静安< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 闵行< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 浦东< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 普陀< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 青浦< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 松江< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 徐汇< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 杨浦< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 长宁< / button >
< / div >
<!-- 购价筛选行 -->
< div class = "flex items-center flex-wrap gap-x-2 gap-y-1.5 text-sm" >
< span class = "text-neutral-400 text-xs w-6 shrink-0" > 购价< / span >
< button class = "px-3 py-1 text-xs bg-primary-600 text-white border border-primary-600 rounded-md" > 不限< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 200万以下< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 200-300万< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 300-500万< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 500-800万< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 800-1000万< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 1000万以上< / button >
< div class = "flex items-center gap-1.5 ml-1" >
< input type = "number" placeholder = "最小值" class = "w-20 px-2 py-1 text-xs border border-neutral-300 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40" >
< span class = "text-neutral-400 text-xs" > ~< / span >
< input type = "number" placeholder = "最大值" class = "w-20 px-2 py-1 text-xs border border-neutral-300 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40" >
< span class = "text-xs text-neutral-500" > 万< / span >
< / div >
< / div >
<!-- 居室筛选行 -->
< div class = "flex items-center flex-wrap gap-x-2 gap-y-1.5 text-sm" >
< span class = "text-neutral-400 text-xs w-6 shrink-0" > 居室< / span >
< button class = "px-3 py-1 text-xs bg-primary-600 text-white border border-primary-600 rounded-md" > 不限< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 1居< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 2居< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 3居< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 4居< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 5居及以上< / button >
< label class = "flex items-center gap-1.5 cursor-pointer text-neutral-600 hover:text-primary-600 transition-colors ml-2" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > 是大价值
< / label >
< / div >
<!-- 更多筛选(展开/收起) -->
< div x-data = "{ showMore: false }" >
< button @ click = "showMore = !showMore"
class = "flex items-center gap-1 text-xs text-neutral-500 hover:text-primary-600 transition-colors py-0.5" >
< svg class = "w-3.5 h-3.5 transition-transform" :class = "showMore ? 'rotate-180' : ''" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m19.5 8.25-7.5 7.5-7.5-7.5" / > < / svg >
< span x-text = "showMore ? '收起筛选' : '展开更多筛选'" > < / span >
< / button >
< div x-show = "showMore" x-cloak class = "mt-2.5 space-y-2.5" >
<!-- 相关方 -->
< div class = "flex items-center flex-wrap gap-x-3 gap-y-1.5 text-sm" >
< span class = "text-neutral-400 text-xs w-10 shrink-0" > 相关方< / span >
< select class = "text-sm border border-neutral-300 rounded-md px-2 py-1 bg-white focus:outline-none text-neutral-600" >
< option > 不限< / option >
< option > 首录人:我< / option >
< option > 归属人:我< / option >
< / select >
< / div >
<!-- 委托日期 -->
< div class = "flex items-center flex-wrap gap-x-3 gap-y-1.5 text-sm" >
< span class = "text-neutral-400 text-xs w-10 shrink-0" > 委托日期< / span >
< input type = "date" class = "text-sm border border-neutral-300 rounded-md px-2 py-1 bg-white focus:outline-none text-neutral-600" >
< span class = "text-neutral-400 text-xs" > ~< / span >
< input type = "date" class = "text-sm border border-neutral-300 rounded-md px-2 py-1 bg-white focus:outline-none text-neutral-600" >
< / div >
<!-- 来源 -->
< div class = "flex items-center flex-wrap gap-x-3 gap-y-1.5 text-sm" >
< span class = "text-neutral-400 text-xs w-10 shrink-0" > 来源< / span >
< select class = "text-sm border border-neutral-300 rounded-md px-2 py-1 bg-white focus:outline-none text-neutral-600" >
< option > 不限< / option >
< option > 自然到访< / option >
< option > 网络推广< / option >
< option > 老客介绍< / option >
< option > 巧客力< / option >
< / select >
< / div >
<!-- 活跃情况 -->
< div class = "flex items-center flex-wrap gap-x-2 gap-y-1.5 text-sm" >
< span class = "text-neutral-400 text-xs w-10 shrink-0" > 活跃< / span >
< button class = "px-3 py-1 text-xs bg-primary-600 text-white border border-primary-600 rounded-md" > 不限< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 新配房< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 7日活跃< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 30日活跃< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 即将过期< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 已暂缓< / button >
< / div >
<!-- 带看进度 -->
< div class = "flex items-center flex-wrap gap-x-2 gap-y-1.5 text-sm" >
< span class = "text-neutral-400 text-xs w-10 shrink-0" > 带看< / span >
< button class = "px-3 py-1 text-xs bg-primary-600 text-white border border-primary-600 rounded-md" > 不限< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 未带看< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 一看< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 二看< / button >
< button class = "px-3 py-1 text-xs border border-neutral-200 text-neutral-600 hover:border-primary-400 hover:text-primary-600 rounded-md transition-colors" > 复看< / button >
< / div >
<!-- 保护客 -->
< div class = "flex items-center flex-wrap gap-x-5 gap-y-1.5 text-sm" >
< span class = "text-neutral-400 text-xs w-10 shrink-0" > 其他< / span >
< label class = "flex items-center gap-1.5 cursor-pointer text-neutral-600 hover:text-primary-600 transition-colors" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > 保护客
< / label >
< label class = "flex items-center gap-1.5 cursor-pointer text-neutral-600 hover:text-primary-600 transition-colors" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > 偏好新房
< / label >
< label class = "flex items-center gap-1.5 cursor-pointer text-neutral-600 hover:text-primary-600 transition-colors" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > 收藏客源
< / label >
< label class = "flex items-center gap-1.5 cursor-pointer text-neutral-600 hover:text-primary-600 transition-colors" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > 置顶客源
< / label >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- ======== 工具栏 ======== -->
< div class = "flex items-center justify-between px-4 py-2.5 bg-white border border-neutral-200 rounded-lg mt-3" >
<!-- 左侧:批量操作 + 计数 -->
< div class = "flex items-center gap-2" >
< button :disabled = "selected.length === 0"
:class = "selected.length > 0
? 'text-neutral-700 hover:bg-neutral-100 border-neutral-300 cursor-pointer'
: 'text-neutral-300 border-neutral-200 cursor-not-allowed'"
class = "px-3 py-1.5 text-sm border rounded-md transition-colors" >
修改相关方
< / button >
< button :disabled = "selected.length === 0"
:class = "selected.length > 0
? 'text-neutral-700 hover:bg-neutral-100 border-neutral-300 cursor-pointer'
: 'text-neutral-300 border-neutral-200 cursor-not-allowed'"
class = "px-3 py-1.5 text-sm border rounded-md transition-colors" >
修改来源
< / button >
< button :disabled = "selected.length === 0"
:class = "selected.length > 0
? 'text-danger-600 hover:bg-danger-50 border-danger-200 cursor-pointer'
: 'text-neutral-300 border-neutral-200 cursor-not-allowed'"
class = "px-3 py-1.5 text-sm border rounded-md transition-colors" >
删除客源
< / button >
< button :disabled = "selected.length === 0"
:class = "selected.length > 0
? 'text-neutral-700 hover:bg-neutral-100 border-neutral-300 cursor-pointer'
: 'text-neutral-300 border-neutral-200 cursor-not-allowed'"
class = "px-3 py-1.5 text-sm border rounded-md transition-colors" >
合并客源
< / button >
< span class = "text-sm text-neutral-500 ml-2" >
共 < strong class = "text-neutral-800 tabular-nums" > 1,248< / strong > 条
< / span >
< span x-show = "selected.length > 0" class = "text-sm text-primary-600" >
已选 < span x-text = "selected.length" class = "tabular-nums" > < / span > 条
< / span >
< / div >
<!-- 右侧:导出 + 自定义列 -->
< div class = "flex items-center gap-2" >
< button class = "flex items-center gap-1.5 px-3 py-1.5 text-sm text-neutral-600 border border-neutral-300 rounded-md hover:bg-neutral-50 transition-colors" >
< svg class = "w-4 h-4" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" / > < / svg >
导出
< / button >
< button @ click = "showColumnModal = true"
class = "flex items-center gap-1.5 px-3 py-1.5 text-sm text-neutral-600 border border-neutral-300 rounded-md hover:bg-neutral-50 transition-colors" >
< svg class = "w-4 h-4" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" / > < / svg >
自定义列表
< / button >
< / div >
< / div >
<!-- ======== 数据表格 ======== -->
< div id = "client-list-container" class = "rounded-lg border border-neutral-200 overflow-hidden bg-white mt-3" >
< div class = "overflow-x-auto" >
< table class = "min-w-full divide-y divide-neutral-200" >
< thead class = "bg-neutral-50" >
< tr >
< th class = "w-10 px-4 py-3" >
< input type = "checkbox" id = "select-all"
class = "w-4 h-4 rounded accent-primary-600"
@ change = "toggleAll($event)" >
< / th >
< th class = "px-4 py-3 text-left text-xs font-semibold text-neutral-500 uppercase tracking-wide whitespace-nowrap min-w-[160px]" > 姓名< / th >
< th class = "px-4 py-3 text-left text-xs font-semibold text-neutral-500 uppercase tracking-wide whitespace-nowrap w-20" > 状态< / th >
< th class = "px-4 py-3 text-left text-xs font-semibold text-neutral-500 uppercase tracking-wide whitespace-nowrap w-20" > 需求类型< / th >
< th class = "px-4 py-3 text-left text-xs font-semibold text-neutral-500 uppercase tracking-wide whitespace-nowrap min-w-[180px]" > 需求/解读< / th >
< th class = "px-4 py-3 text-left text-xs font-semibold text-neutral-500 uppercase tracking-wide whitespace-nowrap w-24" > 智能配房< / th >
< th class = "px-4 py-3 text-left text-xs font-semibold text-neutral-500 uppercase tracking-wide whitespace-nowrap min-w-[120px]" > 意向商圈/小区< / th >
< th class = "px-4 py-3 text-left text-xs font-semibold text-neutral-500 uppercase tracking-wide whitespace-nowrap min-w-[140px]" > 归属人< / th >
< th class = "px-4 py-3 text-left text-xs font-semibold text-neutral-500 uppercase tracking-wide whitespace-nowrap w-20" > 带看进度< / th >
< th class = "px-4 py-3 text-left text-xs font-semibold text-neutral-500 uppercase tracking-wide whitespace-nowrap w-[72px] cursor-pointer hover:bg-neutral-100 select-none" >
带看次数
< svg class = "inline w-3.5 h-3.5 text-neutral-300 ml-0.5" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" / > < / svg >
< / th >
< th class = "px-4 py-3 text-left text-xs font-semibold text-neutral-500 uppercase tracking-wide whitespace-nowrap w-24 cursor-pointer hover:bg-neutral-100 select-none" >
委托日期
< svg class = "inline w-3.5 h-3.5 text-neutral-300 ml-0.5" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" / > < / svg >
< / th >
< th class = "px-4 py-3 text-left text-xs font-semibold text-neutral-500 uppercase tracking-wide whitespace-nowrap w-24 cursor-pointer hover:bg-neutral-100 select-none text-primary-600" >
最近时间
< svg class = "inline w-3.5 h-3.5 text-primary-400 ml-0.5" fill = "none" stroke = "currentColor" stroke-width = "2.5" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M19.5 8.25 12 15.75 4.5 8.25" / > < / svg >
< / th >
< th class = "px-4 py-3 text-center text-xs font-semibold text-neutral-500 uppercase tracking-wide whitespace-nowrap w-16" > 操作< / th >
< / tr >
< / thead >
< tbody id = "client-table-body" class = "divide-y divide-neutral-100 bg-white" >
<!-- 数据行 1 -->
< tr class = "hover:bg-neutral-50 transition-colors"
:class = "selected.includes('c001') ? 'bg-primary-50 hover:bg-primary-100' : ''" >
< td class = "w-10 px-4 py-2" >
< input type = "checkbox" value = "c001" class = "w-4 h-4 rounded accent-primary-600" x-model = "selected" >
< / td >
< td class = "px-4 py-2 min-w-[160px]" >
< div class = "flex flex-col gap-0.5" >
< a href = "/clients/private/c001/" class = "text-info-600 hover:underline font-medium text-sm truncate max-w-[160px]" > 王建国< / a >
< div class = "flex items-center gap-1 flex-wrap" >
< span class = "text-[11px] text-neutral-500" > A(急迫)< / span >
< span class = "text-[11px] px-1.5 py-0.5 rounded-full font-medium bg-success-50 text-success-600" > 7日活跃< / span >
< span class = "text-[11px] px-1.5 py-0.5 rounded-full font-medium bg-info-50 text-info-600" > 新配房< / span >
< / div >
< / div >
< / td >
< td class = "px-4 py-2" >
< span class = "bg-primary-50 text-primary-700 text-xs px-2 py-0.5 rounded-full" > 求购< / span >
< / td >
< td class = "px-4 py-2 text-sm text-neutral-700" > 二手< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700 truncate block max-w-[200px]" title = "550-600万, 100㎡-110㎡, 3居, 宝山" > 550-600万, 100㎡-110㎡, 3居, 宝山< / span >
< / td >
< td class = "px-4 py-2" >
< div class = "flex items-center gap-1" >
< span class = "text-sm text-neutral-700 font-medium" > 8套< / span >
< button class = "text-neutral-400 hover:text-info-600 transition-colors" title = "查看配房详情" >
< svg class = "w-4 h-4" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" / > < / svg >
< / button >
< / div >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700 truncate block max-w-[160px]" title = "宝山·顾村,大华锦绣华城" > 宝山·顾村,大华锦绣华城< / span >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700" > 张伟-都市港湾店一组< / span >
< / td >
< td class = "px-4 py-2" >
< span class = "bg-warning-50 text-warning-600 px-2 py-0.5 rounded-full text-xs" > 一看< / span >
< / td >
< td class = "px-4 py-2 text-sm text-neutral-700 tabular-nums" > 3次< / td >
< td class = "px-4 py-2 text-sm text-neutral-600 tabular-nums" > 2026-03-15< / td >
< td class = "px-4 py-2 text-sm text-neutral-700 tabular-nums" > 今天< / td >
< td class = "px-3 py-2 text-center" >
< button class = "inline-flex items-center justify-center w-8 h-8 rounded-md text-primary-600 hover:bg-primary-50 hover:text-primary-700 transition-colors" title = "拨号" >
< svg class = "w-5 h-5" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" / > < / svg >
< / button >
< / td >
< / tr >
<!-- 数据行 2 -->
< tr class = "hover:bg-neutral-50 transition-colors"
:class = "selected.includes('c002') ? 'bg-primary-50 hover:bg-primary-100' : ''" >
< td class = "w-10 px-4 py-2" >
< input type = "checkbox" value = "c002" class = "w-4 h-4 rounded accent-primary-600" x-model = "selected" >
< / td >
< td class = "px-4 py-2 min-w-[160px]" >
< div class = "flex flex-col gap-0.5" >
< a href = "/clients/private/c002/" class = "text-info-600 hover:underline font-medium text-sm truncate max-w-[160px]" > 李晓敏< / a >
< div class = "flex items-center gap-1 flex-wrap" >
< span class = "text-[11px] text-neutral-500" > B(较强)< / span >
< span class = "text-[11px] px-1.5 py-0.5 rounded-full font-medium bg-purple-50 text-purple-600" > 营销客< / span >
< / div >
< / div >
< / td >
< td class = "px-4 py-2" >
< span class = "bg-info-50 text-info-600 text-xs px-2 py-0.5 rounded-full" > 求租< / span >
< / td >
< td class = "px-4 py-2 text-sm text-neutral-700" > 租房< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700 truncate block max-w-[200px]" title = "4000-6000元/月, 60㎡-80㎡, 2居, 静安" > 4000-6000元/月, 60㎡-80㎡, 2居, 静安< / span >
< / td >
< td class = "px-4 py-2" >
< div class = "flex items-center gap-1" >
< span class = "text-sm text-neutral-700 font-medium" > 12套< / span >
< button class = "text-neutral-400 hover:text-info-600 transition-colors" >
< svg class = "w-4 h-4" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" / > < / svg >
< / button >
< / div >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700 truncate block max-w-[160px]" > 静安·南京西路< / span >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700" > 陈丽-静安旗舰店二组< / span >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-500" > 未带看< / span >
< / td >
< td class = "px-4 py-2 text-sm text-neutral-700 tabular-nums" > 0次< / td >
< td class = "px-4 py-2 text-sm text-neutral-600 tabular-nums" > 2026-04-10< / td >
< td class = "px-4 py-2 text-sm text-neutral-700 tabular-nums" > 3天前< / td >
< td class = "px-3 py-2 text-center" >
< button class = "inline-flex items-center justify-center w-8 h-8 rounded-md text-primary-600 hover:bg-primary-50 hover:text-primary-700 transition-colors" title = "拨号" >
< svg class = "w-5 h-5" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" / > < / svg >
< / button >
< / td >
< / tr >
<!-- 数据行 3 -->
< tr class = "hover:bg-neutral-50 transition-colors"
:class = "selected.includes('c003') ? 'bg-primary-50 hover:bg-primary-100' : ''" >
< td class = "w-10 px-4 py-2" >
< input type = "checkbox" value = "c003" class = "w-4 h-4 rounded accent-primary-600" x-model = "selected" >
< / td >
< td class = "px-4 py-2 min-w-[160px]" >
< div class = "flex flex-col gap-0.5" >
< a href = "/clients/private/c003/" class = "text-info-600 hover:underline font-medium text-sm truncate max-w-[160px]" > 赵志远< / a >
< div class = "flex items-center gap-1 flex-wrap" >
< span class = "text-[11px] text-neutral-500" > A(急迫)< / span >
< span class = "text-[11px] px-1.5 py-0.5 rounded-full font-medium bg-warning-50 text-warning-600" > 即将过期< / span >
< / div >
< / div >
< / td >
< td class = "px-4 py-2" >
< span class = "bg-warning-50 text-warning-600 text-xs px-2 py-0.5 rounded-full" > 租购< / span >
< / td >
< td class = "px-4 py-2 text-sm text-neutral-700" > 二手< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700 truncate block max-w-[200px]" title = "800-1000万, 120㎡以上, 4居, 浦东" > 800-1000万, 120㎡以上, 4居, 浦东< / span >
< / td >
< td class = "px-4 py-2" >
< div class = "flex items-center gap-1" >
< span class = "text-sm text-neutral-700 font-medium" > 5套< / span >
< button class = "text-neutral-400 hover:text-info-600 transition-colors" >
< svg class = "w-4 h-4" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" / > < / svg >
< / button >
< / div >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700 truncate block max-w-[160px]" > 浦东·陆家嘴,世纪公园< / span >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700" > 刘洋-浦东总店三组< / span >
< / td >
< td class = "px-4 py-2" >
< span class = "bg-info-50 text-info-600 px-2 py-0.5 rounded-full text-xs" > 二看< / span >
< / td >
< td class = "px-4 py-2 text-sm text-neutral-700 tabular-nums" > 5次< / td >
< td class = "px-4 py-2 text-sm text-neutral-600 tabular-nums" > 2026-01-20< / td >
< td class = "px-4 py-2 text-sm text-neutral-700 tabular-nums" > 8天前< / td >
< td class = "px-3 py-2 text-center" >
< button class = "inline-flex items-center justify-center w-8 h-8 rounded-md text-primary-600 hover:bg-primary-50 hover:text-primary-700 transition-colors" title = "拨号" >
< svg class = "w-5 h-5" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" / > < / svg >
< / button >
< / td >
< / tr >
<!-- 数据行 4 -->
< tr class = "hover:bg-neutral-50 transition-colors"
:class = "selected.includes('c004') ? 'bg-primary-50 hover:bg-primary-100' : ''" >
< td class = "w-10 px-4 py-2" >
< input type = "checkbox" value = "c004" class = "w-4 h-4 rounded accent-primary-600" x-model = "selected" >
< / td >
< td class = "px-4 py-2 min-w-[160px]" >
< div class = "flex flex-col gap-0.5" >
< a href = "/clients/private/c004/" class = "text-info-600 hover:underline font-medium text-sm truncate max-w-[160px]" > 孙美玲< / a >
< div class = "flex items-center gap-1 flex-wrap" >
< span class = "text-[11px] text-neutral-500" > C(一般)< / span >
< span class = "text-[11px] px-1.5 py-0.5 rounded-full font-medium bg-neutral-100 text-neutral-500" > 暂缓< / span >
< / div >
< / div >
< / td >
< td class = "px-4 py-2" >
< span class = "bg-neutral-100 text-neutral-500 text-xs px-2 py-0.5 rounded-full" > 暂缓< / span >
< / td >
< td class = "px-4 py-2 text-sm text-neutral-700" > 二手< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-500 truncate block max-w-[200px]" > -< / span >
< / td >
< td class = "px-4 py-2" >
< div class = "flex items-center gap-1" >
< span class = "text-sm text-neutral-500" > 0套< / span >
< / div >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-500" > -< / span >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700" > 魏深-都市港湾店一组< / span >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-500" > 未带看< / span >
< / td >
< td class = "px-4 py-2 text-sm text-neutral-700 tabular-nums" > 0次< / td >
< td class = "px-4 py-2 text-sm text-neutral-600 tabular-nums" > 2026-04-01< / td >
< td class = "px-4 py-2 text-sm text-danger-600 tabular-nums" > 32天前< / td >
< td class = "px-3 py-2 text-center" >
< button class = "inline-flex items-center justify-center w-8 h-8 rounded-md text-primary-600 hover:bg-primary-50 hover:text-primary-700 transition-colors" title = "拨号" >
< svg class = "w-5 h-5" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" / > < / svg >
< / button >
< / td >
< / tr >
<!-- 数据行 5 -->
< tr class = "hover:bg-neutral-50 transition-colors"
:class = "selected.includes('c005') ? 'bg-primary-50 hover:bg-primary-100' : ''" >
< td class = "w-10 px-4 py-2" >
< input type = "checkbox" value = "c005" class = "w-4 h-4 rounded accent-primary-600" x-model = "selected" >
< / td >
< td class = "px-4 py-2 min-w-[160px]" >
< div class = "flex flex-col gap-0.5" >
< a href = "/clients/private/c005/" class = "text-info-600 hover:underline font-medium text-sm truncate max-w-[160px]" > 陈建华< / a >
< div class = "flex items-center gap-1 flex-wrap" >
< span class = "text-[11px] text-neutral-500" > B(较强)< / span >
< span class = "text-[11px] px-1.5 py-0.5 rounded-full font-medium bg-orange-50 text-orange-600" > 销售客< / span >
< / div >
< / div >
< / td >
< td class = "px-4 py-2" >
< span class = "bg-primary-50 text-primary-700 text-xs px-2 py-0.5 rounded-full" > 求购< / span >
< / td >
< td class = "px-4 py-2 text-sm text-neutral-700" > 新房< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700 truncate block max-w-[200px]" title = "300-400万, 90㎡-110㎡, 3居, 嘉定/青浦" > 300-400万, 90㎡-110㎡, 3居, 嘉定/青浦< / span >
< / td >
< td class = "px-4 py-2" >
< div class = "flex items-center gap-1" >
< span class = "text-sm text-neutral-700 font-medium" > 23套< / span >
< button class = "text-neutral-400 hover:text-info-600 transition-colors" >
< svg class = "w-4 h-4" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" / > < / svg >
< / button >
< / div >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700 truncate block max-w-[160px]" > 嘉定·新城,远香湖< / span >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700" > 魏深-都市港湾店一组< / span >
< / td >
< td class = "px-4 py-2" >
< span class = "bg-success-50 text-success-600 px-2 py-0.5 rounded-full text-xs" > 复看< / span >
< / td >
< td class = "px-4 py-2 text-sm text-neutral-700 tabular-nums" > 7次< / td >
< td class = "px-4 py-2 text-sm text-neutral-600 tabular-nums" > 2026-02-28< / td >
< td class = "px-4 py-2 text-sm text-neutral-700 tabular-nums" > 1天前< / td >
< td class = "px-3 py-2 text-center" >
< button class = "inline-flex items-center justify-center w-8 h-8 rounded-md text-primary-600 hover:bg-primary-50 hover:text-primary-700 transition-colors" title = "拨号" >
< svg class = "w-5 h-5" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" / > < / svg >
< / button >
< / td >
< / tr >
<!-- 数据行 6 -->
< tr class = "hover:bg-neutral-50 transition-colors"
:class = "selected.includes('c006') ? 'bg-primary-50 hover:bg-primary-100' : ''" >
< td class = "w-10 px-4 py-2" >
< input type = "checkbox" value = "c006" class = "w-4 h-4 rounded accent-primary-600" x-model = "selected" >
< / td >
< td class = "px-4 py-2 min-w-[160px]" >
< div class = "flex flex-col gap-0.5" >
< a href = "/clients/private/c006/" class = "text-info-600 hover:underline font-medium text-sm truncate max-w-[160px]" > 周小燕< / a >
< div class = "flex items-center gap-1 flex-wrap" >
< span class = "text-[11px] text-neutral-500" > D(较弱)< / span >
< span class = "text-[11px] px-1.5 py-0.5 rounded-full font-medium bg-danger-50 text-danger-600" > 无效< / span >
< / div >
< / div >
< / td >
< td class = "px-4 py-2" >
< span class = "bg-primary-50 text-primary-700 text-xs px-2 py-0.5 rounded-full" > 求购< / span >
< / td >
< td class = "px-4 py-2 text-sm text-neutral-700" > 二手< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700 truncate block max-w-[200px]" title = "200-300万, 80㎡-100㎡, 2居, 普陀/长宁" > 200-300万, 80㎡-100㎡, 2居, 普陀/长宁< / span >
< / td >
< td class = "px-4 py-2" >
< div class = "flex items-center gap-1" >
< span class = "text-sm text-neutral-700 font-medium" > 2套< / span >
< button class = "text-neutral-400 hover:text-info-600 transition-colors" >
< svg class = "w-4 h-4" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" / > < / svg >
< / button >
< / div >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700 truncate block max-w-[160px]" > 普陀·长风< / span >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-700" > 王芳-普陀新村店< / span >
< / td >
< td class = "px-4 py-2" >
< span class = "text-sm text-neutral-500" > 未带看< / span >
< / td >
< td class = "px-4 py-2 text-sm text-neutral-700 tabular-nums" > 1次< / td >
< td class = "px-4 py-2 text-sm text-neutral-600 tabular-nums" > 2025-12-01< / td >
< td class = "px-4 py-2 text-sm text-danger-600 tabular-nums" > 45天前< / td >
< td class = "px-3 py-2 text-center" >
< button class = "inline-flex items-center justify-center w-8 h-8 rounded-md text-primary-600 hover:bg-primary-50 hover:text-primary-700 transition-colors" title = "拨号" >
< svg class = "w-5 h-5" fill = "none" stroke = "currentColor" stroke-width = "1.8" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" / > < / svg >
< / button >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
<!-- ======== 分页栏 ======== -->
< div class = "mt-4 flex items-center justify-between px-1" >
<!-- 左侧:总条数 -->
< div class = "text-sm text-neutral-500" >
共 < span class = "font-medium text-neutral-800 tabular-nums" > 1,248< / span > 条
< / div >
<!-- 中间:页码 -->
< div class = "flex items-center gap-1" >
< button class = "flex items-center gap-1 px-2.5 py-1.5 text-sm text-neutral-600 hover:bg-neutral-100 rounded-md transition-colors disabled:opacity-40 disabled:cursor-not-allowed" >
< svg class = "w-4 h-4" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M15.75 19.5 8.25 12l7.5-7.5" / > < / svg >
上一页
< / button >
< button class = "w-8 h-8 flex items-center justify-center text-sm bg-primary-600 text-white rounded-md font-medium tabular-nums" > 1< / button >
< button class = "w-8 h-8 flex items-center justify-center text-sm text-neutral-600 hover:bg-neutral-100 rounded-md transition-colors tabular-nums" > 2< / button >
< button class = "w-8 h-8 flex items-center justify-center text-sm text-neutral-600 hover:bg-neutral-100 rounded-md transition-colors tabular-nums" > 3< / button >
< button class = "w-8 h-8 flex items-center justify-center text-sm text-neutral-600 hover:bg-neutral-100 rounded-md transition-colors tabular-nums" > 4< / button >
< button class = "w-8 h-8 flex items-center justify-center text-sm text-neutral-600 hover:bg-neutral-100 rounded-md transition-colors tabular-nums" > 5< / button >
< span class = "w-8 h-8 flex items-center justify-center text-sm text-neutral-400" > …< / span >
< button class = "w-8 h-8 flex items-center justify-center text-sm text-neutral-600 hover:bg-neutral-100 rounded-md transition-colors tabular-nums" > 63< / button >
< button class = "flex items-center gap-1 px-2.5 py-1.5 text-sm text-neutral-600 hover:bg-neutral-100 rounded-md transition-colors" >
下一页
< svg class = "w-4 h-4" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "m8.25 4.5 7.5 7.5-7.5 7.5" / > < / svg >
< / button >
< / div >
<!-- 右侧:每页条数 + 跳页 -->
< div class = "flex items-center gap-3 text-sm" >
< select class = "border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-600 bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40" >
< option > 20条/页< / option >
< option > 50条/页< / option >
< option > 100条/页< / option >
< / select >
< div class = "flex items-center gap-1.5 text-neutral-500" >
跳至
< input type = "number" min = "1" max = "63"
class = "w-14 px-2 py-1.5 border border-neutral-300 rounded-md text-center text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40 tabular-nums" >
页
< button class = "px-2.5 py-1.5 text-sm border border-neutral-300 rounded-md text-neutral-600 hover:bg-neutral-50 transition-colors" > 确定< / button >
< / div >
< / div >
< / div >
< / div >
< / div > <!-- /px - 6 py - 4 -->
<!-- ======== 自定义列弹窗 ======== -->
< div x-show = "showColumnModal" x-cloak
class = "fixed inset-0 z-50 flex items-center justify-center p-4"
x-transition:enter = "ease-out duration-200"
x-transition:enter-start = "opacity-0"
x-transition:enter-end = "opacity-100"
x-transition:leave = "ease-in duration-150"
x-transition:leave-start = "opacity-100"
x-transition:leave-end = "opacity-0" >
<!-- Overlay -->
< div class = "absolute inset-0 bg-neutral-900/40 backdrop-blur-sm" @ click = "showColumnModal = false" > < / div >
<!-- Modal -->
< div class = "relative bg-white rounded-xl shadow-xl w-full max-w-2xl flex flex-col max-h-[80vh]"
x-transition:enter = "ease-out duration-200"
x-transition:enter-start = "opacity-0 scale-95 translate-y-2"
x-transition:enter-end = "opacity-100 scale-100 translate-y-0" >
<!-- Header -->
< div class = "flex items-center justify-between px-6 py-4 border-b border-neutral-200" >
< h2 class = "text-base font-semibold text-neutral-800" > 自定义信息< / h2 >
< button @ click = "showColumnModal = false" class = "text-neutral-400 hover:text-neutral-600 transition-colors" >
< svg class = "w-5 h-5" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M6 18 18 6M6 6l12 12" / > < / svg >
< / button >
< / div >
<!-- Body -->
< div class = "flex flex-1 overflow-hidden" >
<!-- 左栏:未选信息 -->
< div class = "w-1/2 border-r border-neutral-200 overflow-y-auto" >
< div class = "px-4 py-3 text-xs font-semibold text-neutral-500 uppercase tracking-wide border-b border-neutral-100" > 未选信息< / div >
< div class = "p-3 space-y-1" >
< label class = "flex items-center gap-2.5 px-2 py-2 rounded-md hover:bg-neutral-50 cursor-pointer" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > < span class = "text-sm text-neutral-700" > 录入日期< / span >
< / label >
< label class = "flex items-center gap-2.5 px-2 py-2 rounded-md hover:bg-neutral-50 cursor-pointer" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > < span class = "text-sm text-neutral-700" > 最近通话日期< / span >
< / label >
< label class = "flex items-center gap-2.5 px-2 py-2 rounded-md hover:bg-neutral-50 cursor-pointer" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > < span class = "text-sm text-neutral-700" > 用途< / span >
< / label >
< label class = "flex items-center gap-2.5 px-2 py-2 rounded-md hover:bg-neutral-50 cursor-pointer" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > < span class = "text-sm text-neutral-700" > 来源< / span >
< / label >
< label class = "flex items-center gap-2.5 px-2 py-2 rounded-md hover:bg-neutral-50 cursor-pointer" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > < span class = "text-sm text-neutral-700" > 客源编号< / span >
< / label >
< label class = "flex items-center gap-2.5 px-2 py-2 rounded-md hover:bg-neutral-50 cursor-pointer" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > < span class = "text-sm text-neutral-700" > 首录人< / span >
< / label >
< label class = "flex items-center gap-2.5 px-2 py-2 rounded-md hover:bg-neutral-50 cursor-pointer" >
< input type = "checkbox" class = "w-4 h-4 rounded accent-primary-600" > < span class = "text-sm text-neutral-700" > 成交人< / span >
< / label >
< / div >
< / div >
<!-- 右栏:已选信息 -->
< div class = "w-1/2 overflow-y-auto" >
< div class = "px-4 py-3 text-xs font-semibold text-neutral-500 uppercase tracking-wide border-b border-neutral-100" > 已选信息< / div >
< div class = "p-3 space-y-1" >
<!-- 固定字段(不可删) -->
< div class = "flex items-center gap-2 px-2 py-2 rounded-md bg-neutral-50" >
< svg class = "w-4 h-4 text-neutral-300 cursor-grab" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" / > < / svg >
< span class = "text-sm text-neutral-700 flex-1" > 姓名< / span >
< svg class = "w-3.5 h-3.5 text-neutral-300" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" / > < / svg >
< / div >
<!-- 可删字段 -->
< template x-for = "(col, idx) in selectedColumns" :key = "col" >
< div class = "flex items-center gap-2 px-2 py-2 rounded-md hover:bg-neutral-50 group" >
< svg class = "w-4 h-4 text-neutral-300 cursor-grab group-hover:text-neutral-400" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" / > < / svg >
< span class = "text-sm text-neutral-700 flex-1" x-text = "col" > < / span >
< button @ click = "selectedColumns.splice(idx, 1)" class = "text-neutral-400 hover:text-danger-600 transition-colors opacity-0 group-hover:opacity-100" >
< svg class = "w-3.5 h-3.5" fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path stroke-linecap = "round" stroke-linejoin = "round" d = "M6 18 18 6M6 6l12 12" / > < / svg >
< / button >
< / div >
< / template >
< / div >
< p class = "px-5 pb-3 text-xs text-neutral-400" > 提示:拖拽可调整展示顺序< / p >
< / div >
< / div >
<!-- Footer -->
< div class = "flex items-center justify-between px-6 py-4 border-t border-neutral-200" >
< button class = "text-sm text-neutral-500 hover:text-neutral-700 transition-colors" > 恢复默认< / button >
< div class = "flex items-center gap-3" >
< button @ click = "showColumnModal = false" class = "px-4 py-2 text-sm text-neutral-600 border border-neutral-300 rounded-lg hover:bg-neutral-50 transition-colors" > 取消< / button >
< button @ click = "showColumnModal = false" class = "px-4 py-2 text-sm font-medium bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition-colors" > 确定< / button >
< / div >
< / div >
< / div >
< / div > <!-- /modal -->
< / main > <!-- /clientListApp -->
< script >
function clientListApp ( ) {
return {
// 二级 Tab
activeTab : 'all' ,
tabs : [
{ key : 'buying' , label : '求购' , count : 913 } ,
{ key : 'renting' , label : '求租' , count : 187 } ,
{ key : 'suspended' , label : '暂缓' , count : null } ,
{ key : 'all' , label : '全部私客' , count : null } ,
] ,
// 筛选区展开
showFilters : true ,
// 状态筛选选项
activeStatus : '' ,
statusOptions : [
{ value : '' , label : '不限' } ,
{ value : 'buying' , label : '求购' } ,
{ value : 'buy_or_rent' , label : '租购' } ,
] ,
// 表格勾选
selected : [ ] ,
toggleAll ( event ) {
if ( event . target . checked ) {
this . selected = [ 'c001' , 'c002' , 'c003' , 'c004' , 'c005' , 'c006' ] ;
} else {
this . selected = [ ] ;
}
} ,
// 自定义列弹窗
showColumnModal : false ,
selectedColumns : [ '状态' , '需求类型' , '需求/解读' , '智能配房' , '意向商圈/小区' , '归属人' , '带看进度' , '带看次数' , '委托日期' , '最近时间' ] ,
}
}
< / script >
< / body >
< / html >