@arronqzy/vue-view 0.1.24 → 0.1.26

package/src/panel/components/MaterialSidebarTreeNode.vue

@@ -121,24 +121,27 @@ function onDragStart(e: DragEvent) {
   <template v-if="visible">
     <div
       :class="[
-        'mb-1 flex items-center gap-1 rounded py-1',
-        selected ? 'bg-primary/15 text-foreground' : 'text-muted-foreground hover:bg-accent/60',
+        'group/node flex min-w-0 items-center gap-0.5 rounded-sm py-0.5 pr-1',
+        selected ? 'bg-primary/15 text-foreground' : 'text-foreground/85 hover:bg-accent/55',
       ]"
-      :style="{ paddingLeft: `${6 + level * 14}px`, paddingRight: '6px' }"
+      style="padding-left: 2px"
     >
       <button
         v-if="hasChildren"
         type="button"
-        class="flex h-7 w-7 items-center justify-center rounded text-sm hover:bg-accent"
+        class="flex h-5 w-4 shrink-0 items-center justify-center rounded text-[11px] text-muted-foreground hover:bg-accent"
         @click="emit('toggleExpanded', nodeKey, !isExpanded)"
       >
         {{ isExpanded ? "▾" : "▸" }}
       </button>
-      <span v-else class="inline-flex h-7 w-7 items-center justify-center text-sm opacity-40">•</span>
+      <span v-else class="inline-flex h-5 w-4 shrink-0 items-center justify-center text-[10px] text-border">
+        <span class="h-px w-2 bg-border" />
+      </span>
 
+      <div class="relative min-w-0 flex-1">
       <button
         type="button"
-        class="min-w-0 flex-1 truncate text-left"
+        class="block w-full truncate pr-1 text-left text-[12px] font-medium"
         :title="getNodeDisplayName(node)"
         :draggable="!node.locked"
         @click="emit('selectNode', node.id, node.layerId)"
@@ -156,6 +159,7 @@ function onDragStart(e: DragEvent) {
         {{ getNodeDisplayName(node, t) }}
       </button>
 
+      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center gap-0.5 bg-gradient-to-l from-background via-background to-transparent pl-3 opacity-0 transition-opacity group-hover/node:pointer-events-auto group-hover/node:opacity-100 group-focus-within/node:pointer-events-auto group-focus-within/node:opacity-100">
       <span
         v-if="nodeHomeLayer?.isMapping"
         class="inline-flex shrink-0 items-center rounded-md border-2 border-violet-600 bg-violet-500/20 px-1.5 py-0.5 text-[10px] font-semibold text-violet-950 shadow-sm dark:border-violet-400 dark:bg-violet-500/35 dark:text-violet-50"
@@ -261,14 +265,15 @@ function onDragStart(e: DragEvent) {
           </svg>
         </button>
       </Tooltip>
+      </div>
+      </div>
     </div>
 
-    <template v-if="hasChildren && isExpanded">
+    <div v-if="hasChildren && isExpanded" class="ml-[7px] border-l border-border/45 pl-1.5">
       <template v-for="child in children" :key="`${path}->${child.id}`">
         <div
           v-if="nextVisited.has(child.id)"
-          class="py-1 text-[10px] text-muted-foreground/80"
-          :style="{ paddingLeft: `${6 + (level + 1) * 14}px` }"
+          class="py-0.5 pl-1 text-[10px] text-muted-foreground/80"
           :title="t('panel.material.circularRefStopped')"
         >
           {{ getNodeDisplayName(child, t) }}{{ t("panel.material.circularRefSuffix") }}
@@ -297,7 +302,7 @@ function onDragStart(e: DragEvent) {
           @drag-end="emit('dragEnd')"
         />
       </template>
-    </template>
+    </div>
   </template>
 </template>
 

package/src/panel/components/MoveableLayer.vue

@@ -394,10 +394,18 @@ function syncLockBadge() {
   };
 }
 
+function applyLiveMoveableZoom() {
+  const moveable = moveableRef.value;
+  if (!moveable) return;
+  const liveScale = readLiveCanvasScale(props.canvasContainer, propCanvasScale.value);
+  moveable.zoom = 1 / Math.max(0.0001, liveScale);
+}
+
 function scheduleViewportSync() {
   if (syncRafRef.value != null) return;
   syncRafRef.value = requestAnimationFrame(() => {
     syncRafRef.value = null;
+    applyLiveMoveableZoom();
     moveableRef.value?.updateRect?.();
     syncLockBadge();
   });

package/src/panel/components/PanelCanvas.vue

@@ -87,6 +87,7 @@ function applyCanvasTransform(scale: number) {
   el.style.transform = `scale(${scale})`;
   el.style.transformOrigin = "0 0";
   el.dataset.canvasScale = String(scale);
+  el.style.setProperty("--rv-canvas-scale", String(scale));
 }
 
 function notifyViewportSync() {

package/src/panel/components/PanelConfigSidebar.vue

@@ -29,8 +29,6 @@ import PanelConfigTableSection from "./table/PanelConfigTableSection.vue";
 
 const { t, locale } = useI18n();
 const msgs = () => getPanelMessages(t);
-const SEARCH_COLLAPSE_STORAGE_KEY = "panel:config-search-collapsed";
-
 const props = withDefaults(
   defineProps<{
     selectedElement: PanelElement | null;
@@ -58,7 +56,6 @@ const props = withDefaults(
 );
 
 const configSearch = ref("");
-const isSearchCollapsed = ref(false);
 const sidebarScrollRef = ref<HTMLElement | null>(null);
 const configScrollPosById = new Map<string, number>();
 const activeConfigScrollKey = ref<string | null>(null);
@@ -258,14 +255,6 @@ const visibleSectionCount = computed(() => {
   return count;
 });
 
-onMounted(() => {
-  const saved = window.localStorage.getItem(SEARCH_COLLAPSE_STORAGE_KEY);
-  if (saved === "1") isSearchCollapsed.value = true;
-});
-
-watch(isSearchCollapsed, (next) => {
-  window.localStorage.setItem(SEARCH_COLLAPSE_STORAGE_KEY, next ? "1" : "0");
-});
 </script>
 
 <template>
@@ -276,37 +265,29 @@ watch(isSearchCollapsed, (next) => {
     :scroll-container-ref="sidebarScrollRef"
   >
     <aside
-      ref="sidebarScrollRef"
-      class="scope-config-sidebar h-full overflow-auto border-l border-gray-200 bg-gray-50/30 px-3 py-3 text-gray-900 [&_.scope-field--highlight]:rounded-md [&_.scope-field--highlight]:ring-2 [&_.scope-field--highlight]:ring-amber-400/80"
+      class="scope-config-sidebar grid h-full min-h-0 w-full overflow-hidden border-l border-border/60 bg-muted/[0.12] text-foreground [&_.scope-field--highlight]:rounded-md [&_.scope-field--highlight]:ring-2 [&_.scope-field--highlight]:ring-amber-400/80"
+      style="grid-template-rows: auto 1fr"
     >
-      <div class="sticky top-0 z-20 mb-3 rounded-lg border border-gray-200/80 bg-white px-2.5 py-2 shadow-sm">
-        <div class="text-xs font-semibold tracking-wide">{{ t("panel.config.panelTitle") }}</div>
+      <div class="border-b border-border/50 bg-background/70 px-2.5 py-1.5 backdrop-blur-sm">
+        <Input
+          v-model:value="configSearch"
+          size="small"
+          :placeholder="t('panel.config.searchPlaceholder')"
+          :aria-label="t('panel.config.searchPlaceholder')"
+          class="text-[12px]"
+          data-scope-autocomplete="off"
+        />
+        <div v-if="hasSearch" class="mt-1 px-0.5 text-[11px] text-muted-foreground">
+          {{ t("panel.config.searching", { query: configSearch }) }}
+        </div>
+      </div>
+      <div
+        ref="sidebarScrollRef"
+        class="min-h-0 overflow-auto px-2 py-1.5 text-foreground"
+      >
+      <div v-if="showScopePanel || scopeWarnings.length > 0" class="mb-2 space-y-1.5">
         <ViewElementScopePanel v-if="showScopePanel" :scope="viewElementScope!" />
         <ScopeTemplateWarningsPanel />
-        <div
-          :class="showScopePanel || scopeWarnings.length > 0 ? 'mt-2 border-t border-gray-200/50 pt-2' : 'mt-2'"
-        >
-          <div class="flex items-center justify-end gap-2">
-            <button
-              type="button"
-              class="rounded border border-gray-200 px-1.5 py-0.5 text-[11px] text-gray-500 hover:bg-gray-50"
-              @click="isSearchCollapsed = !isSearchCollapsed"
-            >
-              {{ isSearchCollapsed ? t("panel.config.expandSearch") : t("panel.config.collapseSearch") }}
-            </button>
-          </div>
-          <div v-if="!isSearchCollapsed" class="mt-2">
-            <Input
-              v-model:value="configSearch"
-              size="small"
-              :placeholder="t('panel.config.searchPlaceholder')"
-              data-scope-autocomplete="off"
-            />
-            <div v-if="hasSearch" class="mt-1 text-[11px] text-gray-500">
-              {{ t("panel.config.searching", { query: configSearch }) }}
-            </div>
-          </div>
-        </div>
       </div>
 
       <PanelConfigMultiSelect
@@ -327,9 +308,9 @@ watch(isSearchCollapsed, (next) => {
         :description="t('panel.config.emptyNoNodeDesc')"
       />
 
-      <div v-else class="space-y-3">
+      <div v-else class="space-y-2">
         <fieldset :disabled="!isNodeEditable" :class="!isNodeEditable ? 'opacity-60' : ''">
-          <div class="space-y-3.5 text-xs">
+          <div class="space-y-2 text-xs">
             <PanelConfigNodeInfo
               v-if="shouldShowSection('nodeInfo', t('panel.config.sectionNodeInfo'), [t('panel.config.name'), 'id', t('panel.config.type'), t('panel.layers.lockShort')])"
               :element="selectedElement"
@@ -517,6 +498,7 @@ watch(isSearchCollapsed, (next) => {
           {{ msgs().nodeConfigLayerLocked }}
         </div>
       </div>
+      </div>
     </aside>
   </ScopeConfigProvider>
 </template>

package/src/panel/components/PanelRulers.vue

@@ -3,8 +3,8 @@ import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { PanelRuler } from "../lib/panel-ruler-canvas";
 import { PANEL_Z_INDEX } from "../constants/zIndex";
 
-const RULER_WORLD_UNIT = 100;
 const RULER_SEGMENT = 10;
+const RULER_TARGET_MAJOR_PX = 78;
 
 const props = withDefaults(
   defineProps<{
@@ -12,11 +12,37 @@ const props = withDefaults(
     zoomY: number;
     scrollLeft: number;
     scrollTop: number;
+    /** 固定厚度；省略时按编辑区尺寸动态计算 */
     size?: number;
   }>(),
-  { size: 32 }
+  {}
 );
 
+function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n));
+}
+
+function niceNumber(raw: number): number {
+  if (!Number.isFinite(raw) || raw <= 0) return 1;
+  const exp = Math.floor(Math.log10(raw));
+  const frac = raw / 10 ** exp;
+  const niceFrac = frac <= 1 ? 1 : frac <= 2 ? 2 : frac <= 5 ? 5 : 10;
+  return niceFrac * 10 ** exp;
+}
+
+function resolveRulerUnit(zoom: number): number {
+  const z = Math.max(zoom, 0.0001);
+  return Math.max(1, niceNumber(RULER_TARGET_MAJOR_PX / z));
+}
+
+function resolveRulerSize(width: number, height: number): number {
+  const edge = Math.min(width || 0, height || 0);
+  if (edge <= 0) return 22;
+  return Math.round(clamp(edge * 0.032, 24, 30));
+}
+
+const rootRef = ref<HTMLElement | null>(null);
+const autoSize = ref(22);
 const isDark = ref(false);
 const topHRef = ref<HTMLElement | null>(null);
 const leftVRef = ref<HTMLElement | null>(null);
@@ -24,34 +50,77 @@ const bottomHRef = ref<HTMLElement | null>(null);
 const rightVRef = ref<HTMLElement | null>(null);
 
 let rulers: Array<{ ruler: PanelRuler; axis: "h" | "v" }> = [];
+let themeObserver: MutationObserver | null = null;
+let resizeObserver: ResizeObserver | null = null;
 
-const rulerScrollLeft = computed(() => props.scrollLeft + props.size);
-const rulerScrollTop = computed(() => props.scrollTop + props.size);
+const size = computed(() =>
+  typeof props.size === "number" ? props.size : autoSize.value
+);
+const sizePx = computed(() => `${size.value}px`);
+const longLineSize = computed(() => Math.max(4, Math.round(size.value * 0.28)));
+const shortLineSize = computed(() => Math.max(2, Math.round(size.value * 0.15)));
+const fontPx = computed(() => Math.max(10, Math.min(12, Math.round(size.value * 0.42))));
+const bg = computed(() =>
+  isDark.value ? "rgba(15,23,42,0.98)" : "rgba(255,255,255,0.98)"
+);
+const lineColor = computed(() =>
+  isDark.value ? "rgba(226,232,240,0.75)" : "rgba(15,23,42,0.5)"
+);
+const textColor = computed(() =>
+  isDark.value ? "rgba(248,250,252,0.95)" : "rgba(15,23,42,0.88)"
+);
+const seam = computed(() =>
+  isDark.value ? "rgba(226,232,240,0.45)" : "rgba(15,23,42,0.28)"
+);
+
+
+const rulerScrollLeft = computed(
+  () => props.scrollLeft + size.value * (1 - 1 / Math.max(props.zoomX, 0.0001))
+);
+const rulerScrollTop = computed(
+  () => props.scrollTop + size.value * (1 - 1 / Math.max(props.zoomY, 0.0001))
+);
+
+const clipTop = computed(
+  () => `polygon(0 0, 100% 0, calc(100% - ${sizePx.value}) 100%, ${sizePx.value} 100%)`
+);
+const clipBottom = computed(
+  () => `polygon(${sizePx.value} 0, calc(100% - ${sizePx.value}) 0, 100% 100%, 0 100%)`
+);
+const clipLeft = computed(
+  () => `polygon(0 0, 100% ${sizePx.value}, 100% calc(100% - ${sizePx.value}), 0 100%)`
+);
+const clipRight = computed(
+  () => `polygon(0 ${sizePx.value}, 100% 0, 100% 100%, 0 calc(100% - ${sizePx.value}))`
+);
+
+const unitX = computed(() => resolveRulerUnit(props.zoomX));
+const unitY = computed(() => resolveRulerUnit(props.zoomY));
 
 const horizontalOptions = computed(() => ({
   type: "horizontal" as const,
   zoom: props.zoomX,
-  unit: RULER_WORLD_UNIT,
+  unit: unitX.value,
   segment: RULER_SEGMENT,
-  backgroundColor: isDark.value ? "rgba(15,23,42,0.98)" : "rgba(255,255,255,0.98)",
-  lineColor: isDark.value ? "rgba(226,232,240,0.4)" : "rgba(15,23,42,0.22)",
-  textColor: isDark.value ? "rgba(248,250,252,0.95)" : "rgba(15,23,42,0.75)",
-  font: "10px system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
-  longLineSize: 8,
-  shortLineSize: 4,
+  backgroundColor: bg.value,
+  lineColor: lineColor.value,
+  textColor: textColor.value,
+  font: `500 ${fontPx.value}px system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial`,
+  longLineSize: longLineSize.value,
+  shortLineSize: shortLineSize.value,
 }));
 
 const verticalOptions = computed(() => ({
   type: "vertical" as const,
   zoom: props.zoomY,
-  unit: RULER_WORLD_UNIT,
+  unit: unitY.value,
   segment: RULER_SEGMENT,
-  backgroundColor: isDark.value ? "rgba(15,23,42,0.98)" : "rgba(255,255,255,0.98)",
-  lineColor: isDark.value ? "rgba(226,232,240,0.4)" : "rgba(15,23,42,0.22)",
-  textColor: isDark.value ? "rgba(248,250,252,0.95)" : "rgba(15,23,42,0.75)",
-  font: "10px system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
-  longLineSize: 8,
-  shortLineSize: 4,
+  backgroundColor: bg.value,
+  lineColor: lineColor.value,
+  textColor: textColor.value,
+  font: `500 ${fontPx.value}px system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial`,
+  longLineSize: longLineSize.value,
+  shortLineSize: shortLineSize.value,
 }));
 
 function destroyRulers() {
@@ -89,30 +158,45 @@ function syncTheme() {
     const opts = axis === "h" ? horizontalOptions.value : verticalOptions.value;
     ruler.setState({
       zoom: opts.zoom,
+      unit: opts.unit,
+      segment: opts.segment,
       backgroundColor: opts.backgroundColor,
       lineColor: opts.lineColor,
       textColor: opts.textColor,
+      font: opts.font,
+      longLineSize: opts.longLineSize,
+      shortLineSize: opts.shortLineSize,
     });
   }
   syncScroll();
 }
 
-let themeObserver: MutationObserver | null = null;
-
 onMounted(() => {
   const root = document.documentElement;
-  const update = () => {
+  const updateTheme = () => {
     isDark.value = root.classList.contains("dark");
   };
-  update();
-  themeObserver = new MutationObserver(update);
+  updateTheme();
+  themeObserver = new MutationObserver(updateTheme);
   themeObserver.observe(root, { attributes: true, attributeFilter: ["class"] });
+
+  if (rootRef.value && typeof props.size !== "number") {
+    const updateSize = () => {
+      const rect = rootRef.value!.getBoundingClientRect();
+      autoSize.value = resolveRulerSize(rect.width, rect.height);
+    };
+    updateSize();
+    resizeObserver = new ResizeObserver(updateSize);
+    resizeObserver.observe(rootRef.value);
+  }
+
   initRulers();
   window.addEventListener("resize", initRulers);
 });
 
 onUnmounted(() => {
   themeObserver?.disconnect();
+  resizeObserver?.disconnect();
   window.removeEventListener("resize", initRulers);
   destroyRulers();
 });
@@ -127,6 +211,10 @@ watch([rulerScrollLeft, rulerScrollTop], () => {
   syncScroll();
 });
 
+watch(size, () => {
+  initRulers();
+});
+
 watch([topHRef, leftVRef, bottomHRef, rightVRef], () => {
   if (!topHRef.value || !leftVRef.value || !bottomHRef.value || !rightVRef.value) return;
   if (rulers.length === 0) initRulers();
@@ -135,43 +223,73 @@ watch([topHRef, leftVRef, bottomHRef, rightVRef], () => {
 
 <template>
   <div
+    ref="rootRef"
     class="pointer-events-none absolute inset-0 isolate"
     :style="{
-      '--rv-ruler-size': `${size}px`,
+      '--rv-ruler-size': sizePx,
       zIndex: PANEL_Z_INDEX.ruler,
     }"
   >
     <div
-      class="absolute left-[var(--rv-ruler-size)] right-[var(--rv-ruler-size)] top-0 h-[var(--rv-ruler-size)] overflow-visible"
+      class="absolute inset-x-0 top-0 overflow-hidden"
+      :style="{ height: sizePx, clipPath: clipTop, backgroundColor: bg }"
     >
       <div ref="topHRef" class="h-full w-full" />
     </div>
     <div
-      class="absolute left-0 top-[var(--rv-ruler-size)] bottom-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] overflow-visible"
+      class="absolute inset-y-0 left-0 overflow-hidden"
+      :style="{ width: sizePx, clipPath: clipLeft, backgroundColor: bg }"
     >
       <div ref="leftVRef" class="h-full w-full" />
     </div>
     <div
-      class="absolute left-[var(--rv-ruler-size)] right-[var(--rv-ruler-size)] bottom-0 h-[var(--rv-ruler-size)] overflow-visible"
+      class="absolute inset-x-0 bottom-0 overflow-hidden"
+      :style="{ height: sizePx, clipPath: clipBottom, backgroundColor: bg }"
     >
       <div ref="bottomHRef" class="h-full w-full" />
     </div>
     <div
-      class="absolute right-0 top-[var(--rv-ruler-size)] bottom-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] overflow-visible"
+      class="absolute inset-y-0 right-0 overflow-hidden"
+      :style="{ width: sizePx, clipPath: clipRight, backgroundColor: bg }"
     >
       <div ref="rightVRef" class="h-full w-full" />
     </div>
-    <div
-      class="absolute left-0 top-0 h-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] border-b border-r border-border bg-background"
-    />
-    <div
-      class="absolute right-0 top-0 h-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] border-b border-l border-border bg-background"
-    />
-    <div
-      class="absolute left-0 bottom-0 h-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] border-r border-t border-border bg-background"
-    />
-    <div
-      class="absolute right-0 bottom-0 h-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] border-l border-t border-border bg-background"
-    />
+
+    <svg
+      aria-hidden="true"
+      class="pointer-events-none absolute left-0 top-0"
+      :width="size"
+      :height="size"
+      style="z-index: 1"
+    >
+      <line :x1="0" :y1="0" :x2="size" :y2="size" :stroke="seam" stroke-width="1" />
+    </svg>
+    <svg
+      aria-hidden="true"
+      class="pointer-events-none absolute right-0 top-0"
+      :width="size"
+      :height="size"
+      style="z-index: 1"
+    >
+      <line :x1="size" :y1="0" :x2="0" :y2="size" :stroke="seam" stroke-width="1" />
+    </svg>
+    <svg
+      aria-hidden="true"
+      class="pointer-events-none absolute bottom-0 left-0"
+      :width="size"
+      :height="size"
+      style="z-index: 1"
+    >
+      <line :x1="0" :y1="size" :x2="size" :y2="0" :stroke="seam" stroke-width="1" />
+    </svg>
+    <svg
+      aria-hidden="true"
+      class="pointer-events-none absolute bottom-0 right-0"
+      :width="size"
+      :height="size"
+      style="z-index: 1"
+    >
+      <line :x1="size" :y1="size" :x2="0" :y2="0" :stroke="seam" stroke-width="1" />
+    </svg>
   </div>
 </template>

package/src/panel/components/SelectLayer.vue

@@ -44,7 +44,8 @@ function createSelecto() {
 
   const selectedIdSet = new Set(props.selectedIds);
   const selecto = new Selecto({
-    container: props.container,
+    // 框选层挂在未 scale 的视口上，避免选区宽高被画布 transform 放大、线宽视觉变粗
+    container: dragRoot,
     rootContainer: dragRoot,
     portalContainer: document.body,
     dragContainer: dragRoot,

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

@@ -51,8 +51,8 @@ function toggle() {
 </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.5">
+  <div class="space-y-1.5 rounded-md border border-border/50 bg-background/70 p-2">
+    <div class="flex items-center gap-1">
       <button
         v-if="collapsible"
         type="button"
@@ -66,7 +66,7 @@ function toggle() {
         <slot name="hint" />
       </ConfigHintIcon>
     </div>
-    <div v-show="isOpen" class="space-y-2.5">
+    <div v-show="isOpen" class="space-y-1.5">
       <slot />
     </div>
   </div>

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

@@ -24,17 +24,17 @@ function toggle() {
 </script>
 
 <template>
-  <div class="rounded-xl border border-gray-200/80 bg-white shadow-sm">
-    <div class="flex items-center gap-1.5 px-3 py-2">
+  <div class="rounded-lg border border-border/60 bg-card/90 shadow-[0_1px_1px_hsl(var(--foreground)/0.03)]">
+    <div class="flex items-center gap-1 px-2 py-1.5">
       <button
         type="button"
-        class="flex h-6 w-6 items-center justify-center rounded-md text-xs hover:bg-gray-100"
+        class="flex h-5 w-5 items-center justify-center rounded text-xs hover:bg-accent"
         @click="toggle"
       >
         {{ isOpen ? "▾" : "▸" }}
       </button>
       <div class="flex min-w-0 flex-1 items-center gap-1">
-        <div class="text-[11px] font-semibold tracking-wide text-gray-500">{{ title }}</div>
+        <div class="text-[11px] font-semibold tracking-wide text-muted-foreground">{{ title }}</div>
         <ConfigHintIcon v-if="$slots.hint" :label="title">
           <slot name="hint" />
         </ConfigHintIcon>
@@ -42,7 +42,7 @@ function toggle() {
     </div>
     <div
       v-show="isOpen"
-      class="space-y-3 border-t border-gray-200/60 bg-gray-50/50 px-3 pb-3 pt-2.5"
+      class="space-y-2 border-t border-border/50 bg-muted/[0.08] px-2 pb-2 pt-1.5"
     >
       <slot />
     </div>