💄 style: Fix scroll layout and setting panel in mobile

src/features/Setting/Form/Footer.tsx

@@ -1,12 +1,14 @@
 import { Button, Popconfirm } from 'antd';
+import { useResponsive } from 'antd-style';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { DEFAULT_SETTING, useAppStore } from '@/store';
 
 const Footer = memo(() => {
   const { t } = useTranslation();
-
+  const { mobile } = useResponsive();
   const onSetSetting = useAppStore((st) => st.onSetSetting);
 
   const onReset = useCallback(() => {
@@ -15,7 +17,7 @@ const Footer = memo(() => {
   }, []);
 
   return (
-    <>
+    <Flexbox gap={16} horizontal={!mobile} style={mobile ? { padding: 16, width: '100%' } : {}}>
       <Popconfirm
         cancelText={t('cancel')}
         okText={t('confirm')}
@@ -23,14 +25,14 @@ const Footer = memo(() => {
         onConfirm={onReset}
         title={t('setting.button.reset')}
       >
-        <Button danger style={{ borderRadius: 4 }}>
+        <Button block={mobile} danger style={{ borderRadius: 4 }}>
           {t('setting.button.reset')}
         </Button>
       </Popconfirm>
-      <Button htmlType="submit" style={{ borderRadius: 4 }} type="primary">
+      <Button block={mobile} htmlType="submit" style={{ borderRadius: 4 }} type="primary">
         {t('setting.button.submit')}
       </Button>
-    </>
+    </Flexbox>
   );
 });
 export default Footer;

src/features/Setting/Sidebar/Mobile.tsx

@@ -0,0 +1,24 @@
+import { Segmented } from 'antd';
+import { memo } from 'react';
+
+import { SettingsTabs } from '@/features/Setting/Sidebar/index';
+import { useTabItems } from '@/features/Setting/Sidebar/useTabItems';
+
+interface SidebarProps {
+  setTab: (tab: SettingsTabs) => void;
+  tab: string;
+}
+
+const MobileSidebar = memo<SidebarProps>(({ tab, setTab }) => {
+  const items = useTabItems();
+  return (
+    <Segmented
+      block
+      onChange={setTab as any}
+      options={items.map(({ value, label }) => ({ label, value }))}
+      value={tab}
+    />
+  );
+});
+
+export default MobileSidebar;

src/features/Setting/Sidebar/index.tsx

@@ -1,8 +1,8 @@
-import { Brush, FlaskConical, Layout, PanelRight } from 'lucide-react';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useTabItems } from '@/features/Setting/Sidebar/useTabItems';
+
 import Item from './Item';
 
 export enum SettingsTabs {
@@ -18,14 +18,7 @@ interface SidebarProps {
 }
 
 const Sidebar = memo<SidebarProps>(({ tab, setTab }) => {
-  const { t } = useTranslation();
-
-  const items = [
-    { icon: Brush, label: t('setting.tab.appearance'), value: SettingsTabs.Appearance },
-    { icon: Layout, label: t('setting.tab.layout'), value: SettingsTabs.Layout },
-    { icon: PanelRight, label: t('setting.tab.sidebar'), value: SettingsTabs.Sidebar },
-    { icon: FlaskConical, label: t('setting.tab.experimental'), value: SettingsTabs.Experimental },
-  ];
+  const items = useTabItems();
 
   return (
     <Flexbox gap={4}>
@@ -43,3 +36,5 @@ const Sidebar = memo<SidebarProps>(({ tab, setTab }) => {
 });
 
 export default Sidebar;
+
+export { default as MobileSidebar } from './Mobile';

src/features/Setting/Sidebar/useTabItems.ts

@@ -0,0 +1,15 @@
+import { Brush, FlaskConical, Layout, PanelRight } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { SettingsTabs } from '@/features/Setting/Sidebar/index';
+
+export const useTabItems = () => {
+  const { t } = useTranslation();
+
+  return [
+    { icon: Brush, label: t('setting.tab.appearance'), value: SettingsTabs.Appearance },
+    { icon: Layout, label: t('setting.tab.layout'), value: SettingsTabs.Layout },
+    { icon: PanelRight, label: t('setting.tab.sidebar'), value: SettingsTabs.Sidebar },
+    { icon: FlaskConical, label: t('setting.tab.experimental'), value: SettingsTabs.Experimental },
+  ];
+};

src/features/Setting/index.tsx

@@ -1,4 +1,5 @@
 import { ActionIcon, Modal, type ModalProps } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
 import { Book } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,7 +12,7 @@ import FormAppearance from './Form/Appearance';
 import FormExperimental from './Form/Experimental';
 import FormLayout from './Form/Layout';
 import FormSidebar from './Form/Sidebar';
-import Sidebar, { SettingsTabs } from './Sidebar';
+import Sidebar, { MobileSidebar, SettingsTabs } from './Sidebar';
 
 export interface SettingProps {
   onCancel?: ModalProps['onCancel'];
@@ -20,7 +21,18 @@ export interface SettingProps {
 
 const Setting = memo<SettingProps>(({ open, onCancel }) => {
   const [tab, setTab] = useState<SettingsTabs>(SettingsTabs.Appearance);
+  const { mobile } = useResponsive();
   const { t } = useTranslation();
+
+  const content = (
+    <>
+      {tab === SettingsTabs.Appearance && <FormAppearance />}
+      {tab === SettingsTabs.Layout && <FormLayout />}
+      {tab === SettingsTabs.Sidebar && <FormSidebar />}
+      {tab === SettingsTabs.Experimental && <FormExperimental />}
+    </>
+  );
+
   return (
     <Modal
       footer={false}
@@ -40,13 +52,19 @@ const Setting = memo<SettingProps>(({ open, onCancel }) => {
       }
       width={960}
     >
+      {mobile ? (
+        <Flexbox>
+          <div style={{ padding: 16 }}>
+            <MobileSidebar setTab={setTab} tab={tab} />
+          </div>
+          {content}
+        </Flexbox>
+      ) : (
         <Flexbox gap={16} horizontal>
           <Sidebar setTab={setTab} tab={tab} />
-        {tab === SettingsTabs.Appearance && <FormAppearance />}
-        {tab === SettingsTabs.Layout && <FormLayout />}
-        {tab === SettingsTabs.Sidebar && <FormSidebar />}
-        {tab === SettingsTabs.Experimental && <FormExperimental />}
+          {content}
         </Flexbox>
+      )}
     </Modal>
   );
 });

src/styles/components/container.ts

@@ -3,6 +3,10 @@ import { readableColor } from 'polished';
 
 export default (token: Theme) => {
   return css`
+    body {
+      height: 100vh !important;
+    }
+
     .gradio-group,
     .gradio-row {
       gap: 12px !important;