@arronqzy/vue-view 0.1.0 → 0.1.3

package/src/panel/components/elementsLayerNodes.ts

@@ -10,10 +10,12 @@ import {
   type VNode,
   type Component,
 } from "vue";
+import { useI18n } from "@arronqzy/i18n/vue";
 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 from "./table/TableNodeContent.vue";
 
 export { CHART_TYPES };
 
@@ -62,8 +64,11 @@ export const TextNodeContent = defineComponent({
   },
   emits: ["change"],
   setup(p, { emit }) {
+    const { t } = useI18n();
     const nodeRef = ref<HTMLDivElement | null>(null);
-    const html = computed(() => p.element.textHtml ?? "<p>双击输入文本</p>");
+    const html = computed(
+      () => p.element.textHtml ?? `<p>${t("panel.defaults.doubleClickTextHtml")}</p>`
+    );
     const textStyle = computed(() => ({
       fontFamily: p.element.textFontFamily || undefined,
       fontSize: p.element.textFontSize ? `${p.element.textFontSize}px` : undefined,
@@ -101,6 +106,7 @@ export const GridNodeContent = defineComponent({
     previewMode: { type: Boolean, default: false },
   },
   setup(p) {
+    const { t } = useI18n();
     const rows = computed(() => Math.max(1, Math.floor(p.element.gridRows ?? 2)));
     const cols = computed(() => Math.max(1, Math.floor(p.element.gridCols ?? 3)));
     const gap = computed(() => Math.max(0, p.element.gridGap ?? 8));
@@ -167,7 +173,9 @@ export const GridNodeContent = defineComponent({
                   ? "border-primary/70 bg-primary/10"
                   : "border-border/60 bg-muted/20",
               ].join(" "),
-              title: `槽位 ${idx + 1}${occupied.value.has(idx) ? "（已占用）" : "（空）"}`,
+              title: occupied.value.has(idx)
+                ? t("panel.config.slotOccupied", { n: idx + 1 })
+                : t("panel.config.slotEmpty", { n: idx + 1 }),
             })
           )
         ),
@@ -266,6 +274,7 @@ export const AudioNodeContent = defineComponent({
     selected: { type: Boolean, default: false },
   },
   setup(p) {
+    const { t } = useI18n();
     const audioRef = ref<HTMLAudioElement | null>(null);
     const playing = ref(false);
     const src = computed(() => p.element.audioSrc || p.element.audioRemoteUrl || "");
@@ -369,12 +378,12 @@ export const AudioNodeContent = defineComponent({
                     onMousedown: (e: Event) => e.stopPropagation(),
                     onPointerdown: (e: Event) => e.stopPropagation(),
                     onClick: togglePlay,
-                    title: !src.value ? "请先配置音频源" : playing.value ? "点击暂停" : "点击播放",
+                    title: !src.value ? t("panel.config.configureAudioFirst") : playing.value ? t("panel.config.clickPause") : t("panel.config.clickPlay"),
                   },
                   [
                     h("img", {
                       src: poster.value,
-                      alt: "音频占位图",
+                      alt: t("panel.config.audioPoster"),
                       class: "h-full w-full object-cover",
                       draggable: false,
                       onDragstart: (e: Event) => e.preventDefault(),
@@ -389,7 +398,7 @@ export const AudioNodeContent = defineComponent({
                     onMousedown: (e: Event) => e.stopPropagation(),
                     onPointerdown: (e: Event) => e.stopPropagation(),
                     onClick: togglePlay,
-                    title: !src.value ? "请先配置音频源" : playing.value ? "点击暂停" : "点击播放",
+                    title: !src.value ? t("panel.config.configureAudioFirst") : playing.value ? t("panel.config.clickPause") : t("panel.config.clickPlay"),
                   },
                   [renderIcon()]
                 ),
@@ -416,7 +425,7 @@ export const AudioNodeContent = defineComponent({
                 class:
                   "pointer-events-none absolute right-2 top-2 rounded bg-black/55 px-1.5 py-0.5 text-[10px] text-white",
               },
-              !src.value ? "未配置音频" : playing.value ? "暂停" : "播放"
+              !src.value ? t("panel.config.audioNotConfigured") : playing.value ? t("panel.config.pause") : t("panel.config.play")
             ),
             h("audio", { ref: audioRef, src: src.value, preload: "metadata", class: "hidden" }),
           ]
@@ -429,11 +438,11 @@ export const AudioNodeContent = defineComponent({
             class:
               "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")
         );
       }
       return h("div", { class: "relative flex h-full w-full items-center justify-center rounded border border-border/60 bg-muted/10 px-2" }, [
-        h("div", { class: "pointer-events-none text-[11px] text-muted-foreground" }, playing.value ? "音频播放中" : "音频已就绪"),
+        h("div", { class: "pointer-events-none text-[11px] text-muted-foreground" }, playing.value ? t("panel.config.audioPlaying") : t("panel.config.audioReady")),
         h(
           "button",
           {
@@ -442,9 +451,9 @@ export const AudioNodeContent = defineComponent({
             onMousedown: (e: Event) => e.stopPropagation(),
             onPointerdown: (e: Event) => e.stopPropagation(),
             onClick: togglePlay,
-            title: playing.value ? "点击暂停" : "点击播放",
+            title: playing.value ? t("panel.config.clickPause") : t("panel.config.clickPlay"),
           },
-          playing.value ? "暂停" : "播放"
+          playing.value ? t("panel.config.pause") : t("panel.config.play")
         ),
         h("audio", { ref: audioRef, src: src.value, preload: "metadata", class: "hidden" }),
       ]);
@@ -459,6 +468,7 @@ export const VideoNodeContent = defineComponent({
     selected: { type: Boolean, default: false },
   },
   setup(p) {
+    const { t } = useI18n();
     const videoRef = ref<HTMLVideoElement | null>(null);
     const playing = ref(false);
     const src = computed(() => p.element.videoSrc || p.element.videoRemoteUrl || "");
@@ -504,7 +514,7 @@ export const VideoNodeContent = defineComponent({
             class:
               "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")
         );
       }
       return h("div", { class: "relative h-full w-full p-1" }, [
@@ -521,9 +531,9 @@ export const VideoNodeContent = defineComponent({
             onMousedown: (e: Event) => e.stopPropagation(),
             onPointerdown: (e: Event) => e.stopPropagation(),
             onClick: togglePlay,
-            title: playing.value ? "点击暂停" : "点击播放",
+            title: playing.value ? t("panel.config.clickPause") : t("panel.config.clickPlay"),
           },
-          playing.value ? "暂停" : "播放"
+          playing.value ? t("panel.config.pause") : t("panel.config.play")
         ),
       ]);
     };
@@ -681,6 +691,7 @@ export const ReferenceNodeContent = defineComponent({
     previewMode: { type: Boolean, default: false },
   },
   setup(p) {
+    const { t } = useI18n();
     const sourceNodes = computed(() => {
       const fromDeep =
         p.element.refCopyMode === "deep"
@@ -715,7 +726,7 @@ export const ReferenceNodeContent = defineComponent({
 
     return () => {
       if (!layout.value || sourceNodes.value.length === 0) {
-        const hintText = p.element.refLayerId ? "引用图层暂无节点" : "请在右侧选择引用图层";
+        const hintText = p.element.refLayerId ? t("panel.config.refLayerEmpty") : t("panel.config.selectRefLayer");
         return h("div", { class: "flex h-full w-full items-center justify-center" }, [
           h(
             "div",
@@ -777,7 +788,9 @@ export const ReferenceNodeContent = defineComponent({
                         })
                       : node.materialType === "geometry"
                         ? h(GeometryNodeContent, { element: node })
-                        : h("div", { class: "h-full w-full" }),
+                        : node.materialType === "table"
+                          ? h(TableNodeContent, { element: node })
+                          : h("div", { class: "h-full w-full" }),
                 ]
               ),
             ]
@@ -794,6 +807,7 @@ export const ImageNodeContent = defineComponent({
     element: { type: Object as PropType<PanelElement>, required: true },
   },
   setup(p) {
+    const { t } = useI18n();
     return () => {
       if (hasBackgroundImage(p.element)) return null;
       return h(
@@ -802,7 +816,7 @@ export const ImageNodeContent = defineComponent({
           class:
             "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")
       );
     };
   },
@@ -814,9 +828,14 @@ export const EmptyNodePlaceholder = defineComponent({
     element: { type: Object as PropType<PanelElement>, required: true },
   },
   setup(p) {
+    const { t } = useI18n();
     return () => {
-      const labelMap: Record<string, string> = { video: "视频占位", audio: "音频占位" };
-      const label = labelMap[p.element.materialType ?? ""] ?? `${p.element.materialType ?? "节点"} 占位`;
+      const labelMap: Record<string, string> = { video: t("panel.config.videoPlaceholder"), audio: t("panel.config.audioPlaceholder") };
+      const label =
+        labelMap[p.element.materialType ?? ""] ??
+        t("panel.config.materialPlaceholder", {
+          type: p.element.materialType ?? t("common.node"),
+        });
       return h(
         "div",
         {

package/src/panel/components/materialSidebarData.ts

@@ -1,3 +1,4 @@
+import type { TranslateFn } from "@arronqzy/i18n";
 import type { PanelElement } from "../types";
 
 export type MaterialCategoryId = "charts" | "basic" | "media";
@@ -13,60 +14,72 @@ export type MaterialCategory = {
   items: MaterialItem[];
 };
 
-export const MATERIAL_LABEL_MAP: Record<string, string> = {
-  bar: "柱状图",
-  line: "折线图",
-  pie: "饼图",
-  area: "面积图",
-  scatter: "散点图",
-  radar: "雷达图",
-  gauge: "仪表盘",
-  funnel: "漏斗图",
-  text: "文本",
-  rect: "矩形",
-  grid: "网格布局",
-  image: "图片",
-  video: "视频",
-  audio: "音频",
-  reference: "引用组件",
-  geometry: "几何",
+const MATERIAL_LABEL_KEYS: Record<string, string> = {
+  bar: "panel.material.bar",
+  line: "panel.material.line",
+  pie: "panel.material.pie",
+  area: "panel.material.area",
+  scatter: "panel.material.scatter",
+  radar: "panel.material.radar",
+  gauge: "panel.material.gauge",
+  funnel: "panel.material.funnel",
+  text: "panel.material.text",
+  rect: "panel.material.rect",
+  grid: "panel.material.grid",
+  image: "panel.material.image",
+  video: "panel.material.video",
+  audio: "panel.material.audio",
+  reference: "panel.material.reference",
+  geometry: "panel.material.geometry",
+  table: "panel.material.table",
 };
 
-export const defaultCategories: MaterialCategory[] = [
-  {
-    id: "charts",
-    title: "图表",
-    items: [
-      { id: "bar", title: "柱状图" },
-      { id: "line", title: "折线图" },
-      { id: "pie", title: "饼图" },
-      { id: "area", title: "面积图" },
-      { id: "scatter", title: "散点图" },
-      { id: "radar", title: "雷达图" },
-      { id: "gauge", title: "仪表盘" },
-      { id: "funnel", title: "漏斗图" },
-    ],
-  },
-  {
-    id: "basic",
-    title: "基础",
-    items: [
-      { id: "text", title: "文本" },
-      { id: "geometry", title: "几何" },
-      { id: "grid", title: "网格布局" },
-      { id: "image", title: "图片" },
-      { id: "reference", title: "引用组件" },
-    ],
-  },
-  {
-    id: "media",
-    title: "媒体",
-    items: [
-      { id: "video", title: "视频" },
-      { id: "audio", title: "音频" },
-    ],
-  },
-];
+export function getMaterialLabelMap(t: TranslateFn): Record<string, string> {
+  const map: Record<string, string> = {};
+  for (const [id, key] of Object.entries(MATERIAL_LABEL_KEYS)) {
+    map[id] = t(key);
+  }
+  return map;
+}
+
+export function getDefaultCategories(t: TranslateFn): MaterialCategory[] {
+  return [
+    {
+      id: "charts",
+      title: t("panel.material.charts"),
+      items: [
+        { id: "bar", title: t("panel.material.bar") },
+        { id: "line", title: t("panel.material.line") },
+        { id: "pie", title: t("panel.material.pie") },
+        { id: "area", title: t("panel.material.area") },
+        { id: "scatter", title: t("panel.material.scatter") },
+        { id: "radar", title: t("panel.material.radar") },
+        { id: "gauge", title: t("panel.material.gauge") },
+        { id: "funnel", title: t("panel.material.funnel") },
+      ],
+    },
+    {
+      id: "basic",
+      title: t("panel.material.basic"),
+      items: [
+        { id: "text", title: t("panel.material.text") },
+        { id: "table", title: t("panel.material.table") },
+        { id: "geometry", title: t("panel.material.geometry") },
+        { id: "grid", title: t("panel.material.grid") },
+        { id: "image", title: t("panel.material.image") },
+        { id: "reference", title: t("panel.material.reference") },
+      ],
+    },
+    {
+      id: "media",
+      title: t("panel.material.media"),
+      items: [
+        { id: "video", title: t("panel.material.video") },
+        { id: "audio", title: t("panel.material.audio") },
+      ],
+    },
+  ];
+}
 
 export const themedScrollbarClass =
   "scrollbar-thin [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-muted/40 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/80 [&::-webkit-scrollbar-thumb]:hover:bg-border";
@@ -79,7 +92,13 @@ export function compareGridTreeChildOrder(a: PanelElement, b: PanelElement): num
   return a.id.localeCompare(b.id);
 }
 
-export function getNodeDisplayName(node: PanelElement) {
+export function getNodeDisplayName(node: PanelElement, t?: TranslateFn) {
   const customName = node.name?.trim();
-  return customName || node.chart?.title || MATERIAL_LABEL_MAP[node.materialType ?? ""] || node.id;
+  if (customName) return customName;
+  if (node.chart?.title) return node.chart.title;
+  if (t) {
+    const key = MATERIAL_LABEL_KEYS[node.materialType ?? ""];
+    if (key) return t(key);
+  }
+  return node.materialType || node.id;
 }

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, onWatcherCleanup, shallowRef, toValue, watch, type MaybeRef } from "vue";
 import type { PanelElement } from "../../types";
 import { hasScopeTemplate } from "../../utils/scope-template";
@@ -8,6 +9,8 @@ import {
 } from "../../utils/scope-template-preview";
 import ScopeTemplatePreviewPanel from "./ScopeTemplatePreviewPanel.vue";
 
+const { t, locale } = useI18n();
+
 const PREVIEW_SLOT_ATTR = "data-scope-preview-slot";
 const PREVIEW_KEY_ATTR = "data-scope-preview-key";
 
@@ -95,8 +98,10 @@ 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";
+  if (labelText.includes(t("panel.scope.fieldChartLabelsText")) || labelText.includes("类目") || /labels?/i.test(labelText))
+    return "chart.labelsText";
+  if (labelText.includes(t("panel.scope.fieldChartValuesText")) || labelText.includes("数值") || /values?/i.test(labelText))
+    return "chart.valuesText";
   return undefined;
 }
 

package/src/panel/components/scope-config/ScopeTemplatePreviewPanel.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { ref } from "vue";
 import {
   formatScopeTemplatePreview,
   resolveScopeTemplatePreview,
 } from "../../utils/scope-template-preview";
 
+const { t, locale } = useI18n();
+
 const props = defineProps<{
   template: string;
   scope: unknown;
@@ -18,7 +21,7 @@ const previewValue = () =>
 const previewText = () => formatScopeTemplatePreview(previewValue());
 const previewType = () => {
   const value = previewValue();
-  return Array.isArray(value) ? `数组 · ${value.length} 项` : typeof value;
+  return Array.isArray(value) ? t("panel.scope.previewArray", { count: value.length }) : typeof value;
 };
 </script>
 
@@ -29,9 +32,9 @@ const previewType = () => {
       class="flex w-full items-center justify-between gap-2 px-2 py-1 text-left text-[10px] text-muted-foreground hover:bg-accent/40"
       @click="isExpanded = !isExpanded"
     >
-      <span class="font-medium text-foreground/80">解析预览</span>
+      <span class="font-medium text-foreground/80">{{ t("panel.scope.previewTitle") }}</span>
       <span class="shrink-0 text-[10px]">
-        {{ previewType() }} · {{ isExpanded ? "收起" : "展开" }}
+        {{ previewType() }} · {{ isExpanded ? t("panel.scope.collapsePreview") : t("panel.scope.expandPreview") }}
       </span>
     </button>
     <pre

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

@@ -1,20 +1,11 @@
+<script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
+const { t } = useI18n();
+</script>
+
 <template>
   <div class="space-y-2">
-    <p>
-      表单中可使用模版字符串引用 scope，例如
-      <code class="rounded bg-muted px-1">{`{scope?.a||0}`}</code>
-      、
-      <code class="rounded bg-muted px-1">{`{scope?.name||''}`}</code>
-      。支持 <code class="rounded bg-muted px-1">?.</code> 与
-      <code class="rounded bg-muted px-1">||</code> 占位。
-    </p>
-    <p>
-      数组展开模版
-      <code class="rounded bg-muted px-1">{`[...{scope?.a?.b}]`}</code>
-      、
-      <code class="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>
 </template>

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
 import { onMounted, ref, watch } from "vue";
 import { useScopeConfig } from "./useScopeConfig";
 
+const { t, locale } = useI18n();
 const WARNINGS_COLLAPSE_STORAGE_KEY = "panel:config-scope-warnings-collapsed";
 
 const ctx = useScopeConfig();
@@ -27,7 +29,7 @@ watch(isCollapsed, (next) => {
   >
     <div class="flex items-center justify-between gap-2">
       <div class="text-[11px] font-medium text-amber-700 dark:text-amber-300">
-        异常调用警告
+        {{ t("panel.scope.warningsTitle") }}
         <span
           class="ml-1.5 rounded bg-amber-500/15 px-1.5 py-0.5 text-[10px] font-semibold"
         >
@@ -39,7 +41,7 @@ watch(isCollapsed, (next) => {
         class="rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent"
         @click="isCollapsed = !isCollapsed"
       >
-        {{ isCollapsed ? "展开警告" : "收起警告" }}
+        {{ isCollapsed ? t("panel.scope.expandWarnings") : t("panel.scope.collapseWarnings") }}
       </button>
     </div>
     <ul

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

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+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/vue";
+import { Button, Input, Select } from "ant-design-vue";
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: Condition;
+    showField?: boolean;
+    disabled?: boolean;
+  }>(),
+  { showField: false, disabled: false }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: Condition];
+}>();
+
+const { t } = useI18n();
+
+const CONDITION_OPS: ConditionOp[] = [
+  "eq",
+  "neq",
+  "gt",
+  "gte",
+  "lt",
+  "lte",
+  "contains",
+  "startsWith",
+  "endsWith",
+  "in",
+  "empty",
+  "notEmpty",
+  "regex",
+  "truthy",
+  "falsy",
+];
+
+const logic = computed(() => getConditionLogic(props.modelValue));
+const items = computed(() => listConditionItems(props.modelValue));
+
+function opLabel(op: ConditionOp) {
+  return t(`panel.config.tableOp.${op}`);
+}
+
+function leafOf(item: Condition): ConditionLeaf {
+  return isConditionLeaf(item) ? item : { op: "eq", value: "" };
+}
+
+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;
+}
+
+function setLogic(v: string) {
+  emit("update:modelValue", setConditionLogic(props.modelValue, v as ConditionLogic));
+}
+
+function patchLeaf(index: number, patch: Partial<ConditionLeaf>) {
+  emit("update:modelValue", updateConditionLeaf(props.modelValue, index, patch));
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div class="flex items-center justify-between gap-2">
+      <label class="min-w-0 flex-1 space-y-1">
+        <div class="text-[11px] text-gray-500">{{ t("panel.config.tableConditionLogic") }}</div>
+        <Select
+          size="small"
+          class="w-full"
+          :value="logic"
+          :disabled="disabled"
+          @update:value="(v) => setLogic(String(v))"
+        >
+          <Select.Option value="and">{{ t("panel.config.tableConditionLogicAnd") }}</Select.Option>
+          <Select.Option value="or">{{ t("panel.config.tableConditionLogicOr") }}</Select.Option>
+          <Select.Option value="not">{{ t("panel.config.tableConditionLogicNot") }}</Select.Option>
+        </Select>
+      </label>
+      <Button
+        size="small"
+        class="mt-4"
+        :disabled="disabled"
+        @click="emit('update:modelValue', addConditionItem(modelValue))"
+      >
+        {{ t("panel.config.tableConditionAddItem") }}
+      </Button>
+    </div>
+    <div class="text-[10px] text-gray-500">{{ t("panel.config.tableConditionLogicHint") }}</div>
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      class="space-y-1.5 rounded-md border border-gray-200 bg-white/70 p-2"
+    >
+      <div class="flex items-center justify-between gap-2">
+        <div class="text-[10px] font-medium text-gray-500">
+          {{ t("panel.config.tableConditionItem", { n: index + 1 }) }}
+        </div>
+        <Button
+          size="small"
+          danger
+          type="text"
+          :disabled="disabled || items.length <= 1"
+          @click="emit('update:modelValue', removeConditionItem(modelValue, index))"
+        >
+          ×
+        </Button>
+      </div>
+      <div
+        class="grid grid-cols-1 gap-1.5"
+        :class="showField ? 'sm:grid-cols-3' : 'sm:grid-cols-2'"
+      >
+        <label class="block space-y-1">
+          <div class="text-[11px] text-gray-500">{{ t("panel.config.tableConditionOp") }}</div>
+          <Select
+            size="small"
+            class="w-full"
+            :value="leafOf(item).op"
+            :disabled="disabled"
+            @update:value="(v) => patchLeaf(index, { op: String(v) as ConditionOp })"
+          >
+            <Select.Option v-for="op in CONDITION_OPS" :key="op" :value="op">
+              {{ opLabel(op) }}
+            </Select.Option>
+          </Select>
+        </label>
+        <label v-if="showField" class="block space-y-1">
+          <div class="text-[11px] text-gray-500">{{ t("panel.config.tableConditionField") }}</div>
+          <Input
+            size="small"
+            :value="leafOf(item).field ?? ''"
+            :disabled="disabled"
+            :placeholder="t('panel.config.tableConditionFieldPlaceholder')"
+            @update:value="(v: string) => patchLeaf(index, { field: v || undefined })"
+          />
+        </label>
+        <label
+          v-if="!['empty', 'notEmpty', 'truthy', 'falsy'].includes(leafOf(item).op)"
+          class="block space-y-1"
+        >
+          <div class="text-[11px] text-gray-500">{{ t("panel.config.tableConditionValue") }}</div>
+          <Input
+            size="small"
+            :value="leafValueText(leafOf(item).value)"
+            :disabled="disabled"
+            :placeholder="t('panel.config.tableConditionValuePlaceholder')"
+            @update:value="(v: string) => patchLeaf(index, { value: parseLeafValue(v) })"
+          />
+        </label>
+      </div>
+    </div>
+  </div>
+</template>