@allbluecn/web-app 0.4.22 → 0.5.1

package/src/components/story/relations/file-preview.tsx

@@ -0,0 +1,173 @@
+// 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 * as React from "react";
+import { useTheme } from "next-themes";
+import { FileViewer } from "@open-file-viewer/react";
+import { imagePlugin, textPlugin, pdfPlugin, officePlugin, archivePlugin, audioPlugin, videoPlugin, epubPlugin } from "@open-file-viewer/core";
+import type { PreviewToolbarCustomAction } from "@open-file-viewer/core";
+import "@open-file-viewer/core/style.css";
+import pdfWorkerSrc from "pdfjs-dist/build/pdf.worker.mjs?url";
+
+export const fileViewerPlugins = [
+  imagePlugin(),
+  textPlugin(),
+  pdfPlugin({ workerSrc: pdfWorkerSrc }),
+  officePlugin(),
+  archivePlugin(),
+  audioPlugin(),
+  videoPlugin(),
+  epubPlugin(),
+];
+
+// 全屏工具栏图标（16×16 viewBox）
+const FULLSCREEN_TOOLBAR_ICON =
+  '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M6 2.9H4.2A1.3 1.3 0 0 0 2.9 4.2V6"/><path d="M10 2.9h1.8a1.3 1.3 0 0 1 1.3 1.3V6"/><path d="M6 13.1H4.2a1.3 1.3 0 0 1-1.3-1.3V10"/><path d="M10 13.1h1.8a1.3 1.3 0 0 0 1.3-1.3V10"/></svg>';
+const EXIT_FULLSCREEN_TOOLBAR_ICON =
+  '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M2.9 6h1.8A1.3 1.3 0 0 0 6 4.7V2.9"/><path d="M13.1 6h-1.8A1.3 1.3 0 0 1 10 4.7V2.9"/><path d="M2.9 10h1.8A1.3 1.3 0 0 1 6 11.3v1.8"/><path d="M13.1 10h-1.8a1.3 1.3 0 0 0-1.3 1.3v1.8"/></svg>';
+
+// 仅指 text/code 预览顶部的标题栏（文件名 · 类型 · 行数 + Wrap/Copy/Download），
+// 音频等类型的标题不属于遮挡，不隐藏
+const TITLE_SELECTORS = ".ofv-code-header";
+
+export interface FilePreviewProps {
+  file: File;
+  fileName: string;
+  /** 工具栏按钮文案 */
+  fullscreenLabel?: string;
+  exitFullscreenLabel?: string;
+  /** 显示标题栏切换按钮 */
+  showTitleToggle?: boolean;
+  titleToggleLabel?: string;
+  titleToggleHideLabel?: string;
+  /** 全屏回调 */
+  onFullscreen?: () => void;
+  onExitFullscreen?: () => void;
+  /** 预览容器高度 */
+  height?: string;
+  className?: string;
+}
+
+export function FilePreview({
+  file,
+  fileName,
+  fullscreenLabel = "全屏预览",
+  exitFullscreenLabel = "退出全屏",
+  showTitleToggle = false,
+  titleToggleLabel = "显示标题",
+  titleToggleHideLabel = "隐藏标题",
+  onFullscreen,
+  onExitFullscreen,
+  height = "var(--attachment-preview-h, 16rem)",
+  className,
+}: FilePreviewProps) {
+  const { resolvedTheme } = useTheme();
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [showTitle, setShowTitle] = React.useState(false);
+  const [isFullscreen, setIsFullscreen] = React.useState(false);
+
+  // 锁定传给 FileViewer 的 theme：wrapper 的重建依赖含 options.theme，
+  // 若随 resolvedTheme 变化会导致整个 viewer 销毁重建（预览重新加载）
+  const themePropRef = React.useRef<"light" | "dark" | null>(null);
+  if (themePropRef.current === null && (resolvedTheme === "light" || resolvedTheme === "dark")) {
+    themePropRef.current = resolvedTheme;
+  }
+  const themeProp = themePropRef.current ?? "light";
+
+  // 主题切换后仅同步 ofv-root 的 theme class（core 的 applyTheme 本质就是切 class），
+  // 不触发 viewer 重建；file/toolbar 变化导致 viewer 重建后也会重跑本 effect 修正主题
+  React.useEffect(() => {
+    if (resolvedTheme !== "light" && resolvedTheme !== "dark") return;
+    const root = containerRef.current?.querySelector(".ofv-root");
+    if (!root) return;
+    const expected = `ofv-theme-${resolvedTheme}`;
+    if (!root.classList.contains(expected)) {
+      root.classList.remove("ofv-theme-light", "ofv-theme-dark");
+      root.classList.add(expected);
+    }
+  });
+
+  const toolbarActions = React.useMemo<PreviewToolbarCustomAction[]>(() => {
+    const actions: PreviewToolbarCustomAction[] = [];
+    if (isFullscreen) {
+      actions.push({
+        id: "exit-fullscreen",
+        label: exitFullscreenLabel,
+        title: exitFullscreenLabel,
+        icon: EXIT_FULLSCREEN_TOOLBAR_ICON,
+        className: "ofv-toolbar-icon-button",
+        onClick: () => {
+          setIsFullscreen(false);
+          onExitFullscreen?.();
+        },
+      });
+    } else {
+      actions.push({
+        id: "fullscreen",
+        label: fullscreenLabel,
+        title: fullscreenLabel,
+        icon: FULLSCREEN_TOOLBAR_ICON,
+        className: "ofv-toolbar-icon-button",
+        onClick: () => {
+          setIsFullscreen(true);
+          onFullscreen?.();
+        },
+      });
+    }
+    if (showTitleToggle) {
+      actions.push({
+        id: "toggle-title",
+        label: showTitle ? titleToggleHideLabel : titleToggleLabel,
+        title: showTitle ? titleToggleHideLabel : titleToggleLabel,
+        icon: '<svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M1 3h14v2H1V3zm0 4h14v2H1V7zm0 4h14v2H1v-2z"/></svg>',
+        className: "ofv-toolbar-icon-button",
+        // 标题栏存在时才显示按钮：open-file-viewer 在插件渲染完成（setCommandSupport）
+        // 与翻页/缩放时会重新求值 hidden 函数
+        hidden: (ctx) => !ctx.viewport.querySelector(TITLE_SELECTORS),
+        onClick: () => setShowTitle((v) => !v),
+      });
+    }
+    return actions;
+  }, [isFullscreen, showTitle, showTitleToggle, fullscreenLabel, exitFullscreenLabel, titleToggleLabel, titleToggleHideLabel, onFullscreen, onExitFullscreen]);
+
+  // rotate 恒为 true：插件不支持时按钮保持 disabled 态，由 CSS（.ofv-preview-scope）隐藏
+  const toolbar = React.useMemo(() => {
+    const order = ["zoom-out", "zoom-in", "rotate-left", "rotate-right"];
+    order.push(isFullscreen ? "exit-fullscreen" : "fullscreen");
+    if (showTitleToggle) order.push("toggle-title");
+    return { zoom: true, rotate: true, order, actions: toolbarActions };
+  }, [toolbarActions, isFullscreen, showTitleToggle]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`ofv-preview-scope relative w-full overflow-hidden bg-background ${showTitleToggle && !showTitle ? "ofv-preview-title-hidden" : ""} ${className ?? ""}`}
+      style={{ height }}
+    >
+      <FileViewer
+        file={file}
+        fileName={fileName}
+        width="100%"
+        height="100%"
+        fit="contain"
+        toolbar={toolbar}
+        theme={themeProp}
+        plugins={fileViewerPlugins}
+      />
+    </div>
+  );
+}

package/src/components/story/relations/format.ts

@@ -0,0 +1,120 @@
+// 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 {
+  BookOpen,
+  File,
+  FileArchive,
+  FileText,
+  Film,
+  FolderArchive,
+  Image as ImageIcon,
+  Music,
+  type LucideIcon,
+} from "lucide-react";
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  return `${(bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+
+/** mimeType → 文件类型图标（弹窗列表与合并面板卡片共用） */
+export function getFileTypeIcon(mimeType: string, fileName?: string): LucideIcon {
+  const effective = inferMimeType(fileName ?? "", mimeType);
+  if (effective.startsWith("image/")) return ImageIcon;
+  if (effective.startsWith("video/")) return Film;
+  if (effective.startsWith("audio/")) return Music;
+  if (effective === "application/pdf") return FileText;
+  if (isEbookMimeType(effective)) return BookOpen;
+  if (effective.includes("zip") || effective.includes("rar") || effective.includes("7z")) {
+    return FileArchive;
+  }
+  if (effective.includes("tar") || effective.includes("gz")) return FolderArchive;
+  if (effective.startsWith("text/") || effective.includes("json")) return FileText;
+  return File;
+}
+
+/** 判断是否为电子书 MIME 类型 */
+export function isEbookMimeType(mimeType: string): boolean {
+  return (
+    mimeType === "application/epub+zip" ||
+    mimeType === "application/epub" ||
+    mimeType === "application/x-mobipocket-ebook" ||
+    mimeType === "application/vnd.amazon.epub"
+  );
+}
+
+/** mimeType → 文件类型标签（中文，用于附件列表展示） */
+export function getMimeTypeLabel(mimeType: string, fileName?: string): string {
+  const effective = inferMimeType(fileName ?? "", mimeType);
+  if (effective.startsWith("image/")) return "图片";
+  if (effective.startsWith("video/")) return "视频";
+  if (effective.startsWith("audio/")) return "音频";
+  if (effective === "application/pdf") return "PDF";
+  if (isEbookMimeType(effective)) return "电子书";
+  if (effective.includes("zip") || effective.includes("rar") || effective.includes("7z")) return "压缩包";
+  if (effective.includes("tar") || effective.includes("gz")) return "压缩包";
+  if (effective.startsWith("text/") || effective.includes("json")) return "文本";
+  if (effective.includes("word") || effective.includes("document")) return "Word";
+  if (effective.includes("sheet") || effective.includes("excel") || effective.includes("spreadsheet")) return "表格";
+  if (effective.includes("presentation") || effective.includes("powerpoint")) return "演示";
+  return "未识别文件";
+}
+
+/** 扩展名 → MIME 类型映射（补充浏览器无法识别的格式） */
+const EXTENSION_MIME_MAP: Record<string, string> = {
+  ".epub": "application/epub+zip",
+  ".mobi": "application/x-mobipocket-ebook",
+  ".azw3": "application/vnd.amazon.epub",
+};
+
+/** 根据文件名推断 MIME 类型（浏览器缺失时兜底） */
+export function inferMimeType(fileName: string, fileMimeType: string): string {
+  if (fileMimeType && !fileMimeType.startsWith("application/octet-stream")) {
+    return fileMimeType;
+  }
+  const ext = fileName.slice(fileName.toLowerCase().lastIndexOf(".")).toLowerCase();
+  return EXTENSION_MIME_MAP[ext] ?? fileMimeType;
+}
+
+/** 链接 favicon URL（Google 服务，失败时 UI 回退 Link 图标） */
+export function getFaviconUrl(url: string): string | null {
+  try {
+    const host = new URL(url).hostname;
+    return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=32`;
+  } catch {
+    return null;
+  }
+}
+
+/** 从 URL 自动提取标题（用于用户未填写链接标题时的兜底显示） */
+export function extractLinkTitle(url: string): string {
+  try {
+    const { hostname, pathname } = new URL(url);
+    const cleanHost = hostname.replace(/^www\./, "");
+    if (!pathname || pathname === "/" || pathname === "") return cleanHost;
+    // 取最后一段路径作为标题，去除扩展名
+    const segments = pathname.split("/").filter(Boolean);
+    const last = segments[segments.length - 1] ?? "";
+    const name = last.replace(/\.\w+$/, "").replace(/[-_]/g, " ");
+    return name || cleanHost;
+  } catch {
+    return url;
+  }
+}

package/src/{config/sidebar-notifications.ts → components/story/relations/general-groups.ts}

@@ -15,36 +15,18 @@
 // 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 { getBoringAvatarUrl } from "@/lib/avatar";
+import type { TFunction } from "i18next";
 
-export type Notification = {
-  id: string;
-  avatar: string;
-  fallback: string;
-  text: string;
-  time: string;
+const GROUP_I18N_KEYS: Record<string, string> = {
+  legal: "knowledgeDialog.groupLegal",
+  compliance: "knowledgeDialog.groupCompliance",
+  dictionary: "knowledgeDialog.groupDictionary",
+  bookmark: "knowledgeDialog.groupBookmark",
+  summary: "knowledgeDialog.groupSummary",
 };
 
-export const notifications: Notification[] = [
-  {
-    id: "1",
-    avatar: getBoringAvatarUrl("order-1", { size: 40, square: true }),
-    fallback: "OM",
-    text: "New order received.",
-    time: "10m ago",
-  },
-  {
-    id: "2",
-    avatar: getBoringAvatarUrl("server-upgrade", { size: 40, square: true }),
-    fallback: "JL",
-    text: "Server upgrade completed.",
-    time: "1h ago",
-  },
-  {
-    id: "3",
-    avatar: getBoringAvatarUrl("new-user- signup", { size: 40, square: true }),
-    fallback: "HH",
-    text: "New user signed up.",
-    time: "2h ago",
-  },
-];
+/** 通用知识库分组 key → i18n 标签（未知 key 原样返回） */
+export function generalGroupLabel(t: TFunction, group: string): string {
+  const key = GROUP_I18N_KEYS[group];
+  return key ? t(key) : group;
+}