@nexttylabs/echo 0.2.0

package/components/portal/settings-forms/seo-form.tsx

@@ -0,0 +1,156 @@
+"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, useWatch } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+import { Loader2 } from "lucide-react";
+import { updatePortalSettings } from "@/lib/services/portal-settings";
+import type { PortalSeoConfig } from "@/lib/db/schema";
+
+interface SeoFormProps {
+  organizationId: string;
+  initialData?: PortalSeoConfig;
+  showNoIndex?: boolean;
+}
+
+export function SeoForm({ organizationId, initialData, showNoIndex = true }: SeoFormProps) {
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
+
+  const form = useForm<PortalSeoConfig>({
+    defaultValues: {
+      metaTitle: initialData?.metaTitle ?? "",
+      metaDescription: initialData?.metaDescription ?? "",
+      ogImage: initialData?.ogImage ?? "",
+      favicon: initialData?.favicon ?? "",
+      noIndex: initialData?.noIndex ?? false,
+    },
+  });
+  const noIndex = useWatch({ control: form.control, name: "noIndex" }) ?? false;
+
+  const onSubmit = async (data: PortalSeoConfig) => {
+    setSaving(true);
+    setMessage(null);
+
+    const result = await updatePortalSettings(organizationId, "seo", data);
+
+    if (result.success) {
+      setMessage({ type: "success", text: "SEO 设置已保存" });
+    } else {
+      setMessage({ type: "error", text: result.error || "保存失败" });
+    }
+
+    setSaving(false);
+  };
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+      {/* Meta Title */}
+      <div className="space-y-2">
+        <Label htmlFor="metaTitle">页面标题 (Title Tag)</Label>
+        <Input
+          id="metaTitle"
+          placeholder="产品反馈 | 您的公司名"
+          {...form.register("metaTitle")}
+        />
+        <p className="text-sm text-muted-foreground">显示在浏览器标签页和搜索结果中</p>
+      </div>
+
+      {/* Meta Description */}
+      <div className="space-y-2">
+        <Label htmlFor="metaDescription">页面描述 (Meta Description)</Label>
+        <Textarea
+          id="metaDescription"
+          placeholder="提交产品反馈、查看路线图和变更日志。"
+          rows={3}
+          {...form.register("metaDescription")}
+        />
+        <p className="text-sm text-muted-foreground">
+          搜索引擎展示的页面描述，建议 150-160 字符
+        </p>
+      </div>
+
+      {/* OG Image */}
+      <div className="space-y-2">
+        <Label htmlFor="ogImage">社交分享图片 (OG Image)</Label>
+        <Input
+          id="ogImage"
+          type="url"
+          placeholder="https://example.com/og-image.png"
+          {...form.register("ogImage")}
+        />
+        <p className="text-sm text-muted-foreground">
+          分享到社交媒体时显示的图片，建议尺寸 1200x630
+        </p>
+      </div>
+
+      {/* Favicon */}
+      <div className="space-y-2">
+        <Label htmlFor="favicon">网站图标 (Favicon)</Label>
+        <Input
+          id="favicon"
+          type="url"
+          placeholder="https://example.com/favicon.ico"
+          {...form.register("favicon")}
+        />
+        <p className="text-sm text-muted-foreground">显示在浏览器标签页的小图标</p>
+      </div>
+
+      {/* No Index */}
+      {showNoIndex && (
+        <div className="flex items-center justify-between rounded-lg border p-4">
+          <div className="space-y-0.5">
+            <Label htmlFor="noIndex">阻止搜索引擎索引</Label>
+            <p className="text-sm text-muted-foreground">
+              启用后搜索引擎将不会收录此页面
+            </p>
+          </div>
+          <Switch
+            id="noIndex"
+            checked={noIndex}
+            onCheckedChange={(checked) => form.setValue("noIndex", checked)}
+          />
+        </div>
+      )}
+
+      {/* Submit */}
+      <div className="flex items-center gap-4">
+        <Button type="submit" disabled={saving}>
+          {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          保存更改
+        </Button>
+        {message && (
+          <p
+            className={`text-sm ${
+              message.type === "success" ? "text-green-600" : "text-destructive"
+            }`}
+          >
+            {message.text}
+          </p>
+        )}
+      </div>
+    </form>
+  );
+}

package/components/portal/settings-forms/sharing-form.tsx

@@ -0,0 +1,155 @@
+"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, useWatch } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Loader2 } from "lucide-react";
+import { updatePortalSettings } from "@/lib/services/portal-settings";
+import type { PortalSharingConfig } from "@/lib/db/schema";
+
+interface SharingFormProps {
+  organizationId: string;
+  initialData?: PortalSharingConfig;
+}
+
+type SharingFormData = {
+  socialSharing: {
+    twitter: boolean;
+    linkedin: boolean;
+    facebook: boolean;
+  };
+};
+
+function SwitchField({
+  id,
+  label,
+  description,
+  checked,
+  onCheckedChange,
+}: {
+  id: string;
+  label: string;
+  description: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between rounded-lg border p-4">
+      <div className="space-y-0.5">
+        <Label htmlFor={id}>{label}</Label>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+      <Switch id={id} checked={checked} onCheckedChange={onCheckedChange} />
+    </div>
+  );
+}
+
+export function SharingForm({ organizationId, initialData }: SharingFormProps) {
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
+
+  const form = useForm<SharingFormData>({
+    defaultValues: {
+      socialSharing: {
+        twitter: initialData?.socialSharing?.twitter ?? true,
+        linkedin: initialData?.socialSharing?.linkedin ?? true,
+        facebook: initialData?.socialSharing?.facebook ?? false,
+      },
+    },
+  });
+  const socialSharing = useWatch({ control: form.control, name: "socialSharing" }) ?? {
+    twitter: true,
+    linkedin: true,
+    facebook: false,
+  };
+
+  const onSubmit = async (data: SharingFormData) => {
+    setSaving(true);
+    setMessage(null);
+
+    const payload: PortalSharingConfig = {
+      ...initialData,
+      socialSharing: data.socialSharing,
+    };
+
+    const result = await updatePortalSettings(organizationId, "sharing", payload);
+
+    if (result.success) {
+      setMessage({ type: "success", text: "分享设置已保存" });
+    } else {
+      setMessage({ type: "error", text: result.error || "保存失败" });
+    }
+
+    setSaving(false);
+  };
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+      {/* Social Sharing Section */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium">社交分享按钮</h3>
+
+        <SwitchField
+          id="socialSharing.twitter"
+          label="Twitter / X"
+          description="显示分享到 Twitter 的按钮"
+          checked={socialSharing.twitter ?? true}
+          onCheckedChange={(checked) => form.setValue("socialSharing.twitter", checked)}
+        />
+
+        <SwitchField
+          id="socialSharing.linkedin"
+          label="LinkedIn"
+          description="显示分享到 LinkedIn 的按钮"
+          checked={socialSharing.linkedin ?? true}
+          onCheckedChange={(checked) => form.setValue("socialSharing.linkedin", checked)}
+        />
+
+        <SwitchField
+          id="socialSharing.facebook"
+          label="Facebook"
+          description="显示分享到 Facebook 的按钮"
+          checked={socialSharing.facebook ?? false}
+          onCheckedChange={(checked) => form.setValue("socialSharing.facebook", checked)}
+        />
+      </div>
+
+      {/* Submit */}
+      <div className="flex items-center gap-4">
+        <Button type="submit" disabled={saving}>
+          {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          保存更改
+        </Button>
+        {message && (
+          <p
+            className={`text-sm ${
+              message.type === "success" ? "text-green-600" : "text-destructive"
+            }`}
+          >
+            {message.text}
+          </p>
+        )}
+      </div>
+    </form>
+  );
+}

package/components/portal/settings-forms/theme-form.tsx

@@ -0,0 +1,104 @@
+"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 { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2 } from "lucide-react";
+import { updatePortalSettings } from "@/lib/services/portal-settings";
+import type { PortalThemeConfig } from "@/lib/db/schema";
+
+interface ThemeFormProps {
+  organizationId: string;
+  initialData?: PortalThemeConfig;
+}
+
+type ThemeFormData = Pick<PortalThemeConfig, "primaryColor">;
+
+export function ThemeForm({ organizationId, initialData }: ThemeFormProps) {
+  const t = useTranslations("settings.portal.branding.themeForm");
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
+
+  const form = useForm<ThemeFormData>({
+    defaultValues: {
+      primaryColor: initialData?.primaryColor ?? "#6366f1",
+    },
+  });
+
+  const onSubmit = async (data: ThemeFormData) => {
+    setSaving(true);
+    setMessage(null);
+
+    const result = await updatePortalSettings(organizationId, "theme", data);
+
+    if (result.success) {
+      setMessage({ type: "success", text: t("status.saved") });
+    } else {
+      setMessage({ type: "error", text: result.error || t("status.saveFailed") });
+    }
+
+    setSaving(false);
+  };
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+      {/* Primary Color */}
+      <div className="space-y-2">
+        <Label htmlFor="primaryColor">{t("labels.primaryColor")}</Label>
+        <div className="flex items-center gap-3">
+          <Input
+            id="primaryColor"
+            type="color"
+            className="w-16 h-10 p-1 cursor-pointer"
+            {...form.register("primaryColor")}
+          />
+          <Input
+            type="text"
+            className="flex-1"
+            placeholder="#6366f1"
+            {...form.register("primaryColor")}
+          />
+        </div>
+        <p className="text-sm text-muted-foreground">{t("help.primaryColor")}</p>
+      </div>
+
+      {/* Submit */}
+      <div className="flex items-center gap-4">
+        <Button type="submit" disabled={saving}>
+          {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          {t("buttons.save")}
+        </Button>
+        {message && (
+          <p
+            className={`text-sm ${
+              message.type === "success" ? "text-green-600" : "text-destructive"
+            }`}
+          >
+            {message.text}
+          </p>
+        )}
+      </div>
+    </form>
+  );
+}

package/components/settings/api-keys-list.tsx

@@ -0,0 +1,167 @@
+"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 { 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 { Key, Copy, Trash2, Plus } from "lucide-react";
+
+interface ApiKey {
+  keyId: string;
+  name: string;
+  prefix: string;
+  displayKey: string;
+  createdAt: string;
+  lastUsed: string | null;
+}
+
+export function ApiKeysList() {
+  const [keys, setKeys] = useState<ApiKey[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [newKeyName, setNewKeyName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const t = useTranslations("settings.apiKeys");
+  const tCommon = useTranslations("common");
+
+  useEffect(() => {
+    fetchKeys();
+  }, []);
+
+  const fetchKeys = async () => {
+    try {
+      const res = await fetch("/api/api-keys");
+      if (res.ok) {
+        const data = await res.json();
+        setKeys(data.data || []);
+      }
+    } catch (error) {
+      console.error("Failed to fetch API keys:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newKeyName.trim()) return;
+
+    setIsCreating(true);
+    try {
+      const res = await fetch("/api/api-keys", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: newKeyName }),
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        alert(t("keyCreatedAlert", { key: data.data.key }));
+        setNewKeyName("");
+        fetchKeys();
+      }
+    } catch (error) {
+      console.error("Failed to create API key:", error);
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleDelete = async (keyId: string) => {
+    if (!confirm(t("deleteConfirm"))) return;
+
+    try {
+      const res = await fetch(`/api/api-keys/${keyId}`, { method: "DELETE" });
+      if (res.ok) {
+        fetchKeys();
+      }
+    } catch (error) {
+      console.error("Failed to delete API key:", error);
+    }
+  };
+
+  if (isLoading) {
+    return <div className="text-muted-foreground">{tCommon("loading")}</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>{t("createTitle")}</CardTitle>
+          <CardDescription>{t("createDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleCreate} className="flex gap-4">
+            <div className="flex-1">
+              <Label htmlFor="keyName" className="sr-only">{t("keyNameLabel")}</Label>
+              <Input
+                id="keyName"
+                value={newKeyName}
+                onChange={(e) => setNewKeyName(e.target.value)}
+                placeholder={t("keyNamePlaceholder")}
+              />
+            </div>
+            <Button type="submit" disabled={isCreating || !newKeyName.trim()}>
+              <Plus className="mr-2 h-4 w-4" />
+              {t("createButton")}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t("existingTitle")}</CardTitle>
+          <CardDescription>{t("existingDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {keys.length === 0 ? (
+            <p className="text-muted-foreground py-4">{t("noKeys")}</p>
+          ) : (
+            <div className="space-y-4">
+              {keys.map((key) => (
+                <div key={key.keyId} className="flex items-center justify-between p-4 border rounded-lg">
+                  <div className="flex items-center gap-3">
+                    <Key className="h-5 w-5 text-muted-foreground" />
+                    <div>
+                      <p className="font-medium">{key.name}</p>
+                      <p className="text-sm text-muted-foreground font-mono">{key.displayKey}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button variant="ghost" size="icon" onClick={() => navigator.clipboard.writeText(key.prefix)}>
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                    <Button variant="ghost" size="icon" onClick={() => handleDelete(key.keyId)}>
+                      <Trash2 className="h-4 w-4 text-destructive" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/components/settings/appearance-form.tsx

@@ -0,0 +1,71 @@
+"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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import { Monitor, Moon, Sun } from "lucide-react";
+
+type Theme = "light" | "dark" | "system";
+
+export function AppearanceForm() {
+  const [theme, setTheme] = useState<Theme>("system");
+  const t = useTranslations("settings.appearance");
+
+  const themes: { value: Theme; label: string; icon: React.ElementType }[] = [
+    { value: "light", label: t("themeLight"), icon: Sun },
+    { value: "dark", label: t("themeDark"), icon: Moon },
+    { value: "system", label: t("themeSystem"), icon: Monitor },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("cardTitle")}</CardTitle>
+        <CardDescription>{t("cardDescription")}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          <Label>{t("themeLabel")}</Label>
+          <div className="grid grid-cols-3 gap-4">
+            {themes.map((themeOption) => (
+              <button
+                key={themeOption.value}
+                onClick={() => setTheme(themeOption.value)}
+                className={cn(
+                  "flex flex-col items-center gap-2 rounded-lg border-2 p-4 transition-colors hover:bg-muted",
+                  theme === themeOption.value ? "border-primary" : "border-transparent"
+                )}
+              >
+                <themeOption.icon className="h-6 w-6" />
+                <span className="text-sm font-medium">{themeOption.label}</span>
+              </button>
+            ))}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {t("themeComingSoon")}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/components/settings/index.ts

@@ -0,0 +1,25 @@
+/*
+ * 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/>.
+ */
+
+export { SettingsSidebar } from "./settings-sidebar";
+
+export { ProfileForm } from "./profile-form";
+
+export { AppearanceForm } from "./appearance-form";
+export { ApiKeysList } from "./api-keys-list";
+
+