diff --git a/soul-admin/src/pages/users/UsersPage.tsx b/soul-admin/src/pages/users/UsersPage.tsx
index 11ace343..68d8cf3c 100644
--- a/soul-admin/src/pages/users/UsersPage.tsx
+++ b/soul-admin/src/pages/users/UsersPage.tsx
@@ -36,9 +36,13 @@ import {
   Crown,
   Plus,
   BookOpen,
-  TrendingUp,
   Settings,
   PenLine,
+  Navigation,
+  TrendingUp,
+  ArrowUpDown,
+  ChevronDown,
+  ChevronUp,
 } from 'lucide-react'
 import { UserDetailModal } from '@/components/modules/user/UserDetailModal'
 import { SetVipModal } from '@/components/modules/user/SetVipModal'
@@ -62,6 +66,9 @@ interface User {
   referralCount?: number
   createdAt: string
   updatedAt?: string | null
+  // RFM（排序模式时有值）
+  rfmScore?: number
+  rfmLevel?: string
 }
 
 interface UserRule {
@@ -72,22 +79,27 @@ interface UserRule {
   sort: number
   enabled: boolean
   createdAt?: string
-  updatedAt?: string
 }
 
-interface RFMUser {
-  id: string
-  nickname: string
-  phone?: string
-  avatar?: string
-  rfmScore: number
-  rfmLevel: string
-  recency: number
-  frequency: number
-  monetary: number
-  lastOrderAt?: string
+interface VipRole {
+  id: number
+  name: string
+  sort: number
+  createdAt?: string
 }
 
+// 用户旅程阶段定义
+const JOURNEY_STAGES = [
+  { id: 'register', label: '注册/登录', icon: '👤', color: 'bg-blue-500/20 border-blue-500/40 text-blue-400', desc: '微信授权登录或手机号注册' },
+  { id: 'browse', label: '浏览章节', icon: '📖', color: 'bg-purple-500/20 border-purple-500/40 text-purple-400', desc: '点击免费/付费章节预览' },
+  { id: 'bind_phone', label: '绑定手机', icon: '📱', color: 'bg-cyan-500/20 border-cyan-500/40 text-cyan-400', desc: '触发付费章节后绑定手机' },
+  { id: 'first_pay', label: '首次付款', icon: '💳', color: 'bg-green-500/20 border-green-500/40 text-green-400', desc: '购买单章或全书' },
+  { id: 'fill_profile', label: '完善资料', icon: '✍️', color: 'bg-yellow-500/20 border-yellow-500/40 text-yellow-400', desc: '填写头像、MBTI、行业等' },
+  { id: 'match', label: '派对房匹配', icon: '🤝', color: 'bg-orange-500/20 border-orange-500/40 text-orange-400', desc: '参与 Soul 派对房' },
+  { id: 'vip', label: '升级 VIP', icon: '👑', color: 'bg-amber-500/20 border-amber-500/40 text-amber-400', desc: '付款 ¥1980 购买全书' },
+  { id: 'distribution', label: '开启分销', icon: '🔗', color: 'bg-[#38bdac]/20 border-[#38bdac]/40 text-[#38bdac]', desc: '生成推广码并推荐好友' },
+]
+
 export function UsersPage() {
   // ===== 用户列表 state =====
   const [users, setUsers] = useState<User[]>([])
@@ -99,6 +111,10 @@ export function UsersPage() {
   const [vipFilter, setVipFilter] = useState<'all' | 'vip'>('all')
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [rfmSortMode, setRfmSortMode] = useState(false) // RFM 排序模式
+  const [rfmSortDir, setRfmSortDir] = useState<'desc' | 'asc'>('desc')
+
+  // 弹框
   const [showUserModal, setShowUserModal] = useState(false)
   const [showPasswordModal, setShowPasswordModal] = useState(false)
   const [editingUser, setEditingUser] = useState<User | null>(null)
@@ -106,101 +122,110 @@ export function UsersPage() {
   const [confirmPassword, setConfirmPassword] = useState('')
   const [isSaving, setIsSaving] = useState(false)
   const [showReferralsModal, setShowReferralsModal] = useState(false)
-  const [referralsData, setReferralsData] = useState<{ referrals?: unknown[]; stats?: Record<string, unknown> }>({
-    referrals: [],
-    stats: {},
-  })
+  const [referralsData, setReferralsData] = useState<{ referrals?: unknown[]; stats?: Record<string, unknown> }>({ referrals: [], stats: {} })
   const [referralsLoading, setReferralsLoading] = useState(false)
   const [selectedUserForReferrals, setSelectedUserForReferrals] = useState<User | null>(null)
   const [showDetailModal, setShowDetailModal] = useState(false)
   const [selectedUserIdForDetail, setSelectedUserIdForDetail] = useState<string | null>(null)
   const [showSetVipModal, setShowSetVipModal] = useState(false)
   const [selectedUserForVip, setSelectedUserForVip] = useState<User | null>(null)
-  const [formData, setFormData] = useState({
-    phone: '',
-    nickname: '',
-    password: '',
-    isAdmin: false,
-    hasFullBook: false,
-  })
+  const [formData, setFormData] = useState({ phone: '', nickname: '', password: '', isAdmin: false, hasFullBook: false })
 
-  // ===== 规则管理 state =====
+  // ===== 规则管理 =====
   const [rules, setRules] = useState<UserRule[]>([])
   const [rulesLoading, setRulesLoading] = useState(false)
   const [showRuleModal, setShowRuleModal] = useState(false)
   const [editingRule, setEditingRule] = useState<UserRule | null>(null)
   const [ruleForm, setRuleForm] = useState({ title: '', description: '', trigger: '', sort: 0, enabled: true })
 
-  // ===== RFM 排行榜 state =====
-  const [rfmList, setRfmList] = useState<RFMUser[]>([])
-  const [rfmLoading, setRfmLoading] = useState(false)
-  const [rfmSearch, setRfmSearch] = useState('')
-  const debouncedRfmSearch = useDebounce(rfmSearch, 300)
+  // ===== VIP 角色 =====
+  const [vipRoles, setVipRoles] = useState<VipRole[]>([])
+  const [vipRolesLoading, setVipRolesLoading] = useState(false)
+  const [showVipRoleModal, setShowVipRoleModal] = useState(false)
+  const [editingVipRole, setEditingVipRole] = useState<VipRole | null>(null)
+  const [vipRoleForm, setVipRoleForm] = useState({ name: '', sort: 0 })
+
+  // ===== 用户旅程总览 =====
+  const [journeyStats, setJourneyStats] = useState<Record<string, number>>({})
+  const [journeyLoading, setJourneyLoading] = useState(false)
 
   // ===== 用户列表 =====
   async function loadUsers() {
     setIsLoading(true)
     setError(null)
     try {
-      const params = new URLSearchParams({
-        page: String(page),
-        pageSize: String(pageSize),
-        search: debouncedSearch,
-        ...(vipFilter === 'vip' && { vip: 'true' }),
-      })
-      const data = await get<{
-        success?: boolean
-        users?: User[]
-        total?: number
-        error?: string
-      }>(`/api/db/users?${params}`)
-      if (data?.success) {
-        setUsers(data.users || [])
-        setTotal(data.total ?? 0)
+      if (rfmSortMode) {
+        // RFM 排序模式：从 RFM 接口获取
+        const params = new URLSearchParams({ search: debouncedSearch, limit: String(pageSize * 5) })
+        const data = await get<{ success?: boolean; users?: User[] }>(`/api/db/users/rfm?${params}`)
+        if (data?.success) {
+          let list = data.users || []
+          if (rfmSortDir === 'asc') list = [...list].reverse()
+          const start = (page - 1) * pageSize
+          setUsers(list.slice(start, start + pageSize))
+          setTotal(data.users?.length ?? 0)
+        }
       } else {
-        setError(data?.error || '加载失败')
+        const params = new URLSearchParams({
+          page: String(page),
+          pageSize: String(pageSize),
+          search: debouncedSearch,
+          ...(vipFilter === 'vip' && { vip: 'true' }),
+        })
+        const data = await get<{ success?: boolean; users?: User[]; total?: number; error?: string }>(`/api/db/users?${params}`)
+        if (data?.success) {
+          setUsers(data.users || [])
+          setTotal(data.total ?? 0)
+        } else {
+          setError(data?.error || '加载失败')
+        }
       }
     } catch (err) {
       console.error('Load users error:', err)
-      setError('网络错误，请检查连接')
+      setError('网络错误')
     } finally {
       setIsLoading(false)
     }
   }
 
-  useEffect(() => {
-    setPage(1)
-  }, [debouncedSearch, vipFilter])
-
-  useEffect(() => {
-    loadUsers()
-  }, [page, pageSize, debouncedSearch, vipFilter])
+  useEffect(() => { setPage(1) }, [debouncedSearch, vipFilter, rfmSortMode])
+  useEffect(() => { loadUsers() }, [page, pageSize, debouncedSearch, vipFilter, rfmSortMode, rfmSortDir])
 
   const totalPages = Math.ceil(total / pageSize) || 1
 
+  const toggleRfmSort = () => {
+    if (rfmSortMode) {
+      if (rfmSortDir === 'desc') setRfmSortDir('asc')
+      else { setRfmSortMode(false); setRfmSortDir('desc') }
+    } else {
+      setRfmSortMode(true)
+      setRfmSortDir('desc')
+    }
+  }
+
+  const getRFMLevelColor = (level?: string) => {
+    const map: Record<string, string> = {
+      S: 'bg-amber-500/20 text-amber-400',
+      A: 'bg-green-500/20 text-green-400',
+      B: 'bg-blue-500/20 text-blue-400',
+      C: 'bg-gray-500/20 text-gray-400',
+      D: 'bg-red-500/20 text-red-400',
+    }
+    return map[level || ''] || 'bg-gray-500/20 text-gray-400'
+  }
+
   async function handleDelete(userId: string) {
     if (!confirm('确定要删除这个用户吗？')) return
     try {
-      const data = await del<{ success?: boolean; error?: string }>(
-        `/api/db/users?id=${encodeURIComponent(userId)}`,
-      )
+      const data = await del<{ success?: boolean; error?: string }>(`/api/db/users?id=${encodeURIComponent(userId)}`)
       if (data?.success) loadUsers()
-      else alert('删除失败: ' + (data?.error || '未知错误'))
-    } catch (err) {
-      console.error('Delete user error:', err)
-      alert('删除失败')
-    }
+      else alert('删除失败: ' + (data?.error || ''))
+    } catch { alert('删除失败') }
   }
 
   const handleEditUser = (user: User) => {
     setEditingUser(user)
-    setFormData({
-      phone: user.phone || '',
-      nickname: user.nickname || '',
-      password: '',
-      isAdmin: !!(user.isAdmin ?? false),
-      hasFullBook: !!(user.hasFullBook ?? false),
-    })
+    setFormData({ phone: user.phone || '', nickname: user.nickname || '', password: '', isAdmin: !!(user.isAdmin ?? false), hasFullBook: !!(user.hasFullBook ?? false) })
     setShowUserModal(true)
   }
 
@@ -211,93 +236,42 @@ export function UsersPage() {
   }
 
   async function handleSaveUser() {
-    if (!formData.phone || !formData.nickname) {
-      alert('请填写手机号和昵称')
-      return
-    }
+    if (!formData.phone || !formData.nickname) { alert('请填写手机号和昵称'); return }
     setIsSaving(true)
     try {
       if (editingUser) {
-        const data = await put<{ success?: boolean; error?: string }>('/api/db/users', {
-          id: editingUser.id,
-          nickname: formData.nickname,
-          isAdmin: formData.isAdmin,
-          hasFullBook: formData.hasFullBook,
-          ...(formData.password && { password: formData.password }),
-        })
-        if (!data?.success) { alert('更新失败: ' + (data?.error || '未知错误')); return }
+        const data = await put<{ success?: boolean; error?: string }>('/api/db/users', { id: editingUser.id, nickname: formData.nickname, isAdmin: formData.isAdmin, hasFullBook: formData.hasFullBook, ...(formData.password && { password: formData.password }) })
+        if (!data?.success) { alert('更新失败: ' + (data?.error || '')); return }
       } else {
-        const data = await post<{ success?: boolean; error?: string }>('/api/db/users', {
-          phone: formData.phone,
-          nickname: formData.nickname,
-          password: formData.password,
-          isAdmin: formData.isAdmin,
-        })
-        if (!data?.success) { alert('创建失败: ' + (data?.error || '未知错误')); return }
+        const data = await post<{ success?: boolean; error?: string }>('/api/db/users', { phone: formData.phone, nickname: formData.nickname, password: formData.password, isAdmin: formData.isAdmin })
+        if (!data?.success) { alert('创建失败: ' + (data?.error || '')); return }
       }
       setShowUserModal(false)
       loadUsers()
-    } catch (err) {
-      console.error('Save user error:', err)
-      alert('保存失败')
-    } finally {
-      setIsSaving(false)
-    }
+    } catch { alert('保存失败') } finally { setIsSaving(false) }
   }
 
-  const handleChangePassword = (user: User) => {
-    setEditingUser(user)
-    setNewPassword('')
-    setConfirmPassword('')
-    setShowPasswordModal(true)
-  }
+  const handleChangePassword = (user: User) => { setEditingUser(user); setNewPassword(''); setConfirmPassword(''); setShowPasswordModal(true) }
 
   async function handleViewReferrals(user: User) {
-    setSelectedUserForReferrals(user)
-    setShowReferralsModal(true)
-    setReferralsLoading(true)
+    setSelectedUserForReferrals(user); setShowReferralsModal(true); setReferralsLoading(true)
     try {
-      const data = await get<{ success?: boolean; referrals?: unknown[]; stats?: Record<string, unknown> }>(
-        `/api/db/users/referrals?userId=${encodeURIComponent(user.id)}`,
-      )
+      const data = await get<{ success?: boolean; referrals?: unknown[]; stats?: Record<string, unknown> }>(`/api/db/users/referrals?userId=${encodeURIComponent(user.id)}`)
       if (data?.success) setReferralsData({ referrals: data.referrals || [], stats: data.stats || {} })
       else setReferralsData({ referrals: [], stats: {} })
-    } catch (err) {
-      console.error('Load referrals error:', err)
-      setReferralsData({ referrals: [], stats: {} })
-    } finally {
-      setReferralsLoading(false)
-    }
-  }
-
-  const handleViewDetail = (user: User) => {
-    setSelectedUserIdForDetail(user.id)
-    setShowDetailModal(true)
-  }
-
-  const handleSetVip = (user: User) => {
-    setSelectedUserForVip(user)
-    setShowSetVipModal(true)
+    } catch { setReferralsData({ referrals: [], stats: {} }) } finally { setReferralsLoading(false) }
   }
 
   async function handleSavePassword() {
     if (!newPassword) { alert('请输入新密码'); return }
-    if (newPassword !== confirmPassword) { alert('两次输入的密码不一致'); return }
-    if (newPassword.length < 6) { alert('密码长度不能少于6位'); return }
+    if (newPassword !== confirmPassword) { alert('两次密码不一致'); return }
+    if (newPassword.length < 6) { alert('密码至少6位'); return }
     setIsSaving(true)
     try {
-      const data = await put<{ success?: boolean; error?: string }>('/api/db/users', {
-        id: editingUser?.id,
-        password: newPassword,
-      })
-      if (data?.success) { alert('密码修改成功'); setShowPasswordModal(false) }
-      else alert('密码修改失败: ' + (data?.error || '未知错误'))
-    } catch (err) {
-      console.error('Change password error:', err)
-      alert('密码修改失败')
-    } finally {
-      setIsSaving(false)
-    }
+      const data = await put<{ success?: boolean; error?: string }>('/api/db/users', { id: editingUser?.id, password: newPassword })
+      if (data?.success) { alert('修改成功'); setShowPasswordModal(false) }
+      else alert('修改失败: ' + (data?.error || ''))
+    } catch { alert('修改失败') } finally { setIsSaving(false) }
   }
 
   // ===== 规则管理 =====
@@ -306,159 +280,125 @@ export function UsersPage() {
     try {
       const data = await get<{ success?: boolean; rules?: UserRule[] }>('/api/db/user-rules')
       if (data?.success) setRules(data.rules || [])
-    } catch (err) {
-      console.error('Load rules error:', err)
-    } finally {
-      setRulesLoading(false)
-    }
+    } catch { } finally { setRulesLoading(false) }
   }, [])
 
-  const handleAddRule = () => {
-    setEditingRule(null)
-    setRuleForm({ title: '', description: '', trigger: '', sort: 0, enabled: true })
-    setShowRuleModal(true)
-  }
-
-  const handleEditRule = (rule: UserRule) => {
-    setEditingRule(rule)
-    setRuleForm({
-      title: rule.title,
-      description: rule.description,
-      trigger: rule.trigger,
-      sort: rule.sort,
-      enabled: rule.enabled,
-    })
-    setShowRuleModal(true)
-  }
-
   async function handleSaveRule() {
     if (!ruleForm.title) { alert('请填写规则标题'); return }
     setIsSaving(true)
     try {
       if (editingRule) {
-        const data = await put<{ success?: boolean; error?: string }>('/api/db/user-rules', {
-          id: editingRule.id,
-          ...ruleForm,
-        })
+        const data = await put<{ success?: boolean; error?: string }>('/api/db/user-rules', { id: editingRule.id, ...ruleForm })
         if (!data?.success) { alert('更新失败: ' + (data?.error || '')); return }
       } else {
         const data = await post<{ success?: boolean; error?: string }>('/api/db/user-rules', ruleForm)
         if (!data?.success) { alert('创建失败: ' + (data?.error || '')); return }
       }
-      setShowRuleModal(false)
-      loadRules()
-    } catch (err) {
-      console.error('Save rule error:', err)
-      alert('保存失败')
-    } finally {
-      setIsSaving(false)
-    }
+      setShowRuleModal(false); loadRules()
+    } catch { alert('保存失败') } finally { setIsSaving(false) }
   }
 
-  async function handleDeleteRule(ruleId: number) {
-    if (!confirm('确定删除该规则？')) return
+  async function handleDeleteRule(id: number) {
+    if (!confirm('确定删除？')) return
     try {
-      const data = await del<{ success?: boolean; error?: string }>(`/api/db/user-rules?id=${ruleId}`)
+      const data = await del<{ success?: boolean }>(`/api/db/user-rules?id=${id}`)
       if (data?.success) loadRules()
-      else alert('删除失败: ' + (data?.error || ''))
-    } catch (err) {
-      console.error('Delete rule error:', err)
-    }
+    } catch { }
   }
 
   async function handleToggleRule(rule: UserRule) {
-    try {
-      await put('/api/db/user-rules', { id: rule.id, enabled: !rule.enabled })
-      loadRules()
-    } catch (err) {
-      console.error('Toggle rule error:', err)
-    }
+    try { await put('/api/db/user-rules', { id: rule.id, enabled: !rule.enabled }); loadRules() } catch { }
   }
 
-  // ===== RFM 排行榜 =====
-  const loadRFM = useCallback(async () => {
-    setRfmLoading(true)
+  // ===== VIP 角色 =====
+  const loadVipRoles = useCallback(async () => {
+    setVipRolesLoading(true)
     try {
-      const params = new URLSearchParams({ search: debouncedRfmSearch, limit: '50' })
-      const data = await get<{ success?: boolean; users?: RFMUser[] }>(`/api/db/users/rfm?${params}`)
-      if (data?.success) setRfmList(data.users || [])
-    } catch (err) {
-      console.error('Load RFM error:', err)
-    } finally {
-      setRfmLoading(false)
-    }
-  }, [debouncedRfmSearch])
+      const data = await get<{ success?: boolean; roles?: VipRole[] }>('/api/db/vip-roles')
+      if (data?.success) setVipRoles(data.roles || [])
+    } catch { } finally { setVipRolesLoading(false) }
+  }, [])
 
-  const getRFMLevelColor = (level: string) => {
-    const map: Record<string, string> = {
-      S: 'bg-amber-500/20 text-amber-400',
-      A: 'bg-green-500/20 text-green-400',
-      B: 'bg-blue-500/20 text-blue-400',
-      C: 'bg-gray-500/20 text-gray-400',
-      D: 'bg-red-500/20 text-red-400',
-    }
-    return map[level] || 'bg-gray-500/20 text-gray-400'
+  async function handleSaveVipRole() {
+    if (!vipRoleForm.name) { alert('请填写角色名称'); return }
+    setIsSaving(true)
+    try {
+      if (editingVipRole) {
+        const data = await put<{ success?: boolean; error?: string }>('/api/db/vip-roles', { id: editingVipRole.id, ...vipRoleForm })
+        if (!data?.success) { alert('更新失败'); return }
+      } else {
+        const data = await post<{ success?: boolean; error?: string }>('/api/db/vip-roles', vipRoleForm)
+        if (!data?.success) { alert('创建失败'); return }
+      }
+      setShowVipRoleModal(false); loadVipRoles()
+    } catch { alert('保存失败') } finally { setIsSaving(false) }
   }
 
+  async function handleDeleteVipRole(id: number) {
+    if (!confirm('确定删除？')) return
+    try {
+      const data = await del<{ success?: boolean }>(`/api/db/vip-roles?id=${id}`)
+      if (data?.success) loadVipRoles()
+    } catch { }
+  }
+
+  // ===== 用户旅程总览 =====
+  const loadJourneyStats = useCallback(async () => {
+    setJourneyLoading(true)
+    try {
+      const data = await get<{ success?: boolean; stats?: Record<string, number> }>('/api/db/users/journey-stats')
+      if (data?.success && data.stats) setJourneyStats(data.stats)
+    } catch { } finally { setJourneyLoading(false) }
+  }, [])
+
   return (
     <div className="p-8 w-full">
       {error && (
         <div className="mb-4 px-4 py-3 rounded-lg bg-red-500/20 border border-red-500/50 text-red-400 text-sm flex items-center justify-between">
           <span>{error}</span>
-          <button type="button" onClick={() => setError(null)} className="hover:text-red-300">×</button>
+          <button type="button" onClick={() => setError(null)}>×</button>
         </div>
       )}
 
       <div className="flex justify-between items-center mb-6">
         <div>
           <h2 className="text-2xl font-bold text-white">用户管理</h2>
-          <p className="text-gray-400 mt-1 text-sm">共 {total} 位注册用户</p>
+          <p className="text-gray-400 mt-1 text-sm">共 {total} 位注册用户{rfmSortMode && ' · RFM 排序中'}</p>
         </div>
       </div>
 
       <Tabs defaultValue="users" className="w-full">
-        <TabsList className="bg-[#0a1628] border border-gray-700/50 p-1 mb-6">
-          <TabsTrigger
-            value="users"
-            className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac] flex items-center gap-2"
-          >
-            <Users className="w-4 h-4" />
-            用户列表
+        <TabsList className="bg-[#0a1628] border border-gray-700/50 p-1 mb-6 flex-wrap h-auto gap-1">
+          <TabsTrigger value="users" className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac] flex items-center gap-1.5">
+            <Users className="w-4 h-4" /> 用户列表
           </TabsTrigger>
-          <TabsTrigger
-            value="rfm"
-            className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac] flex items-center gap-2"
-            onClick={loadRFM}
-          >
-            <TrendingUp className="w-4 h-4" />
-            RFM 估值排行
+          <TabsTrigger value="journey" className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac] flex items-center gap-1.5" onClick={loadJourneyStats}>
+            <Navigation className="w-4 h-4" /> 用户旅程总览
           </TabsTrigger>
-          <TabsTrigger
-            value="rules"
-            className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac] flex items-center gap-2"
-            onClick={loadRules}
-          >
-            <Settings className="w-4 h-4" />
-            规则配置
+          <TabsTrigger value="rules" className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac] flex items-center gap-1.5" onClick={loadRules}>
+            <Settings className="w-4 h-4" /> 规则配置
+          </TabsTrigger>
+          <TabsTrigger value="vip-roles" className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac] flex items-center gap-1.5" onClick={loadVipRoles}>
+            <Crown className="w-4 h-4" /> VIP 角色
           </TabsTrigger>
         </TabsList>
 
-        {/* ===== 用户列表 Tab ===== */}
+        {/* ===== 用户列表 ===== */}
         <TabsContent value="users">
-          <div className="flex items-center gap-4 mb-4 justify-end">
+          <div className="flex items-center gap-3 mb-4 justify-end flex-wrap">
             <Button
               variant="outline"
               onClick={loadUsers}
               disabled={isLoading}
               className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
             >
-              <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
-              刷新
+              <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} /> 刷新
             </Button>
             <select
               value={vipFilter}
               onChange={(e) => { setVipFilter(e.target.value as 'all' | 'vip'); setPage(1) }}
               className="bg-[#0f2137] border border-gray-700 text-white rounded-lg px-3 py-2 text-sm"
+              disabled={rfmSortMode}
             >
               <option value="all">全部用户</option>
               <option value="vip">VIP会员</option>
@@ -468,14 +408,13 @@ export function UsersPage() {
               <Input
                 type="text"
                 placeholder="搜索用户..."
-                className="pl-10 bg-[#0f2137] border-gray-700 text-white placeholder:text-gray-500 w-64"
+                className="pl-10 bg-[#0f2137] border-gray-700 text-white placeholder:text-gray-500 w-56"
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
               />
             </div>
             <Button onClick={handleAddUser} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
-              <UserPlus className="w-4 h-4 mr-2" />
-              添加用户
+              <UserPlus className="w-4 h-4 mr-2" /> 添加用户
             </Button>
           </div>
 
@@ -495,6 +434,22 @@ export function UsersPage() {
                         <TableHead className="text-gray-400">绑定信息</TableHead>
                         <TableHead className="text-gray-400">购买状态</TableHead>
                         <TableHead className="text-gray-400">分销收益</TableHead>
+                        <TableHead className="text-gray-400 cursor-pointer select-none" onClick={toggleRfmSort}>
+                          <div className="flex items-center gap-1 group">
+                            <TrendingUp className="w-3.5 h-3.5" />
+                            <span>RFM分值</span>
+                            {rfmSortMode ? (
+                              rfmSortDir === 'desc'
+                                ? <ChevronDown className="w-3.5 h-3.5 text-[#38bdac]" />
+                                : <ChevronUp className="w-3.5 h-3.5 text-[#38bdac]" />
+                            ) : (
+                              <ArrowUpDown className="w-3.5 h-3.5 text-gray-600 group-hover:text-gray-400" />
+                            )}
+                          </div>
+                          {rfmSortMode && (
+                            <div className="text-[10px] text-[#38bdac] font-normal mt-0.5">点击切换方向/关闭</div>
+                          )}
+                        </TableHead>
                         <TableHead className="text-gray-400">注册时间</TableHead>
                         <TableHead className="text-right text-gray-400">操作</TableHead>
                       </TableRow>
@@ -507,23 +462,13 @@ export function UsersPage() {
                               <div className="w-10 h-10 rounded-full bg-[#38bdac]/20 flex items-center justify-center text-sm font-medium text-[#38bdac]">
                                 {user.avatar ? (
                                   <img src={user.avatar} className="w-full h-full rounded-full object-cover" alt="" />
-                                ) : (
-                                  user.nickname?.charAt(0) || '?'
-                                )}
+                                ) : user.nickname?.charAt(0) || '?'}
                               </div>
                               <div>
-                                <div className="flex items-center gap-2">
+                                <div className="flex items-center gap-1.5">
                                   <p className="font-medium text-white">{user.nickname}</p>
-                                  {user.isAdmin && (
-                                    <Badge className="bg-purple-500/20 text-purple-400 hover:bg-purple-500/20 border-0 text-xs">
-                                      管理员
-                                    </Badge>
-                                  )}
-                                  {user.openId && !user.id?.startsWith('user_') && (
-                                    <Badge className="bg-green-500/20 text-green-400 hover:bg-green-500/20 border-0 text-xs">
-                                      微信
-                                    </Badge>
-                                  )}
+                                  {user.isAdmin && <Badge className="bg-purple-500/20 text-purple-400 hover:bg-purple-500/20 border-0 text-xs">管理员</Badge>}
+                                  {user.openId && !user.id?.startsWith('user_') && <Badge className="bg-green-500/20 text-green-400 hover:bg-green-500/20 border-0 text-xs">微信</Badge>}
                                 </div>
                                 <p className="text-xs text-gray-500 font-mono">
                                   {user.openId ? user.openId.slice(0, 12) + '...' : user.id?.slice(0, 12)}
@@ -533,365 +478,215 @@ export function UsersPage() {
                           </TableCell>
                           <TableCell>
                             <div className="space-y-1">
-                              {user.phone && (
-                                <div className="flex items-center gap-1 text-xs">
-                                  <span className="text-gray-500">📱</span>
-                                  <span className="text-gray-300">{user.phone}</span>
-                                </div>
-                              )}
-                              {user.wechatId && (
-                                <div className="flex items-center gap-1 text-xs">
-                                  <span className="text-gray-500">💬</span>
-                                  <span className="text-gray-300">{user.wechatId}</span>
-                                </div>
-                              )}
-                              {user.openId && (
-                                <div className="flex items-center gap-1 text-xs">
-                                  <span className="text-gray-500">🔗</span>
-                                  <span className="text-gray-500 truncate max-w-[100px]" title={user.openId}>
-                                    {user.openId.slice(0, 12)}...
-                                  </span>
-                                </div>
-                              )}
-                              {!user.phone && !user.wechatId && !user.openId && (
-                                <span className="text-gray-600 text-xs">未绑定</span>
-                              )}
+                              {user.phone && <div className="flex items-center gap-1 text-xs"><span className="text-gray-500">📱</span><span className="text-gray-300">{user.phone}</span></div>}
+                              {user.wechatId && <div className="flex items-center gap-1 text-xs"><span className="text-gray-500">💬</span><span className="text-gray-300">{user.wechatId}</span></div>}
+                              {user.openId && <div className="flex items-center gap-1 text-xs"><span className="text-gray-500">🔗</span><span className="text-gray-500 truncate max-w-[100px]" title={user.openId}>{user.openId.slice(0, 12)}...</span></div>}
+                              {!user.phone && !user.wechatId && !user.openId && <span className="text-gray-600 text-xs">未绑定</span>}
                             </div>
                           </TableCell>
                           <TableCell>
                             {user.hasFullBook ? (
-                              <Badge className="bg-amber-500/20 text-amber-400 hover:bg-amber-500/20 border-0">
-                                VIP
-                              </Badge>
+                              <Badge className="bg-amber-500/20 text-amber-400 hover:bg-amber-500/20 border-0">VIP</Badge>
                             ) : (
-                              <Badge variant="outline" className="text-gray-500 border-gray-600">
-                                未购买
-                              </Badge>
+                              <Badge variant="outline" className="text-gray-500 border-gray-600">未购买</Badge>
                             )}
                           </TableCell>
                           <TableCell>
                             <div className="space-y-1">
-                              <div className="text-white font-medium">
-                                ¥{parseFloat(String(user.earnings || 0)).toFixed(2)}
-                              </div>
+                              <div className="text-white font-medium">¥{parseFloat(String(user.earnings || 0)).toFixed(2)}</div>
                               {parseFloat(String(user.pendingEarnings || 0)) > 0 && (
-                                <div className="text-xs text-yellow-400">
-                                  待提现: ¥{parseFloat(String(user.pendingEarnings || 0)).toFixed(2)}
-                                </div>
+                                <div className="text-xs text-yellow-400">待提现: ¥{parseFloat(String(user.pendingEarnings || 0)).toFixed(2)}</div>
                               )}
-                              <div
-                                className="text-xs text-[#38bdac] cursor-pointer hover:underline flex items-center gap-1"
-                                onClick={() => handleViewReferrals(user)}
-                                onKeyDown={(e) => e.key === 'Enter' && handleViewReferrals(user)}
-                                role="button"
-                                tabIndex={0}
-                              >
-                                <Users className="w-3 h-3" />
-                                绑定{user.referralCount || 0}人
+                              <div className="text-xs text-[#38bdac] cursor-pointer hover:underline flex items-center gap-1" onClick={() => handleViewReferrals(user)} role="button" tabIndex={0} onKeyDown={(e) => e.key === 'Enter' && handleViewReferrals(user)}>
+                                <Users className="w-3 h-3" /> 绑定{user.referralCount || 0}人
                               </div>
                             </div>
                           </TableCell>
+                          {/* RFM 分值列 */}
+                          <TableCell>
+                            {user.rfmScore !== undefined ? (
+                              <div className="flex flex-col gap-1">
+                                <div className="flex items-center gap-1.5">
+                                  <span className="text-white font-bold text-base">{user.rfmScore}</span>
+                                  <Badge className={`border-0 text-xs ${getRFMLevelColor(user.rfmLevel)}`}>{user.rfmLevel}</Badge>
+                                </div>
+                              </div>
+                            ) : (
+                              <span className="text-gray-600 text-sm">— <span className="text-xs text-gray-700">点列头排序</span></span>
+                            )}
+                          </TableCell>
                           <TableCell className="text-gray-400">
                             {user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-'}
                           </TableCell>
                           <TableCell className="text-right">
                             <div className="flex items-center justify-end gap-1">
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => handleSetVip(user)}
-                                className="text-gray-400 hover:text-amber-400 hover:bg-amber-400/10"
-                                title="设置 VIP"
-                              >
-                                <Crown className="w-4 h-4" />
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => handleViewDetail(user)}
-                                className="text-gray-400 hover:text-blue-400 hover:bg-blue-400/10"
-                                title="查看详情 / 用户旅程"
-                              >
-                                <Eye className="w-4 h-4" />
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => handleEditUser(user)}
-                                className="text-gray-400 hover:text-[#38bdac] hover:bg-[#38bdac]/10"
-                                title="编辑"
-                              >
-                                <Edit3 className="w-4 h-4" />
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => handleChangePassword(user)}
-                                className="text-gray-400 hover:text-yellow-400 hover:bg-yellow-400/10"
-                                title="修改密码"
-                              >
-                                <Key className="w-4 h-4" />
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
-                                onClick={() => handleDelete(user.id)}
-                                title="删除"
-                              >
-                                <Trash2 className="w-4 h-4" />
-                              </Button>
+                              <Button variant="ghost" size="sm" onClick={() => { setSelectedUserForVip(user); setShowSetVipModal(true) }} className="text-gray-400 hover:text-amber-400 hover:bg-amber-400/10" title="设置 VIP"><Crown className="w-4 h-4" /></Button>
+                              <Button variant="ghost" size="sm" onClick={() => { setSelectedUserIdForDetail(user.id); setShowDetailModal(true) }} className="text-gray-400 hover:text-blue-400 hover:bg-blue-400/10" title="查看详情"><Eye className="w-4 h-4" /></Button>
+                              <Button variant="ghost" size="sm" onClick={() => handleEditUser(user)} className="text-gray-400 hover:text-[#38bdac] hover:bg-[#38bdac]/10" title="编辑"><Edit3 className="w-4 h-4" /></Button>
+                              <Button variant="ghost" size="sm" onClick={() => handleChangePassword(user)} className="text-gray-400 hover:text-yellow-400 hover:bg-yellow-400/10" title="修改密码"><Key className="w-4 h-4" /></Button>
+                              <Button variant="ghost" size="sm" className="text-red-400 hover:text-red-300 hover:bg-red-500/10" onClick={() => handleDelete(user.id)} title="删除"><Trash2 className="w-4 h-4" /></Button>
                             </div>
                           </TableCell>
                         </TableRow>
                       ))}
                       {users.length === 0 && (
                         <TableRow>
-                          <TableCell colSpan={6} className="text-center py-12 text-gray-500">
-                            暂无用户数据
-                          </TableCell>
+                          <TableCell colSpan={7} className="text-center py-12 text-gray-500">暂无用户数据</TableCell>
                         </TableRow>
                       )}
                     </TableBody>
                   </Table>
-                  <Pagination
-                    page={page}
-                    totalPages={totalPages}
-                    total={total}
-                    pageSize={pageSize}
-                    onPageChange={setPage}
-                    onPageSizeChange={(n) => { setPageSize(n); setPage(1) }}
-                  />
+                  <Pagination page={page} totalPages={totalPages} total={total} pageSize={pageSize} onPageChange={setPage} onPageSizeChange={(n) => { setPageSize(n); setPage(1) }} />
                 </div>
               )}
             </CardContent>
           </Card>
         </TabsContent>
 
-        {/* ===== RFM 排行榜 Tab ===== */}
-        <TabsContent value="rfm">
-          <div className="mb-4 flex items-center gap-4">
-            <div className="flex-1 max-w-sm relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
-              <Input
-                type="text"
-                placeholder="搜索用户..."
-                className="pl-10 bg-[#0f2137] border-gray-700 text-white placeholder:text-gray-500"
-                value={rfmSearch}
-                onChange={(e) => setRfmSearch(e.target.value)}
-              />
-            </div>
-            <Button
-              variant="outline"
-              onClick={loadRFM}
-              disabled={rfmLoading}
-              className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
-            >
-              <RefreshCw className={`w-4 h-4 mr-2 ${rfmLoading ? 'animate-spin' : ''}`} />
-              刷新
+        {/* ===== 用户旅程总览 ===== */}
+        <TabsContent value="journey">
+          <div className="flex items-center justify-between mb-5">
+            <p className="text-gray-400 text-sm">用户从注册到 VIP 的完整行动路径，点击各阶段查看用户动态</p>
+            <Button variant="outline" onClick={loadJourneyStats} disabled={journeyLoading} className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent">
+              <RefreshCw className={`w-4 h-4 mr-2 ${journeyLoading ? 'animate-spin' : ''}`} /> 刷新数据
             </Button>
-            <div className="ml-auto flex items-center gap-2 text-xs text-gray-500">
-              <Badge className="bg-amber-500/20 text-amber-400 border-0">S 超级VIP</Badge>
-              <Badge className="bg-green-500/20 text-green-400 border-0">A 高价值</Badge>
-              <Badge className="bg-blue-500/20 text-blue-400 border-0">B 潜力用户</Badge>
-              <Badge className="bg-gray-500/20 text-gray-400 border-0">C 普通</Badge>
-              <Badge className="bg-red-500/20 text-red-400 border-0">D 低活跃</Badge>
-            </div>
           </div>
 
-          {/* RFM 说明卡片 */}
-          <div className="grid grid-cols-3 gap-4 mb-6">
-            <div className="bg-[#0f2137] border border-gray-700/50 rounded-lg p-4">
-              <div className="flex items-center gap-2 mb-2">
-                <div className="w-6 h-6 rounded bg-red-500/20 flex items-center justify-center text-xs font-bold text-red-400">R</div>
-                <span className="text-white font-medium">最近购买（Recency）</span>
-              </div>
-              <p className="text-gray-500 text-xs">距离最近一次购买的天数，越近分值越高</p>
-            </div>
-            <div className="bg-[#0f2137] border border-gray-700/50 rounded-lg p-4">
-              <div className="flex items-center gap-2 mb-2">
-                <div className="w-6 h-6 rounded bg-blue-500/20 flex items-center justify-center text-xs font-bold text-blue-400">F</div>
-                <span className="text-white font-medium">购买频率（Frequency）</span>
-              </div>
-              <p className="text-gray-500 text-xs">累计购买次数，频次越高分值越高</p>
-            </div>
-            <div className="bg-[#0f2137] border border-gray-700/50 rounded-lg p-4">
-              <div className="flex items-center gap-2 mb-2">
-                <div className="w-6 h-6 rounded bg-green-500/20 flex items-center justify-center text-xs font-bold text-green-400">M</div>
-                <span className="text-white font-medium">消费金额（Monetary）</span>
-              </div>
-              <p className="text-gray-500 text-xs">累计消费总额，金额越高分值越高</p>
-            </div>
-          </div>
-
-          <Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
-            <CardContent className="p-0">
-              {rfmLoading ? (
-                <div className="flex items-center justify-center py-12">
-                  <RefreshCw className="w-6 h-6 text-[#38bdac] animate-spin" />
-                  <span className="ml-2 text-gray-400">计算 RFM 中...</span>
+          {/* 流程图 */}
+          <div className="relative mb-8">
+            {/* 连接线 */}
+            <div className="absolute top-16 left-0 right-0 h-0.5 bg-gradient-to-r from-blue-500/20 via-[#38bdac]/30 to-amber-500/20 mx-20" />
+            <div className="grid grid-cols-4 gap-4 lg:grid-cols-8">
+              {JOURNEY_STAGES.map((stage, idx) => (
+                <div key={stage.id} className="relative flex flex-col items-center">
+                  {/* 阶段卡片 */}
+                  <div className={`relative w-full p-3 rounded-xl border ${stage.color} text-center cursor-default`}>
+                    <div className="text-2xl mb-1">{stage.icon}</div>
+                    <div className={`text-xs font-medium ${stage.color.split(' ').find(c => c.startsWith('text-'))}`}>{stage.label}</div>
+                    {journeyStats[stage.id] !== undefined && (
+                      <div className="mt-1.5 text-xs text-gray-400">
+                        <span className="font-bold text-white">{journeyStats[stage.id]}</span> 人
+                      </div>
+                    )}
+                    {/* 序号 */}
+                    <div className="absolute -top-2.5 -left-2.5 w-5 h-5 rounded-full bg-[#0a1628] border border-gray-700 flex items-center justify-center text-[10px] text-gray-500">{idx + 1}</div>
+                  </div>
+                  {/* 箭头（非最后一个）*/}
+                  {idx < JOURNEY_STAGES.length - 1 && (
+                    <div className="hidden lg:block absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 z-10">
+                      <svg width="20" height="12" viewBox="0 0 20 12" fill="none">
+                        <path d="M0 6H16M16 6L11 1M16 6L11 11" stroke="#374151" strokeWidth="1.5" strokeLinecap="round" />
+                      </svg>
+                    </div>
+                  )}
+                  {/* 描述 */}
+                  <p className="text-[10px] text-gray-600 text-center mt-2 leading-tight">{stage.desc}</p>
                 </div>
-              ) : rfmList.length === 0 ? (
-                <div className="text-center py-16">
-                  <TrendingUp className="w-12 h-12 text-[#38bdac]/30 mx-auto mb-4" />
-                  <p className="text-gray-500">点击「刷新」加载 RFM 排行榜</p>
+              ))}
+            </div>
+          </div>
+
+          {/* 旅程说明 */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="bg-[#0f2137] border border-gray-700/50 rounded-lg p-4">
+              <div className="flex items-center gap-2 mb-3">
+                <Navigation className="w-4 h-4 text-[#38bdac]" />
+                <span className="text-white font-medium">旅程关键节点</span>
+              </div>
+              <div className="space-y-2 text-sm">
+                {[
+                  { step: '① 注册', action: '微信 OAuth 或手机号注册', next: '引导填写头像' },
+                  { step: '② 浏览', action: '点击章节/阅读免费内容', next: '触发绑定手机' },
+                  { step: '③ 首付', action: '购买单章或全书', next: '推送分销功能' },
+                  { step: '④ VIP', action: '¥1980 购买全书', next: '进入 VIP 私域群' },
+                  { step: '⑤ 分销', action: '推广好友购买', next: '提现分销收益' },
+                ].map((item) => (
+                  <div key={item.step} className="flex items-start gap-3 p-2 bg-[#0a1628] rounded">
+                    <span className="text-[#38bdac] font-mono text-xs shrink-0 mt-0.5">{item.step}</span>
+                    <div>
+                      <p className="text-gray-300">{item.action}</p>
+                      <p className="text-gray-600 text-xs">→ {item.next}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="bg-[#0f2137] border border-gray-700/50 rounded-lg p-4">
+              <div className="flex items-center gap-2 mb-3">
+                <BookOpen className="w-4 h-4 text-purple-400" />
+                <span className="text-white font-medium">行为锚点统计</span>
+                <span className="text-gray-500 text-xs ml-auto">实时更新</span>
+              </div>
+              {journeyLoading ? (
+                <div className="flex items-center justify-center py-8">
+                  <RefreshCw className="w-5 h-5 text-[#38bdac] animate-spin" />
+                </div>
+              ) : Object.keys(journeyStats).length > 0 ? (
+                <div className="space-y-2">
+                  {JOURNEY_STAGES.map((stage) => {
+                    const count = journeyStats[stage.id] || 0
+                    const maxCount = Math.max(...JOURNEY_STAGES.map(s => journeyStats[s.id] || 0), 1)
+                    const pct = Math.round((count / maxCount) * 100)
+                    return (
+                      <div key={stage.id} className="flex items-center gap-2">
+                        <span className="text-gray-500 text-xs w-20 shrink-0">{stage.icon} {stage.label}</span>
+                        <div className="flex-1 h-2 bg-[#0a1628] rounded-full overflow-hidden">
+                          <div className="h-full bg-[#38bdac]/60 rounded-full transition-all" style={{ width: `${pct}%` }} />
+                        </div>
+                        <span className="text-gray-400 text-xs w-10 text-right">{count}</span>
+                      </div>
+                    )
+                  })}
                 </div>
               ) : (
-                <Table>
-                  <TableHeader>
-                    <TableRow className="bg-[#0a1628] hover:bg-[#0a1628] border-gray-700">
-                      <TableHead className="text-gray-400 w-12">排名</TableHead>
-                      <TableHead className="text-gray-400">用户</TableHead>
-                      <TableHead className="text-gray-400">等级</TableHead>
-                      <TableHead className="text-gray-400 text-center">RFM总分</TableHead>
-                      <TableHead className="text-gray-400 text-center">R 最近购买</TableHead>
-                      <TableHead className="text-gray-400 text-center">F 购买频次</TableHead>
-                      <TableHead className="text-gray-400 text-center">M 消费金额</TableHead>
-                      <TableHead className="text-gray-400">最近订单</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {rfmList.map((u, i) => (
-                      <TableRow key={u.id} className="hover:bg-[#0a1628] border-gray-700/50">
-                        <TableCell>
-                          <span className={`text-sm font-bold ${i < 3 ? 'text-amber-400' : 'text-gray-500'}`}>
-                            #{i + 1}
-                          </span>
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex items-center gap-2">
-                            <div className="w-8 h-8 rounded-full bg-[#38bdac]/20 flex items-center justify-center text-xs text-[#38bdac]">
-                              {u.avatar ? (
-                                <img src={u.avatar} className="w-full h-full rounded-full object-cover" alt="" />
-                              ) : (
-                                u.nickname?.charAt(0) || '?'
-                              )}
-                            </div>
-                            <div>
-                              <p className="text-white text-sm">{u.nickname}</p>
-                              {u.phone && <p className="text-gray-500 text-xs">{u.phone}</p>}
-                            </div>
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          <Badge className={`border-0 ${getRFMLevelColor(u.rfmLevel)}`}>
-                            {u.rfmLevel} 级
-                          </Badge>
-                        </TableCell>
-                        <TableCell className="text-center">
-                          <span className="text-white font-bold text-lg">{u.rfmScore}</span>
-                        </TableCell>
-                        <TableCell className="text-center">
-                          <span className="text-red-400 font-medium">{u.recency}</span>
-                        </TableCell>
-                        <TableCell className="text-center">
-                          <span className="text-blue-400 font-medium">{u.frequency}</span>
-                        </TableCell>
-                        <TableCell className="text-center">
-                          <span className="text-green-400 font-medium">¥{u.monetary.toFixed(0)}</span>
-                        </TableCell>
-                        <TableCell className="text-gray-500 text-sm">
-                          {u.lastOrderAt ? new Date(u.lastOrderAt).toLocaleDateString() : '-'}
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
+                <div className="text-center py-8">
+                  <p className="text-gray-500 text-sm">点击「刷新数据」加载统计</p>
+                </div>
               )}
-            </CardContent>
-          </Card>
+            </div>
+          </div>
         </TabsContent>
 
-        {/* ===== 规则配置 Tab ===== */}
+        {/* ===== 规则配置 ===== */}
         <TabsContent value="rules">
           <div className="mb-4 flex items-center justify-between">
-            <div>
-              <p className="text-gray-400 text-sm">
-                配置用户旅程引导规则，包括填写头像、完善信息、付款节点等步骤触发规则，帮助用户了解完整路径。
-              </p>
-            </div>
+            <p className="text-gray-400 text-sm">用户旅程引导规则，定义各行为节点的触发条件与引导内容</p>
             <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                onClick={loadRules}
-                disabled={rulesLoading}
-                className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
-              >
-                <RefreshCw className={`w-4 h-4 mr-2 ${rulesLoading ? 'animate-spin' : ''}`} />
-                刷新
+              <Button variant="outline" onClick={loadRules} disabled={rulesLoading} className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent">
+                <RefreshCw className={`w-4 h-4 mr-2 ${rulesLoading ? 'animate-spin' : ''}`} /> 刷新
               </Button>
-              <Button onClick={handleAddRule} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
-                <Plus className="w-4 h-4 mr-2" />
-                添加规则
+              <Button onClick={() => { setEditingRule(null); setRuleForm({ title: '', description: '', trigger: '', sort: 0, enabled: true }); setShowRuleModal(true) }} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
+                <Plus className="w-4 h-4 mr-2" /> 添加规则
               </Button>
             </div>
           </div>
 
           {rulesLoading ? (
-            <div className="flex items-center justify-center py-12">
-              <RefreshCw className="w-6 h-6 text-[#38bdac] animate-spin" />
-              <span className="ml-2 text-gray-400">加载中...</span>
-            </div>
+            <div className="flex items-center justify-center py-12"><RefreshCw className="w-6 h-6 text-[#38bdac] animate-spin" /></div>
           ) : rules.length === 0 ? (
             <div className="text-center py-16 bg-[#0f2137] rounded-lg border border-gray-700/50">
               <BookOpen className="w-12 h-12 text-[#38bdac]/30 mx-auto mb-4" />
-              <p className="text-gray-400 mb-2">暂无规则配置</p>
-              <p className="text-gray-600 text-sm mb-4">添加用户旅程规则，帮助引导用户完善个人信息</p>
-              <Button onClick={handleAddRule} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
-                <Plus className="w-4 h-4 mr-2" />
-                添加第一条规则
-              </Button>
+              <p className="text-gray-400 mb-4">暂无规则（重启服务将自动写入10条默认规则）</p>
+              <Button onClick={loadRules} className="bg-[#38bdac] hover:bg-[#2da396] text-white"><RefreshCw className="w-4 h-4 mr-2" /> 重新加载</Button>
             </div>
           ) : (
-            <div className="space-y-3">
+            <div className="space-y-2">
               {rules.map((rule) => (
-                <div
-                  key={rule.id}
-                  className={`p-4 rounded-lg border transition-all ${
-                    rule.enabled
-                      ? 'bg-[#0f2137] border-gray-700/50'
-                      : 'bg-[#0a1628]/50 border-gray-700/30 opacity-60'
-                  }`}
-                >
+                <div key={rule.id} className={`p-4 rounded-lg border transition-all ${rule.enabled ? 'bg-[#0f2137] border-gray-700/50' : 'bg-[#0a1628]/50 border-gray-700/30 opacity-55'}`}>
                   <div className="flex items-start justify-between">
                     <div className="flex-1">
-                      <div className="flex items-center gap-2 mb-1">
-                        <PenLine className="w-4 h-4 text-[#38bdac]" />
+                      <div className="flex items-center gap-2 flex-wrap mb-1">
+                        <PenLine className="w-4 h-4 text-[#38bdac] shrink-0" />
                         <span className="text-white font-medium">{rule.title}</span>
-                        {rule.trigger && (
-                          <Badge className="bg-[#38bdac]/10 text-[#38bdac] border border-[#38bdac]/30 text-xs">
-                            触发：{rule.trigger}
-                          </Badge>
-                        )}
-                        <Badge className={`text-xs border-0 ${rule.enabled ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'}`}>
-                          {rule.enabled ? '启用中' : '已禁用'}
-                        </Badge>
+                        {rule.trigger && <Badge className="bg-[#38bdac]/10 text-[#38bdac] border border-[#38bdac]/30 text-xs">触发：{rule.trigger}</Badge>}
+                        <Badge className={`text-xs border-0 ${rule.enabled ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'}`}>{rule.enabled ? '启用' : '禁用'}</Badge>
                       </div>
-                      {rule.description && (
-                        <p className="text-gray-400 text-sm ml-6 whitespace-pre-wrap">{rule.description}</p>
-                      )}
+                      {rule.description && <p className="text-gray-400 text-sm ml-6">{rule.description}</p>}
                     </div>
                     <div className="flex items-center gap-2 ml-4 shrink-0">
-                      <Switch
-                        checked={rule.enabled}
-                        onCheckedChange={() => handleToggleRule(rule)}
-                      />
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => handleEditRule(rule)}
-                        className="text-gray-400 hover:text-[#38bdac] hover:bg-[#38bdac]/10"
-                      >
-                        <Edit3 className="w-4 h-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => handleDeleteRule(rule.id)}
-                        className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </Button>
+                      <Switch checked={rule.enabled} onCheckedChange={() => handleToggleRule(rule)} />
+                      <Button variant="ghost" size="sm" onClick={() => { setEditingRule(rule); setRuleForm({ title: rule.title, description: rule.description, trigger: rule.trigger, sort: rule.sort, enabled: rule.enabled }); setShowRuleModal(true) }} className="text-gray-400 hover:text-[#38bdac] hover:bg-[#38bdac]/10"><Edit3 className="w-4 h-4" /></Button>
+                      <Button variant="ghost" size="sm" onClick={() => handleDeleteRule(rule.id)} className="text-red-400 hover:text-red-300 hover:bg-red-500/10"><Trash2 className="w-4 h-4" /></Button>
                     </div>
                   </div>
                 </div>
@@ -899,286 +694,159 @@ export function UsersPage() {
             </div>
           )}
         </TabsContent>
+
+        {/* ===== VIP 角色 ===== */}
+        <TabsContent value="vip-roles">
+          <div className="mb-4 flex items-center justify-between">
+            <p className="text-gray-400 text-sm">管理用户 VIP 角色分类，这些角色将在用户详情和会员展示中使用</p>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" onClick={loadVipRoles} disabled={vipRolesLoading} className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent">
+                <RefreshCw className={`w-4 h-4 mr-2 ${vipRolesLoading ? 'animate-spin' : ''}`} /> 刷新
+              </Button>
+              <Button onClick={() => { setEditingVipRole(null); setVipRoleForm({ name: '', sort: 0 }); setShowVipRoleModal(true) }} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
+                <Plus className="w-4 h-4 mr-2" /> 添加角色
+              </Button>
+            </div>
+          </div>
+
+          {vipRolesLoading ? (
+            <div className="flex items-center justify-center py-12"><RefreshCw className="w-6 h-6 text-[#38bdac] animate-spin" /></div>
+          ) : vipRoles.length === 0 ? (
+            <div className="text-center py-16 bg-[#0f2137] rounded-lg border border-gray-700/50">
+              <Crown className="w-12 h-12 text-amber-400/30 mx-auto mb-4" />
+              <p className="text-gray-400 mb-4">暂无 VIP 角色</p>
+              <Button onClick={() => { setEditingVipRole(null); setVipRoleForm({ name: '', sort: 0 }); setShowVipRoleModal(true) }} className="bg-[#38bdac] hover:bg-[#2da396] text-white"><Plus className="w-4 h-4 mr-2" /> 添加第一个角色</Button>
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+              {vipRoles.map((role) => (
+                <div key={role.id} className="p-4 bg-[#0f2137] border border-amber-500/20 rounded-xl hover:border-amber-500/40 transition-all group">
+                  <div className="flex items-start justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <Crown className="w-4 h-4 text-amber-400" />
+                      <span className="text-white font-medium">{role.name}</span>
+                    </div>
+                    <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <button type="button" onClick={() => { setEditingVipRole(role); setVipRoleForm({ name: role.name, sort: role.sort }); setShowVipRoleModal(true) }} className="text-gray-500 hover:text-[#38bdac]"><Edit3 className="w-3.5 h-3.5" /></button>
+                      <button type="button" onClick={() => handleDeleteVipRole(role.id)} className="text-gray-500 hover:text-red-400"><Trash2 className="w-3.5 h-3.5" /></button>
+                    </div>
+                  </div>
+                  <p className="text-gray-600 text-xs">排序: {role.sort}</p>
+                </div>
+              ))}
+            </div>
+          )}
+        </TabsContent>
       </Tabs>
 
-      {/* ===== 添加/编辑用户弹框 ===== */}
+      {/* ===== 弹框组件 ===== */}
+
+      {/* 添加/编辑用户 */}
       <Dialog open={showUserModal} onOpenChange={setShowUserModal}>
         <DialogContent className="bg-[#0f2137] border-gray-700 text-white max-w-lg">
-          <DialogHeader>
-            <DialogTitle className="text-white flex items-center gap-2">
-              {editingUser ? <Edit3 className="w-5 h-5 text-[#38bdac]" /> : <UserPlus className="w-5 h-5 text-[#38bdac]" />}
-              {editingUser ? '编辑用户' : '添加用户'}
-            </DialogTitle>
-          </DialogHeader>
+          <DialogHeader><DialogTitle className="text-white flex items-center gap-2">{editingUser ? <Edit3 className="w-5 h-5 text-[#38bdac]" /> : <UserPlus className="w-5 h-5 text-[#38bdac]" />}{editingUser ? '编辑用户' : '添加用户'}</DialogTitle></DialogHeader>
           <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label className="text-gray-300">手机号</Label>
-              <Input
-                className="bg-[#0a1628] border-gray-700 text-white"
-                placeholder="请输入手机号"
-                value={formData.phone}
-                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
-                disabled={!!editingUser}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label className="text-gray-300">昵称</Label>
-              <Input
-                className="bg-[#0a1628] border-gray-700 text-white"
-                placeholder="请输入昵称"
-                value={formData.nickname}
-                onChange={(e) => setFormData({ ...formData, nickname: e.target.value })}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label className="text-gray-300">{editingUser ? '新密码 (留空则不修改)' : '密码'}</Label>
-              <Input
-                type="password"
-                className="bg-[#0a1628] border-gray-700 text-white"
-                placeholder={editingUser ? '留空则不修改' : '请输入密码'}
-                value={formData.password}
-                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-              />
-            </div>
-            <div className="flex items-center justify-between">
-              <Label className="text-gray-300">管理员权限</Label>
-              <Switch
-                checked={formData.isAdmin}
-                onCheckedChange={(checked) => setFormData({ ...formData, isAdmin: checked })}
-              />
-            </div>
-            <div className="flex items-center justify-between">
-              <Label className="text-gray-300">已购全书</Label>
-              <Switch
-                checked={formData.hasFullBook}
-                onCheckedChange={(checked) => setFormData({ ...formData, hasFullBook: checked })}
-              />
-            </div>
+            <div className="space-y-2"><Label className="text-gray-300">手机号</Label><Input className="bg-[#0a1628] border-gray-700 text-white" placeholder="请输入手机号" value={formData.phone} onChange={(e) => setFormData({ ...formData, phone: e.target.value })} disabled={!!editingUser} /></div>
+            <div className="space-y-2"><Label className="text-gray-300">昵称</Label><Input className="bg-[#0a1628] border-gray-700 text-white" placeholder="请输入昵称" value={formData.nickname} onChange={(e) => setFormData({ ...formData, nickname: e.target.value })} /></div>
+            <div className="space-y-2"><Label className="text-gray-300">{editingUser ? '新密码 (留空则不修改)' : '密码'}</Label><Input type="password" className="bg-[#0a1628] border-gray-700 text-white" placeholder={editingUser ? '留空则不修改' : '请输入密码'} value={formData.password} onChange={(e) => setFormData({ ...formData, password: e.target.value })} /></div>
+            <div className="flex items-center justify-between"><Label className="text-gray-300">管理员权限</Label><Switch checked={formData.isAdmin} onCheckedChange={(c) => setFormData({ ...formData, isAdmin: c })} /></div>
+            <div className="flex items-center justify-between"><Label className="text-gray-300">已购全书</Label><Switch checked={formData.hasFullBook} onCheckedChange={(c) => setFormData({ ...formData, hasFullBook: c })} /></div>
           </div>
           <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setShowUserModal(false)}
-              className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
-            >
-              <X className="w-4 h-4 mr-2" />
-              取消
-            </Button>
-            <Button onClick={handleSaveUser} disabled={isSaving} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
-              <Save className="w-4 h-4 mr-2" />
-              {isSaving ? '保存中...' : '保存'}
-            </Button>
+            <Button variant="outline" onClick={() => setShowUserModal(false)} className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"><X className="w-4 h-4 mr-2" />取消</Button>
+            <Button onClick={handleSaveUser} disabled={isSaving} className="bg-[#38bdac] hover:bg-[#2da396] text-white"><Save className="w-4 h-4 mr-2" />{isSaving ? '保存中...' : '保存'}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* ===== 修改密码弹框 ===== */}
+      {/* 修改密码 */}
       <Dialog open={showPasswordModal} onOpenChange={setShowPasswordModal}>
         <DialogContent className="bg-[#0f2137] border-gray-700 text-white max-w-md">
-          <DialogHeader>
-            <DialogTitle className="text-white flex items-center gap-2">
-              <Key className="w-5 h-5 text-[#38bdac]" />
-              修改密码
-            </DialogTitle>
-          </DialogHeader>
+          <DialogHeader><DialogTitle className="text-white flex items-center gap-2"><Key className="w-5 h-5 text-[#38bdac]" />修改密码</DialogTitle></DialogHeader>
           <div className="space-y-4 py-4">
-            <div className="bg-[#0a1628] rounded-lg p-3">
-              <p className="text-gray-400 text-sm">用户：{editingUser?.nickname}</p>
-              <p className="text-gray-400 text-sm">手机号：{editingUser?.phone}</p>
-            </div>
-            <div className="space-y-2">
-              <Label className="text-gray-300">新密码</Label>
-              <Input
-                type="password"
-                className="bg-[#0a1628] border-gray-700 text-white"
-                placeholder="请输入新密码 (至少6位)"
-                value={newPassword}
-                onChange={(e) => setNewPassword(e.target.value)}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label className="text-gray-300">确认密码</Label>
-              <Input
-                type="password"
-                className="bg-[#0a1628] border-gray-700 text-white"
-                placeholder="请再次输入新密码"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-              />
-            </div>
+            <div className="bg-[#0a1628] rounded-lg p-3"><p className="text-gray-400 text-sm">用户：{editingUser?.nickname}</p><p className="text-gray-400 text-sm">手机号：{editingUser?.phone}</p></div>
+            <div className="space-y-2"><Label className="text-gray-300">新密码</Label><Input type="password" className="bg-[#0a1628] border-gray-700 text-white" placeholder="请输入新密码 (至少6位)" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} /></div>
+            <div className="space-y-2"><Label className="text-gray-300">确认密码</Label><Input type="password" className="bg-[#0a1628] border-gray-700 text-white" placeholder="请再次输入" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} /></div>
           </div>
           <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setShowPasswordModal(false)}
-              className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
-            >
-              取消
-            </Button>
-            <Button onClick={handleSavePassword} disabled={isSaving} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
-              {isSaving ? '保存中...' : '确认修改'}
-            </Button>
+            <Button variant="outline" onClick={() => setShowPasswordModal(false)} className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent">取消</Button>
+            <Button onClick={handleSavePassword} disabled={isSaving} className="bg-[#38bdac] hover:bg-[#2da396] text-white">{isSaving ? '保存中...' : '确认修改'}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* ===== 添加/编辑规则弹框 ===== */}
+      {/* 添加/编辑规则 */}
       <Dialog open={showRuleModal} onOpenChange={setShowRuleModal}>
         <DialogContent className="bg-[#0f2137] border-gray-700 text-white max-w-lg">
-          <DialogHeader>
-            <DialogTitle className="text-white flex items-center gap-2">
-              <PenLine className="w-5 h-5 text-[#38bdac]" />
-              {editingRule ? '编辑规则' : '添加规则'}
-            </DialogTitle>
-          </DialogHeader>
+          <DialogHeader><DialogTitle className="text-white flex items-center gap-2"><PenLine className="w-5 h-5 text-[#38bdac]" />{editingRule ? '编辑规则' : '添加规则'}</DialogTitle></DialogHeader>
           <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label className="text-gray-300">规则标题 *</Label>
-              <Input
-                className="bg-[#0a1628] border-gray-700 text-white"
-                placeholder="例：匹配后填写头像、付款1980元需填写信息"
-                value={ruleForm.title}
-                onChange={(e) => setRuleForm({ ...ruleForm, title: e.target.value })}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label className="text-gray-300">规则描述</Label>
-              <Textarea
-                className="bg-[#0a1628] border-gray-700 text-white min-h-[100px] resize-none"
-                placeholder="详细说明这个规则的内容，帮助运营人员了解用户旅程节点..."
-                value={ruleForm.description}
-                onChange={(e) => setRuleForm({ ...ruleForm, description: e.target.value })}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label className="text-gray-300">触发条件</Label>
-              <Input
-                className="bg-[#0a1628] border-gray-700 text-white"
-                placeholder="例：完成匹配、付款后、注册时"
-                value={ruleForm.trigger}
-                onChange={(e) => setRuleForm({ ...ruleForm, trigger: e.target.value })}
-              />
-            </div>
-            <div className="flex items-center justify-between">
-              <div>
-                <Label className="text-gray-300">启用状态</Label>
-                <p className="text-gray-500 text-xs mt-0.5">关闭后规则不再生效</p>
-              </div>
-              <Switch
-                checked={ruleForm.enabled}
-                onCheckedChange={(checked) => setRuleForm({ ...ruleForm, enabled: checked })}
-              />
-            </div>
+            <div className="space-y-2"><Label className="text-gray-300">规则标题 *</Label><Input className="bg-[#0a1628] border-gray-700 text-white" placeholder="例：匹配后填写头像、付款1980需填写信息" value={ruleForm.title} onChange={(e) => setRuleForm({ ...ruleForm, title: e.target.value })} /></div>
+            <div className="space-y-2"><Label className="text-gray-300">规则描述</Label><Textarea className="bg-[#0a1628] border-gray-700 text-white min-h-[80px] resize-none" placeholder="详细说明规则内容..." value={ruleForm.description} onChange={(e) => setRuleForm({ ...ruleForm, description: e.target.value })} /></div>
+            <div className="space-y-2"><Label className="text-gray-300">触发条件</Label><Input className="bg-[#0a1628] border-gray-700 text-white" placeholder="例：完成匹配、付款后、注册时" value={ruleForm.trigger} onChange={(e) => setRuleForm({ ...ruleForm, trigger: e.target.value })} /></div>
+            <div className="flex items-center justify-between"><div><Label className="text-gray-300">启用状态</Label></div><Switch checked={ruleForm.enabled} onCheckedChange={(c) => setRuleForm({ ...ruleForm, enabled: c })} /></div>
           </div>
           <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setShowRuleModal(false)}
-              className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
-            >
-              <X className="w-4 h-4 mr-2" />
-              取消
-            </Button>
-            <Button onClick={handleSaveRule} disabled={isSaving} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
-              <Save className="w-4 h-4 mr-2" />
-              {isSaving ? '保存中...' : '保存'}
-            </Button>
+            <Button variant="outline" onClick={() => setShowRuleModal(false)} className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"><X className="w-4 h-4 mr-2" />取消</Button>
+            <Button onClick={handleSaveRule} disabled={isSaving} className="bg-[#38bdac] hover:bg-[#2da396] text-white"><Save className="w-4 h-4 mr-2" />{isSaving ? '保存中...' : '保存'}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* ===== 绑定关系弹框 ===== */}
+      {/* 添加/编辑 VIP 角色 */}
+      <Dialog open={showVipRoleModal} onOpenChange={setShowVipRoleModal}>
+        <DialogContent className="bg-[#0f2137] border-gray-700 text-white max-w-md">
+          <DialogHeader><DialogTitle className="text-white flex items-center gap-2"><Crown className="w-5 h-5 text-amber-400" />{editingVipRole ? '编辑 VIP 角色' : '添加 VIP 角色'}</DialogTitle></DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2"><Label className="text-gray-300">角色名称 *</Label><Input className="bg-[#0a1628] border-gray-700 text-white" placeholder="例：创业者、资源整合者、技术咖" value={vipRoleForm.name} onChange={(e) => setVipRoleForm({ ...vipRoleForm, name: e.target.value })} /></div>
+            <div className="space-y-2"><Label className="text-gray-300">排序（越小越前）</Label><Input type="number" className="bg-[#0a1628] border-gray-700 text-white" value={vipRoleForm.sort} onChange={(e) => setVipRoleForm({ ...vipRoleForm, sort: parseInt(e.target.value) || 0 })} /></div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowVipRoleModal(false)} className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"><X className="w-4 h-4 mr-2" />取消</Button>
+            <Button onClick={handleSaveVipRole} disabled={isSaving} className="bg-[#38bdac] hover:bg-[#2da396] text-white"><Save className="w-4 h-4 mr-2" />{isSaving ? '保存中...' : '保存'}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 绑定关系 */}
       <Dialog open={showReferralsModal} onOpenChange={setShowReferralsModal}>
         <DialogContent className="bg-[#0f2137] border-gray-700 text-white max-w-2xl max-h-[80vh] overflow-auto">
-          <DialogHeader>
-            <DialogTitle className="text-white flex items-center gap-2">
-              <Users className="w-5 h-5 text-[#38bdac]" />
-              绑定关系详情 - {selectedUserForReferrals?.nickname}
-            </DialogTitle>
-          </DialogHeader>
+          <DialogHeader><DialogTitle className="text-white flex items-center gap-2"><Users className="w-5 h-5 text-[#38bdac]" />绑定关系 - {selectedUserForReferrals?.nickname}</DialogTitle></DialogHeader>
           <div className="space-y-4 py-4">
             <div className="grid grid-cols-4 gap-3">
-              <div className="bg-[#0a1628] rounded-lg p-3 text-center">
-                <div className="text-2xl font-bold text-[#38bdac]">{(referralsData.stats?.total as number) || 0}</div>
-                <div className="text-xs text-gray-400">绑定总数</div>
-              </div>
-              <div className="bg-[#0a1628] rounded-lg p-3 text-center">
-                <div className="text-2xl font-bold text-green-400">{(referralsData.stats?.purchased as number) || 0}</div>
-                <div className="text-xs text-gray-400">已付费</div>
-              </div>
-              <div className="bg-[#0a1628] rounded-lg p-3 text-center">
-                <div className="text-2xl font-bold text-yellow-400">
-                  ¥{((referralsData.stats?.earnings as number) || 0).toFixed(2)}
-                </div>
-                <div className="text-xs text-gray-400">累计收益</div>
-              </div>
-              <div className="bg-[#0a1628] rounded-lg p-3 text-center">
-                <div className="text-2xl font-bold text-orange-400">
-                  ¥{((referralsData.stats?.pendingEarnings as number) || 0).toFixed(2)}
-                </div>
-                <div className="text-xs text-gray-400">待提现</div>
-              </div>
+              <div className="bg-[#0a1628] rounded-lg p-3 text-center"><div className="text-2xl font-bold text-[#38bdac]">{(referralsData.stats?.total as number) || 0}</div><div className="text-xs text-gray-400">绑定总数</div></div>
+              <div className="bg-[#0a1628] rounded-lg p-3 text-center"><div className="text-2xl font-bold text-green-400">{(referralsData.stats?.purchased as number) || 0}</div><div className="text-xs text-gray-400">已付费</div></div>
+              <div className="bg-[#0a1628] rounded-lg p-3 text-center"><div className="text-2xl font-bold text-yellow-400">¥{((referralsData.stats?.earnings as number) || 0).toFixed(2)}</div><div className="text-xs text-gray-400">累计收益</div></div>
+              <div className="bg-[#0a1628] rounded-lg p-3 text-center"><div className="text-2xl font-bold text-orange-400">¥{((referralsData.stats?.pendingEarnings as number) || 0).toFixed(2)}</div><div className="text-xs text-gray-400">待提现</div></div>
             </div>
-            {referralsLoading ? (
-              <div className="flex items-center justify-center py-8">
-                <RefreshCw className="w-5 h-5 text-[#38bdac] animate-spin" />
-                <span className="ml-2 text-gray-400">加载中...</span>
-              </div>
-            ) : (referralsData.referrals?.length ?? 0) > 0 ? (
-              <div className="space-y-2 max-h-[300px] overflow-y-auto">
-                {(referralsData.referrals ?? []).map((ref: unknown, i: number) => {
-                  const r = ref as { id?: string; nickname?: string; phone?: string; hasOpenId?: boolean; status?: string; purchasedSections?: number; createdAt?: string }
-                  return (
-                    <div key={r.id || i} className="flex items-center justify-between bg-[#0a1628] rounded-lg p-3">
-                      <div className="flex items-center gap-3">
-                        <div className="w-8 h-8 rounded-full bg-[#38bdac]/20 flex items-center justify-center text-sm text-[#38bdac]">
-                          {r.nickname?.charAt(0) || '?'}
+            {referralsLoading ? <div className="flex items-center justify-center py-8"><RefreshCw className="w-5 h-5 text-[#38bdac] animate-spin" /><span className="ml-2 text-gray-400">加载中...</span></div>
+              : (referralsData.referrals?.length ?? 0) > 0 ? (
+                <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                  {(referralsData.referrals ?? []).map((ref: unknown, i: number) => {
+                    const r = ref as { id?: string; nickname?: string; phone?: string; hasOpenId?: boolean; status?: string; purchasedSections?: number; createdAt?: string }
+                    return (
+                      <div key={r.id || i} className="flex items-center justify-between bg-[#0a1628] rounded-lg p-3">
+                        <div className="flex items-center gap-3">
+                          <div className="w-8 h-8 rounded-full bg-[#38bdac]/20 flex items-center justify-center text-sm text-[#38bdac]">{r.nickname?.charAt(0) || '?'}</div>
+                          <div><div className="text-white text-sm">{r.nickname}</div><div className="text-xs text-gray-500">{r.phone || (r.hasOpenId ? '微信用户' : '未绑定')}</div></div>
                         </div>
-                        <div>
-                          <div className="text-white text-sm">{r.nickname}</div>
-                          <div className="text-xs text-gray-500">{r.phone || (r.hasOpenId ? '微信用户' : '未绑定')}</div>
+                        <div className="flex items-center gap-2">
+                          {r.status === 'vip' && <Badge className="bg-green-500/20 text-green-400 border-0 text-xs">全书已购</Badge>}
+                          {r.status === 'paid' && <Badge className="bg-blue-500/20 text-blue-400 border-0 text-xs">已付费{r.purchasedSections}章</Badge>}
+                          {r.status === 'free' && <Badge className="bg-gray-500/20 text-gray-400 border-0 text-xs">未付费</Badge>}
+                          <span className="text-xs text-gray-500">{r.createdAt ? new Date(r.createdAt).toLocaleDateString() : ''}</span>
                         </div>
                       </div>
-                      <div className="flex items-center gap-2">
-                        {r.status === 'vip' && <Badge className="bg-green-500/20 text-green-400 border-0 text-xs">全书已购</Badge>}
-                        {r.status === 'paid' && <Badge className="bg-blue-500/20 text-blue-400 border-0 text-xs">已付费{r.purchasedSections}章</Badge>}
-                        {r.status === 'free' && <Badge className="bg-gray-500/20 text-gray-400 border-0 text-xs">未付费</Badge>}
-                        <span className="text-xs text-gray-500">{r.createdAt ? new Date(r.createdAt).toLocaleDateString() : ''}</span>
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-            ) : (
-              <div className="text-center py-8 text-gray-500">暂无绑定用户</div>
-            )}
+                    )
+                  })}
+                </div>
+              ) : <div className="text-center py-8 text-gray-500">暂无绑定用户</div>}
           </div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setShowReferralsModal(false)}
-              className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
-            >
-              关闭
-            </Button>
-          </DialogFooter>
+          <DialogFooter><Button variant="outline" onClick={() => setShowReferralsModal(false)} className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent">关闭</Button></DialogFooter>
         </DialogContent>
       </Dialog>
 
-      <UserDetailModal
-        open={showDetailModal}
-        onClose={() => setShowDetailModal(false)}
-        userId={selectedUserIdForDetail}
-        onUserUpdated={loadUsers}
-      />
-
-      <SetVipModal
-        open={showSetVipModal}
-        onClose={() => { setShowSetVipModal(false); setSelectedUserForVip(null) }}
-        userId={selectedUserForVip?.id ?? null}
-        userNickname={selectedUserForVip?.nickname}
-        onSaved={loadUsers}
-      />
+      <UserDetailModal open={showDetailModal} onClose={() => setShowDetailModal(false)} userId={selectedUserIdForDetail} onUserUpdated={loadUsers} />
+      <SetVipModal open={showSetVipModal} onClose={() => { setShowSetVipModal(false); setSelectedUserForVip(null) }} userId={selectedUserForVip?.id ?? null} userNickname={selectedUserForVip?.nickname} onSaved={loadUsers} />
     </div>
   )
 }