feat: adjust of menu in upper right corner of page (#3548)

* feat: adjust of menu in upper right corner of page

* fix: uncomment

* chore: change License link

* chore: optimize text color

* chore: optimize text color

* test: fix e2e

packages/core/client/src/locale/en_US.json

@@ -782,5 +782,8 @@
   "Automatically drop objects that depend on the collection (such as views), and in turn all objects that depend on those objects": "Automatically drop objects that depend on the collection (such as views), and in turn all objects that depend on those objects",
   "Sign in with another account": "Sign in with another account",
   "Return to the main application": "Return to the main application",
-  "Permission deined": "Permission denied"
+  "Permission deined": "Permission denied",
+  "Home page": "Home page",
+  "User manual": "User manual",
+  "License": "License"
 }

packages/core/client/src/locale/es_ES.json

@@ -731,5 +731,8 @@
   "Enable link": "Activar enlace",
   "Data template": "Plantilla de datos",
   "Not found": "No encontrado",
-  "Add": "Añadir"
+  "Add": "Añadir",
+  "Home page": "Página de inicio",
+  "User manual": "Manual de usuario",
+  "License": "Licencia"
 }

packages/core/client/src/locale/fr_FR.json

@@ -751,5 +751,8 @@
   "Linkage with form fields": "Lien avec les champs de formulaire",
   "Allow add new, update and delete actions": "Autoriser les actions d'ajout, de mise à jour et de suppression",
   "Allow add new":"Autoriser les ajouts",
-  "Allow selection of existing records":"Permet de sélectionner des données existantes"
+  "Allow selection of existing records":"Permet de sélectionner des données existantes",
+  "Home page": "Page d'accueil",
+  "User manual": "Manuel de l'utilisateur",
+  "License": "Licence"
 }

packages/core/client/src/locale/ja_JP.json

@@ -670,5 +670,8 @@
   "Plugin loading failed. Please check the server logs.": "プラグインのロードに失敗しました。サーバーログを確認してください。",
   "Automatically drop objects that depend on the collection (such as views), and in turn all objects that depend on those objects": "テーブルに依存するオブジェクト、およびそれらに依存するオブジェクトを自動的に削除する",
   "Allow add new":"新規作成を許可",
-  "Allow selection of existing records":"既存のデータの選択を許可"
+  "Allow selection of existing records":"既存のデータの選択を許可",
+  "Home page": "ホームページ",
+  "User manual": "ユーザーマニュアル",
+  "License": "ライセンス"
 }

packages/core/client/src/locale/ko_KR.json

@@ -45,7 +45,7 @@
   "Enable": "활성화",
   "Disable": "비활성화",
   "On": "켜기",
-  "Off": "끄기",  
+  "Off": "끄기",
   "Logo": "로고",
   "Add menu item": "메뉴 항목 추가",
   "Page": "페이지",
@@ -842,5 +842,8 @@
   "Return to the main application": "메인 애플리케이션으로 돌아가기",
   "Permission denied": "허가 거부",
   "Allow add new": "신규 추가 허용",
-  "Allow selection of existing records": "기존 레코드 선택 허용"
+  "Allow selection of existing records": "기존 레코드 선택 허용",
+  "Home page": "홈페이지",
+  "User manual": "사용자 매뉴얼",
+  "License": "라이선스"
 }

packages/core/client/src/locale/pt_BR.json

@@ -711,5 +711,8 @@
   "Add": "Adicionar",
   "Automatically drop objects that depend on the collection (such as views), and in turn all objects that depend on those objects": "Excluir automaticamente objetos que dependem desta tabela, bem como objetos que dependem desses objetos",
   "Allow add new":"Permitir novas adições",
-  "Allow selection of existing records":"Permitir a selecção dos registos existentes"
+  "Allow selection of existing records":"Permitir a selecção dos registos existentes",
+  "Home page": "Página inicial",
+  "User manual": "Manual do usuário",
+  "License": "Licença"
 }

packages/core/client/src/locale/ru_RU.json

@@ -546,5 +546,8 @@
   "Not enabled": "Не включено",
   "Search plugin": "Поиск плагина",
   "Author": "Автор",
-  "Plugin loading failed. Please check the server logs.": "Не удалось загрузить плагин. Пожалуйста, проверьте журналы сервера."
+  "Plugin loading failed. Please check the server logs.": "Не удалось загрузить плагин. Пожалуйста, проверьте журналы сервера.",
+  "Home page": "Домашняя страница",
+  "User manual": "Руководство пользователя",
+  "License": "Лицензия"
 }

packages/core/client/src/locale/tr_TR.json

@@ -543,5 +543,8 @@
   "Not enabled": "Etkin değil",
   "Search plugin": "Eklenti ara",
   "Author": "Yazar",
-  "Plugin loading failed. Please check the server logs.": "Eklenti yüklenemedi. Lütfen sunucu günlüklerini kontrol edin."
+  "Plugin loading failed. Please check the server logs.": "Eklenti yüklenemedi. Lütfen sunucu günlüklerini kontrol edin.",
+  "Home page": "Anasayfa",
+  "User manual": "Kullanıcı kılavuzu",
+  "License": "Lisans"
 }

packages/core/client/src/locale/uk_UA.json

@@ -751,5 +751,8 @@
   "Feedback": "Зворотній зв'язок",
   "Try again": "Спробуйте ще раз",
   "Data template": "Шаблон даних",
-  "Template fields have been removed and need to be reconfigured": "Поля шаблону були видалені і потребують повторної конфігурації"
+  "Template fields have been removed and need to be reconfigured": "Поля шаблону були видалені і потребують повторної конфігурації",
+  "Home page": "Домашня сторінка",
+  "User manual": "Посібник користувача",
+  "License": "Ліцензія"
 }

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

@@ -857,5 +857,8 @@
   "Collections": "数据表",
   "Collection fields": "数据表字段",
   "Authentication": "用户认证",
-  "Logging and monitoring": "日志与监控"
-}
+  "Logging and monitoring": "日志与监控",
+  "Home page": "主页",
+  "User manual": "用户手册",
+  "License": "许可证"
+}

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

@@ -842,5 +842,8 @@
   "Return to the main application": "返回主App",
   "Permission denied": "沒有權限",
   "Allow add new":"允許新增",
-  "Allow selection of existing records":"允許選擇已有資料"
+  "Allow selection of existing records":"允許選擇已有資料",
+  "Home page": "主頁",
+  "User manual": "使用手冊",
+  "License": "許可證"
 }

packages/core/client/src/pm/index.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
-import { Plugin } from '../application/Plugin';
-import { PluginManagerLink, SettingsCenterDropdown } from './PluginManagerLink';
-import { AdminSettingsLayout } from './PluginSetting';
-import { PluginManager } from './PluginManager';
 import { ACLPane } from '../acl/ACLShortcut';
+import { ADMIN_SETTINGS_PATH } from '../application';
+import { Plugin } from '../application/Plugin';
 import { CollectionManagerPane } from '../collection-manager';
 import { BlockTemplatesPane } from '../schema-templates';
 import { SystemSettingsPane } from '../system-settings';
-import { ADMIN_SETTINGS_PATH } from '../application';
-import { Outlet } from 'react-router-dom';
+import { PluginManager } from './PluginManager';
+import { PluginManagerLink, SettingsCenterDropdown } from './PluginManagerLink';
+import { AdminSettingsLayout } from './PluginSetting';
 
+export * from './PluginManager';
 export * from './PluginManagerLink';
 export * from './PluginSetting';
-export * from './PluginManager';
 
 export class PMPlugin extends Plugin {
   async load() {

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { useSessionStorageState } from 'ahooks';
-import { App, ConfigProvider, Layout } from 'antd';
+import { App, ConfigProvider, Divider, Layout } from 'antd';
 import { createGlobalStyle } from 'antd-style';
 import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Link, Outlet, useMatch, useNavigate, useParams } from 'react-router-dom';
@@ -26,6 +26,7 @@ import {
 import { Plugin } from '../../../application/Plugin';
 import { useAppSpin } from '../../../application/hooks/useAppSpin';
 import { useCollectionManager } from '../../../collection-manager';
+import { Help } from '../../../user/Help';
 import { VariablesProvider } from '../../../variables';
 
 const filterByACL = (schema, options) => {
@@ -363,6 +364,16 @@ export const InternalAdminLayout = (props: any) => {
             `}
           >
             <PinnedPluginList />
+            <ConfigProvider
+              theme={{
+                token: {
+                  colorSplit: 'rgba(255, 255, 255, 0.1)',
+                },
+              }}
+            >
+              <Divider type="vertical" />
+            </ConfigProvider>
+            <Help />
             <CurrentUser />
           </div>
         </div>

packages/core/client/src/user/CurrentUser.tsx

@@ -1,3 +1,4 @@
+import { UserOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
 import { error } from '@nocobase/utils/client';
 import { App, Dropdown, Menu, MenuProps } from 'antd';
@@ -5,28 +6,27 @@ import React, { createContext, useCallback, useMemo as useEffect, useState } fro
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useACLRoleContext, useAPIClient, useCurrentUserContext, useToken } from '..';
-import { useCurrentAppInfo } from '../appInfo/CurrentAppInfoProvider';
 import { useChangePassword } from './ChangePassword';
 import { useCurrentUserSettingsMenu } from './CurrentUserSettingsMenuProvider';
 import { useEditProfile } from './EditProfile';
 import { useLanguageSettings } from './LanguageSettings';
 import { useSwitchRole } from './SwitchRole';
-const useApplicationVersion = () => {
-  const data = useCurrentAppInfo();
+
+const useNickname = () => {
+  const { data } = useCurrentUserContext();
+  const { token } = useToken();
+
   return useEffect(() => {
     return {
-      key: 'version',
+      key: 'nickname',
       disabled: true,
       label: (
-        <span
-          role="button"
-          aria-label="app-version"
-          aria-disabled="false"
-          style={{ cursor: 'text' }}
-        >{`Version ${data?.data?.version}`}</span>
+        <span aria-disabled="false" style={{ cursor: 'text', color: token.colorTextDescription }}>
+          {data?.data?.nickname || data?.data?.username || data?.data?.email}
+        </span>
       ),
     };
-  }, [data?.data?.version]);
+  }, [data?.data?.email, data?.data?.nickname, data?.data?.username, data?.data.version, token.colorTextDescription]);
 };
 
 /**
@@ -63,7 +63,7 @@ export const SettingsMenu: React.FC<{
       }, 3000);
     });
   }, [silenceApi]);
-  const appVersion = useApplicationVersion();
+  const nickname = useNickname();
   const editProfile = useEditProfile();
   const changePassword = useChangePassword();
   const switchRole = useSwitchRole();
@@ -109,7 +109,7 @@ export const SettingsMenu: React.FC<{
 
   useEffect(() => {
     const items = [
-      appVersion,
+      nickname,
       {
         key: 'divider_1',
         type: 'divider',
@@ -147,7 +147,6 @@ export const SettingsMenu: React.FC<{
   }, [
     addMenuItem,
     api.auth,
-    appVersion,
     changePassword,
     controlApp,
     editProfile,
@@ -156,6 +155,7 @@ export const SettingsMenu: React.FC<{
     redirectUrl,
     switchRole,
     t,
+    nickname,
   ]);
 
   return <Menu items={getMenuItems()} />;
@@ -164,11 +164,18 @@ export const SettingsMenu: React.FC<{
 export const DropdownVisibleContext = createContext(null);
 export const CurrentUser = () => {
   const [visible, setVisible] = useState(false);
-  const { data } = useCurrentUserContext();
   const { token } = useToken();
 
   return (
-    <div style={{ display: 'inline-flex', verticalAlign: 'top' }}>
+    <div
+      className={css`
+        display: inline-block;
+        vertical-align: top;
+        &:hover {
+          background: rgba(255, 255, 255, 0.1) !important;
+        }
+      `}
+    >
       <DropdownVisibleContext.Provider value={{ visible, setVisible }}>
         <Dropdown
           open={visible}
@@ -189,9 +196,9 @@ export const CurrentUser = () => {
               white-space: nowrap;
               text-overflow: ellipsis;
             `}
-            style={{ cursor: 'pointer', border: 0, padding: '16px', color: token.colorTextHeaderMenu }}
+            style={{ cursor: 'pointer', padding: '16px', color: token.colorTextHeaderMenu }}
           >
-            {data?.data?.nickname || data?.data?.username || data?.data?.email}
+            <UserOutlined />
           </span>
         </Dropdown>
       </DropdownVisibleContext.Provider>

packages/core/client/src/user/Help.tsx

@@ -0,0 +1,105 @@
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+import { Dropdown, Menu } from 'antd';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DropdownVisibleContext, useToken } from '..';
+import { useCurrentAppInfo } from '../appInfo/CurrentAppInfoProvider';
+
+/**
+ * @note If you want to change here, Note the Setting block on the mobile side
+ */
+const SettingsMenu: React.FC<{
+  redirectUrl?: string;
+}> = () => {
+  const { t } = useTranslation();
+  const data = useCurrentAppInfo();
+  const { token } = useToken();
+
+  const items = [
+    {
+      key: 'nocobase',
+      disabled: true,
+      label: (
+        <div style={{ cursor: 'text' }}>
+          <div style={{ color: token.colorText }}>NocoBase</div>
+          <div style={{ fontSize: '0.8em', color: token.colorTextDescription }}>v{data?.data?.version}</div>
+        </div>
+      ),
+    },
+    {
+      key: 'divider_1',
+      type: 'divider',
+    },
+    {
+      key: 'homePage',
+      label: (
+        <a href="https://www.nocobase.com" target="__blank">
+          {t('Home page')}
+        </a>
+      ),
+    },
+    {
+      key: 'userManual',
+      label: (
+        <a href="https://docs.nocobase.com/manual/quick-start/the-first-app" target="__blank">
+          {t('User manual')}
+        </a>
+      ),
+    },
+    {
+      key: 'license',
+      label: (
+        <a href="https://github.com/nocobase/nocobase/blob/main/LICENSE-AGPL" target="__blank">
+          {t('License')}
+        </a>
+      ),
+    },
+  ];
+
+  return <Menu items={items} />;
+};
+
+export const Help = () => {
+  const [visible, setVisible] = useState(false);
+  const { token } = useToken();
+
+  return (
+    <div
+      className={css`
+        display: inline-block;
+        vertical-align: top;
+        &:hover {
+          background: rgba(255, 255, 255, 0.1) !important;
+        }
+      `}
+    >
+      <DropdownVisibleContext.Provider value={{ visible, setVisible }}>
+        <Dropdown
+          open={visible}
+          onOpenChange={(visible) => {
+            setVisible(visible);
+          }}
+          dropdownRender={() => {
+            return <SettingsMenu />;
+          }}
+        >
+          <span
+            data-testid="user-center-button"
+            className={css`
+              max-width: 160px;
+              overflow: hidden;
+              display: inline-block;
+              line-height: 12px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            `}
+            style={{ cursor: 'pointer', padding: '16px', color: token.colorTextHeaderMenu }}
+          >
+            <QuestionCircleOutlined />
+          </span>
+        </Dropdown>
+      </DropdownVisibleContext.Provider>
+    </div>
+  );
+};

packages/core/test/playwright/tests/auth.setup.ts

@@ -9,8 +9,6 @@ setup('admin', async ({ page }) => {
   await page.getByPlaceholder('Password').fill('admin123');
   await page.getByRole('button', { name: 'Sign in' }).click();
 
-  await expect(page.getByTestId('user-center-button').getByText('Super Admin')).toBeVisible();
-
   // 开启配置状态
   await page.evaluate(() => {
     localStorage.setItem('NOCOBASE_DESIGNABLE', 'true');