@arronqzy/react-view 1.0.3 → 1.0.7

package/src/panel/components/SelectLayer.tsx

@@ -74,6 +74,7 @@ export function SelectLayer({
         if (selectedIdSet.size > 0) {
           if (
             target?.closest(".moveable-control-box") ||
+            target?.closest(".moveable-group") ||
             target?.closest(".moveable-line") ||
             target?.closest(".moveable-control") ||
             target?.closest(".moveable-direction")

package/src/panel/components/ViewElementScopePanel.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useRef, useState } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
 
 import { formatViewElementScope } from "../utils/scope-template";
+import { ConfigHintIcon } from "./ConfigHintIcon";
+import { ScopeTemplateUsageHint } from "./scope-config/ScopeTemplateUsageHint";
 
 const SCOPE_COLLAPSE_STORAGE_KEY = "panel:config-scope-collapsed";
 
@@ -8,7 +11,10 @@ export type ViewElementScopePanelProps = {
   scope: unknown;
 };
 
-export function ViewElementScopePanel({ scope }: ViewElementScopePanelProps) {
+export function ViewElementScopePanel({
+  scope,
+}: ViewElementScopePanelProps) {
+  const { t } = useI18n();
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [scopeUpdated, setScopeUpdated] = useState(false);
   const prevScopeSerializedRef = useRef<string | null>(null);
@@ -42,10 +48,13 @@ export function ViewElementScopePanel({ scope }: ViewElementScopePanelProps) {
     <div className="mt-2 border-t border-border/50 pt-2">
       <div className="flex items-center justify-between gap-2">
         <div className="flex min-w-0 items-center gap-1.5">
-          <div className="text-[11px] font-medium text-foreground">Scope 数据</div>
+          <div className="text-[11px] font-medium text-foreground">{t("panel.scope.dataTitle")}</div>
+          <ConfigHintIcon label={t("panel.scope.templateHintLabel")} contentClassName="max-w-[380px]">
+            <ScopeTemplateUsageHint />
+          </ConfigHintIcon>
           {scopeUpdated ? (
             <span className="shrink-0 rounded bg-sky-500/15 px-1.5 py-0.5 text-[10px] font-medium text-sky-700 dark:text-sky-300">
-              已更新
+              {t("panel.scope.updated")}
             </span>
           ) : null}
         </div>
@@ -54,7 +63,7 @@ export function ViewElementScopePanel({ scope }: ViewElementScopePanelProps) {
           className="rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent"
           onClick={() => setIsCollapsed((prev) => !prev)}
         >
-          {isCollapsed ? "展开 Scope" : "收起 Scope"}
+          {isCollapsed ? t("panel.scope.expand") : t("panel.scope.collapse")}
         </button>
       </div>
       {!isCollapsed ? (
@@ -64,14 +73,6 @@ export function ViewElementScopePanel({ scope }: ViewElementScopePanelProps) {
           >
             {formatViewElementScope(scope)}
           </pre>
-          <p className="mt-1.5 text-[10px] leading-relaxed text-muted-foreground">
-            表单中可使用模版字符串引用 scope，例如{" "}
-            <code className="rounded bg-muted px-1">{`{scope?.a||0}`}</code>
-            、
-            <code className="rounded bg-muted px-1">{`{scope?.name||''}`}</code>
-            。支持 <code className="rounded bg-muted px-1">?.</code> 与{" "}
-            <code className="rounded bg-muted px-1">||</code> 占位。
-          </p>
         </>
       ) : null}
     </div>

package/src/panel/components/WorkspaceConfigSidebar.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
 
 import {
   BlueprintExecutionLogPanel,
@@ -82,6 +83,8 @@ export function WorkspaceConfigSidebar({
   allViewElements,
   ...viewPanelProps
 }: WorkspaceConfigSidebarProps) {
+  const { t } = useI18n();
+
   const viewElementOptions = useMemo(
     () =>
       allViewElements.map((el) => ({
@@ -136,9 +139,9 @@ export function WorkspaceConfigSidebar({
               <path d="M8 7l8 4M8 17l8-4" />
             </svg>
           </EmptyIcon>
-          <EmptyTitle>未选中蓝图节点</EmptyTitle>
+          <EmptyTitle>{t("panel.workspace.configEmptyTitle")}</EmptyTitle>
           <EmptyDescription>
-            在蓝图面板中选中一个节点后，这里会显示对应的配置。
+            {t("panel.workspace.configEmptyDesc")}
           </EmptyDescription>
         </Empty>
       </div>

package/src/panel/components/WorkspaceProjectNav.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -52,6 +53,8 @@ export function WorkspaceProjectNav({
   onDeleteProject,
   onPreviewProject,
 }: WorkspaceProjectNavProps) {
+  const { t } = useI18n();
+
   const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
 
@@ -81,11 +84,11 @@ export function WorkspaceProjectNav({
                 disabled={busy}
                 onClick={() => void runAction(onCreateProject)}
               >
-                创建工作区
+                {t("panel.workspace.create")}
               </Button>
             </TooltipTrigger>
             <TooltipContent className="z-[10100]">
-              以当前产物名称新建一条 IndexedDB 工作区记录，不会覆盖已有工作区
+              {t("panel.workspace.createHint")}
             </TooltipContent>
           </Tooltip>
 
@@ -100,13 +103,17 @@ export function WorkspaceProjectNav({
                   disabled={busy || !dirty}
                   onClick={() => void runAction(onSyncProject)}
                 >
-                  同步{dirty ? " *" : ""}
+                  {dirty ? t("panel.workspace.syncDirty") : t("common.sync")}
                 </Button>
               </TooltipTrigger>
               <TooltipContent className="z-[10100]">
                 {dirty
-                  ? `同步更新「${activeProjectName ?? "当前工作区"}」到 IndexedDB`
-                  : "当前工作区已与 IndexedDB 同步"}
+                  ? t("panel.workspace.syncUpdate", {
+                      name:
+                        activeProjectName ??
+                        t("panel.workspace.currentWorkspaceFallback"),
+                    })
+                  : t("panel.workspace.syncUpToDate")}
               </TooltipContent>
             </Tooltip>
           ) : null}
@@ -120,12 +127,14 @@ export function WorkspaceProjectNav({
                 className="h-7 max-w-[200px] truncate px-2 text-xs"
                 disabled={busy}
               >
-                {activeProjectName ? `工作区：${activeProjectName}` : "已保存工作区"}
+                {activeProjectName
+                  ? t("panel.workspace.workspaceNamed", { name: activeProjectName })
+                  : t("panel.workspace.savedWorkspaces")}
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="z-[10100] w-72">
               {projects.length === 0 ? (
-                <DropdownMenuItem disabled>暂无已保存工作区</DropdownMenuItem>
+                <DropdownMenuItem disabled>{t("panel.workspace.noSavedWorkspaces")}</DropdownMenuItem>
               ) : (
                 projects.map((project) => (
                   <div key={project.id} className="px-1 py-0.5">
@@ -160,7 +169,7 @@ export function WorkspaceProjectNav({
                           })
                         }
                       >
-                        预览
+                        {t("panel.workspace.previewDocTitle")}
                       </Button>
                       <Button
                         type="button"
@@ -169,7 +178,7 @@ export function WorkspaceProjectNav({
                         className="h-7 shrink-0 px-2 text-[10px] text-destructive hover:text-destructive"
                         onClick={() => setPendingDeleteId(project.id)}
                       >
-                        删除
+                        {t("common.delete")}
                       </Button>
                     </div>
                   </div>
@@ -177,7 +186,7 @@ export function WorkspaceProjectNav({
               )}
               {/* <DropdownMenuSeparator />
               <DropdownMenuItem onClick={() => void runAction(onCreateProject)}>
-                创建工作区
+                {t("panel.workspace.create")}
               </DropdownMenuItem> */}
             </DropdownMenuContent>
           </DropdownMenu>
@@ -192,13 +201,15 @@ export function WorkspaceProjectNav({
       >
         <AlertDialogContent className="z-[10150]">
           <AlertDialogHeader>
-            <AlertDialogTitle>删除工作区？</AlertDialogTitle>
+            <AlertDialogTitle>{t("panel.workspace.deleteConfirmTitle")}</AlertDialogTitle>
             <AlertDialogDescription>
-              将永久删除 IndexedDB 中的「{pendingDelete?.name ?? ""}」，此操作不可恢复。
+              {t("panel.workspace.deleteConfirmBody", {
+                name: pendingDelete?.name ?? "",
+              })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
               onClick={() => {
@@ -210,7 +221,7 @@ export function WorkspaceProjectNav({
                 });
               }}
             >
-              删除
+              {t("common.delete")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

package/src/panel/components/WorkspaceStageSplit.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState, type ComponentRef, type ReactNode } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
 
 import {
   BluePrintReactRoot,
@@ -58,6 +59,7 @@ function BlueprintPanel({
   canSyncBlueprint?: boolean;
   blueprintDebug?: BlueprintDebugToolbarProps;
 }) {
+  const { t } = useI18n();
   const wrapRef = useRef<HTMLDivElement>(null);
   const [layoutReady, setLayoutReady] = useState(false);
 
@@ -104,7 +106,7 @@ function BlueprintPanel({
           <BluePrintReactRoot style={{ width: "100%", height: "100%" }} {...blueprintProps} />
         ) : (
           <div className="flex h-full items-center justify-center text-[11px] text-muted-foreground">
-            {blueprintOpen ? "画布加载中…" : ""}
+            {blueprintOpen ? t("panel.workspace.canvasLoading") : ""}
           </div>
         )}
       </div>

package/src/panel/components/scope-config/ScopeConfigContext.tsx

@@ -8,11 +8,13 @@ import {
   type RefObject,
 } from "react";
 
+import type { PanelElement } from "../../types";
 import type { ScopeTemplateWarning } from "../../utils/scope-template-warnings";
 import { scopeFieldDomId } from "../../utils/scope-field-labels";
 import { groupScopeWarningsByField } from "../../utils/scope-template-warnings";
 
 import { ScopeTemplateAutocompleteHost } from "./ScopeTemplateAutocompleteHost";
+import { ScopeTemplatePreviewHost } from "./ScopeTemplatePreviewHost";
 
 type ScopeConfigContextValue = {
   warnings: ScopeTemplateWarning[];
@@ -83,11 +85,13 @@ function attachInlineHints(
 
 export function ScopeConfigProvider({
   scope,
+  element,
   warnings,
   scrollContainerRef,
   children,
 }: {
   scope?: unknown;
+  element?: PanelElement | null;
   warnings: ScopeTemplateWarning[];
   scrollContainerRef?: RefObject<HTMLElement | null>;
   children: ReactNode;
@@ -156,6 +160,11 @@ export function ScopeConfigProvider({
         scope={scope}
         containerRef={scrollContainerRef}
       />
+      <ScopeTemplatePreviewHost
+        scope={scope}
+        element={element ?? null}
+        containerRef={scrollContainerRef}
+      />
     </ScopeConfigContext.Provider>
   );
 }

package/src/panel/components/scope-config/ScopeTemplatePreviewHost.tsx

@@ -0,0 +1,242 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+  type RefObject,
+} from "react";
+import { useI18n } from "@arronqzy/i18n/react";
+import { createPortal } from "react-dom";
+
+import type { PanelElement } from "../../types";
+import { hasScopeTemplate } from "../../utils/scope-template";
+import {
+  collectElementScopeTemplateFields,
+  formatScopeTemplatePreview,
+  matchScopeTemplateFieldId,
+  resolveScopeTemplatePreview,
+} from "../../utils/scope-template-preview";
+
+const PREVIEW_SLOT_ATTR = "data-scope-preview-slot";
+const PREVIEW_KEY_ATTR = "data-scope-preview-key";
+
+type PreviewAnchor = {
+  key: string;
+  template: string;
+  fieldId?: string;
+  slot: HTMLElement;
+};
+
+function isPreviewTarget(
+  node: Element
+): node is HTMLInputElement | HTMLTextAreaElement {
+  if (node instanceof HTMLTextAreaElement) {
+    return node.dataset.scopeAutocomplete !== "off";
+  }
+  if (node instanceof HTMLInputElement) {
+    if (node.dataset.scopeAutocomplete === "off") return false;
+    const type = node.type;
+    return (
+      !type ||
+      type === "text" ||
+      type === "search" ||
+      type === "url" ||
+      type === "password"
+    );
+  }
+  return false;
+}
+
+function ensurePreviewKey(
+  input: HTMLInputElement | HTMLTextAreaElement,
+  keySeed: string
+): string {
+  const existing = input.getAttribute(PREVIEW_KEY_ATTR);
+  if (existing) return existing;
+  const key = `${keySeed}-${Math.random().toString(36).slice(2, 9)}`;
+  input.setAttribute(PREVIEW_KEY_ATTR, key);
+  return key;
+}
+
+function ensurePreviewSlot(
+  input: HTMLInputElement | HTMLTextAreaElement
+): HTMLElement {
+  const host = input.closest("label") ?? input.parentElement;
+  if (!host) return input;
+
+  const existing = host.querySelector(`[${PREVIEW_SLOT_ATTR}]`);
+  if (existing instanceof HTMLElement) return existing;
+
+  const slot = document.createElement("div");
+  slot.setAttribute(PREVIEW_SLOT_ATTR, "1");
+  input.insertAdjacentElement("afterend", slot);
+  return slot;
+}
+
+function removeOrphanPreviewSlots(container: HTMLElement) {
+  container.querySelectorAll(`[${PREVIEW_SLOT_ATTR}]`).forEach((slot) => {
+    const host = slot.parentElement;
+    const input = host?.querySelector("input, textarea");
+    if (
+      !input ||
+      !(input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) ||
+      !hasScopeTemplate(input.value)
+    ) {
+      slot.remove();
+    }
+  });
+}
+
+function inferFieldIdFromDom(
+  input: HTMLInputElement | HTMLTextAreaElement
+): string | undefined {
+  const label = input.closest("label");
+  const labelText = label?.textContent ?? "";
+  // Match both zh-CN and en-US config labels
+  if (/类目|categor|labels/i.test(labelText)) return "chart.labelsText";
+  if (/数值|values/i.test(labelText)) return "chart.valuesText";
+  return undefined;
+}
+
+function ScopeTemplatePreviewPanel({
+  template,
+  scope,
+  fieldId,
+}: {
+  template: string;
+  scope: unknown;
+  fieldId?: string;
+}) {
+  const { t } = useI18n();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const previewValue = resolveScopeTemplatePreview(template, scope, fieldId);
+  const previewText = formatScopeTemplatePreview(previewValue);
+  const previewType = Array.isArray(previewValue)
+    ? t("panel.scope.previewArray", { count: previewValue.length })
+    : typeof previewValue;
+
+  return (
+    <div className="mt-1 rounded border border-border/60 bg-muted/30">
+      <button
+        type="button"
+        className="flex w-full items-center justify-between gap-2 px-2 py-1 text-left text-[10px] text-muted-foreground hover:bg-accent/40"
+        onClick={() => setIsExpanded((prev) => !prev)}
+      >
+        <span className="font-medium text-foreground/80">{t("panel.scope.previewTitle")}</span>
+        <span className="shrink-0 text-[10px]">
+          {previewType} · {isExpanded ? t("panel.scope.collapsePreview") : t("panel.scope.expandPreview")}
+        </span>
+      </button>
+      {isExpanded ? (
+        <pre className="max-h-28 overflow-auto border-t border-border/50 px-2 py-1.5 font-mono text-[10px] leading-relaxed text-foreground/90 whitespace-pre-wrap break-all">
+          {previewText}
+        </pre>
+      ) : null}
+    </div>
+  );
+}
+
+export function ScopeTemplatePreviewHost({
+  scope,
+  element,
+  containerRef,
+}: {
+  scope: unknown;
+  element: PanelElement | null;
+  containerRef?: RefObject<HTMLElement | null>;
+}) {
+  const { t } = useI18n();
+  const keySeed = useId();
+  const [anchors, setAnchors] = useState<PreviewAnchor[]>([]);
+
+  const templateFields = useMemo(
+    () => (element ? collectElementScopeTemplateFields(element, t) : []),
+    [element, t]
+  );
+
+  const scanAnchors = useCallback(() => {
+    const container = containerRef?.current;
+    if (!container || scope === undefined) {
+      setAnchors((prev) => (prev.length === 0 ? prev : []));
+      return;
+    }
+
+    const next: PreviewAnchor[] = [];
+    const inputs = container.querySelectorAll("input, textarea");
+    for (const node of inputs) {
+      if (!isPreviewTarget(node)) continue;
+      const template = node.value;
+      if (!hasScopeTemplate(template)) continue;
+
+      const fieldId =
+        matchScopeTemplateFieldId(template, templateFields) ??
+        inferFieldIdFromDom(node);
+      next.push({
+        key: ensurePreviewKey(node, keySeed),
+        template,
+        fieldId,
+        slot: ensurePreviewSlot(node),
+      });
+    }
+
+    removeOrphanPreviewSlots(container);
+    setAnchors((prev) => {
+      if (
+        prev.length === next.length &&
+        prev.every(
+          (item, index) =>
+            item.key === next[index]?.key &&
+            item.template === next[index]?.template &&
+            item.fieldId === next[index]?.fieldId
+        )
+      ) {
+        return prev;
+      }
+      return next;
+    });
+  }, [containerRef, keySeed, scope, templateFields]);
+
+  useEffect(() => {
+    scanAnchors();
+  }, [scanAnchors, element, scope]);
+
+  useEffect(() => {
+    const container = containerRef?.current;
+    if (!container || scope === undefined) return;
+
+    const onInput = () => {
+      window.requestAnimationFrame(scanAnchors);
+    };
+
+    container.addEventListener("input", onInput, true);
+    const observer = new MutationObserver(onInput);
+    observer.observe(container, { childList: true, subtree: true });
+
+    return () => {
+      container.removeEventListener("input", onInput, true);
+      observer.disconnect();
+      container
+        .querySelectorAll(`[${PREVIEW_SLOT_ATTR}]`)
+        .forEach((node) => node.remove());
+    };
+  }, [containerRef, scanAnchors, scope]);
+
+  if (scope === undefined || anchors.length === 0) return null;
+
+  return (
+    <>
+      {anchors.map((anchor) =>
+        createPortal(
+          <ScopeTemplatePreviewPanel
+            key={anchor.key}
+            template={anchor.template}
+            scope={scope}
+            fieldId={anchor.fieldId}
+          />,
+          anchor.slot
+        )
+      )}
+    </>
+  );
+}

package/src/panel/components/scope-config/ScopeTemplateUsageHint.tsx

@@ -0,0 +1,12 @@
+import { useI18n } from "@arronqzy/i18n/react";
+
+export function ScopeTemplateUsageHint() {
+  const { t } = useI18n();
+
+  return (
+    <div className="space-y-2">
+      <p>{t("panel.scope.usageHint1")}</p>
+      <p>{t("panel.scope.usageHint2")}</p>
+    </div>
+  );
+}

package/src/panel/components/scope-config/ScopeTemplateWarningsPanel.tsx

@@ -1,10 +1,13 @@
 import { useEffect, useState } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
 
 import { useScopeConfig } from "./ScopeConfigContext";
 
 const WARNINGS_COLLAPSE_STORAGE_KEY = "panel:config-scope-warnings-collapsed";
 
 export function ScopeTemplateWarningsPanel() {
+  const { t } = useI18n();
+
   const ctx = useScopeConfig();
   const [isCollapsed, setIsCollapsed] = useState(false);
 
@@ -26,7 +29,7 @@ export function ScopeTemplateWarningsPanel() {
     <div className="mt-2 border-t border-border/50 pt-2">
       <div className="flex items-center justify-between gap-2">
         <div className="text-[11px] font-medium text-amber-700 dark:text-amber-300">
-          异常调用警告
+          {t("panel.scope.warningsTitle")}
           <span className="ml-1.5 rounded bg-amber-500/15 px-1.5 py-0.5 text-[10px] font-semibold">
             {ctx.warnings.length}
           </span>
@@ -36,13 +39,13 @@ export function ScopeTemplateWarningsPanel() {
           className="rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent"
           onClick={() => setIsCollapsed((prev) => !prev)}
         >
-          {isCollapsed ? "展开警告" : "收起警告"}
+          {isCollapsed ? t("panel.scope.expandWarnings") : t("panel.scope.collapseWarnings")}
         </button>
       </div>
       {!isCollapsed ? (
         <ul className="mt-2 max-h-[200px] space-y-1 overflow-auto text-[10px] leading-relaxed">
           {ctx.warnings.map((warning) => (
-            <li key={`${warning.fieldId}-${warning.missingPath}-${warning.expression}`}>
+            <li key={`${warning.fieldId}-${warning.kind}-${warning.missingPath}-${warning.expression}`}>
               <button
                 type="button"
                 className="w-full rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-left text-amber-800 hover:bg-amber-500/15 dark:text-amber-200"