@arronqzy/react-view 1.0.5 → 1.0.9

package/src/panel/components/ViewElementScopePanel.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
 
 import { formatViewElementScope } from "../utils/scope-template";
 import { ConfigHintIcon } from "./ConfigHintIcon";
@@ -10,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);
@@ -44,13 +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>
-          <ConfigHintIcon label="Scope 模版" contentClassName="max-w-[380px]">
+          <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>
@@ -59,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 ? (

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/ScopeTemplatePreviewHost.tsx

@@ -6,6 +6,7 @@ import {
   useState,
   type RefObject,
 } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
 import { createPortal } from "react-dom";
 
 import type { PanelElement } from "../../types";
@@ -92,8 +93,9 @@ function inferFieldIdFromDom(
 ): string | undefined {
   const label = input.closest("label");
   const labelText = label?.textContent ?? "";
-  if (labelText.includes("类目")) return "chart.labelsText";
-  if (labelText.includes("数值")) return "chart.valuesText";
+  // 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;
 }
 
@@ -106,11 +108,12 @@ function ScopeTemplatePreviewPanel({
   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)
-    ? `数组 · ${previewValue.length} 项`
+    ? t("panel.scope.previewArray", { count: previewValue.length })
     : typeof previewValue;
 
   return (
@@ -120,9 +123,9 @@ function ScopeTemplatePreviewPanel({
         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">解析预览</span>
+        <span className="font-medium text-foreground/80">{t("panel.scope.previewTitle")}</span>
         <span className="shrink-0 text-[10px]">
-          {previewType} · {isExpanded ? "收起" : "展开"}
+          {previewType} · {isExpanded ? t("panel.scope.collapsePreview") : t("panel.scope.expandPreview")}
         </span>
       </button>
       {isExpanded ? (
@@ -143,12 +146,13 @@ export function ScopeTemplatePreviewHost({
   element: PanelElement | null;
   containerRef?: RefObject<HTMLElement | null>;
 }) {
+  const { t } = useI18n();
   const keySeed = useId();
   const [anchors, setAnchors] = useState<PreviewAnchor[]>([]);
 
   const templateFields = useMemo(
-    () => (element ? collectElementScopeTemplateFields(element) : []),
-    [element]
+    () => (element ? collectElementScopeTemplateFields(element, t) : []),
+    [element, t]
   );
 
   const scanAnchors = useCallback(() => {

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

@@ -1,24 +1,12 @@
+import { useI18n } from "@arronqzy/i18n/react";
+
 export function ScopeTemplateUsageHint() {
+  const { t } = useI18n();
+
   return (
     <div className="space-y-2">
-      <p>
-        表单中可使用模版字符串引用 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>
-      <p>
-        数组展开模版{" "}
-        <code className="rounded bg-muted px-1">{`[...{scope?.a?.b}]`}</code>
-        、
-        <code className="rounded bg-muted px-1">
-          {`[...{scope?.data?.data?.statusName}]`}
-        </code>
-        ：在文本字段输出逗号分隔字符串；在图表「类目」等数组字段会展开为 n
-        个独立项（如 3 条数据对应 3 个类目）。
-      </p>
+      <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,7 +39,7 @@ 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 ? (

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

@@ -0,0 +1,205 @@
+import type { Condition, ConditionLeaf, ConditionOp } from "@arronqzy/view-table";
+import {
+  addConditionItem,
+  getConditionLogic,
+  isConditionLeaf,
+  listConditionItems,
+  removeConditionItem,
+  setConditionLogic,
+  updateConditionLeaf,
+  type ConditionLogic,
+} from "@arronqzy/view-table";
+import { useI18n } from "@arronqzy/i18n/react";
+import {
+  Button,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@arronqzy/ui";
+import React from "react";
+
+const CONDITION_OPS: ConditionOp[] = [
+  "eq",
+  "neq",
+  "gt",
+  "gte",
+  "lt",
+  "lte",
+  "contains",
+  "startsWith",
+  "endsWith",
+  "in",
+  "empty",
+  "notEmpty",
+  "regex",
+  "truthy",
+  "falsy",
+];
+
+function leafValueText(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return "";
+  }
+}
+
+function parseLeafValue(text: string): unknown {
+  const trimmed = text.trim();
+  if (trimmed === "") return "";
+  if (trimmed === "true") return true;
+  if (trimmed === "false") return false;
+  if (/^-?\d+(\.\d+)?$/.test(trimmed)) return Number(trimmed);
+  return text;
+}
+
+export function ConditionEditor({
+  value,
+  onChange,
+  showField = false,
+  fieldClass = "space-y-1",
+  inputClass = "h-8 text-[11px]",
+}: {
+  value: Condition | undefined;
+  onChange: (next: Condition) => void;
+  showField?: boolean;
+  fieldClass?: string;
+  inputClass?: string;
+}) {
+  const { t } = useI18n();
+  const logic = getConditionLogic(value);
+  const items = listConditionItems(value);
+
+  const opLabel = (op: ConditionOp) => t(`panel.config.tableOp.${op}`);
+
+  const logicLabel =
+    logic === "or"
+      ? t("panel.config.tableConditionLogicOr")
+      : logic === "not"
+        ? t("panel.config.tableConditionLogicNot")
+        : t("panel.config.tableConditionLogicAnd");
+
+  return (
+    <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>
+          <Select
+            value={logic}
+            onValueChange={(next) => onChange(setConditionLogic(value, next as ConditionLogic))}
+          >
+            <SelectTrigger className={inputClass}>
+              <SelectValue>{logicLabel}</SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="and">{t("panel.config.tableConditionLogicAnd")}</SelectItem>
+              <SelectItem value="or">{t("panel.config.tableConditionLogicOr")}</SelectItem>
+              <SelectItem value="not">{t("panel.config.tableConditionLogicNot")}</SelectItem>
+            </SelectContent>
+          </Select>
+        </label>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="mt-4 h-7 shrink-0 px-2 text-[11px]"
+          onClick={() => onChange(addConditionItem(value))}
+        >
+          {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
+          : { op: "eq", value: "" };
+        const needsValue = !["empty", "notEmpty", "truthy", "falsy"].includes(leaf.op);
+        return (
+          <div
+            key={`cond-${index}`}
+            className="space-y-1.5 rounded-md border border-border/50 bg-background/70 p-2"
+          >
+            <div className="flex items-center justify-between gap-2">
+              <div className="text-[10px] font-medium text-muted-foreground">
+                {t("panel.config.tableConditionItem", { n: index + 1 })}
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-6 px-1.5 text-[11px] text-destructive"
+                disabled={items.length <= 1}
+                onClick={() => onChange(removeConditionItem(value, index))}
+              >
+                ×
+              </Button>
+            </div>
+            <div className={`grid grid-cols-1 gap-1.5 ${showField ? "sm:grid-cols-3" : "sm:grid-cols-2"}`}>
+              <label className={fieldClass}>
+                <div className="text-[11px] text-muted-foreground">{t("panel.config.tableConditionOp")}</div>
+                <Select
+                  value={leaf.op}
+                  onValueChange={(next) =>
+                    onChange(updateConditionLeaf(value, index, { op: next as ConditionOp }))
+                  }
+                >
+                  <SelectTrigger className={inputClass}>
+                    <SelectValue>{opLabel(leaf.op)}</SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CONDITION_OPS.map((op) => (
+                      <SelectItem key={op} value={op}>
+                        {opLabel(op)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </label>
+              {showField ? (
+                <label className={fieldClass}>
+                  <div className="text-[11px] text-muted-foreground">{t("panel.config.tableConditionField")}</div>
+                  <Input
+                    value={leaf.field ?? ""}
+                    onChange={(e) =>
+                      onChange(
+                        updateConditionLeaf(value, index, {
+                          field: e.target.value || undefined,
+                        })
+                      )
+                    }
+                    className={inputClass}
+                    placeholder={t("panel.config.tableConditionFieldPlaceholder")}
+                  />
+                </label>
+              ) : null}
+              {needsValue ? (
+                <label className={fieldClass}>
+                  <div className="text-[11px] text-muted-foreground">{t("panel.config.tableConditionValue")}</div>
+                  <Input
+                    value={leafValueText(leaf.value)}
+                    onChange={(e) =>
+                      onChange(
+                        updateConditionLeaf(value, index, {
+                          value: parseLeafValue(e.target.value),
+                        })
+                      )
+                    }
+                    className={inputClass}
+                    placeholder={t("panel.config.tableConditionValuePlaceholder")}
+                  />
+                </label>
+              ) : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,115 @@
+import React, { useMemo } from "react";
+import { Button } from "@arronqzy/ui";
+import { useI18n } from "@arronqzy/i18n/react";
+import CodeMirror from "@uiw/react-codemirror";
+import { json } from "@codemirror/lang-json";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { EditorView } from "@codemirror/view";
+
+export function JsonCodeEditor({
+  value,
+  onChange,
+  className,
+}: {
+  value: string;
+  onChange: (next: string) => void;
+  className?: string;
+}) {
+  const { t } = useI18n();
+  const extensions = useMemo(
+    () => [
+      json(),
+      EditorView.lineWrapping,
+      EditorView.theme({
+        "&": {
+          height: "100%",
+          maxHeight: "100%",
+          fontSize: "13px",
+          backgroundColor: "transparent",
+        },
+        "&.cm-editor": {
+          height: "100%",
+          maxHeight: "100%",
+          backgroundColor: "transparent",
+        },
+        ".cm-scroller": {
+          overflow: "auto",
+          fontFamily:
+            "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          lineHeight: "1.55",
+        },
+        ".cm-content": { padding: "8px 0", caretColor: "#e2e8f0" },
+        ".cm-gutters": {
+          backgroundColor: "transparent",
+          borderRight: "1px solid rgba(148,163,184,0.12)",
+          color: "#64748b",
+        },
+        ".cm-activeLineGutter": { backgroundColor: "rgba(148,163,184,0.08)" },
+        ".cm-activeLine": { backgroundColor: "rgba(148,163,184,0.06)" },
+      }),
+    ],
+    []
+  );
+
+  const formatJson = () => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    try {
+      onChange(JSON.stringify(JSON.parse(trimmed), null, 2));
+    } catch {
+      // keep as-is; parent validates on save
+    }
+  };
+
+  return (
+    <div
+      className={[
+        "flex h-full min-h-0 max-h-full flex-col overflow-hidden rounded-xl border border-slate-700/60 bg-[#0c1220] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <div className="flex shrink-0 items-center justify-between gap-2 border-b border-white/5 px-2.5 py-1.5">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="rounded-md bg-sky-500/15 px-1.5 py-0.5 font-mono text-[10px] font-medium tracking-wide text-sky-300">
+            JSON
+          </span>
+          <span className="truncate text-[11px] text-slate-400">
+            {t("panel.config.tableRowsEditEditorHint")}
+          </span>
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-6 shrink-0 rounded-md px-2 text-[11px] text-slate-300 hover:bg-white/10 hover:text-white"
+          onClick={formatJson}
+        >
+          {t("panel.config.tableRowsEditFormat")}
+        </Button>
+      </div>
+      <div className="relative min-h-0 flex-1 overflow-hidden">
+        <div className="absolute inset-0 overflow-hidden">
+          <CodeMirror
+            value={value}
+            height="100%"
+            maxHeight="100%"
+            theme={oneDark}
+            extensions={extensions}
+            basicSetup={{
+              lineNumbers: true,
+              foldGutter: true,
+              highlightActiveLine: true,
+              bracketMatching: true,
+              autocompletion: true,
+            }}
+            onChange={(next) => onChange(next)}
+            className="h-full max-h-full [&_.cm-editor]:h-full [&_.cm-editor]:max-h-full [&_.cm-editor]:outline-none"
+            aria-label={t("panel.config.tableRowsEditTitle")}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}