添加了子用户列表功能

2026-08-06 22:04:44 +08:00 · 2026-06-06 15:10:24 +08:00
parent 49d5a65357
commit ffedf801e7
19 changed files with 882 additions and 127 deletions
@@ -12,6 +12,7 @@ import Settings from './pages/Settings'
 import ImageManagement from './pages/ImageManagement'
 import Snapshots from './pages/Snapshots'
 import Routing from './pages/Routing'
+import SubUserManagement from './pages/SubUserManagement'
 import Layout from './components/Layout'

 function ProtectedRoute({ children }: { children: React.ReactNode }) {
@@ -63,6 +64,7 @@ function App() {
        <Route path="routing" element={<Routing />} />
        <Route path="audit-logs" element={<AuditLogs />} />
        <Route path="api-integration" element={<ApiIntegration />} />
+        <Route path="sub-users" element={<SubUserManagement />} />
        <Route path="settings" element={<Settings />} />
      </Route>
      <Route path="*" element={<Navigate to="/" replace />} />
@@ -7,6 +7,7 @@ interface CreateContainerModalProps {
  isOpen: boolean
  onClose: () => void
  onSuccess: (containers: CreateContainerRequest[]) => void | Promise<void>
+  existingNames?: string[]
 }

 const defaultForm: CreateContainerRequest = {
@@ -29,7 +30,7 @@ const defaultForm: CreateContainerRequest = {
  expires_at: '',
 }

-export default function CreateContainerModal({ isOpen, onClose, onSuccess }: CreateContainerModalProps) {
+export default function CreateContainerModal({ isOpen, onClose, onSuccess, existingNames = [] }: CreateContainerModalProps) {
  const dialog = useDialog()
  const [templates, setTemplates] = useState<Template[]>([])
  const [loading, setLoading] = useState(false)
@@ -37,6 +38,7 @@ export default function CreateContainerModal({ isOpen, onClose, onSuccess }: Cre
  const [form, setForm] = useState<CreateContainerRequest>(defaultForm)
  const [hostInfo, setHostInfo] = useState<HostInfo | null>(null)
  const [ipv6Status, setIPv6Status] = useState<IPv6Status | null>(null)
+  const [nameError, setNameError] = useState('')

  useEffect(() => {
    if (!isOpen) return
@@ -83,6 +85,34 @@ export default function CreateContainerModal({ isOpen, onClose, onSuccess }: Cre
  // SSH port preview (will be allocated sequentially, starting around 22000+)
  const sshPortPreview = 22000

+  // Find next available batch index to avoid name conflicts
+  const batchStartIndex = useMemo(() => {
+    if (batchCount <= 1 || !form.name) return 1
+    const prefix = `${form.name}-`
+    let maxIdx = 0
+    for (const existing of existingNames) {
+      if (existing.startsWith(prefix)) {
+        const suffix = existing.slice(prefix.length)
+        const idx = parseInt(suffix, 10)
+        if (!isNaN(idx) && idx > maxIdx) {
+          maxIdx = idx
+        }
+      }
+    }
+    return maxIdx + 1
+  }, [form.name, batchCount, existingNames])
+
+  const handleNameChange = (value: string) => {
+    setForm({ ...form, name: value })
+    if (/\s/.test(value)) {
+      setNameError('容器名称不能包含空格')
+    } else if (value && existingNames.includes(value) && batchCount === 1) {
+      setNameError('该容器名称已存在')
+    } else {
+      setNameError('')
+    }
+  }
+
  const handleSubmit = async () => {
    if (!form.name || !form.template_id) {
      dialog.alert('提示', '请填写容器名称并选择系统模板')
@@ -93,8 +123,9 @@ export default function CreateContainerModal({ isOpen, onClose, onSuccess }: Cre

    // Build batch of containers
    const containers: CreateContainerRequest[] = []
+    const startIndex = batchStartIndex
    for (let i = 0; i < batchCount; i++) {
-      const name = batchCount > 1 ? `${boundedForm.name}-${i + 1}` : boundedForm.name
+      const name = batchCount > 1 ? `${boundedForm.name}-${startIndex + i}` : boundedForm.name
      containers.push({
        ...boundedForm,
        name,
@@ -137,17 +168,18 @@ export default function CreateContainerModal({ isOpen, onClose, onSuccess }: Cre
              <input
                type="text"
                value={form.name}
-                onChange={(event) => setForm({ ...form, name: event.target.value })}
-                className={inputClass}
+                onChange={(event) => handleNameChange(event.target.value)}
+                className={`${inputClass} ${nameError ? 'border-red-400 focus:ring-red-400 focus:border-red-400' : ''}`}
                placeholder="my-container"
                required
              />
+              {nameError && <p className="text-xs text-red-500 mt-1">{nameError}</p>}
            </Field>
            <Field label="批量创建数量">
              <NumberInput value={batchCount} min={1} max={50} onChange={(value) => setBatchCount(Math.max(1, value || 1))} />
            </Field>
          </div>
-          {batchCount > 1 && <p className="text-xs text-gray-400">将创建 {batchCount} 个容器：{form.name}-1 至 {form.name}-{batchCount}</p>}
+          {batchCount > 1 && <p className="text-xs text-gray-400">将创建 {batchCount} 个容器：{form.name}-{batchStartIndex} 至 {form.name}-{batchStartIndex + batchCount - 1}</p>}

          <Field label="系统模板">
            {templates.length === 0 ? (
@@ -193,6 +193,18 @@ export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
              {!collapsed && <span>操作日志</span>}
            </button>

+            <button
+              onClick={() => navigate('/sub-users')}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors ${
+                location.pathname.startsWith('/sub-users')
+                  ? 'bg-black text-white dark:bg-white dark:text-black'
+                  : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
+              }`}
+            >
+              <UserCog className="w-4 h-4" />
+              {!collapsed && <span>子用户管理</span>}
+            </button>
+
            <button
              onClick={() => navigate('/api-integration')}
              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors ${
@@ -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 (
@@ -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>
@@ -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}
@@ -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}
          />
@@ -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>
@@ -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>
+  )
+}
@@ -197,6 +197,14 @@ export interface LoginLog {
  success: boolean
 }

+export interface AuditLog {
+  time: string
+  action: string
+  target: string
+  detail: string
+  user: string
+}
+
 export const getLoginLogs = () =>
  api.get<APIResponse<LoginLog[]>>('/login-logs')

@@ -0,0 +1,44 @@
+export async function copyToClipboard(text: string): Promise<boolean> {
+  if (!text) return false
+
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text)
+      return true
+    } catch {
+      // Fall through for non-secure HTTP origins where Clipboard API is blocked.
+    }
+  }
+
+  const textarea = document.createElement('textarea')
+  textarea.value = text
+  textarea.setAttribute('readonly', '')
+  textarea.style.position = 'fixed'
+  textarea.style.top = '0'
+  textarea.style.left = '0'
+  textarea.style.width = '1px'
+  textarea.style.height = '1px'
+  textarea.style.opacity = '0'
+  textarea.style.pointerEvents = 'none'
+
+  const selection = document.getSelection()
+  const selectedRange = selection?.rangeCount ? selection.getRangeAt(0) : null
+
+  document.body.appendChild(textarea)
+  textarea.focus({ preventScroll: true })
+  textarea.select()
+  textarea.setSelectionRange(0, textarea.value.length)
+
+  let copied = false
+  try {
+    copied = document.execCommand('copy')
+  } finally {
+    document.body.removeChild(textarea)
+    if (selection && selectedRange) {
+      selection.removeAllRanges()
+      selection.addRange(selectedRange)
+    }
+  }
+
+  return copied
+}