@lobehub/chat 0.152.12 → 0.153.1

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.153.1](https://github.com/lobehub/lobe-chat/compare/v0.153.0...v0.153.1)
+
+<sup>Released on **2024-05-04**</sup>
+
+#### 💄 Styles
+
+- **misc**: Imporve mobile styles and loading skeleton.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Imporve mobile styles and loading skeleton, closes [#2363](https://github.com/lobehub/lobe-chat/issues/2363) ([8ee3591](https://github.com/lobehub/lobe-chat/commit/8ee3591))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.153.0](https://github.com/lobehub/lobe-chat/compare/v0.152.12...v0.153.0)
+
+<sup>Released on **2024-05-04**</sup>
+
+#### ✨ Features
+
+- **misc**: Add Settings Intercepting Routes.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add Settings Intercepting Routes, closes [#2346](https://github.com/lobehub/lobe-chat/issues/2346) ([29b6442](https://github.com/lobehub/lobe-chat/commit/29b6442))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.152.12](https://github.com/lobehub/lobe-chat/compare/v0.152.11...v0.152.12)
 
 <sup>Released on **2024-05-04**</sup>

package/README.md

@@ -222,14 +222,14 @@ In addition, these plugins are not limited to news aggregation, but can also ext
 
 <!-- PLUGIN LIST -->
 
-| Recent Submits                                                                                                            | Description                                                                                                                                 |
-| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Social Search](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **say-apps** on **2024-05-02**</sup>         | The Social Search provides access to tweets, users, followers, images, media and more.<br/>`social` `twitter` `x` `search`                  |
-| [Search Google via Serper](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Barry** on **2024-04-30**</sup> | Google search engine via Serper.dev free API (2500x🆓/month)<br/>`web` `search`                                                             |
-| [Speak](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **speak** on **2024-04-30**</sup>                    | Learn how to say anything in another language with Speak, your AI-powered language tutor.<br/>`education` `language`                        |
-| [NFT Guru](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **swap** on **2024-04-03**</sup>                  | Discover current prices of NFTs across major platforms and keep track of the rapidly changing marketplace with real-time<br/>`crypto` `nft` |
-
-> 📊 Total plugins: [<kbd>**57**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
+| Recent Submits                                                                                                            | Description                                                                                                                                     |
+| ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Social Search](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **say-apps** on **2024-05-02**</sup>         | The Social Search provides access to tweets, users, followers, images, media and more.<br/>`social` `twitter` `x` `search`                      |
+| [Search Google via Serper](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Barry** on **2024-04-30**</sup> | Google search engine via Serper.dev free API (2500x🆓/month)<br/>`web` `search`                                                                 |
+| [NFT Guru](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **swap** on **2024-04-03**</sup>                  | Discover current prices of NFTs across major platforms and keep track of the rapidly changing marketplace with real-time<br/>`crypto` `nft`     |
+| [Calendar Assistant](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **cc** on **2024-03-13**</sup>          | A plugin to manage your calendar events # will auto generate i18n in workflow<br/>`calendar` `schedule` `will-auto-generate-i-18-n-in-workflow` |
+
+> 📊 Total plugins: [<kbd>**56**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
 
  <!-- PLUGIN LIST -->
 

package/README.zh-CN.md

@@ -214,14 +214,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 <!-- PLUGIN LIST -->
 
-| 最近新增                                                                                                                 | 插件描述                                                                                 |
-| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
-| [社交搜索](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **say-apps** on **2024-05-02**</sup>             | 社交搜索提供访问推文、用户、关注者、图片、媒体等功能。<br/>`社交` `推特` `x` `搜索`      |
-| [通过 Serper 搜索 Google](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Barry** on **2024-04-30**</sup> | 通过 Serper.dev 免费 API 进行 Google 搜索引擎（每月 2500 次🆓）<br/>`网络` `搜索`        |
-| [Speak](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **speak** on **2024-04-30**</sup>                   | 使用 Speak，您的 AI 语言导师，学习如何用另一种语言说任何事情。<br/>`教育` `语言`         |
-| [NFT Guru](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **swap** on **2024-04-03**</sup>                 | 发现主要平台上 NFT 的当前价格，并通过实时跟踪快速变化的市场了解情况<br/>`加密货币` `nft` |
-
-> 📊 Total plugins: [<kbd>**57**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
+| 最近新增                                                                                                                 | 插件描述                                                                                                       |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
+| [社交搜索](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **say-apps** on **2024-05-02**</sup>             | 社交搜索提供访问推文、用户、关注者、图片、媒体等功能。<br/>`社交` `推特` `x` `搜索`                            |
+| [通过 Serper 搜索 Google](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Barry** on **2024-04-30**</sup> | 通过 Serper.dev 免费 API 进行 Google 搜索引擎（每月 2500 次🆓）<br/>`网络` `搜索`                              |
+| [NFT Guru](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **swap** on **2024-04-03**</sup>                 | 发现主要平台上 NFT 的当前价格，并通过实时跟踪快速变化的市场了解情况<br/>`加密货币` `nft`                       |
+| [日历助手](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **cc** on **2024-03-13**</sup>                   | 一个用于管理日历事件的插件 # 将自动生成工作流程中的 i18n<br/>`日历` `日程安排` `将自动生成工作流程中的-i-18-n` |
+
+> 📊 Total plugins: [<kbd>**56**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
 
  <!-- PLUGIN LIST -->
 

package/locales/ar/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "تقديم ملاحظات",
   "follow": "تابعنا على {{name}}",
+  "fullscreen": "وضع كامل الشاشة",
   "historyRange": "نطاق التاريخ",
   "import": "استيراد الإعدادات",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "مركز المساعدة",
     "moveGuide": "تم نقل زر الإعدادات إلى هنا",
     "plans": "خطط الاشتراك",
+    "preview": "المعاينة",
     "profile": "إدارة الحساب",
     "setting": "إعدادات التطبيق",
     "usages": "إحصاءات الاستخدام"

package/locales/bg-BG/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Обратна връзка",
   "follow": "Следете ни на {{name}}",
+  "fullscreen": "Цял екран",
   "historyRange": "Диапазон на историята",
   "import": "Импортирай конфигурация",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "Център за помощ",
     "moveGuide": "Бутонът за настройки е преместен тук",
     "plans": "Планове за абонамент",
+    "preview": "Преглед",
     "profile": "Управление на профила",
     "setting": "Настройки на приложението",
     "usages": "Статистика за използване"

package/locales/de-DE/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Feedback und Vorschläge",
   "follow": "Folge uns auf {{name}}",
+  "fullscreen": "Vollbildmodus",
   "historyRange": "Verlaufsbereich",
   "import": "Importieren",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "Hilfezentrum",
     "moveGuide": "Die Einstellungen wurden hierher verschoben.",
     "plans": "Abonnementpläne",
+    "preview": "Vorschau",
     "profile": "Kontoverwaltung",
     "setting": "App-Einstellungen",
     "usages": "Nutzungsstatistiken"

package/locales/en-US/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Feedback",
   "follow": "Follow us on {{name}}",
+  "fullscreen": "Full Screen Mode",
   "historyRange": "History Range",
   "import": "Import Configuration",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "Help Center",
     "moveGuide": "The settings button has been moved here",
     "plans": "Subscription Plans",
+    "preview": "Preview",
     "profile": "Account Management",
     "setting": "App Settings",
     "usages": "Usage Statistics"

package/locales/es-ES/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Comentarios y sugerencias",
   "follow": "Síguenos en {{name}}",
+  "fullscreen": "Pantalla completa",
   "historyRange": "Rango de historial",
   "import": "Importar configuración",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "Centro de ayuda",
     "moveGuide": "El botón de configuración se ha movido aquí",
     "plans": "Planes de suscripción",
+    "preview": "Vista previa",
     "profile": "Gestión de cuenta",
     "setting": "Configuración de la aplicación",
     "usages": "Estadísticas de uso"

package/locales/fr-FR/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Retour d'information et suggestions",
   "follow": "Suivez-nous sur {{name}}",
+  "fullscreen": "Mode plein écran",
   "historyRange": "Plage d'historique",
   "import": "Importer",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "Centre d'aide",
     "moveGuide": "Le bouton de configuration a été déplacé ici",
     "plans": "Forfaits d'abonnement",
+    "preview": "Aperçu",
     "profile": "Gestion du compte",
     "setting": "Paramètres de l'application",
     "usages": "Statistiques d'utilisation"

package/locales/it-IT/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Feedback e suggerimenti",
   "follow": "Seguici su {{name}}",
+  "fullscreen": "Modalità a schermo intero",
   "historyRange": "Intervallo cronologico",
   "import": "Importa configurazione",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "Centro assistenza",
     "moveGuide": "Il pulsante delle impostazioni è stato spostato qui",
     "plans": "Piani di abbonamento",
+    "preview": "Anteprima",
     "profile": "Gestione account",
     "setting": "Impostazioni app",
     "usages": "Statistiche di utilizzo"

package/locales/ja-JP/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "フィードバック",
   "follow": " {{name}} で私たちをフォローする",
+  "fullscreen": "フルスクリーンモード",
   "historyRange": "履歴範囲",
   "import": "インポート",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "ヘルプセンター",
     "moveGuide": "設定ボタンがこちらに移動しました",
     "plans": "サブスクリプションプラン",
+    "preview": "プレビュー",
     "profile": "アカウント管理",
     "setting": "アプリ設定",
     "usages": "利用量統計"

package/locales/ko-KR/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "피드백 및 제안",
   "follow": "{{name}}에서 우리를 팔로우하세요",
+  "fullscreen": "전체 화면",
   "historyRange": "기록 범위",
   "import": "가져오기",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "도움말 센터",
     "moveGuide": "설정 버튼을 여기로 이동했습니다",
     "plans": "요금제",
+    "preview": "미리보기",
     "profile": "계정 관리",
     "setting": "앱 설정",
     "usages": "사용량 통계"

package/locales/nl-NL/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Feedback en suggesties",
   "follow": "Volg ons op {{name}}",
+  "fullscreen": "Volledig scherm",
   "historyRange": "Geschiedenisbereik",
   "import": "Importeren",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "帮助中心",
     "moveGuide": "De instellingenknop is hierheen verplaatst",
     "plans": "订阅方案",
+    "preview": "Voorbeeld",
     "profile": "账户管理",
     "setting": "应用设置",
     "usages": "用量统计"

package/locales/pl-PL/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Opinie i sugestie",
   "follow": "Zaobserwuj nas na {{name}}",
+  "fullscreen": "Tryb pełnoekranowy",
   "historyRange": "Zakres historii",
   "import": "Importuj ustawienia",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "Centrum pomocy",
     "moveGuide": "Przenieś przycisk ustawień tutaj",
     "plans": "Plan abonamentu",
+    "preview": "Podgląd",
     "profile": "Zarządzanie kontem",
     "setting": "Ustawienia aplikacji",
     "usages": "Statystyki użycia"

package/locales/pt-BR/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Feedback e sugestões",
   "follow": "Siga-nos no {{name}}",
+  "fullscreen": "Modo de Tela Cheia",
   "historyRange": "Intervalo de histórico",
   "import": "Importar configuração",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "Central de Ajuda",
     "moveGuide": "O botão de configurações foi movido para cá",
     "plans": "Planos de Assinatura",
+    "preview": "Versão de visualização",
     "profile": "Gerenciamento de Conta",
     "setting": "Configurações do Aplicativo",
     "usages": "Estatísticas de Uso"

package/locales/ru-RU/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Обратная связь и предложения",
   "follow": "Подпишитесь на нас на {{name}}",
+  "fullscreen": "Полноэкранный режим",
   "historyRange": "История",
   "import": "Импорт настроек",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "Центр помощи",
     "moveGuide": "Кнопка настроек перемещена сюда",
     "plans": "Планы подписки",
+    "preview": "Предпросмотр",
     "profile": "Управление аккаунтом",
     "setting": "Настройки приложения",
     "usages": "Статистика использования"

package/locales/tr-TR/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Feedback",
   "follow": "Bizi {{name}} üzerinde takip edin",
+  "fullscreen": "Tam Ekran Modu",
   "historyRange": "Geçmiş Aralığı",
   "import": "İçe Aktar",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "Yardım Merkezi",
     "moveGuide": "Ayarlar düğmesini buraya taşıyın",
     "plans": "Planlar",
+    "preview": "Önizleme",
     "profile": "Hesap Yönetimi",
     "setting": "Uygulama Ayarları",
     "usages": "Kullanım İstatistikleri"

package/locales/vi-VN/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Phản hồi và đề xuất",
   "follow": "Theo dõi chúng tôi trên {{name}}",
+  "fullscreen": "Chế độ toàn màn hình",
   "historyRange": "Phạm vi lịch sử",
   "import": "Nhập cấu hình",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "Trung tâm trợ giúp",
     "moveGuide": "Đã di chuyển nút cài đặt đến đây",
     "plans": "Kế hoạch đăng ký",
+    "preview": "Phiên bản xem trước",
     "profile": "Quản lý tài khoản",
     "setting": "Cài đặt ứng dụng",
     "usages": "Thống kê sử dụng"

package/locales/zh-CN/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "反馈与建议",
   "follow": "在 {{name}} 上关注我们",
+  "fullscreen": "全屏模式",
   "historyRange": "历史范围",
   "import": "导入配置",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "帮助中心",
     "moveGuide": "设置按钮搬到这里啦",
     "plans": "订阅方案",
+    "preview": "预览版",
     "profile": "账户管理",
     "setting": "应用设置",
     "usages": "用量统计"

package/locales/zh-TW/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "回饋與建議",
   "follow": "在 {{name}} 上關注我們",
+  "fullscreen": "全螢幕模式",
   "historyRange": "歷史範圍",
   "import": "匯入設定",
   "importModal": {
@@ -168,6 +169,7 @@
     "help": "幫助中心",
     "moveGuide": "設置按鈕搬到這裡啦",
     "plans": "訂閱方案",
+    "preview": "預覽",
     "profile": "帳戶管理",
     "setting": "應用設定",
     "usages": "用量統計"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.152.12",
+  "version": "0.153.1",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(main)/(mobile)/me/features/AvatarBanner.tsx

@@ -1,55 +1,27 @@
 'use client';
 
-import { createStyles } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
-export const AVATAR_SIZE = 80;
-
-export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  avatar: css`
-    z-index: 10;
-
-    flex: none;
-
-    margin-top: -${AVATAR_SIZE / 2 + 6}px;
+import UserAvatar from '@/features/User/UserAvatar';
+import UserInfo from '@/features/User/UserInfo';
 
-    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
-    border: 6px solid ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
-    border-radius: 50%;
-  `,
-  banner: css`
-    position: relative;
-    flex: none;
-    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
-  `,
-  bannerBox: css`
-    position: relative;
+import { useStyles } from './style';
 
-    overflow: hidden;
-
-    width: 100%;
-    height: 100px;
-
-    background: ${token.colorBgLayout};
-  `,
-  bannerImg: css`
-    position: absolute;
-    scale: 5;
-    filter: blur(24px) saturate(2);
-  `,
-}));
+export const AVATAR_SIZE = 80;
 
-const AvatarBanner = memo<PropsWithChildren>(({ children }) => {
+const AvatarBanner = memo<PropsWithChildren>(() => {
   const { styles } = useStyles();
 
   return (
-    <Flexbox align={'center'} className={styles.banner} justify={'center'} width={'100%'}>
+    <>
       <Flexbox align={'center'} className={styles.bannerBox} justify={'center'}>
-        <div className={styles.bannerImg}>{children}</div>
+        <div className={styles.bannerImg}>
+          <UserAvatar shape={'square'} size={AVATAR_SIZE} />
+        </div>
       </Flexbox>
-      <Center className={styles.avatar}>{children}</Center>
-    </Flexbox>
+      <UserInfo className={styles.info} />
+    </>
   );
 });
 

package/src/app/(main)/(mobile)/me/features/Header.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { ActionIcon, MobileNavBar } from '@lobehub/ui';
+import { useScroll } from 'ahooks';
+import { useTheme } from 'antd-style';
+import { Moon, Sun } from 'lucide-react';
+import { memo } from 'react';
+
+import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useUserStore } from '@/store/user';
+import { mobileHeaderFixed } from '@/styles/mobileHeader';
+
+const Header = memo(() => {
+  const theme = useTheme();
+  const scroll = useScroll(() => document.querySelector('#lobe-mobile-scroll-container'));
+  const switchThemeMode = useUserStore((s) => s.switchThemeMode);
+  const showBackground = (scroll as any)?.top > 44;
+
+  return (
+    <MobileNavBar
+      right={
+        <ActionIcon
+          color={showBackground ? undefined : theme.colorBgLayout}
+          icon={theme.isDarkMode ? Moon : Sun}
+          onClick={() => switchThemeMode(theme.isDarkMode ? 'light' : 'dark')}
+          size={MOBILE_HEADER_ICON_SIZE}
+        />
+      }
+      style={{
+        ...mobileHeaderFixed,
+        background: showBackground ? undefined : 'transparent',
+      }}
+    />
+  );
+});
+
+export default Header;

package/src/app/(main)/(mobile)/me/features/style.ts

@@ -0,0 +1,29 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  bannerBox: css`
+    position: relative;
+
+    overflow: hidden;
+    flex: none;
+
+    width: 100%;
+    height: 100px;
+
+    background: ${token.colorFill};
+  `,
+  bannerImg: css`
+    position: absolute;
+    scale: 8;
+    filter: blur(6px) saturate(2);
+  `,
+  info: css`
+    position: relative;
+
+    margin-top: ${-token.borderRadiusLG}px;
+
+    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
+    border-top-left-radius: ${token.borderRadiusLG}px;
+    border-top-right-radius: ${token.borderRadiusLG}px;
+  `,
+}));

package/src/app/(main)/(mobile)/me/layout.tsx

@@ -2,8 +2,14 @@ import { PropsWithChildren } from 'react';
 
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 
+import Header from './features/Header';
+
 const Layout = ({ children }: PropsWithChildren) => {
-  return <MobileContentLayout withNav>{children}</MobileContentLayout>;
+  return (
+    <MobileContentLayout header={<Header />} withNav>
+      {children}
+    </MobileContentLayout>
+  );
 };
 
 Layout.displayName = 'MeLayout';

package/src/app/(main)/(mobile)/me/loading.tsx

@@ -1,17 +1,32 @@
 'use client';
 
 import { Skeleton } from 'antd';
-import { Center } from 'react-layout-kit';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import SkeletonLoading from '@/components/SkeletonLoading';
 
-export default () => {
+import { useStyles } from './features/style';
+
+const Loading = memo(() => {
+  const { styles } = useStyles();
   return (
     <>
-      <Center height={180}>
-        <Skeleton.Avatar shape={'circle'} size={88} />
-      </Center>
-      <SkeletonLoading paragraph={{ rows: 8 }} title={false} />
+      <Flexbox align={'center'} className={styles.bannerBox} justify={'center'} />
+      <Flexbox
+        align={'center'}
+        className={styles.info}
+        gap={12}
+        horizontal
+        paddingBlock={12}
+        paddingInline={12}
+      >
+        <Skeleton.Avatar active shape={'circle'} size={48} />
+        <Skeleton active paragraph={{ rows: 1 }} title={false} />
+      </Flexbox>
+      <SkeletonLoading active paragraph={{ rows: 8 }} title={false} />
     </>
   );
-};
+});
+
+export default Loading;

package/src/app/(main)/(mobile)/me/page.tsx

@@ -2,10 +2,10 @@ import { redirect } from 'next/navigation';
 import { Center } from 'react-layout-kit';
 
 import BrandWatermark from '@/components/BrandWatermark';
-import UserAvatar from '@/features/User/UserAvatar';
+import Divider from '@/components/Cell/Divider';
 import { isMobileDevice } from '@/utils/responsive';
 
-import AvatarBanner, { AVATAR_SIZE } from './features/AvatarBanner';
+import AvatarBanner from './features/AvatarBanner';
 import Cate from './features/Cate';
 import ExtraCate from './features/ExtraCate';
 
@@ -16,9 +16,8 @@ const Page = () => {
 
   return (
     <>
-      <AvatarBanner>
-        <UserAvatar size={AVATAR_SIZE} />
-      </AvatarBanner>
+      <AvatarBanner />
+      <Divider />
       <Cate />
       <ExtraCate />
       <Center padding={16}>

package/src/app/(main)/@nav/_layout/Mobile.tsx

@@ -2,7 +2,7 @@
 
 import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { Bot, MessageSquare, User } from 'lucide-react';
+import { Compass, MessageSquare, User } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
@@ -44,7 +44,7 @@ const Nav = memo(() => {
         title: t('tab.chat'),
       },
       {
-        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Bot} />,
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Compass} />,
         key: SidebarTabKey.Market,
         onClick: () => {
           router.push('/market');