@nexttylabs/echo 0.2.0

package/components/settings/profile-form.tsx

@@ -0,0 +1,124 @@
+"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 { useForm } from "react-hook-form";
+import { useTranslations } from "next-intl";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { authClient } from "@/lib/auth/client";
+import { Loader2 } from "lucide-react";
+
+interface ProfileFormValues {
+  name: string;
+}
+
+export function ProfileForm() {
+  const { data: session, refetch } = authClient.useSession();
+  const user = session?.user;
+  const t = useTranslations("settings.profile");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isDirty },
+  } = useForm<ProfileFormValues>({
+    defaultValues: {
+      name: user?.name || "",
+    },
+  });
+
+  const onSubmit = async (data: ProfileFormValues) => {
+    setIsSubmitting(true);
+    setMessage(null);
+
+    try {
+      await authClient.updateUser({
+        name: data.name,
+      });
+      await refetch();
+      setMessage({ type: "success", text: t("updateSuccess") });
+    } catch {
+      setMessage({ type: "error", text: t("updateFailed") });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("cardTitle")}</CardTitle>
+        <CardDescription>{t("cardDescription")}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div className="grid gap-2">
+            <Label htmlFor="name">{t("nameLabel")}</Label>
+            <Input
+              id="name"
+              {...register("name", {
+                required: t("nameRequired"),
+                maxLength: {
+                  value: 100,
+                  message: t("nameTooLong"),
+                },
+              })}
+              placeholder={t("namePlaceholder")}
+            />
+            {errors.name && (
+              <p className="text-sm text-destructive">{errors.name.message}</p>
+            )}
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="email">{t("emailLabel")}</Label>
+            <Input id="email" value={user?.email || ""} disabled />
+            <p className="text-xs text-muted-foreground">{t("emailNote")}</p>
+          </div>
+
+          {message && (
+            <div
+              className={`rounded-md p-3 text-sm ${
+                message.type === "success"
+                  ? "bg-green-50 text-green-800 dark:bg-green-900/20 dark:text-green-400"
+                  : "bg-destructive/10 text-destructive"
+              }`}
+            >
+              {message.text}
+            </div>
+          )}
+
+          <div className="flex justify-end">
+            <Button type="submit" disabled={isSubmitting || !isDirty}>
+              {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {isSubmitting ? t("updating") : t("saveChanges")}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
+

package/components/settings/role-selector.tsx

@@ -0,0 +1,57 @@
+"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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export const ROLE_OPTIONS = [
+  { value: "admin", label: "管理员" },
+  { value: "product_manager", label: "产品经理" },
+  { value: "developer", label: "开发者" },
+  { value: "customer_support", label: "客服" },
+] as const;
+
+type RoleSelectorProps = {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+};
+
+export function RoleSelector({ value, onChange, disabled }: RoleSelectorProps) {
+  return (
+    <Select value={value} onValueChange={onChange} disabled={disabled}>
+      <SelectTrigger className="h-8 w-[140px]">
+        <SelectValue placeholder="选择角色" />
+      </SelectTrigger>
+      <SelectContent>
+        {ROLE_OPTIONS.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/components/settings/settings-sidebar.tsx

@@ -0,0 +1,115 @@
+"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 Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { cn } from "@/lib/utils";
+import { User, Palette, Key, Globe, Users, Mail, MessageSquare, FileText, LayoutGrid, Plug, AlertTriangle } from "lucide-react";
+import type { UserRole } from "@/lib/auth/permissions";
+
+interface SettingsSidebarProps {
+  userRole: UserRole;
+}
+
+export function SettingsSidebar({ userRole }: SettingsSidebarProps) {
+  const pathname = usePathname();
+  const t = useTranslations("settings");
+  const isAdmin = userRole === "admin";
+  const isAdminOrPM = isAdmin || userRole === "product_manager";
+
+  const groupedItems = [
+    {
+      title: t("groups.general"),
+      items: [
+        { href: "/settings/profile", label: t("items.profile"), icon: User },
+        { href: "/settings/organization", label: t("items.organization"), icon: Users, show: isAdmin },
+      ],
+    },
+    {
+      title: t("groups.brandingCustomizations"),
+      items: [
+        { href: "/settings/appearance", label: t("items.appearance"), icon: Palette },
+        { href: "/settings/notifications", label: t("items.notificationEmails"), icon: Mail },
+      ],
+    },
+    {
+      title: t("groups.accessAuthentication"),
+      items: [
+        { href: "/settings/access", label: t("items.organizationAccess"), icon: Globe, show: isAdminOrPM },
+        { href: "/settings/api-keys", label: t("items.apiKeys"), icon: Key, show: isAdminOrPM },
+      ],
+    },
+    {
+      title: t("groups.modules"),
+      items: [
+        { href: "/settings/modules", label: t("items.customizeModules"), icon: LayoutGrid, show: isAdminOrPM },
+        { href: "/settings/feedback", label: t("items.feedbackRoadmap"), icon: MessageSquare, show: isAdminOrPM },
+        { href: "/settings/changelog", label: t("items.changelog"), icon: FileText, show: isAdminOrPM },
+      ],
+    },
+    {
+      title: t("groups.other"),
+      items: [
+        { href: "/settings/widgets", label: t("items.widgetsEmbeds"), icon: LayoutGrid, show: isAdminOrPM },
+        { href: "/settings/integrations", label: t("items.integrations"), icon: Plug, show: isAdminOrPM },
+
+        { href: "/settings/danger-zone", label: t("items.dangerZone"), icon: AlertTriangle, show: isAdmin },
+      ],
+    },
+  ];
+
+
+  return (
+    <nav className="w-56 shrink-0 border-r bg-muted/30 p-4">
+      <h2 className="mb-4 px-2 text-lg font-semibold">{t("title")}</h2>
+      <div className="space-y-6">
+        {groupedItems.map((group) => {
+          const visibleItems = group.items.filter((item) => item.show ?? true);
+          if (visibleItems.length === 0) {
+            return null;
+          }
+
+          return (
+            <div key={group.title} className="space-y-1">
+              <div className="px-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                {group.title}
+              </div>
+              {visibleItems.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={cn(
+                    "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-muted",
+                    pathname === item.href && "bg-muted font-medium"
+                  )}
+                >
+                  <item.icon className="h-4 w-4" />
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
+

package/components/shared/pagination.tsx

@@ -0,0 +1,215 @@
+"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 { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Pagination as PaginationRoot,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+import { cn } from "@/lib/utils";
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  /** Number of visible page buttons (default: 5) */
+  maxVisible?: number;
+  /** Show "jump to page" input (default: true) */
+  showJumpTo?: boolean;
+  /** Additional class name */
+  className?: string;
+}
+
+export function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  maxVisible = 5,
+  showJumpTo = true,
+  className,
+}: PaginationProps) {
+  const t = useTranslations("feedback");
+  const [jumpPage, setJumpPage] = useState("");
+
+  // Generate page numbers with ellipsis logic
+  const getPageNumbers = () => {
+    const pages: (number | "ellipsis-start" | "ellipsis-end")[] = [];
+    
+    if (totalPages <= maxVisible + 2) {
+      // Show all pages if total is small
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Always show first page
+      pages.push(1);
+
+      // Calculate middle range
+      let startPage = Math.max(
+        2,
+        currentPage - Math.floor((maxVisible - 2) / 2)
+      );
+      const endPage = Math.min(totalPages - 1, startPage + maxVisible - 3);
+      
+      // Adjust if near the end
+      if (endPage - startPage < maxVisible - 3) {
+        startPage = Math.max(2, endPage - (maxVisible - 3));
+      }
+
+      // Add ellipsis before middle numbers
+      if (startPage > 2) {
+        pages.push("ellipsis-start");
+      }
+
+      // Add middle pages
+      for (let i = startPage; i <= endPage; i++) {
+        pages.push(i);
+      }
+
+      // Add ellipsis after middle numbers
+      if (endPage < totalPages - 1) {
+        pages.push("ellipsis-end");
+      }
+
+      // Always show last page
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  const handleJump = () => {
+    const parsed = Number(jumpPage);
+    if (!Number.isFinite(parsed)) return;
+    if (parsed < 1 || parsed > totalPages) return;
+    onPageChange(parsed);
+    setJumpPage("");
+  };
+
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  const pageNumbers = getPageNumbers();
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages;
+
+  return (
+    <div className={cn("flex flex-wrap items-center justify-center gap-4", className)}>
+      <PaginationRoot>
+        <PaginationContent>
+          {/* Previous Button */}
+          <PaginationItem>
+            <PaginationPrevious
+              onClick={handlePrevious}
+              aria-disabled={isFirstPage}
+              tabIndex={isFirstPage ? -1 : undefined}
+              className={cn(
+                isFirstPage && "pointer-events-none opacity-50"
+              )}
+              aria-label={t("pagination.previous")}
+            />
+          </PaginationItem>
+
+          {/* Page Numbers */}
+          {pageNumbers.map((page) => {
+            if (page === "ellipsis-start" || page === "ellipsis-end") {
+              return (
+                <PaginationItem key={page}>
+                  <PaginationEllipsis />
+                </PaginationItem>
+              );
+            }
+
+            return (
+              <PaginationItem key={page}>
+                <PaginationLink
+                  isActive={currentPage === page}
+                  onClick={() => onPageChange(page)}
+                  aria-label={t("pagination.goToPage", { page })}
+                >
+                  {page}
+                </PaginationLink>
+              </PaginationItem>
+            );
+          })}
+
+          {/* Next Button */}
+          <PaginationItem>
+            <PaginationNext
+              onClick={handleNext}
+              aria-disabled={isLastPage}
+              tabIndex={isLastPage ? -1 : undefined}
+              className={cn(
+                isLastPage && "pointer-events-none opacity-50"
+              )}
+              aria-label={t("pagination.next")}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </PaginationRoot>
+
+      {/* Jump to Page */}
+      {showJumpTo && totalPages > maxVisible && (
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground whitespace-nowrap">
+            {t("pagination.jumpTo")}
+          </span>
+          <Input
+            type="number"
+            min={1}
+            max={totalPages}
+            value={jumpPage}
+            onChange={(event) => setJumpPage(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                handleJump();
+              }
+            }}
+            placeholder={String(currentPage)}
+            className="h-8 w-16 text-center"
+          />
+          <Button size="sm" variant="outline" onClick={handleJump}>
+            {t("pagination.go")}
+          </Button>
+          <span className="text-xs text-muted-foreground">
+            / {totalPages}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}