@nocobase/portal-template-default 1.0.0 → 1.0.1

package/scripts/registry.mjs

@@ -0,0 +1,161 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const projectRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  ".."
+);
+const configPath = path.join(projectRoot, "registry.config.json");
+const outputPath = path.join(projectRoot, "registry.json");
+const action = process.argv[2];
+
+if (!new Set(["build", "install-missing", "preview"]).has(action)) {
+  throw new Error(
+    "Usage: node scripts/registry.mjs <build|install-missing|preview>"
+  );
+}
+
+function toPosix(value) {
+  return value.split(path.sep).join("/");
+}
+
+function walkFiles(directory, root = directory) {
+  return fs
+    .readdirSync(directory, { withFileTypes: true })
+    .flatMap((entry) => {
+      const entryPath = path.join(directory, entry.name);
+      return entry.isDirectory()
+        ? walkFiles(entryPath, root)
+        : [toPosix(path.relative(root, entryPath))];
+    })
+    .sort((left, right) => left.localeCompare(right));
+}
+
+function isIncluded(file, include) {
+  return include.some((entry) => {
+    const normalized = entry.replace(/^\.\//, "").replace(/\/$/, "");
+    return (
+      normalized === "." ||
+      file === normalized ||
+      file.startsWith(`${normalized}/`)
+    );
+  });
+}
+
+function assertSafePath(value, prefix, label) {
+  if (!value.startsWith(prefix) || value.includes("..")) {
+    throw new Error(`Unsafe ${label} path: ${value}`);
+  }
+}
+
+const sourceConfig = JSON.parse(fs.readFileSync(configPath, "utf8"));
+const sourceFiles = new Map();
+const sourceMappings = new Map();
+const itemNames = new Set();
+
+const items = sourceConfig.items.map((item) => {
+  if (!item.name || itemNames.has(item.name)) {
+    throw new Error(`Registry item name must be unique: ${item.name}`);
+  }
+  itemNames.add(item.name);
+  const source = item.source;
+  if (!source) {
+    throw new Error(`Registry item ${item.name} is missing its source mapping`);
+  }
+
+  assertSafePath(source.root, "registry/", "source");
+  assertSafePath(source.target, "src/extensions/", "target");
+
+  const sourceRoot = path.join(projectRoot, source.root);
+  if (!fs.existsSync(sourceRoot)) {
+    throw new Error(`Registry source does not exist: ${source.root}`);
+  }
+
+  if (!Array.isArray(source.include) || !source.include.length) {
+    throw new Error(`Registry item ${item.name} must include at least one path`);
+  }
+
+  const mappingKey = `${source.root}\0${source.target}`;
+  const mapping = sourceMappings.get(mappingKey) ?? {
+    root: source.root,
+    target: source.target,
+    include: new Set(),
+  };
+  source.include.forEach((entry) => mapping.include.add(entry));
+  sourceMappings.set(mappingKey, mapping);
+
+  const allFiles = sourceFiles.get(source.root) ?? walkFiles(sourceRoot);
+  sourceFiles.set(source.root, allFiles);
+  const includedFiles = allFiles.filter((file) =>
+    isIncluded(file, source.include)
+  );
+  if (!includedFiles.length) {
+    throw new Error(
+      `Registry item ${item.name} include paths did not match any files`
+    );
+  }
+
+  if (action !== "build") return item;
+  const { source: _source, ...registryItem } = item;
+
+  return {
+    ...registryItem,
+    files: includedFiles.map((file) => ({
+      path: path.posix.join(source.root, file),
+      type: "registry:file",
+      target: path.posix.join(source.target, file),
+    })),
+  };
+});
+
+function copySource(source, overwrite) {
+  const sourcePath = path.join(projectRoot, source.root);
+  const targetPath = path.join(projectRoot, source.target);
+
+  if (fs.existsSync(targetPath) && !overwrite) {
+    console.log(`${source.target}: already installed, preserved`);
+    return;
+  }
+
+  fs.mkdirSync(path.dirname(targetPath), { recursive: true });
+  const temporaryRoot = fs.mkdtempSync(
+    path.join(path.dirname(targetPath), `.${path.basename(targetPath)}-install-`)
+  );
+  const temporaryTarget = path.join(temporaryRoot, path.basename(targetPath));
+
+  try {
+    const includedFiles = walkFiles(sourcePath).filter((file) =>
+      isIncluded(file, [...source.include])
+    );
+    for (const file of includedFiles) {
+      const sourceFile = path.join(sourcePath, file);
+      const targetFile = path.join(temporaryTarget, file);
+      fs.mkdirSync(path.dirname(targetFile), { recursive: true });
+      fs.copyFileSync(sourceFile, targetFile);
+    }
+    if (overwrite) fs.rmSync(targetPath, { recursive: true, force: true });
+    fs.renameSync(temporaryTarget, targetPath);
+    console.log(
+      `${source.target}: ${overwrite ? "preview refreshed" : "installed"}`
+    );
+  } finally {
+    fs.rmSync(temporaryRoot, { recursive: true, force: true });
+  }
+}
+
+if (action === "build") {
+  const registry = {
+    $schema: "https://ui.shadcn.com/schema/registry.json",
+    ...sourceConfig,
+    items,
+  };
+  fs.writeFileSync(outputPath, `${JSON.stringify(registry, null, 2)}\n`);
+  for (const item of items) {
+    console.log(`${item.name}: ${item.files.length} files`);
+  }
+} else {
+  for (const source of sourceMappings.values()) {
+    copySource(source, action === "preview");
+  }
+}

package/src/App.css

@@ -155,4 +155,99 @@
   .resource-detail-card {
     @apply shadow-[0_1px_2px_rgba(0,0,0,0.04)];
   }
+
+  .ai-chat-window {
+    container-name: ai-chat;
+    container-type: inline-size;
+  }
+
+  .ai-chat-conversation-panel {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+
+  .ai-markdown > *:first-child {
+    margin-top: 0;
+  }
+
+  .ai-markdown > *:last-child {
+    margin-bottom: 0;
+  }
+
+  .ai-markdown p,
+  .ai-markdown ul,
+  .ai-markdown ol,
+  .ai-markdown pre,
+  .ai-markdown blockquote {
+    margin-block: 0.65rem;
+  }
+
+  .ai-markdown ul,
+  .ai-markdown ol {
+    padding-inline-start: 1.25rem;
+  }
+
+  .ai-markdown ul {
+    list-style: disc;
+  }
+
+  .ai-markdown ol {
+    list-style: decimal;
+  }
+
+  .ai-markdown strong {
+    font-weight: 600;
+  }
+
+  .ai-markdown a {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  .ai-markdown code {
+    border-radius: 0.3rem;
+    background: var(--muted);
+    padding: 0.1rem 0.3rem;
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+  }
+
+  .ai-markdown pre {
+    overflow-x: auto;
+    border-radius: 0.65rem;
+    background: var(--muted);
+    padding: 0.75rem;
+  }
+
+  .ai-markdown pre code {
+    background: transparent;
+    padding: 0;
+  }
+}
+
+@container ai-chat (min-width: 760px) {
+  .ai-chat-conversation-panel {
+    position: relative;
+  }
+
+  .ai-chat-conversation-backdrop {
+    display: none;
+  }
+}
+
+.chat-side-panel-layout {
+  transition:
+    padding-inline-start 200ms ease,
+    padding-inline-end 200ms ease;
+}
+
+@media (min-width: 768px) {
+  .chat-side-panel-layout[data-open="true"][data-side="right"] {
+    padding-inline-end: var(--chat-side-panel-width);
+  }
+
+  .chat-side-panel-layout[data-open="true"][data-side="left"] {
+    padding-inline-start: var(--chat-side-panel-width);
+  }
 }

package/src/App.tsx

@@ -1,11 +1,7 @@
-import {
-  Refine,
-  Authenticated,
-} from "@refinedev/core";
+import { Refine, Authenticated, type ResourceProps } from "@refinedev/core";
 
 import { BrowserRouter, Route, Routes, Outlet } from "react-router";
 import routerProvider, {
-  NavigateToResource,
   CatchAllNavigate,
   UnsavedChangesNotifier,
 } from "@refinedev/react-router";
@@ -33,10 +29,58 @@ import { Toaster } from "./components/notifications/toaster";
 import { ThemeProvider } from "./components/theme/theme-provider";
 import { TooltipProvider } from "./components/ui/tooltip";
 import { BrandLogo } from "./components/app-shell/brand";
+import {
+  AppExtensionProviders,
+  extensionResources,
+  extensionRouteElements,
+} from "./app/extensions";
 import "./App.css";
 import { authProvider } from "./providers/auth";
+import { accessControlProvider } from "./providers/access-control";
+import { AclBootstrap } from "./components/access-control/acl-bootstrap";
+import { ResourceAccessGuard } from "./components/access-control/resource-access-guard";
+import { NavigateToAccessibleResource } from "./components/access-control/navigate-to-accessible-resource";
 import { FileText, Tags } from "lucide-react";
 
+const coreResources: ResourceProps[] = [
+  {
+    name: "blog_posts",
+    list: "/blog-posts",
+    create: "/blog-posts/create",
+    edit: "/blog-posts/edit/:id",
+    show: "/blog-posts/show/:id",
+    meta: {
+      label: "Blog posts",
+      icon: <FileText />,
+      description:
+        "Create and publish content on a reliable NocoBase data foundation.",
+      canCreate: true,
+      canDelete: true,
+      acl: {
+        type: "collection",
+      },
+    },
+  },
+  {
+    name: "categories",
+    list: "/categories",
+    create: "/categories/create",
+    edit: "/categories/edit/:id",
+    show: "/categories/show/:id",
+    meta: {
+      label: "Categories",
+      icon: <Tags />,
+      description:
+        "Organize reusable structures while NocoBase keeps the underlying data consistent.",
+      canCreate: true,
+      canDelete: true,
+      acl: {
+        type: "collection",
+      },
+    },
+  },
+];
+
 const basename = import.meta.env.BASE_URL.replace(/\/+$/, "");
 
 function App() {
@@ -49,38 +93,8 @@ function App() {
             notificationProvider={useNotificationProvider()}
             routerProvider={routerProvider}
             authProvider={authProvider}
-            resources={[
-              {
-                name: "blog_posts",
-                list: "/blog-posts",
-                create: "/blog-posts/create",
-                edit: "/blog-posts/edit/:id",
-                show: "/blog-posts/show/:id",
-                meta: {
-                  label: "Blog posts",
-                  icon: <FileText />,
-                  description:
-                    "Create and publish content on a reliable NocoBase data foundation.",
-                  canCreate: true,
-                  canDelete: true,
-                },
-              },
-              {
-                name: "categories",
-                list: "/categories",
-                create: "/categories/create",
-                edit: "/categories/edit/:id",
-                show: "/categories/show/:id",
-                meta: {
-                  label: "Categories",
-                  icon: <Tags />,
-                  description:
-                    "Organize reusable structures while NocoBase keeps the underlying data consistent.",
-                  canCreate: true,
-                  canDelete: true,
-                },
-              },
-            ]}
+            accessControlProvider={accessControlProvider}
+            resources={[...coreResources, ...extensionResources]}
             options={{
               syncWithLocation: true,
               warnWhenUnsavedChanges: true,
@@ -98,28 +112,89 @@ function App() {
                     key="authenticated-inner"
                     fallback={<CatchAllNavigate to="/login" />}
                   >
-                    <Layout>
-                      <Outlet />
-                    </Layout>
+                    <AclBootstrap>
+                      <AppExtensionProviders>
+                        <Layout>
+                          <Outlet />
+                        </Layout>
+                      </AppExtensionProviders>
+                    </AclBootstrap>
                   </Authenticated>
                 }
               >
                 <Route
                   index
-                  element={<NavigateToResource resource="blog_posts" />}
+                  element={<NavigateToAccessibleResource />}
                 />
                 <Route path="/blog-posts">
-                  <Route index element={<BlogPostList />} />
-                  <Route path="create" element={<BlogPostCreate />} />
-                  <Route path="edit/:id" element={<BlogPostEdit />} />
-                  <Route path="show/:id" element={<BlogPostShow />} />
+                  <Route
+                    index
+                    element={
+                      <ResourceAccessGuard resource="blog_posts" action="list">
+                        <BlogPostList />
+                      </ResourceAccessGuard>
+                    }
+                  />
+                  <Route
+                    path="create"
+                    element={
+                      <ResourceAccessGuard resource="blog_posts" action="create">
+                        <BlogPostCreate />
+                      </ResourceAccessGuard>
+                    }
+                  />
+                  <Route
+                    path="edit/:id"
+                    element={
+                      <ResourceAccessGuard resource="blog_posts" action="edit">
+                        <BlogPostEdit />
+                      </ResourceAccessGuard>
+                    }
+                  />
+                  <Route
+                    path="show/:id"
+                    element={
+                      <ResourceAccessGuard resource="blog_posts" action="show">
+                        <BlogPostShow />
+                      </ResourceAccessGuard>
+                    }
+                  />
                 </Route>
                 <Route path="/categories">
-                  <Route index element={<CategoryList />} />
-                  <Route path="create" element={<CategoryCreate />} />
-                  <Route path="edit/:id" element={<CategoryEdit />} />
-                  <Route path="show/:id" element={<CategoryShow />} />
+                  <Route
+                    index
+                    element={
+                      <ResourceAccessGuard resource="categories" action="list">
+                        <CategoryList />
+                      </ResourceAccessGuard>
+                    }
+                  />
+                  <Route
+                    path="create"
+                    element={
+                      <ResourceAccessGuard resource="categories" action="create">
+                        <CategoryCreate />
+                      </ResourceAccessGuard>
+                    }
+                  />
+                  <Route
+                    path="edit/:id"
+                    element={
+                      <ResourceAccessGuard resource="categories" action="edit">
+                        <CategoryEdit />
+                      </ResourceAccessGuard>
+                    }
+                  />
+                  <Route
+                    path="show/:id"
+                    element={
+                      <ResourceAccessGuard resource="categories" action="show">
+                        <CategoryShow />
+                      </ResourceAccessGuard>
+                    }
+                  />
                 </Route>
+                {extensionRouteElements}
                 <Route path="*" element={<ErrorComponent />} />
               </Route>
               <Route
@@ -128,7 +203,9 @@ function App() {
                     key="authenticated-outer"
                     fallback={<Outlet />}
                   >
-                    <NavigateToResource />
+                    <AclBootstrap>
+                      <NavigateToAccessibleResource />
+                    </AclBootstrap>
                   </Authenticated>
                 }
               >

package/src/app/extension.ts

@@ -0,0 +1,9 @@
+import type { ResourceProps } from "@refinedev/core";
+import type { ComponentType, PropsWithChildren, ReactElement } from "react";
+
+export type AppExtension = {
+  id: string;
+  resources?: ResourceProps[];
+  routes?: ReactElement;
+  Provider?: ComponentType<PropsWithChildren>;
+};

package/src/app/extensions.tsx

@@ -0,0 +1,28 @@
+import type { PropsWithChildren, ReactNode } from "react";
+import type { AppExtension } from "./extension";
+
+const extensionModules = import.meta.glob<{ default: AppExtension }>(
+  "../extensions/*/extension.tsx",
+  { eager: true }
+);
+
+export const appExtensions = Object.values(extensionModules)
+  .map((module) => module.default)
+  .sort((left, right) => left.id.localeCompare(right.id));
+
+export const extensionResources = appExtensions.flatMap(
+  (extension) => extension.resources ?? []
+);
+
+export const extensionRouteElements = appExtensions
+  .map((extension) => extension.routes)
+  .filter((routes): routes is NonNullable<typeof routes> => Boolean(routes));
+
+export function AppExtensionProviders({ children }: PropsWithChildren) {
+  return appExtensions.reduceRight<ReactNode>((content, extension) => {
+    const Provider = extension.Provider;
+    return Provider ? <Provider>{content}</Provider> : content;
+  }, children);
+}
+
+export type { AppExtension } from "./extension";

package/src/components/access-control/access-denied.tsx

@@ -0,0 +1,30 @@
+import { ShieldX } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+export function AccessDenied({
+  className,
+  title = "Access denied",
+  description = "You don't have permission to view this content.",
+}: {
+  className?: string;
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-64 flex-col items-center justify-center rounded-2xl border border-dashed bg-background/70 p-8 text-center",
+        className
+      )}
+    >
+      <div className="mb-4 flex size-12 items-center justify-center rounded-2xl bg-muted">
+        <ShieldX className="size-6 text-muted-foreground" />
+      </div>
+      <h2 className="text-lg font-semibold">{title}</h2>
+      <p className="mt-2 max-w-md text-sm leading-6 text-muted-foreground">
+        {description}
+      </p>
+    </div>
+  );
+}

package/src/components/access-control/acl-bootstrap.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from "react";
+
+import { AclGate } from "./acl-gate";
+import { useAclRuntime } from "./use-acl-runtime";
+
+export function AclBootstrap({ children }: PropsWithChildren) {
+  useAclRuntime();
+  return <AclGate>{children}</AclGate>;
+}

package/src/components/access-control/acl-gate.tsx

@@ -0,0 +1,42 @@
+import { Loader2, RotateCcw } from "lucide-react";
+import type { PropsWithChildren } from "react";
+
+import { Button } from "@/components/ui/button";
+import { loadAcl, useAclSnapshot } from "@/lib/nocobase/acl";
+
+export function AclGate({ children }: PropsWithChildren) {
+  const snapshot = useAclSnapshot();
+
+  if (snapshot.status === "ready") return children;
+
+  if (snapshot.status === "error") {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-6">
+        <div className="max-w-md text-center">
+          <h1 className="text-xl font-semibold">Unable to load permissions</h1>
+          <p className="mt-2 text-sm leading-6 text-muted-foreground">
+            {snapshot.error?.message ??
+              "The current role permissions could not be loaded."}
+          </p>
+          <Button
+            className="mt-5"
+            variant="outline"
+            onClick={() =>
+              void loadAcl({ force: true }).catch(() => undefined)
+            }
+          >
+            <RotateCcw />
+            Retry
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background">
+      <Loader2 className="size-7 animate-spin text-muted-foreground" />
+      <span className="sr-only">Loading permissions…</span>
+    </div>
+  );
+}

package/src/components/access-control/navigate-to-accessible-resource.tsx

@@ -0,0 +1,17 @@
+import { useMenu } from "@refinedev/core";
+import { Navigate } from "react-router";
+
+import {
+  filterMenuItemsByAcl,
+  findFirstAccessibleRoute,
+  useAclSnapshot,
+} from "@/lib/nocobase/acl";
+import { AccessDenied } from "./access-denied";
+
+export function NavigateToAccessibleResource() {
+  const { menuItems } = useMenu();
+  const acl = useAclSnapshot();
+  const route = findFirstAccessibleRoute(filterMenuItemsByAcl(menuItems, acl));
+
+  return route ? <Navigate to={route} replace /> : <AccessDenied />;
+}

package/src/components/access-control/resource-access-guard.tsx

@@ -0,0 +1,21 @@
+import { CanAccess } from "@refinedev/core";
+import type { PropsWithChildren, ReactNode } from "react";
+
+import { AccessDenied } from "./access-denied";
+
+export function ResourceAccessGuard({
+  resource,
+  action,
+  children,
+  fallback = <AccessDenied />,
+}: PropsWithChildren<{
+  resource: string;
+  action: string;
+  fallback?: ReactNode;
+}>) {
+  return (
+    <CanAccess resource={resource} action={action} fallback={fallback}>
+      {children}
+    </CanAccess>
+  );
+}

package/src/components/access-control/use-acl-runtime.ts

@@ -0,0 +1,28 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useRef } from "react";
+
+import { loadAcl, useAclSnapshot } from "@/lib/nocobase/acl";
+
+export function useAclRuntime() {
+  const snapshot = useAclSnapshot();
+  const queryClient = useQueryClient();
+  const lastReadyVersion = useRef<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (snapshot.status === "idle") {
+      void loadAcl().catch(() => undefined);
+    }
+  }, [snapshot.status]);
+
+  useEffect(() => {
+    if (snapshot.status !== "ready") return;
+    if (lastReadyVersion.current === undefined) {
+      lastReadyVersion.current = snapshot.version;
+      return;
+    }
+    if (lastReadyVersion.current === snapshot.version) return;
+
+    lastReadyVersion.current = snapshot.version;
+    void queryClient.invalidateQueries({ queryKey: ["access"] });
+  }, [queryClient, snapshot.status, snapshot.version]);
+}

package/src/components/app-shell/header.tsx

@@ -84,7 +84,10 @@ function MobileHeader() {
         )}
       />
       <Brand logoClassName="h-6" />
-      <ThemeToggle className={cn("size-9")} />
+      <div className="flex shrink-0 items-center gap-1">
+        <ThemeToggle className="size-9" />
+        <UserDropdown />
+      </div>
     </header>
   );
 }