@yancyyu/openhermit 1.5.8

package/src/renderer/components/team/editor/EditorImagePreview.tsx

@@ -0,0 +1,138 @@
+/**
+ * Inline image preview for the project editor.
+ *
+ * Loads binary file as base64 data URL via IPC, displays centered image
+ * with checkerboard background for transparency, metadata, and lightbox on click.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { api } from '@renderer/api';
+import { ImageLightbox } from '@renderer/components/team/attachments/ImageLightbox';
+import { Button } from '@renderer/components/ui/button';
+import { useStore } from '@renderer/store';
+import { Loader2 } from 'lucide-react';
+
+import { EditorBinaryPlaceholder } from './EditorBinaryPlaceholder';
+
+interface EditorImagePreviewProps {
+  filePath: string;
+  fileName: string;
+  size: number;
+}
+
+export const EditorImagePreview = ({
+  filePath,
+  fileName,
+  size,
+}: EditorImagePreviewProps): React.ReactElement => {
+  const projectPath = useStore((s) => s.editorProjectPath);
+  const [dataUrl, setDataUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [dimensions, setDimensions] = useState<{ w: number; h: number } | null>(null);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  // Reset state when filePath changes
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional sync on prop change
+    setLoading(true);
+    setError(null);
+    setDataUrl(null);
+    setDimensions(null);
+    setLightboxOpen(false);
+  }, [filePath]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    api.editor
+      .readBinaryPreview(filePath)
+      .then((result) => {
+        if (cancelled) return;
+        setDataUrl(`data:${result.mimeType};base64,${result.base64}`);
+      })
+      .catch((err: Error) => {
+        if (cancelled) return;
+        setError(err.message);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [filePath]);
+
+  const handleImageLoad = useCallback(() => {
+    const img = imgRef.current;
+    if (img) {
+      setDimensions({ w: img.naturalWidth, h: img.naturalHeight });
+    }
+  }, []);
+
+  const handleOpenExternal = useCallback((): void => {
+    api.openPath(filePath, projectPath ?? undefined).catch(console.error);
+  }, [filePath, projectPath]);
+
+  const sizeFormatted =
+    size < 1024
+      ? `${size} B`
+      : size < 1024 * 1024
+        ? `${(size / 1024).toFixed(1)} KB`
+        : `${(size / 1024 / 1024).toFixed(1)} MB`;
+
+  if (loading) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-3 text-text-muted">
+        <Loader2 className="size-8 animate-spin opacity-40" />
+        <p className="text-xs">正在加载预览…</p>
+      </div>
+    );
+  }
+
+  if (error || !dataUrl) {
+    return <EditorBinaryPlaceholder filePath={filePath} fileName={fileName} size={size} />;
+  }
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-4 p-6">
+      <button
+        type="button"
+        className="checkerboard-bg flex max-h-[60vh] max-w-[80%] cursor-zoom-in items-center justify-center overflow-hidden rounded-lg border border-border-subtle p-1"
+        onClick={() => setLightboxOpen(true)}
+        aria-label="打开完整尺寸预览"
+      >
+        <img
+          ref={imgRef}
+          src={dataUrl}
+          alt={fileName}
+          className="max-h-[60vh] object-contain"
+          onLoad={handleImageLoad}
+          draggable={false}
+        />
+      </button>
+
+      <p className="text-xs text-text-muted">
+        {fileName}
+        {dimensions ? ` — ${dimensions.w}×${dimensions.h}` : ''}
+        {` — ${sizeFormatted}`}
+      </p>
+
+      <div className="flex gap-2">
+        <Button variant="outline" size="sm" onClick={handleOpenExternal}>
+          Open in System Viewer
+        </Button>
+      </div>
+
+      <ImageLightbox
+        open={lightboxOpen}
+        onClose={() => setLightboxOpen(false)}
+        src={dataUrl}
+        alt={fileName}
+      />
+    </div>
+  );
+};

package/src/renderer/components/team/editor/EditorSearchPanel.tsx

@@ -0,0 +1,508 @@
+/**
+ * Custom CodeMirror search/replace panel using the project UI Kit.
+ *
+ * Replaces the default CodeMirror search panel with a styled version
+ * that uses our Input, Button, and Tooltip components for consistent
+ * design language across the app.
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import {
+  closeSearchPanel,
+  findNext,
+  findPrevious,
+  getSearchQuery,
+  replaceAll,
+  replaceNext,
+  SearchQuery,
+  setSearchQuery,
+} from '@codemirror/search';
+import { EditorView, type Panel } from '@codemirror/view';
+import { Button } from '@renderer/components/ui/button';
+import { Input } from '@renderer/components/ui/input';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@renderer/components/ui/tooltip';
+import { cn } from '@renderer/lib/utils';
+import {
+  ArrowDown,
+  ArrowUp,
+  CaseSensitive,
+  ChevronDown,
+  ChevronRight,
+  Regex,
+  WholeWord,
+  X,
+} from 'lucide-react';
+
+import type { EditorState } from '@codemirror/state';
+import type { ViewUpdate } from '@codemirror/view';
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const MAX_MATCH_COUNT = 999;
+
+// =============================================================================
+// SearchToggleButton
+// =============================================================================
+
+interface SearchToggleButtonProps {
+  active: boolean;
+  onClick: () => void;
+  tooltip: string;
+  shortcut?: string;
+  children: React.ReactNode;
+}
+
+const SearchToggleButton = React.memo(function SearchToggleButton({
+  active,
+  onClick,
+  tooltip,
+  shortcut,
+  children,
+}: SearchToggleButtonProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            'flex size-[22px] items-center justify-center rounded transition-colors',
+            active
+              ? 'bg-blue-500/20 text-blue-400'
+              : 'text-[var(--color-text-muted)] hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text-secondary)]'
+          )}
+          onClick={onClick}
+          tabIndex={-1}
+        >
+          {children}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <span>{tooltip}</span>
+        {shortcut && <span className="ml-1.5 text-[var(--color-text-muted)]">{shortcut}</span>}
+      </TooltipContent>
+    </Tooltip>
+  );
+});
+
+// =============================================================================
+// Match counter
+// =============================================================================
+
+function countMatches(query: SearchQuery, state: EditorState): number {
+  if (!query.valid || !query.search) return 0;
+
+  try {
+    const cursor = query.getCursor(state);
+    let count = 0;
+    while (!cursor.next().done) {
+      count++;
+      if (count > MAX_MATCH_COUNT) return -1;
+    }
+    return count;
+  } catch {
+    return 0;
+  }
+}
+
+// =============================================================================
+// EditorSearchPanelContent
+// =============================================================================
+
+interface EditorSearchPanelContentProps {
+  view: EditorView;
+  initialSearch: string;
+  initialReplace: string;
+  initialCaseSensitive: boolean;
+  initialRegexp: boolean;
+  initialWholeWord: boolean;
+  registerUpdateNotifier: (cb: () => void) => void;
+}
+
+const EditorSearchPanelContent = ({
+  view,
+  initialSearch,
+  initialReplace,
+  initialCaseSensitive,
+  initialRegexp,
+  initialWholeWord,
+  registerUpdateNotifier,
+}: EditorSearchPanelContentProps) => {
+  const [searchText, setSearchText] = useState(initialSearch);
+  const [replaceText, setReplaceText] = useState(initialReplace);
+  const [caseSensitive, setCaseSensitive] = useState(initialCaseSensitive);
+  const [useRegexp, setUseRegexp] = useState(initialRegexp);
+  const [wholeWord, setWholeWord] = useState(initialWholeWord);
+  const [showReplace, setShowReplace] = useState(false);
+  const [updateTick, setUpdateTick] = useState(0);
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // Focus search input on mount
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      searchInputRef.current?.focus();
+      searchInputRef.current?.select();
+    });
+  }, []);
+
+  // Build query object (memoized)
+  const query = useMemo(
+    () =>
+      new SearchQuery({
+        search: searchText,
+        replace: replaceText,
+        caseSensitive,
+        regexp: useRegexp,
+        wholeWord,
+      }),
+    [searchText, replaceText, caseSensitive, useRegexp, wholeWord]
+  );
+
+  // Dispatch search query to CodeMirror for highlighting
+  useEffect(() => {
+    view.dispatch({ effects: setSearchQuery.of(query) });
+  }, [query, view]);
+
+  // Register for editor updates (doc changes → recount via updateTick)
+  useEffect(() => {
+    registerUpdateNotifier(() => setUpdateTick((t) => t + 1));
+  }, [registerUpdateNotifier]);
+
+  // Match count — derived from query + document state
+  // updateTick triggers recount on document changes (e.g. after replace)
+  const matchCount = useMemo(
+    () => countMatches(query, view.state),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- updateTick is a proxy dep for view.state changes
+    [query, view, updateTick]
+  );
+
+  // Navigation
+  const handleFindNext = useCallback(() => {
+    findNext(view);
+  }, [view]);
+
+  const handleFindPrev = useCallback(() => {
+    findPrevious(view);
+  }, [view]);
+
+  // Replace
+  const handleReplaceNext = useCallback(() => {
+    replaceNext(view);
+  }, [view]);
+
+  const handleReplaceAll = useCallback(() => {
+    replaceAll(view);
+  }, [view]);
+
+  // Close
+  const handleClose = useCallback(() => {
+    closeSearchPanel(view);
+    view.focus();
+  }, [view]);
+
+  // Keyboard handlers
+  const handleSearchKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        handleClose();
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (e.shiftKey) {
+          findPrevious(view);
+        } else {
+          findNext(view);
+        }
+      }
+    },
+    [view, handleClose]
+  );
+
+  const handleReplaceKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        handleClose();
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        handleReplaceNext();
+      }
+    },
+    [handleClose, handleReplaceNext]
+  );
+
+  // Match count display
+  const matchCountText = searchText
+    ? matchCount === -1
+      ? `${MAX_MATCH_COUNT}+`
+      : matchCount === 0
+        ? '无结果'
+        : `${matchCount} found`
+    : '';
+
+  return (
+    <TooltipProvider delayDuration={400}>
+      <div className="flex flex-col gap-1 px-2 py-1.5">
+        {/* Search row */}
+        <div className="flex items-center gap-1">
+          {/* Toggle replace visibility */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                className="flex h-[22px] w-5 items-center justify-center rounded text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-text-secondary)]"
+                onClick={() => setShowReplace((prev) => !prev)}
+                tabIndex={-1}
+              >
+                {showReplace ? (
+                  <ChevronDown className="size-3.5" />
+                ) : (
+                  <ChevronRight className="size-3.5" />
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">显示/隐藏替换</TooltipContent>
+          </Tooltip>
+
+          {/* Search input */}
+          <Input
+            ref={searchInputRef}
+            className="h-[26px] min-w-[180px] flex-1 rounded border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs"
+            placeholder="搜索"
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+            onKeyDown={handleSearchKeyDown}
+            spellCheck={false}
+          />
+
+          {/* Toggle buttons */}
+          <SearchToggleButton
+            active={caseSensitive}
+            onClick={() => setCaseSensitive((prev) => !prev)}
+            tooltip="区分大小写"
+          >
+            <CaseSensitive className="size-[14px]" />
+          </SearchToggleButton>
+
+          <SearchToggleButton
+            active={wholeWord}
+            onClick={() => setWholeWord((prev) => !prev)}
+            tooltip="全词匹配"
+          >
+            <WholeWord className="size-[14px]" />
+          </SearchToggleButton>
+
+          <SearchToggleButton
+            active={useRegexp}
+            onClick={() => setUseRegexp((prev) => !prev)}
+            tooltip="使用正则表达式"
+          >
+            <Regex className="size-[14px]" />
+          </SearchToggleButton>
+
+          {/* Separator */}
+          <div className="mx-0.5 h-4 w-px bg-[var(--color-border)]" />
+
+          {/* Match count */}
+          {matchCountText && (
+            <span
+              className={cn(
+                'min-w-[60px] whitespace-nowrap text-center text-xs tabular-nums',
+                matchCount === 0 && searchText ? 'text-red-400' : 'text-[var(--color-text-muted)]'
+              )}
+            >
+              {matchCountText}
+            </span>
+          )}
+
+          {/* Navigation */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-[22px] text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+                onClick={handleFindPrev}
+                disabled={matchCount === 0}
+                tabIndex={-1}
+              >
+                <ArrowUp className="size-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              上一个匹配 <span className="text-[var(--color-text-muted)]">⇧Enter</span>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-[22px] text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+                onClick={handleFindNext}
+                disabled={matchCount === 0}
+                tabIndex={-1}
+              >
+                <ArrowDown className="size-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              下一个匹配 <span className="text-[var(--color-text-muted)]">Enter</span>
+            </TooltipContent>
+          </Tooltip>
+
+          {/* Close */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-[22px] text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+                onClick={handleClose}
+                tabIndex={-1}
+              >
+                <X className="size-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              关闭 <span className="text-[var(--color-text-muted)]">Esc</span>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
+        {/* Replace row */}
+        {showReplace && (
+          <div className="flex items-center gap-1">
+            {/* Spacer to align with search input */}
+            <div className="w-5 shrink-0" />
+
+            <Input
+              className="h-[26px] min-w-[180px] flex-1 rounded border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs"
+              placeholder="替换"
+              value={replaceText}
+              onChange={(e) => setReplaceText(e.target.value)}
+              onKeyDown={handleReplaceKeyDown}
+              spellCheck={false}
+            />
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-[22px] px-2 text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+                  onClick={handleReplaceNext}
+                  disabled={matchCount === 0}
+                  tabIndex={-1}
+                >
+                  替换
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">替换下一个</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-[22px] px-2 text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+                  onClick={handleReplaceAll}
+                  disabled={matchCount === 0}
+                  tabIndex={-1}
+                >
+                  全部
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">全部替换</TooltipContent>
+            </Tooltip>
+          </div>
+        )}
+      </div>
+    </TooltipProvider>
+  );
+};
+
+// =============================================================================
+// Panel factory for CodeMirror
+// =============================================================================
+
+export function createSearchPanel(view: EditorView): Panel {
+  const dom = document.createElement('div');
+
+  const root = createRoot(dom);
+
+  // Get initial values
+  const existingQuery = getSearchQuery(view.state);
+  const sel = view.state.selection.main;
+  const selText = sel.empty ? '' : view.state.sliceDoc(sel.from, sel.to);
+  const initialSearch = selText && !selText.includes('\n') ? selText : existingQuery.search;
+
+  // Mutable ref for update notifications from CodeMirror
+  let notifyUpdate: (() => void) | null = null;
+
+  root.render(
+    <EditorSearchPanelContent
+      view={view}
+      initialSearch={initialSearch}
+      initialReplace={existingQuery.replace}
+      initialCaseSensitive={existingQuery.caseSensitive}
+      initialRegexp={existingQuery.regexp}
+      initialWholeWord={existingQuery.wholeWord}
+      registerUpdateNotifier={(cb) => {
+        notifyUpdate = cb;
+      }}
+    />
+  );
+
+  return {
+    dom,
+    top: true,
+    update(update: ViewUpdate) {
+      if (update.docChanged) {
+        notifyUpdate?.();
+      }
+    },
+    destroy() {
+      notifyUpdate = null;
+      root.unmount();
+    },
+  };
+}
+
+// =============================================================================
+// Theme: panel container + search match highlighting
+// =============================================================================
+
+export const editorSearchPanelTheme = EditorView.theme({
+  '.cm-panels': {
+    backgroundColor: 'var(--color-surface)',
+    color: 'var(--color-text)',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  },
+  '.cm-panels-top': {
+    borderBottom: '1px solid var(--color-border)',
+  },
+  '.cm-panels-bottom': {
+    borderTop: '1px solid var(--color-border)',
+  },
+  // Search match highlighting in editor content
+  '.cm-searchMatch': {
+    backgroundColor: 'var(--highlight-bg-inactive)',
+    borderRadius: '2px',
+  },
+  '.cm-searchMatch-selected': {
+    backgroundColor: 'var(--highlight-bg) !important',
+    borderRadius: '2px',
+  },
+});