@arronqzy/vue-view 0.1.4 → 0.1.7

package/src/panel/components/PanelConfigSidebar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from "@arronqzy/i18n/vue";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, provide, ref, watch } from "vue";
 import { Empty, Input } from "ant-design-vue";
 import type { PanelElement, PanelLayer, ReferenceCopyMode } from "../types";
 import { CHART_TYPES } from "../utils/chartOptionBuilder";
@@ -20,6 +20,7 @@ import PanelConfigTextSection from "./config/PanelConfigTextSection.vue";
 import PanelConfigAudioSection from "./config/PanelConfigAudioSection.vue";
 import PanelConfigVideoSection from "./config/PanelConfigVideoSection.vue";
 import PanelConfigGeometrySection from "./config/PanelConfigGeometrySection.vue";
+import PanelConfigScene3dSection from "./config/PanelConfigScene3dSection.vue";
 import PanelConfigGridSection from "./config/PanelConfigGridSection.vue";
 import PanelConfigGridChildSpan from "./config/PanelConfigGridChildSpan.vue";
 import PanelConfigReferenceSection from "./config/PanelConfigReferenceSection.vue";
@@ -61,8 +62,8 @@ const sidebarScrollRef = ref<HTMLElement | null>(null);
 
 const expandedSections = ref<Record<string, boolean>>({
   nodeInfo: true,
-  styleBackground: true,
-  styleBorder: true,
+  styleBackground: false,
+  styleBorder: false,
   chartBasic: true,
   chartAdvanced: false,
   textConfig: true,
@@ -123,6 +124,7 @@ const scopeWarnings = computed(() => {
 const materialType = computed(() => props.selectedElement?.materialType ?? "");
 
 const forceOpenSections = computed(() => hasSearch.value);
+provide("configHasSearch", hasSearch);
 
 function isSectionExpanded(key: string, defaultValue = true) {
   return expandedSections.value[key] ?? defaultValue;
@@ -259,23 +261,6 @@ watch(
               @update:open="(v) => setSectionExpanded('nodeInfo', v)"
             />
 
-            <PanelConfigStyleSections
-              v-if="
-                shouldShowSection('styleBackground', t('panel.config.sectionStyleBackground'), [t('panel.config.backgroundColor'), 'background']) ||
-                shouldShowSection('styleBorder', t('panel.config.sectionStyleBorder'), [t('panel.config.searchKwBorder'), 'border'])
-              "
-              :element="selectedElement"
-              :is-editable="isNodeEditable"
-              :show-background="shouldShowSection('styleBackground', t('panel.config.sectionStyleBackground'), [t('panel.config.backgroundColor'), 'background'])"
-              :show-border="shouldShowSection('styleBorder', t('panel.config.sectionStyleBorder'), [t('panel.config.searchKwBorder'), 'border'])"
-              :background-open="isSectionExpanded('styleBackground')"
-              :border-open="isSectionExpanded('styleBorder')"
-              :force-open="forceOpenSections"
-              :update-element="updateElement"
-              @update:background-open="(v) => setSectionExpanded('styleBackground', v)"
-              @update:border-open="(v) => setSectionExpanded('styleBorder', v)"
-            />
-
             <PanelConfigChartSection
               v-if="isChartElement && shouldShowSection('chartBasic', t('panel.config.sectionChartBasic'), [t('panel.material.charts'), 'tooltip'])"
               :element="selectedElement"
@@ -349,6 +334,16 @@ watch(
               @update:open="(v) => setSectionExpanded('geometryConfig', v)"
             />
 
+            <PanelConfigScene3dSection
+              v-if="materialType === 'scene3d' && shouldShowSection('scene3dConfig', t('panel.config.sectionScene3d'), [t('panel.material.scene3d'), '3d', 'glb', t('panel.config.groupScene3dCamera')])"
+              :element="selectedElement"
+              :is-editable="isNodeEditable"
+              :open="isSectionExpanded('scene3dConfig')"
+              :force-open="forceOpenSections"
+              :update-element="updateElement"
+              @update:open="(v) => setSectionExpanded('scene3dConfig', v)"
+            />
+
             <PanelConfigGridSection
               v-if="materialType === 'grid' && shouldShowSection('gridConfig', t('panel.config.sectionGrid'), [t('panel.config.searchKwGrid'), t('panel.config.rowsShort'), t('panel.config.colsShort'), t('panel.config.searchKwGap')])"
               :element="selectedElement"
@@ -381,6 +376,23 @@ watch(
               @update:open="(v) => setSectionExpanded('reference', v)"
             />
 
+            <PanelConfigStyleSections
+              v-if="
+                shouldShowSection('styleBackground', t('panel.config.sectionStyleBackground'), [t('panel.config.backgroundColor'), 'background']) ||
+                shouldShowSection('styleBorder', t('panel.config.sectionStyleBorder'), [t('panel.config.searchKwBorder'), 'border'])
+              "
+              :element="selectedElement"
+              :is-editable="isNodeEditable"
+              :show-background="shouldShowSection('styleBackground', t('panel.config.sectionStyleBackground'), [t('panel.config.backgroundColor'), 'background'])"
+              :show-border="shouldShowSection('styleBorder', t('panel.config.sectionStyleBorder'), [t('panel.config.searchKwBorder'), 'border'])"
+              :background-open="isSectionExpanded('styleBackground')"
+              :border-open="isSectionExpanded('styleBorder')"
+              :force-open="forceOpenSections"
+              :update-element="updateElement"
+              @update:background-open="(v) => setSectionExpanded('styleBackground', v)"
+              @update:border-open="(v) => setSectionExpanded('styleBorder', v)"
+            />
+
             <div
               v-if="!isChartElement && materialType && !['text', 'table', 'audio', 'video', 'image', 'geometry', 'grid', 'reference'].includes(materialType)"
               class="text-xs leading-6 text-gray-500"

package/src/panel/components/WorkspaceConfigSidebar.vue

@@ -5,6 +5,7 @@ import { Empty } from "ant-design-vue";
 import {
   BlueprintExecutionLogPanel,
   BlueprintNodeConfigSidebar,
+  type BlueprintGraphEdge,
   type BlueprintGraphNode,
   type ExecutionLogSettings,
   type ExecutionTraceEntry,
@@ -56,6 +57,9 @@ export type WorkspaceConfigSidebarProps = Omit<
   configFocus: WorkspaceConfigFocus;
   executionLog?: BlueprintExecutionLogViewProps;
   selectedBlueprintNode: BlueprintGraphNode | null;
+  blueprintGraphNodes?: BlueprintGraphNode[];
+  blueprintGraphEdges?: BlueprintGraphEdge[];
+  blueprintTraceEntries?: ExecutionTraceEntry[];
   allowFalseSignalPropagation?: boolean;
   onUpdateAllowFalseSignalPropagation?: (value: boolean) => void;
   onUpdateBlueprintNode: (
@@ -76,6 +80,7 @@ export type WorkspaceConfigSidebarProps = Omit<
         | "jsonConfig"
         | "logicConfig"
         | "clockConfig"
+        | "eventConfig"
       >
     >
   ) => void;
@@ -90,6 +95,9 @@ const props = withDefaults(
   {
     allowFalseSignalPropagation: false,
     blueprintLibraryOptions: () => [],
+    blueprintGraphNodes: () => [],
+    blueprintGraphEdges: () => [],
+    blueprintTraceEntries: () => [],
     blueprintNodeOptions: () => [],
     selectedElements: () => [],
   }
@@ -143,6 +151,9 @@ const viewElementOptions = computed(() =>
     <BlueprintNodeConfigSidebar
       v-else
       :node="selectedBlueprintNode"
+      :graph-nodes="blueprintGraphNodes"
+      :graph-edges="blueprintGraphEdges"
+      :trace-entries="blueprintTraceEntries.length ? blueprintTraceEntries : executionLog?.entries ?? []"
       :allow-false-signal-propagation="allowFalseSignalPropagation"
       :on-update-allow-false-signal-propagation="onUpdateAllowFalseSignalPropagation"
       :view-element-options="viewElementOptions"

package/src/panel/components/WorkspaceProjectNav.vue

@@ -19,6 +19,7 @@ const props = defineProps<{
   activeProjectId: string | null;
   activeProjectName: string | null;
   dirty: boolean;
+  previewingProjectIds?: string[];
 }>();
 
 const emit = defineEmits<{
@@ -76,8 +77,10 @@ const projectMenu = computed(() =>
       default: () =>
         props.projects.length === 0
           ? [h(Menu.Item, { key: "empty", disabled: true }, () => t("panel.workspace.noSavedWorkspaces"))]
-          : props.projects.map((project) =>
-              h(
+          : props.projects.map((project) => {
+              const isCurrent = props.activeProjectId === project.id;
+              const isPreviewing = (props.previewingProjectIds ?? []).includes(project.id);
+              return h(
                 "div",
                 { key: project.id, class: "px-1 py-0.5" },
                 h("div", { class: "flex items-center gap-1" }, [
@@ -86,16 +89,41 @@ const projectMenu = computed(() =>
                     {
                       type: "button",
                       class: [
-                        "min-w-0 flex-1 rounded px-2 py-1.5 text-left text-xs hover:bg-accent",
-                        props.activeProjectId === project.id
-                          ? "bg-accent/60 font-medium"
+                        "min-w-0 flex-1 rounded px-2 py-1.5 text-left text-xs hover:bg-gray-100",
+                        isCurrent
+                          ? "bg-blue-50 font-medium text-blue-700 ring-1 ring-inset ring-blue-300"
+                          : "",
+                        !isCurrent && isPreviewing
+                          ? "bg-sky-50 ring-1 ring-inset ring-sky-300"
                           : "",
                       ].join(" "),
                       onClick: () =>
                         void runAction(() => emit("openProject", project.id)),
                     },
                     [
-                      h("div", { class: "truncate" }, project.name),
+                      h("div", { class: "flex items-center gap-1" }, [
+                        h("div", { class: "min-w-0 flex-1 truncate" }, project.name),
+                        isCurrent
+                          ? h(
+                              "span",
+                              {
+                                class:
+                                  "shrink-0 rounded bg-blue-600 px-1 py-px text-[9px] leading-none text-white",
+                              },
+                              t("panel.workspace.currentBadge")
+                            )
+                          : null,
+                        isPreviewing
+                          ? h(
+                              "span",
+                              {
+                                class:
+                                  "shrink-0 rounded bg-sky-600 px-1 py-px text-[9px] leading-none text-white",
+                              },
+                              t("panel.workspace.previewingBadge")
+                            )
+                          : null,
+                      ]),
                       h(
                         "div",
                         { class: "truncate text-[10px] text-muted-foreground" },
@@ -132,8 +160,8 @@ const projectMenu = computed(() =>
                     () => t("common.delete")
                   ),
                 ])
-              )
-            ),
+              );
+            }),
     }
   )
 );

package/src/panel/components/config/ConfigColorField.vue

@@ -1,23 +1,35 @@
 <script setup lang="ts">
 import { useI18n } from "@arronqzy/i18n/vue";
 import { computed } from "vue";
-import { Input } from "ant-design-vue";
+import { Input, Switch } from "ant-design-vue";
+import { isCssTransparent } from "@arronqzy/view-table";
 
-const { t, locale } = useI18n();
-const props = defineProps<{
-  label: string;
-  value: string;
-  disabled?: boolean;
-}>();
+const { t } = useI18n();
+const props = withDefaults(
+  defineProps<{
+    label: string;
+    value: string;
+    disabled?: boolean;
+    allowTransparent?: boolean;
+    fallbackHex?: string;
+  }>(),
+  { allowTransparent: false, fallbackHex: "#ffffff" }
+);
 
 const emit = defineEmits<{
   "update:value": [value: string];
 }>();
 
+const transparent = computed(
+  () => props.allowTransparent && isCssTransparent(props.value)
+);
+
 const pickerValue = computed(() =>
   /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(props.value || "")
     ? props.value
-    : "#000000"
+    : props.fallbackHex.startsWith("#")
+      ? props.fallbackHex
+      : "#000000"
 );
 
 function onTextChange(v: string) {
@@ -28,12 +40,23 @@ function onColorInput(e: Event) {
   const target = e.target as HTMLInputElement;
   emit("update:value", target.value);
 }
+
+function onTransparentChange(v: unknown) {
+  emit("update:value", v === true ? "transparent" : props.fallbackHex);
+}
 </script>
 
 <template>
   <label class="block space-y-1.5">
     <div class="text-[11px] text-gray-500">{{ label }}</div>
-    <div class="flex items-center gap-2">
+    <div v-if="allowTransparent" class="flex items-center gap-2">
+      <Switch size="small" :checked="transparent" :disabled="disabled" @update:checked="onTransparentChange" />
+      <span class="text-[11px] text-gray-600">{{ t("panel.config.tableBgTransparent") }}</span>
+    </div>
+    <div v-if="transparent" class="text-[10px] text-gray-500">
+      {{ t("panel.config.tableBgTransparentHint") }}
+    </div>
+    <div v-else class="flex items-center gap-2">
       <Input
         size="small"
         :value="value"
@@ -52,3 +75,4 @@ function onColorInput(e: Event) {
     </div>
   </label>
 </template>
+

package/src/panel/components/config/ConfigFieldGroup.vue

@@ -1,20 +1,49 @@
 <script setup lang="ts">
+import { computed, inject, ref, type ComputedRef } from "vue";
 import ConfigHintIcon from "../ConfigHintIcon.vue";
 
-defineProps<{
-  title: string;
-  hint?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    hint?: boolean;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+  }>(),
+  { defaultOpen: true, collapsible: false }
+);
+
+const hasSearch = inject<ComputedRef<boolean>>(
+  "configHasSearch",
+  computed(() => false)
+);
+
+const open = ref(props.defaultOpen);
+const isOpen = computed(() => !props.collapsible || hasSearch.value || open.value);
+
+function toggle() {
+  if (!props.collapsible || hasSearch.value) return;
+  open.value = !open.value;
+}
 </script>
 
 <template>
   <div class="space-y-2.5 rounded-lg border border-gray-200/80 bg-white/80 p-2.5">
-    <div class="flex items-center gap-1">
+    <div class="flex items-center gap-1.5">
+      <button
+        v-if="collapsible"
+        type="button"
+        class="flex h-5 w-5 items-center justify-center rounded text-[11px] hover:bg-gray-100"
+        @click="toggle"
+      >
+        {{ isOpen ? "▾" : "▸" }}
+      </button>
       <div class="text-[11px] font-semibold text-gray-500">{{ title }}</div>
       <ConfigHintIcon v-if="$slots.hint" :label="title">
         <slot name="hint" />
       </ConfigHintIcon>
     </div>
-    <slot />
+    <div v-show="isOpen" class="space-y-2.5">
+      <slot />
+    </div>
   </div>
 </template>

package/src/panel/components/config/PanelConfigAudioSection.vue

@@ -44,22 +44,30 @@ function patch(patch: Partial<PanelElement>) {
 }
 
 async function handleUploadAudioFile(file: File) {
-  const base64 = await readFileAsDataUrl(file, msgs().readAudioFailed);
-  patch({ audioSrc: base64 });
-  audioStatus.value = msgs().audioLocalSaved;
-  const url = await uploadFileToRemote(file);
-  if (url) {
-    patch({ audioRemoteUrl: url });
-    audioStatus.value = msgs().audioRemoteUploaded;
-  } else {
-    audioStatus.value = msgs().audioServerUploadFailed;
+  try {
+    const base64 = await readFileAsDataUrl(file, msgs().readAudioFailed, "audio");
+    patch({ audioSrc: base64 });
+    audioStatus.value = msgs().audioLocalSaved;
+    const url = await uploadFileToRemote(file);
+    if (url) {
+      patch({ audioRemoteUrl: url });
+      audioStatus.value = msgs().audioRemoteUploaded;
+    } else {
+      audioStatus.value = msgs().audioServerUploadFailed;
+    }
+  } catch (error) {
+    audioStatus.value = error instanceof Error ? error.message : msgs().readAudioFailed;
   }
 }
 
 async function handleUploadAudioPoster(file: File) {
-  const base64 = await readFileAsDataUrl(file, msgs().readImageFailed);
-  patch({ audioPosterImage: base64 });
-  audioStatus.value = msgs().audioPosterSet;
+  try {
+    const base64 = await readFileAsDataUrl(file, msgs().readImageFailed);
+    patch({ audioPosterImage: base64 });
+    audioStatus.value = msgs().audioPosterSet;
+  } catch (error) {
+    audioStatus.value = error instanceof Error ? error.message : msgs().readImageFailed;
+  }
 }
 
 function stopRecordingAudio() {
@@ -85,12 +93,18 @@ async function startRecordingAudio() {
       const blob = new Blob(audioChunksRef.value, {
         type: recorder.mimeType || "audio/webm",
       });
-      const dataUrl = await readFileAsDataUrl(
-        new File([blob], "recording.webm", { type: blob.type }),
-        msgs().readRecordAudioFailed
-      );
-      patch({ audioSrc: dataUrl });
-      audioStatus.value = msgs().audioRecordSaved;
+      try {
+        const dataUrl = await readFileAsDataUrl(
+          new File([blob], "recording.webm", { type: blob.type }),
+          msgs().readRecordAudioFailed,
+          "audio"
+        );
+        patch({ audioSrc: dataUrl });
+        audioStatus.value = msgs().audioRecordSaved;
+      } catch (error) {
+        audioStatus.value =
+          error instanceof Error ? error.message : msgs().readRecordAudioFailed;
+      }
       recordStreamRef.value?.getTracks().forEach((track) => track.stop());
       recordStreamRef.value = null;
       recorderRef.value = null;
@@ -168,7 +182,11 @@ function onPosterFileChange(e: Event) {
         :src="element.audioSrc || element.audioRemoteUrl || ''"
       />
     </ConfigFieldGroup>
-    <ConfigFieldGroup :title="t('panel.config.groupDisplayStyle')">
+    <ConfigFieldGroup
+      :title="t('panel.config.groupDisplayStyle')"
+      collapsible
+      :default-open="false"
+    >
       <label class="flex items-center gap-2">
         <Checkbox
           :checked="element.mediaAutoPauseOnEdit !== false"

package/src/panel/components/config/PanelConfigChartSection.vue

@@ -143,6 +143,100 @@ function onOptionJsonChange(v: string) {
         :disabled="!isEditable"
         @update:value="(v) => updateChart({ color: v || '#3b82f6' })"
       />
+    </ConfigFieldGroup>
+    <ConfigFieldGroup :title="t('panel.config.groupData')">
+      <label class="block space-y-1">
+        <div>{{ t("panel.config.labelsCsv") }}</div>
+        <Input
+          size="small"
+          :value="getChartLabelsDisplayText(element.chart)"
+          :disabled="!isEditable"
+          @update:value="(v: string) => updateChart({ labelsText: v })"
+        />
+      </label>
+      <label class="block space-y-1">
+        <div>{{ t("panel.config.valuesCsv") }}</div>
+        <Input
+          size="small"
+          :value="getChartValuesDisplayText(element.chart)"
+          :disabled="!isEditable"
+          @update:value="(v: string) => updateChart({ valuesText: v })"
+        />
+      </label>
+    </ConfigFieldGroup>
+
+    <ConfigFieldGroup
+      v-if="['bar', 'line', 'area', 'pie'].includes(selectedChartType)"
+      :title="t('panel.config.groupSeries')"
+    >
+      <label v-if="selectedChartType === 'bar'" class="block space-y-1">
+        <div>{{ t("panel.config.barWidthPx") }}</div>
+        <InputNumber
+          size="small"
+          class="w-full"
+          :min="1"
+          :placeholder="t('panel.config.barWidthAuto')"
+          :value="element.chart?.barWidth ?? undefined"
+          :disabled="!isEditable"
+          @update:value="(v) => {
+            if (v == null || v === '') {
+              updateChart({ barWidth: undefined });
+              return;
+            }
+            const n = Number(v);
+            if (!Number.isNaN(n) && n > 0) updateChart({ barWidth: Math.max(1, n) });
+          }"
+        />
+      </label>
+      <label
+        v-if="selectedChartType === 'line' || selectedChartType === 'area'"
+        class="flex items-center gap-2"
+      >
+        <Checkbox
+          :checked="element.chart?.smooth ?? true"
+          :disabled="!isEditable"
+          @update:checked="(v) => updateChart({ smooth: v === true })"
+        />
+        <span>{{ t("panel.config.smooth") }}</span>
+      </label>
+      <div v-if="selectedChartType === 'pie'" class="grid grid-cols-2 gap-2">
+        <label class="block space-y-1">
+          <div>{{ t("panel.config.pieInnerRadiusPct") }}</div>
+          <InputNumber
+            size="small"
+            class="w-full"
+            :min="0"
+            :max="99"
+            :value="element.chart?.pieInnerRadius ?? 30"
+            :disabled="!isEditable"
+            @update:value="(v) => {
+              const n = Number(v);
+              if (!Number.isNaN(n)) updateChart({ pieInnerRadius: Math.max(0, Math.min(99, n)) });
+            }"
+          />
+        </label>
+        <label class="block space-y-1">
+          <div>{{ t("panel.config.pieOuterRadiusPct") }}</div>
+          <InputNumber
+            size="small"
+            class="w-full"
+            :min="1"
+            :max="100"
+            :value="element.chart?.pieOuterRadius ?? 65"
+            :disabled="!isEditable"
+            @update:value="(v) => {
+              const n = Number(v);
+              if (!Number.isNaN(n)) updateChart({ pieOuterRadius: Math.max(1, Math.min(100, n)) });
+            }"
+          />
+        </label>
+      </div>
+    </ConfigFieldGroup>
+    <ConfigFieldGroup
+      :title="t('panel.config.groupChartDisplayMore')"
+      collapsible
+      :default-open="false"
+    >
       <label class="flex items-center gap-2">
         <Checkbox
           :checked="element.chart?.colorMode === 'gradient'"
@@ -208,7 +302,11 @@ function onOptionJsonChange(v: string) {
       </label>
     </ConfigFieldGroup>
 
-    <ConfigFieldGroup :title="t('panel.config.groupTooltip')">
+    <ConfigFieldGroup
+      :title="t('panel.config.groupTooltip')"
+      collapsible
+      :default-open="false"
+    >
       <div class="grid grid-cols-2 gap-2">
         <label class="flex items-center gap-2">
           <Checkbox
@@ -264,30 +362,11 @@ function onOptionJsonChange(v: string) {
       </label>
     </ConfigFieldGroup>
 
-    <ConfigFieldGroup :title="t('panel.config.groupData')">
-      <label class="block space-y-1">
-        <div>{{ t("panel.config.labelsCsv") }}</div>
-        <Input
-          size="small"
-          :value="getChartLabelsDisplayText(element.chart)"
-          :disabled="!isEditable"
-          @update:value="(v: string) => updateChart({ labelsText: v })"
-        />
-      </label>
-      <label class="block space-y-1">
-        <div>{{ t("panel.config.valuesCsv") }}</div>
-        <Input
-          size="small"
-          :value="getChartValuesDisplayText(element.chart)"
-          :disabled="!isEditable"
-          @update:value="(v: string) => updateChart({ valuesText: v })"
-        />
-      </label>
-    </ConfigFieldGroup>
-
     <ConfigFieldGroup
       v-if="['bar', 'line', 'area', 'scatter'].includes(selectedChartType)"
       :title="t('panel.config.groupAxes')"
+      collapsible
+      :default-open="false"
     >
       <div class="grid grid-cols-2 gap-2">
         <label class="block">
@@ -407,68 +486,6 @@ function onOptionJsonChange(v: string) {
       </div>
     </ConfigFieldGroup>
 
-    <ConfigFieldGroup
-      v-if="['bar', 'line', 'area', 'pie'].includes(selectedChartType)"
-      :title="t('panel.config.groupSeries')"
-    >
-      <label v-if="selectedChartType === 'bar'" class="block space-y-1">
-        <div>{{ t("panel.config.barWidthPx") }}</div>
-        <InputNumber
-          size="small"
-          class="w-full"
-          :min="1"
-          :value="element.chart?.barWidth ?? 24"
-          :disabled="!isEditable"
-          @update:value="(v) => {
-            const n = Number(v);
-            if (!Number.isNaN(n)) updateChart({ barWidth: Math.max(1, n) });
-          }"
-        />
-      </label>
-      <label
-        v-if="selectedChartType === 'line' || selectedChartType === 'area'"
-        class="flex items-center gap-2"
-      >
-        <Checkbox
-          :checked="element.chart?.smooth ?? true"
-          :disabled="!isEditable"
-          @update:checked="(v) => updateChart({ smooth: v === true })"
-        />
-        <span>{{ t("panel.config.smooth") }}</span>
-      </label>
-      <div v-if="selectedChartType === 'pie'" class="grid grid-cols-2 gap-2">
-        <label class="block space-y-1">
-          <div>{{ t("panel.config.pieInnerRadiusPct") }}</div>
-          <InputNumber
-            size="small"
-            class="w-full"
-            :min="0"
-            :max="99"
-            :value="element.chart?.pieInnerRadius ?? 30"
-            :disabled="!isEditable"
-            @update:value="(v) => {
-              const n = Number(v);
-              if (!Number.isNaN(n)) updateChart({ pieInnerRadius: Math.max(0, Math.min(99, n)) });
-            }"
-          />
-        </label>
-        <label class="block space-y-1">
-          <div>{{ t("panel.config.pieOuterRadiusPct") }}</div>
-          <InputNumber
-            size="small"
-            class="w-full"
-            :min="1"
-            :max="100"
-            :value="element.chart?.pieOuterRadius ?? 65"
-            :disabled="!isEditable"
-            @update:value="(v) => {
-              const n = Number(v);
-              if (!Number.isNaN(n)) updateChart({ pieOuterRadius: Math.max(1, Math.min(100, n)) });
-            }"
-          />
-        </label>
-      </div>
-    </ConfigFieldGroup>
   </ConfigSection>
 
   <ConfigSection

package/src/panel/components/config/PanelConfigGeometrySection.vue

@@ -138,7 +138,11 @@ function clearSketch() {
         @update:value="(v) => patch({ geometryColor: v || '#3b82f6' })"
       />
     </ConfigFieldGroup>
-    <ConfigFieldGroup :title="t('panel.config.groupCanvasScript')">
+    <ConfigFieldGroup
+      :title="t('panel.config.groupCanvasScript')"
+      collapsible
+      :default-open="false"
+    >
       <template #hint>
         {{ t("panel.config.canvasScriptHint") }}
       </template>
@@ -152,7 +156,11 @@ function clearSketch() {
         @update:value="(v: string) => patch({ geometryScript: v || undefined })"
       />
     </ConfigFieldGroup>
-    <ConfigFieldGroup :title="t('panel.config.groupSketchOverlay')">
+    <ConfigFieldGroup
+      :title="t('panel.config.groupSketchOverlay')"
+      collapsible
+      :default-open="false"
+    >
       <div class="flex items-center gap-2">
         <label class="block space-y-1">
           <div class="text-[11px]">{{ t("panel.config.penColor") }}</div>