ishenwei/nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文档修改

Browse Source
This commit is contained in:
Shen Wei
2026-04-26 19:50:01 +08:00
parent d2ae5b3948
commit d42bc16120
28 changed files with 6697 additions and 2545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

816
Project/fonrey/UI_DESIGN/preview.html Normal file
View File

@@ -0,0 +1,816 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Fonrey UI System · 样板预览 v1.0</title>
<meta name="viewport" content="width=1280">
<script src="https://cdn.tailwindcss.com"></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'},
},
boxShadow: {
xs:'0 1px 2px rgba(15,23,42,0.04)',
},
fontFamily: {
sans:['Inter','PingFang SC','Microsoft YaHei','sans-serif'],
mono:['JetBrains Mono','SFMono-Regular','Menlo','monospace'],
},
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter','PingFang SC','Microsoft YaHei',sans-serif; }
.tabular-nums { font-variant-numeric: tabular-nums; }
/* 轻微滚动条 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#94A3B8}
</style>
</head>
<body class="bg-neutral-50 text-neutral-700 text-sm antialiased">
<!-- ============ 顶部导航 ============ -->
<header class="sticky top-0 z-20 bg-primary-800">
<div class="flex items-center h-14 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">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 class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">工作台</a>
<a class="px-3 py-1.5 rounded-md bg-primary-600 text-white font-medium">房源</a>
<a class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">客源</a>
<a class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">营销</a>
<a class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">交易</a>
<a class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">数据</a>
<a class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">人事</a>
<a class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">系统</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">
</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">
<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">
<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>
<!-- ============ 主容器 ============ -->
<div class="flex">
<!-- 侧边栏 -->
<aside class="w-56 shrink-0 border-r border-neutral-200 bg-white min-h-[calc(100vh-3.5rem)]">
<nav class="p-3 space-y-0.5 text-sm">
<div class="px-2 pt-2 pb-1 text-xs font-medium text-neutral-500 uppercase tracking-wide">房源管理</div>
<a 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="M2.25 12 12 3l9.75 9M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75"/></svg>
全部房源 <span class="ml-auto text-xs text-neutral-500 tabular-nums">89,204</span>
</a>
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
<svg class="w-4 h-4 text-neutral-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75Zm6.75-3C9.75 9.504 10.254 9 10.875 9h2.25c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125v-9.75Zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v14.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V5.625Z"/></svg>
我的房源 <span class="ml-auto text-xs text-neutral-500 tabular-nums">248</span>
</a>
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
<svg class="w-4 h-4 text-neutral-400" 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>
收藏
</a>
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
<svg class="w-4 h-4 text-neutral-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
待审核 <span class="ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-warning-50 text-warning-600 tabular-nums">12</span>
</a>
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
<svg class="w-4 h-4 text-neutral-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
回收站
</a>
<div class="px-2 pt-4 pb-1 text-xs font-medium text-neutral-500 uppercase tracking-wide">视图</div>
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
<span class="w-1.5 h-1.5 rounded-full bg-success-600"></span> 本周新上
</a>
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
<span class="w-1.5 h-1.5 rounded-full bg-warning-600"></span> 钥匙房源
</a>
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">
<span class="w-1.5 h-1.5 rounded-full bg-info-600"></span> 降价提醒
</a>
</nav>
</aside>
<!-- 内容区 -->
<main class="flex-1 min-w-0 px-6 py-5 space-y-6">
<!-- 面包屑 + 页面头 -->
<div class="flex items-start justify-between">
<div>
<nav class="flex items-center gap-1 text-xs text-neutral-500 mb-1">
<a class="hover:text-neutral-700">工作台</a>
<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="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
<a class="hover:text-neutral-700">房源</a>
<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="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
<span class="text-neutral-700">全部房源</span>
</nav>
<h1 class="text-xl font-semibold text-neutral-800">全部房源</h1>
<p class="text-xs text-neutral-500 mt-0.5">管理租户下所有房源数据 · 最近同步于 2 分钟前</p>
</div>
<div class="flex items-center gap-2">
<button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-white border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 hover:border-neutral-400">
<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 class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-white border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 hover:border-neutral-400">
<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.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg>
导入
</button>
<button class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700 active:bg-primary-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40">
<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>
新增房源
</button>
</div>
</div>
<!-- Stat Cards -->
<section class="grid grid-cols-4 gap-4">
<div class="bg-white rounded-lg border border-neutral-200 shadow-xs p-4">
<div class="flex items-start justify-between">
<div>
<div class="text-xs text-neutral-500">在售房源</div>
<div class="mt-1.5 text-xl font-semibold text-neutral-900 tabular-nums">24,891</div>
</div>
<span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-xs font-medium bg-success-50 text-success-600 tabular-nums">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M10 3a1 1 0 0 1 .7.3l5 5a1 1 0 1 1-1.4 1.4L11 6.42V16a1 1 0 1 1-2 0V6.42L5.7 9.7a1 1 0 0 1-1.4-1.4l5-5A1 1 0 0 1 10 3Z"/></svg>
+4.2%
</span>
</div>
<div class="mt-2 text-xs text-neutral-500">较上周 <span class="tabular-nums">+1,003</span></div>
</div>
<div class="bg-white rounded-lg border border-neutral-200 shadow-xs p-4">
<div class="flex items-start justify-between">
<div>
<div class="text-xs text-neutral-500">本月新增</div>
<div class="mt-1.5 text-xl font-semibold text-neutral-900 tabular-nums">1,284</div>
</div>
<span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-xs font-medium bg-success-50 text-success-600 tabular-nums">+12.8%</span>
</div>
<div class="mt-2 text-xs text-neutral-500">目标 <span class="tabular-nums">1,500</span> · 完成 85%</div>
<div class="mt-2 h-1 rounded-full bg-neutral-100 overflow-hidden">
<div class="h-full bg-primary-600" style="width:85%"></div>
</div>
</div>
<div class="bg-white rounded-lg border border-neutral-200 shadow-xs p-4">
<div class="flex items-start justify-between">
<div>
<div class="text-xs text-neutral-500">待审核</div>
<div class="mt-1.5 text-xl font-semibold text-neutral-900 tabular-nums">12</div>
</div>
<span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-xs font-medium bg-warning-50 text-warning-600">需处理</span>
</div>
<div class="mt-2 text-xs text-primary-600 hover:underline cursor-pointer">查看待审核列表 →</div>
</div>
<div class="bg-white rounded-lg border border-neutral-200 shadow-xs p-4">
<div class="flex items-start justify-between">
<div>
<div class="text-xs text-neutral-500">本月成交</div>
<div class="mt-1.5 text-xl font-semibold text-neutral-900 tabular-nums">86</div>
</div>
<span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-xs font-medium bg-danger-50 text-danger-600 tabular-nums">-2.1%</span>
</div>
<div class="mt-2 text-xs text-neutral-500">GMV <span class="tabular-nums font-medium text-neutral-700">¥2.14亿</span></div>
</div>
</section>
<!-- 筛选栏 -->
<section class="bg-white rounded-lg border border-neutral-200 shadow-xs">
<!-- Tabs -->
<div class="flex items-center px-4 border-b border-neutral-200">
<nav class="flex items-center gap-1">
<button class="relative px-3 py-3 text-sm font-medium text-primary-700">
全部 <span class="ml-1 text-xs text-neutral-500 tabular-nums">89,204</span>
<span class="absolute bottom-0 inset-x-0 h-0.5 bg-primary-600 rounded-t"></span>
</button>
<button class="px-3 py-3 text-sm text-neutral-600 hover:text-neutral-900">在售 <span class="ml-1 text-xs text-neutral-500 tabular-nums">24,891</span></button>
<button class="px-3 py-3 text-sm text-neutral-600 hover:text-neutral-900">已成交 <span class="ml-1 text-xs text-neutral-500 tabular-nums">8,120</span></button>
<button class="px-3 py-3 text-sm text-neutral-600 hover:text-neutral-900">已下架 <span class="ml-1 text-xs text-neutral-500 tabular-nums">3,402</span></button>
<button class="px-3 py-3 text-sm text-neutral-600 hover:text-neutral-900">钥匙房源 <span class="ml-1 text-xs text-neutral-500 tabular-nums">612</span></button>
</nav>
</div>
<!-- 筛选条件 -->
<div class="p-4 border-b border-neutral-200 space-y-3">
<div class="flex flex-wrap gap-2 items-center">
<!-- 搜索 -->
<div class="relative w-64">
<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="text" placeholder="房源编号 / 标题 / 业主"
class="w-full pl-9 pr-3 py-1.5 text-sm rounded-md border border-neutral-300 focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 focus:outline-none">
</div>
<!-- 下拉筛选 -->
<button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-white border border-neutral-300 rounded-md hover:bg-neutral-50 text-neutral-700">
商圈：朝阳·大望路 <svg class="w-3 h-3 text-neutral-400" 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>
<button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-white border border-neutral-300 rounded-md hover:bg-neutral-50 text-neutral-700">
户型：全部 <svg class="w-3 h-3 text-neutral-400" 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>
<button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-primary-50 border border-primary-600 rounded-md text-primary-700">
价格：500-800万 <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="M6 18 18 6M6 6l12 12"/></svg>
</button>
<button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-white border border-neutral-300 rounded-md hover:bg-neutral-50 text-neutral-700">
面积 <svg class="w-3 h-3 text-neutral-400" 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>
<button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-white border border-neutral-300 rounded-md hover:bg-neutral-50 text-neutral-700">
更多筛选 <span class="px-1 rounded bg-primary-600 text-white text-xs tabular-nums">2</span>
</button>
<div class="flex-1"></div>
<button class="text-sm text-neutral-500 hover:text-neutral-700 px-2 py-1.5">重置</button>
</div>
<!-- 已选条件 Tag -->
<div class="flex flex-wrap gap-1.5 items-center text-xs">
<span class="text-neutral-500">已筛选：</span>
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-primary-50 text-primary-700 font-medium">
价格 500-800万
<button class="hover:text-primary-800"><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="M6 18 18 6M6 6l12 12"/></svg></button>
</span>
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-primary-50 text-primary-700 font-medium">
朝阳·大望路
<button class="hover:text-primary-800"><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="M6 18 18 6M6 6l12 12"/></svg></button>
</span>
<button class="text-neutral-500 hover:text-neutral-700 underline underline-offset-2">清除全部</button>
</div>
</div>
<!-- 工具栏 -->
<div class="flex items-center justify-between px-4 py-2 bg-neutral-50 border-b border-neutral-200">
<div class="flex items-center gap-2 text-xs text-neutral-600">
共 <span class="font-medium text-neutral-900 tabular-nums">1,284</span> 条结果
<span class="text-neutral-400">·</span>
已选 <span class="font-medium text-primary-700 tabular-nums">3</span> 条
<button class="text-primary-600 hover:text-primary-700 hover:underline underline-offset-2 ml-1">批量操作 ▾</button>
</div>
<div class="flex items-center gap-1">
<button class="p-1.5 text-neutral-500 hover:bg-neutral-100 rounded-md" 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg>
</button>
<button class="p-1.5 text-neutral-500 hover:bg-neutral-100 rounded-md" 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="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>
<button class="p-1.5 text-neutral-500 hover:bg-neutral-100 rounded-md" 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="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/></svg>
</button>
</div>
</div>
<!-- 表格 -->
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead class="bg-neutral-50 border-b border-neutral-200">
<tr class="text-left text-xs font-medium text-neutral-600 uppercase tracking-wide">
<th class="px-3 py-2.5 w-10"><input type="checkbox" class="rounded border-neutral-300 text-primary-600 focus:ring-primary-600/30"></th>
<th class="px-3 py-2.5 w-28">编号</th>
<th class="px-3 py-2.5 min-w-[240px]">房源标题</th>
<th class="px-3 py-2.5">户型</th>
<th class="px-3 py-2.5 text-right">面积 (㎡)</th>
<th class="px-3 py-2.5 text-right">总价 (万)</th>
<th class="px-3 py-2.5 text-right">单价 (元/㎡)</th>
<th class="px-3 py-2.5">状态</th>
<th class="px-3 py-2.5">维护人</th>
<th class="px-3 py-2.5">录入时间</th>
<th class="px-3 py-2.5 w-24 text-right">操作</th>
</tr>
</thead>
<tbody class="divide-y divide-neutral-100">
<!-- Row 1 -->
<tr class="hover:bg-neutral-50 group">
<td class="px-3 py-3"><input type="checkbox" checked class="rounded border-neutral-300 text-primary-600 focus:ring-primary-600/30"></td>
<td class="px-3 py-3 font-mono text-xs text-neutral-600">F20268142</td>
<td class="px-3 py-3">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded bg-neutral-100 shrink-0 overflow-hidden flex items-center justify-center text-neutral-400">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/></svg>
</div>
<div class="min-w-0">
<div class="font-medium text-neutral-900 truncate">绿城百合公寓 · 南北通透三居 · 业主诚心出售</div>
<div class="text-xs text-neutral-500 truncate">大望路 · 绿城百合公寓 · 中楼层/32层</div>
</div>
</div>
</td>
<td class="px-3 py-3 text-neutral-700">3室2厅</td>
<td class="px-3 py-3 text-right tabular-nums text-neutral-700">128.50</td>
<td class="px-3 py-3 text-right tabular-nums font-medium text-neutral-900">680</td>
<td class="px-3 py-3 text-right tabular-nums text-neutral-700">52,918</td>
<td class="px-3 py-3"><span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium bg-success-50 text-success-600"><span class="w-1.5 h-1.5 rounded-full bg-success-600"></span>在售</span></td>
<td class="px-3 py-3">
<div class="flex items-center gap-1.5">
<div class="w-6 h-6 rounded-full bg-primary-600 text-white flex items-center justify-center text-xs font-semibold">魏</div>
<span class="text-neutral-700">魏深</span>
</div>
</td>
<td class="px-3 py-3 text-neutral-500 text-xs tabular-nums">2026-04-20 14:32</td>
<td class="px-3 py-3 text-right">
<div class="flex items-center gap-1 justify-end opacity-0 group-hover:opacity-100 transition">
<button class="p-1 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 rounded" 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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"/></svg></button>
<button class="p-1 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 rounded" title="更多"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M10 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM10 11.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM11.5 15.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/></svg></button>
</div>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-neutral-50 group bg-primary-50/40">
<td class="px-3 py-3"><input type="checkbox" checked class="rounded border-neutral-300 text-primary-600"></td>
<td class="px-3 py-3 font-mono text-xs text-neutral-600">F20267891</td>
<td class="px-3 py-3">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded bg-neutral-100 shrink-0"></div>
<div class="min-w-0">
<div class="font-medium text-neutral-900 truncate">
万科翡翠长安 · 精装两居 · 满五唯一
<span class="ml-1 inline-flex items-center px-1 py-0 rounded text-[10px] font-medium bg-danger-50 text-danger-600 align-middle">急售</span>
</div>
<div class="text-xs text-neutral-500 truncate">CBD · 万科翡翠长安 · 高楼层/28层</div>
</div>
</div>
</td>
<td class="px-3 py-3 text-neutral-700">2室1厅</td>
<td class="px-3 py-3 text-right tabular-nums text-neutral-700">89.20</td>
<td class="px-3 py-3 text-right tabular-nums font-medium text-neutral-900">
<span class="line-through text-neutral-400 text-xs mr-1">780</span>720
</td>
<td class="px-3 py-3 text-right tabular-nums text-neutral-700">80,717</td>
<td class="px-3 py-3"><span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium bg-warning-50 text-warning-600"><span class="w-1.5 h-1.5 rounded-full bg-warning-600"></span>待核验</span></td>
<td class="px-3 py-3">
<div class="flex items-center gap-1.5">
<div class="w-6 h-6 rounded-full bg-info-600 text-white flex items-center justify-center text-xs font-semibold">李</div>
<span class="text-neutral-700">李明泽</span>
</div>
</td>
<td class="px-3 py-3 text-neutral-500 text-xs tabular-nums">2026-04-19 09:15</td>
<td class="px-3 py-3"></td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-neutral-50 group">
<td class="px-3 py-3"><input type="checkbox" checked class="rounded border-neutral-300 text-primary-600"></td>
<td class="px-3 py-3 font-mono text-xs text-neutral-600">F20267403</td>
<td class="px-3 py-3">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded bg-neutral-100 shrink-0"></div>
<div class="min-w-0">
<div class="font-medium text-neutral-900 truncate">远洋万和城 · 花园洋房 · 带车位</div>
<div class="text-xs text-neutral-500 truncate">亮马桥 · 远洋万和城 · 低楼层/6层</div>
</div>
</div>
</td>
<td class="px-3 py-3 text-neutral-700">4室2厅</td>
<td class="px-3 py-3 text-right tabular-nums text-neutral-700">186.00</td>
<td class="px-3 py-3 text-right tabular-nums font-medium text-neutral-900">1,280</td>
<td class="px-3 py-3 text-right tabular-nums text-neutral-700">68,817</td>
<td class="px-3 py-3"><span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium bg-info-50 text-info-600"><span class="w-1.5 h-1.5 rounded-full bg-info-600"></span>已成交</span></td>
<td class="px-3 py-3">
<div class="flex items-center gap-1.5">
<div class="w-6 h-6 rounded-full bg-warning-600 text-white flex items-center justify-center text-xs font-semibold">张</div>
<span class="text-neutral-700">张晓雨</span>
</div>
</td>
<td class="px-3 py-3 text-neutral-500 text-xs tabular-nums">2026-04-15 16:48</td>
<td class="px-3 py-3"></td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-neutral-50 group">
<td class="px-3 py-3"><input type="checkbox" class="rounded border-neutral-300 text-primary-600"></td>
<td class="px-3 py-3 font-mono text-xs text-neutral-600">F20266912</td>
<td class="px-3 py-3">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded bg-neutral-100 shrink-0"></div>
<div class="min-w-0">
<div class="font-medium text-neutral-900 truncate">
华贸城 · 顶跃复式 · 精装未住
<span class="ml-1 inline-flex items-center px-1 py-0 rounded text-[10px] font-medium bg-primary-100 text-primary-700 align-middle">VR</span>
<span class="ml-1 inline-flex items-center px-1 py-0 rounded text-[10px] font-medium bg-warning-50 text-warning-600 align-middle">钥匙</span>
</div>
<div class="text-xs text-neutral-500 truncate">建外 · 华贸城 · 顶层/26层</div>
</div>
</div>
</td>
<td class="px-3 py-3 text-neutral-700">5室3厅</td>
<td class="px-3 py-3 text-right tabular-nums text-neutral-700">280.50</td>
<td class="px-3 py-3 text-right tabular-nums font-medium text-neutral-900">2,680</td>
<td class="px-3 py-3 text-right tabular-nums text-neutral-700">95,544</td>
<td class="px-3 py-3"><span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium bg-success-50 text-success-600"><span class="w-1.5 h-1.5 rounded-full bg-success-600"></span>在售</span></td>
<td class="px-3 py-3">
<div class="flex items-center gap-1.5">
<div class="w-6 h-6 rounded-full bg-neutral-400 text-white flex items-center justify-center text-xs font-semibold">王</div>
<span class="text-neutral-700">王建国</span>
</div>
</td>
<td class="px-3 py-3 text-neutral-500 text-xs tabular-nums">2026-04-12 11:20</td>
<td class="px-3 py-3"></td>
</tr>
<!-- Row 5 - 下架 -->
<tr class="hover:bg-neutral-50 group opacity-60">
<td class="px-3 py-3"><input type="checkbox" class="rounded border-neutral-300 text-primary-600"></td>
<td class="px-3 py-3 font-mono text-xs text-neutral-600">F20266541</td>
<td class="px-3 py-3">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded bg-neutral-100 shrink-0"></div>
<div class="min-w-0">
<div class="font-medium text-neutral-700 truncate line-through">观湖国际 · 商住两用</div>
<div class="text-xs text-neutral-500 truncate">国贸 · 观湖国际</div>
</div>
</div>
</td>
<td class="px-3 py-3 text-neutral-700">1室</td>
<td class="px-3 py-3 text-right tabular-nums text-neutral-700">52.80</td>
<td class="px-3 py-3 text-right tabular-nums font-medium text-neutral-700">380</td>
<td class="px-3 py-3 text-right tabular-nums text-neutral-700">71,970</td>
<td class="px-3 py-3"><span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium bg-neutral-100 text-neutral-600"><span class="w-1.5 h-1.5 rounded-full bg-neutral-400"></span>已下架</span></td>
<td class="px-3 py-3"><span class="text-neutral-500">—</span></td>
<td class="px-3 py-3 text-neutral-500 text-xs tabular-nums">2026-03-28 08:05</td>
<td class="px-3 py-3"></td>
</tr>
</tbody>
</table>
</div>
<!-- 分页 -->
<div class="flex items-center justify-between px-4 py-3 border-t border-neutral-200">
<div class="text-xs text-neutral-500">
显示 <span class="tabular-nums font-medium text-neutral-700">1-20</span> 条，共 <span class="tabular-nums font-medium text-neutral-700">1,284</span> 条
</div>
<div class="flex items-center gap-1">
<button class="px-2 py-1 text-sm text-neutral-400 rounded-md cursor-not-allowed">← 上一页</button>
<button class="w-8 h-8 text-sm rounded-md bg-primary-600 text-white font-medium tabular-nums">1</button>
<button class="w-8 h-8 text-sm rounded-md hover:bg-neutral-100 text-neutral-700 tabular-nums">2</button>
<button class="w-8 h-8 text-sm rounded-md hover:bg-neutral-100 text-neutral-700 tabular-nums">3</button>
<button class="w-8 h-8 text-sm rounded-md hover:bg-neutral-100 text-neutral-700 tabular-nums">4</button>
<span class="px-1 text-neutral-400">…</span>
<button class="w-8 h-8 text-sm rounded-md hover:bg-neutral-100 text-neutral-700 tabular-nums">65</button>
<button class="px-2 py-1 text-sm text-neutral-700 hover:bg-neutral-100 rounded-md">下一页 →</button>
<select class="ml-3 px-2 py-1 text-sm border border-neutral-300 rounded-md bg-white text-neutral-700 focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 focus:outline-none">
<option>20 条/页</option>
<option>50 条/页</option>
<option>100 条/页</option>
</select>
</div>
</div>
</section>
<!-- 组件展示区 -->
<section class="grid grid-cols-2 gap-4">
<!-- 表单 -->
<div class="bg-white rounded-lg border border-neutral-200 shadow-xs p-6">
<h2 class="text-base font-semibold text-neutral-800 mb-4">表单组件 · Form</h2>
<form class="space-y-3">
<div class="space-y-1">
<label class="block text-sm font-medium text-neutral-700">房源标题 <span class="text-danger-600">*</span></label>
<input type="text" value="绿城百合公寓 · 南北通透三居"
class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20">
<p class="text-xs text-neutral-500">不超过 50 字，将用于客户端展示</p>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="space-y-1">
<label class="block text-sm font-medium text-neutral-700">户型</label>
<select class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 bg-white focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20">
<option>3室2厅2卫</option><option>2室1厅1卫</option>
</select>
</div>
<div class="space-y-1">
<label class="block text-sm font-medium text-neutral-700">面积 (㎡)</label>
<input type="text" value="128.5"
class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 tabular-nums focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20">
</div>
</div>
<div class="space-y-1">
<label class="block text-sm font-medium text-neutral-700">价格 (万) <span class="text-danger-600">*</span></label>
<input type="text" value="abc"
class="block w-full px-3 py-2 text-sm rounded-md border border-danger-600 tabular-nums focus:outline-none focus:ring-2 focus:ring-danger-600/20">
<p class="text-xs text-danger-600">价格必须是数字</p>
</div>
<div class="space-y-1">
<label class="block text-sm font-medium text-neutral-700">描述</label>
<textarea rows="3" class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20" placeholder="请输入房源描述..."></textarea>
</div>
<div class="flex items-center gap-4">
<label class="inline-flex items-center gap-2 text-sm text-neutral-700">
<input type="checkbox" checked class="rounded border-neutral-300 text-primary-600 focus:ring-primary-600/30"> 同步到小程序
</label>
<label class="inline-flex items-center gap-2 text-sm text-neutral-700">
<input type="radio" name="r" checked class="border-neutral-300 text-primary-600 focus:ring-primary-600/30"> 出售
</label>
<label class="inline-flex items-center gap-2 text-sm text-neutral-700">
<input type="radio" name="r" class="border-neutral-300 text-primary-600 focus:ring-primary-600/30"> 出租
</label>
<!-- Switch -->
<label class="inline-flex items-center gap-2 text-sm text-neutral-700 ml-auto">
启用
<span class="relative inline-flex h-5 w-9 items-center rounded-full bg-primary-600 transition">
<span class="inline-block h-4 w-4 transform rounded-full bg-white translate-x-4 transition"></span>
</span>
</label>
</div>
<div class="flex justify-end gap-2 pt-3 border-t border-neutral-200">
<button type="button" class="px-3 py-1.5 text-sm font-medium bg-white border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50">取消</button>
<button type="submit" class="px-3 py-1.5 text-sm font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700">保存</button>
</div>
</form>
</div>
<!-- 按钮 + Badge + Alert + Timeline -->
<div class="space-y-4">
<!-- 按钮 -->
<div class="bg-white rounded-lg border border-neutral-200 shadow-xs p-6">
<h2 class="text-base font-semibold text-neutral-800 mb-4">按钮与标签 · Buttons & Badges</h2>
<div class="flex flex-wrap gap-2 mb-3">
<button class="px-3 py-1.5 text-sm font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700">Primary</button>
<button class="px-3 py-1.5 text-sm font-medium bg-white border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 hover:border-neutral-400">Secondary</button>
<button class="px-3 py-1.5 text-sm font-medium bg-danger-600 text-white rounded-md hover:bg-danger-600/90">Danger</button>
<button class="px-3 py-1.5 text-sm font-medium text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 rounded-md">Ghost</button>
<button class="px-3 py-1.5 text-sm font-medium text-primary-600 hover:text-primary-700 hover:underline underline-offset-2">Link</button>
<button disabled class="px-3 py-1.5 text-sm font-medium bg-primary-600 text-white rounded-md opacity-50 cursor-not-allowed">Disabled</button>
<button disabled class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-primary-600 text-white rounded-md opacity-70 cursor-wait">
<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"/></svg>
保存中…
</button>
</div>
<div class="flex flex-wrap gap-1.5 mb-3">
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-primary-50 text-primary-700">Primary</span>
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-success-50 text-success-600">Success</span>
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-warning-50 text-warning-600">Warning</span>
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-danger-50 text-danger-600">Danger</span>
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-info-50 text-info-600">Info</span>
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-neutral-100 text-neutral-600">Neutral</span>
<span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium bg-success-50 text-success-600"><span class="w-1.5 h-1.5 rounded-full bg-success-600"></span>带圆点</span>
</div>
<div class="flex gap-1.5">
<kbd class="px-1.5 py-0.5 text-xs font-mono border border-neutral-300 rounded bg-neutral-50 text-neutral-600">⌘</kbd>
<kbd class="px-1.5 py-0.5 text-xs font-mono border border-neutral-300 rounded bg-neutral-50 text-neutral-600">K</kbd>
<span class="text-xs text-neutral-500 self-center ml-1">快捷键样式</span>
</div>
</div>
<!-- Alert -->
<div class="bg-white rounded-lg border border-neutral-200 shadow-xs p-6">
<h2 class="text-base font-semibold text-neutral-800 mb-4">提示条 · Alert</h2>
<div class="space-y-2">
<div class="flex gap-3 p-3 rounded-md bg-info-50 border border-info-600/20">
<svg class="w-5 h-5 text-info-600 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd"/></svg>
<div class="text-sm text-info-600">
<div class="font-medium">提示</div>
<div class="text-info-600/80 mt-0.5">房源信息将在审核后对外展示</div>
</div>
</div>
<div class="flex gap-3 p-3 rounded-md bg-warning-50 border border-warning-600/20">
<svg class="w-5 h-5 text-warning-600 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/></svg>
<div class="text-sm text-warning-600">
<div class="font-medium">即将过期</div>
<div class="text-warning-600/80 mt-0.5">3 个房源委托将在 7 天内到期</div>
</div>
</div>
<div class="flex gap-3 p-3 rounded-md bg-danger-50 border border-danger-600/20">
<svg class="w-5 h-5 text-danger-600 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-1.75-4.75a.75.75 0 1 1 1.5 0v3a.75.75 0 0 1-1.5 0v-3ZM10 6a.75.75 0 0 0-.75.75v5.25a.75.75 0 0 0 1.5 0V6.75A.75.75 0 0 0 10 6Z" clip-rule="evenodd"/></svg>
<div class="text-sm text-danger-600">
<div class="font-medium">操作失败</div>
<div class="text-danger-600/80 mt-0.5">无法删除该房源，仍有关联跟进记录</div>
</div>
</div>
</div>
</div>
<!-- Timeline -->
<div class="bg-white rounded-lg border border-neutral-200 shadow-xs p-6">
<h2 class="text-base font-semibold text-neutral-800 mb-4">跟进时间线 · Timeline</h2>
<ol class="relative border-l-2 border-neutral-200 ml-2 space-y-5">
<li class="ml-4">
<span class="absolute -left-[7px] w-3 h-3 rounded-full bg-primary-600 ring-4 ring-white"></span>
<div class="text-sm">
<div class="flex items-center gap-2">
<span class="font-medium text-neutral-900">魏深</span>
<span class="text-xs text-neutral-500 tabular-nums">今天 14:32</span>
</div>
<div class="text-neutral-700 mt-1">带客户看房，客户对户型满意，但希望价格再谈 20 万</div>
<div class="flex gap-1 mt-2">
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-primary-50 text-primary-700">看房</span>
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-neutral-100 text-neutral-600">高意向</span>
</div>
</div>
</li>
<li class="ml-4">
<span class="absolute -left-[7px] w-3 h-3 rounded-full bg-info-600 ring-4 ring-white"></span>
<div class="text-sm">
<div class="flex items-center gap-2">
<span class="font-medium text-neutral-900">李明泽</span>
<span class="text-xs text-neutral-500 tabular-nums">昨天 10:12</span>
</div>
<div class="text-neutral-700 mt-1">电话跟进业主，确认可协商空间为 30 万</div>
</div>
</li>
<li class="ml-4">
<span class="absolute -left-[7px] w-3 h-3 rounded-full bg-neutral-300 ring-4 ring-white"></span>
<div class="text-sm">
<div class="flex items-center gap-2">
<span class="text-neutral-600">系统</span>
<span class="text-xs text-neutral-500 tabular-nums">04-20 14:32</span>
</div>
<div class="text-neutral-500 mt-1">房源录入系统，分配维护人 <span class="text-neutral-700">魏深</span></div>
</div>
</li>
</ol>
</div>
</div>
</section>
<!-- 色板展示 -->
<section class="bg-white rounded-lg border border-neutral-200 shadow-xs p-6">
<h2 class="text-base font-semibold text-neutral-800 mb-4">颜色系统 · Color Palette</h2>
<div class="space-y-4">
<div>
<div class="text-xs font-medium text-neutral-500 uppercase tracking-wide mb-2">Primary (Teal · 品牌主色)</div>
<div class="grid grid-cols-7 gap-2">
<div><div class="h-14 rounded-md bg-primary-50 border border-neutral-200"></div><div class="text-xs mt-1 text-neutral-600">50 <span class="font-mono text-neutral-400">#F0FDFA</span></div></div>
<div><div class="h-14 rounded-md bg-primary-100"></div><div class="text-xs mt-1 text-neutral-600">100 <span class="font-mono text-neutral-400">#CCFBF1</span></div></div>
<div><div class="h-14 rounded-md bg-primary-200"></div><div class="text-xs mt-1 text-neutral-600">200 <span class="font-mono text-neutral-400">#99F6E4</span></div></div>
<div><div class="h-14 rounded-md bg-primary-500"></div><div class="text-xs mt-1 text-neutral-600">500 <span class="font-mono text-neutral-400">#14B8A6</span></div></div>
<div><div class="h-14 rounded-md bg-primary-600 ring-2 ring-primary-600/30 ring-offset-2"></div><div class="text-xs mt-1 text-primary-700 font-medium">600 基准</div></div>
<div><div class="h-14 rounded-md bg-primary-700"></div><div class="text-xs mt-1 text-neutral-600">700 <span class="font-mono text-neutral-400">#115E59</span></div></div>
<div><div class="h-14 rounded-md bg-primary-800"></div><div class="text-xs mt-1 text-neutral-600">800 <span class="font-mono text-neutral-400">#134E4A</span></div></div>
</div>
</div>
<div>
<div class="text-xs font-medium text-neutral-500 uppercase tracking-wide mb-2">Neutral (Slate · 中性灰)</div>
<div class="grid grid-cols-10 gap-2">
<div><div class="h-10 rounded bg-neutral-50 border border-neutral-200"></div><div class="text-xs mt-1 text-neutral-600">50</div></div>
<div><div class="h-10 rounded bg-neutral-100"></div><div class="text-xs mt-1 text-neutral-600">100</div></div>
<div><div class="h-10 rounded bg-neutral-200"></div><div class="text-xs mt-1 text-neutral-600">200</div></div>
<div><div class="h-10 rounded bg-neutral-300"></div><div class="text-xs mt-1 text-neutral-600">300</div></div>
<div><div class="h-10 rounded bg-neutral-400"></div><div class="text-xs mt-1 text-neutral-600">400</div></div>
<div><div class="h-10 rounded bg-neutral-500"></div><div class="text-xs mt-1 text-neutral-600">500</div></div>
<div><div class="h-10 rounded bg-neutral-600"></div><div class="text-xs mt-1 text-neutral-600">600</div></div>
<div><div class="h-10 rounded bg-neutral-700"></div><div class="text-xs mt-1 text-neutral-600">700</div></div>
<div><div class="h-10 rounded bg-neutral-800"></div><div class="text-xs mt-1 text-neutral-600">800</div></div>
<div><div class="h-10 rounded bg-neutral-900"></div><div class="text-xs mt-1 text-neutral-600">900</div></div>
</div>
</div>
<div>
<div class="text-xs font-medium text-neutral-500 uppercase tracking-wide mb-2">Semantic · 语义色</div>
<div class="grid grid-cols-4 gap-3">
<div class="flex items-center gap-2">
<div class="h-10 w-10 rounded bg-success-600"></div>
<div class="text-xs">
<div class="font-medium text-neutral-700">Success</div>
<div class="font-mono text-neutral-400">#16A34A</div>
</div>
</div>
<div class="flex items-center gap-2">
<div class="h-10 w-10 rounded bg-warning-600"></div>
<div class="text-xs">
<div class="font-medium text-neutral-700">Warning</div>
<div class="font-mono text-neutral-400">#D97706</div>
</div>
</div>
<div class="flex items-center gap-2">
<div class="h-10 w-10 rounded bg-danger-600"></div>
<div class="text-xs">
<div class="font-medium text-neutral-700">Danger</div>
<div class="font-mono text-neutral-400">#DC2626</div>
</div>
</div>
<div class="flex items-center gap-2">
<div class="h-10 w-10 rounded bg-info-600"></div>
<div class="text-xs">
<div class="font-medium text-neutral-700">Info</div>
<div class="font-mono text-neutral-400">#2563EB</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 字体层级 -->
<section class="bg-white rounded-lg border border-neutral-200 shadow-xs p-6">
<h2 class="text-base font-semibold text-neutral-800 mb-4">字体层级 · Typography</h2>
<div class="space-y-3">
<div class="flex items-baseline gap-4 border-b border-neutral-100 pb-2">
<div class="w-32 text-xs text-neutral-500">H1 · 20/600</div>
<div class="text-xl font-semibold text-neutral-800">全部房源</div>
</div>
<div class="flex items-baseline gap-4 border-b border-neutral-100 pb-2">
<div class="w-32 text-xs text-neutral-500">H2 · 16/600</div>
<div class="text-base font-semibold text-neutral-800">房源基本信息</div>
</div>
<div class="flex items-baseline gap-4 border-b border-neutral-100 pb-2">
<div class="w-32 text-xs text-neutral-500">Body · 14/400</div>
<div class="text-sm text-neutral-700">绿城百合公寓 · 南北通透三居 · 业主诚心出售</div>
</div>
<div class="flex items-baseline gap-4 border-b border-neutral-100 pb-2">
<div class="w-32 text-xs text-neutral-500">Data · 14/500</div>
<div class="text-sm font-medium text-neutral-900 tabular-nums">680 万 · 128.50 ㎡</div>
</div>
<div class="flex items-baseline gap-4 border-b border-neutral-100 pb-2">
<div class="w-32 text-xs text-neutral-500">Number · 20/600</div>
<div class="text-xl font-semibold tabular-nums text-neutral-900">24,891</div>
</div>
<div class="flex items-baseline gap-4 border-b border-neutral-100 pb-2">
<div class="w-32 text-xs text-neutral-500">Caption · 12/400</div>
<div class="text-xs text-neutral-500">最近同步于 2 分钟前</div>
</div>
<div class="flex items-baseline gap-4">
<div class="w-32 text-xs text-neutral-500">Mono · 12/400</div>
<div class="text-xs font-mono text-neutral-600">F20268142</div>
</div>
</div>
</section>
<div class="text-center text-xs text-neutral-400 py-4">
Fonrey UI System v1.0 · Preview · 2026-04-25
</div>
</main>
</div>
<!-- ============ Toast 演示 ============ -->
<div class="fixed bottom-6 right-6 z-[70] space-y-2 w-80">
<div class="flex gap-3 p-3 bg-white rounded-lg shadow-lg border border-neutral-200">
<div class="w-8 h-8 rounded-full bg-success-50 text-success-600 flex items-center justify-center shrink-0">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.707-9.293a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4Z" clip-rule="evenodd"/></svg>
</div>
<div class="flex-1 text-sm">
<div class="font-medium text-neutral-800">保存成功</div>
<div class="text-xs text-neutral-500 mt-0.5">房源信息已更新</div>
</div>
<button class="text-neutral-400 hover:text-neutral-600"><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="M6 18 18 6M6 6l12 12"/></svg></button>
</div>
<div class="flex gap-3 p-3 bg-white rounded-lg shadow-lg border border-neutral-200">
<div class="w-8 h-8 rounded-full bg-info-50 text-info-600 flex items-center justify-center shrink-0">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd"/></svg>
</div>
<div class="flex-1 text-sm">
<div class="font-medium text-neutral-800">有 3 条新消息</div>
<div class="text-xs text-primary-600 hover:underline cursor-pointer mt-0.5">点击查看 →</div>
</div>
</div>
</div>
</body>
<script>
// v1.1 决策：<1280px 显示引导提示页
(function(){
const gate = document.createElement('div');
gate.id = 'screen-gate';
gate.className = 'fixed inset-0 z-[100] bg-white flex-col items-center justify-center px-8 text-center hidden';
gate.innerHTML = `
<div class="w-16 h-16 rounded-xl bg-primary-600 text-white flex items-center justify-center text-2xl font-semibold mb-6">F</div>
<h1 class="text-xl font-semibold text-neutral-800 mb-2">请使用桌面端访问 Fonrey</h1>
<p class="text-sm text-neutral-600 max-w-md mb-6">
Fonrey 为桌面工作场景设计，建议屏幕宽度 ≥ 1280px。请放大浏览器窗口，或切换到电脑端访问。
</p>
<p class="text-xs text-neutral-400">当前窗口：<span id="screen-gate-width" class="tabular-nums"></span> px</p>
`;
document.body.appendChild(gate);
function check(){
const w = window.innerWidth;
document.getElementById('screen-gate-width').textContent = w;
if (w < 1280) { gate.classList.remove('hidden'); gate.classList.add('flex'); }
else { gate.classList.add('hidden'); gate.classList.remove('flex'); }
}
window.addEventListener('resize', check);
check();
})();
</script>
</html>

10
Project/fonrey/UI_DESIGN/客源列表_UI.html
View File

@@ -873,17 +873,17 @@
</td>
<!-- 姓名 + 等级 + 活跃度 -->
<td class="px-4 py-2 align-middle min-w-[160px] max-w-[200px]">
<div class="flex flex-col gap-0.5">
<td class="px-4 py-2 align-middle min-w-[160px] max-w-[220px]">
<div class="flex flex-col gap-1">
<!-- 第一行：置顶标记 + 姓名 + 等级 -->
<div class="flex items-center gap-1.5">
<!-- 置顶标记 -->
<svg x-show="client.pinned" class="w-3 h-3 text-warning-600 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 2ZM10 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 15Z"/></svg>
<a href="#"
class="text-info-600 hover:underline font-medium text-sm truncate max-w-[160px]"
class="text-primary-600 hover:underline font-semibold text-base truncate max-w-[140px]"
x-text="client.name"></a>
<span class="text-[11px] text-neutral-400 font-medium shrink-0" x-text="client.gradeLabel"></span>
</div>
<!-- 活跃度标签行 -->
<!-- 第二行：活跃度标签（强制独占一行） -->
<div class="flex items-center gap-1 flex-wrap">
<template x-for="tag in client.activityTags" :key="tag.key">
<span class="text-[11px] px-1.5 py-0.5 rounded-full font-medium"

981
Project/fonrey/UI_DESIGN/客源列表_UI.html.bak
View File

@@ -1,981 +0,0 @@
<!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:6px;height:6px}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:4px}
::-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>

30
Project/fonrey/UI_DESIGN/客源管理/客源列表_UI.md
View File

@@ -737,21 +737,21 @@ HTMX loading 触发：在 `<div id="client-list-container">` 添加 `hx-indicato
表头行：`<thead class="bg-neutral-50">`，列头单元格统一样式：`px-4 py-3 text-left text-xs font-semibold text-neutral-500 uppercase tracking-wide whitespace-nowrap`
数据行：`<tr class="hover:bg-neutral-50 transition-colors" style="height:56px">`
| # | 列名 | 数据字段 | 列宽 | 对齐 | 可排序 | 特殊渲染说明 |
|---|---|---|---|---|---|---|
| 1 | （复选框） | — | `w-10`（40px）`px-4` | 居中 | 否 | 全选：表头 `<input type="checkbox" id="select-all">`；单选：行内 `<input type="checkbox" x-model="selected" :value="client.id">` |
| 2 | 姓名 | `contact_name` + `grade_display` + 活跃度标签 | `min-w-[160px] max-w-[200px]` | 左对齐 | 否 | 蓝色链接 `text-info-600 hover:underline`；下方渲染 Grade Badge + 活跃度 Tag（见 §3.2） |
| 3 | 状态 | `status_display` | `w-20`（80px） | 左对齐 | 否 | Status Badge（见 §3.2） |
| 4 | 需求类型 | `requirement_type_display` | `w-20`（80px） | 左对齐 | 否 | 纯文字：二手 / 新房 / 租房 |
| 5 | 需求/解读 | `budget_area_display` | `min-w-[180px]` | 左对齐 | 否 | 截断 `truncate`；Tooltip 展示完整内容（`title` 属性） |
| 6 | 智能配房 | `match_count` | `w-24`（96px） | 左对齐 | 否 | `N套` + Heroicon `information-circle`（`w-4 h-4 text-neutral-400 ml-1 cursor-pointer`）；点击弹出配房预览 Popover |
| 7 | 意向商圈/小区 | `intent_location_display` | `min-w-[120px]` | 左对齐 | 否 | 多值逗号分隔；`-` 表示未填；截断 `truncate max-w-[160px]` |
| 8 | 归属人 | `owner_display` | `min-w-[140px]` | 左对齐 | 否 | 格式：`姓名-门店组`；`text-sm text-neutral-700` |
| 9 | 带看进度 | `viewing_progress_display` | `w-20`（80px） | 左对齐 | 否 | 「未带看」灰色文字；「一看」`bg-warning-50 text-warning-600 px-2 py-0.5 rounded-full text-xs`；「二看」`bg-info-50 text-info-600`；「复看」`bg-success-50 text-success-600` |
| 10 | 带看次数 | `viewing_count` | `w-[72px]` | 左对齐 | 是 | `N次`；点击列头触发 HTMX 排序 |
| 11 | 委托日期 | `commission_date` | `w-24`（96px） | 左对齐 | 是 | `YYYY-MM-DD`；未填显示 `-` |
| 12 | 最近时间 | `last_follow_display` / `last_contact_display` | `w-24`（96px） | 左对齐 | 是（默认降序） | `N天前` / `今天`；超过 30 天字色 `text-danger-600` |
| 13 | 操作 | — | `w-16`（64px） | 居中 | 否 | 见 §3.3 |
| # | 列名 | 数据字段 | 列宽 | 对齐 | 可排序 | 特殊渲染说明 |
| --- | ------- | ---------------------------------------------- | ----------------------------- | --- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1 | （复选框） | — | `w-10`（40px）`px-4` | 居中 | 否 | 全选：表头 `<input type="checkbox" id="select-all">`；单选：行内 `<input type="checkbox" x-model="selected" :value="client.id">` |
| 2 | 姓名 | `contact_name` + `grade_display` + 活跃度标签 | `min-w-[160px] max-w-[200px]` | 左对齐 | 否 | 蓝色链接 `text-primary-600 hover:underline`；下方渲染 Grade Badge + 活跃度 Tag（见 §3.2） |
| 3 | 状态 | `status_display` | `w-20`（80px） | 左对齐 | 否 | Status Badge（见 §3.2） |
| 4 | 需求类型 | `requirement_type_display` | `w-20`（80px） | 左对齐 | 否 | 纯文字：二手 / 新房 / 租房 |
| 5 | 需求/解读 | `budget_area_display` | `min-w-[180px]` | 左对齐 | 否 | 截断 `truncate`；Tooltip 展示完整内容（`title` 属性） |
| 6 | 智能配房 | `match_count` | `w-24`（96px） | 左对齐 | 否 | `N套` + Heroicon `information-circle`（`w-4 h-4 text-neutral-400 ml-1 cursor-pointer`）；点击弹出配房预览 Popover |
| 7 | 意向商圈/小区 | `intent_location_display` | `min-w-[120px]` | 左对齐 | 否 | 多值逗号分隔；`-` 表示未填；截断 `truncate max-w-[160px]` |
| 8 | 归属人 | `owner_display` | `min-w-[140px]` | 左对齐 | 否 | 格式：`姓名-门店组`；`text-sm text-neutral-700` |
| 9 | 带看进度 | `viewing_progress_display` | `w-20`（80px） | 左对齐 | 否 | 「未带看」灰色文字；「一看」`bg-warning-50 text-warning-600 px-2 py-0.5 rounded-full text-xs`；「二看」`bg-info-50 text-info-600`；「复看」`bg-success-50 text-success-600` |
| 10 | 带看次数 | `viewing_count` | `w-[72px]` | 左对齐 | 是 | `N次`；点击列头触发 HTMX 排序 |
| 11 | 委托日期 | `commission_date` | `w-24`（96px） | 左对齐 | 是 | `YYYY-MM-DD`；未填显示 `-` |
| 12 | 最近时间 | `last_follow_display` / `last_contact_display` | `w-24`（96px） | 左对齐 | 是（默认降序） | `N天前` / `今天`；超过 30 天字色 `text-danger-600` |
| 13 | 操作 | — | `w-16`（64px） | 居中 | 否 | 见 §3.3 |
> **自定义列**（P1 🟡）：用户通过「自定义列表」弹窗（§4.1）选择显示字段后，后端将用户配置存入 `UserColumnPreference`，Django 模板根据配置动态渲染列头和列单元格。可选字段见截图 `客源列表-自定义字段.png`：录入日期、最近通话日期、用途、来源、客源编号、首录人、成交人等。

1115
Project/fonrey/UI_DESIGN/房源列表_UI.html Normal file
View File

File diff suppressed because it is too large Load Diff

1379
Project/fonrey/UI_DESIGN/房源管理/房源列表_UI.md Normal file
View File

File diff suppressed because it is too large Load Diff