💄 style: Add new components, modify display properties, and update settings feature

This commit introduces new components, modifies display properties, and updates the settings feature. It also includes changes to translations and styling. Additionally, a condition is added to check if the app is a progressive web app before rendering a specific component.

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "background_color": "#000000",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
-  "display": "fullscreen",
+  "display": "standalone",
   "icons": [
     {
       "src": "/icons/icon-192x192.png",

src/app/chat/features/SessionListContent/Inbox/index.tsx

@@ -37,6 +37,7 @@ const Inbox = memo(() => {
 
   return (
     <Link
+      aria-label={INBOX_SESSION_ID}
       href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
       onClick={(e) => {
         e.preventDefault();

src/app/chat/features/SessionListContent/List/index.tsx

@@ -24,6 +24,7 @@ const SessionList = memo(() => {
   ) : list.length > 0 ? (
     list.map(({ id }) => (
       <Link
+        aria-label={id}
         href={SESSION_CHAT_URL(id, mobile)}
         key={id}
         onClick={(e) => {

src/app/market/(desktop)/features/Header.tsx

@@ -22,7 +22,7 @@ const Header = memo(() => {
   return (
     <ChatHeader
       left={
-        <Link href={'/'}>
+        <Link aria-label={'home'} href={'/'}>
           <Logo className={styles.logo} extra={'Discover'} size={36} type={'text'} />
         </Link>
       }

src/app/market/features/AgentCard/AgentCardBanner.tsx

@@ -50,6 +50,7 @@ const AgentCardBanner = memo<AgentCardBannerProps>(
         {...props}
       >
         <Avatar
+          alt={'banner'}
           avatar={meta.avatar}
           background={meta.backgroundColor || theme.colorBgContainer}
           className={styles.bannerImg}

src/app/market/features/AgentDetailContent/AgentInfo/Header.tsx

@@ -47,7 +47,7 @@ const Header = memo(() => {
         ))}
       </Center>
       <div className={styles.desc}>{description}</div>
-      <Link className={styles.author} href={homepage} target={'_blank'}>
+      <Link aria-label={author} className={styles.author} href={homepage} target={'_blank'}>
         @{author}
       </Link>
       <Button

src/app/settings/common/index.tsx

@@ -4,20 +4,24 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PageTitle from '@/components/PageTitle';
+import { CURRENT_VERSION } from '@/const/version';
 import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
 import { SettingsTabs } from '@/store/global/initialState';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
+import Footer from '../features/Footer';
 import Common from './Common';
 
 export default memo(() => {
   useSwitchSideBarOnInit(SettingsTabs.Common);
   const { t } = useTranslation('setting');
   const pageTitle = genSiteHeadTitle(t('tab.common'));
+
   return (
     <>
       <PageTitle title={pageTitle} />
       <Common />
+      <Footer>LobeChat v{CURRENT_VERSION}</Footer>
     </>
   );
 });

src/app/settings/features/Footer.tsx

@@ -0,0 +1,24 @@
+import { Divider } from 'antd';
+import { createStyles } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    font-size: 14px;
+    color: ${token.colorTextDescription};
+  `,
+);
+
+const Footer = memo<PropsWithChildren>(({ children }) => {
+  const { styles } = useStyles();
+  return (
+    <Center style={{ maxWidth: 600, width: ' 100%' }}>
+      <Divider>
+        <span className={styles}>{children}</span>
+      </Divider>
+    </Center>
+  );
+});
+
+export default Footer;

src/app/settings/features/SideBar/List.tsx

@@ -22,6 +22,7 @@ const List = memo(() => {
 
   return items.map(({ value, icon, label }) => (
     <Link
+      aria-label={label}
       href={`/settings/${value}`}
       key={value}
       onClick={() => {

src/app/settings/features/SideBar/index.tsx

@@ -27,7 +27,7 @@ const SideBar = memo(() => {
       <DraggablePanelBody className={styles.body} style={{ padding: 0 }}>
         <Flexbox className={styles.top} padding={16}>
           <div>
-            <Logo className={styles.logo} size={36} type={'text'} />
+            <Logo className={styles.logo} extra={'Settings'} size={36} type={'text'} />
           </div>
         </Flexbox>
         <UpgradeAlert />

src/app/settings/features/UpgradeAlert.tsx

@@ -14,7 +14,7 @@ const UpgradeAlert = memo(() => {
     hasNewVersion && (
       <Alert
         action={
-          <Link href={MANUAL_UPGRADE_URL} target={'_blank'}>
+          <Link aria-label={t('upgradeVersion.action')} href={MANUAL_UPGRADE_URL} target={'_blank'}>
             <Button size={'small'} type={'primary'}>
               {t('upgradeVersion.action')}
             </Button>

src/app/settings/llm/LLM/index.tsx

@@ -3,10 +3,8 @@ import { Form as AntForm, AutoComplete, Input, Switch } from 'antd';
 import { createStyles } from 'antd-style';
 import { debounce } from 'lodash-es';
 import { Webhook } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
+import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { settingsSelectors, useEffectAfterGlobalHydrated, useGlobalStore } from '@/store/global';
@@ -24,9 +22,6 @@ const useStyles = createStyles(({ css, token }) => ({
       color: ${token.colorTextDescription} !important;
     }
   `,
-  plan: css`
-    color: ${token.colorTextDescription};
-  `,
   tip: css`
     font-size: 12px;
     color: ${token.colorTextDescription};
@@ -139,25 +134,12 @@ const LLM = memo(() => {
   };
 
   return (
-    <Flexbox align={'center'} gap={24} width={'100%'}>
-      <Form
-        form={form}
-        items={[openAI]}
-        onValuesChange={debounce(setSettings, 100)}
-        {...FORM_STYLE}
-      />
-      <Flexbox align={'center'} className={styles.plan}>
-        <div>
-          <Trans i18nKey="llm.waitingForMore" ns={'setting'}>
-            更多模型正在
-            <Link href="https://github.com/lobehub/lobe-chat/issues/151" target="_blank">
-              计划接入
-            </Link>
-            中 ，敬请期待 ✨
-          </Trans>
-        </div>
-      </Flexbox>
-    </Flexbox>
+    <Form
+      form={form}
+      items={[openAI]}
+      onValuesChange={debounce(setSettings, 100)}
+      {...FORM_STYLE}
+    />
   );
 });
 

src/app/settings/llm/index.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import Link from 'next/link';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
+import Footer from '@/app/settings/features/Footer';
 import PageTitle from '@/components/PageTitle';
 import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
 import { SettingsTabs } from '@/store/global/initialState';
@@ -18,6 +20,19 @@ export default memo(() => {
     <>
       <PageTitle title={pageTitle} />
       <LLM />
+      <Footer>
+        <Trans i18nKey="llm.waitingForMore" ns={'setting'}>
+          更多模型正在
+          <Link
+            aria-label={'todo'}
+            href="https://github.com/lobehub/lobe-chat/issues/151"
+            target="_blank"
+          >
+            计划接入
+          </Link>
+          中 ，敬请期待 ✨
+        </Trans>
+      </Footer>
     </>
   );
 });

src/layout/AppLayout.mobile.tsx

@@ -5,6 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import MobileTabBar from '@/features/MobileTabBar';
+import { useIsPWA } from '@/hooks/useIsPWA';
 
 const useStyles = createStyles(({ css, cx, stylish }) => ({
   container: cx(
@@ -45,6 +46,7 @@ interface AppMobileLayoutProps extends PropsWithChildren {
 
 const AppLayoutMobile = memo<AppMobileLayoutProps>(
   ({ children, showTabBar, navBar, style, className }) => {
+    const isPWA = useIsPWA();
     const { styles, cx } = useStyles();
 
     return (
@@ -62,7 +64,7 @@ const AppLayoutMobile = memo<AppMobileLayoutProps>(
             <MobileTabBar className={styles.mobileTabBar} />
           </>
         )}
-        <SafeSpacing mobile position={'bottom'} />
+        {!isPWA && <SafeSpacing mobile position={'bottom'} />}
       </Flexbox>
     );
   },