@arronqzy/react-view 0.0.1

package/src/panel/components/WorkspaceStageSplit.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useRef, useState, type ComponentRef, type ReactNode } from "react";
+
+import {
+  BluePrintReactRoot,
+  BlueprintPanelToolbar,
+  type BluePrintReactRootProps,
+  type BlueprintDebugToolbarProps,
+  type BlueprintLibraryListItem,
+} from "@arronqzy/react-blueprint";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@arronqzy/ui";
+
+type WorkspaceStageSplitProps = {
+  blueprintOpen: boolean;
+  viewStage: ReactNode;
+  blueprintProps: BluePrintReactRootProps;
+  blueprintLibraryItems?: BlueprintLibraryListItem[];
+  activeBlueprintLibraryId?: string | null;
+  currentBlueprintLabel?: string;
+  onSelectBlueprintLibraryItem?: (id: string) => void;
+  onRenameBlueprintLibraryItem?: (id: string, name: string) => void;
+  onDeleteBlueprintLibraryItem?: (id: string) => void;
+  onSaveBlueprint?: () => void;
+  onSyncBlueprint?: () => void;
+  canSyncBlueprint?: boolean;
+  blueprintDebug?: BlueprintDebugToolbarProps;
+};
+
+const MIN_BLUEPRINT_HEIGHT = 48;
+
+function BlueprintPanel({
+  blueprintOpen,
+  blueprintProps,
+  blueprintLibraryItems = [],
+  activeBlueprintLibraryId = null,
+  currentBlueprintLabel,
+  onSelectBlueprintLibraryItem,
+  onRenameBlueprintLibraryItem,
+  onDeleteBlueprintLibraryItem,
+  onSaveBlueprint,
+  onSyncBlueprint,
+  canSyncBlueprint = false,
+  blueprintDebug,
+}: {
+  blueprintOpen: boolean;
+  blueprintProps: BluePrintReactRootProps;
+  blueprintLibraryItems?: BlueprintLibraryListItem[];
+  activeBlueprintLibraryId?: string | null;
+  currentBlueprintLabel?: string;
+  onSelectBlueprintLibraryItem?: (id: string) => void;
+  onRenameBlueprintLibraryItem?: (id: string, name: string) => void;
+  onDeleteBlueprintLibraryItem?: (id: string) => void;
+  onSaveBlueprint?: () => void;
+  onSyncBlueprint?: () => void;
+  canSyncBlueprint?: boolean;
+  blueprintDebug?: BlueprintDebugToolbarProps;
+}) {
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [layoutReady, setLayoutReady] = useState(false);
+
+  useEffect(() => {
+    if (!blueprintOpen) {
+      setLayoutReady(false);
+      return;
+    }
+
+    const el = wrapRef.current;
+    if (!el) return;
+
+    const check = () => {
+      setLayoutReady(el.clientHeight >= MIN_BLUEPRINT_HEIGHT);
+    };
+
+    check();
+    const ro = new ResizeObserver(check);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [blueprintOpen]);
+
+  return (
+    <div
+      data-workspace-region="blueprint"
+      className="flex h-full min-h-0 flex-col overflow-hidden bg-background"
+    >
+      <div className="flex shrink-0 items-center border-b border-border bg-background/90 px-2 py-1">
+        <BlueprintPanelToolbar
+          items={blueprintLibraryItems}
+          activeId={activeBlueprintLibraryId}
+          currentBlueprintLabel={currentBlueprintLabel}
+          onSelectItem={(id) => onSelectBlueprintLibraryItem?.(id)}
+          onRenameItem={(id, name) => onRenameBlueprintLibraryItem?.(id, name)}
+          onDeleteItem={(id) => onDeleteBlueprintLibraryItem?.(id)}
+          onSave={() => onSaveBlueprint?.()}
+          onSync={() => onSyncBlueprint?.()}
+          canSync={canSyncBlueprint}
+          debug={blueprintDebug}
+        />
+      </div>
+      <div ref={wrapRef} className="relative min-h-0 flex-1">
+        {layoutReady ? (
+          <BluePrintReactRoot style={{ width: "100%", height: "100%" }} {...blueprintProps} />
+        ) : (
+          <div className="flex h-full items-center justify-center text-[11px] text-muted-foreground">
+            {blueprintOpen ? "画布加载中…" : ""}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function WorkspaceStageSplit({
+  blueprintOpen,
+  viewStage,
+  blueprintProps,
+  blueprintLibraryItems,
+  activeBlueprintLibraryId,
+  currentBlueprintLabel,
+  onSelectBlueprintLibraryItem,
+  onRenameBlueprintLibraryItem,
+  onDeleteBlueprintLibraryItem,
+  onSaveBlueprint,
+  onSyncBlueprint,
+  canSyncBlueprint,
+  blueprintDebug,
+}: WorkspaceStageSplitProps) {
+  const blueprintPanelRef = useRef<ComponentRef<typeof ResizablePanel>>(null);
+
+  useEffect(() => {
+    const panel = blueprintPanelRef.current;
+    if (!panel) return;
+    if (blueprintOpen) {
+      panel.expand();
+    } else {
+      panel.collapse();
+    }
+  }, [blueprintOpen]);
+
+  return (
+    <ResizablePanelGroup
+      direction="vertical"
+      className="relative min-h-0 flex-1"
+    >
+      <ResizablePanel defaultSize={100} minSize={10} className="min-h-0">
+        <div className="h-full min-h-0 overflow-hidden">{viewStage}</div>
+      </ResizablePanel>
+      <ResizableHandle
+        withHandle
+        className={blueprintOpen ? undefined : "hidden"}
+      />
+      <ResizablePanel
+        ref={blueprintPanelRef}
+        collapsible
+        collapsedSize={0}
+        defaultSize={0}
+        minSize={15}
+        className="min-h-0"
+      >
+        <BlueprintPanel
+          blueprintOpen={blueprintOpen}
+          blueprintProps={blueprintProps}
+          blueprintLibraryItems={blueprintLibraryItems}
+          activeBlueprintLibraryId={activeBlueprintLibraryId}
+          currentBlueprintLabel={currentBlueprintLabel}
+          onSelectBlueprintLibraryItem={onSelectBlueprintLibraryItem}
+          onRenameBlueprintLibraryItem={onRenameBlueprintLibraryItem}
+          onDeleteBlueprintLibraryItem={onDeleteBlueprintLibraryItem}
+          onSaveBlueprint={onSaveBlueprint}
+          onSyncBlueprint={onSyncBlueprint}
+          canSyncBlueprint={canSyncBlueprint}
+          blueprintDebug={blueprintDebug}
+        />
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+}

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

@@ -0,0 +1,170 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  type ReactNode,
+  type RefObject,
+} from "react";
+
+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";
+
+type ScopeConfigContextValue = {
+  warnings: ScopeTemplateWarning[];
+  warningsByField: Map<string, ScopeTemplateWarning[]>;
+  scrollToField: (fieldId: string) => void;
+};
+
+const ScopeConfigContext = createContext<ScopeConfigContextValue | null>(null);
+
+const INLINE_HINT_ATTR = "data-scope-inline-hint";
+
+function findFieldAnchor(
+  container: HTMLElement,
+  fieldId: string,
+  fieldWarnings: ScopeTemplateWarning[]
+): HTMLElement | null {
+  const existing = document.getElementById(scopeFieldDomId(fieldId));
+  if (existing) return existing;
+
+  const inputs = container.querySelectorAll("input, textarea");
+  for (const input of inputs) {
+    if (
+      !(input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement)
+    ) {
+      continue;
+    }
+    const matched = fieldWarnings.some(
+      (warning) =>
+        input.value === warning.template ||
+        input.value.includes(warning.expression)
+    );
+    if (!matched) continue;
+    const host = input.closest("label") ?? input.parentElement;
+    if (host instanceof HTMLElement) {
+      host.id = scopeFieldDomId(fieldId);
+      return host;
+    }
+  }
+
+  return null;
+}
+
+function attachInlineHints(
+  container: HTMLElement,
+  warningsByField: Map<string, ScopeTemplateWarning[]>
+) {
+  container
+    .querySelectorAll(`[${INLINE_HINT_ATTR}]`)
+    .forEach((node) => node.remove());
+
+  for (const [fieldId, fieldWarnings] of warningsByField) {
+    const anchor = findFieldAnchor(container, fieldId, fieldWarnings);
+    if (!anchor || anchor.querySelector(`[${INLINE_HINT_ATTR}]`)) continue;
+
+    const hint = document.createElement("div");
+    hint.setAttribute(INLINE_HINT_ATTR, "1");
+    hint.className = "space-y-0.5";
+    for (const warning of fieldWarnings) {
+      const line = document.createElement("p");
+      line.className =
+        "text-[10px] leading-relaxed text-amber-700 dark:text-amber-300";
+      line.textContent = warning.message;
+      hint.appendChild(line);
+    }
+    anchor.appendChild(hint);
+  }
+}
+
+export function ScopeConfigProvider({
+  scope,
+  warnings,
+  scrollContainerRef,
+  children,
+}: {
+  scope?: unknown;
+  warnings: ScopeTemplateWarning[];
+  scrollContainerRef?: RefObject<HTMLElement | null>;
+  children: ReactNode;
+}) {
+  const warningsByField = useMemo(
+    () => groupScopeWarningsByField(warnings),
+    [warnings]
+  );
+
+  const scrollToField = useCallback(
+    (fieldId: string) => {
+      const container = scrollContainerRef?.current;
+      const fieldWarnings = warningsByField.get(fieldId);
+      if (container && fieldWarnings?.length) {
+        findFieldAnchor(container, fieldId, fieldWarnings);
+      }
+
+      const target = document.getElementById(scopeFieldDomId(fieldId));
+      if (!target) return;
+
+      if (container && container.contains(target)) {
+        const containerRect = container.getBoundingClientRect();
+        const targetRect = target.getBoundingClientRect();
+        const offset =
+          targetRect.top -
+          containerRect.top +
+          container.scrollTop -
+          container.clientHeight / 2 +
+          targetRect.height / 2;
+        container.scrollTo({ top: Math.max(0, offset), behavior: "smooth" });
+      } else {
+        target.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+
+      target.classList.add("scope-field--highlight");
+      window.setTimeout(() => {
+        target.classList.remove("scope-field--highlight");
+      }, 1600);
+    },
+    [scrollContainerRef, warningsByField]
+  );
+
+  useLayoutEffect(() => {
+    const container = scrollContainerRef?.current;
+    if (!container || warnings.length === 0) {
+      return () => undefined;
+    }
+
+    attachInlineHints(container, warningsByField);
+    return () => {
+      container
+        .querySelectorAll(`[${INLINE_HINT_ATTR}]`)
+        .forEach((node) => node.remove());
+    };
+  }, [scrollContainerRef, warnings, warningsByField]);
+
+  const value = useMemo(
+    () => ({ warnings, warningsByField, scrollToField }),
+    [warnings, warningsByField, scrollToField]
+  );
+
+  return (
+    <ScopeConfigContext.Provider value={value}>
+      {children}
+      <ScopeTemplateAutocompleteHost
+        scope={scope}
+        containerRef={scrollContainerRef}
+      />
+    </ScopeConfigContext.Provider>
+  );
+}
+
+export function useScopeConfig() {
+  return useContext(ScopeConfigContext);
+}
+
+export function useScopeFieldWarnings(fieldId: string) {
+  const ctx = useScopeConfig();
+  return ctx?.warningsByField.get(fieldId) ?? [];
+}

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

@@ -0,0 +1,250 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@arronqzy/ui";
+
+import {
+  applyScopeAutocompleteSelection,
+  buildScopeExpression,
+  getScopeAutocompleteSuggestions,
+  parseScopeAutocomplete,
+  type ScopeAutocompleteState,
+} from "../../utils/scope-autocomplete";
+
+function isAutocompleteTarget(
+  target: EventTarget | null
+): target is HTMLInputElement | HTMLTextAreaElement {
+  if (target instanceof HTMLTextAreaElement) {
+    return target.dataset.scopeAutocomplete !== "off";
+  }
+  if (target instanceof HTMLInputElement) {
+    if (target.dataset.scopeAutocomplete === "off") return false;
+    const type = target.type;
+    return (
+      !type ||
+      type === "text" ||
+      type === "search" ||
+      type === "url" ||
+      type === "password"
+    );
+  }
+  return false;
+}
+
+function setNativeInputValue(
+  element: HTMLInputElement | HTMLTextAreaElement,
+  value: string
+) {
+  const proto =
+    element instanceof HTMLTextAreaElement
+      ? HTMLTextAreaElement.prototype
+      : HTMLInputElement.prototype;
+  const descriptor = Object.getOwnPropertyDescriptor(proto, "value");
+  descriptor?.set?.call(element, value);
+  element.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+type DropdownState = {
+  input: HTMLInputElement | HTMLTextAreaElement;
+  state: ScopeAutocompleteState;
+  suggestions: string[];
+  activeIndex: number;
+  rect: DOMRect;
+};
+
+export function ScopeTemplateAutocompleteHost({
+  scope,
+  containerRef,
+}: {
+  scope: unknown;
+  containerRef?: RefObject<HTMLElement | null>;
+}) {
+  const [dropdown, setDropdown] = useState<DropdownState | null>(null);
+  const dropdownRef = useRef<DropdownState | null>(null);
+  dropdownRef.current = dropdown;
+
+  const closeDropdown = useCallback(() => {
+    setDropdown(null);
+  }, []);
+
+  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);
+      if (!parsed) {
+        closeDropdown();
+        return;
+      }
+      const suggestions = getScopeAutocompleteSuggestions(scope, parsed);
+      if (suggestions.length === 0) {
+        closeDropdown();
+        return;
+      }
+      setDropdown({
+        input,
+        state: parsed,
+        suggestions,
+        activeIndex: 0,
+        rect: input.getBoundingClientRect(),
+      });
+    },
+    [closeDropdown, scope]
+  );
+
+  const applySuggestion = useCallback(
+    (index: number) => {
+      const current = dropdownRef.current;
+      if (!current) return;
+      const selected = current.suggestions[index];
+      if (!selected) return;
+
+      const { value, cursor } = applyScopeAutocompleteSelection(
+        current.input.value,
+        current.state,
+        selected
+      );
+      setNativeInputValue(current.input, value);
+      current.input.focus();
+      current.input.setSelectionRange(cursor, cursor);
+      closeDropdown();
+      window.requestAnimationFrame(() => {
+        refreshForInput(current.input);
+      });
+    },
+    [closeDropdown, refreshForInput]
+  );
+
+  useEffect(() => {
+    const container = containerRef?.current;
+    if (!container || scope === undefined) return;
+
+    const onFocusIn = (event: FocusEvent) => {
+      if (!isAutocompleteTarget(event.target)) return;
+      refreshForInput(event.target);
+    };
+
+    const onInput = (event: Event) => {
+      if (!isAutocompleteTarget(event.target)) return;
+      refreshForInput(event.target);
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      const current = dropdownRef.current;
+      if (!current || event.target !== current.input) return;
+
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setDropdown((prev) =>
+          prev
+            ? {
+                ...prev,
+                activeIndex: Math.min(
+                  prev.activeIndex + 1,
+                  prev.suggestions.length - 1
+                ),
+              }
+            : prev
+        );
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setDropdown((prev) =>
+          prev
+            ? { ...prev, activeIndex: Math.max(prev.activeIndex - 1, 0) }
+            : prev
+        );
+        return;
+      }
+      if (event.key === "Enter" || event.key === "Tab") {
+        if (current.suggestions.length > 0) {
+          event.preventDefault();
+          applySuggestion(current.activeIndex);
+        }
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeDropdown();
+      }
+    };
+
+    const onPointerDown = (event: MouseEvent) => {
+      const target = event.target as Node | null;
+      if (
+        dropdownRef.current?.input.contains(target ?? null) ||
+        (target instanceof Element && target.closest("[data-scope-ac-list]"))
+      ) {
+        return;
+      }
+      if (!container.contains(target)) {
+        closeDropdown();
+      }
+    };
+
+    container.addEventListener("focusin", onFocusIn);
+    container.addEventListener("input", onInput, true);
+    container.addEventListener("keydown", onKeyDown, true);
+    window.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("scroll", closeDropdown, true);
+    window.addEventListener("resize", closeDropdown);
+
+    return () => {
+      container.removeEventListener("focusin", onFocusIn);
+      container.removeEventListener("input", onInput, true);
+      container.removeEventListener("keydown", onKeyDown, true);
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("scroll", closeDropdown, true);
+      window.removeEventListener("resize", closeDropdown);
+    };
+  }, [
+    applySuggestion,
+    closeDropdown,
+    containerRef,
+    refreshForInput,
+    scope,
+  ]);
+
+  if (!dropdown || scope === undefined) return null;
+
+  return createPortal(
+    <div
+      data-scope-ac-list
+      className="fixed z-[10120] max-h-44 min-w-[140px] overflow-auto rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-md"
+      style={{
+        left: dropdown.rect.left,
+        top: dropdown.rect.bottom + 4,
+        width: Math.max(dropdown.rect.width, 160),
+      }}
+    >
+      {dropdown.suggestions.map((key, index) => {
+        const preview = buildScopeExpression(dropdown.state.path, key);
+        return (
+          <button
+            key={key}
+            type="button"
+            className={cn(
+              "flex w-full flex-col items-start gap-0.5 px-2 py-1.5 text-left text-[11px] hover:bg-accent",
+              index === dropdown.activeIndex && "bg-accent"
+            )}
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => applySuggestion(index)}
+          >
+            <span className="font-medium text-foreground">{key}</span>
+            <span className="font-mono text-[10px] text-muted-foreground">{`{${preview}}`}</span>
+          </button>
+        );
+      })}
+    </div>,
+    document.body
+  );
+}

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

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+
+import { useScopeConfig } from "./ScopeConfigContext";
+
+const WARNINGS_COLLAPSE_STORAGE_KEY = "panel:config-scope-warnings-collapsed";
+
+export function ScopeTemplateWarningsPanel() {
+  const ctx = useScopeConfig();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  useEffect(() => {
+    const stored = window.localStorage.getItem(WARNINGS_COLLAPSE_STORAGE_KEY);
+    if (stored === "1") setIsCollapsed(true);
+  }, []);
+
+  useEffect(() => {
+    window.localStorage.setItem(
+      WARNINGS_COLLAPSE_STORAGE_KEY,
+      isCollapsed ? "1" : "0"
+    );
+  }, [isCollapsed]);
+
+  if (!ctx || ctx.warnings.length === 0) return null;
+
+  return (
+    <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">
+          异常调用警告
+          <span className="ml-1.5 rounded bg-amber-500/15 px-1.5 py-0.5 text-[10px] font-semibold">
+            {ctx.warnings.length}
+          </span>
+        </div>
+        <button
+          type="button"
+          className="rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent"
+          onClick={() => setIsCollapsed((prev) => !prev)}
+        >
+          {isCollapsed ? "展开警告" : "收起警告"}
+        </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}`}>
+              <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"
+                onClick={() => ctx.scrollToField(warning.fieldId)}
+              >
+                {warning.message}
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}

package/src/panel/constants/messages.ts

@@ -0,0 +1,34 @@
+export const PANEL_MESSAGES = {
+  nodeNotFound: "未找到节点，可能已被删除",
+  sourceNodeNotFound: "未找到源节点，可能已被删除",
+  targetLayerNotFound: "目标图层不存在",
+  nodeMoveSameLayer: "已在当前图层",
+  nodeDeleteLocked: "锁定节点不可删除，请在右侧【节点信息】中取消锁定后重试",
+  nodeDeleteLayerLocked: "当前节点所在图层已锁定，无法删除。请先在图层栏取消锁定",
+  nodeBatchDeleteContainsLocked:
+    "选中节点包含锁定节点，无法批量删除。请先在右侧【节点信息】中取消锁定",
+  nodeMoveLocked: "锁定节点不允许更换图层，请先在右侧【节点信息】中取消锁定",
+  nodeMoveSourceLayerLocked: "节点所在图层已锁定，无法更换图层。请先在图层栏取消锁定",
+  nodeMoveTargetLayerLocked: "目标图层已锁定，无法移入。请先在图层栏取消锁定",
+  activeLayerLockedCannotAdd: "当前图层已锁定，无法新增节点",
+  nodeLayerLockedCannotCopy: "当前节点所在图层已锁定，无法复制",
+  selectionContainsLockedLayerNode: "选中节点包含锁定图层内容，无法批量删除",
+  sourceLayerLockedCannotPaste: "复制源节点所在图层已锁定，无法粘贴",
+  nodeConfigLocked: "当前节点已锁定，配置项不可编辑。",
+  nodeConfigLayerLocked: "当前节点所在图层已锁定，配置项不可编辑。",
+  readImageFailed: "读取图片失败",
+  readAudioFailed: "读取音频失败",
+  readVideoFailed: "读取视频失败",
+  readRecordAudioFailed: "录音读取失败",
+  audioLocalSaved: "已写入本地音频（base64）",
+  audioRemoteUploaded: "已上传服务器并更新远程链接",
+  audioServerUploadFailed: "服务器上传失败，仅保留本地音频",
+  audioPosterSet: "已设置音频占位图",
+  audioRecordUnsupported: "当前环境不支持录音",
+  audioRecordSaved: "录音已保存，可直接播放",
+  audioRecording: "录音中...",
+  audioRecordStartFailed: "无法开始录音，请检查麦克风权限",
+  videoLocalSaved: "已写入本地视频（base64）",
+  videoRemoteUploaded: "已上传服务器并更新远程链接",
+  videoServerUploadFailed: "服务器上传失败，仅保留本地视频",
+} as const;

package/src/panel/constants/zIndex.ts

@@ -0,0 +1,6 @@
+export const PANEL_Z_INDEX = {
+  /** 仅高于画布内容层，低于弹窗蒙层 */
+  ruler: 100,
+  toolbar: 1200,
+  historyPopover: 1210,
+} as const;