update: use components

frontend/app/features/admin/PermissionCheckboxList.tsx

@@ -1,5 +1,7 @@
 import type { PlatformPermission } from "../../services/api";
 
+import { Checkbox } from "~/components/ui/checkbox";
+
 /** 模块编码 → 展示名（用于权限分组标题）。 */
 const MODULE_LABELS: Record<string, string> = {
   dashboard: "工作台",
@@ -8,6 +10,10 @@ const MODULE_LABELS: Record<string, string> = {
   system: "系统管理",
 };
 
+/** 勾选框样式：复刻原生 checkbox 外观（白底、灰边、蓝色勾选），并对齐 `.permission-item input` 的 3px 顶部偏移。 */
+const CHECKBOX_CLASS =
+  "mt-[3px] size-[16px] rounded-[3px] border-[#cdd9e4] bg-white disabled:opacity-100 data-checked:border-[#1277d3] data-checked:bg-[#1277d3] data-checked:text-white";
+
 /**
  * 权限勾选列表：按 module_code 分组渲染。
  * - targetRoleCode === "admin" 时 system:view 锁定勾选（后端守卫）；
@@ -58,11 +64,11 @@ export function PermissionCheckboxList({
                 className={`permission-item${locked ? " is-locked" : ""}`}
                 key={code}
               >
-                <input
-                  type="checkbox"
+                <Checkbox
                   checked={checked}
                   disabled={locked}
-                  onChange={() => onToggle(code)}
+                  onCheckedChange={() => onToggle(code)}
+                  className={CHECKBOX_CLASS}
                 />
                 <span>
                   <strong>{permission.permission_name}</strong>