@nocobase/app-template-default 1.0.0-beta.58 → 1.0.0-beta.59

package/client/locales/en-US.ts

@@ -59,17 +59,15 @@ const enUS = {
   'auth.marketingTitleSecond': 'NocoBase keeps it',
   'auth.marketingTitleThird': 'reliable.',
   'auth.marketingDescription':
-    'Give AI a flexible frontend framework to shape each experience, while NocoBase secures the data, permissions, workflows and governance underneath.',
+    'Give AI a flexible frontend framework to shape each experience, while NocoBase secures the data, permissions and governance underneath.',
   'auth.frontend': 'AI-native frontend',
   'auth.frontendDescription':
     'Compose interfaces freely on a flexible framework.',
   'auth.foundation': 'NocoBase foundation',
-  'auth.foundationDescription':
-    'Reliable data, access control, workflows and governance.',
+  'auth.foundationDescription': 'Reliable data, access control and governance.',
   'auth.marketingFooter': 'Freedom above. Confidence below.',
   'status.loading': 'Loading',
   'status.loadingPage': 'Loading page',
-  'status.loadingSettings': 'Loading settings',
   'status.denied': 'Access denied',
   'status.pageFailed': 'Unable to load page',
   'status.retry': 'Retry',
@@ -83,22 +81,38 @@ const enUS = {
     buildFreely: 'AI builds freely.',
     reliability: '<brand>NocoBase</brand> keeps it reliable.',
   },
-  surface: {
-    backToApp: 'Back to app',
-    loading: 'Loading {{title}}',
-    navigation: '{{title}} navigation',
-    page: '{{title}} page',
-  },
-  settings: {
-    title: 'Settings',
-    emptyTitle: 'No settings available',
-    emptyDescription:
-      'No enabled plugin contributes a settings page you have access to.',
-  },
   home: {
+    platform: 'NocoBase · AI-native application platform',
+    pages: {
+      title: 'Build your pages',
+      description: 'Turn your ideas into interfaces that fit your work.',
+      examples:
+        'From tables and forms to dashboards, shape each page around your business.',
+    },
+    data: {
+      title: 'Organize your data',
+      description: 'Give your business a clear, connected data model.',
+      examples:
+        'Define records, fields and relationships so your information works together.',
+    },
+    workflows: {
+      title: 'Connect your workflows',
+      description: 'Keep work moving with consistent business processes.',
+      examples:
+        'Connect approvals, notifications and automated actions to everyday work.',
+    },
+    startTitle: 'Start with one requirement',
+    startDescription:
+      'Tell your AI Agent what you want to achieve and who will use it.',
+    examplePrompt:
+      '“Build a customer management app for our sales team. We need a customer list, contact details and follow-up records, with a clear overview of each opportunity.”',
+    startHint:
+      'Begin with a small, useful flow. Refine the pages, data and rules as your needs become clearer.',
+    foundation:
+      'AI builds freely. NocoBase keeps data, permissions and workflows reliable.',
     title: 'Start building your application',
     description:
-      'Describe what you need to your AI Agent, then build pages, data models, and business workflows.',
+      'Describe what you need to your AI Agent, then build pages, data models, and business processes.',
   },
 
   appearance: {

package/client/locales/zh-CN.ts

@@ -56,15 +56,14 @@ const zhCN: AppResource = {
   'auth.marketingTitleSecond': 'NocoBase 保障',
   'auth.marketingTitleThird': '可靠运行。',
   'auth.marketingDescription':
-    '让 AI 在灵活的前端框架上构建体验，由 NocoBase 保障底层数据、权限、工作流与治理。',
+    '让 AI 在灵活的前端框架上构建体验，由 NocoBase 保障底层数据、权限与治理。',
   'auth.frontend': 'AI 原生前端',
   'auth.frontendDescription': '在灵活的框架上自由构建界面。',
   'auth.foundation': 'NocoBase 基础能力',
-  'auth.foundationDescription': '可靠的数据、访问控制、工作流与治理。',
+  'auth.foundationDescription': '可靠的数据、访问控制与治理。',
   'auth.marketingFooter': '自由构建，可靠支撑。',
   'status.loading': '加载中',
   'status.loadingPage': '正在加载页面',
-  'status.loadingSettings': '正在加载设置',
   'status.denied': '无权访问',
   'status.pageFailed': '无法加载页面',
   'status.retry': '重试',
@@ -78,18 +77,29 @@ const zhCN: AppResource = {
     buildFreely: 'AI 自由构建。',
     reliability: '<brand>NocoBase</brand> 保障可靠。',
   },
-  surface: {
-    backToApp: '返回应用',
-    loading: '正在加载{{title}}',
-    navigation: '{{title}}导航',
-    page: '{{title}}页面',
-  },
-  settings: {
-    title: '设置',
-    emptyTitle: '暂无可用设置',
-    emptyDescription: '没有已启用的插件提供你有权访问的设置页面。',
-  },
   home: {
+    platform: 'NocoBase · AI 原生应用平台',
+    pages: {
+      title: '构建业务页面',
+      description: '让想法变成适合你的工作界面。',
+      examples: '从表格、表单到仪表盘，围绕业务搭建每一个页面。',
+    },
+    data: {
+      title: '组织业务数据',
+      description: '建立清晰、相互关联的数据模型。',
+      examples: '定义记录、字段与关联，让分散的信息连成整体。',
+    },
+    workflows: {
+      title: '串联业务流程',
+      description: '用一致的流程，让工作顺畅推进。',
+      examples: '把审批、通知和自动化操作融入日常业务。',
+    },
+    startTitle: '从一个需求开始',
+    startDescription: '告诉 AI 助手，你想解决什么问题、谁会使用这个应用。',
+    examplePrompt:
+      '“为销售团队搭建一个客户管理应用，包含客户列表、联系人信息和跟进记录，并能清楚查看每个商机的进展。”',
+    startHint: '先完成一个实用的小流程，再随着需求逐步完善页面、数据和规则。',
+    foundation: 'AI 自由构建，NocoBase 为数据、权限和流程提供可靠底座。',
     title: '开始构建你的应用',
     description: '向 AI 助手描述你的需求，逐步构建页面、数据模型和业务流程。',
   },

package/client/pages/auth/login.tsx

@@ -32,6 +32,7 @@ export default function LoginPage(): ReactElement {
           {
             content: (
               <PasswordLoginForm
+                className='[&_[data-slot=input]]:h-12 [&_[data-slot=input-group]]:h-12 [&_button[type=submit]]:h-12'
                 error={login.error?.message}
                 footer={
                   signUpAvailable ? (

package/client/pages/auth/shared.tsx

@@ -49,7 +49,7 @@ export function AuthPage({
   );
 }
 
-// The brand panel is deliberately dark in both color modes, so it uses fixed neutrals rather than theme tokens.
+// The brand panel stays dark in both color modes; its dedicated palette belongs to the theme presets.
 function BrandPanel(): ReactElement {
   const { t } = useTranslation();
   const features = [
@@ -68,10 +68,10 @@ function BrandPanel(): ReactElement {
   ];
 
   return (
-    <div className='relative grid h-full place-items-center overflow-hidden bg-neutral-950 p-12 text-white'>
-      <div className='pointer-events-none absolute inset-0 [background-image:linear-gradient(currentColor_1px,transparent_1px),linear-gradient(90deg,currentColor_1px,transparent_1px)] [background-size:48px_48px] opacity-[0.08]' />
+    <div className='relative grid h-full place-items-center overflow-hidden bg-(--auth-brand-background) p-12 text-white'>
+      <div className='pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,color-mix(in_srgb,var(--primary)_22%,transparent),transparent_65%)]' />
       <div className='relative w-full max-w-xl'>
-        <p className='text-xs font-semibold tracking-[0.16em] text-white/55 uppercase'>
+        <p className='text-xs font-semibold tracking-[0.16em] text-(--auth-brand-highlight) uppercase'>
           {t('auth.platform')}
         </p>
         <h2 className='mt-4 text-5xl leading-[1.05] font-semibold tracking-[-0.045em]'>
@@ -81,26 +81,26 @@ function BrandPanel(): ReactElement {
           <br />
           {t('auth.marketingTitleThird')}
         </h2>
-        <p className='mt-5 text-sm leading-6 text-white/60'>
+        <p className='mt-5 text-sm leading-6 text-(--auth-brand-muted)'>
           {t('auth.marketingDescription')}
         </p>
-        <div className='mt-8 overflow-hidden rounded-2xl bg-white text-neutral-950 shadow-2xl'>
+        <div className='mt-8 overflow-hidden rounded-2xl border border-white/10 bg-white/5 text-white shadow-lg backdrop-blur-sm'>
           <div className='space-y-5 p-6'>
             {features.map(({ description, icon: Icon, id, title }) => (
               <div className='flex gap-4' key={id}>
-                <span className='grid size-11 shrink-0 place-items-center rounded-xl bg-neutral-100 text-neutral-700'>
+                <span className='grid size-11 shrink-0 place-items-center rounded-xl bg-(--auth-brand-highlight)/10 text-(--auth-brand-highlight)'>
                   <Icon aria-hidden='true' className='size-5' />
                 </span>
                 <div>
                   <p className='font-semibold'>{title}</p>
-                  <p className='mt-1 text-sm leading-6 text-neutral-500'>
+                  <p className='mt-1 text-sm leading-6 text-(--auth-brand-muted)'>
                     {description}
                   </p>
                 </div>
               </div>
             ))}
           </div>
-          <div className='flex items-center gap-3 bg-neutral-100 px-6 py-4 text-sm font-medium text-neutral-600'>
+          <div className='flex items-center gap-3 border-t border-white/10 bg-white/3 px-6 py-4 text-sm font-medium text-(--auth-brand-muted)'>
             <Blocks aria-hidden='true' className='size-4' />
             <span>{t('auth.marketingFooter')}</span>
           </div>

package/client/pages/home.tsx

@@ -1,16 +1,89 @@
 import { useTranslation } from '@nocobase/i18n/client';
 import type { ReactElement } from 'react';
+import {
+  Database,
+  MessageSquareText,
+  PanelsTopLeft,
+  ShieldCheck,
+  Sparkles,
+  Workflow,
+} from 'lucide-react';
+import { PageContainer } from '#components/page-container';
+import { PageHeader } from '#components/page-header';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '#components/ui/card';
 
 export default function HomePage(): ReactElement {
   const { t } = useTranslation();
   return (
-    <section className='mx-auto grid min-h-[calc(100svh-4rem)] w-full max-w-5xl place-items-center px-6 py-10'>
-      <div className='max-w-xl space-y-6 text-center'>
-        <h1 className='font-heading text-3xl font-semibold tracking-tight'>
-          {t('home.title')}
-        </h1>
-        <p className='text-muted-foreground'>{t('home.description')}</p>
+    <PageContainer className='mx-auto max-w-5xl'>
+      <div className='flex flex-col gap-4'>
+        <div className='flex items-center gap-2 text-sm font-medium text-primary'>
+          <Sparkles aria-hidden='true' className='size-4' />
+          {t('home.platform')}
+        </div>
+        <PageHeader
+          title={t('home.title')}
+          description={t('home.description')}
+        />
       </div>
-    </section>
+      <div className='grid gap-4 md:grid-cols-3'>
+        {(
+          [
+            ['pages', PanelsTopLeft],
+            ['data', Database],
+            ['workflows', Workflow],
+          ] as const
+        ).map(([feature, Icon]) => (
+          <Card key={feature}>
+            <CardHeader className='gap-3'>
+              <div className='flex size-10 items-center justify-center rounded-lg bg-primary/5 text-primary'>
+                <Icon aria-hidden='true' className='size-4' />
+              </div>
+              <CardTitle>
+                <h2>{t(`home.${feature}.title`)}</h2>
+              </CardTitle>
+              <CardDescription>
+                {t(`home.${feature}.description`)}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p className='text-sm leading-6 text-muted-foreground'>
+                {t(`home.${feature}.examples`)}
+              </p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <h2 className='flex items-center gap-2'>
+              <MessageSquareText
+                aria-hidden='true'
+                className='size-4 text-primary'
+              />
+              {t('home.startTitle')}
+            </h2>
+          </CardTitle>
+          <CardDescription>{t('home.startDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className='flex flex-col gap-4'>
+          <blockquote className='rounded-lg border border-primary/10 bg-primary/5 p-4 text-sm leading-7'>
+            {t('home.examplePrompt')}
+          </blockquote>
+          <p className='text-sm text-muted-foreground'>{t('home.startHint')}</p>
+        </CardContent>
+      </Card>
+      <p className='flex items-start gap-2 text-sm leading-6 text-muted-foreground'>
+        <ShieldCheck aria-hidden='true' className='mt-1 size-4 shrink-0' />
+        {t('home.foundation')}
+      </p>
+    </PageContainer>
   );
 }

package/client/plugins.ts

@@ -25,8 +25,8 @@ const clientPlugins: AppClientPlugins = defineClientPlugins([
   sharingRules(),
   restrictionRules(),
   databaseExplorer(),
-  users({ mount: 'settings', path: '/users' }),
-  apiKeys({ path: '/api-keys' }),
+  users(),
+  apiKeys(),
   i18n(),
   notificationInApp(),
   notification(),

package/client/routes.ts

@@ -1,7 +1,6 @@
 import { Home } from 'lucide-react';
 import {
   defineAppRoutes,
-  defineSettingsRoutes,
   type AppClientRouteContribution,
 } from '@nocobase/app-client/plugins';
 
@@ -17,9 +16,9 @@ const appRoutes: AppClientRouteContribution = defineAppRoutes([
     path: '/',
   },
   {
-    // The header's inbox button is where a user looks for messages, so this page is reached from there. Declaring no
-    // navigation keeps a second menu entry from pointing at the one destination the button already owns. The plugin's
-    // API answers each person's own messages only, so the page needs no authorization of its own.
+    // Declares no navigation, so the application decides where its entry goes (for example a sidebar item with an
+    // unread badge). The plugin's API answers each person's own messages only, so the page needs no authorization of
+    // its own.
     authz: 'skip',
     auth: 'required',
     componentLoader: () => import('./pages/inbox.js'),
@@ -65,11 +64,6 @@ const appRoutes: AppClientRouteContribution = defineAppRoutes([
   },
 ]);
 
-const settingsRoutes: AppClientRouteContribution = defineSettingsRoutes([]);
-
-const routes: readonly AppClientRouteContribution[] = [
-  appRoutes,
-  settingsRoutes,
-];
+const routes: readonly AppClientRouteContribution[] = [appRoutes];
 
 export default routes;

package/client/routing/app-router.tsx

@@ -1,52 +1,29 @@
-import { useTranslation } from '@nocobase/i18n/client';
 import {
   GuestAuthentication,
   RequiredAuthentication,
 } from '@nocobase/app-plugin-authentication/client';
 import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
-import { lazy, Suspense, useMemo, type ReactElement } from 'react';
+import { useMemo, type ReactElement } from 'react';
 import { Navigate, Outlet, Route, Routes } from 'react-router';
 
-import { Loading } from '#components/loading';
 import { EMPTY_ARRAY } from '#lib/constants';
 
 import { AppLayout } from '../layouts/app-layout.js';
 import { renderRouteTree } from './route-tree.js';
 import { StandalonePageLayout } from './standalone-page-layout.js';
 
-// The settings centre brings its own chrome and navigation, none of which the application needs until someone opens
-// it. Loading it lazily keeps it out of the entry chunk, the same way every page it hosts stays out.
-const SettingsLayout = lazy(async () => ({
-  default: (await import('../layouts/settings-layout.js')).SettingsLayout,
-}));
-
 export interface AppRouterProps {
-  readonly settingsRouteTree: readonly AppClientRegisteredRoute[];
-  readonly devRouteTree: readonly AppClientRegisteredRoute[];
   readonly clientRoutes: readonly AppClientRegisteredRoute[];
 }
 
-export function AppRouter(inputProps: AppRouterProps): ReactElement {
-  const { t } = useTranslation();
-  const { settingsRouteTree, devRouteTree, clientRoutes } = inputProps;
-
-  const settingsRoutes = useMemo(
-    () =>
-      filterRouteTree(
-        clientRoutes,
-        (route) =>
-          route.auth === 'required' && route.path.startsWith('/settings/'),
-      ),
-    [clientRoutes],
-  );
+export function AppRouter({ clientRoutes }: AppRouterProps): ReactElement {
   const routeGroups = useMemo(
     () => ({
       guest: clientRoutes.filter((route) => route.auth === 'guest'),
       optional: clientRoutes.filter((route) => route.auth === 'optional'),
       required: filterRouteTree(
         clientRoutes,
-        (route) =>
-          route.auth === 'required' && !route.path.startsWith('/settings/'),
+        (route) => route.auth === 'required',
       ),
     }),
     [clientRoutes],
@@ -61,36 +38,9 @@ export function AppRouter(inputProps: AppRouterProps): ReactElement {
           </RequiredAuthentication>
         }
       >
-        <Route
-          element={
-            <AppLayout routes={routeGroups.required} devRoutes={devRouteTree} />
-          }
-        >
+        <Route element={<AppLayout routes={routeGroups.required} />}>
           {renderRouteTree(routeGroups.required)}
-          {/* Pages plugins declare with `defineDevRoutes()` keep their `/dev/...` paths inside the application shell.
-            A production build resolves no dev routes, so nothing is rendered here. */}
-          {renderRouteTree(devRouteTree)}
         </Route>
-        <Route
-          path='/settings/*'
-          element={
-            <Suspense
-              fallback={
-                <Loading
-                  className='min-h-svh'
-                  label={t('status.loadingSettings', {
-                    defaultValue: 'Loading settings',
-                  })}
-                />
-              }
-            >
-              <SettingsLayout
-                routeTree={settingsRouteTree}
-                routes={settingsRoutes}
-              />
-            </Suspense>
-          }
-        />
       </Route>
 
       <Route
@@ -114,7 +64,7 @@ export function AppRouter(inputProps: AppRouterProps): ReactElement {
   );
 }
 
-/** Pure groups can span surfaces; a page and its descendants always share their shell. */
+/** Pure groups can span shells; a page and its descendants always share their shell. */
 function filterRouteTree(
   routes: readonly AppClientRegisteredRoute[],
   predicate: (route: AppClientRegisteredRoute) => boolean,

package/client/routing/route-navigation.ts

@@ -58,7 +58,7 @@ export function selectedNavigationId(
   return selected ? routeKey(selected) : undefined;
 }
 
-export function navigationPages(
+function navigationPages(
   items: readonly RouteNavigationItem[],
 ): AppClientRegisteredRoute[] {
   return items.flatMap(({ route, children }) => [