@arronqzy/vue-view 0.1.19 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-view",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Vue 3 visual view editor for Abuilder (Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -23,13 +23,13 @@
     "selecto": "^1.26.3",
     "uuid": "^13.0.0",
     "vue": "^3.5.13",
-    "@arronqzy/i18n": "0.1.13",
     "@arronqzy/blueprint-dsl": "1.0.15",
-    "@arronqzy/view-scene3d": "0.1.5",
+    "@arronqzy/i18n": "0.1.14",
     "@arronqzy/view-table": "0.1.8",
-    "@arronqzy/rx-store": "1.0.8",
+    "@arronqzy/view-scene3d": "0.1.5",
     "@arronqzy/vue-blueprint": "0.1.14",
-    "@arronqzy/vue-rx-store": "0.1.6"
+    "@arronqzy/vue-rx-store": "0.1.6",
+    "@arronqzy/rx-store": "1.0.8"
   },
   "peerDependencies": {
     "vue": "^3.4.0"

package/src/panel/VueViewPanel.vue

@@ -83,10 +83,26 @@ const props = withDefaults(
     initialZoom?: number;
     nameSpace?: string | null;
     initialWorkspace?: WorkspaceProjectRecord | null;
+    /** 顶栏「设置 → 关于」展示的 npm 包名 */
+    packageName?: string | null;
+    /** 顶栏「设置 → 关于」展示的包版本号 */
+    packageVersion?: string | null;
   }>(),
-  { initialZoom: 1, nameSpace: null, initialWorkspace: null }
+  {
+    initialZoom: 1,
+    nameSpace: null,
+    initialWorkspace: null,
+    packageName: null,
+    packageVersion: null,
+  }
 );
 
+const packageVersionText = computed(() => {
+  const version = (props.packageVersion ?? "").trim();
+  if (!version) return t("panel.menubar.versionUnavailable");
+  return t("panel.menubar.versionValue", { version });
+});
+
 const {
   elements,
   allElements,
@@ -756,7 +772,29 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         @delete-project="handleWorkspaceDeleteProject"
         @preview-project="openOnlinePreviewForProject"
       />
-            <Dropdown :trigger="['click']">
+      <Dropdown :trigger="['click']">
+        <Button type="text" class="!text-white">{{ t("panel.menubar.settings") }}</Button>
+        <template #overlay>
+          <Menu>
+            <Menu.ItemGroup :title="t('panel.theme.language')">
+              <Menu.Item :class="{ 'ant-menu-item-selected': locale === 'zh-CN' }" @click="setLocale('zh-CN')">{{ t("panel.theme.zhCN") }}</Menu.Item>
+              <Menu.Item :class="{ 'ant-menu-item-selected': locale === 'en-US' }" @click="setLocale('en-US')">{{ t("panel.theme.enUS") }}</Menu.Item>
+            </Menu.ItemGroup>
+            <Menu.Divider />
+            <Menu.SubMenu :title="t('panel.menubar.about')" key="about">
+              <Menu.Item
+                key="version"
+                disabled
+                class="!cursor-default !opacity-100"
+                :data-abuilder-version="props.packageVersion || undefined"
+              >
+                {{ packageVersionText }}
+              </Menu.Item>
+            </Menu.SubMenu>
+          </Menu>
+        </template>
+      </Dropdown>
+      <Dropdown :trigger="['click']">
         <Button type="text" class="!text-white">{{ t("panel.theme.language") }}</Button>
         <template #overlay>
           <Menu>

package/src/panel/components/PanelConfigSidebar.vue

@@ -62,8 +62,10 @@ const isSearchCollapsed = ref(false);
 const sidebarScrollRef = ref<HTMLElement | null>(null);
 const configScrollPosById = new Map<string, number>();
 const activeConfigScrollKey = ref<string | null>(null);
+const expandedSectionsById = new Map<string, Record<string, boolean>>();
+const activeExpandedKey = ref<string | null>(null);
 
-const expandedSections = ref<Record<string, boolean>>({
+const DEFAULT_EXPANDED_SECTIONS: Record<string, boolean> = {
   nodeInfo: true,
   styleBackground: false,
   styleBorder: false,
@@ -78,6 +80,10 @@ const expandedSections = ref<Record<string, boolean>>({
   reference: true,
   imageConfig: true,
   tableConfig: true,
+};
+
+const expandedSections = ref<Record<string, boolean>>({
+  ...DEFAULT_EXPANDED_SECTIONS,
 });
 
 const normalizedSearch = computed(() => configSearch.value.trim().toLowerCase());
@@ -118,12 +124,39 @@ watch(
     }
     activeConfigScrollKey.value = nextKey;
     void nextTick(() => restoreConfigScroll(nextKey));
+
+    if (prevKey && prevKey !== nextKey) {
+      expandedSectionsById.set(prevKey, { ...expandedSections.value });
+    }
+    activeExpandedKey.value = nextKey;
+    if (!nextKey) {
+      expandedSections.value = { ...DEFAULT_EXPANDED_SECTIONS };
+      return;
+    }
+    const saved = expandedSectionsById.get(nextKey);
+    if (saved) {
+      expandedSections.value = { ...saved };
+      return;
+    }
+    const initial = { ...DEFAULT_EXPANDED_SECTIONS };
+    expandedSectionsById.set(nextKey, initial);
+    expandedSections.value = initial;
   },
   { flush: "post" }
 );
 
 onMounted(() => {
   activeConfigScrollKey.value = configScrollKey.value;
+  activeExpandedKey.value = configScrollKey.value;
+  if (configScrollKey.value) {
+    const saved = expandedSectionsById.get(configScrollKey.value);
+    if (saved) expandedSections.value = { ...saved };
+    else {
+      const initial = { ...DEFAULT_EXPANDED_SECTIONS };
+      expandedSectionsById.set(configScrollKey.value, initial);
+      expandedSections.value = initial;
+    }
+  }
   const el = sidebarScrollRef.value;
   el?.addEventListener("scroll", onConfigSidebarScroll, { passive: true });
   restoreConfigScroll(configScrollKey.value);
@@ -171,13 +204,23 @@ const materialType = computed(() => props.selectedElement?.materialType ?? "");
 
 const forceOpenSections = computed(() => hasSearch.value);
 provide("configHasSearch", hasSearch);
+provide("configExpandState", {
+  isExpanded: (key: string, defaultValue = true) =>
+    expandedSections.value[key] ?? defaultValue,
+  setExpanded: (key: string, next: boolean) => {
+    setSectionExpanded(key, next);
+  },
+});
 
 function isSectionExpanded(key: string, defaultValue = true) {
   return expandedSections.value[key] ?? defaultValue;
 }
 
 function setSectionExpanded(key: string, next: boolean) {
-  expandedSections.value = { ...expandedSections.value, [key]: next };
+  const updated = { ...expandedSections.value, [key]: next };
+  expandedSections.value = updated;
+  const id = activeExpandedKey.value;
+  if (id) expandedSectionsById.set(id, updated);
 }
 
 function shouldShowSection(key: string, title: string, searchTerms: string[] = []) {
@@ -223,15 +266,6 @@ onMounted(() => {
 watch(isSearchCollapsed, (next) => {
   window.localStorage.setItem(SEARCH_COLLAPSE_STORAGE_KEY, next ? "1" : "0");
 });
-
-watch(
-  () => [props.selectedElement?.id, props.selectedElement?.materialType],
-  () => {
-    if (isChartElement.value) {
-      setSectionExpanded("chartBasic", true);
-    }
-  }
-);
 </script>
 
 <template>

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

@@ -2,12 +2,19 @@
 import { computed, inject, ref, type ComputedRef } from "vue";
 import ConfigHintIcon from "../ConfigHintIcon.vue";
 
+export type ConfigExpandState = {
+  isExpanded: (key: string, defaultValue?: boolean) => boolean;
+  setExpanded: (key: string, next: boolean) => void;
+};
+
 const props = withDefaults(
   defineProps<{
     title: string;
     hint?: boolean;
     collapsible?: boolean;
     defaultOpen?: boolean;
+    /** Stable key for remembering expand state per view node */
+    groupKey?: string;
   }>(),
   { defaultOpen: true, collapsible: false }
 );
@@ -16,13 +23,30 @@ const hasSearch = inject<ComputedRef<boolean>>(
   "configHasSearch",
   computed(() => false)
 );
+const expandState = inject<ConfigExpandState | null>("configExpandState", null);
+
+const localOpen = ref(props.defaultOpen);
+const storageKey = computed(
+  () => props.groupKey?.trim() || `fg:${props.title}`
+);
 
-const open = ref(props.defaultOpen);
-const isOpen = computed(() => !props.collapsible || hasSearch.value || open.value);
+const isOpen = computed(() => {
+  if (!props.collapsible) return true;
+  if (hasSearch.value) return true;
+  if (expandState) {
+    return expandState.isExpanded(storageKey.value, props.defaultOpen);
+  }
+  return localOpen.value;
+});
 
 function toggle() {
   if (!props.collapsible || hasSearch.value) return;
-  open.value = !open.value;
+  const next = !isOpen.value;
+  if (expandState) {
+    expandState.setExpanded(storageKey.value, next);
+    return;
+  }
+  localOpen.value = next;
 }
 </script>
 

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

@@ -186,6 +186,7 @@ function onPosterFileChange(e: Event) {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupDisplayStyle')"
+      group-key="audioDisplayStyle"
       collapsible
       :default-open="false"
     >

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

@@ -238,6 +238,7 @@ function onOptionJsonChange(v: string) {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupChartDisplayMore')"
+      group-key="chartDisplayMore"
       collapsible
       :default-open="false"
     >
@@ -308,6 +309,7 @@ function onOptionJsonChange(v: string) {
 
     <ConfigFieldGroup
       :title="t('panel.config.groupTooltip')"
+      group-key="chartTooltip"
       collapsible
       :default-open="false"
     >
@@ -369,6 +371,7 @@ function onOptionJsonChange(v: string) {
     <ConfigFieldGroup
       v-if="['bar', 'line', 'area', 'scatter'].includes(selectedChartType)"
       :title="t('panel.config.groupAxes')"
+      group-key="chartAxes"
       collapsible
       :default-open="false"
     >

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

@@ -140,6 +140,7 @@ function clearSketch() {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupCanvasScript')"
+      group-key="geometryCanvasScript"
       collapsible
       :default-open="false"
     >
@@ -158,6 +159,7 @@ function clearSketch() {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupSketchOverlay')"
+      group-key="geometrySketch"
       collapsible
       :default-open="false"
     >

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

@@ -100,6 +100,7 @@ function onFileChange(e: Event) {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupDisplayMode')"
+      group-key="imageDisplayMode"
       collapsible
       :default-open="false"
     >

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

@@ -101,6 +101,7 @@ function patch(patch: Partial<PanelElement>) {
     </div>
     <ConfigFieldGroup
       :title="t('panel.config.groupNodeMore')"
+      group-key="nodeMore"
       collapsible
       :default-open="false"
     >

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

@@ -59,6 +59,7 @@ function patch(patch: Partial<PanelElement>) {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupCopyStrategy')"
+      group-key="referenceCopyStrategy"
       collapsible
       :default-open="false"
     >

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

@@ -84,6 +84,7 @@ function onFileChange(e: Event) {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupBgLayout')"
+      group-key="styleBgLayout"
       collapsible
       :default-open="false"
     >

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

@@ -215,6 +215,7 @@ watch(() => [props.element.id, props.element.textHtml], syncEditorHtml);
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupInputAbility')"
+      group-key="textInputAbility"
       collapsible
       :default-open="false"
     >

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

@@ -74,6 +74,7 @@ function patch(next: Partial<PanelElement>) {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupCopyStrategy')"
+      group-key="viewportCopyStrategy"
       collapsible
       :default-open="false"
     >