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

frontend/src/features/system/ldap/components/LdapCreateOuDialog.tsx

@@ -0,0 +1,83 @@
+/**
+ * 新建组织单元(OU)弹框
+ * 填写 OU 名称 / 父级 DN / 描述后调用后端创建
+ * 表单状态由页面持有(关闭不重置,仅创建成功后重置),与原页面行为一致
+ */
+import { FolderOpen } from 'lucide-react';
+import { ModalOverlay } from '@/components/ModalOverlay';
+import type { CreateOuFormState, OuItem } from '../types';
+
+interface LdapCreateOuDialogProps {
+  form: CreateOuFormState;
+  onFormChange: (patch: Partial<CreateOuFormState>) => void;
+  ouList: OuItem[];
+  baseDn: string;
+  creating: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function LdapCreateOuDialog({
+  form,
+  onFormChange,
+  ouList,
+  baseDn,
+  creating,
+  onClose,
+  onConfirm,
+}: LdapCreateOuDialogProps) {
+  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">
+            <FolderOpen className="w-4 h-4 text-blue-400" />
+            <h3 className="text-sm font-semibold text-[var(--dg-text-primary)]">新建组织单元 (OU)</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">OU 名称 *</label>
+            <input
+              value={form.name}
+              onChange={e => onFormChange({ name: 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="如: devops, engineering"
+            />
+          </div>
+          <div>
+            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">父级 DN</label>
+            <select
+              value={form.parent}
+              onChange={e => onFormChange({ parent: 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.dn}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">描述</label>
+            <input
+              value={form.desc}
+              onChange={e => onFormChange({ desc: 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 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={creating || !form.name.trim()}
+            className="px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 transition-colors"
+          >
+            {creating ? '创建中…' : '创建 OU'}
+          </button>
+        </div>
+      </div>
+    </ModalOverlay>
+  );
+}