refactor(frontend): split 7 oversized pages into feature co-location

Per guide ch.7 page split pattern (skeleton orchestrates, private components live in features/<domain>/): - InstancePage 1716->328, UsersPage 1309->240, TicketsPage 1076->195, TicketDetailPage 911->287, QueriesPage 883->479, LdapConfigPage 860->393, WorkflowPage 852->194 - new feature modules: datasource/ rbac/ ticket/ query/ system/ldap/ governance/workflow/ (components + hooks + types + utils) - stable keys replace index keys in dynamic lists; polling intervals and toast call sites preserved 1:1 (verified by agents) - filter/pagination state moved to URL query via new useQueryState hook (Instance/Users/Tickets/AuditLogs pages): refresh/share/back-button restore state; composite updates applied atomically - permission pure functions extracted to lib/permissions.ts (used by useAuth + useLogin); page-size audit: 0 pages over 700-line budget
2026-10-26 17:54:15 +08:00
1 parent ac563d1c5e
commit ac498c7ba2
@@ -0,0 +1,105 @@
+/**
+ * 添加 LDAP 用户弹框
+ * 填写用户名 / 密码 / 显示名称 / 邮箱与目标 OU 后创建 LDAP 用户
+ * 表单状态由页面持有(关闭不重置,仅创建成功后重置),与原页面行为一致
+ */
+import { UserPlus } from 'lucide-react';
+import { ModalOverlay } from '@/components/ModalOverlay';
+import type { AddUserFormState, OuItem } from '../types';
+
+interface LdapAddUserDialogProps {
+  form: AddUserFormState;
+  onFormChange: (patch: Partial<AddUserFormState>) => void;
+  ouList: OuItem[];
+  baseDn: string;
+  adding: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function LdapAddUserDialog({
+  form,
+  onFormChange,
+  ouList,
+  baseDn,
+  adding,
+  onClose,
+  onConfirm,
+}: LdapAddUserDialogProps) {
+  return (
+    <ModalOverlay open={true} onClose={onClose} width="max-w-md">
+      <div className="w-full bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-5 shadow-xl">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <UserPlus className="w-4 h-4 text-emerald-400" />
+            <h3 className="text-sm font-semibold text-[var(--dg-text-primary)]">添加用户到 LDAP</h3>
+          </div>
+          <button onClick={onClose} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">✕</button>
+        </div>
+        <div className="space-y-3 mb-4">
+          <div>
+            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">用户名 *</label>
+            <input
+              value={form.username}
+              onChange={e => onFormChange({ username: e.target.value })}
+              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
+              placeholder="登录名，如 zhangsan"
+            />
+          </div>
+          <div>
+            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">密码 *</label>
+            <input
+              type="password"
+              value={form.password}
+              onChange={e => onFormChange({ password: e.target.value })}
+              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
+              placeholder="初始密码"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">显示名称</label>
+              <input
+                value={form.displayName}
+                onChange={e => onFormChange({ displayName: e.target.value })}
+                className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
+                placeholder="如: 张三"
+              />
+            </div>
+            <div>
+              <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">邮箱</label>
+              <input
+                value={form.email}
+                onChange={e => onFormChange({ email: e.target.value })}
+                className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
+                placeholder="可选"
+              />
+            </div>
+          </div>
+          <div>
+            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">目标 OU</label>
+            <select
+              value={form.ouDn}
+              onChange={e => onFormChange({ ouDn: e.target.value })}
+              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
+            >
+              <option value="">根: {baseDn}</option>
+              {ouList.map(ou => <option key={ou.dn} value={ou.dn}>{ou.name} ({ou.dn})</option>)}
+            </select>
+          </div>
+        </div>
+        <div className="flex justify-end gap-2">
+          <button onClick={onClose} className="px-4 py-2 text-sm text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
+          <button
+            onClick={onConfirm}
+            disabled={adding || !form.username.trim() || !form.password.trim()}
+            className="flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg bg-emerald-500 text-white hover:bg-emerald-600 disabled:opacity-50 transition-colors"
+          >
+            <UserPlus className="w-3.5 h-3.5" />
+            {adding ? '创建中…' : '创建用户'}
+          </button>
+        </div>
+      </div>
+    </ModalOverlay>
+  );
+}