refactor: split modules and harden scraping workflows

web/src/pages/AdminUsersForm.tsx

@@ -0,0 +1,62 @@
+import { FormEvent } from 'react'
+import { Plus } from 'lucide-react'
+
+type AdminUsersFormProps = {
+  usersCount: number
+  userLimitLabel: string
+  username: string
+  password: string
+  userLimitReached: boolean
+  onUsernameChange: (value: string) => void
+  onPasswordChange: (value: string) => void
+  onSubmit: (e: FormEvent) => void
+}
+
+export function AdminUsersForm({
+  usersCount,
+  userLimitLabel,
+  username,
+  password,
+  userLimitReached,
+  onUsernameChange,
+  onPasswordChange,
+  onSubmit,
+}: AdminUsersFormProps) {
+  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} 个用户；新增用户默认只有媒体库浏览、播放、外部播放器与第三方客户端观看权限。
+          </p>
+        </div>
+        <span className="rounded-full border border-primary-400/30 px-3 py-1 text-xs text-brand-500">
+          默认管理员不可删除 · 最高权限
+        </span>
+      </div>
+      <input
+        required
+        className="input-base"
+        placeholder="用户名"
+        value={username}
+        onChange={(e) => onUsernameChange(e.target.value)}
+        disabled={userLimitReached}
+      />
+      <input
+        required
+        minLength={6}
+        className="input-base"
+        placeholder="初始密码（至少 6 位）"
+        type="password"
+        value={password}
+        onChange={(e) => onPasswordChange(e.target.value)}
+        disabled={userLimitReached}
+      />
+      <button type="submit" className="neon-button inline-flex items-center justify-center gap-2" disabled={userLimitReached}>
+        <Plus size={16} />
+        添加用户
+      </button>
+    </form>
+  )
+}