refactor: optimize prompt information (#6641)

* fix: update error block to display a custom image and improved messages when no pages are found

* feat: add no pages result display with custom message and icon in LayoutContent

* feat: add translations for UI editor prompts and update no pages message in multiple locales

* feat: add tip display when no pages are found in LayoutContent

* fix: ensure minimum height for mobile tab bar content

* fix: remove unnecessary margin from mobile action page styles and block initializer

packages/core/client/src/locale/de-DE.json

@@ -884,5 +884,7 @@
   "If selected, the page will display Tab pages.": "Wenn ausgewählt, zeigt die Seite Tab-Seiten an.",
   "If selected, the route will be displayed in the menu.": "Wenn ausgewählt, wird die Route im Menü angezeigt.",
   "Are you sure you want to hide this tab?": "Sind Sie sicher, dass Sie diesen Tab ausblenden möchten?",
-  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Nach dem Ausblenden wird dieser Tab nicht mehr in der Tableiste angezeigt. Um ihn wieder anzuzeigen, müssen Sie zur Routenverwaltungsseite gehen, um ihn einzustellen."
+  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Nach dem Ausblenden wird dieser Tab nicht mehr in der Tableiste angezeigt. Um ihn wieder anzuzeigen, müssen Sie zur Routenverwaltungsseite gehen, um ihn einzustellen.",
+  "No pages yet, please configure first": "Noch keine Seiten, bitte zuerst konfigurieren",
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "Klicken Sie auf das \"UI-Editor\"-Symbol in der oberen rechten Ecke, um den UI-Editor-Modus zu betreten"
 }

packages/core/client/src/locale/en-US.json

@@ -884,5 +884,7 @@
   "If selected, the page will display Tab pages.": "If selected, the page will display Tab pages.",
   "If selected, the route will be displayed in the menu.": "If selected, the route will be displayed in the menu.",
   "Are you sure you want to hide this tab?": "Are you sure you want to hide this tab?",
-  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it."
+  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.",
+  "No pages yet, please configure first": "No pages yet, please configure first",
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode"
 }

packages/core/client/src/locale/es-ES.json

@@ -801,5 +801,7 @@
   "If selected, the page will display Tab pages.": "Si se selecciona, la página mostrará páginas de pestañas.",
   "If selected, the route will be displayed in the menu.": "Si se selecciona, la ruta se mostrará en el menú.",
   "Are you sure you want to hide this tab?": "¿Estás seguro de que quieres ocultar esta pestaña?",
-  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Después de ocultar, esta pestaña ya no aparecerá en la barra de pestañas. Para mostrarla de nuevo, deberás ir a la página de gestión de rutas para configurarla."
+  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Después de ocultar, esta pestaña ya no aparecerá en la barra de pestañas. Para mostrarla de nuevo, deberás ir a la página de gestión de rutas para configurarla.",
+  "No pages yet, please configure first": "Aún no hay páginas, por favor configura primero",
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "Haga clic en el icono \"Editor de UI\" en la esquina superior derecha para entrar en el modo de Editor de UI."
 }

packages/core/client/src/locale/fr-FR.json

@@ -821,5 +821,7 @@
   "If selected, the page will display Tab pages.": "Si sélectionné, la page affichera des onglets.",
   "If selected, the route will be displayed in the menu.": "Si sélectionné, la route sera affichée dans le menu.",
   "Are you sure you want to hide this tab?": "Êtes-vous sûr de vouloir masquer cet onglet ?",
-  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Après avoir masqué, cette tab ne sera plus affichée dans la barre de tab. Pour la montrer à nouveau, vous devez vous rendre sur la page de gestion des routes pour la configurer."
+  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Après avoir masqué, cette tab ne sera plus affichée dans la barre de tab. Pour la montrer à nouveau, vous devez vous rendre sur la page de gestion des routes pour la configurer.",
+  "No pages yet, please configure first": "Pas encore de pages, veuillez configurer d'abord",
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "Cliquez sur l'icône \"Éditeur d'interface utilisateur\" dans le coin supérieur droit pour entrer en mode Éditeur d'interface utilisateur"
 }

packages/core/client/src/locale/it-IT.json

@@ -1080,5 +1080,7 @@
   "If selected, the page will display Tab pages.": "Se selezionato, la pagina visualizzerà le pagine schede.",
   "If selected, the route will be displayed in the menu.": "Se selezionato, il percorso verrà visualizzato nel menu.",
   "Are you sure you want to hide this tab?": "Sei sicuro di voler nascondere questa scheda?",
-  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Dopo averla nascosta, questa scheda non apparirà più nella barra delle schede. Per mostrarla di nuovo, devi andare alla pagina di gestione dei percorsi per configurarlo."
+  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Dopo averla nascosta, questa scheda non apparirà più nella barra delle schede. Per mostrarla di nuovo, devi andare alla pagina di gestione dei percorsi per configurarlo.",
+  "No pages yet, please configure first": "Nessuna pagina ancora, si prega di configurare prima",
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "Cliquez sur l'icône \"Éditeur d'interface utilisateur\" dans le coin supérieur droit pour entrer en mode Éditeur d'interface utilisateur"
 }

packages/core/client/src/locale/ja-JP.json

@@ -1039,5 +1039,7 @@
   "If selected, the page will display Tab pages.": "選択されている場合、ページはタブページを表示します。",
   "If selected, the route will be displayed in the menu.": "選択されている場合、ルートはメニューに表示されます。",
   "Are you sure you want to hide this tab?": "このタブを非表示にしますか？",
-  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "非表示にすると、このタブはタブバーに表示されなくなります。再表示するには、ルート管理ページで設定する必要があります。"
+  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "非表示にすると、このタブはタブバーに表示されなくなります。再表示するには、ルート管理ページで設定する必要があります。",
+  "No pages yet, please configure first": "まだページがありません。最初に設定してください",
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "ユーザーインターフェースエディターモードに入るには、右上隅の「UIエディタ」アイコンをクリックしてください"
 }

packages/core/client/src/locale/ko-KR.json

@@ -912,5 +912,7 @@
   "If selected, the page will display Tab pages.": "선택되면 페이지는 탭 페이지를 표시합니다.",
   "If selected, the route will be displayed in the menu.": "선택되면 라우트는 메뉴에 표시됩니다.",
   "Are you sure you want to hide this tab?": "이 탭을 숨기시겠습니까?",
-  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "숨기면 이 탭은 탭 바에 더 이상 표시되지 않습니다. 다시 표시하려면 라우트 관리 페이지에서 설정해야 합니다."
+  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "숨기면 이 탭은 탭 바에 더 이상 표시되지 않습니다. 다시 표시하려면 라우트 관리 페이지에서 설정해야 합니다.",
+  "No pages yet, please configure first": "아직 페이지가 없습니다. 먼저 설정하십시오",
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "사용자 인터페이스 편집기 모드에 들어가려면 오른쪽 상단의 \"UI 편집기\" 아이콘을 클릭하십시오"
 }

packages/core/client/src/locale/pt-BR.json

@@ -778,5 +778,7 @@
   "If selected, the page will display Tab pages.": "Se selecionado, a página exibirá páginas de abas.",
   "If selected, the route will be displayed in the menu.": "Se selecionado, a rota será exibida no menu.",
   "Are you sure you want to hide this tab?": "Tem certeza de que deseja ocultar esta guia?",
-  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Depois de ocultar, esta guia não aparecerá mais na barra de guias. Para mostrá-la novamente, você precisa ir à página de gerenciamento de rotas para configurá-la."
+  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Depois de ocultar, esta guia não aparecerá mais na barra de guias. Para mostrá-la novamente, você precisa ir à página de gerenciamento de rotas para configurá-la.",
+  "No pages yet, please configure first": "Ainda não há páginas, por favor configure primeiro",
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "Cliquez sur l'icône \"Éditeur d'interface utilisateur\" dans le coin supérieur droit pour entrer en mode Éditeur d'interface utilisateur"
 }

packages/core/client/src/locale/ru-RU.json

@@ -607,5 +607,7 @@
   "If selected, the page will display Tab pages.": "Если выбран, страница будет отображать страницы с вкладками.",
   "If selected, the route will be displayed in the menu.": "Если выбран, маршрут будет отображаться в меню.",
   "Are you sure you want to hide this tab?": "Вы уверены, что хотите скрыть эту вкладку?",
-  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "После скрытия этой вкладки она больше не будет отображаться во вкладке. Чтобы снова отобразить ее, вам нужно будет перейти на страницу управления маршрутами, чтобы установить ее."
+  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "После скрытия этой вкладки она больше не будет отображаться во вкладке. Чтобы снова отобразить ее, вам нужно будет перейти на страницу управления маршрутами, чтобы установить ее.",
+  "No pages yet, please configure first": "Пока нет страниц, пожалуйста, настройте сначала",
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "Нажмите на значок \"Редактор пользовательского интерфейса\" в правом верхнем углу, чтобы войти в режим редактора пользовательского интерфейса"
 }

packages/core/client/src/locale/tr-TR.json

@@ -605,5 +605,7 @@
   "If selected, the page will display Tab pages.": "Seçildiğinde, sayfa Tab sayfalarını görüntüleyecektir.",
   "If selected, the route will be displayed in the menu.": "Seçildiğinde, yol menüde görüntülenecektir.",
   "Are you sure you want to hide this tab?": "Bu sekmeyi gizlemek istediğinizden emin misiniz?",
-  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Gizlendikten sonra, bu sekme artık sekme çubuğunda görünmeyecek. Onu tekrar göstermek için, rotayı yönetim sayfasına gidip ayarlamanız gerekiyor."
+  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Gizlendikten sonra, bu sekme artık sekme çubuğunda görünmeyecek. Onu tekrar göstermek için, rotayı yönetim sayfasına gidip ayarlamanız gerekiyor.",
+  "No pages yet, please configure first": "Henüz sayfa yok, lütfen önce yapılandırın",
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "Kullanıcı arayüzü düzenleyici moduna girmek için sağ üst köşedeki \"Kullanıcı Arayüzü Düzenleyici\" simgesine tıklayın"
 }

packages/core/client/src/locale/uk-UA.json

@@ -821,5 +821,7 @@
   "If selected, the page will display Tab pages.": "Якщо вибрано, сторінка відобразить сторінки з вкладками.",
   "If selected, the route will be displayed in the menu.": "Якщо вибрано, маршрут буде відображений в меню.",
   "Are you sure you want to hide this tab?": "Ви впевнені, що хочете приховати цю вкладку?",
-  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Після приховування цієї вкладки вона більше не з'явиться в панелі вкладок. Щоб знову показати її, вам потрібно перейти на сторінку керування маршрутами, щоб налаштувати її."
+  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "Після приховування цієї вкладки вона більше не з'явиться в панелі вкладок. Щоб знову показати її, вам потрібно перейти на сторінку керування маршрутами, щоб налаштувати її.",
+  "No pages yet, please configure first": "Ще немає сторінок, будь ласка, спочатку налаштуйте",
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "Натисніть на значок \"Редактор користувацького інтерфейсу\" в правому верхньому куті, щоб увійти в режим редактора користувацького інтерфейсу."
 }

packages/core/client/src/locale/zh-CN.json

@@ -1081,5 +1081,7 @@
   "If selected, the page will display Tab pages.": "如果选中，该页面将显示标签页。",
   "If selected, the route will be displayed in the menu.": "如果选中，该路由将显示在菜单中。",
   "Are you sure you want to hide this tab?": "你确定要隐藏该标签页吗？",
-  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "隐藏后，该标签将不再显示在标签栏中。要想再次显示它，你需要到路由管理页面进行设置。"
+  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "隐藏后，该标签将不再显示在标签栏中。要想再次显示它，你需要到路由管理页面进行设置。",
+  "No pages yet, please configure first": "暂无页面，请先配置",
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "点击右上角的“界面配置”图标，进入界面配置模式"
 }

packages/core/client/src/locale/zh-TW.json

@@ -912,6 +912,7 @@
   "If selected, the page will display Tab pages.": "如果選中，該頁面將顯示標籤頁。",
   "If selected, the route will be displayed in the menu.": "如果選中，該路由將顯示在菜單中。",
   "Are you sure you want to hide this tab?": "你確定要隱藏這個標籤嗎？",
-  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "隱藏後，這個標籤將不再出現在標籤欄中。要再次顯示它，你需要到路由管理頁面進行設置。"
+  "After hiding, this tab will no longer appear in the tab bar. To show it again, you need to go to the route management page to set it.": "隱藏後，這個標籤將不再出現在標籤欄中。要再次顯示它，你需要到路由管理頁面進行設置。",
+  "No pages yet, please configure first": "尚未配置頁面，請先配置",
+  "Click the \"UI Editor\" icon in the upper right corner to enter the UI Editor mode": "點擊右上角的 \"介面設定\" 圖示進入介面設定模式"
 }
-

packages/core/client/src/route-switch/antd/admin-layout/index.tsx

@@ -7,13 +7,14 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { EllipsisOutlined } from '@ant-design/icons';
+import { EllipsisOutlined, HighlightOutlined } from '@ant-design/icons';
 import ProLayout, { RouteContext, RouteContextType } from '@ant-design/pro-layout';
 import { HeaderViewProps } from '@ant-design/pro-layout/es/components/Header';
 import { css } from '@emotion/css';
-import { Popover, Tooltip } from 'antd';
+import { Popover, Result, Tooltip } from 'antd';
 import React, { createContext, FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
+import { useTranslation } from 'react-i18next';
 import { Link, Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
 import {
   ACLRolesCheckProvider,
@@ -197,12 +198,34 @@ const pageContentStyle: React.CSSProperties = {
   overflowY: 'auto',
 };
 
+const ShowTipWhenNoPages = () => {
+  const { allAccessRoutes } = useAllAccessDesktopRoutes();
+  const { designable } = useDesignable();
+  const { token } = useToken();
+  const { t } = useTranslation();
+  const location = useLocation();
+
+  // Check if there are any pages
+  if (allAccessRoutes.length === 0 && !designable && ['/admin', '/admin/'].includes(location.pathname)) {
+    return (
+      <Result
+        icon={<HighlightOutlined style={{ fontSize: '8em', color: token.colorText }} />}
+        title={t('No pages yet, please configure first')}
+        subTitle={t(`Click the "UI Editor" icon in the upper right corner to enter the UI Editor mode`)}
+      />
+    );
+  }
+
+  return null;
+};
+
 export const LayoutContent = () => {
   /* Use the "nb-subpages-slot-without-header-and-side" class name to locate the position of the subpages */
   return (
     <div className={`${layoutContentClass} nb-subpages-slot-without-header-and-side`}>
       <div style={pageContentStyle}>
         <Outlet />
+        <ShowTipWhenNoPages />
       </div>
     </div>
   );

packages/plugins/@nocobase/plugin-mobile/src/client/ShowTipWhenNoPages.tsx

@@ -7,6 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { HighlightOutlined } from '@ant-design/icons';
 import { useDesignable } from '@nocobase/client';
 import { ErrorBlock } from 'antd-mobile';
 import _ from 'lodash';
@@ -23,10 +24,10 @@ export const ShowTipWhenNoPages: FC = ({ children }) => {
   if ((!designable || isMobile) && _.isEmpty(routeList)) {
     return (
       <ErrorBlock
-        status="empty"
+        image={<HighlightOutlined style={{ fontSize: '8em' }} />}
         fullPage
-        title={t('No accessible pages found')}
+        title={t('No pages yet, please configure first')}
-        description={t('This might be due to permission configuration issues')}
+        description={t('Click the "UI Editor" icon in the upper right corner to enter the UI Editor mode')}
       />
     );
   }

packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileActionPage.style.ts

@@ -21,10 +21,6 @@ export const useMobileActionPageStyle = genStyleHook('nb-mobile-action-page', (t
       bottom: 0,
       backgroundColor: token.colorBgLayout,
 
-      '.mobile-page-content > .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn': {
-        margin: 20,
-      },
-
       '.nb-mobile-action-page-footer': {
         height: 'var(--nb-mobile-page-header-height)',
         paddingRight: 'var(--nb-mobile-page-tabs-content-padding)',

packages/plugins/@nocobase/plugin-mobile/src/client/mobile-layout/mobile-tab-bar/styles.ts

@@ -28,6 +28,7 @@ export const useStyles = genStyleHook('nb-mobile-tab-bar', (token) => {
         alignItems: 'center',
         gap: '1em',
         height: '100%',
+        minHeight: 49,
       },
 
       '.mobile-tab-bar-list': {

packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/content/initializer.tsx

@@ -15,9 +15,6 @@ export const mobileAddBlockInitializer = new SchemaInitializer({
   name: 'mobile:addBlock',
   icon: 'PlusOutlined',
   wrap: gridRowColWrap,
-  style: {
-    margin: 20,
-  },
   items: [
     {
       name: 'dataBlocks',