@arronqzy/react-view 1.0.3 → 1.0.7

package/src/panel/ai/revealConfigField.ts

@@ -0,0 +1,137 @@
+/** Map panel.update patch keys → config field anchors / sidebar sections. */
+
+export type ConfigRevealTarget = {
+  field: string;
+  section: string;
+};
+
+const FIELD_SECTION: Record<string, string> = {
+  name: "nodeInfo",
+  x: "nodeInfo",
+  y: "nodeInfo",
+  width: "nodeInfo",
+  height: "nodeInfo",
+  rotate: "nodeInfo",
+  locked: "nodeInfo",
+  zIndex: "nodeInfo",
+  layerId: "nodeInfo",
+  textHtml: "textConfig",
+  textColor: "textConfig",
+  textFontSize: "textConfig",
+  textFontFamily: "textConfig",
+  textFontWeight: "textConfig",
+  textAlign: "textConfig",
+  textLineHeight: "textConfig",
+  table: "tableConfig",
+  "table.source": "tableConfig",
+  "table.rowsText": "tableConfig",
+  "table.columns": "tableConfig",
+  "table.emptyText": "tableConfig",
+  "table.showHeader": "tableConfig",
+  "table.stripe": "tableConfig",
+  "table.rowHeight": "tableConfig",
+  chart: "chartBasic",
+  "chart.title": "chartBasic",
+  "chart.labelsText": "chartBasic",
+  "chart.valuesText": "chartBasic",
+  "chart.color": "chartBasic",
+  style: "nodeInfo",
+  "style.backgroundColor": "nodeInfo",
+  "style.borderColor": "nodeInfo",
+  geometryShape: "geometryConfig",
+  geometryColor: "geometryConfig",
+};
+
+export function configTargetsFromPatch(
+  patch: Record<string, unknown>
+): ConfigRevealTarget[] {
+  const out: ConfigRevealTarget[] = [];
+  const seen = new Set<string>();
+
+  const push = (field: string) => {
+    const section = FIELD_SECTION[field] ?? FIELD_SECTION[field.split(".")[0]!] ?? "nodeInfo";
+    if (seen.has(field)) return;
+    seen.add(field);
+    out.push({ field, section });
+  };
+
+  for (const key of Object.keys(patch)) {
+    if (key === "table" && patch.table && typeof patch.table === "object") {
+      for (const sub of Object.keys(patch.table as object)) {
+        push(`table.${sub}`);
+      }
+      continue;
+    }
+    if (key === "chart" && patch.chart && typeof patch.chart === "object") {
+      for (const sub of Object.keys(patch.chart as object)) {
+        push(`chart.${sub}`);
+      }
+      continue;
+    }
+    if (key === "style" && patch.style && typeof patch.style === "object") {
+      for (const sub of Object.keys(patch.style as object)) {
+        push(`style.${sub}`);
+      }
+      continue;
+    }
+    push(key);
+  }
+
+  return out;
+}
+
+const REVEAL_EVENT = "abuilder:reveal-config";
+
+export type RevealConfigDetail = {
+  fields: string[];
+  sections: string[];
+};
+
+export function revealPanelConfig(targets: ConfigRevealTarget[]) {
+  if (typeof window === "undefined" || !targets.length) return;
+  const detail: RevealConfigDetail = {
+    fields: targets.map((t) => t.field),
+    sections: [...new Set(targets.map((t) => t.section))],
+  };
+  window.dispatchEvent(new CustomEvent(REVEAL_EVENT, { detail }));
+}
+
+export function revealPanelConfigFromPatch(patch: Record<string, unknown>) {
+  revealPanelConfig(configTargetsFromPatch(patch));
+}
+
+export function subscribeRevealPanelConfig(
+  handler: (detail: RevealConfigDetail) => void
+): () => void {
+  const listener = (event: Event) => {
+    const detail = (event as CustomEvent<RevealConfigDetail>).detail;
+    if (!detail) return;
+    handler(detail);
+  };
+  window.addEventListener(REVEAL_EVENT, listener);
+  return () => window.removeEventListener(REVEAL_EVENT, listener);
+}
+
+export function highlightConfigField(field: string) {
+  const el = document.querySelector<HTMLElement>(
+    `[data-config-field="${CSS.escape(field)}"]`
+  );
+  if (!el) return;
+
+  const scrollRoot = el.closest(".scope-config-sidebar") as HTMLElement | null;
+  if (scrollRoot) {
+    const rootRect = scrollRoot.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const top =
+      elRect.top -
+      rootRect.top +
+      scrollRoot.scrollTop -
+      scrollRoot.clientHeight / 3;
+    scrollRoot.scrollTo({ top: Math.max(0, top), behavior: "smooth" });
+  } else {
+    el.scrollIntoView({ behavior: "smooth", block: "center" });
+  }
+
+  el.classList.add("config-field--highlight");
+  window.setTimeout(() => el.classList.remove("config-field--highlight"), 1800);
+}

package/src/panel/components/ConfigHintIcon.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@arronqzy/ui";
+
+export type ConfigHintIconProps = {
+  label?: string;
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+};
+
+export function ConfigHintIcon({
+  label,
+  children,
+  className,
+  contentClassName,
+}: ConfigHintIconProps) {
+  const { t } = useI18n();
+  const resolvedLabel = label ?? t("common.hint");
+
+  return (
+    <TooltipProvider delayDuration={120}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className={
+              className ??
+              "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border text-[10px] leading-none text-muted-foreground hover:bg-accent/50"
+            }
+            aria-label={t("common.hintAria", { label: resolvedLabel })}
+          >
+            ?
+          </button>
+        </TooltipTrigger>
+        <TooltipContent
+          side="top"
+          className={`z-[10120] max-w-[360px] text-[11px] leading-5 ${contentClassName ?? ""}`}
+        >
+          {children}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/src/panel/components/ElementsLayer.tsx

@@ -1,8 +1,10 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
 import * as echarts from "echarts";
 import type { PanelElement } from "../types";
 import { buildChartOption, CHART_TYPES } from "../utils/chartOptionBuilder";
 import { PREVIEW_LAYOUT_EVENT } from "../utils/panelStateIO";
+import { TableNodeContent, type TableCellActionHandler } from "./table/TableNodeContent";
 
 export type ElementsLayerProps = {
   elements: PanelElement[];
@@ -19,6 +21,7 @@ export type ElementsLayerProps = {
   previewMode?: boolean;
   /** 预览布局变更时递增，用于触发图表/画布重绘 */
   previewLayoutKey?: number;
+  onTableCellAction?: TableCellActionHandler;
 };
 
 function TextNodeContent({
@@ -31,7 +34,8 @@ function TextNodeContent({
   onChange: (nextHtml: string) => void;
 }) {
   const ref = useRef<HTMLDivElement | null>(null);
-  const html = element.textHtml ?? "<p>双击输入文本</p>";
+  const { t } = useI18n();
+  const html = element.textHtml ?? `<p>${t("panel.defaults.doubleClickTextHtml")}</p>`;
   const textStyle: React.CSSProperties = {
     fontFamily: element.textFontFamily || undefined,
     fontSize: element.textFontSize ? `${element.textFontSize}px` : undefined,
@@ -71,6 +75,7 @@ function GridNodeContent({
   allElements: PanelElement[];
   previewMode?: boolean;
 }) {
+  const { t } = useI18n();
   const rows = Math.max(1, Math.floor(element.gridRows ?? 2));
   const cols = Math.max(1, Math.floor(element.gridCols ?? 3));
   const gap = Math.max(0, element.gridGap ?? 8);
@@ -142,7 +147,7 @@ function GridNodeContent({
                 ? "border-primary/70 bg-primary/10"
                 : "border-border/60 bg-muted/20",
             ].join(" ")}
-            title={`槽位 ${idx + 1}${occupied.has(idx) ? "（已占用）" : "（空）"}`}
+            title={occupied.has(idx) ? t("panel.config.slotOccupied", { n: idx + 1 }) : t("panel.config.slotEmpty", { n: idx + 1 })}
           />
         ))}
       </div>
@@ -179,6 +184,7 @@ function AudioNodeContent({
   element: PanelElement;
   selected?: boolean;
 }) {
+  const { t } = useI18n();
   const src = element.audioSrc || element.audioRemoteUrl || "";
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const [playing, setPlaying] = useState(false);
@@ -269,11 +275,11 @@ function AudioNodeContent({
                 el.pause();
               }
             }}
-            title={!src ? "请先配置音频源" : playing ? "点击暂停" : "点击播放"}
+            title={!src ? t("panel.config.configureAudioFirst") : playing ? t("panel.config.clickPause") : t("panel.config.clickPlay")}
           >
             <img
               src={poster}
-              alt="音频占位图"
+              alt={t("panel.config.audioPoster")}
               className="h-full w-full object-cover"
               draggable={false}
               onDragStart={(e) => e.preventDefault()}
@@ -295,7 +301,7 @@ function AudioNodeContent({
                 el.pause();
               }
             }}
-            title={!src ? "请先配置音频源" : playing ? "点击暂停" : "点击播放"}
+            title={!src ? t("panel.config.configureAudioFirst") : playing ? t("panel.config.clickPause") : t("panel.config.clickPlay")}
           >
             {renderIcon()}
           </button>
@@ -313,7 +319,7 @@ function AudioNodeContent({
           </>
         ) : null}
         <span className="pointer-events-none absolute right-2 top-2 rounded bg-black/55 px-1.5 py-0.5 text-[10px] text-white">
-          {!src ? "未配置音频" : playing ? "暂停" : "播放"}
+          {!src ? t("panel.config.audioNotConfigured") : playing ? t("panel.config.pause") : t("panel.config.play")}
         </span>
         <audio ref={audioRef} src={src} preload="metadata" className="hidden" />
       </div>
@@ -322,14 +328,14 @@ function AudioNodeContent({
   if (!src) {
     return (
       <div className="flex h-full w-full items-center justify-center rounded border border-dashed border-border/70 bg-muted/15 px-2 text-[11px] text-muted-foreground">
-        音频占位
+        {t("panel.config.audioPlaceholder")}
       </div>
     );
   }
   return (
     <div className="relative flex h-full w-full items-center justify-center rounded border border-border/60 bg-muted/10 px-2">
       <div className="pointer-events-none text-[11px] text-muted-foreground">
-        {playing ? "音频播放中" : "音频已就绪"}
+        {playing ? t("panel.config.audioPlaying") : t("panel.config.audioReady")}
       </div>
       <button
         type="button"
@@ -345,9 +351,9 @@ function AudioNodeContent({
             el.pause();
           }
         }}
-        title={playing ? "点击暂停" : "点击播放"}
+        title={playing ? t("panel.config.clickPause") : t("panel.config.clickPlay")}
       >
-        {playing ? "暂停" : "播放"}
+        {playing ? t("panel.config.pause") : t("panel.config.play")}
       </button>
       <audio ref={audioRef} src={src} preload="metadata" className="hidden" />
     </div>
@@ -361,6 +367,7 @@ function VideoNodeContent({
   element: PanelElement;
   selected?: boolean;
 }) {
+  const { t } = useI18n();
   const src = element.videoSrc || element.videoRemoteUrl || "";
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const [playing, setPlaying] = useState(false);
@@ -388,7 +395,7 @@ function VideoNodeContent({
   if (!src) {
     return (
       <div className="flex h-full w-full items-center justify-center rounded border border-dashed border-border/70 bg-muted/15 px-2 text-[11px] text-muted-foreground">
-        视频占位
+        {t("panel.config.videoPlaceholder")}
       </div>
     );
   }
@@ -409,9 +416,9 @@ function VideoNodeContent({
             el.pause();
           }
         }}
-        title={playing ? "点击暂停" : "点击播放"}
+        title={playing ? t("panel.config.clickPause") : t("panel.config.clickPlay")}
       >
-        {playing ? "暂停" : "播放"}
+        {playing ? t("panel.config.pause") : t("panel.config.play")}
       </button>
     </div>
   );
@@ -423,20 +430,22 @@ function hasBackgroundImage(element: PanelElement) {
 }
 
 function ImageNodeContent({ element }: { element: PanelElement }) {
+  const { t } = useI18n();
   if (hasBackgroundImage(element)) return null;
   return (
     <div className="flex h-full w-full items-center justify-center rounded border border-dashed border-border/70 bg-muted/15 px-2 text-[11px] text-muted-foreground">
-      图片占位
+      {t("panel.config.imagePlaceholder")}
     </div>
   );
 }
 
 function EmptyNodePlaceholder({ element }: { element: PanelElement }) {
+  const { t } = useI18n();
   const labelMap: Record<string, string> = {
-    video: "视频占位",
-    audio: "音频占位",
+    video: t("panel.config.videoPlaceholder"),
+    audio: t("panel.config.audioPlaceholder"),
   };
-  const label = labelMap[element.materialType ?? ""] ?? `${element.materialType ?? "节点"} 占位`;
+  const label = labelMap[element.materialType ?? ""] ?? t("panel.config.materialPlaceholder", { type: element.materialType ?? t("common.node") });
   return (
     <div className="flex h-full w-full items-center justify-center rounded border border-dashed border-border/70 bg-muted/15 px-2 text-[11px] text-muted-foreground">
       {label}
@@ -607,8 +616,6 @@ function ChartNodeContent({
     window.addEventListener(PREVIEW_LAYOUT_EVENT, onLayout);
     const obs = new ResizeObserver(onLayout);
     obs.observe(host);
-    const parent = host.parentElement;
-    if (parent) obs.observe(parent);
     return () => {
       window.removeEventListener(PREVIEW_LAYOUT_EVENT, onLayout);
       obs.disconnect();
@@ -683,6 +690,7 @@ function ReferenceNodeContent({
   snapshotSource?: PanelElement[];
   visitedIds?: string[];
 }) {
+  const { t } = useI18n();
   const sourceNodes = useMemo(
     () => {
       const fromDeep =
@@ -727,7 +735,7 @@ function ReferenceNodeContent({
   }, [element.height, element.width, sourceNodes]);
 
   if (!layout || sourceNodes.length === 0) {
-    const hintText = element.refLayerId ? "引用图层暂无节点" : "请在右侧选择引用图层";
+    const hintText = element.refLayerId ? t("panel.config.refLayerEmpty") : t("panel.config.selectRefLayer");
     return (
       <div className="flex h-full w-full items-center justify-center">
         <div className="rounded border border-dashed border-border/70 px-2 py-1 text-[10px] text-muted-foreground">
@@ -781,6 +789,8 @@ function ReferenceNodeContent({
                 />
               ) : node.materialType === "geometry" ? (
                 <GeometryNodeContent element={node} />
+              ) : node.materialType === "table" ? (
+                <TableNodeContent element={node} interactive={false} />
               ) : (
                 <div className="h-full w-full" />
               )}
@@ -792,7 +802,7 @@ function ReferenceNodeContent({
   );
 }
 
-export function ElementsLayer({
+export const ElementsLayer = React.memo(function ElementsLayer({
   elements,
   allElements,
   selectedIds,
@@ -801,6 +811,7 @@ export function ElementsLayer({
   layerLocked = false,
   previewMode = false,
   previewLayoutKey,
+  onTableCellAction,
 }: ElementsLayerProps) {
   const sortedElements = useMemo(() => {
     return [...elements].sort((a, b) => {
@@ -879,6 +890,12 @@ export function ElementsLayer({
               <GeometryNodeContent element={el} />
             ) : el.materialType === "image" ? (
               <ImageNodeContent element={el} />
+            ) : el.materialType === "table" ? (
+              <TableNodeContent
+                element={el}
+                interactive={previewMode || Boolean(onTableCellAction)}
+                onCellAction={onTableCellAction}
+              />
             ) : (
               <EmptyNodePlaceholder element={el} />
             )}
@@ -887,5 +904,5 @@ export function ElementsLayer({
       })}
     </>
   );
-}
+});