feat: adopt kumo green ui system

modules/settings/components/OrganizationInviteDialog.tsx

@@ -7,6 +7,7 @@ import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Dialog } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
 import type { ApiResult } from "@/modules/core/server/api";
 import type { Organization, OrganizationInvitation, RoleDefinition } from "@/modules/core/types";
 
@@ -91,20 +92,15 @@ export function OrganizationInviteDialog({
         </label>
         <label className="grid gap-2 text-sm">
           <span className="font-medium">角色</span>
-          <select
-            className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+          <Select
+            aria-label="邀请角色"
             defaultValue={defaultRoleId}
             disabled={organizationRoles.length === 0}
             key={organization.id}
             name="roleId"
+            options={organizationRoles.map((role) => ({ value: role.id, label: role.label }))}
             required
-          >
-            {organizationRoles.map((role) => (
-              <option key={role.id} value={role.id}>
-                {role.label}
-              </option>
-            ))}
-          </select>
+          />
         </label>
         {message ? (
           <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">