💄 style: Imporve mobile styles and loading skeleton (lobehub#2363)

locales/ar/common.json

@@ -169,6 +169,7 @@
     "help": "مركز المساعدة",
     "moveGuide": "تم نقل زر الإعدادات إلى هنا",
     "plans": "خطط الاشتراك",
+    "preview": "المعاينة",
     "profile": "إدارة الحساب",
     "setting": "إعدادات التطبيق",
     "usages": "إحصاءات الاستخدام"

locales/bg-BG/common.json

@@ -169,6 +169,7 @@
     "help": "Център за помощ",
     "moveGuide": "Бутонът за настройки е преместен тук",
     "plans": "Планове за абонамент",
+    "preview": "Преглед",
     "profile": "Управление на профила",
     "setting": "Настройки на приложението",
     "usages": "Статистика за използване"

locales/de-DE/common.json

@@ -169,6 +169,7 @@
     "help": "Hilfezentrum",
     "moveGuide": "Die Einstellungen wurden hierher verschoben.",
     "plans": "Abonnementpläne",
+    "preview": "Vorschau",
     "profile": "Kontoverwaltung",
     "setting": "App-Einstellungen",
     "usages": "Nutzungsstatistiken"

locales/en-US/common.json

@@ -169,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"

locales/es-ES/common.json

@@ -169,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"

locales/fr-FR/common.json

@@ -169,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"

locales/it-IT/common.json

@@ -169,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"

locales/ja-JP/common.json

@@ -169,6 +169,7 @@
     "help": "ヘルプセンター",
     "moveGuide": "設定ボタンがこちらに移動しました",
     "plans": "サブスクリプションプラン",
+    "preview": "プレビュー",
     "profile": "アカウント管理",
     "setting": "アプリ設定",
     "usages": "利用量統計"

locales/ko-KR/common.json

@@ -169,6 +169,7 @@
     "help": "도움말 센터",
     "moveGuide": "설정 버튼을 여기로 이동했습니다",
     "plans": "요금제",
+    "preview": "미리보기",
     "profile": "계정 관리",
     "setting": "앱 설정",
     "usages": "사용량 통계"

locales/nl-NL/common.json

@@ -169,6 +169,7 @@
     "help": "帮助中心",
     "moveGuide": "De instellingenknop is hierheen verplaatst",
     "plans": "订阅方案",
+    "preview": "Voorbeeld",
     "profile": "账户管理",
     "setting": "应用设置",
     "usages": "用量统计"

locales/pl-PL/common.json

@@ -169,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"

locales/pt-BR/common.json

@@ -169,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"

locales/ru-RU/common.json

@@ -169,6 +169,7 @@
     "help": "Центр помощи",
     "moveGuide": "Кнопка настроек перемещена сюда",
     "plans": "Планы подписки",
+    "preview": "Предпросмотр",
     "profile": "Управление аккаунтом",
     "setting": "Настройки приложения",
     "usages": "Статистика использования"

locales/tr-TR/common.json

@@ -169,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"

locales/vi-VN/common.json

@@ -169,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"

locales/zh-CN/common.json

@@ -169,6 +169,7 @@
     "help": "帮助中心",
     "moveGuide": "设置按钮搬到这里啦",
     "plans": "订阅方案",
+    "preview": "预览版",
     "profile": "账户管理",
     "setting": "应用设置",
     "usages": "用量统计"

locales/zh-TW/common.json

@@ -169,6 +169,7 @@
     "help": "幫助中心",
     "moveGuide": "設置按鈕搬到這裡啦",
     "plans": "訂閱方案",
+    "preview": "預覽",
     "profile": "帳戶管理",
     "setting": "應用設定",
     "usages": "用量統計"

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} />
+    </>
   );
 });
 

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;

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;
+  `,
+}));

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';

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;

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}>

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');