openxiangda 1.0.71 → 1.0.72

package/package.json

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

package/templates/openxiangda-react-spa/AGENTS.md

@@ -49,7 +49,7 @@ React SPA 页面需要声明菜单 code、route code 和 path pattern。默认
 ```json
 {
   "code": "admin_dashboard",
-  "name": "首页",
+  "name": "工作台",
   "routeCode": "admin.dashboard",
   "path": "/view/:appType/admin"
 }

package/templates/openxiangda-react-spa/src/app/navigation.ts

@@ -1,10 +1,12 @@
-import type { ComponentType } from "react";
+import type { ComponentType, SVGProps } from "react";
 import { Home } from "lucide-react";
 
 export type StarterNavigationItem = {
   code?: string;
   hint?: string;
-  icon: ComponentType<{ size?: string | number; className?: string }>;
+  icon: ComponentType<
+    SVGProps<SVGSVGElement> & { size?: string | number; strokeWidth?: string | number }
+  >;
   name: string;
   path: string;
   routeCode?: string;
@@ -27,13 +29,12 @@ export function buildStarterAdminNavigation({
 }: BuildStarterNavigationOptions): StarterNavigationGroup[] {
   return [
     {
-      title: "应用",
+      title: "应用工作台",
       items: [
         {
           code: "admin_dashboard",
-          hint: "默认首页",
           icon: Home,
-          name: "首页",
+          name: "工作台",
           path: viewPath(appType, "admin"),
           routeCode: "admin.dashboard",
         },

package/templates/openxiangda-react-spa/src/app/starter-content.ts

@@ -1,5 +1,6 @@
 export const starterBrand = {
   fallbackName: "业务应用",
   logoText: "A",
+  name: "OpenXiangda",
   subtitle: "React SPA Starter",
 };

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

@@ -1,11 +1,11 @@
 import {
   ChevronDown,
+  ChevronLeft,
   ChevronRight,
   LogOut,
   Menu,
   RefreshCw,
   Shield,
-  UserCircle,
   X,
 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
@@ -49,6 +49,7 @@ export function AdminShell() {
   const auth = useRuntimeAuth();
   const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
   const [mobileOpen, setMobileOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [userMenuOpen, setUserMenuOpen] = useState(false);
   const [loggingOut, setLoggingOut] = useState(false);
 
@@ -59,6 +60,19 @@ export function AdminShell() {
       bootstrap.data?.user?.id ||
       "当前用户",
   );
+  const userAvatar = String(
+    bootstrap.data?.user?.avatar ||
+      bootstrap.data?.user?.avatarUrl ||
+      bootstrap.data?.user?.photoUrl ||
+      "",
+  );
+  const userRole = String(
+    bootstrap.data?.user?.roleName ||
+      bootstrap.data?.user?.title ||
+      bootstrap.data?.user?.position ||
+      bootstrap.data?.user?.departmentName ||
+      "平台用户",
+  );
 
   const menuCodes = useMemo(() => collectMenuCodes(menus.data), [menus.data]);
   const groups = useMemo<StarterNavigationGroup[]>(
@@ -77,47 +91,60 @@ export function AdminShell() {
     await auth.logoutAndRedirect({ replace: true });
   };
 
-  const sidebar = (
-    <aside className="flex h-full min-h-0 flex-col border-r border-white/70 bg-white/[0.86] backdrop-blur-xl">
-      <div className="flex h-20 shrink-0 items-center gap-3 border-b border-slate-200/70 px-5">
+  const sidebar = (compact = false) => (
+    <aside className="flex h-full min-h-0 flex-col border-r border-slate-200 bg-white">
+      <div className={cn("flex h-[68px] shrink-0 items-center gap-3", compact ? "justify-center px-3" : "px-5")}>
         <Link
-          className="grid h-11 w-11 place-items-center rounded-2xl bg-[linear-gradient(135deg,#2563eb,#172554)] text-base font-semibold text-white shadow-lg shadow-blue-200/70"
+          aria-label={starterBrand.name}
+          className="grid h-9 w-9 shrink-0 place-items-center text-blue-600"
           to={`/view/${appType}/admin`}
         >
-          {appName.slice(0, 1) || starterBrand.logoText}
+          <OpenXiangdaMark />
         </Link>
-        <div className="min-w-0">
-          <Link className="block truncate text-base font-semibold text-slate-950" to={`/view/${appType}/admin`}>
-            {appName}
+        <div className={cn("min-w-0", compact && "hidden")}>
+          <Link className="block truncate text-[15px] font-semibold leading-5 text-slate-950" to={`/view/${appType}/admin`}>
+            {starterBrand.name}
           </Link>
-          <div className="mt-0.5 truncate text-xs text-slate-500">{starterBrand.subtitle}</div>
+          <div className="mt-0.5 truncate text-xs leading-4 text-slate-500">{starterBrand.subtitle}</div>
         </div>
       </div>
 
-      <nav className="ox-scrollbar min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-5">
+      <nav className={cn("ox-scrollbar min-h-0 flex-1 overflow-y-auto py-5", compact ? "px-2" : "space-y-7 px-3")}>
         {groups.map(group => {
           const collapsed = collapsedGroups[group.title];
           return (
             <section key={group.title}>
               <button
-                className="flex w-full items-center justify-between rounded-xl px-2 py-2 text-xs font-semibold text-slate-500 transition hover:bg-slate-100/80"
+                aria-label={group.title}
+                className={cn(
+                  "flex h-10 w-full items-center rounded-lg text-[13px] font-semibold text-slate-800 transition hover:bg-slate-50",
+                  compact ? "justify-center px-0" : "justify-between px-2.5",
+                )}
                 onClick={() => setCollapsedGroups(prev => ({ ...prev, [group.title]: !collapsed }))}
                 type="button"
               >
-                <span>{group.title}</span>
-                {collapsed ? <ChevronRight size={15} /> : <ChevronDown size={15} />}
+                <span className={cn(compact && "sr-only")}>{group.title}</span>
+                {compact ? (
+                  <Menu className="text-slate-500" size={16} strokeWidth={2} />
+                ) : collapsed ? (
+                  <ChevronRight className="text-slate-500" size={16} strokeWidth={2} />
+                ) : (
+                  <ChevronDown className="text-slate-500" size={16} strokeWidth={2} />
+                )}
               </button>
               {!collapsed ? (
-                <div className="mt-1 space-y-1.5">
+                <div className={cn("mt-1 space-y-1", compact && "mt-2")}>
                   {group.items.map(item => {
                     const active = isMenuActive(location.pathname, location.search, item.path);
                     return (
                       <Link
+                        aria-label={item.name}
                         className={cn(
-                          "group relative flex items-center gap-3 rounded-2xl px-3 py-3 text-sm transition",
+                          "group relative flex h-10 items-center rounded-lg text-sm transition",
+                          compact ? "justify-center px-0" : "gap-3 px-3",
                           active
-                            ? "bg-blue-50 text-blue-700 shadow-sm ring-1 ring-blue-100"
-                            : "text-slate-600 hover:bg-slate-100/80 hover:text-slate-950",
+                            ? "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)}
@@ -125,24 +152,20 @@ export function AdminShell() {
                       >
                         <span
                           className={cn(
-                            "absolute left-0 top-3 h-8 w-1 rounded-r-full transition",
-                            active ? "bg-blue-600" : "bg-transparent",
+                            "absolute -left-3 top-1 h-8 w-1 rounded-r-full transition",
+                            active ? "bg-[#1677ff]" : "bg-transparent",
+                            compact && "-left-2",
                           )}
                         />
                         <span
                           className={cn(
-                            "grid h-9 w-9 shrink-0 place-items-center rounded-xl transition",
-                            active ? "bg-white text-blue-700" : "bg-white/70 text-slate-500 group-hover:text-slate-700",
+                            "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={18} />
-                        </span>
-                        <span className="min-w-0 flex-1">
-                          <span className="block truncate font-medium">{item.name}</span>
-                          {item.hint ? (
-                            <span className="mt-0.5 block truncate text-xs text-slate-400">{item.hint}</span>
-                          ) : null}
+                          <item.icon size={17} strokeWidth={2} />
                         </span>
+                        <span className={cn("min-w-0 flex-1 truncate font-medium", compact && "sr-only")}>{item.name}</span>
                       </Link>
                     );
                   })}
@@ -152,6 +175,21 @@ export function AdminShell() {
           );
         })}
       </nav>
+      <div className="shrink-0 px-3 py-4">
+        <button
+          className={cn(
+            "flex h-10 w-full items-center gap-3 rounded-lg text-sm font-medium text-slate-600 transition hover:bg-slate-50 hover:text-slate-950",
+            compact ? "justify-center px-0" : "px-2.5",
+          )}
+          onClick={() => setSidebarCollapsed(value => !value)}
+          type="button"
+        >
+          <span className="grid h-7 w-7 shrink-0 place-items-center rounded-lg bg-slate-50 text-slate-600 ring-1 ring-slate-200">
+            {compact ? <ChevronRight size={17} /> : <ChevronLeft size={17} />}
+          </span>
+          <span className={cn("truncate", compact && "sr-only")}>{compact ? "展开侧边栏" : "收起侧边栏"}</span>
+        </button>
+      </div>
     </aside>
   );
 
@@ -164,7 +202,9 @@ export function AdminShell() {
       routeCode="admin.dashboard"
     >
       <div className="min-h-screen overflow-x-hidden bg-[linear-gradient(180deg,#edf4ff_0%,#f8fafc_42%,#f1f5f9_100%)] text-slate-950">
-        <div className="fixed inset-y-0 left-0 z-30 hidden w-64 lg:block">{sidebar}</div>
+        <div className={cn("fixed inset-y-0 left-0 z-30 hidden lg:block", sidebarCollapsed ? "w-[76px]" : "w-60")}>
+          {sidebar(sidebarCollapsed)}
+        </div>
 
         {mobileOpen ? (
           <div className="fixed inset-0 z-40 lg:hidden">
@@ -183,12 +223,12 @@ export function AdminShell() {
               >
                 <X size={19} />
               </button>
-              {sidebar}
+              {sidebar(false)}
             </div>
           </div>
         ) : null}
 
-        <main className="min-w-0 lg:pl-64">
+        <main className={cn("min-w-0 transition-[padding] duration-200", sidebarCollapsed ? "lg:pl-[76px]" : "lg:pl-60")}>
           <header className="sticky top-0 z-20 border-b border-white/70 bg-white/[0.8] backdrop-blur-xl">
             <div className="flex h-20 min-w-0 items-center justify-between gap-3 px-4 sm:px-6">
               <div className="flex min-w-0 items-center gap-3">
@@ -209,25 +249,24 @@ export function AdminShell() {
               <div className="flex shrink-0 items-center">
                 <div className="relative">
                   <button
-                    className="flex h-10 items-center gap-2 rounded-full bg-white py-1 pl-1 pr-3 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50"
+                    className="flex h-12 items-center gap-3 rounded-2xl px-2 py-1.5 text-left transition hover:bg-white/80"
                     onClick={() => setUserMenuOpen(open => !open)}
                     type="button"
                   >
-                    <span className="grid h-8 w-8 place-items-center rounded-full bg-blue-600 text-xs font-semibold text-white">
-                      {userName.slice(0, 1).toUpperCase()}
+                    <UserAvatar name={userName} src={userAvatar} />
+                    <span className="hidden min-w-0 sm:block">
+                      <span className="block max-w-28 truncate text-sm font-semibold leading-5 text-slate-950">{userName}</span>
+                      <span className="block max-w-28 truncate text-xs leading-4 text-slate-500">{userRole}</span>
                     </span>
-                    <span className="hidden max-w-24 truncate sm:block">{userName}</span>
-                    <ChevronDown size={15} />
+                    <ChevronDown className="text-slate-500" size={16} />
                   </button>
                   {userMenuOpen ? (
                     <div className="absolute right-0 mt-3 w-72 overflow-hidden rounded-2xl border border-slate-200 bg-white p-2 shadow-[0_24px_70px_rgba(15,23,42,0.16)]">
-                      <div className="flex gap-3 rounded-xl bg-slate-50 p-3">
-                        <div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-blue-600 text-white">
-                          <UserCircle size={21} />
-                        </div>
+                      <div className="flex items-center gap-3 rounded-xl bg-slate-50 p-3">
+                        <UserAvatar name={userName} src={userAvatar} size="lg" />
                         <div className="min-w-0">
                           <div className="truncate text-sm font-semibold text-slate-950">{userName}</div>
-                          <div className="mt-1 truncate text-xs text-slate-500">{String(bootstrap.data?.user?.id || "current-user")}</div>
+                          <div className="mt-0.5 truncate text-xs text-slate-500">{userRole}</div>
                         </div>
                       </div>
                       <button
@@ -266,6 +305,61 @@ export function AdminShell() {
   );
 }
 
+function UserAvatar({
+  name,
+  size = "md",
+  src,
+}: {
+  name: string;
+  size?: "md" | "lg";
+  src?: string;
+}) {
+  const className = cn(
+    "shrink-0 overflow-hidden rounded-full bg-[linear-gradient(135deg,#2563eb_0%,#38bdf8_100%)] text-white shadow-sm ring-2 ring-white",
+    size === "lg" ? "h-11 w-11" : "h-9 w-9",
+  );
+
+  if (src) {
+    return (
+      <img
+        alt=""
+        className={cn(className, "object-cover")}
+        referrerPolicy="no-referrer"
+        src={src}
+      />
+    );
+  }
+
+  return (
+    <span className={cn(className, "grid place-items-center text-sm font-semibold")}>
+      {name.slice(0, 1).toUpperCase()}
+    </span>
+  );
+}
+
+function OpenXiangdaMark() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-8 w-8"
+      fill="none"
+      viewBox="0 0 36 36"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18 3.5 32.5 31H26L18 15.7 10 31H3.5L18 3.5Z"
+        fill="currentColor"
+      />
+      <path d="M18 20.2 23.4 31H12.6L18 20.2Z" fill="white" />
+      <path
+        d="M18 9.5 8.2 31H3.5L18 3.5l14.5 27.5h-4.7L18 9.5Z"
+        fill="currentColor"
+        opacity="0.86"
+      />
+    </svg>
+  );
+}
+
 function AdminPermissionState({ state }: { state: PermissionBoundaryFallbackState }) {
   const auth = useRuntimeAuth();
 

package/templates/openxiangda-react-spa/src/resources/menus/menus.json

@@ -2,7 +2,7 @@
   "menus": [
     {
       "code": "admin_dashboard",
-      "name": "首页",
+      "name": "工作台",
       "type": "nav",
       "routeCode": "admin.dashboard",
       "path": "/view/:appType/admin",