@arronqzy/react-view 1.0.33 → 1.0.36

package/src/panel/components/config/PanelConfigScene3dSection.tsx

@@ -305,7 +305,12 @@ export function PanelConfigScene3dSection({
   return (
     <div className="space-y-3">
       <div className="space-y-1.5">
-        <div className="text-[11px] font-medium">{t("panel.config.groupScene3dPurpose")}</div>
+        <div className="flex items-center gap-1 text-[11px] font-medium">
+          {t("panel.config.groupScene3dPurpose")}
+          <ConfigHintIcon label={t("panel.config.groupScene3dPurpose")}>
+            {t("panel.config.scene3dPurposeHint")}
+          </ConfigHintIcon>
+        </div>
         <Select
           value={config.presentation.purpose}
           onValueChange={(value) => {
@@ -322,9 +327,6 @@ export function PanelConfigScene3dSection({
             <SelectItem value="sandbox">{t("panel.config.scene3dPurposeSandbox")}</SelectItem>
           </SelectContent>
         </Select>
-        <div className="text-[10px] text-muted-foreground">
-          {t("panel.config.scene3dPurposeHint")}
-        </div>
         <label className="block space-y-0.5 text-[10px]">
           <span>{t("panel.config.scene3dEnvironment")}</span>
           <Select
@@ -403,8 +405,11 @@ export function PanelConfigScene3dSection({
         />
       </div>
       <label className="block space-y-1" data-config-field="scene3d.modelUrl">
-        <div className="text-[10px] text-muted-foreground">
+        <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
           {t("panel.config.scene3dModelUrl")}
+          <ConfigHintIcon label={t("panel.config.scene3dModelUrl")}>
+            {t("panel.config.urlScopeHint")}
+          </ConfigHintIcon>
         </div>
         <div className="flex gap-1.5">
           <Input
@@ -424,7 +429,6 @@ export function PanelConfigScene3dSection({
             {t("common.add")}
           </Button>
         </div>
-        <p className="text-[10px] text-muted-foreground">{t("panel.config.urlScopeHint")}</p>
       </label>
 
       {config.models.length === 0 ? (
@@ -688,7 +692,12 @@ export function PanelConfigScene3dSection({
       )}
 
       <div className="space-y-2">
-        <div className="text-[11px] font-medium">{t("panel.config.groupScene3dCamera")}</div>
+        <div className="flex items-center gap-1 text-[11px] font-medium">
+          {t("panel.config.groupScene3dCamera")}
+          <ConfigHintIcon label={t("panel.config.groupScene3dCamera")}>
+            {t("panel.config.scene3dCameraEditDesc")}
+          </ConfigHintIcon>
+        </div>
         <div className="grid grid-cols-3 gap-1.5">
           {(["x", "y", "z"] as const).map((axis, index) => (
             <label key={`pos-${axis}`} className="space-y-0.5 text-[10px]">
@@ -734,7 +743,6 @@ export function PanelConfigScene3dSection({
             }
           />
         </label>
-        <div className="text-[10px] text-muted-foreground">{t("panel.config.scene3dCameraEditDesc")}</div>
       </div>
 
       <div className="space-y-2">

package/src/panel/components/config/PanelConfigStyleSections.tsx

@@ -12,6 +12,7 @@ import type { PanelElement, PanelElementStyle } from "../../types";
 import { readFileAsDataUrl, runBusyTask } from "../../utils/async-work";
 import { patchBackgroundImageFromInput } from "../../utils/background-image-style";
 import { getPanelMessages } from "../../constants/messages";
+import { ConfigHintIcon } from "../ConfigHintIcon";
 import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
 
 export function PanelConfigStyleSections({
@@ -90,7 +91,12 @@ export function PanelConfigStyleSections({
                 t("panel.config.groupBgLayout"),
                 <>
                   <label className="block space-y-1" data-config-field="style.backgroundImage">
-                    <div>{t("panel.config.backgroundImage")}</div>
+                    <div className="flex items-center gap-1">
+                      {t("panel.config.backgroundImage")}
+                      <ConfigHintIcon label={t("panel.config.backgroundImage")}>
+                        {t("panel.config.urlScopeHint")}
+                      </ConfigHintIcon>
+                    </div>
                     <Input
                       value={
                         selectedElement.style?.backgroundImageRemoteUrl ??
@@ -103,9 +109,6 @@ export function PanelConfigStyleSections({
                       placeholder={t("panel.config.urlScopePlaceholder")}
                       className="h-7 font-mono text-[11px]"
                     />
-                    <p className="text-[10px] text-muted-foreground">
-                      {t("panel.config.urlScopeHint")}
-                    </p>
                   </label>
                   <div className="flex items-center gap-2">
                     <label className="inline-flex cursor-pointer items-center rounded border border-border px-2 py-1 text-[11px] hover:bg-accent">

package/src/panel/components/config/PanelConfigTextSection.tsx

@@ -11,6 +11,7 @@ import {
 } from "@arronqzy/ui";
 import type { PanelElement } from "../../types";
 import { cssTextLineHeight, cssTextAlignStyle } from "../../utils/panelElementDefaults";
+import { ConfigHintIcon } from "../ConfigHintIcon";
 import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
 
 export function PanelConfigTextSection({
@@ -111,7 +112,12 @@ export function PanelConfigTextSection({
                       }}
                     />
                     <label className="block space-y-1">
-                      <div>{t("panel.config.textHtmlSource")}</div>
+                      <div className="flex items-center gap-1">
+                        {t("panel.config.textHtmlSource")}
+                        <ConfigHintIcon label={t("panel.config.textHtmlSource")}>
+                          {t("panel.config.scopeTemplateHint")}
+                        </ConfigHintIcon>
+                      </div>
                       <textarea
                         data-config-field="textHtml"
                         value={selectedElement.textHtml ?? ""}
@@ -125,9 +131,6 @@ export function PanelConfigTextSection({
                         placeholder={t("panel.config.textHtmlSourcePlaceholder")}
                         className="w-full rounded border border-border bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed outline-none focus-visible:ring-1 focus-visible:ring-primary"
                       />
-                      <p className="text-[10px] text-muted-foreground">
-                        {t("panel.config.scopeTemplateHint")}
-                      </p>
                     </label>
                   </>
                 )}

package/src/panel/components/config/PanelConfigVideoSection.tsx

@@ -4,6 +4,7 @@ import { Checkbox, Input } from "@arronqzy/ui";
 import type { PanelElement } from "../../types";
 import { readFileAsDataUrl, runBusyTask } from "../../utils/async-work";
 import { getPanelMessages } from "../../constants/messages";
+import { ConfigHintIcon } from "../ConfigHintIcon";
 import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
 
 export function PanelConfigVideoSection({
@@ -70,7 +71,12 @@ export function PanelConfigVideoSection({
                   t("panel.config.groupVideoSource"),
                   <>
                     <label className="block space-y-1" data-config-field="videoRemoteUrl">
-                      <div>{t("panel.config.videoUrl")}</div>
+                      <div className="flex items-center gap-1">
+                        {t("panel.config.videoUrl")}
+                        <ConfigHintIcon label={t("panel.config.videoUrl")}>
+                          {t("panel.config.urlScopeHint")}
+                        </ConfigHintIcon>
+                      </div>
                       <Input
                         value={selectedElement.videoRemoteUrl ?? ""}
                         onChange={(e) =>
@@ -82,9 +88,6 @@ export function PanelConfigVideoSection({
                         placeholder={t("panel.config.urlScopePlaceholder")}
                         className="h-7 font-mono text-[11px]"
                       />
-                      <p className="text-[10px] text-muted-foreground">
-                        {t("panel.config.urlScopeHint")}
-                      </p>
                     </label>
                     <div className="flex items-center gap-2">
                       <label className="inline-flex cursor-pointer items-center rounded border border-border px-2 py-1 text-[11px] hover:bg-accent">

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

@@ -73,17 +73,13 @@ export function ScopeTemplateAutocompleteHost({
 
   const refreshForInput = useCallback(
     (input: HTMLInputElement | HTMLTextAreaElement) => {
-      if (scope === undefined) {
-        closeDropdown();
-        return;
-      }
       const cursor = input.selectionStart ?? input.value.length;
-      const parsed = parseScopeAutocomplete(input.value, cursor, scope);
+      const parsed = parseScopeAutocomplete(input.value, cursor, scope ?? {});
       if (!parsed) {
         closeDropdown();
         return;
       }
-      const suggestions = getScopeAutocompleteSuggestions(scope, parsed);
+      const suggestions = getScopeAutocompleteSuggestions(scope ?? {}, parsed);
       if (suggestions.length === 0) {
         closeDropdown();
         return;
@@ -124,7 +120,7 @@ export function ScopeTemplateAutocompleteHost({
 
   useEffect(() => {
     const container = containerRef?.current;
-    if (!container || scope === undefined) return;
+    if (!container) return;
 
     const onFocusIn = (event: FocusEvent) => {
       if (!isAutocompleteTarget(event.target)) return;
@@ -213,7 +209,7 @@ export function ScopeTemplateAutocompleteHost({
     scope,
   ]);
 
-  if (!dropdown || scope === undefined) return null;
+  if (!dropdown) return null;
 
   return createPortal(
     <div

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

@@ -7,6 +7,7 @@ export function ScopeTemplateUsageHint() {
     <div className="space-y-2">
       <p>{t("panel.scope.usageHint1")}</p>
       <p>{t("panel.scope.usageHint2")}</p>
+      <p>{t("panel.scope.usageHintSystem")}</p>
     </div>
   );
 }

package/src/panel/components/table/ConditionEditor.tsx

@@ -20,6 +20,7 @@ import {
   SelectValue,
 } from "@arronqzy/ui";
 import React from "react";
+import { ConfigHintIcon } from "../ConfigHintIcon";
 
 const CONDITION_OPS: ConditionOp[] = [
   "eq",
@@ -90,7 +91,12 @@ export function ConditionEditor({
     <div className="space-y-2">
       <div className="flex items-center justify-between gap-2">
         <label className={`${fieldClass} min-w-0 flex-1`}>
-          <div className="text-[11px] text-muted-foreground">{t("panel.config.tableConditionLogic")}</div>
+          <div className="flex items-center gap-1 text-[11px] text-muted-foreground">
+            {t("panel.config.tableConditionLogic")}
+            <ConfigHintIcon label={t("panel.config.tableConditionLogic")}>
+              {t("panel.config.tableConditionLogicHint")}
+            </ConfigHintIcon>
+          </div>
           <Select
             value={logic}
             onValueChange={(next) => onChange(setConditionLogic(value, next as ConditionLogic))}
@@ -115,7 +121,6 @@ export function ConditionEditor({
           {t("panel.config.tableConditionAddItem")}
         </Button>
       </div>
-      <div className="text-[10px] text-muted-foreground">{t("panel.config.tableConditionLogicHint")}</div>
       {items.map((item, index) => {
         const leaf: ConditionLeaf = isConditionLeaf(item)
           ? item

package/src/panel/components/table/PanelConfigTableSection.tsx

@@ -427,10 +427,16 @@ export function PanelConfigTableSection({
         </div>
         <details className="rounded-md border border-border/50 bg-muted/10 px-2 py-1.5">
           <summary className="cursor-pointer text-[11px] font-medium text-muted-foreground">
-            {t("panel.config.tableAdvancedData")}
+            <span className="inline-flex items-center gap-1 align-middle">
+              {t("panel.config.tableAdvancedData")}
+              <span className="inline-flex" onClick={(e) => e.preventDefault()}>
+                <ConfigHintIcon label={t("panel.config.tableAdvancedData")}>
+                  {t("panel.config.tableAdvancedDataHint")}
+                </ConfigHintIcon>
+              </span>
+            </span>
           </summary>
           <div className="mt-2 space-y-2 border-t border-border/40 pt-2">
-            <p className="text-[10px] text-muted-foreground">{t("panel.config.tableAdvancedDataHint")}</p>
             <div className="grid grid-cols-2 gap-2">
               <label className={fieldClass}>
                 {fieldLabel("panel.config.tableTransformMode", "panel.config.tableTransformModeHint")}
@@ -1000,7 +1006,7 @@ export function PanelConfigTableSection({
                               imageUrlPrefix: e.target.value || undefined,
                             })
                           }
-                          placeholder="https://cdn.example.com/ 或 {scope?.cdn}/"
+                          placeholder={t("panel.config.tableImageUrlPrefixPlaceholder")}
                           className={inputClass}
                         />
                       </label>
@@ -1292,7 +1298,7 @@ export function PanelConfigTableSection({
                             progressStatic: e.target.value || undefined,
                           })
                         }
-                        placeholder="80 或 {scope?.pct}"
+                        placeholder={t("panel.config.tableProgressStaticPlaceholder")}
                         className={inputClass}
                       />
                     </label>
@@ -1724,7 +1730,7 @@ export function PanelConfigTableSection({
                     displayTemplate: e.target.value.trim() ? e.target.value : undefined,
                   })
                 }
-                placeholder="{current}分"
+                placeholder={t("panel.config.tableDisplayTemplatePlaceholder")}
                 className={inputClass}
               />
             </label>

package/src/panel/hooks/usePanelElements.ts

@@ -22,6 +22,8 @@ import {
   getDefaultScene3dConfigForMaterial,
   getDefaultSizeByMaterial,
   getDefaultTextContent,
+  localizeLayers,
+  localizePanelElement,
   normalizePrimaryLayer,
   randomId,
 } from "../utils/panelElementDefaults";
@@ -67,7 +69,7 @@ export function usePanelElements() {
     () => store.getState()
   ) as State;
   const rawLayers = (state.variables?.layers as PanelLayer[] | undefined) ?? [defaultLayer];
-  const layers = useMemo(() => normalizePrimaryLayer(rawLayers), [rawLayers]);
+  const layers = useMemo(() => localizeLayers(normalizePrimaryLayer(rawLayers), t), [rawLayers, t]);
   const activeLayerId =
     (state.variables?.activeLayerId as string | undefined) ?? DEFAULT_LAYER_ID;
   const canUndo = store.getHistoryCursorIndex() > 0;
@@ -137,14 +139,29 @@ export function usePanelElements() {
     });
   }, []);
 
+  const localizedCacheRef = useRef<{ t: typeof t; map: WeakMap<PanelElement, PanelElement> }>({
+    t,
+    map: new WeakMap(),
+  });
   const allElements = useMemo(() => {
     const next = materializePanelElements(
       state.root.children,
       allElementsCacheRef.current
     );
     allElementsCacheRef.current = next;
-    return next;
-  }, [state.root.children]);
+    if (localizedCacheRef.current.t !== t) {
+      localizedCacheRef.current = { t, map: new WeakMap() };
+    }
+    const { map } = localizedCacheRef.current;
+    return next.map((el) => {
+      let localized = map.get(el);
+      if (!localized) {
+        localized = localizePanelElement(el, t);
+        map.set(el, localized);
+      }
+      return localized;
+    });
+  }, [state.root.children, t]);
 
   const elements = useMemo(() => {
     const next = allElements.filter((el) => el.layerId === activeLayerId);

package/src/panel/library/event-subscription.ts

@@ -5,6 +5,10 @@ export const AbuilderEvents = {
   workspaceAdd: "workspace:add",
   /** 同步工作区 */
   workspaceSync: "workspace:sync",
+  /** 开始上传接口集合 */
+  apiCollectionUploadStart: "api-collection:upload-start",
+  /** 上传接口集合成功 */
+  apiCollectionUploadSuccess: "api-collection:upload-success",
 } as const;
 
 export type AbuilderEventName = (typeof AbuilderEvents)[keyof typeof AbuilderEvents];
@@ -15,9 +19,25 @@ export type WorkspaceData = WorkspaceProjectRecord;
 export type WorkspaceAddEventPayload = WorkspaceData;
 export type WorkspaceSyncEventPayload = WorkspaceData;
 
+export type ApiCollectionUploadStartEventPayload = {
+  fileNames: string[];
+  count: number;
+};
+
+export type ApiCollectionUploadSuccessEventPayload = {
+  collections: Array<{
+    id: string;
+    name: string;
+    apiCount: number;
+    persistLocal: boolean;
+  }>;
+};
+
 export type AbuilderEventPayloadMap = {
   [AbuilderEvents.workspaceAdd]: WorkspaceAddEventPayload;
   [AbuilderEvents.workspaceSync]: WorkspaceSyncEventPayload;
+  [AbuilderEvents.apiCollectionUploadStart]: ApiCollectionUploadStartEventPayload;
+  [AbuilderEvents.apiCollectionUploadSuccess]: ApiCollectionUploadSuccessEventPayload;
 };
 
 type EventCallback = (payload: unknown) => void;

package/src/panel/utils/panelElementDefaults.ts

@@ -1,5 +1,5 @@
 import type { TranslateFn } from "@arronqzy/i18n";
-import { tForLocale } from "@arronqzy/i18n";
+import { relocalizeMessage, tForLocale } from "@arronqzy/i18n";
 import { createDefaultScene3dConfig } from "@arronqzy/view-scene3d";
 import type { PanelChartConfig, PanelLayer, PanelElement } from "../types";
 import { createDefaultTableConfig, type PanelTableConfig } from "@arronqzy/view-table";
@@ -34,6 +34,52 @@ export function getDefaultNodeName(materialType: string, t: TranslateFn = tFallb
   return key ? t(key) : materialType;
 }
 
+const DEFAULT_LAYER_NAME_KEYS = [
+  "panel.defaults.layer1",
+  "panel.defaults.layerN",
+  "panel.defaults.mappingLayerN",
+  "panel.defaults.layerRandom",
+];
+
+/** Persisted default layer names ("图层1" / "Layer 2") follow the current locale. */
+export function localizeLayerName(name: string, t: TranslateFn): string {
+  return relocalizeMessage(name, DEFAULT_LAYER_NAME_KEYS, t);
+}
+
+export function localizeLayers(layers: PanelLayer[], t: TranslateFn): PanelLayer[] {
+  return layers.map((layer) => {
+    const name = localizeLayerName(layer.name, t);
+    return name === layer.name ? layer : { ...layer, name };
+  });
+}
+
+const DEFAULT_TEXT_HTML_RE = /^<p>(.*)<\/p>$/s;
+
+/**
+ * Default node name, chart title and text content are stored in the creation locale;
+ * re-render them in the current one. Returns the same object when nothing changes.
+ */
+export function localizePanelElement(element: PanelElement, t: TranslateFn): PanelElement {
+  const key = DEFAULT_NODE_NAME_KEYS[element.materialType ?? ""];
+  if (!key) return element;
+  const name = element.name ? relocalizeMessage(element.name, key, t) : element.name;
+  const title = element.chart?.title ? relocalizeMessage(element.chart.title, key, t) : undefined;
+  let textHtml = element.textHtml;
+  const textInner = textHtml ? DEFAULT_TEXT_HTML_RE.exec(textHtml)?.[1] : undefined;
+  if (textInner) {
+    const localized = relocalizeMessage(textInner, "panel.defaults.doubleClickTextHtml", t);
+    if (localized !== textInner) textHtml = `<p>${localized}</p>`;
+  }
+  const titleChanged = title !== undefined && title !== element.chart?.title;
+  if (name === element.name && !titleChanged && textHtml === element.textHtml) return element;
+  return {
+    ...element,
+    name,
+    textHtml,
+    ...(titleChanged && element.chart ? { chart: { ...element.chart, title } } : null),
+  };
+}
+
 export function getDefaultLayer(t: TranslateFn = tFallback): PanelLayer {
   return {
     id: DEFAULT_LAYER_ID,

package/src/panel/utils/scope-template.ts

@@ -1,6 +1,10 @@
 import type { PanelElement } from "../types";
 import type { PanelTableConfig } from "@arronqzy/view-table";
 import { isUsableTableRawData } from "@arronqzy/view-table";
+import {
+  createSystemRoot,
+  isDayjsValue,
+} from "@arronqzy/blueprint-dsl";
 import { materializeChartLabelsFromScope, materializeChartValuesFromScope } from "./scope-template-chart";
 import {
   SCOPE_SPREAD_TEMPLATE_RE,
@@ -11,12 +15,12 @@ import {
   resolveSpreadScopePath,
 } from "./scope-template-spread";
 
-const SCOPE_TOKEN_RE = /\{(scope[^}]*)\}/g;
+const TEMPLATE_TOKEN_RE = /\{((?:scope|system)[^}]*)\}/g;
 
 export function hasScopeTemplate(value: string): boolean {
-  SCOPE_TOKEN_RE.lastIndex = 0;
+  TEMPLATE_TOKEN_RE.lastIndex = 0;
   SCOPE_SPREAD_TEMPLATE_RE.lastIndex = 0;
-  return SCOPE_TOKEN_RE.test(value) || SCOPE_SPREAD_TEMPLATE_RE.test(value);
+  return TEMPLATE_TOKEN_RE.test(value) || SCOPE_SPREAD_TEMPLATE_RE.test(value);
 }
 
 export function evaluateScopeExpression(
@@ -26,8 +30,13 @@ export function evaluateScopeExpression(
   const trimmed = expression.trim();
   if (!trimmed) return undefined;
   try {
-    const fn = new Function("scope", `"use strict"; return (${trimmed});`);
-    return fn(scope);
+    const system = createSystemRoot();
+    const fn = new Function(
+      "scope",
+      "system",
+      `"use strict"; return (${trimmed});`
+    );
+    return fn(scope, system);
   } catch {
     return undefined;
   }
@@ -39,6 +48,9 @@ function stringifyScopeValue(value: unknown): string {
   if (typeof value === "number" || typeof value === "boolean") {
     return String(value);
   }
+  if (isDayjsValue(value)) {
+    return value.toISOString();
+  }
   try {
     return JSON.stringify(value);
   } catch {
@@ -60,8 +72,8 @@ export function evaluateScopeTemplate(
     }
   );
 
-  // Only `{scope...}` tokens — keep ECharts / CSS braces like `{b}` intact.
-  return withSpread.replace(SCOPE_TOKEN_RE, (_: string, rawExpr: string) =>
+  // Only `{scope...}` / `{system...}` — keep ECharts / CSS braces like `{b}` intact.
+  return withSpread.replace(TEMPLATE_TOKEN_RE, (_: string, rawExpr: string) =>
     stringifyScopeValue(evaluateScopeExpression(rawExpr, scope))
   );
 }
@@ -91,7 +103,7 @@ function materializeTemplateValue(template: string, scope: unknown): unknown {
     );
   }
 
-  const singleMatch = /^\{(scope[^}]*)\}$/.exec(trimmed);
+  const singleMatch = /^\{((?:scope|system)[^}]*)\}$/.exec(trimmed);
   if (singleMatch) {
     return evaluateScopeExpression(singleMatch[1]!, scope);
   }