@arronqzy/react-view 1.0.31 → 1.0.33

package/dist/styles.css

@@ -1150,6 +1150,10 @@ video {
   min-width: 0px;
 }
 
+.min-w-\[100px\] {
+  min-width: 100px;
+}
+
 .min-w-\[120px\] {
   min-width: 120px;
 }
@@ -1158,6 +1162,10 @@ video {
   min-width: 140px;
 }
 
+.min-w-\[180px\] {
+  min-width: 180px;
+}
+
 .min-w-\[92px\] {
   min-width: 92px;
 }
@@ -1284,6 +1292,10 @@ video {
   cursor: crosshair;
 }
 
+.cursor-default {
+  cursor: default;
+}
+
 .cursor-grabbing {
   cursor: grabbing;
 }
@@ -1298,6 +1310,12 @@ video {
           user-select: none;
 }
 
+.select-text {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+}
+
 .resize-none {
   resize: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "files": [
     "src",
     "dist",
@@ -30,14 +30,14 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.36.2",
-    "@arronqzy/i18n": "0.1.13",
     "@arronqzy/ui": "1.0.9",
     "@arronqzy/blueprint-dsl": "1.0.15",
-    "@arronqzy/react-blueprint": "1.0.18",
+    "@arronqzy/react-blueprint": "1.0.19",
     "@arronqzy/view-scene3d": "0.1.5",
+    "@arronqzy/i18n": "0.1.15",
+    "@arronqzy/view-table": "0.1.8",
     "@arronqzy/rx-store": "1.0.8",
-    "@arronqzy/webllm-assistant": "0.1.16",
-    "@arronqzy/view-table": "0.1.8"
+    "@arronqzy/webllm-assistant": "0.1.16"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",
@@ -46,8 +46,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/tailwind": "1.0.2",
-    "@arronqzy/typescript-config": "1.0.0"
+    "@arronqzy/typescript-config": "1.0.0",
+    "@arronqzy/tailwind": "1.0.2"
   },
   "scripts": {
     "lint": "eslint \"src/**/*.{ts,tsx}\"",

package/src/panel/ReactViewPanel.tsx

@@ -143,6 +143,10 @@ export type ReactViewPanelProps = {
    * 省略或空字符串保持历史全局库名。
    */
   nameSpace?: string | null;
+  /** 顶栏「设置 → 关于」展示的 npm 包名，如 @arronqzy/abuilder */
+  packageName?: string | null;
+  /** 顶栏「设置 → 关于」展示的包版本号 */
+  packageVersion?: string | null;
 };
 
 function ReactViewPanelInner({
@@ -150,6 +154,8 @@ function ReactViewPanelInner({
   className,
   initialWorkspace = null,
   nameSpace = null,
+  packageName = null,
+  packageVersion = null,
 }: ReactViewPanelProps) {
   const { t, locale, setLocale } = useI18n();
   const messages = useMemo(() => getPanelMessages(t), [t]);
@@ -1904,6 +1910,8 @@ function ReactViewPanelInner({
           setLocale={setLocale}
           outputScale={outputScale}
           setOutputScale={setOutputScale}
+          packageName={packageName}
+          packageVersion={packageVersion}
         />
         <WorkspaceProjectNav
           projects={workspaceProjects.projects}

package/src/panel/components/PanelConfigSidebar.tsx

@@ -107,7 +107,7 @@ export function PanelConfigSidebar({
   const matchCountRef = useRef(0);
   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";
-  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
+  const DEFAULT_EXPANDED_SECTIONS: Record<string, boolean> = {
     nodeInfo: true,
     styleBackground: false,
     styleBorder: false,
@@ -117,7 +117,14 @@ export function PanelConfigSidebar({
     chartAdvancedLayout: false,
     chartAdvancedAxisPointer: false,
     reference: true,
-  });
+  };
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>(
+    () => ({ ...DEFAULT_EXPANDED_SECTIONS })
+  );
+  const expandedSectionsByIdRef = useRef(new Map<string, Record<string, boolean>>());
+  const expandedSectionsRef = useRef(expandedSections);
+  expandedSectionsRef.current = expandedSections;
+  const activeExpandedKeyRef = useRef<string | null>(null);
 
   const isChartElement = !!selectedElement && CHART_TYPES.has(selectedElement.materialType ?? "");
   const selectedLayer = selectedElement
@@ -179,14 +186,27 @@ export function PanelConfigSidebar({
     el.scrollTop = top;
   }, [configScrollKey]);
 
-  useEffect(() => {
-    if (!selectedElement) return;
-    if (!CHART_TYPES.has(selectedElement.materialType ?? "")) return;
-    setExpandedSections((prev) => ({
-      ...prev,
-      chartBasic: true,
-    }));
-  }, [selectedElement?.id, selectedElement?.materialType]);
+  useLayoutEffect(() => {
+    const prevKey = activeExpandedKeyRef.current;
+    if (prevKey && prevKey !== configScrollKey) {
+      expandedSectionsByIdRef.current.set(prevKey, {
+        ...expandedSectionsRef.current,
+      });
+    }
+    activeExpandedKeyRef.current = configScrollKey;
+    if (!configScrollKey) {
+      setExpandedSections({ ...DEFAULT_EXPANDED_SECTIONS });
+      return;
+    }
+    const saved = expandedSectionsByIdRef.current.get(configScrollKey);
+    if (saved) {
+      setExpandedSections({ ...saved });
+      return;
+    }
+    const initial = { ...DEFAULT_EXPANDED_SECTIONS };
+    expandedSectionsByIdRef.current.set(configScrollKey, initial);
+    setExpandedSections(initial);
+  }, [configScrollKey]);
 
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -202,7 +222,12 @@ export function PanelConfigSidebar({
     expandedSections[key] ?? defaultValue;
 
   const setSectionExpanded = (key: string, next: boolean) => {
-    setExpandedSections((prev) => ({ ...prev, [key]: next }));
+    setExpandedSections((prev) => {
+      const updated = { ...prev, [key]: next };
+      const id = activeExpandedKeyRef.current;
+      if (id) expandedSectionsByIdRef.current.set(id, updated);
+      return updated;
+    });
   };
 
   useEffect(() => {
@@ -220,6 +245,8 @@ export function PanelConfigSidebar({
         next.geometryCanvasScript = true;
         next.geometrySketch = true;
         next.referenceCopyStrategy = true;
+        const id = activeExpandedKeyRef.current;
+        if (id) expandedSectionsByIdRef.current.set(id, next);
         return next;
       });
       window.requestAnimationFrame(() => {

package/src/panel/components/PanelMenubar.tsx

@@ -8,6 +8,9 @@ import {
   MenubarRadioGroup,
   MenubarRadioItem,
   MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
   MenubarTrigger,
 } from "@arronqzy/ui";
 import type { Locale } from "@arronqzy/i18n";
@@ -37,6 +40,10 @@ export type PanelMenubarProps = {
   setLocale: (locale: Locale) => void;
   outputScale: boolean;
   setOutputScale: (value: boolean) => void;
+  /** 产品包名（可选，关于二级菜单不展示） */
+  packageName?: string | null;
+  /** 产品版本号，如 1.1.32 */
+  packageVersion?: string | null;
 };
 
 export function PanelMenubar({
@@ -64,13 +71,18 @@ export function PanelMenubar({
   setLocale,
   outputScale,
   setOutputScale,
+  packageVersion,
 }: PanelMenubarProps) {
+  const versionOnly =
+    packageVersion && packageVersion.trim()
+      ? t("panel.menubar.versionValue", { version: packageVersion.trim() })
+      : t("panel.menubar.versionUnavailable");
+
   return (
         <Menubar className="h-8 border-0 bg-transparent p-0 shadow-none">
           <MenubarMenu>
             <MenubarTrigger className="px-2 py-1 text-xs font-normal">{t("panel.menubar.file")}</MenubarTrigger>
             <MenubarContent className="z-[10100]">
-              {/* <MenubarItem onClick={handlePreviewLayer}>{t("panel.workspace.previewDocTitle")}</MenubarItem> */}
               <MenubarItem onClick={handleExport}>{t("panel.menubar.export")}</MenubarItem>
               <MenubarItem onClick={() => importInputRef.current?.click()}>{t("panel.menubar.import")}</MenubarItem>
             </MenubarContent>
@@ -113,7 +125,7 @@ export function PanelMenubar({
           </MenubarMenu>
           <MenubarMenu>
             <MenubarTrigger className="px-2 py-1 text-xs font-normal">{t("panel.menubar.settings")}</MenubarTrigger>
-            <MenubarContent className="z-[10100]">
+            <MenubarContent className="z-[10100] min-w-[180px]">
               <MenubarRadioGroup
                 value={panelFontSize}
                 onValueChange={(value) => setPanelFontSize(value as "sm" | "md" | "lg")}
@@ -141,6 +153,20 @@ export function PanelMenubar({
               >
                 {t("panel.menubar.outputScale")}
               </MenubarCheckboxItem>
+              <MenubarSeparator />
+              <MenubarSub>
+                <MenubarSubTrigger>{t("panel.menubar.about")}</MenubarSubTrigger>
+                <MenubarSubContent className="z-[10100] min-w-[100px]">
+                  <MenubarItem
+                    className="cursor-default select-text"
+                    onSelect={(e) => e.preventDefault()}
+                    data-abuilder-version={packageVersion ?? undefined}
+                    title={`${t("panel.menubar.versionLabel")} ${versionOnly}`}
+                  >
+                    {versionOnly}
+                  </MenubarItem>
+                </MenubarSubContent>
+              </MenubarSub>
             </MenubarContent>
           </MenubarMenu>
         </Menubar>