openxiangda 1.0.75 → 1.0.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openxiangda",
-  "version": "1.0.75",
+  "version": "1.0.76",
   "description": "OpenXiangda CLI, workspace build tools, runtime SDK, and form components.",
   "private": false,
   "bin": {

package/templates/openxiangda-react-spa/src/layouts/AdminShell.tsx

@@ -145,6 +145,7 @@ export function AdminShell() {
             <section className="min-w-0" key={group.title}>
               <button
                 aria-label={group.title}
+                aria-expanded={!collapsed}
                 className={cn(
                   "flex h-9 w-full items-center rounded-xl text-[12px] font-semibold text-slate-700 transition hover:bg-slate-50 hover:text-slate-950",
                   compact ? "justify-center px-0" : "justify-between gap-2 px-2.5",
@@ -163,51 +164,63 @@ export function AdminShell() {
                 </span>
                 {compact ? (
                   null
-                ) : collapsed ? (
-                  <ChevronRight className="shrink-0 text-slate-500" size={15} strokeWidth={2} />
                 ) : (
-                  <ChevronDown className="shrink-0 text-slate-500" size={15} strokeWidth={2} />
+                  <ChevronDown
+                    className={cn(
+                      "shrink-0 text-slate-500 transition-transform duration-200 ease-out motion-reduce:transition-none",
+                      collapsed && "-rotate-90",
+                    )}
+                    size={15}
+                    strokeWidth={2}
+                  />
                 )}
               </button>
-              {!collapsed ? (
-                <div className={cn("mt-1 space-y-0.5", compact && "mt-1")}>
-                  {group.items.map(item => {
-                    const active = navigationState.activePath === item.path;
-                    return (
-                      <Link
-                        aria-label={item.name}
-                        className={cn(
-                          "group relative flex h-9 items-center rounded-xl text-sm transition",
-                          compact ? "justify-center px-0" : "gap-2.5 px-3",
-                          active
-                            ? "bg-[#eef6ff] text-[#1677ff]"
-                            : "text-slate-600 hover:bg-slate-50 hover:text-slate-900",
-                        )}
-                        key={`${group.title}-${item.name}-${item.path}`}
-                        onClick={() => setMobileOpen(false)}
-                        to={item.path}
-                      >
-                        <span
-                          className={cn(
-                            "absolute -left-2.5 top-1 h-7 w-1 rounded-r-full transition",
-                            active ? "bg-[#1677ff]" : "bg-transparent",
-                            compact && "-left-2",
-                          )}
-                        />
-                        <span
+              <div
+                className={cn(
+                  "grid transition-[grid-template-rows,opacity] duration-200 ease-out motion-reduce:transition-none",
+                  collapsed ? "grid-rows-[0fr] opacity-0" : "grid-rows-[1fr] opacity-100",
+                )}
+              >
+                <div className={cn("min-h-0 overflow-hidden", collapsed && "pointer-events-none")}>
+                  <div className={cn("mt-1 space-y-0.5", compact && "mt-1")}>
+                    {group.items.map(item => {
+                      const active = navigationState.activePath === item.path;
+                      return (
+                        <Link
+                          aria-label={item.name}
                           className={cn(
-                            "grid h-5 w-5 shrink-0 place-items-center transition",
-                            active ? "text-[#1677ff]" : "text-slate-500 group-hover:text-slate-700",
+                            "group relative flex h-9 items-center rounded-xl text-sm transition",
+                            compact ? "justify-center px-0" : "gap-2.5 pl-7 pr-3",
+                            active
+                              ? "bg-[#eef6ff] text-[#1677ff]"
+                              : "text-slate-600 hover:bg-slate-50 hover:text-slate-900",
                           )}
+                          key={`${group.title}-${item.name}-${item.path}`}
+                          onClick={() => setMobileOpen(false)}
+                          to={item.path}
                         >
-                          <item.icon size={16} strokeWidth={2} />
-                        </span>
-                        <span className={cn("min-w-0 flex-1 truncate font-medium", compact && "sr-only")}>{item.name}</span>
-                      </Link>
-                    );
-                  })}
+                          <span
+                            className={cn(
+                              "absolute -left-2.5 top-1 h-7 w-1 rounded-r-full transition",
+                              active ? "bg-[#1677ff]" : "bg-transparent",
+                              compact && "-left-2",
+                            )}
+                          />
+                          <span
+                            className={cn(
+                              "grid h-5 w-5 shrink-0 place-items-center transition",
+                              active ? "text-[#1677ff]" : "text-slate-500 group-hover:text-slate-700",
+                            )}
+                          >
+                            <item.icon size={16} strokeWidth={2} />
+                          </span>
+                          <span className={cn("min-w-0 flex-1 truncate font-medium", compact && "sr-only")}>{item.name}</span>
+                        </Link>
+                      );
+                    })}
+                  </div>
                 </div>
-              ) : null}
+              </div>
             </section>
           );
         })}