feat: add organization settings and invitations

app/(app)/app/settings/layout.tsx

@@ -1,14 +1,3 @@
-import Link from "next/link";
-import { Activity, Building2, ListChecks, Settings, Users } from "lucide-react";
-
-const settingsNavItems = [
-  { href: "/app/settings/users", label: "用户管理", icon: Users },
-  { href: "/app/settings/organizations", label: "机构管理", icon: Building2 },
-  { href: "/app/settings/roles", label: "角色权限", icon: Settings },
-  { href: "/app/settings/audit", label: "审计日志", icon: ListChecks },
-  { href: "/app/settings/status", label: "运行状态", icon: Activity },
-];
-
 type SettingsLayoutProps = {
   children: React.ReactNode;
 };
@@ -18,18 +7,6 @@ export default function SettingsLayout({ children }: SettingsLayoutProps): React
     <div className="mx-auto flex w-full max-w-7xl flex-col gap-5">
       <section className="border-b pb-4">
         <h1 className="text-2xl font-semibold tracking-normal">系统设置</h1>
-        <nav className="mt-4 flex gap-2 overflow-x-auto" aria-label="系统设置导航">
-          {settingsNavItems.map((item) => (
-            <Link
-              className="inline-flex min-h-10 shrink-0 items-center gap-2 rounded-md border bg-card px-3 text-sm font-medium transition-colors hover:bg-secondary"
-              href={item.href}
-              key={item.href}
-            >
-              <item.icon className="size-4 text-muted-foreground" aria-hidden="true" />
-              {item.label}
-            </Link>
-          ))}
-        </nav>
       </section>
       {children}
     </div>

app/(app)/app/settings/organizations/[id]/page.tsx

@@ -0,0 +1,173 @@
+import Link from "next/link";
+import { notFound, redirect } from "next/navigation";
+import { ArrowLeft, Building2, Users } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getCurrentAuthContext, toPublicAccount } from "@/modules/core/server/auth";
+import { getRoleDefinitions, hasPermission } from "@/modules/core/server/permissions";
+import { readData } from "@/modules/core/server/store";
+import { OrganizationDetailClient } from "@/modules/settings/components/OrganizationDetailClient";
+
+type OrganizationDetailPageProps = {
+  params: Promise<{
+    id: string;
+  }>;
+};
+
+export default async function OrganizationDetailPage({
+  params,
+}: OrganizationDetailPageProps): Promise<React.ReactElement> {
+  const context = await getCurrentAuthContext();
+  if (!context) {
+    redirect("/login");
+  }
+
+  if (!hasPermission(context.permissions, "organization:read")) {
+    redirect("/app/dashboard");
+  }
+
+  const { id } = await params;
+  const data = await readData();
+  const organization = data.organizations.find((item) => item.id === id);
+  if (!organization) {
+    notFound();
+  }
+
+  if (context.organization?.id && context.organization.id !== organization.id) {
+    redirect("/app/settings/organizations");
+  }
+
+  const roles = await getRoleDefinitions(organization.id);
+  const organizationMemberships = data.memberships.filter((membership) => membership.organizationId === organization.id);
+  const accountById = new Map(data.accounts.map((account) => [account.id, account]));
+  const members = organizationMemberships
+    .map((membership) => {
+      const account = accountById.get(membership.accountId);
+      if (!account) {
+        return null;
+      }
+
+      return {
+        account: toPublicAccount(account, membership.roleKey, organization),
+        membership,
+      };
+    })
+    .filter((item): item is NonNullable<typeof item> => item !== null);
+  const invitations = data.organizationInvitations.filter((invitation) => invitation.organizationId === organization.id);
+  const pendingRequests = data.joinRequests.filter(
+    (request) => request.organizationId === organization.id && request.status === "pending",
+  );
+
+  return (
+    <div className="flex flex-col gap-5">
+      <section className="flex flex-col gap-4 border-b pb-5 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <Button asChild size="sm" variant="outline">
+            <Link href="/app/settings/organizations">
+              <ArrowLeft className="size-4" aria-hidden="true" />
+              返回机构列表
+            </Link>
+          </Button>
+          <div className="mt-5 flex items-center gap-3">
+            <span className="inline-flex size-11 items-center justify-center rounded-md bg-secondary text-primary">
+              <Building2 className="size-5" aria-hidden="true" />
+            </span>
+            <div>
+              <h2 className="text-2xl font-semibold">{organization.name}</h2>
+              <p className="text-sm text-muted-foreground">{organization.slug}</p>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant={organization.status === "active" ? "success" : "danger"}>
+            {organization.status === "active" ? "启用" : "停用"}
+          </Badge>
+          <Badge variant={organization.registrationEnabled ? "success" : "secondary"}>
+            {organization.registrationEnabled ? "开放注册" : "关闭注册"}
+          </Badge>
+          <Badge variant={organization.oidcEnabled ? "success" : "secondary"}>
+            {organization.oidcEnabled ? "OIDC 已启用" : "OIDC 未启用"}
+          </Badge>
+        </div>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-4">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-3xl">{members.length}</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-0 text-sm text-muted-foreground">成员</CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-3xl">{roles.filter((role) => role.scope === "organization").length}</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-0 text-sm text-muted-foreground">机构角色</CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-3xl">{pendingRequests.length}</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-0 text-sm text-muted-foreground">待审批申请</CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-3xl">{invitations.filter((invitation) => invitation.status === "active").length}</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-0 text-sm text-muted-foreground">有效邀请</CardContent>
+        </Card>
+      </section>
+
+      <OrganizationDetailClient invitations={invitations} organization={organization} roles={roles} />
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Users className="size-4 text-primary" aria-hidden="true" />
+            机构成员
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0">
+          <div className="overflow-x-auto">
+            <table className="w-full min-w-[760px] text-sm">
+              <thead className="bg-secondary text-left text-xs text-muted-foreground">
+                <tr>
+                  <th className="px-4 py-3 font-medium">账号</th>
+                  <th className="px-4 py-3 font-medium">角色</th>
+                  <th className="px-4 py-3 font-medium">成员状态</th>
+                  <th className="px-4 py-3 font-medium">账号状态</th>
+                  <th className="px-4 py-3 text-right font-medium">加入时间</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y bg-card">
+                {members.map(({ account, membership }) => (
+                  <tr className="hover:bg-secondary/45" key={membership.id}>
+                    <td className="px-4 py-3">
+                      <p className="font-medium">{account.name}</p>
+                      <p className="text-xs text-muted-foreground">{account.email}</p>
+                    </td>
+                    <td className="px-4 py-3">{membership.roleLabel}</td>
+                    <td className="px-4 py-3">{membership.status}</td>
+                    <td className="px-4 py-3">{account.status}</td>
+                    <td className="px-4 py-3 text-right text-muted-foreground">
+                      {new Date(membership.createdAt).toLocaleString("zh-CN")}
+                    </td>
+                  </tr>
+                ))}
+                {members.length === 0 ? (
+                  <tr>
+                    <td className="px-4 py-8 text-center text-muted-foreground" colSpan={5}>
+                      暂无成员
+                    </td>
+                  </tr>
+                ) : null}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/(app)/app/settings/organizations/page.tsx

@@ -1,4 +1,5 @@
 import { redirect } from "next/navigation";
+import Link from "next/link";
 
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -74,7 +75,14 @@ export default async function OrganizationsPage({ searchParams }: OrganizationsP
               <tbody className="divide-y bg-card">
                 {visibleOrganizations.map((organization) => (
                   <tr className="table-row-enter hover:bg-secondary/45" key={organization.id}>
-                    <td className="px-4 py-3 font-medium">{organization.name}</td>
+                    <td className="px-4 py-3">
+                      <Link
+                        className="font-medium text-primary underline-offset-4 hover:underline"
+                        href={`/app/settings/organizations/${organization.id}`}
+                      >
+                        {organization.name}
+                      </Link>
+                    </td>
                     <td className="px-4 py-3 text-muted-foreground">{organization.slug}</td>
                     <td className="px-4 py-3">{organization.status === "active" ? "启用" : "停用"}</td>
                     <td className="px-4 py-3 text-right text-muted-foreground">