@allbluecn/admin-app 0.1.0

package/src/components/user/settings-activity-log.tsx

@@ -0,0 +1,358 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// 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 {
+  Calendar,
+  Download,
+  Filter,
+  Loader2,
+  MapPin,
+  Search,
+} from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from 'react-i18next'
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { FieldLabel } from "@/components/ui/field";
+import {
+  InputGroup,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+
+export interface ActivityLogEntry {
+  id: string;
+  action: string;
+  type:
+    | "login"
+    | "logout"
+    | "password_change"
+    | "profile_update"
+    | "settings_change"
+    | "export"
+    | "delete"
+    | "create"
+    | "update";
+  description: string;
+  ipAddress: string;
+  location: string;
+  device: string;
+  timestamp: Date;
+  status: "success" | "failed";
+  /** 失败原因（仅 status === "failed" 时显示，位于日期右侧，dot 分隔） */
+  reason?: string;
+}
+
+export interface SettingsActivityLogProps {
+  entries?: ActivityLogEntry[];
+  onExport?: (filters: {
+    dateRange?: { start: Date; end: Date };
+    type?: string;
+    search?: string;
+  }) => Promise<void>;
+  className?: string;
+  title?: string;
+  description?: string;
+}
+
+const actionTypes = [
+  { value: "all", key: "all" },
+  { value: "login", key: "login" },
+  { value: "logout", key: "logout" },
+  { value: "password_change", key: "password_change" },
+  { value: "profile_update", key: "profile_update" },
+  { value: "settings_change", key: "settings_change" },
+  { value: "export", key: "export" },
+  { value: "delete", key: "delete" },
+] as const
+
+function formatRelativeTime(t: (k: string, p?: Record<string, number>) => string, date: Date): string {
+  const now = Date.now();
+  const diff = now - date.getTime();
+  const minutes = Math.floor(diff / 60_000);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (minutes < 1) return t("activityLog.justNow");
+  if (minutes < 60) return t("common.timeAgo.minutes", { count: minutes });
+  if (hours < 24) return t("common.timeAgo.hours", { count: hours });
+  if (days < 7) return t("common.timeAgo.days", { count: days });
+  return new Intl.DateTimeFormat("zh-CN", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  }).format(date);
+}
+
+export default function SettingsActivityLog({
+  entries = [],
+  onExport,
+  className,
+  title,
+  description,
+}: SettingsActivityLogProps) {
+  const { t } = useTranslation('common')
+  const displayTitle = title ?? t('activityLog.title')
+  const displayDescription = description ?? t('activityLog.description')
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedType, setSelectedType] = useState("all");
+  const [dateRange, setDateRange] = useState({
+    start: "",
+    end: "",
+  });
+  const [isExporting, setIsExporting] = useState(false);
+
+  const filteredEntries = entries.filter((entry) => {
+    if (selectedType !== "all" && entry.type !== selectedType) return false;
+    if (
+      searchQuery &&
+      !entry.description.toLowerCase().includes(searchQuery.toLowerCase()) &&
+      !entry.ipAddress.includes(searchQuery) &&
+      !entry.location.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+      return false;
+    return true;
+  });
+
+  const handleExport = async () => {
+    setIsExporting(true);
+    try {
+      const exportRange =
+        dateRange.start && dateRange.end
+          ? {
+              start: new Date(dateRange.start),
+              end: new Date(dateRange.end),
+            }
+          : undefined;
+
+      await onExport?.({
+        dateRange: exportRange,
+        type: selectedType !== "all" ? selectedType : undefined,
+        search: searchQuery || undefined,
+      });
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <Card className={cn("w-full shadow-xs", className)}>
+      <CardHeader>
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div className="flex min-w-0 flex-1 flex-col gap-2">
+            <CardTitle className="wrap-break-word">{displayTitle}</CardTitle>
+            <CardDescription className="wrap-break-word">
+              {displayDescription}
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-6">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="flex flex-col gap-4 rounded-lg border p-4">
+              <div className="flex items-center gap-2">
+                <div className="flex size-8 items-center justify-center rounded-lg bg-muted">
+                  <Search className="size-4" />
+                </div>
+                <FieldLabel className="mb-0">{t('activityLog.search')}</FieldLabel>
+              </div>
+              <InputGroup>
+                <InputGroupInput
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder={t('activityLog.searchPlaceholder')}
+                  value={searchQuery}
+                />
+              </InputGroup>
+            </div>
+
+            <div className="flex flex-col gap-4 rounded-lg border p-4">
+              <div className="flex items-center gap-2">
+                <div className="flex size-8 items-center justify-center rounded-lg bg-muted">
+                  <Filter className="size-4" />
+                </div>
+                <FieldLabel className="mb-0" htmlFor="action-type">
+                  {t('activityLog.actionType')}
+                </FieldLabel>
+              </div>
+              <Select onValueChange={setSelectedType} value={selectedType}>
+                <SelectTrigger id="action-type">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {actionTypes.map((type) => (
+                    <SelectItem key={type.value} value={type.value}>
+                      {t(`activityLog.actionTypes.${type.key}`)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex flex-col gap-4 rounded-lg border p-4">
+              <div className="flex items-center gap-2">
+                <div className="flex size-8 items-center justify-center rounded-lg bg-muted">
+                  <Calendar className="size-4" />
+                </div>
+                <FieldLabel className="mb-0" htmlFor="date-start">
+                  {t('activityLog.startDate')}
+                </FieldLabel>
+              </div>
+              <InputGroup>
+                <InputGroupInput
+                  id="date-start"
+                  onChange={(e) =>
+                    setDateRange((prev) => ({ ...prev, start: e.target.value }))
+                  }
+                  type="date"
+                  value={dateRange.start}
+                />
+              </InputGroup>
+            </div>
+
+            <div className="flex flex-col gap-4 rounded-lg border p-4">
+              <div className="flex items-center gap-2">
+                <div className="flex size-8 items-center justify-center rounded-lg bg-muted">
+                  <Calendar className="size-4" />
+                </div>
+                <FieldLabel className="mb-0" htmlFor="date-end">
+                  {t('activityLog.endDate')}
+                </FieldLabel>
+              </div>
+              <InputGroup>
+                <InputGroupInput
+                  id="date-end"
+                  onChange={(e) =>
+                    setDateRange((prev) => ({ ...prev, end: e.target.value }))
+                  }
+                  type="date"
+                  value={dateRange.end}
+                />
+              </InputGroup>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-muted-foreground text-sm">
+              {t('activityLog.total', { count: filteredEntries.length })}
+            </p>
+            <Button
+              className="w-full sm:w-auto"
+              disabled={isExporting}
+              onClick={handleExport}
+              type="button"
+              variant="outline"
+            >
+              {isExporting ? (
+                <>
+                  <Loader2 className="size-4 animate-spin" />
+                  {t('activityLog.exporting')}
+                </>
+              ) : (
+                <>
+                  <Download className="size-4" />
+                  {t('activityLog.exportLog')}
+                </>
+              )}
+            </Button>
+          </div>
+
+          <Separator />
+
+          {filteredEntries.length === 0 ? (
+            <div className="flex flex-col items-center justify-center gap-4 py-12 text-center">
+              <div className="flex size-12 items-center justify-center rounded-full bg-muted">
+                <Search className="size-6 text-muted-foreground" />
+              </div>
+              <div className="flex flex-col gap-2">
+                <p className="font-medium text-sm">{t('activityLog.empty')}</p>
+                <p className="text-muted-foreground text-sm">
+                  {searchQuery || selectedType !== "all"
+                    ? t('activityLog.emptyHint.filtered')
+                    : t('activityLog.emptyHint.default')}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div className="flex flex-col gap-3">
+              {filteredEntries.map((entry) => (
+                <div
+                  className="flex items-start gap-3 rounded-lg border p-4"
+                  key={entry.id}
+                >
+                  <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted">
+                    <Calendar className="size-4" />
+                  </div>
+                  <div className="flex min-w-0 flex-1 flex-col gap-2">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="font-medium text-sm">
+                        {entry.description}
+                      </span>
+                      <Badge
+                        className="text-xs"
+                        variant={
+                          entry.status === "success" ? "default" : "destructive"
+                        }
+                      >
+                        {entry.status === "success" ? t('activityLog.status.success') : t('activityLog.status.failed')}
+                      </Badge>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2 text-muted-foreground text-xs">
+                      <span className="flex items-center gap-1">
+                        <MapPin className="size-3" />
+                        {entry.location || t('activityLog.unknown')}
+                      </span>
+                      <span>•</span>
+                      <span>{entry.ipAddress || t('activityLog.unknown')}</span>
+                      <span>•</span>
+                      <span>{entry.device || t('activityLog.unknown')}</span>
+                      <span>•</span>
+                      <span>{formatRelativeTime(t, entry.timestamp)}</span>
+                      {entry.status === "failed" && entry.reason && (
+                        <>
+                          <span>•</span>
+                          <span className="text-destructive">{entry.reason}</span>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/user/settings-profile/constants.ts

@@ -0,0 +1,42 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// 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 const defaultSocialPlatforms = [
+  {
+    id: "twitter",
+    label: "Twitter/X",
+    placeholder: "https://x.com/preetsuthar17",
+  },
+  {
+    id: "github",
+    label: "GitHub",
+    placeholder: "https://github.com/preetsuthar17",
+  },
+  {
+    id: "linkedin",
+    label: "LinkedIn",
+    placeholder: "https://linkedin.com/in/preetsuthar17",
+  },
+  { id: "website", label: "Website", placeholder: "https://preetsuthar.me" },
+]
+
+export const socialPlatformLabels: Record<string, string> = {
+  twitter: "Twitter/X",
+  github: "GitHub",
+  linkedin: "LinkedIn",
+  website: "Website",
+}

package/src/components/user/settings-profile/types.ts

@@ -0,0 +1,47 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// 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 type { ReactNode } from "react";
+
+export interface SocialLink {
+  platform: string;
+  url: string;
+}
+
+export interface ProfileData {
+  name: string;
+  email: string;
+  bio?: string;
+  location?: string;
+  website?: string;
+  avatar?: string;
+  socialLinks?: SocialLink[];
+}
+
+export interface SettingsProfileProps {
+  profile?: ProfileData;
+  onSave?: (data: ProfileData) => Promise<void>;
+  onEmailChange?: (newEmail: string, currentPassword: string) => Promise<void>;
+  onAvatarUpload?: (file: File) => Promise<string>;
+  onAvatarRemove?: () => Promise<void>;
+  className?: string;
+  showEmailVerification?: boolean;
+  readOnly?: boolean;
+  title?: string;
+  description?: string;
+  actions?: ReactNode;
+}