feat: make user limit configurable from admin user management (#18)

Store the per-instance user cap in settings (default 20) and expose
GET/PUT /admin/users/limit endpoints. The user management page now lets
admins view and update the limit without touching system settings.

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: truewhile <truewhile@users.noreply.github.com>

web/src/api/admin.ts

@@ -64,8 +64,24 @@ export interface SystemUpdateStatus {
   started_at?: string
 }
 
+export interface UserListResponse {
+  users: User[]
+  max_users: number
+  current_users: number
+}
+
+export interface UserLimitResponse {
+  max_users: number
+  current_users: number
+}
+
 export const adminAPI = {
-  listUsers: () => api.get<User[]>('/admin/users').then((r) => r.data),
+  listUsers: () => api.get<UserListResponse>('/admin/users').then((r) => r.data),
+
+  getUserLimit: () => api.get<UserLimitResponse>('/admin/users/limit').then((r) => r.data),
+
+  updateUserLimit: (maxUsers: number) =>
+    api.put<UserLimitResponse>('/admin/users/limit', { max_users: maxUsers }).then((r) => r.data),
 
   createUser: (payload: { username: string; password: string }) =>
     api.post<User>('/admin/users', payload).then((r) => r.data),

web/src/pages/AdminUsersForm.tsx

@@ -1,12 +1,16 @@
 import { FormEvent } from 'react'
-import { Plus } from 'lucide-react'
+import { Plus, Save } from 'lucide-react'
 
 type AdminUsersFormProps = {
   usersCount: number
-  userLimitLabel: string
+  maxUsers: number
+  maxUsersDraft: string
+  savingLimit: boolean
   username: string
   password: string
   userLimitReached: boolean
+  onMaxUsersDraftChange: (value: string) => void
+  onSaveMaxUsers: () => void
   onUsernameChange: (value: string) => void
   onPasswordChange: (value: string) => void
   onSubmit: (e: FormEvent) => void
@@ -14,27 +18,61 @@ type AdminUsersFormProps = {
 
 export function AdminUsersForm({
   usersCount,
-  userLimitLabel,
+  maxUsers,
+  maxUsersDraft,
+  savingLimit,
   username,
   password,
   userLimitReached,
+  onMaxUsersDraftChange,
+  onSaveMaxUsers,
   onUsernameChange,
   onPasswordChange,
   onSubmit,
 }: AdminUsersFormProps) {
+  const draftValue = Number(maxUsersDraft)
+  const limitChanged = maxUsersDraft.trim() !== '' && Number.isFinite(draftValue) && draftValue !== maxUsers
+
   return (
     <form onSubmit={onSubmit} className="glass-panel grid gap-3 md:grid-cols-[1fr_1fr_auto]">
       <div className="md:col-span-3 flex flex-wrap items-center justify-between gap-3">
         <div>
           <h2 className="font-display text-lg font-semibold text-ink-600">用户管理</h2>
           <p className="text-xs text-sand-500">
-            已创建 {usersCount}/{userLimitLabel} 个用户；新增用户默认只有媒体库浏览、播放、外部播放器与第三方客户端观看权限。
+            已创建 {usersCount}/{maxUsers} 个用户；新增用户默认只有媒体库浏览、播放、外部播放器与第三方客户端观看权限。
           </p>
         </div>
         <span className="rounded-full border border-primary-400/30 px-3 py-1 text-xs text-brand-500">
           默认管理员不可删除 · 最高权限
         </span>
       </div>
+
+      <div className="md:col-span-3 flex flex-wrap items-end gap-3 rounded-2xl border border-sand-200/80 bg-white/60 p-4">
+        <label className="min-w-[10rem] flex-1">
+          <span className="mb-1 block text-xs font-medium text-sand-500">单实例用户数量上限</span>
+          <input
+            type="number"
+            min={1}
+            max={10000}
+            className="input-base"
+            value={maxUsersDraft}
+            onChange={(e) => onMaxUsersDraftChange(e.target.value)}
+          />
+        </label>
+        <button
+          type="button"
+          className="neon-button inline-flex items-center justify-center gap-2"
+          disabled={!limitChanged || savingLimit || !Number.isFinite(draftValue) || draftValue < 1}
+          onClick={onSaveMaxUsers}
+        >
+          <Save size={16} />
+          {savingLimit ? '保存中…' : '保存上限'}
+        </button>
+        <p className="w-full text-xs text-sand-500">
+          默认 20 人。达到上限后无法继续注册或添加用户；若当前用户数已超过新上限，已有账号不受影响，但需删除部分用户后才能继续添加。
+        </p>
+      </div>
+
       <input
         required
         className="input-base"

web/src/pages/AdminUsersPanel.tsx

@@ -9,8 +9,13 @@ import { AdminUserLibrariesDialog } from '../components/AdminUserLibrariesDialog
 import { AdminUsersForm } from './AdminUsersForm'
 import { AdminUsersTable } from './AdminUsersTable'
 
+const DEFAULT_MAX_USERS = 20
+
 export function AdminUsersPanel() {
   const [users, setUsers] = useState<User[]>([])
+  const [maxUsers, setMaxUsers] = useState(DEFAULT_MAX_USERS)
+  const [maxUsersDraft, setMaxUsersDraft] = useState(String(DEFAULT_MAX_USERS))
+  const [savingLimit, setSavingLimit] = useState(false)
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
   const [editingID, setEditingID] = useState<string | null>(null)
@@ -19,7 +24,10 @@ export function AdminUsersPanel() {
   const [configuringLibrariesUser, setConfiguringLibrariesUser] = useState<User | null>(null)
 
   const refresh = async () => {
-    setUsers(await adminAPI.listUsers())
+    const data = await adminAPI.listUsers()
+    setUsers(data.users)
+    setMaxUsers(data.max_users)
+    setMaxUsersDraft(String(data.max_users))
   }
   useEffect(() => {
     refresh().catch(() => undefined)
@@ -27,9 +35,34 @@ export function AdminUsersPanel() {
     return () => window.clearInterval(timer)
   }, [])
 
-  const maxUsers = 20
   const userLimitReached = users.length >= maxUsers
-  const userLimitLabel = String(maxUsers)
+
+  const handleSaveMaxUsers = async () => {
+    const next = Number(maxUsersDraft)
+    if (!Number.isFinite(next) || next < 1) {
+      toast.error('用户上限至少为 1')
+      return
+    }
+    if (next > 10000) {
+      toast.error('用户上限不能超过 10000')
+      return
+    }
+    if (next === maxUsers) return
+    setSavingLimit(true)
+    try {
+      const data = await adminAPI.updateUserLimit(next)
+      setMaxUsers(data.max_users)
+      setMaxUsersDraft(String(data.max_users))
+      toast.success(`用户上限已更新为 ${data.max_users} 人`)
+    } catch (err: unknown) {
+      const msg =
+        (err as { response?: { data?: { error?: string } } })?.response?.data?.error ??
+        '保存用户上限失败'
+      toast.error(msg)
+    } finally {
+      setSavingLimit(false)
+    }
+  }
 
   const handleCreate = async (e: FormEvent) => {
     e.preventDefault()
@@ -132,10 +165,14 @@ export function AdminUsersPanel() {
     <div className="space-y-6">
       <AdminUsersForm
         usersCount={users.length}
-        userLimitLabel={userLimitLabel}
+        maxUsers={maxUsers}
+        maxUsersDraft={maxUsersDraft}
+        savingLimit={savingLimit}
         username={username}
         password={password}
         userLimitReached={userLimitReached}
+        onMaxUsersDraftChange={setMaxUsersDraft}
+        onSaveMaxUsers={handleSaveMaxUsers}
         onUsernameChange={setUsername}
         onPasswordChange={setPassword}
         onSubmit={handleCreate}
@@ -173,7 +210,7 @@ function userCreateErrorMessage(err: unknown): string | undefined {
   const data = (err as { response?: { data?: { error?: string; max_users?: number } } })?.response?.data
   if (!data?.error) return undefined
   if (data.error === 'user limit reached' && data.max_users != null) {
-    return `用户数量已达到授权上限：${data.max_users} 人`
+    return `用户数量已达到上限：${data.max_users} 人`
   }
   return data.error
 }