💄 style: Update style

package.json

@@ -68,6 +68,7 @@
   },
   "dependencies": {
     "@bluelovers/auto1111-pnginfo": "^2.0.2",
+    "@icons-pack/react-simple-icons": "^9.5.0",
     "@lobehub/ui": "^1.138.24",
     "@rollup/rollup-win32-x64-msvc": "^4.17.2",
     "ahooks": "^3.7.11",

src/components/Logo/index.tsx

@@ -2,6 +2,7 @@ import { Logo as LobeLogo } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { type CSSProperties, memo } from 'react';
 
+import { GITHUB_REPO_URL } from '@/const/url';
 import { selectors, useAppStore } from '@/store';
 
 import CustomLogo from './CustomLogo';
@@ -31,7 +32,23 @@ const Logo = memo<LogoProps>(({ size = 32, style }) => {
     );
   }
 
-  return <LobeLogo extra="SD" size={size} style={style} type="combine" />;
+  return (
+    <LobeLogo
+      extra={
+        <a
+          href={GITHUB_REPO_URL}
+          rel="noreferrer"
+          style={{ color: 'inherit', fontWeight: 400 }}
+          target="_blank"
+        >
+          SD
+        </a>
+      }
+      size={size}
+      style={style}
+      type="combine"
+    />
+  );
 });
 
 export default Logo;

src/const/url.ts

@@ -13,3 +13,5 @@ export const SITE_URL = location.origin;
 export const EMAIL_SUPPORT = 'support@lobehub.com';
 export const EMAIL_BUSINESS = 'hello@lobehub.com';
 export const X = 'https://x.com/lobehub';
+export const MEDIDUM_URL = 'https://medium.com/@lobehub';
+export const STATUS_URL = 'https://status.lobehub.com';

src/features/Footer/Brand.tsx

@@ -0,0 +1,59 @@
+import { Logo } from '@lobehub/ui';
+import { createStyles, useThemeMode } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { OFFICIAL_SITE, STATUS_URL } from '@/const/url';
+
+import Follow from './Follow';
+
+export const COPYRIGHT = `© 2023-${new Date().getFullYear()} LobeHub, LLC`;
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    container: css`
+      font-size: 14px;
+    `,
+    description: css`
+      color: ${token.colorTextDescription};
+    `,
+    logo: css`
+      display: flex;
+      flex: none;
+      align-items: center;
+      color: inherit !important;
+    `,
+    status: css`
+      color-scheme: none;
+      background: transparent;
+      border: none !important;
+    `,
+  };
+});
+
+const Brand = memo(() => {
+  const { styles } = useStyles();
+  const { isDarkMode } = useThemeMode();
+
+  return (
+    <Flexbox className={styles.container} gap={16}>
+      <a className={styles.logo} href={OFFICIAL_SITE}>
+        <Logo type={'combine'} />
+      </a>
+      <div>Empowering your AI dreams</div>
+      <div className={styles.description}>{COPYRIGHT}</div>
+      <Follow />
+      <iframe
+        className={styles.status}
+        height="30"
+        loading={'lazy'}
+        scrolling="no"
+        src={urlJoin(STATUS_URL, `badge?theme=${isDarkMode ? 'dark' : 'light'}`)}
+        width="250"
+      />
+    </Flexbox>
+  );
+});
+
+export default Brand;

src/features/Footer/Follow.tsx

@@ -0,0 +1,59 @@
+import { SiDiscord, SiGithub, SiMedium, SiX } from '@icons-pack/react-simple-icons';
+import { ActionIcon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { DISCORD_URL, GITHUB_REPO_URL, MEDIDUM_URL, X } from '@/const/url';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    icon: css`
+      svg {
+        fill: ${token.colorTextDescription};
+      }
+
+      &:hover {
+        svg {
+          fill: ${token.colorText};
+        }
+      }
+    `,
+  };
+});
+
+const Follow = memo(() => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('common');
+  return (
+    <Flexbox gap={8} horizontal>
+      <a href={GITHUB_REPO_URL} rel="noreferrer" target={'_blank'}>
+        <ActionIcon
+          className={styles.icon}
+          icon={SiGithub as any}
+          title={t('follow', { name: 'GitHub' })}
+        />
+      </a>
+      <a href={X} rel="noreferrer" target={'_blank'}>
+        <ActionIcon className={styles.icon} icon={SiX as any} title={t('follow', { name: 'X' })} />
+      </a>
+      <a href={DISCORD_URL} rel="noreferrer" target={'_blank'}>
+        <ActionIcon
+          className={styles.icon}
+          icon={SiDiscord as any}
+          title={t('follow', { name: 'Discord' })}
+        />
+      </a>
+      <a href={MEDIDUM_URL} rel="noreferrer" target={'_blank'}>
+        <ActionIcon
+          className={styles.icon}
+          icon={SiMedium as any}
+          title={t('follow', { name: 'Medium' })}
+        />
+      </a>
+    </Flexbox>
+  );
+});
+
+export default Follow;

src/features/Footer/data.tsx

@@ -37,6 +37,18 @@ export const Resources = [
 ];
 
 export const Community = [
+  {
+    icon: <Icon icon={Github} size="small" />,
+    openExternal: true,
+    title: 'GitHub',
+    url: GITHUB_REPO_URL,
+  },
+  {
+    icon: <Icon icon={FileClock} size="small" />,
+    openExternal: true,
+    title: 'Changelog',
+    url: `${GITHUB_REPO_URL}/blob/main/CHANGELOG.md`,
+  },
   {
     icon: <Icon icon={Heart} size="small" />,
     openExternal: true,
@@ -57,21 +69,6 @@ export const Community = [
   },
 ];
 
-export const Help = [
-  {
-    icon: <Icon icon={Github} size="small" />,
-    openExternal: true,
-    title: 'GitHub',
-    url: GITHUB_REPO_URL,
-  },
-  {
-    icon: <Icon icon={FileClock} size="small" />,
-    openExternal: true,
-    title: 'Changelog',
-    url: `${GITHUB_REPO_URL}/blob/main/CHANGELOG.md`,
-  },
-];
-
 export const MoreProducts = [
   {
     description: 'Stable Diffusion Extension',

src/features/Footer/index.tsx

@@ -7,7 +7,8 @@ import { useInject } from '@/hooks/useInject';
 import { selectors, useAppStore } from '@/store';
 import { type DivProps } from '@/types';
 
-import { Community, Help, MoreProducts, Resources } from './data';
+import Brand from './Brand';
+import { Community, MoreProducts, Resources } from './data';
 import { useStyles } from './style';
 
 const Footer = memo<DivProps>(({ className, ...props }) => {
@@ -37,6 +38,9 @@ const Footer = memo<DivProps>(({ className, ...props }) => {
           setting.layoutHideFooter ?
             [] :
             [
+                {
+                  title: <Brand />,
+                },
                 {
                   items: Resources,
                   title: t('footer.resources'),
@@ -45,16 +49,13 @@ const Footer = memo<DivProps>(({ className, ...props }) => {
                   items: Community,
                   title: t('footer.community'),
                 },
-                {
-                  items: Help,
-                  title: t('footer.help'),
-                },
                 {
                   items: MoreProducts,
                   title: t('footer.moreProducts'),
                 },
               ]
         }
+        contentMaxWidth={1280}
       />
     </div>
   );

src/features/Header/index.tsx

@@ -3,7 +3,7 @@ import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { Logo } from '@/components';
-import { GITHUB_REPO_URL } from '@/const/url';
+import { OFFICIAL_SITE } from '@/const/url';
 import { useAppStore } from '@/store';
 import { type DivProps } from '@/types';
 
@@ -23,7 +23,7 @@ const Header = memo<DivProps>(({ children }) => {
       actionsStyle={{ flex: 0 }}
       logo={
         <a
-          href={`${GITHUB_REPO_URL}/releases`}
+          href={OFFICIAL_SITE}
           rel="noreferrer"
           style={{ alignItems: 'center', color: theme.colorText, display: 'flex' }}
           target="_blank"

src/features/Setting/Sidebar/index.tsx

@@ -25,7 +25,7 @@ const Sidebar = memo<SidebarProps>(({ tab, setTab }) => {
   return (
     <SidebarLayout
       desc={
-        <Flexbox align={'center'} gap={4} horizontal>
+        <Flexbox align={'center'} gap={8} horizontal wrap={'wrap'}>
           {t('modal.themeSetting.desc')}
           <VersionTag />
         </Flexbox>