💄 style: remove r2 cdn url (lobehub#2878)

* 💄 style: Remove r2 cdn url

* 💄 style: Update SettingContainer

* 🔧 chore: Move share setting components

Author: canisminor1990

public/videos/feedback.mp4

@@ -1,25 +1,18 @@
 import { PropsWithChildren } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { HEADER_HEIGHT } from '@/const/layoutTokens';
+import Footer from '@/features/Setting/Footer';
+import SettingContainer from '@/features/Setting/SettingContainer';
 
 import Header from './Header';
 
 const Layout = ({ children }: PropsWithChildren) => (
   <>
     <Header />
-    <Flexbox
-      align={'center'}
-      height={'100%'}
-      style={{ overflowX: 'hidden', overflowY: 'auto' }}
-      width={'100%'}
-    >
-      <SafeSpacing height={HEADER_HEIGHT - 16} />
-      <Flexbox gap={64} style={{ maxWidth: 1024, padding: '32px 24px' }} width={'100%'}>
-        {children}
-      </Flexbox>
-    </Flexbox>
+    <SettingContainer addonAfter={<Footer />} addonBefore={<SafeSpacing height={HEADER_HEIGHT} />}>
+      {children}
+    </SettingContainer>
   </>
 );
 

public/videos/star.mp4

@@ -3,11 +3,15 @@
 import { PropsWithChildren } from 'react';
 
 import MobileContentLayout from '@/components/server/MobileNavLayout';
+import Footer from '@/features/Setting/Footer';
 
 import Header from './Header';
 
 const Layout = ({ children }: PropsWithChildren) => (
-  <MobileContentLayout header={<Header />}>{children}</MobileContentLayout>
+  <MobileContentLayout header={<Header />}>
+    {children}
+    <Footer />
+  </MobileContentLayout>
 );
 
 Layout.displayName = 'MobileSessionSettingsLayout';

src/app/(main)/chat/settings/_layout/Desktop/index.tsx

@@ -6,7 +6,8 @@ import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import Footer from '@/app/(main)/settings/features/Footer';
+import SettingContainer from '@/features/Setting//SettingContainer';
+import Footer from '@/features/Setting/Footer';
 import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
 import { SettingsTabs } from '@/store/global/initialState';
 
@@ -16,7 +17,7 @@ import SideBar from './SideBar';
 
 const Layout = memo<LayoutProps>(({ children, category }) => {
   const ref = useRef<any>(null);
-  const { md = true, mobile = false } = useResponsive();
+  const { md = true } = useResponsive();
   const { t } = useTranslation('setting');
   const activeKey = useActiveSettingsKey();
 
@@ -43,25 +44,7 @@ const Layout = memo<LayoutProps>(({ children, category }) => {
           {category}
         </Header>
       )}
-      <Flexbox
-        align={'center'}
-        height={'100%'}
-        paddingBlock={mobile ? undefined : 32}
-        style={{ overflowX: 'hidden', overflowY: 'auto' }}
-        width={'100%'}
-      >
-        <Flexbox
-          gap={64}
-          paddingInline={mobile ? undefined : 24}
-          style={{
-            maxWidth: 1024,
-          }}
-          width={'100%'}
-        >
-          {children}
-        </Flexbox>
-        <Footer />
-      </Flexbox>
+      <SettingContainer addonAfter={<Footer />}>{children}</SettingContainer>
     </Flexbox>
   );
 });

src/app/(main)/chat/settings/_layout/Mobile/index.tsx

@@ -1,5 +1,5 @@
-import Footer from '@/app/(main)/settings/features/Footer';
 import MobileContentLayout from '@/components/server/MobileNavLayout';
+import Footer from '@/features/Setting/Footer';
 
 import { LayoutProps } from '../type';
 import Header from './Header';

src/app/(main)/settings/_layout/Desktop/index.tsx

@@ -27,10 +27,9 @@ const Version = memo<{ mobile?: boolean }>(({ mobile }) => {
     <Flexbox
       align={'center'}
       gap={16}
-      horizontal
+      horizontal={!mobile}
       justify={'space-between'}
       width={'100%'}
-      wrap={'wrap'}
     >
       <Flexbox align={'center'} flex={'none'} gap={16} horizontal>
         <Link href={OFFICIAL_SITE} target={'_blank'}>

src/app/(main)/settings/_layout/Mobile/index.tsx

@@ -6,7 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import Header from '@/app/(main)/settings/_layout/Desktop/Header';
 import SideBar from '@/app/(main)/settings/_layout/Desktop/SideBar';
-import Footer from '@/app/(main)/settings/features/Footer';
+import Footer from '@/features/Setting/Footer';
 
 interface SettingLayoutProps {
   activeTitle?: ReactNode;

src/app/(main)/settings/about/features/Version.tsx

@@ -56,7 +56,4 @@ export const MEDIDUM = 'https://medium.com/@lobehub';
 export const X = 'https://x.com/lobehub';
 export const RELEASES_URL = urlJoin(GITHUB, 'releases');
 
-export const R2_CDN_URL = 'https://hub-apac-1.lobeobjects.space/';
-
-export const getR2Url = (filename: string) => urlJoin(R2_CDN_URL, filename);
 export const mailTo = (email: string) => `mailto:${email}`;

src/app/@modal/_layout/SettingModalLayout.tsx

@@ -10,7 +10,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import GuideModal from '@/components/GuideModal';
 import GuideVideo from '@/components/GuideVideo';
-import { GITHUB, GITHUB_ISSUES, getR2Url } from '@/const/url';
+import { GITHUB, GITHUB_ISSUES } from '@/const/url';
 import { isOnServerSide } from '@/utils/env';
 
 const useStyles = createStyles(
@@ -65,7 +65,7 @@ const Footer = memo<PropsWithChildren>(() => {
       </Flexbox>
       <GuideModal
         cancelText={t('footer.later')}
-        cover={<GuideVideo height={269} src={getR2Url('/assets/star.mp4')} width={358} />}
+        cover={<GuideVideo height={269} src={'/videos/star.mp4'} width={358} />}
         desc={t('footer.star.desc')}
         okText={t('footer.star.action')}
         onCancel={() => setOpenStar(false)}
@@ -78,7 +78,7 @@ const Footer = memo<PropsWithChildren>(() => {
       />
       <GuideModal
         cancelText={t('footer.later')}
-        cover={<GuideVideo height={269} src={getR2Url('/assets/feedback.mp4')} width={358} />}
+        cover={<GuideVideo height={269} src={'/videos/feedback.mp4'} width={358} />}
         desc={t('footer.feedback.desc')}
         okText={t('footer.feedback.action')}
         onCancel={() => setOpenFeedback(false)}

src/const/url.ts

@@ -0,0 +1,35 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { PropsWithChildren, ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const SettingContainer = memo<
+  PropsWithChildren<{ addonAfter?: ReactNode; addonBefore?: ReactNode }>
+>(({ children, addonAfter, addonBefore }) => {
+  const { mobile = false } = useResponsive();
+  return (
+    <Flexbox
+      align={'center'}
+      height={'100%'}
+      paddingBlock={mobile ? undefined : 32}
+      style={{ overflowX: 'hidden', overflowY: 'auto' }}
+      width={'100%'}
+    >
+      {addonBefore}
+      <Flexbox
+        gap={64}
+        paddingInline={mobile ? undefined : 24}
+        style={{
+          maxWidth: 1024,
+        }}
+        width={'100%'}
+      >
+        {children}
+      </Flexbox>
+      {addonAfter}
+    </Flexbox>
+  );
+});
+
+export default SettingContainer;