react-extjs 0.0.1

package/src/components/ImageOrganizer.tsx

@@ -0,0 +1,984 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { TreePanel, type TreeNodeData, type TreePanelHandle } from './Tree';
+import { TabPanel, type TabPanelHandle } from './TabPanel';
+import { Button } from './Button';
+import { BorderLayout } from './BorderLayout';
+import { Toolbar } from './Toolbar';
+import { Slider } from './Slider';
+import { Menu, type MenuItem } from './Menu';
+import { ComboBox } from './Form';
+import {
+  type ImgItem,
+  type AlbumModel,
+  type TagModel,
+  type ImageOrganizerService,
+  createMockImageOrganizerService,
+} from './ImageOrganizerService';
+
+// 类型从服务层统一导出，避免重复定义（单一来源）
+export type { ImgItem, AlbumModel, TagModel } from './ImageOrganizerService';
+
+export interface ImageOrganizerProps {
+  /** 初始相册（分组关系），默认空数组。仅当未显式传入 `service` 时用于播种内存 mock */
+  albums?: AlbumModel[];
+  /** 初始图片（All Photos 网格），默认空数组。同上，仅播种用 */
+  images?: ImgItem[];
+  /** 服务端实现：组件所有数据操作均经由此接口（内存 mock 或可替换为真实 HTTP 后端）。
+   *  不传则内部用 `albums`/`images` 播种一个 MockImageOrganizerService。 */
+  service?: ImageOrganizerService;
+  width?: number;
+  height?: number;
+  /** 新建相册按钮文案，默认 'Add Album' */
+  newAlbumText?: string;
+  /** 新建相册默认名前缀，默认 'Album ' */
+  albumNamePrefix?: string;
+  /** 上传按钮文案，默认 'Upload'（等价原始 SWFUpload 选择文件桩） */
+  uploadText?: string;
+  /** 相册分组变化回调（增/删/改名/拖入图片后） */
+  onAlbumsChange?: (albums: AlbumModel[]) => void;
+  /** 图片集合变化回调（上传/删除/改名后） */
+  onImagesChange?: (images: ImgItem[]) => void;
+  /** 图片被拖入某相册时回调（等价 ImageDragZone → TreeDropZone 插入叶子的代理回调）；多选批量各回调一次 */
+  onImageDropped?: (image: ImgItem, albumId: string) => void;
+  /** 图片上传后回调（等价 SWFUpload 上传完成写入 store） */
+  onImageUploaded?: (image: ImgItem) => void;
+  /** 图片改名后回调（等价 LabelEditor 提交 filename） */
+  onImageRenamed?: (image: ImgItem, oldName: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface ImageOrganizerHandle {
+  /** 新增相册（自动命名并进入内联改名态），返回新节点 id */
+  addAlbum: (text?: string) => string;
+  /** 新增一张图片到 All Photos */
+  addImage: (image: ImgItem) => void;
+  /** 以本地文件列表触发上传桩（等价 swfu.selectFiles + 上传完成） */
+  uploadFiles: (files: FileList | File[]) => void;
+  /** 读取当前相册分组（实时快照） */
+  getAlbums: () => AlbumModel[];
+  /** 读取当前图片列表（实时快照） */
+  getImages: () => ImgItem[];
+}
+
+const IO_IMAGE_LIST_MIME = 'application/x-organizer-image-list';
+
+const FS = (n: number | undefined): string => {
+  if (!n && n !== 0) return '—';
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+};
+
+/** 自包含 SVG 缩略图 data-uri（等价原始 DataView 的 <img> 资源） */
+const makeThumb = (color: string, label: string, w = 80, h = 60): string => {
+  const svg =
+    `<svg xmlns='http://www.w3.org/2000/svg' width='${w}' height='${h}'>` +
+    `<rect width='${w}' height='${h}' fill='${color}'/>` +
+    `<text x='${w / 2}' y='${h / 2 + 4}' font-size='11' fill='#333' text-anchor='middle' ` +
+    `font-family='sans-serif'>${label.replace(/[<&]/g, '')}</text></svg>`;
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+};
+
+const thumbUrl = (img: ImgItem): string =>
+  img.url ?? makeThumb(img.color ?? '#dddddd', img.name);
+
+const leafId = (albumId: string, imgId: string) => `${albumId}::${imgId}`;
+const parseLeaf = (id: string): string | null => {
+  const i = id.indexOf('::');
+  return i >= 0 ? id.slice(i + 2) : null;
+};
+
+/** AlbumModel[] → 相册树节点（相册为 folder 节点，子为图片叶子，leaf id 编码 albumId::imgId） */
+const albumsToNodes = (albums: AlbumModel[], imgMap: Map<string, ImgItem>): TreeNodeData[] =>
+  albums.map((a) => ({
+    id: a.id,
+    text: a.name,
+    cls: 'album-node',
+    expandable: true,
+    children: a.imageIds.map((imgId) => {
+      const img = imgMap.get(imgId);
+      return {
+        id: leafId(a.id, imgId),
+        text: img?.name ?? imgId,
+        icon: img ? thumbUrl(img) : undefined,
+        cls: 'image-node',
+      };
+    }),
+  }));
+
+/** 相册树节点 → AlbumModel[]（从图片叶子 id 还原 imageIds） */
+const nodesToAlbums = (nodes: TreeNodeData[]): AlbumModel[] =>
+  nodes
+    .filter((n) => n.cls === 'album-node' || n.children?.length)
+    .map((n) => ({
+      id: n.id,
+      name: n.text,
+      imageIds: (n.children ?? [])
+        .filter((c) => c.cls === 'image-node')
+        .map((c) => parseLeaf(c.id))
+        .filter((x): x is string => Boolean(x)),
+    }));
+
+// ============================ 缩略图墙（ImageThumbPanel） ============================
+interface ThumbPanelProps {
+  images: ImgItem[];
+  /** 可选：标签下拉候选项（来自 service.getTags）；不传则按当前图片推导 */
+  tagOptions?: string[];
+  onOpenImage: (img: ImgItem) => void;
+  onRenameImage: (img: ImgItem, oldName: string) => void;
+  onRemoveImage: (img: ImgItem) => void;
+}
+
+const ThumbPanel: React.FC<ThumbPanelProps> = ({ images, tagOptions, onOpenImage, onRenameImage, onRemoveImage }) => {
+  const [selectedImgs, setSelectedImgs] = useState<Set<string>>(new Set());
+  const [selBox, setSelBox] = useState<{ x1: number; y1: number; x2: number; y2: number } | null>(null);
+  const [thumbH, setThumbH] = useState(80);
+  const [tagFilter, setTagFilter] = useState('all');
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingVal, setEditingVal] = useState('');
+  const [ctx, setCtx] = useState<{ x: number; y: number; img: ImgItem | null } | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const allTags = useMemo(() => {
+    const s = new Set<string>();
+    images.forEach((i) => (i.tags ?? []).forEach((t) => s.add(t)));
+    return Array.from(s);
+  }, [images]);
+
+  const comboOptions = tagOptions && tagOptions.length ? tagOptions : allTags;
+
+  const shown = useMemo(() => {
+    if (tagFilter === 'all') return images;
+    return images.filter((i) => (i.tags ?? []).includes(tagFilter));
+  }, [images, tagFilter]);
+
+  const thumbW = Math.round(thumbH * 4 / 3);
+
+  // 橡皮筋框选（等价 DataView + DragSelector）
+  const onMouseDown = (e: React.MouseEvent) => {
+    if (e.button !== 0) return;
+    if ((e.target as HTMLElement).closest('.io-thumb-wrap')) return;
+    const cont = scrollRef.current;
+    if (!cont) return;
+    const rect = cont.getBoundingClientRect();
+    const sx = e.clientX - rect.left + cont.scrollLeft;
+    const sy = e.clientY - rect.top + cont.scrollTop;
+    const additive = e.ctrlKey || e.metaKey;
+    const base = additive ? new Set(selectedImgs) : new Set<string>();
+    setSelectedImgs(base);
+    setSelBox({ x1: sx, y1: sy, x2: sx, y2: sy });
+    const onMove = (ev: MouseEvent) => {
+      const r = cont.getBoundingClientRect();
+      const cx = ev.clientX - r.left + cont.scrollLeft;
+      const cy = ev.clientY - r.top + cont.scrollTop;
+      setSelBox({ x1: sx, y1: sy, x2: cx, y2: cy });
+      const box = {
+        left: Math.min(sx, cx),
+        top: Math.min(sy, cy),
+        right: Math.max(sx, cx),
+        bottom: Math.max(sy, cy),
+      };
+      const sel = new Set(base);
+      cont.querySelectorAll<HTMLElement>('.io-thumb-wrap').forEach((w) => {
+        const wr = w.getBoundingClientRect();
+        const wl = wr.left - r.left + cont.scrollLeft;
+        const wt = wr.top - r.top + cont.scrollTop;
+        const wright = wl + wr.width;
+        const wb = wt + wr.height;
+        if (wl < box.right && wright > box.left && wt < box.bottom && wb > box.top) {
+          const id = w.getAttribute('data-img-id');
+          if (id) sel.add(id);
+        }
+      });
+      setSelectedImgs(sel);
+    };
+    const onUp = () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+      setSelBox(null);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  };
+
+  const buildDragImage = (count: number): HTMLElement => {
+    // 复用原版 .x-dd-drag-ghost（xtheme 已定义背景/边框/文字色），不写死颜色
+    const el = document.createElement('div');
+    el.className = 'x-dd-drag-ghost';
+    el.style.cssText = 'position:absolute;top:-1000px;left:-1000px;';
+    el.textContent = `${count} image${count > 1 ? 's' : ''}`;
+    document.body.appendChild(el);
+    return el;
+  };
+
+  const ctxItems: MenuItem[] = ctx
+    ? [
+        { text: 'View in Tab', handler: () => { if (ctx.img) onOpenImage(ctx.img); setCtx(null); } },
+        { text: 'Remove', handler: () => { if (ctx.img) onRemoveImage(ctx.img); setCtx(null); } },
+        { separator: true, text: '' },
+        { text: 'Close', handler: () => setCtx(null) },
+      ]
+    : [];
+
+  if (shown.length === 0) {
+    return (
+      <div style={{ flex: 1, overflow: 'auto', position: 'relative' }}>
+        <div className="images-view" style={{ padding: 10, fontSize: 12 }}>
+          No images to display
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="images-view" style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+      {/* bbar：Tags 过滤 + 尺寸滑块（等价原始 ImageThumbPanel 的 bbar） */}
+      <div className="x-toolbar" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 6px' }}>
+        <span style={{ fontSize: 11 }}>Tags:</span>
+        <ComboBox
+          data={[{ value: 'all', text: 'All Tags' }, ...comboOptions.map((t) => ({ value: t, text: t }))]}
+          value={tagFilter}
+          width={130}
+          onChange={(v) => setTagFilter(v)}
+        />
+        <div style={{ flex: 1 }} />
+        <span style={{ fontSize: 11 }}>Size:</span>
+        <Slider
+          minValue={20}
+          maxValue={120}
+          value={thumbH}
+          width={120}
+          onChange={(v) => setThumbH(v)}
+          onChangeComplete={(v) => setThumbH(v)}
+          getTipText={(v) => `Height: <b>${v}</b>px`}
+        />
+      </div>
+      <div
+        ref={scrollRef}
+        data-org="img-scroll"
+        style={{ flex: 1, overflow: 'auto', padding: 8, position: 'relative' }}
+        onMouseDown={onMouseDown}
+        onContextMenu={(e) => {
+          const wrap = (e.target as HTMLElement).closest('.io-thumb-wrap');
+          const id = wrap?.getAttribute('data-img-id');
+          const img = id ? shown.find((i) => i.id === id) ?? null : null;
+          setCtx({ x: e.clientX, y: e.clientY, img });
+        }}
+      >
+        <div style={{ overflow: 'hidden', position: 'relative' }}>
+          {shown.map((img) => {
+            const sel = selectedImgs.has(img.id);
+            const editing = editingId === img.id;
+            return (
+              <div
+                key={img.id}
+                className={['io-thumb-wrap', sel ? 'x-list-selected' : ''].filter(Boolean).join(' ')}
+                data-img-id={img.id}
+                draggable
+                onDragStart={(e) => {
+                  let dragged = selectedImgs;
+                  if (!dragged.has(img.id)) {
+                    dragged = new Set([img.id]);
+                    setSelectedImgs(dragged);
+                  }
+                  const ids = Array.from(dragged);
+                  e.dataTransfer.setData(IO_IMAGE_LIST_MIME, JSON.stringify(ids));
+                  e.dataTransfer.setData('text/plain', img.id);
+                  e.dataTransfer.effectAllowed = 'copy';
+                  const ghost = buildDragImage(ids.length);
+                  try { e.dataTransfer.setDragImage(ghost, 0, 0); } catch { /* ignore */ }
+                  setTimeout(() => ghost.remove(), 0);
+                }}
+                onClick={(e) => {
+                  if (e.ctrlKey || e.metaKey) {
+                    setSelectedImgs((prev) => {
+                      const n = new Set(prev);
+                      if (n.has(img.id)) n.delete(img.id); else n.add(img.id);
+                      return n;
+                    });
+                  } else setSelectedImgs(new Set([img.id]));
+                }}
+                onDoubleClick={() => onOpenImage(img)}
+                style={{
+                  float: 'left',
+                  margin: 4,
+                  padding: 5,
+                  width: thumbW + 12,
+                  textAlign: 'center',
+                  cursor: 'grab',
+                }}
+              >
+                <div className="thumb" style={{ width: thumbW, height: thumbH, margin: '0 auto 3px' }}>
+                  <img
+                    className="thumb-img"
+                    src={thumbUrl(img)}
+                    alt={img.name}
+                    draggable={false}
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      boxSizing: 'border-box',
+                      display: 'block',
+                    }}
+                  />
+                </div>
+                {editing ? (
+                  <input
+                    autoFocus
+                    value={editingVal}
+                    onChange={(e) => setEditingVal(e.target.value)}
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onBlur={() => {
+                      const old = img.name;
+                      setEditingId(null);
+                      if (editingVal && editingVal.trim() && editingVal.trim() !== old) {
+                        onRenameImage({ ...img, name: editingVal.trim() }, old);
+                      }
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') (e.target as HTMLInputElement).blur();
+                      else if (e.key === 'Escape') setEditingId(null);
+                    }}
+                    style={{ width: '100%', fontSize: 11, boxSizing: 'border-box' }}
+                  />
+                ) : (
+                  <span
+                    className="x-editable"
+                    onDoubleClick={(e) => {
+                      e.stopPropagation();
+                      setEditingId(img.id);
+                      setEditingVal(img.name);
+                    }}
+                    style={{
+                      display: 'block',
+                      fontSize: 11,
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {img.name}
+                  </span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+        {selBox && (
+          <div
+            className="x-view-selector"
+            style={{
+              position: 'absolute',
+              zIndex: 5,
+              pointerEvents: 'none',
+              left: Math.min(selBox.x1, selBox.x2),
+              top: Math.min(selBox.y1, selBox.y2),
+              width: Math.abs(selBox.x2 - selBox.x1),
+              height: Math.abs(selBox.y2 - selBox.y1),
+            }}
+          />
+        )}
+      </div>
+      {ctx && createPortal(
+        <div style={{ position: 'absolute', left: ctx.x, top: ctx.y, zIndex: 15000 }}>
+          <Menu items={ctxItems} />
+        </div>,
+        document.body,
+      )}
+    </div>
+  );
+};
+
+// ============================ 相册画廊（AlbumsPanel） ============================
+const AlbumsView: React.FC<{
+  stateRef: React.MutableRefObject<{ images: ImgItem[]; albums: AlbumModel[] }>;
+  onOpenAlbum: (albumId: string) => void;
+}> = ({ stateRef, onOpenAlbum }) => {
+  const { albums, images } = stateRef.current;
+  const imgMap = useMemo(() => new Map(images.map((i) => [i.id, i])), [images]);
+  const cards = albums.map((a) => {
+    const cover = (a.coverId && imgMap.get(a.coverId)) || imgMap.get(a.imageIds[0] ?? '') || null;
+    return (
+        <div
+          key={a.id}
+          className="album-wrap x-panel-body"
+          onClick={() => onOpenAlbum(a.id)}
+          style={{
+            borderTopWidth: 1,
+            borderTopStyle: 'solid',
+            margin: '0 8px 12px',
+            cursor: 'pointer',
+            overflow: 'hidden',
+          }}
+        >
+        <div style={{ height: 110, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          {cover ? (
+            <img src={thumbUrl(cover)} alt={a.name} style={{ maxWidth: '100%', maxHeight: '100%', display: 'block' }} />
+          ) : (
+            <span style={{ fontSize: 12 }}>No cover</span>
+          )}
+        </div>
+        <div style={{ padding: '6px 8px' }}>
+          <h3 style={{ margin: 0, fontSize: 13 }}>{a.name}</h3>
+          <div style={{ fontSize: 11 }}>
+            {a.imageIds.length} photo{a.imageIds.length === 1 ? '' : 's'}
+          </div>
+        </div>
+      </div>
+    );
+  });
+  if (cards.length === 0) {
+    return <div style={{ padding: 12, fontSize: 12 }}>No albums yet — click “Add Album”.</div>;
+  }
+  return (
+    <div style={{ flex: 1, overflow: 'auto', padding: '8px 0' }}>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>{cards}</div>
+    </div>
+  );
+};
+
+// ============================ 单图标签页（ImagePanel） ============================
+const ImageView: React.FC<{
+  imgId: string;
+  stateRef: React.MutableRefObject<{ images: ImgItem[]; albums: AlbumModel[] }>;
+  allTags: TagModel[];
+  onAddTag: (imgId: string, tag: string) => void;
+  onRemoveTag: (imgId: string, tag: string) => void;
+}> = ({ imgId, stateRef, allTags, onAddTag, onRemoveTag }) => {
+  const img = stateRef.current.images.find((i) => i.id === imgId);
+  const albums = stateRef.current.albums.filter((a) => a.imageIds.includes(imgId));
+  const [tagInput, setTagInput] = useState('');
+  if (!img) return <div style={{ padding: 12 }}>Image not found.</div>;
+  const tags = img.tags ?? [];
+  return (
+    <div style={{ display: 'flex', height: '100%', minHeight: 0 }}>
+      <div style={{ flex: 1, overflow: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 12 }}>
+            <img
+              src={thumbUrl(img)}
+              alt={img.name}
+              style={{ maxWidth: '100%', maxHeight: '100%' }}
+            />
+      </div>
+      <div className="x-panel-body" style={{ width: 220, borderLeftWidth: 1, borderLeftStyle: 'solid', padding: 10, overflow: 'auto' }}>
+        <h3 className="image-prop-header" style={{ margin: '0 0 4px', fontSize: 12 }}>File Info</h3>
+        <div className="image-prop" style={{ fontSize: 11 }}>Filename: {img.name}</div>
+        <div className="image-prop" style={{ fontSize: 11 }}>Size: {FS(img.size)}</div>
+        <div className="image-prop" style={{ fontSize: 11 }}>
+          Dimensions: {img.width && img.height ? `${img.width} × ${img.height}` : '—'}
+        </div>
+        <h3 className="image-prop-header" style={{ margin: '12px 0 4px', fontSize: 12 }}>Tags</h3>
+        <div style={{ marginBottom: 6 }}>
+          {tags.length ? (
+            tags.map((t) => (
+              <span
+                key={t}
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 4,
+                  fontSize: 11,
+                  padding: '1px 4px',
+                  margin: '0 4px 4px 0',
+                }}
+              >
+                {t}
+                <span
+                  role="button"
+                  title="Remove tag"
+                  onClick={() => onRemoveTag(img.id, t)}
+                  style={{ cursor: 'pointer', fontWeight: 'bold' }}
+                >×</span>
+              </span>
+            ))
+          ) : (
+            <span className="image-prop" style={{ fontSize: 11 }}>—</span>
+          )}
+        </div>
+        <div style={{ display: 'flex', gap: 4 }}>
+          <input
+            value={tagInput}
+            list="io-tag-list"
+            placeholder="add tag"
+            onChange={(e) => setTagInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && tagInput.trim()) { onAddTag(img.id, tagInput.trim()); setTagInput(''); }
+            }}
+            style={{ width: 90, fontSize: 11, boxSizing: 'border-box' }}
+          />
+          <datalist id="io-tag-list">
+            {allTags.map((t) => <option key={t.id} value={t.text} />)}
+          </datalist>
+          <Button
+            text="Add"
+            onClick={() => { if (tagInput.trim()) { onAddTag(img.id, tagInput.trim()); setTagInput(''); } }}
+          />
+        </div>
+        <h3 className="image-prop-header" style={{ margin: '12px 0 4px', fontSize: 12 }}>Album</h3>
+        {albums.length ? (
+          albums.map((a) => (
+            <div key={a.id} className="image-prop" style={{ fontSize: 11 }}>{a.name}</div>
+          ))
+        ) : (
+          <div className="image-prop" style={{ fontSize: 11 }}>—</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// ============================ 主容器 ============================
+export const ImageOrganizer = forwardRef<ImageOrganizerHandle, ImageOrganizerProps>(function ImageOrganizer(
+  {
+    albums: initAlbums = [],
+    images: initImages = [],
+    service: serviceProp,
+    width = 760,
+    height = 480,
+    newAlbumText = 'Add Album',
+    albumNamePrefix = 'Album ',
+    uploadText = 'Upload',
+    onAlbumsChange,
+    onImagesChange,
+    onImageDropped,
+    onImageUploaded,
+    onImageRenamed,
+    className,
+    style,
+  },
+  ref,
+) {
+  // 服务端实例：组件唯一数据出入口。未传则用初始数据播种内存 mock。
+  const serviceRef = useRef<ImageOrganizerService>(
+    serviceProp ?? createMockImageOrganizerService({ albums: initAlbums, images: initImages }),
+  );
+  const svc = serviceRef.current;
+
+  const treeRef = useRef<TreePanelHandle>(null);
+  const tabRef = useRef<TabPanelHandle>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const albumCounter = useRef(0);
+  const [images, setImages] = useState<ImgItem[]>([]);
+  const [albums, setAlbums] = useState<AlbumModel[]>([]);
+  const [tags, setTags] = useState<TagModel[]>([]);
+  const [loading, setLoading] = useState(true);
+  const stateRef = useRef({ images, albums });
+  stateRef.current = { images, albums };
+  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; albumId: string } | null>(null);
+  const dropHLRef = useRef<HTMLElement | null>(null);
+  const openedTabs = useRef<Map<string, string>>(new Map());
+
+  const imgMap = useMemo(() => new Map(images.map((i) => [i.id, i])), [images]);
+
+  // 初始从服务端拉取（等价 Ext.Direct 初始化读 Albums.loadtree / Images.load / Tags.load）。
+  // 此后所有读写都走 service；Tree 仅作为相册结构的视觉载体（视觉 owner），状态经 syncAlbums 回流。
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      const [al, im, tg] = await Promise.all([svc.getAlbums(), svc.getImages(), svc.getTags()]);
+      if (!alive) return;
+      albumCounter.current = al.length;
+      setAlbums(al);
+      setImages(im);
+      setTags(tg);
+      setLoading(false);
+    })().catch((err) => {
+      // 服务端异常不应白屏，至少渲染空壳
+      console.error('[ImageOrganizer] initial load failed:', err);
+      setLoading(false);
+    });
+    return () => { alive = false; };
+  }, [svc]);
+
+  // 仅在数据加载完成后挂载一次相册树，保证节点来自服务端（避免受初始空 state 影响）
+  const initialNodes = useMemo(() => albumsToNodes(albums, imgMap), [albums, imgMap]);
+
+  const syncAlbums = useCallback(() => {
+    const nodes = treeRef.current?.getNodes() ?? [];
+    const next = nodesToAlbums(nodes);
+    setAlbums(next);
+    onAlbumsChange?.(next);
+  }, [onAlbumsChange]);
+
+  const handleNewAlbum = (): string => {
+    albumCounter.current += 1;
+    const id = `album-${Date.now()}-${albumCounter.current}`;
+    const text = `${albumNamePrefix}${albumCounter.current}`;
+    treeRef.current?.appendChild(null, { id, text, cls: 'album-node', expandable: true });
+    svc.createAlbum({ id, name: text }).catch((e) => console.error('[ImageOrganizer] createAlbum failed:', e));
+    requestAnimationFrame(syncAlbums);
+    requestAnimationFrame(() => treeRef.current?.startEdit(id));
+    return id;
+  };
+
+  // ---- 拖图入册（HTML5 drop，等价 onNotifyDrop/addToAlbum） ----
+  const clearDropHL = () => {
+    if (dropHLRef.current) {
+      // 用原版 .x-tree-node-over（xtheme 已定义高亮背景），不写死颜色
+      dropHLRef.current.classList.remove('x-tree-node-over');
+      dropHLRef.current = null;
+    }
+  };
+  const onTreeDragOver = (e: React.DragEvent) => {
+    const el = (e.target as HTMLElement).closest('[data-node-id]') as HTMLElement | null;
+    if (!el) return;
+    e.preventDefault();
+    if (dropHLRef.current !== el) {
+      clearDropHL();
+      el.classList.add('x-tree-node-over');
+      dropHLRef.current = el;
+    }
+  };
+  const onTreeDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    const el = (e.target as HTMLElement).closest('[data-node-id]') as HTMLElement | null;
+    clearDropHL();
+    if (!el) return;
+    const albumId = el.getAttribute('data-node-id')!;
+    let ids: string[] = [];
+    const raw = e.dataTransfer.getData(IO_IMAGE_LIST_MIME);
+    if (raw) {
+      try { ids = JSON.parse(raw); } catch { ids = []; }
+    }
+    if (!Array.isArray(ids) || ids.length === 0) {
+      const single = e.dataTransfer.getData('text/plain');
+      if (single) ids = [single];
+    }
+    const imgs = ids.map((id) => imgMap.get(id)).filter((x): x is ImgItem => Boolean(x));
+    if (imgs.length === 0) return;
+    // 幂等：跳过已在该相册内的图片，避免重复 leaf key（等价原始 addToAlbum 去重）
+    const existing = new Set(
+      (treeRef.current?.getNode(albumId)?.children ?? [])
+        .map((c) => parseLeaf(c.id))
+        .filter((x): x is string => Boolean(x)),
+    );
+    const fresh = imgs.filter((img) => !existing.has(img.id));
+    if (fresh.length === 0) return;
+    fresh.forEach((img) => {
+      treeRef.current?.appendChild(albumId, {
+        id: leafId(albumId, img.id),
+        text: img.name,
+        icon: thumbUrl(img),
+        cls: 'image-node',
+      });
+      onImageDropped?.(img, albumId);
+    });
+    requestAnimationFrame(syncAlbums);
+    svc.addImagesToAlbum(fresh.map((i) => i.id), albumId)
+      .catch((err) => console.error('[ImageOrganizer] addImagesToAlbum failed:', err));
+  };
+
+  // ---- 相册右键菜单（Remove / Rename） ----
+  const ctxItems: MenuItem[] = ctxMenu
+    ? [
+        { text: 'Rename', handler: () => { treeRef.current?.startEdit(ctxMenu.albumId); setCtxMenu(null); } },
+        {
+          text: 'Remove',
+          handler: () => {
+            treeRef.current?.removeNode(ctxMenu.albumId);
+            svc.deleteAlbum(ctxMenu.albumId)
+              .catch((err) => console.error('[ImageOrganizer] deleteAlbum failed:', err));
+            requestAnimationFrame(syncAlbums);
+            setCtxMenu(null);
+          },
+        },
+        { separator: true, text: '' },
+        { text: 'Close', handler: () => setCtxMenu(null) },
+      ]
+    : [];
+
+  // ---- 打开相册过滤 Tab ----
+  const openAlbumTab = (albumId: string) => {
+    const logical = `album:${albumId}`;
+    const existing = openedTabs.current.get(logical);
+    if (existing) { tabRef.current?.activate(existing); return; }
+    const a = albums.find((x) => x.id === albumId);
+    const key = tabRef.current?.add(
+      {
+        id: `tab-${logical}`,
+        title: a?.name ?? 'Album',
+        closable: true,
+        content: (
+          <AlbumTabContent
+            albumId={albumId}
+            stateRef={stateRef}
+            allTags={tags}
+            onOpenImage={openImageTab}
+            onRenameImage={renameImage}
+            onRemoveImage={removeImage}
+          />
+        ),
+      },
+      `tab-${logical}`,
+      true,
+    );
+    if (key) openedTabs.current.set(logical, key);
+  };
+
+  // ---- 打开单图 Tab ----
+  const openImageTab = (img: ImgItem) => {
+    const logical = `img:${img.id}`;
+    const existing = openedTabs.current.get(logical);
+    if (existing) { tabRef.current?.activate(existing); return; }
+    const key = tabRef.current?.add(
+      {
+        id: `tab-${logical}`,
+        title: img.name,
+        closable: true,
+        content: <ImageView imgId={img.id} stateRef={stateRef} allTags={tags} onAddTag={addTag} onRemoveTag={removeTag} />,
+      },
+      `tab-${logical}`,
+      true,
+    );
+    if (key) openedTabs.current.set(logical, key);
+  };
+
+  const renameImage = (img: ImgItem, oldName: string) => {
+    setImages((prev) => prev.map((i) => (i.id === img.id ? img : i)));
+    svc.renameImage(img.id, img.name)
+      .catch((err) => console.error('[ImageOrganizer] renameImage failed:', err));
+    onImageRenamed?.(img, oldName);
+    onImagesChange?.(stateRef.current.images);
+  };
+
+  const removeImage = (img: ImgItem) => {
+    // 先从各相册树节点摘除该图片叶子，再删本体
+    const myAlbums = albums.filter((a) => a.imageIds.includes(img.id));
+    myAlbums.forEach((a) => treeRef.current?.removeNode(leafId(a.id, img.id)));
+    setImages((prev) => prev.filter((i) => i.id !== img.id));
+    requestAnimationFrame(syncAlbums);
+    svc.deleteImages([img.id])
+      .catch((err) => console.error('[ImageOrganizer] deleteImages failed:', err));
+    onImagesChange?.(stateRef.current.images);
+  };
+
+  const addTag = (imgId: string, tag: string) => {
+    svc.tagImage([imgId], tag)
+      .then(() => svc.getTags())
+      .then(setTags)
+      .catch((err) => console.error('[ImageOrganizer] tagImage failed:', err));
+    setImages((prev) => prev.map((i) =>
+      i.id === imgId ? { ...i, tags: Array.from(new Set([...(i.tags ?? []), tag])) } : i,
+    ));
+  };
+
+  const removeTag = (imgId: string, tag: string) => {
+    svc.untagImage(imgId, tag)
+      .catch((err) => console.error('[ImageOrganizer] untagImage failed:', err));
+    setImages((prev) => prev.map((i) =>
+      i.id === imgId ? { ...i, tags: (i.tags ?? []).filter((t) => t !== tag) } : i,
+    ));
+  };
+
+  // ---- 上传桩（替代 SWFUpload，走 service.uploadImage） ----
+  const handleFiles = async (files: FileList | File[]) => {
+    const list = Array.from(files);
+    const added: ImgItem[] = [];
+    for (const f of list) {
+      try {
+        const item = await svc.uploadImage(f);
+        added.push(item);
+        onImageUploaded?.(item);
+      } catch (err) {
+        console.error('[ImageOrganizer] uploadImage failed:', err);
+      }
+    }
+    if (added.length) {
+      setImages((prev) => [...prev, ...added]);
+      onImagesChange?.(stateRef.current.images);
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    addAlbum: (text?: string) => {
+      albumCounter.current += 1;
+      const id = `album-${Date.now()}-${albumCounter.current}`;
+      const t = text ?? `${albumNamePrefix}${albumCounter.current}`;
+      treeRef.current?.appendChild(null, { id, text: t, cls: 'album-node', expandable: true });
+      svc.createAlbum({ id, name: t }).catch((e) => console.error('[ImageOrganizer] createAlbum failed:', e));
+      requestAnimationFrame(syncAlbums);
+      requestAnimationFrame(() => treeRef.current?.startEdit(id));
+      return id;
+    },
+    addImage: (image: ImgItem) => {
+      setImages((prev) => [...prev, image]);
+      onImagesChange?.(stateRef.current.images);
+    },
+    uploadFiles: (files) => { void handleFiles(files); },
+    getAlbums: () => stateRef.current.albums,
+    getImages: () => stateRef.current.images,
+  }));
+
+  const tabItems = [
+    {
+      id: 'albums',
+      title: 'Albums',
+      content: loading ? null : <AlbumsView stateRef={stateRef} onOpenAlbum={openAlbumTab} />,
+    },
+    {
+      id: 'all',
+      title: 'All Photos',
+      content: loading ? null : (
+        <ThumbPanel
+          images={images}
+          tagOptions={tags.map((t) => t.text)}
+          onOpenImage={openImageTab}
+          onRenameImage={renameImage}
+          onRemoveImage={removeImage}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <div
+      className={['x-panel', 'x-img-organizer', className].filter(Boolean).join(' ')}
+      style={{ width, height, overflow: 'hidden', ...style }}
+    >
+      {/* 外壳对齐原版 examples/image-organizer/imgorg/App.js：layout:'border'，
+          west(相册树, split:true 可拖拽, margins '5 0 5 5', tbar 挂 Add Album/Upload) +
+          center(TabPanel, margins '5 5 5 0')。分隔条与 5px 间距由 BorderLayout 原生给出，
+          与 Organizer 组件同源，不再手写 flex + borderRight。 */}
+      <BorderLayout
+        width={width}
+        height={height}
+        regions={[
+          {
+            // 左：相册树（等价原版 App.js west region）
+            region: 'west',
+            width: 180,
+            split: true,
+            minSize: 120,
+            maxSize: 400,
+            title: 'My Albums',
+            margins: '5 0 5 5',
+            cmargins: '0 0 0 0',
+            collapsible: true,
+            collapseMode: 'mini',
+            tbar: (
+              <Toolbar
+                items={[
+                  { text: newAlbumText, handler: handleNewAlbum },
+                  { text: uploadText, handler: () => fileInputRef.current?.click() },
+                ]}
+              />
+            ),
+            children: (
+              <div
+                style={{ height: '100%', overflow: 'auto', position: 'relative' }}
+                onDragOver={onTreeDragOver}
+                onDrop={onTreeDrop}
+                onContextMenu={(e) => {
+                  const node = (e.target as HTMLElement).closest('[data-node-id]') as HTMLElement | null;
+                  const id = node?.getAttribute('data-node-id');
+                  const albumNode = node?.querySelector('.x-tree-node-el');
+                  if (id && albumNode && albumNode.className.includes('album-node')) {
+                    e.preventDefault();
+                    setCtxMenu({ x: e.clientX, y: e.clientY, albumId: id });
+                  }
+                }}
+              >
+                {loading ? (
+                  <div style={{ padding: 10, fontSize: 12 }}>Loading…</div>
+                ) : (
+                  <TreePanel
+                    ref={treeRef}
+                    nodes={initialNodes}
+                    rootVisible={false}
+                    editable
+                    enableNodeReorder
+                    onSelect={(node) => {
+                      // 对齐原版 examples/image-organizer/imgorg/App.js:95-96,184-186
+                      // 的 album 树 click 监听：点击相册节点 → 右侧切换/打开该相册 Tab；
+                      // 点击图片叶子 → 打开该图片 Tab。展开(expand)本身只展开子树，
+                      // 不触发切换（与原生 Ext 同名交互一致）。
+                      if (node.cls?.includes('album-node')) {
+                        openAlbumTab(node.id);
+                      } else if (!node.children?.length) {
+                        const imgId = parseLeaf(node.id);
+                        const img = imgId ? images.find((x) => x.id === imgId) : null;
+                        if (img) openImageTab(img);
+                      }
+                    }}
+                    onRename={(id, text) => {
+                      svc.renameAlbum(id, text)
+                        .catch((err) => console.error('[ImageOrganizer] renameAlbum failed:', err));
+                      syncAlbums();
+                    }}
+                  />
+                )}
+              </div>
+            ),
+          },
+          {
+            // 右：TabPanel（等价原版 App.js center region，Albums / All Photos 标签）
+            region: 'center',
+            margins: '5 5 5 0',
+            children: (
+              <div style={{ height: '100%', display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+                <TabPanel ref={tabRef} items={tabItems} activeTab={0} height="100%" />
+              </div>
+            ),
+          },
+        ]}
+      />
+      {/* 隐藏的文件选择器：Upload 按钮触发（等价原始 SWFUpload 选择文件桩），常驻 DOM 供 ref 调用 */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        accept="image/*"
+        style={{ display: 'none' }}
+        onChange={(e) => {
+          if (e.target.files && e.target.files.length) void handleFiles(e.target.files);
+          e.target.value = '';
+        }}
+      />
+      {ctxMenu &&
+        createPortal(
+          <div style={{ position: 'absolute', left: ctxMenu.x, top: ctxMenu.y, zIndex: 15000 }}>
+            <Menu items={ctxItems} />
+          </div>,
+          document.body,
+        )}
+    </div>
+  );
+});
+
+/** 相册过滤 Tab 内容（读取 stateRef 保证实时） */
+const AlbumTabContent: React.FC<{
+  albumId: string;
+  stateRef: React.MutableRefObject<{ images: ImgItem[]; albums: AlbumModel[] }>;
+  allTags: TagModel[];
+  onOpenImage: (img: ImgItem) => void;
+  onRenameImage: (img: ImgItem, oldName: string) => void;
+  onRemoveImage: (img: ImgItem) => void;
+}> = ({ albumId, stateRef, allTags, onOpenImage, onRenameImage, onRemoveImage }) => {
+  const album = stateRef.current.albums.find((a) => a.id === albumId);
+  const imgs = useMemo(() => {
+    const set = new Set(album?.imageIds ?? []);
+    return stateRef.current.images.filter((i) => set.has(i.id));
+  }, [album?.imageIds, stateRef.current.images]);
+  return (
+    <ThumbPanel
+      images={imgs}
+      tagOptions={allTags.map((t) => t.text)}
+      onOpenImage={onOpenImage}
+      onRenameImage={onRenameImage}
+      onRemoveImage={onRemoveImage}
+    />
+  );
+};
+
+ImageOrganizer.displayName = 'ImageOrganizer';
+
+export default ImageOrganizer;