添加了子用户列表功能

frontend/src/pages/ApiIntegration.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Key, Plus, Trash2, Copy, RefreshCw, Code, X } from 'lucide-react'
 import api, { APIResponse } from '../services/api'
+import { copyToClipboard } from '../utils/clipboard'
 
 interface ApiKeyItem {
   id: string
@@ -62,21 +63,12 @@ export default function ApiIntegration() {
     } catch { /* ignore */ }
   }
 
-  const copyKey = () => {
-    try {
-      navigator.clipboard.writeText(newKey)
-    } catch {
-      const ta = document.createElement('textarea')
-      ta.value = newKey
-      ta.style.position = 'fixed'
-      ta.style.left = '-9999px'
-      document.body.appendChild(ta)
-      ta.select()
-      document.execCommand('copy')
-      document.body.removeChild(ta)
+  const copyKey = async () => {
+    const copied = await copyToClipboard(newKey)
+    if (copied) {
+      setCopiedKey(true)
+      setTimeout(() => setCopiedKey(false), 2000)
     }
-    setCopiedKey(true)
-    setTimeout(() => setCopiedKey(false), 2000)
   }
 
   return (

frontend/src/pages/ContainerDetail.tsx

@@ -66,6 +66,7 @@ import { useDialog } from '../components/Dialog'
 import { useAuth } from '../contexts/AuthContext'
 import WebSSHViewer from '../components/WebSSHViewer'
 import { RingStat } from '../components/RingStats'
+import { copyToClipboard } from '../utils/clipboard'
 import ResourceStatsPanel, {
   ChartPoint,
   ResourceChartConfig,
@@ -619,19 +620,7 @@ export default function ContainerDetail() {
   }
 
   const copyText = async (text: string) => {
-    try {
-      await copyText(text)
-    } catch {
-      // Fallback for HTTP (non-secure context)
-      const ta = document.createElement('textarea')
-      ta.value = text
-      ta.style.position = 'fixed'
-      ta.style.left = '-9999px'
-      document.body.appendChild(ta)
-      ta.select()
-      document.execCommand('copy')
-      document.body.removeChild(ta)
-    }
+    await copyToClipboard(text)
   }
 
   if (loading) {
@@ -676,7 +665,6 @@ export default function ContainerDetail() {
   const managementUrl = subUser?.access_code
     ? `${window.location.origin}/login?code=${encodeURIComponent(subUser.access_code)}`
     : ''
-  const managementPassword = subUser?.password || ''
   const charts: ResourceChartConfig[] = [
     {
       title: 'CPU 使用率',
@@ -1263,55 +1251,21 @@ export default function ContainerDetail() {
         </Modal>
       )}
 
-      {showSubUser && subUser && false && (
-        <Modal title="管理链接" onClose={() => setShowSubUser(false)}>
-          <div className="space-y-4">
-            <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 text-xs text-amber-800">
-              安全提示：请通过私密渠道（如加密通讯工具）分享以下信息，不要在不安全的网络环境下明文传输。
-            </div>
-            <div className="bg-gray-50 rounded-lg p-4 text-sm space-y-3">
-              <div className="flex items-start justify-between gap-3">
-                <span className="shrink-0 text-gray-500">管理地址</span>
-                <div className="flex min-w-0 items-center gap-1">
-                  <span className="font-mono text-xs text-black break-all">{managementUrl}</span>
-                  <button onClick={() => copyText(managementUrl)} className="shrink-0 p-0.5 text-gray-400 hover:text-black rounded"><Copy className="w-3 h-3" /></button>
-                </div>
-              </div>
-              <div className="flex items-start justify-between gap-3">
-                <span className="shrink-0 text-gray-500">用户名</span>
-                <div className="flex min-w-0 items-center gap-1">
-                  <span className="font-mono text-xs text-black">{subUser?.username}</span>
-                  <button onClick={() => copyText(subUser?.username || '')} className="shrink-0 p-0.5 text-gray-400 hover:text-black rounded"><Copy className="w-3 h-3" /></button>
-                </div>
-              </div>
-              <div className="flex items-start justify-between gap-3">
-                <span className="shrink-0 text-gray-500">密码</span>
-                <div className="flex min-w-0 items-center gap-1">
-                  <span className="font-mono text-xs text-black">{managementPassword}</span>
-                  <button onClick={() => copyText(managementPassword)} className="shrink-0 p-0.5 text-gray-400 hover:text-black rounded"><Copy className="w-3 h-3" /></button>
-                </div>
-              </div>
-            </div>
-            <p className="text-xs text-gray-400">打开管理地址，输入用户名和密码即可管理该容器。链接不含 token，无法被截获后直接使用。</p>
-          </div>
-        </Modal>
-      )}
-
       {showSubUser && subUser && (
         <Modal title="管理链接" onClose={() => setShowSubUser(false)}>
-          <div className="bg-gray-50 rounded-lg p-4 text-sm space-y-3">
+          <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-sm space-y-3">
             <div className="flex items-start justify-between gap-3">
-              <span className="shrink-0 text-gray-500">地址</span>
+              <span className="shrink-0 text-gray-500 dark:text-gray-400">地址</span>
               <div className="flex min-w-0 items-center gap-1">
-                <span className="font-mono text-xs text-black break-all">{managementUrl}</span>
-                <button onClick={() => copyText(managementUrl)} className="shrink-0 p-0.5 text-gray-400 hover:text-black rounded"><Copy className="w-3 h-3" /></button>
+                <span className="font-mono text-xs text-black dark:text-white break-all">{managementUrl}</span>
+                <button onClick={() => copyText(managementUrl)} className="shrink-0 p-0.5 text-gray-400 hover:text-black dark:hover:text-white rounded"><Copy className="w-3 h-3" /></button>
               </div>
             </div>
             <div className="flex items-start justify-between gap-3">
-              <span className="shrink-0 text-gray-500">密码</span>
+              <span className="shrink-0 text-gray-500 dark:text-gray-400">密码</span>
               <div className="flex min-w-0 items-center gap-1">
-                <span className="font-mono text-xs text-black">{managementPassword}</span>
-                <button onClick={() => copyText(managementPassword)} className="shrink-0 p-0.5 text-gray-400 hover:text-black rounded"><Copy className="w-3 h-3" /></button>
+                <span className="font-mono text-xs text-black dark:text-white">{subUser.password || ''}</span>
+                <button onClick={() => copyText(subUser.password || '')} className="shrink-0 p-0.5 text-gray-400 hover:text-black dark:hover:text-white rounded"><Copy className="w-3 h-3" /></button>
               </div>
             </div>
           </div>

frontend/src/pages/Containers.tsx

@@ -401,7 +401,7 @@ export default function Containers() {
         </div>
       )}
 
-      <CreateContainerModal isOpen={showCreate} onClose={() => setShowCreate(false)} onSuccess={handleCreateQueued} />
+      <CreateContainerModal isOpen={showCreate} onClose={() => setShowCreate(false)} onSuccess={handleCreateQueued} existingNames={containers.map(c => c.name)} />
       {showTasks && (
         <TaskQueueModal
           tasks={tasks}

frontend/src/pages/Routing.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Network, RefreshCw, Route, Server } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Network, RefreshCw, Route, Search, Server, X } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
-import { getRoutingInfo, RoutingInfo } from '../services/api'
+import { getRoutingInfo, RoutingInfo, NAT4Route, IPv6Route } from '../services/api'
 
 export default function Routing() {
   const navigate = useNavigate()
@@ -10,6 +10,8 @@ export default function Routing() {
   const [refreshing, setRefreshing] = useState(false)
   const [nat4Page, setNat4Page] = useState(1)
   const [ipv6Page, setIPv6Page] = useState(1)
+  const [nat4Search, setNat4Search] = useState('')
+  const [ipv6Search, setIPv6Search] = useState('')
 
   const fetchData = useCallback(async () => {
     try {
@@ -25,6 +27,39 @@ export default function Routing() {
 
   useEffect(() => { fetchData() }, [fetchData])
 
+  const nat4Mappings = routing?.nat4_mappings || []
+  const ipv6Assignments = routing?.ipv6_assignments || []
+  const ipv6Prefix = routing?.ipv6_prefixes?.[0]?.prefix || '-'
+
+  // Filter helpers
+  const matchesNat4Search = (m: NAT4Route, query: string) => {
+    if (!query) return true
+    const q = query.toLowerCase()
+    return (
+      String(m.host_port).includes(q) ||
+      String(m.container_port).includes(q) ||
+      m.container_name.toLowerCase().includes(q) ||
+      m.lxc_name.toLowerCase().includes(q) ||
+      (m.ip || '').toLowerCase().includes(q)
+    )
+  }
+  const matchesIPv6Search = (item: IPv6Route, query: string) => {
+    if (!query) return true
+    const q = query.toLowerCase()
+    return (
+      (item.address || '').toLowerCase().includes(q) ||
+      item.container_name.toLowerCase().includes(q) ||
+      item.lxc_name.toLowerCase().includes(q)
+    )
+  }
+
+  const filteredNat4 = useMemo(() => nat4Mappings.filter(m => matchesNat4Search(m, nat4Search)), [nat4Mappings, nat4Search])
+  const filteredIPv6 = useMemo(() => ipv6Assignments.filter(m => matchesIPv6Search(m, ipv6Search)), [ipv6Assignments, ipv6Search])
+
+  // Reset page on search change
+  useEffect(() => { setNat4Page(1) }, [nat4Search])
+  useEffect(() => { setIPv6Page(1) }, [ipv6Search])
+
   if (loading) {
     return (
       <div className="flex items-center justify-center py-20">
@@ -33,16 +68,13 @@ export default function Routing() {
     )
   }
 
-  const nat4Mappings = routing?.nat4_mappings || []
-  const ipv6Assignments = routing?.ipv6_assignments || []
-  const ipv6Prefix = routing?.ipv6_prefixes?.[0]?.prefix || '-'
   const pageSize = 10
-  const nat4TotalPages = Math.max(1, Math.ceil(nat4Mappings.length / pageSize))
-  const ipv6TotalPages = Math.max(1, Math.ceil(ipv6Assignments.length / pageSize))
+  const nat4TotalPages = Math.max(1, Math.ceil(filteredNat4.length / pageSize))
+  const ipv6TotalPages = Math.max(1, Math.ceil(filteredIPv6.length / pageSize))
   const currentNat4Page = Math.min(nat4Page, nat4TotalPages)
   const currentIPv6Page = Math.min(ipv6Page, ipv6TotalPages)
-  const pagedNat4Mappings = nat4Mappings.slice((currentNat4Page - 1) * pageSize, currentNat4Page * pageSize)
-  const pagedIPv6Assignments = ipv6Assignments.slice((currentIPv6Page - 1) * pageSize, currentIPv6Page * pageSize)
+  const pagedNat4Mappings = filteredNat4.slice((currentNat4Page - 1) * pageSize, currentNat4Page * pageSize)
+  const pagedIPv6Assignments = filteredIPv6.slice((currentIPv6Page - 1) * pageSize, currentIPv6Page * pageSize)
 
   return (
     <div className="space-y-5">
@@ -80,10 +112,29 @@ export default function Routing() {
         />
       </div>
 
-      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white">
-        <div className="border-b border-gray-200 px-4 py-3">
-          <div className="text-sm font-medium text-black">NAT4 端口分配</div>
-          <div className="mt-1 text-xs text-gray-500">共 {nat4Mappings.length} 条映射</div>
+      <div className="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
+        <div className="border-b border-gray-200 dark:border-gray-700 px-4 py-3 flex items-center justify-between gap-3">
+          <div>
+            <div className="text-sm font-medium text-black dark:text-white">NAT4 端口分配</div>
+            <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              {nat4Search ? `搜索 "${nat4Search}" 结果 ${filteredNat4.length} 条，` : ''}共 {nat4Mappings.length} 条映射
+            </div>
+          </div>
+          <div className="relative w-48">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400" />
+            <input
+              type="text"
+              value={nat4Search}
+              onChange={e => setNat4Search(e.target.value)}
+              placeholder="搜索端口/容器..."
+              className="w-full pl-8 pr-7 py-1.5 text-xs border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-black dark:text-white focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white"
+            />
+            {nat4Search && (
+              <button onClick={() => setNat4Search('')} className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                <X className="w-3 h-3" />
+              </button>
+            )}
+          </div>
         </div>
         {nat4Mappings.length === 0 ? (
           <EmptyState icon={<Route className="h-7 w-7 text-gray-400" />} text="暂无 NAT4 端口映射" />
@@ -130,7 +181,7 @@ export default function Routing() {
           <Pagination
             page={currentNat4Page}
             totalPages={nat4TotalPages}
-            totalItems={nat4Mappings.length}
+            totalItems={filteredNat4.length}
             pageSize={pageSize}
             onPageChange={setNat4Page}
           />
@@ -138,10 +189,29 @@ export default function Routing() {
         )}
       </div>
 
-      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white">
-        <div className="border-b border-gray-200 px-4 py-3">
-          <div className="text-sm font-medium text-black">IPv6 地址分配</div>
-          <div className="mt-1 text-xs text-gray-500">共 {ipv6Assignments.length} 个地址</div>
+      <div className="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
+        <div className="border-b border-gray-200 dark:border-gray-700 px-4 py-3 flex items-center justify-between gap-3">
+          <div>
+            <div className="text-sm font-medium text-black dark:text-white">IPv6 地址分配</div>
+            <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              {ipv6Search ? `搜索 "${ipv6Search}" 结果 ${filteredIPv6.length} 条，` : ''}共 {ipv6Assignments.length} 个地址
+            </div>
+          </div>
+          <div className="relative w-48">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400" />
+            <input
+              type="text"
+              value={ipv6Search}
+              onChange={e => setIPv6Search(e.target.value)}
+              placeholder="搜索地址/容器..."
+              className="w-full pl-8 pr-7 py-1.5 text-xs border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-black dark:text-white focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white"
+            />
+            {ipv6Search && (
+              <button onClick={() => setIPv6Search('')} className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                <X className="w-3 h-3" />
+              </button>
+            )}
+          </div>
         </div>
         {ipv6Assignments.length === 0 ? (
           <EmptyState icon={<Network className="h-7 w-7 text-gray-400" />} text="暂无 IPv6 地址分配" />
@@ -184,7 +254,7 @@ export default function Routing() {
           <Pagination
             page={currentIPv6Page}
             totalPages={ipv6TotalPages}
-            totalItems={ipv6Assignments.length}
+            totalItems={filteredIPv6.length}
             pageSize={pageSize}
             onPageChange={setIPv6Page}
           />

frontend/src/pages/Snapshots.tsx

@@ -1,13 +1,16 @@
 import { useCallback, useEffect, useState } from 'react'
-import { Camera, RefreshCw, Server } from 'lucide-react'
+import { Camera, RefreshCw, Server, Trash2 } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
-import { getSnapshots, Snapshot } from '../services/api'
+import { deleteContainerSnapshot, getSnapshots, Snapshot } from '../services/api'
+import { useDialog } from '../components/Dialog'
 
 export default function Snapshots() {
   const navigate = useNavigate()
+  const dialog = useDialog()
   const [snapshots, setSnapshots] = useState<Snapshot[]>([])
   const [loading, setLoading] = useState(true)
   const [refreshing, setRefreshing] = useState(false)
+  const [deleting, setDeleting] = useState<string | null>(null)
 
   const fetchData = useCallback(async () => {
     try {
@@ -23,6 +26,25 @@ export default function Snapshots() {
 
   useEffect(() => { fetchData() }, [fetchData])
 
+  const handleDelete = async (snapshot: Snapshot) => {
+    const confirmed = await dialog.confirm(
+      '删除快照',
+      `确认删除容器 ${snapshot.container_name} 的快照吗？此操作不可恢复。`
+    )
+    if (!confirmed) return
+
+    setDeleting(snapshot.id)
+    try {
+      await deleteContainerSnapshot(snapshot.container_id, snapshot.id)
+      setSnapshots(prev => prev.filter(s => s.id !== snapshot.id))
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { message?: string } } }
+      dialog.alert('删除失败', error.response?.data?.message || '请稍后重试')
+    } finally {
+      setDeleting(null)
+    }
+  }
+
   if (loading) {
     return (
       <div className="flex items-center justify-center py-20">
@@ -66,6 +88,7 @@ export default function Snapshots() {
                 <th className="px-4 py-3 text-left font-medium">类型</th>
                 <th className="px-4 py-3 text-left font-medium">创建者</th>
                 <th className="px-4 py-3 text-right font-medium">大小</th>
+                <th className="px-4 py-3 text-center font-medium">操作</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-gray-100">
@@ -89,6 +112,16 @@ export default function Snapshots() {
                   </td>
                   <td className="px-4 py-3 text-gray-600">{snapshot.created_by || '-'}</td>
                   <td className="px-4 py-3 text-right font-mono text-xs text-gray-600">{formatBytes(snapshot.size_bytes || 0)}</td>
+                  <td className="px-4 py-3 text-center">
+                    <button
+                      onClick={() => handleDelete(snapshot)}
+                      disabled={deleting === snapshot.id}
+                      className="inline-flex items-center justify-center p-1.5 rounded text-red-500 hover:bg-red-50 transition-colors disabled:opacity-50"
+                      title="删除快照"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  </td>
                 </tr>
               ))}
             </tbody>

frontend/src/pages/SubUserManagement.tsx

@@ -0,0 +1,328 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Copy, KeyRound, LogIn, RefreshCw, ScrollText, UserCog, X } from 'lucide-react'
+import { useDialog } from '../components/Dialog'
+import api, { AuditLog, LoginLog } from '../services/api'
+import { copyToClipboard } from '../utils/clipboard'
+
+interface SubUserItem {
+  id: string
+  username: string
+  container_names: string[]
+  container_uuids: string[]
+  container_name: string
+  container_uuid: string
+  access_code: string
+  password?: string
+  created_at: string
+  last_login: string
+  last_login_ip: string
+  last_login_ua: string
+}
+
+interface AuditLogExt extends AuditLog {
+  ip?: string
+  user_agent?: string
+  success?: boolean
+  error?: string
+}
+
+export default function SubUserManagement() {
+  const dialog = useDialog()
+  const [users, setUsers] = useState<SubUserItem[]>([])
+  const [loading, setLoading] = useState(true)
+  const [auditLogs, setAuditLogs] = useState<AuditLogExt[] | null>(null)
+  const [loginLogs, setLoginLogs] = useState<LoginLog[] | null>(null)
+  const [modalTitle, setModalTitle] = useState('')
+  const [passwordUser, setPasswordUser] = useState<SubUserItem | null>(null)
+  const [rotatingPassword, setRotatingPassword] = useState(false)
+
+  const fetchUsers = useCallback(async () => {
+    try {
+      const res = await api.get<{ success: boolean; data: SubUserItem[] }>('/sub-users')
+      setUsers(res.data.data || [])
+    } catch (err) {
+      console.error(err)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { fetchUsers() }, [fetchUsers])
+
+  const managementUrl = (user: SubUserItem) => `${window.location.origin}/login?code=${user.access_code}`
+
+  const copyText = async (text: string) => {
+    await copyToClipboard(text)
+  }
+
+  const rotatePassword = async (user: SubUserItem) => {
+    setRotatingPassword(true)
+    try {
+      const res = await api.post(`/sub-users/${user.id}/rotate-password`)
+      const data = res.data.data
+      const updatedUser = {
+        ...user,
+        username: data?.username || user.username,
+        access_code: data?.access_code || user.access_code,
+        password: data?.password || '',
+      }
+      setUsers((prev) => prev.map((item) => (item.id === user.id ? updatedUser : item)))
+      setPasswordUser(updatedUser)
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { message?: string } } }
+      dialog.alert('轮换失败', error.response?.data?.message || '请稍后重试')
+    } finally {
+      setRotatingPassword(false)
+    }
+  }
+
+  const showAuditLogs = async (user: SubUserItem) => {
+    try {
+      const res = await api.get(`/sub-users/${user.id}/audit-logs`)
+      setAuditLogs(res.data.data || [])
+      setLoginLogs(null)
+      setModalTitle(`${user.username} - 操作日志`)
+    } catch {
+      dialog.alert('错误', '获取操作日志失败')
+    }
+  }
+
+  const showLoginLogs = async (user: SubUserItem) => {
+    try {
+      const res = await api.get(`/sub-users/${user.id}/login-logs`)
+      setLoginLogs(res.data.data || [])
+      setAuditLogs(null)
+      setModalTitle(`${user.username} - 登录日志`)
+    } catch {
+      dialog.alert('错误', '获取登录日志失败')
+    }
+  }
+
+  const closeModal = () => {
+    setAuditLogs(null)
+    setLoginLogs(null)
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-black" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <h1 className="text-xl font-semibold text-black dark:text-white">子用户管理</h1>
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">容器分配的子用户列表，共 {users.length} 个</p>
+      </div>
+
+      <div className="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
+        {users.length === 0 ? (
+          <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
+            <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800">
+              <UserCog className="h-7 w-7 text-gray-400" />
+            </div>
+            <div className="text-sm font-medium text-gray-700 dark:text-gray-300">暂无子用户</div>
+          </div>
+        ) : (
+          <table className="w-full min-w-[820px] text-sm">
+            <thead className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-xs text-gray-500 dark:text-gray-400">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium w-12">#</th>
+                <th className="px-4 py-3 text-left font-medium">容器名称</th>
+                <th className="px-4 py-3 text-left font-medium">UUID</th>
+                <th className="px-4 py-3 text-left font-medium">最后登录</th>
+                <th className="px-4 py-3 text-center font-medium">操作</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+              {users.map((user, index) => (
+                <tr key={user.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                  <td className="px-4 py-3 text-gray-400 dark:text-gray-500">{index + 1}</td>
+                  <td className="px-4 py-3 font-medium text-black dark:text-white">{user.container_name || '-'}</td>
+                  <td className="px-4 py-3 font-mono text-xs text-gray-600 dark:text-gray-400">{user.container_uuid || '-'}</td>
+                  <td className="px-4 py-3 text-gray-600 dark:text-gray-400">
+                    {user.last_login ? (
+                      <div>
+                        <div className="text-xs">{user.last_login}</div>
+                        <div className="text-xs text-gray-400 dark:text-gray-500">{user.last_login_ip}</div>
+                      </div>
+                    ) : (
+                      <span className="text-gray-400">从未登录</span>
+                    )}
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center justify-center gap-1">
+                      <button
+                        onClick={() => setPasswordUser(user)}
+                        className="inline-flex items-center gap-1 px-2 py-1.5 rounded text-xs text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/30 transition-colors"
+                        title="查看密码"
+                      >
+                        <KeyRound className="w-3.5 h-3.5" />
+                        查看密码
+                      </button>
+                      <button
+                        onClick={() => showAuditLogs(user)}
+                        className="inline-flex items-center gap-1 px-2 py-1.5 rounded text-xs text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-colors"
+                        title="查看操作日志"
+                      >
+                        <ScrollText className="w-3.5 h-3.5" />
+                        操作日志
+                      </button>
+                      <button
+                        onClick={() => showLoginLogs(user)}
+                        className="inline-flex items-center gap-1 px-2 py-1.5 rounded text-xs text-green-600 hover:bg-green-50 dark:hover:bg-green-900/30 transition-colors"
+                        title="查看登录日志"
+                      >
+                        <LogIn className="w-3.5 h-3.5" />
+                        登录日志
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {passwordUser && (
+        <div className="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl w-full max-w-lg overflow-hidden">
+            <div className="flex items-center justify-between gap-3 px-5 py-3 border-b border-gray-200 dark:border-gray-700">
+              <h3 className="text-sm font-semibold text-black dark:text-white">查看密码</h3>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => rotatePassword(passwordUser)}
+                  disabled={rotatingPassword}
+                  className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded text-xs text-amber-700 bg-amber-50 hover:bg-amber-100 dark:text-amber-300 dark:bg-amber-900/30 dark:hover:bg-amber-900/50 disabled:opacity-50"
+                  title="轮换密码"
+                >
+                  <RefreshCw className={`w-3.5 h-3.5 ${rotatingPassword ? 'animate-spin' : ''}`} />
+                  {rotatingPassword ? '轮换中...' : '轮换密码'}
+                </button>
+                <button onClick={() => setPasswordUser(null)} className="p-1 text-gray-400 hover:text-black dark:hover:text-white rounded">
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+            <div className="p-5">
+              <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-sm space-y-3">
+                <div className="flex items-start justify-between gap-3">
+                  <span className="shrink-0 text-gray-500 dark:text-gray-400">用户</span>
+                  <span className="min-w-0 text-right font-medium text-black dark:text-white break-all">{passwordUser.username}</span>
+                </div>
+                <div className="flex items-start justify-between gap-3">
+                  <span className="shrink-0 text-gray-500 dark:text-gray-400">地址</span>
+                  <div className="flex min-w-0 items-center gap-1">
+                    <span className="font-mono text-xs text-black dark:text-white break-all">{managementUrl(passwordUser)}</span>
+                    <button onClick={() => copyText(managementUrl(passwordUser))} className="shrink-0 p-0.5 text-gray-400 hover:text-black dark:hover:text-white rounded" title="复制">
+                      <Copy className="w-3 h-3" />
+                    </button>
+                  </div>
+                </div>
+                <div className="flex items-start justify-between gap-3">
+                  <span className="shrink-0 text-gray-500 dark:text-gray-400">密码</span>
+                  <div className="flex min-w-0 items-center gap-1">
+                    <span className="font-mono text-xs text-black dark:text-white break-all">
+                      {passwordUser.password || '未保存，请轮换生成新密码'}
+                    </span>
+                    {passwordUser.password && (
+                      <button onClick={() => copyText(passwordUser.password || '')} className="shrink-0 p-0.5 text-gray-400 hover:text-black dark:hover:text-white rounded" title="复制">
+                        <Copy className="w-3 h-3" />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Log Modal */}
+      {(auditLogs || loginLogs) && (
+        <div className="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl w-full max-w-3xl max-h-[85vh] overflow-hidden flex flex-col">
+            <div className="flex items-center justify-between px-5 py-3 border-b border-gray-200 dark:border-gray-700">
+              <h3 className="text-sm font-semibold text-black dark:text-white">{modalTitle}</h3>
+              <button onClick={closeModal} className="p-1 text-gray-400 hover:text-black dark:hover:text-white rounded">
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+            <div className="overflow-auto flex-1">
+              {auditLogs && (
+                <table className="w-full text-sm">
+                  <thead className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-xs text-gray-500 dark:text-gray-400 sticky top-0">
+                    <tr>
+                      <th className="px-4 py-2 text-left">操作时间</th>
+                      <th className="px-4 py-2 text-left">操作</th>
+                      <th className="px-4 py-2 text-left">IP</th>
+                      <th className="px-4 py-2 text-left">UA</th>
+                      <th className="px-4 py-2 text-center">结果</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+                    {auditLogs.length === 0 ? (
+                      <tr><td colSpan={5} className="px-4 py-8 text-center text-gray-400">暂无操作日志</td></tr>
+                    ) : auditLogs.map((log, i) => (
+                      <tr key={i} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                        <td className="px-4 py-2 text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">{log.time}</td>
+                        <td className="px-4 py-2 text-xs text-gray-700 dark:text-gray-300">{log.action}</td>
+                        <td className="px-4 py-2 text-xs font-mono text-gray-500 dark:text-gray-400">{log.ip || '-'}</td>
+                        <td className="px-4 py-2 text-xs text-gray-500 dark:text-gray-400 max-w-[200px] truncate" title={log.user_agent}>{log.user_agent || '-'}</td>
+                        <td className="px-4 py-2 text-center">
+                          {log.success !== undefined ? (
+                            log.success ? (
+                              <span className="inline-flex px-2 py-0.5 rounded text-xs bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400">成功</span>
+                            ) : (
+                              <span className="inline-flex px-2 py-0.5 rounded text-xs bg-red-50 text-red-600 dark:bg-red-900/30 dark:text-red-400" title={log.error}>{log.error ? '失败' : '失败'}</span>
+                            )
+                          ) : (
+                            <span className="text-gray-400">-</span>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+              {loginLogs && (
+                <table className="w-full text-sm">
+                  <thead className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-xs text-gray-500 dark:text-gray-400 sticky top-0">
+                    <tr>
+                      <th className="px-4 py-2 text-left">登录时间</th>
+                      <th className="px-4 py-2 text-left">登录 IP</th>
+                      <th className="px-4 py-2 text-left">UA</th>
+                      <th className="px-4 py-2 text-center">结果</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+                    {loginLogs.length === 0 ? (
+                      <tr><td colSpan={4} className="px-4 py-8 text-center text-gray-400">暂无登录日志</td></tr>
+                    ) : loginLogs.map((log, i) => (
+                      <tr key={i} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                        <td className="px-4 py-2 text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">{log.time}</td>
+                        <td className="px-4 py-2 text-xs font-mono text-gray-500 dark:text-gray-400">{log.ip}</td>
+                        <td className="px-4 py-2 text-xs text-gray-500 dark:text-gray-400 max-w-[250px] truncate" title={log.user_agent}>{log.user_agent}</td>
+                        <td className="px-4 py-2 text-center">
+                          {log.success ? (
+                            <span className="inline-flex px-2 py-0.5 rounded text-xs bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400">成功</span>
+                          ) : (
+                            <span className="inline-flex px-2 py-0.5 rounded text-xs bg-red-50 text-red-600 dark:bg-red-900/30 dark:text-red-400">失败</span>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}