💄 style: Update changelog style

lobehub · Dec 1, 2024 · 49430c4 · 49430c4
1 parent 9a6bcbe
commit 49430c4
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 65 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -103,24 +103,6 @@ const nextConfig = {
       },
     ];
   },
-
-  images: {
-    remotePatterns: [
-      {
-        hostname: 'localhost',
-        protocol: 'http',
-      },
-      {
-        hostname: '127.0.0.1',
-        protocol: 'http',
-      },
-      {
-        hostname: '**',
-        protocol: 'https',
-      },
-    ],
-    // unoptimized: true,
-  },
   output: buildWithDocker ? 'standalone' : undefined,
   reactStrictMode: true,
   redirects: async () => [

diff --git a/src/app/(main)/(mobile)/me/(home)/features/useCategory.tsx b/src/app/(main)/(mobile)/me/(home)/features/useCategory.tsx
@@ -1,20 +1,18 @@
-import { DiscordIcon } from '@lobehub/ui';
 import {
   Book,
   CircleUserRound,
   Database,
   Download,
   Feather,
   FileClockIcon,
-  FileTextIcon,
   LogOut,
   Settings2,
 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 
 import { CellProps } from '@/components/Cell';
-import { CHANGELOG_URL, DISCORD, DOCUMENTS, FEEDBACK } from '@/const/url';
+import { DOCUMENTS, FEEDBACK } from '@/const/url';
 import { isServerMode } from '@/const/version';
 import { usePWAInstall } from '@/hooks/usePWAInstall';
 import { useUserStore } from '@/store/user';
@@ -106,23 +104,11 @@ export const useCategory = () => {
       onClick: () => window.open(FEEDBACK, '__blank'),
     },
     {
-      icon: DiscordIcon,
-      key: 'discord',
-      label: 'Discord',
-      onClick: () => window.open(DISCORD, '__blank'),
-    },
-    {
-      icon: FileTextIcon,
+      icon: FileClockIcon,
       key: 'changelog',
       label: t('changelog'),
       onClick: () => router.push('/changelog'),
     },
-    {
-      icon: FileClockIcon,
-      key: 'releaseNotes',
-      label: t('releaseNotes'),
-      onClick: () => window.open(CHANGELOG_URL, '__blank'),
-    },
   ];
 
   const nextAuthSignOut: CellProps[] = [

diff --git a/src/app/(main)/_layout/Desktop.tsx b/src/app/(main)/_layout/Desktop.tsx
@@ -11,7 +11,7 @@ import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfi
 
 import { LayoutProps } from './type';
 
-const CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'), { ssr: false });
+const CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'));
 const ChangelogModal = dynamic(() => import('@/features/ChangelogModal'), { ssr: false });
 
 const Layout = memo<LayoutProps>(({ children, nav }) => {

diff --git a/src/app/(main)/_layout/Mobile.tsx b/src/app/(main)/_layout/Mobile.tsx
@@ -10,7 +10,7 @@ import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfi
 
 import { LayoutProps } from './type';
 
-const CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'), { ssr: false });
+const CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'));
 const ChangelogModal = dynamic(() => import('@/features/ChangelogModal'), { ssr: false });
 
 const MOBILE_NAV_ROUTES = new Set([

diff --git a/src/app/@modal/(.)changelog/features/Cover.tsx b/src/app/@modal/(.)changelog/features/Cover.tsx
@@ -53,7 +53,8 @@ const Cover = memo<{ alt: string; mobile?: boolean; src: string }>(({ alt, mobil
           height: 'auto',
           width: '100%',
         }}
-        width={580}
+        unoptimized
+        width={600}
       />
     </Flexbox>
   );

diff --git a/src/app/@modal/(.)changelog/features/Hero.tsx b/src/app/@modal/(.)changelog/features/Hero.tsx
@@ -1,16 +1,22 @@
 'use client';
 
 import { FluentEmoji } from '@lobehub/ui';
-import { useTheme } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    background: linear-gradient(to bottom, ${token.colorFillTertiary}, transparent);
+  `,
+);
+
 const Hero = memo(() => {
-  const theme = useTheme();
+  const { theme, styles } = useStyles();
   const { t } = useTranslation('changelog');
   return (
-    <Flexbox gap={8} paddingBlock={32} paddingInline={24}>
+    <Flexbox className={styles} gap={8} padding={24}>
       <Flexbox align={'center'} gap={12} horizontal>
         <h1 style={{ fontSize: 24, fontWeight: 'bold', margin: 0 }}>{t('welcomeBack')}</h1>
         <FluentEmoji emoji={'🤯'} size={28} type={'anim'} />

diff --git a/src/app/@modal/(.)changelog/features/Post.tsx b/src/app/@modal/(.)changelog/features/Post.tsx
@@ -1,7 +1,10 @@
 import { Typography } from '@lobehub/ui';
+import Link from 'next/link';
 import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
 
 import { CustomMDX } from '@/components/mdx';
+import { OFFICIAL_SITE } from '@/const/url';
 import { Locales } from '@/locales/resources';
 import { ChangelogIndexItem, changelogService } from '@/services/changelog';
 
@@ -16,13 +19,18 @@ const Post = async ({
   locale,
 }: ChangelogIndexItem & { branch?: string; locale: Locales; mobile?: boolean }) => {
   const data = await changelogService.getPostById(id, { locale });
+  const url = urlJoin(OFFICIAL_SITE, 'changelog', id);
 
   return (
     <Flexbox gap={8}>
-      <Cover alt={data.title} src={data.image} />
+      <Link href={url} style={{ color: 'inherit' }} target={'_blank'}>
+        <Cover alt={data.title} src={data.image} />
+      </Link>
       <Flexbox gap={8} paddingInline={24}>
         <Typography headerMultiple={0.2} style={{ width: '100%' }}>
-          <h1 id={id}>{data.rawTitle || data.title}</h1>
+          <Link href={url} style={{ color: 'inherit' }} target={'_blank'}>
+            <h1 id={id}>{data.rawTitle || data.title}</h1>
+          </Link>
           <CustomMDX source={data.content} />
         </Typography>
         <Flexbox align={'center'} gap={8} horizontal justify={'space-between'} width={'100%'}>

diff --git a/src/app/@modal/(.)changelog/layout.tsx b/src/app/@modal/(.)changelog/layout.tsx
@@ -28,7 +28,7 @@ const Layout: FC<PropsWithChildren> = ({ children }) => {
         console.log(data);
         updateSystemStatus({ latestChangelogId: data });
       }}
-      width={'min(90vw, 580px)'}
+      width={'min(90vw, 600px)'}
     >
       <Flexbox
         style={{ overflowX: 'hidden', overflowY: 'auto', position: 'relative' }}

diff --git a/src/features/User/UserPanel/useMenu.tsx b/src/features/User/UserPanel/useMenu.tsx
@@ -8,7 +8,6 @@ import {
   Download,
   Feather,
   FileClockIcon,
-  FileTextIcon,
   HardDriveDownload,
   HardDriveUpload,
   LifeBuoy,
@@ -26,7 +25,6 @@ import urlJoin from 'url-join';
 import type { MenuProps } from '@/components/Menu';
 import { LOBE_CHAT_CLOUD } from '@/const/branding';
 import {
-  CHANGELOG_URL,
   DISCORD,
   DOCUMENTS_REFER_URL,
   EMAIL_SUPPORT,
@@ -190,14 +188,11 @@ export const useMenu = () => {
           ),
         },
         {
-          icon: <Icon icon={DiscordIcon} />,
-          key: 'discord',
-          label: (
-            <Link href={DISCORD} target={'_blank'}>
-              {t('userPanel.discord')}
-            </Link>
-          ),
+          icon: <Icon icon={FileClockIcon} />,
+          key: 'changelog',
+          label: <Link href={'/changelog'}>{t('changelog')}</Link>,
         },
+
         {
           children: [
             {
@@ -219,25 +214,20 @@ export const useMenu = () => {
               ),
             },
             {
-              icon: <Icon icon={Mail} />,
-              key: 'email',
+              icon: <Icon icon={DiscordIcon} />,
+              key: 'discord',
               label: (
-                <Link href={mailTo(EMAIL_SUPPORT)} target={'_blank'}>
-                  {t('userPanel.email')}
+                <Link href={DISCORD} target={'_blank'}>
+                  {t('userPanel.discord')}
                 </Link>
               ),
             },
             {
-              icon: <Icon icon={FileTextIcon} />,
-              key: 'changelog',
-              label: <Link href={'/changelog'}>{t('changelog')}</Link>,
-            },
-            {
-              icon: <Icon icon={FileClockIcon} />,
-              key: 'releaseNotes',
+              icon: <Icon icon={Mail} />,
+              key: 'email',
               label: (
-                <Link href={CHANGELOG_URL} target={'_blank'}>
-                  {t('releaseNotes')}
+                <Link href={mailTo(EMAIL_SUPPORT)} target={'_blank'}>
+                  {t('userPanel.email')}
                 </Link>
               ),
             },