@nocobase/app-template-default 1.0.0-beta.66 → 1.0.0-beta.68

package/client/layouts/components/navigation-menu.tsx

@@ -1,6 +1,12 @@
 import { useTranslation } from '@nocobase/i18n/client';
 import { ChevronRight } from 'lucide-react';
-import { useRef, useState, type ReactElement } from 'react';
+import {
+  createContext,
+  useContext,
+  useRef,
+  useState,
+  type ReactElement,
+} from 'react';
 import { Link } from 'react-router';
 
 import {
@@ -17,8 +23,10 @@ import {
 import {
   SidebarGroup,
   SidebarGroupContent,
+  SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuAction,
+  SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarMenuSub,
@@ -38,35 +46,164 @@ const SELECTED =
   'data-active:bg-sidebar-primary data-active:text-sidebar-primary-foreground data-active:hover:bg-sidebar-primary data-active:hover:text-sidebar-primary-foreground';
 
 /**
- * A permission-filtered route tree as the sidebar's menu, drawn with shadcn's Sidebar primitives. Groups and parents
- * with a page are collapsible sub-menus. In the desktop icon mode the labels hide, every entry carries its label as a
- * tooltip, and an entry with children opens them in a popover.
+ * A count beside a menu entry. A number is what waits on the viewer, such as unread messages or requests to decide;
+ * `live` is work under way, such as runs in progress, with `hint` as its words for the tooltip and screen readers. Zero
+ * shows nothing.
+ */
+export type NavigationBadge =
+  | number
+  | { readonly count: number; readonly live: true; readonly hint: string };
+
+/** Counts keyed by the route name of the entry they stand beside. */
+export type NavigationBadges = Readonly<Record<string, NavigationBadge>>;
+
+const NavigationBadgesContext = createContext<NavigationBadges>({});
+
+function useNavigationBadge(item: RouteNavigationItem): {
+  readonly count: number;
+  readonly live: boolean;
+  readonly text: string;
+} {
+  const badge = useContext(NavigationBadgesContext)[item.route.name];
+  if (typeof badge === 'object')
+    return { count: badge.count, live: true, text: badge.hint };
+  const count = badge ?? 0;
+  return { count, live: false, text: String(count) };
+}
+
+/**
+ * A permission-filtered route tree as the sidebar's menu, drawn with shadcn's Sidebar primitives. A top-level group
+ * with no page of its own is a section: a sidebar group under a small heading, its entries always shown. Nested groups
+ * and parents with a page are collapsible sub-menus. In the desktop icon mode the labels and headings hide, every entry
+ * carries its label as a tooltip, and an entry with children opens them in a popover.
  */
 export function NavigationMenu({
   items,
   label,
   selectedKey,
+  sections = true,
+  badges = {},
 }: {
   readonly items: readonly RouteNavigationItem[];
   readonly label: string;
   readonly selectedKey: string | undefined;
+  /** `false` draws top-level groups as collapsible sub-menus too. */
+  readonly sections?: boolean;
+  /**
+   * Counts beside entries, keyed by route name, for a page entry that is not a sub-menu's: a top-level entry or a
+   * section's. They change while the page is open, so the layout passes them rather than the route declaring them.
+   */
+  readonly badges?: NavigationBadges;
+}): ReactElement {
+  // A group already divided into `section`s by the navigation stays one collapsible entry over them.
+  const isSection = (item: RouteNavigationItem): boolean =>
+    sections &&
+    item.children.length > 0 &&
+    !item.route.componentLoader &&
+    !item.children.some((child) => child.section);
+  // Consecutive plain entries share one sidebar group; each section is a group of its own.
+  const runs: (RouteNavigationItem | RouteNavigationItem[])[] = [];
+  for (const item of items) {
+    const last = runs.at(-1);
+    if (isSection(item)) runs.push(item);
+    else if (Array.isArray(last)) last.push(item);
+    else runs.push([item]);
+  }
+  return (
+    <NavigationBadgesContext value={badges}>
+      <nav aria-label={label}>
+        {runs.map((run) =>
+          Array.isArray(run) ? (
+            <SidebarGroup key={routeKey(run[0].route)}>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {run.map((item) => (
+                    <NavigationItem
+                      key={routeKey(item.route)}
+                      item={item}
+                      selectedKey={selectedKey}
+                    />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ) : (
+            <NavigationGroup
+              key={routeKey(run.route)}
+              item={run}
+              selectedKey={selectedKey}
+            />
+          ),
+        )}
+      </nav>
+    </NavigationBadgesContext>
+  );
+}
+
+/**
+ * A top-level group with no page of its own, as a sidebar group under a heading, its entries always shown. A section
+ * the navigation marks deeper in the tree (`section`) is a `NavigationSection` inside its menu instead.
+ */
+function NavigationGroup({
+  item,
+  selectedKey,
+}: {
+  readonly item: RouteNavigationItem;
+  readonly selectedKey: string | undefined;
 }): ReactElement {
+  const label = useItemLabel(item);
   return (
-    <nav aria-label={label}>
-      <SidebarGroup>
+    <SidebarGroup aria-label={label}>
+      <SidebarGroupLabel>{label}</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {item.children.map((child) => (
+            <NavigationItem
+              key={routeKey(child.route)}
+              item={child}
+              selectedKey={selectedKey}
+            />
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  );
+}
+
+/** Navigation sections are labels with direct links, rather than another collapsible menu level. */
+function NavigationSection({
+  item,
+  selectedKey,
+  onNavigate,
+  inPopover = false,
+}: ItemProps): ReactElement {
+  const label = useItemLabel(item);
+  return (
+    <SidebarMenuItem>
+      <SidebarGroup role='group' aria-label={label} className='p-0'>
+        <SidebarGroupLabel
+          className={
+            inPopover
+              ? 'text-sidebar-foreground/50 group-data-[collapsible=icon]:mt-0 group-data-[collapsible=icon]:opacity-100'
+              : 'text-sidebar-foreground/50'
+          }
+        >
+          {label}
+        </SidebarGroupLabel>
         <SidebarGroupContent>
           <SidebarMenu>
-            {items.map((item) => (
-              <NavigationItem
-                key={routeKey(item.route)}
-                item={item}
+            {item.children.map((child) => (
+              <NavigationSubItem
+                key={routeKey(child.route)}
+                item={child}
                 selectedKey={selectedKey}
+                onNavigate={onNavigate}
               />
             ))}
           </SidebarMenu>
         </SidebarGroupContent>
       </SidebarGroup>
-    </nav>
+    </SidebarMenuItem>
   );
 }
 
@@ -107,10 +244,22 @@ function NavigationItem({
   const isSelected = routeKey(item.route) === selectedKey;
   const children = item.children;
   const disclosure = useDisclosure(item, selectedKey);
+  const badge = useNavigationBadge(item);
+  const counted = badge.count > 0 ? `${label} · ${badge.text}` : null;
   const tooltip = inPopover
     ? undefined
     : { children: label, role: 'tooltip', sideOffset: 8 };
 
+  if (item.section)
+    return (
+      <NavigationSection
+        item={item}
+        selectedKey={selectedKey}
+        onNavigate={navigate}
+        inPopover={inPopover}
+      />
+    );
+
   if (children.length > 0 && state === 'collapsed' && !isMobile && !inPopover)
     return (
       <SidebarMenuItem>
@@ -138,12 +287,22 @@ function NavigationItem({
         <SidebarMenuButton
           render={link}
           isActive={isSelected}
-          tooltip={tooltip}
+          // A counted entry is named with its count, as its tooltip shows it.
+          aria-label={counted ?? undefined}
+          tooltip={
+            tooltip && counted ? { ...tooltip, children: counted } : tooltip
+          }
           className={SELECTED}
         >
           {Icon ? <Icon /> : null}
           <span>{label}</span>
         </SidebarMenuButton>
+        {badge.count > 0 && (
+          <EntryBadge
+            {...badge}
+            dot={state === 'collapsed' && !isMobile && !inPopover}
+          />
+        )}
       </SidebarMenuItem>
     );
 
@@ -195,6 +354,50 @@ function NavigationItem({
   );
 }
 
+/**
+ * An entry's count at the row's end, on a round ground of its own; work under way in the primary color behind a
+ * pulsing dot. The primitive hides it in the icon mode, where a dot on the icon's corner keeps it noticed and the
+ * tooltip carries the count. The words are the entry's, so this is hidden from screen readers.
+ */
+function EntryBadge({
+  count,
+  live,
+  text,
+  dot,
+}: {
+  readonly count: number;
+  readonly live: boolean;
+  readonly text: string;
+  readonly dot: boolean;
+}): ReactElement {
+  const pulse = 'animate-pulse motion-reduce:animate-none';
+  return (
+    <>
+      <SidebarMenuBadge
+        aria-hidden
+        title={live ? text : undefined}
+        className={
+          live
+            ? 'gap-1 rounded-full bg-primary/10 px-1.5 text-primary dark:bg-primary/20'
+            : 'rounded-full bg-foreground/8 px-1.5 dark:bg-foreground/15'
+        }
+      >
+        {live && (
+          <span className={`size-1.5 rounded-full bg-primary ${pulse}`} />
+        )}
+        {count > 99 ? '99+' : count}
+      </SidebarMenuBadge>
+      {dot && (
+        <span
+          aria-hidden
+          data-slot='navigation-badge-dot'
+          className={`pointer-events-none absolute top-1 right-1 size-2 rounded-full bg-primary ${live ? pulse : ''}`}
+        />
+      )}
+    </>
+  );
+}
+
 /** An entry inside a sub-menu: a link, or a collapsible sub-menu of its own. */
 function NavigationSubItem({
   item,
@@ -206,6 +409,14 @@ function NavigationSubItem({
   const isSelected = routeKey(item.route) === selectedKey;
   const disclosure = useDisclosure(item, selectedKey);
   const children = item.children;
+  if (item.section)
+    return (
+      <NavigationSection
+        item={item}
+        selectedKey={selectedKey}
+        onNavigate={onNavigate}
+      />
+    );
   if (children.length === 0 && !item.route.componentLoader) return null;
 
   const link = item.route.componentLoader ? (

package/client/layouts/components/sidebar-footer.tsx

@@ -44,7 +44,7 @@ export function AppSidebarFooter(): ReactElement {
   );
 
   return (
-    <SidebarFooter className='shrink-0 border-t border-sidebar-border/70'>
+    <SidebarFooter className='shrink-0 border-t border-sidebar-border'>
       {/* The menu button's inset (`p-2`, `gap-2`), so the shield lines up with the menu icons above. */}
       <div className='flex min-w-0 items-start gap-2 p-2 text-xs leading-5'>
         <Tooltip>

package/client/layouts/components/user-menu.tsx

@@ -49,7 +49,7 @@ export function UserMenu(): ReactElement {
         aria-label={t('account.openMenu', {
           defaultValue: 'Open account menu',
         })}
-        className='flex size-10 cursor-pointer items-center justify-center rounded-full border border-border/70 bg-background/60 text-left text-sm outline-none transition-colors hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50'
+        className='flex size-10 cursor-pointer items-center justify-center rounded-full border border-border bg-background/60 text-left text-sm outline-none transition-colors hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50'
       >
         {identity?.avatar ? (
           <img

package/client/lib/navigation-transform.ts

@@ -0,0 +1,8 @@
+import type { RouteNavigationItem } from '../routing/route-navigation.js';
+
+/** Application-owned navigation customization, applied after permission filtering. */
+export function transformNavigation(
+  items: RouteNavigationItem[],
+): RouteNavigationItem[] {
+  return items;
+}

package/client/lib/scrollbar.ts

@@ -0,0 +1,88 @@
+// Every scrollbar in the application shows only while what it belongs to scrolls, or while the mouse is near the
+// edge it runs along, so it can be found and grabbed (client/styles.css draws a bar under `[data-scrolling]` alone).
+// One listener on the document, in the capture phase since a scroll does not bubble, marks the element that scrolls,
+// or the page's root for the page itself, until it has been still for a moment; a second marks the scroller the mouse
+// is within EDGE_PX of the right or bottom edge of, at most once a frame. Installed once, as the client starts
+// (client/index.tsx).
+const STILL_MS = 800;
+const EDGE_PX = 16;
+const timers = new WeakMap<Element, number>();
+
+function reveal(element: HTMLElement): void {
+  element.dataset.scrolling = '';
+  window.clearTimeout(timers.get(element));
+  timers.set(
+    element,
+    window.setTimeout(() => {
+      delete element.dataset.scrolling;
+    }, STILL_MS),
+  );
+}
+
+function scrolls(element: Element, axis: 'x' | 'y'): boolean {
+  const overflow =
+    getComputedStyle(element)[axis === 'y' ? 'overflowY' : 'overflowX'];
+  if (overflow !== 'auto' && overflow !== 'scroll') return false;
+  return axis === 'y'
+    ? element.scrollHeight > element.clientHeight
+    : element.scrollWidth > element.clientWidth;
+}
+
+/** The scroller whose right or bottom edge the point is near: the nearest such ancestor of the target, or the page. */
+function scrollerAtEdge(
+  target: Element | null,
+  x: number,
+  y: number,
+): HTMLElement | undefined {
+  for (
+    let element = target;
+    element && element !== document.body;
+    element = element.parentElement
+  ) {
+    if (element === document.documentElement) break;
+    const box = element.getBoundingClientRect();
+    if (scrolls(element, 'y') && x >= box.right - EDGE_PX && x <= box.right)
+      return element as HTMLElement;
+    if (scrolls(element, 'x') && y >= box.bottom - EDGE_PX && y <= box.bottom)
+      return element as HTMLElement;
+  }
+  const page = (document.scrollingElement ??
+    document.documentElement) as HTMLElement;
+  if (page.scrollHeight > page.clientHeight && x >= window.innerWidth - EDGE_PX)
+    return page;
+  if (page.scrollWidth > page.clientWidth && y >= window.innerHeight - EDGE_PX)
+    return page;
+  return undefined;
+}
+
+export function revealScrollbarsWhileScrolling(): void {
+  document.addEventListener(
+    'scroll',
+    (event) => {
+      const element =
+        event.target instanceof Element
+          ? event.target
+          : (document.scrollingElement ?? document.documentElement);
+      if (element instanceof HTMLElement) reveal(element);
+    },
+    { capture: true, passive: true },
+  );
+  let frame = 0;
+  document.addEventListener(
+    'pointermove',
+    (event) => {
+      if (event.pointerType !== 'mouse' || frame) return;
+      const { clientX, clientY, target } = event;
+      frame = window.requestAnimationFrame(() => {
+        frame = 0;
+        const element = scrollerAtEdge(
+          target instanceof Element ? target : null,
+          clientX,
+          clientY,
+        );
+        if (element) reveal(element);
+      });
+    },
+    { passive: true },
+  );
+}

package/client/locales/system/en-US.ts

@@ -7,6 +7,10 @@ import inboxEnUS from '#extensions/nocobase-inbox/locales/en-US';
  * upgrade replaces this file, so put the application's own copy in `../en-US.ts` rather than here.
  */
 const systemEnUS = {
+  'auth.passwordResetSuccess':
+    'Your password has been reset. Sign in with your new password.',
+  'auth.requestNewResetLink': 'Request a new reset link',
+
   // The UI Library block of the `/device` page; the keys below may reword it.
   ...deviceApprovalEnUS,
   // The UI Library block of the `/inbox` page; the keys below may reword it.

package/client/locales/system/zh-CN.ts

@@ -4,6 +4,9 @@ import inboxZhCN from '#extensions/nocobase-inbox/locales/zh-CN';
 
 /** The Chinese copy of what the template ships; see `./en-US.ts`. */
 const systemZhCN: SystemResource = {
+  'auth.passwordResetSuccess': '密码已重置，请用新密码登录。',
+  'auth.requestNewResetLink': '重新申请重置链接',
+
   // The UI Library block of the `/device` page; the keys below may reword it.
   ...deviceApprovalZhCN,
   // The UI Library block of the `/inbox` page; the keys below may reword it.
@@ -15,16 +18,16 @@ const systemZhCN: SystemResource = {
   'inboxButton.pendingHint': '{{count}} 项等你处理，处理后减少。',
   'inboxButton.unreadHint': '{{count}} 条未读，阅读后减少。',
   'auth.welcome': '欢迎回来',
-  'auth.loginDescription': '使用用户名或邮箱和密码登录。',
+  'auth.loginDescription': '使用用户名或邮箱和密码登录',
   'auth.registerTitle': '创建账户',
-  'auth.registerDescription': '创建账户以开始使用。',
+  'auth.registerDescription': '创建账户以开始使用',
   'auth.forgotTitle': '忘记密码',
-  'auth.forgotDescription': '输入邮箱，如果账户存在，我们将发送重置链接。',
+  'auth.forgotDescription': '输入邮箱，如果账户存在，我们将发送重置链接',
   'auth.passwordResetUnavailable': '未开启自助找回，请联系管理员重置密码。',
   'auth.capabilityLoadFailed': '无法检查自助找回是否已开启。',
   'auth.retry': '重试',
   'auth.loading': '加载中',
-  'auth.resetDescription': '为账户设置新密码。',
+  'auth.resetDescription': '为账户设置新密码',
   'auth.resetTitle': '重置密码',
   'auth.identifier': '用户名或邮箱',
   'auth.password': '密码',
@@ -57,16 +60,16 @@ const systemZhCN: SystemResource = {
   'auth.continueWith': '使用 {provider} 继续',
   'auth.about': '关于此应用',
   'auth.platform': 'AI 原生应用平台',
-  'auth.marketingTitleFirst': '让 AI 自由构建。',
+  'auth.marketingTitleFirst': '让 AI 自由构建',
   'auth.marketingTitleSecond': 'NocoBase 保障',
-  'auth.marketingTitleThird': '可靠运行。',
+  'auth.marketingTitleThird': '可靠运行',
   'auth.marketingDescription':
-    '让 AI 在灵活的前端框架上构建体验，由 NocoBase 保障底层数据、权限与治理。',
+    '让 AI 在灵活的前端框架上构建体验，由 NocoBase 保障底层数据、权限与治理',
   'auth.frontend': 'AI 原生前端',
-  'auth.frontendDescription': '在灵活的框架上自由构建界面。',
+  'auth.frontendDescription': '在灵活的框架上自由构建界面',
   'auth.foundation': 'NocoBase 基础能力',
-  'auth.foundationDescription': '可靠的数据、访问控制与治理。',
-  'auth.marketingFooter': '自由构建，可靠支撑。',
+  'auth.foundationDescription': '可靠的数据、访问控制与治理',
+  'auth.marketingFooter': '自由构建，可靠支撑',
   'status.loading': '加载中',
   'status.loadingPage': '正在加载页面',
   'status.denied': '无权访问',
@@ -79,8 +82,8 @@ const systemZhCN: SystemResource = {
   'status.routeFailedDescription':
     '无法加载 {{packageName}} 的路由 {{label}}。',
   shell: {
-    buildFreely: 'AI 自由构建。',
-    reliability: '<brand>NocoBase</brand> 保障可靠。',
+    buildFreely: 'AI 自由构建',
+    reliability: '<brand>NocoBase</brand> 保障可靠',
   },
   home: {
     platform: 'NocoBase · AI 原生应用平台',

package/client/pages/auth/auth-page.css

@@ -0,0 +1,37 @@
+.auth-brand-panel {
+  background: var(--auth-brand-background);
+  background-image: radial-gradient(
+    ellipse at top right,
+    color-mix(in srgb, var(--auth-brand-highlight) 8%, transparent),
+    transparent 65%
+  );
+}
+
+/* Authentication surfaces have their own palette; application pages keep the selected theme. */
+.dark .auth-page {
+  --background: #141923;
+  --foreground: #eef1f7;
+  --card: #1b2230;
+  --muted-foreground: #a4adbd;
+  --primary: #526bc7;
+  --primary-foreground: #ffffff;
+  --border: #30394b;
+  --input: #3b475c;
+  --ring: #8198ed;
+  --auth-brand-background: #192130;
+  --auth-brand-highlight: #a2b3ec;
+  --auth-brand-muted: #aab5c9;
+}
+
+.dark .auth-page > aside {
+  border-color: transparent;
+}
+
+.dark .auth-page [data-slot='input'],
+.dark .auth-page [data-slot='input-group'] {
+  background-color: var(--card);
+}
+
+.dark .auth-page [data-slot='input-group'] input {
+  background-color: transparent;
+}

package/client/pages/auth/reset-password.tsx

@@ -1,3 +1,6 @@
+import { Button } from '#components/ui/button';
+import { AuthFormStatus } from '#extensions/nocobase-auth-forms/form-parts';
+import { usePasswordResetCapability } from '@nocobase/app-plugin-authentication/client';
 import { usePasswordReset } from '@nocobase/app-plugin-authentication/client/actions';
 import { useTranslation } from '@nocobase/i18n/client';
 import type { ReactElement } from 'react';
@@ -10,6 +13,7 @@ import { AuthPage } from './shared.js';
 export default function ResetPasswordPage(): ReactElement {
   const { t } = useTranslation();
   const reset = usePasswordReset();
+  const capability = usePasswordResetCapability();
   const [searchParams] = useSearchParams();
   // The link in the reset email carries the token; without one the form cannot do anything.
   const token = searchParams.get('token') ?? '';
@@ -19,20 +23,59 @@ export default function ResetPasswordPage(): ReactElement {
       description={t('auth.resetDescription')}
       title={t('auth.resetTitle')}
     >
-      <PasswordResetForm
-        disabled={!token}
-        error={token ? reset.error?.message : t('auth.invalidResetLink')}
-        footer={<Link to='/login'>{t('auth.backToSignIn')}</Link>}
-        labels={{
-          confirmPassword: t('auth.confirmNewPassword'),
-          password: t('auth.newPassword'),
-          passwordMismatch: t('auth.passwordMismatch'),
-          submit: t('auth.resetTitle'),
-          submitting: t('auth.resetting'),
-        }}
-        onSubmit={({ password }) => reset.submit({ password, token })}
-        submitting={reset.isPending}
-      />
+      {capability.isPending ? (
+        <div
+          className='h-48 animate-pulse rounded-md bg-muted'
+          aria-label={t('auth.loading')}
+        />
+      ) : capability.isError ? (
+        <div className='space-y-4'>
+          <AuthFormStatus type='error'>
+            {t('auth.capabilityLoadFailed')}
+          </AuthFormStatus>
+          <Button variant='outline' onClick={() => void capability.refetch()}>
+            {t('auth.retry')}
+          </Button>
+        </div>
+      ) : capability.data?.passwordResetAvailable !== true ? (
+        <div className='space-y-4'>
+          <AuthFormStatus type='error'>
+            {t('auth.passwordResetUnavailable')}
+          </AuthFormStatus>
+          <Link to='/login'>{t('auth.backToSignIn')}</Link>
+        </div>
+      ) : reset.isSuccess ? (
+        <div className='space-y-4'>
+          <AuthFormStatus type='success'>
+            {t('auth.passwordResetSuccess')}
+          </AuthFormStatus>
+          <Link to='/login'>{t('auth.backToSignIn')}</Link>
+        </div>
+      ) : (
+        <PasswordResetForm
+          disabled={!token}
+          error={token ? reset.error?.message : t('auth.invalidResetLink')}
+          footer={
+            <span className='flex flex-wrap justify-center gap-x-4 gap-y-2 [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary'>
+              <Link to='/login'>{t('auth.backToSignIn')}</Link>
+              {!token || reset.error ? (
+                <Link to='/forgot-password'>
+                  {t('auth.requestNewResetLink')}
+                </Link>
+              ) : null}
+            </span>
+          }
+          labels={{
+            confirmPassword: t('auth.confirmNewPassword'),
+            password: t('auth.newPassword'),
+            passwordMismatch: t('auth.passwordMismatch'),
+            submit: t('auth.resetTitle'),
+            submitting: t('auth.resetting'),
+          }}
+          onSubmit={({ password }) => reset.submit({ password, token })}
+          submitting={reset.isPending}
+        />
+      )}
     </AuthPage>
   );
 }