@nexttylabs/echo 0.2.0

package/components/settings/invite-member-form.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+
+const DEFAULT_ROLE = "member";
+
+type InviteMemberFormProps = {
+  organizationId: string;
+};
+
+export function InviteMemberForm({ organizationId }: InviteMemberFormProps) {
+  const [email, setEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+
+    const res = await fetch(`/api/organizations/${organizationId}/invitations`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, role: DEFAULT_ROLE }),
+    });
+
+    const json = await res.json().catch(() => null);
+
+    if (!res.ok) {
+      setError(json?.error ?? "发送邀请失败，请稍后重试");
+      setIsLoading(false);
+      return;
+    }
+
+    setSuccess("邀请已发送，等待对方接受");
+    setEmail("");
+    setIsLoading(false);
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>邀请成员</CardTitle>
+        <CardDescription>通过邮箱邀请新成员加入组织</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error ? (
+            <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {error}
+            </div>
+          ) : null}
+          {success ? (
+            <div className="rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
+              {success}
+            </div>
+          ) : null}
+
+          <div className="space-y-2">
+            <Label htmlFor="invite-email">成员邮箱</Label>
+            <Input
+              id="invite-email"
+              name="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={isLoading}
+              placeholder="name@company.com"
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>邀请角色</Label>
+            <div className="flex items-center gap-3 rounded-md border border-dashed border-slate-200 px-3 py-2 text-sm text-slate-600">
+              <Badge variant="secondary">{DEFAULT_ROLE}</Badge>
+              <span>当前仅支持成员角色</span>
+            </div>
+          </div>
+
+          <Button type="submit" className="w-full" disabled={isLoading || !email}>
+            {isLoading ? "发送中..." : "发送邀请"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/components/settings/notification-preferences.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Bell, Mail } from "lucide-react";
+
+export function NotificationPreferences() {
+  const [preferences, setPreferences] = useState({
+    statusChange: true,
+    newComment: true,
+  });
+  const [isSaving, setIsSaving] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [message, setMessage] = useState<{
+    type: "success" | "error";
+    text: string;
+  } | null>(null);
+  const t = useTranslations("settings.notifications");
+  const tCommon = useTranslations("common");
+
+  useEffect(() => {
+    async function loadPreferences() {
+      try {
+        const response = await fetch("/api/notifications/preferences");
+        if (response.ok) {
+          const data = await response.json();
+          if (data.data) {
+            setPreferences({
+              statusChange: data.data.statusChange ?? true,
+              newComment: data.data.newComment ?? true,
+            });
+          }
+        }
+      } catch {
+        // Use defaults if fetch fails
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    loadPreferences();
+  }, []);
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    setMessage(null);
+
+    try {
+      const response = await fetch("/api/notifications/preferences", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(preferences),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to save preferences");
+      }
+
+      setMessage({ type: "success", text: tCommon("settingsSaved") });
+    } catch {
+      setMessage({ type: "error", text: tCommon("saveFailed") });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent className="py-8">
+          <div className="text-center text-sm text-muted-foreground">
+            {tCommon("loading")}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {message && (
+        <div
+          className={`rounded-md border px-3 py-2 text-sm ${
+            message.type === "success"
+              ? "border-green-200 bg-green-50 text-green-800"
+              : "border-destructive/30 bg-destructive/10 text-destructive"
+          }`}
+        >
+          {message.text}
+        </div>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Bell className="h-5 w-5" />
+            {t("cardTitle")}
+          </CardTitle>
+          <CardDescription>{t("cardDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <div className="flex items-center gap-2">
+                <Mail className="h-4 w-4 text-muted-foreground" />
+                <span className="font-medium">{t("statusChange")}</span>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                {t("statusChangeDesc")}
+              </p>
+            </div>
+            <Switch
+              checked={preferences.statusChange}
+              onCheckedChange={(checked) =>
+                setPreferences({ ...preferences, statusChange: checked })
+              }
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <div className="flex items-center gap-2">
+                <Mail className="h-4 w-4 text-muted-foreground" />
+                <span className="font-medium">{t("newComment")}</span>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                {t("newCommentDesc")}
+              </p>
+            </div>
+            <Switch
+              checked={preferences.newComment}
+              onCheckedChange={(checked) =>
+                setPreferences({ ...preferences, newComment: checked })
+              }
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end">
+        <Button onClick={handleSave} disabled={isSaving}>
+          {isSaving ? tCommon("saving") : t("saveSettings")}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/settings/organization-form.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+export const organizationRedirectPath = "/dashboard";
+
+interface OrganizationFormProps {
+  organizationId?: string;
+  initialName?: string;
+  initialSlug?: string;
+  initialDescription?: string;
+}
+
+export function OrganizationForm({ 
+  organizationId, 
+  initialName = "", 
+  initialDescription = ""
+}: OrganizationFormProps) {
+  const t = useTranslations("settings.organizationForm");
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [formData, setFormData] = useState({ 
+    name: initialName, 
+    description: initialDescription 
+  });
+
+  const isEditing = !!organizationId;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    setSuccess(null);
+
+    const url = isEditing 
+      ? `/api/organizations/${organizationId}` 
+      : "/api/organizations";
+    
+    const method = isEditing ? "PUT" : "POST";
+
+    try {
+      const res = await fetch(url, {
+        method,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      });
+
+      const json = await res.json();
+
+      if (!res.ok) {
+        setError(json?.error ?? (isEditing ? t("updateFailed") : t("createFailed")));
+        setIsLoading(false);
+        return;
+      }
+
+      if (isEditing) {
+        setSuccess(t("updatedSuccess"));
+        setIsLoading(false);
+        router.refresh();
+      } else {
+        router.push(organizationRedirectPath);
+      }
+    } catch {
+      setError(t("genericError"));
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{isEditing ? t("titleEdit") : t("titleCreate")}</CardTitle>
+        <CardDescription>
+          {isEditing ? t("descEdit") : t("descCreate")}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error ? (
+            <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {error}
+            </div>
+          ) : null}
+          
+          {success ? (
+             <div className="rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
+               {success}
+             </div>
+          ) : null}
+
+          <div className="space-y-2">
+            <Label htmlFor="name">{t("nameLabel")}</Label>
+            <Input
+              id="name"
+              name="name"
+              value={formData.name}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, name: e.target.value }))
+              }
+              disabled={isLoading}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="description">{t("descriptionLabel")}</Label>
+            <Textarea
+              id="description"
+              name="description"
+              value={formData.description}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, description: e.target.value }))
+              }
+              disabled={isLoading}
+              rows={4}
+            />
+          </div>
+
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={isLoading || !formData.name}
+          >
+            {isLoading
+              ? (isEditing ? t("savingEdit") : t("savingCreate"))
+              : (isEditing ? t("submitEdit") : t("submitCreate"))}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/components/settings/organization-members-list.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useState } from "react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { RoleSelector } from "@/components/settings/role-selector";
+
+type MemberToRemove = {
+  id: string;
+  name: string;
+};
+
+type OrganizationMember = {
+  userId: string;
+  role: string;
+  name: string | null;
+  email: string | null;
+};
+
+type OrganizationMembersListProps = {
+  organizationId: string;
+  currentUserId: string | null;
+  initialMembers: OrganizationMember[];
+};
+
+export function OrganizationMembersList({
+  organizationId,
+  currentUserId,
+  initialMembers,
+}: OrganizationMembersListProps) {
+  const [members, setMembers] = useState(initialMembers);
+  const [error, setError] = useState<string | null>(null);
+  const [pendingMemberId, setPendingMemberId] = useState<string | null>(null);
+  const [memberToRemove, setMemberToRemove] = useState<MemberToRemove | null>(null);
+
+  const currentUserRole =
+    members.find((member) => member.userId === currentUserId)?.role ?? null;
+  const canManageRoles = currentUserRole === "admin";
+
+  const handleRemove = async () => {
+    if (!memberToRemove) return;
+
+    setError(null);
+    setPendingMemberId(memberToRemove.id);
+
+    const res = await fetch(`/api/organizations/${organizationId}/members/${memberToRemove.id}`, {
+      method: "DELETE",
+    });
+
+    const json = await res.json().catch(() => null);
+    if (!res.ok) {
+      setError(json?.error ?? "移除失败，请稍后重试");
+      setPendingMemberId(null);
+      return;
+    }
+
+    setMembers((prev) => prev.filter((member) => member.userId !== memberToRemove.id));
+    setPendingMemberId(null);
+    setMemberToRemove(null);
+  };
+
+  const handleRoleChange = async (memberId: string, nextRole: string) => {
+    setError(null);
+    setPendingMemberId(memberId);
+
+    const res = await fetch(
+      `/api/organizations/${organizationId}/members/${memberId}`,
+      {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ role: nextRole }),
+      },
+    );
+
+    const json = await res.json().catch(() => null);
+    if (!res.ok) {
+      setError(json?.error ?? "更新角色失败，请稍后重试");
+      setPendingMemberId(null);
+      return;
+    }
+
+    setMembers((prev) =>
+      prev.map((member) =>
+        member.userId === memberId ? { ...member, role: nextRole } : member,
+      ),
+    );
+    setPendingMemberId(null);
+  };
+
+  return (
+    <>
+    <Card>
+      <CardHeader>
+        <CardTitle>组织成员</CardTitle>
+        <CardDescription>查看并移除组织中的成员</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {error ? (
+          <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+            {error}
+          </div>
+        ) : null}
+
+        {members.length === 0 ? (
+          <div className="rounded-md border border-dashed border-slate-200 bg-white/60 px-4 py-6 text-sm text-slate-500">
+            当前组织暂无成员。
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {members.map((member) => {
+              const isSelf = currentUserId === member.userId;
+              const isPending = pendingMemberId === member.userId;
+              const displayName = member.name ?? member.email ?? "未知成员";
+              const secondaryText = member.email ?? member.userId;
+
+              return (
+                <div
+                  key={member.userId}
+                  className="flex flex-col gap-3 rounded-lg border border-slate-200 bg-white px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+                >
+                  <div>
+                    <div className="text-sm font-medium text-slate-900">{displayName}</div>
+                    <div className="text-xs text-slate-500">{secondaryText}</div>
+                  </div>
+
+                  <div className="flex items-center justify-between gap-3 sm:justify-end">
+                    <RoleSelector
+                      value={member.role}
+                      onChange={(value) => handleRoleChange(member.userId, value)}
+                      disabled={!canManageRoles || isPending}
+                    />
+
+                    {isSelf ? (
+                      <Button variant="outline" size="sm" disabled>
+                        不能移除自己
+                      </Button>
+                    ) : (
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        disabled={!currentUserId || isPending}
+                        onClick={() => setMemberToRemove({ id: member.userId, name: displayName })}
+                      >
+                        {isPending ? "移除中..." : "移除"}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+
+    <AlertDialog open={!!memberToRemove} onOpenChange={(open) => !open && setMemberToRemove(null)}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>确认移除成员？</AlertDialogTitle>
+          <AlertDialogDescription>
+            {memberToRemove?.name} 将失去组织访问权限，此操作无法撤销。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={pendingMemberId !== null}>取消</AlertDialogCancel>
+          <AlertDialogAction
+            variant="destructive"
+            onClick={handleRemove}
+            disabled={pendingMemberId !== null}
+          >
+            {pendingMemberId === memberToRemove?.id ? "移除中..." : "确认移除"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  </>
+  );
+}