(null);
- useEffect(() => {
- console.time('🤯 [layout] inject - Footer');
- const footer = gradioApp().querySelector('#footer');
- if (footer) footerReference.current?.append(footer);
- if (setting.confirmPageUnload) {
- window.addEventListener('beforeunload', (event) => {
- if (footer?.isConnected) {
- event.preventDefault();
- return (event.returnValue = '');
+ useEffect(() => {
+ try {
+ const footer = gradioApp().querySelector('#footer');
+ if (footer) footerReference.current?.append(footer);
+ if (setting.confirmPageUnload) {
+ window.addEventListener('beforeunload', (event) => {
+ if (footer?.isConnected) {
+ event.preventDefault();
+ return (event.returnValue = '');
+ }
+ });
+ }
+ consola.success('🤯 [layout] inject - Footer');
+ } catch (error) {
+ consola.error('🤯 [layout] inject - Footer', error);
}
- });
- }
- console.timeEnd('🤯 [layout] inject - Footer');
- }, []);
- return (
-
- }
- columns={
- setting.layoutHideFooter ?
- [] :
- [
- {
- items: Resources,
- title: t('resources'),
- },
- {
- items: Community,
- title: t('community'),
- },
- {
- items: Help,
- title: t('help'),
- },
- {
- items: MoreProducts,
- title: t('moreProducts'),
- },
- ]
- }
- />
-
- );
+ }, []);
+ return (
+
+ }
+ columns={
+ setting.layoutHideFooter ?
+ [] :
+ [
+ {
+ items: Resources,
+ title: t('footer.resources'),
+ },
+ {
+ items: Community,
+ title: t('footer.community'),
+ },
+ {
+ items: Help,
+ title: t('footer.help'),
+ },
+ {
+ items: MoreProducts,
+ title: t('footer.moreProducts'),
+ },
+ ]
+ }
+ />
+
+ );
});
export default Footer;
diff --git a/src/features/Footer/style.ts b/src/features/Footer/style.ts
index ad8a24f..4e41932 100644
--- a/src/features/Footer/style.ts
+++ b/src/features/Footer/style.ts
@@ -1,7 +1,7 @@
import { createStyles } from 'antd-style';
export const useStyles = createStyles(({ css }) => ({
- footer: css`
+ footer: css`
footer {
display: block !important;
}
diff --git a/src/features/Header/Actions.tsx b/src/features/Header/Actions.tsx
index ca7c6dc..0e1ebdd 100644
--- a/src/features/Header/Actions.tsx
+++ b/src/features/Header/Actions.tsx
@@ -5,16 +5,15 @@ import { Github, LayoutGrid, LucideIcon, Moon, Settings, Sun } from 'lucide-reac
import qs from 'query-string';
import { memo, useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { shallow } from 'zustand/shallow';
import { Giscus } from '@/components';
import Setting from '@/features/Setting';
import { selectors, useAppStore } from '@/store';
const CivitaiLogo: LucideIcon | any = ({ size }: any) => (
-
+
);
interface ActionsProps {
@@ -22,48 +21,56 @@ interface ActionsProps {
}
const Actions = memo(() => {
- const [isSettingOpen, setIsSettingOpen] = useState(false);
- const [isModalOpen, setIsModalOpen] = useState(false);
- const themeMode = useAppStore(selectors.themeMode, shallow);
- const { mobile } = useResponsive();
- const { t } = useTranslation();
+ const [isSettingOpen, setIsSettingOpen] = useState(false);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const themeMode = useAppStore(selectors.themeMode);
+ const { mobile } = useResponsive();
+ const { t } = useTranslation();
- const handleSetTheme = useCallback(() => {
- const theme = themeMode === 'light' ? 'dark' : 'light';
- const gradioURL = qs.parseUrl(window.location.href);
- gradioURL.query.__theme = theme;
- window.location.replace(qs.stringifyUrl(gradioURL));
- }, [themeMode]);
+ const handleSetTheme = useCallback(() => {
+ const theme = themeMode === 'light' ? 'dark' : 'light';
+ const gradioURL = qs.parseUrl(window.location.href);
+ gradioURL.query.__theme = theme;
+ window.location.replace(qs.stringifyUrl(gradioURL));
+ }, [themeMode]);
- return (
- <>
-
- {!mobile && (
- <>
-
-
-
-
-
-
- setIsModalOpen(true)} title={t('feedback')} />
-
- )}
-
- setIsSettingOpen(true)} title={t('setting')} />
-
- setIsSettingOpen(false)} open={isSettingOpen} />
- setIsModalOpen(false)} open={isModalOpen} />
-
- );
+ return (
+ <>
+
+ {!mobile && (
+ <>
+
+
+
+
+
+
+ setIsModalOpen(true)}
+ title={t('header.feedback')}
+ />
+
+ )}
+
+ setIsSettingOpen(true)}
+ title={t('header.setting')}
+ />
+
+ setIsSettingOpen(false)} open={isSettingOpen} />
+ setIsModalOpen(false)} open={isModalOpen} />
+
+ );
});
export default Actions;
diff --git a/src/features/Header/Nav.tsx b/src/features/Header/Nav.tsx
index f8cabcb..d873a46 100644
--- a/src/features/Header/Nav.tsx
+++ b/src/features/Header/Nav.tsx
@@ -1,26 +1,26 @@
import { Burger, TabsNav, type TabsNavProps } from '@lobehub/ui';
import { useResponsive } from 'antd-style';
+import { consola } from 'consola';
import { startCase } from 'lodash-es';
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { shallow } from 'zustand/shallow';
import { selectors, useAppStore } from '@/store';
const hideOriganlNav = () => {
- (gradioApp().querySelector('#tabs > .tab-nav:first-of-type') as HTMLDivElement).style.display =
+ (gradioApp().querySelector('#tabs > .tab-nav:first-of-type') as HTMLDivElement).style.display =
'none';
};
const getNavTabs = (): HTMLDivElement[] =>
- Array.prototype.slice.call(
+ Array.prototype.slice.call(
gradioApp().querySelectorAll('#tabs > [id^="tab_"]') as NodeListOf,
- );
+ );
const getNavButtons = (): HTMLButtonElement[] =>
- Array.prototype.slice.call(
+ Array.prototype.slice.call(
gradioApp().querySelectorAll(
- '#tabs > .tab-nav:first-of-type button',
+ '#tabs > .tab-nav:first-of-type button',
) as NodeListOf,
- );
+ );
interface NavItem {
id: string;
@@ -28,53 +28,56 @@ interface NavItem {
label: string;
}
const genNavList = (): NavItem[] => {
- console.debug('🤯 [nav] generate nav list');
- const navList = getNavTabs();
- const buttons = getNavButtons();
- return buttons.map((button, index) => {
- const id = navList[index].id;
- return {
- id,
- index,
- label: startCase(String(button.textContent)),
- };
- });
+ const navList = getNavTabs();
+ const buttons = getNavButtons();
+ consola.debug('🤯 [nav] generate nav list');
+ return buttons.map((button, index) => {
+ const id = navList[index].id;
+ return {
+ id,
+ index,
+ label: startCase(String(button.textContent)),
+ };
+ });
};
const Nav = memo(() => {
- const currentTab = useAppStore(selectors.currentTab, shallow);
- const { mobile } = useResponsive();
- const [opened, setOpened] = useState(false);
- const [items, setItems] = useState([]);
+ const currentTab = useAppStore(selectors.currentTab);
+ const { mobile } = useResponsive();
+ const [opened, setOpened] = useState(false);
+ const [items, setItems] = useState([]);
- const navList = useMemo(() => genNavList(), []);
+ const navList = useMemo(() => genNavList(), []);
- const onChange: TabsNavProps['onChange'] = useCallback(
- (id: string) => {
- console.debug('🤯 [nav] onClick', id);
- const index = navList.find((nav) => nav.id === id)?.index || 0;
- const buttonList = getNavButtons();
- buttonList[index].click();
- },
- [navList],
- );
+ const onChange: TabsNavProps['onChange'] = useCallback(
+ (id: string) => {
+ consola.debug('🤯 [nav] onClick', id);
+ const index = navList.find((nav) => nav.id === id)?.index || 0;
+ const buttonList = getNavButtons();
+ buttonList[index].click();
+ },
+ [navList],
+ );
- useEffect(() => {
- console.time('🤯 [layout] inject - Header');
- hideOriganlNav();
- const list: TabsNavProps['items'] = navList.map((item) => {
- return {
- key: item.id,
- label: mobile ? onChange(item.id)}>{item.label}
: item.label,
- };
- });
- setItems(list.filter(Boolean));
- console.timeEnd('🤯 [layout] inject - Header');
- }, [mobile]);
+ useEffect(() => {
+ try {
+ hideOriganlNav();
+ const list: TabsNavProps['items'] = navList.map((item) => {
+ return {
+ key: item.id,
+ label: mobile ? onChange(item.id)}>{item.label}
: item.label,
+ };
+ });
+ setItems(list.filter(Boolean));
+ consola.success('🤯 [layout] inject - Header');
+ } catch (error) {
+ consola.error('🤯 [layout] inject - Header', error);
+ }
+ }, [mobile]);
- if (mobile) return ;
+ if (mobile) return ;
- return ;
+ return ;
});
export default Nav;
diff --git a/src/features/Header/index.tsx b/src/features/Header/index.tsx
index b44270c..2d5875b 100644
--- a/src/features/Header/index.tsx
+++ b/src/features/Header/index.tsx
@@ -12,36 +12,36 @@ import Actions from './Actions';
import Nav from './Nav';
const Header = memo(({ children }) => {
- const { themeMode, version } = useAppStore(
- (st) => ({ themeMode: st.themeMode, version: st.version }),
- shallow,
- );
- const theme = useTheme();
+ const { themeMode, version } = useAppStore(
+ (st) => ({ themeMode: st.themeMode, version: st.version }),
+ shallow,
+ );
+ const theme = useTheme();
- return (
- }
- actionsStyle={{ flex: 0 }}
- logo={
-
-
-
-
-
- }
- nav={
- <>
-
- {children}
-
- }
- />
- );
+ return (
+ }
+ actionsStyle={{ flex: 0 }}
+ logo={
+
+
+
+
+
+ }
+ nav={
+ <>
+
+ {children}
+
+ }
+ />
+ );
});
export default Header;
diff --git a/src/features/QuickSettingSidebar/Inner.tsx b/src/features/QuickSettingSidebar/Inner.tsx
index 098c87e..94892d9 100644
--- a/src/features/QuickSettingSidebar/Inner.tsx
+++ b/src/features/QuickSettingSidebar/Inner.tsx
@@ -1,4 +1,5 @@
import { DraggablePanelBody } from '@lobehub/ui';
+import { consola } from 'consola';
import isEqual from 'fast-deep-equal';
import { memo, useEffect, useRef } from 'react';
@@ -7,22 +8,21 @@ import { selectors, useAppStore } from '@/store';
import { type DivProps } from '@/types';
const Inner = memo(() => {
- const setting = useAppStore(selectors.currentSetting, isEqual);
- const sidebarReference = useRef(null);
+ const setting = useAppStore(selectors.currentSetting, isEqual);
+ const sidebarReference = useRef(null);
- useEffect(() => {
- console.time('🤯 [layout] inject - QuickSettingSidebar');
- const sidebar = gradioApp().querySelector('#quicksettings');
- if (sidebar) sidebarReference.current?.append(sidebar);
- console.timeEnd('🤯 [layout] inject - QuickSettingSidebar');
- }, []);
+ useEffect(() => {
+ const sidebar = gradioApp().querySelector('#quicksettings');
+ if (sidebar) sidebarReference.current?.append(sidebar);
+ consola.success('🤯 [layout] inject - QuickSettingSidebar');
+ }, []);
- return (
-
- {setting.promptEditor && }
-
-
- );
+ return (
+
+ {setting.promptEditor && }
+
+
+ );
});
export default Inner;
diff --git a/src/features/QuickSettingSidebar/index.tsx b/src/features/QuickSettingSidebar/index.tsx
index a635da2..afb1864 100644
--- a/src/features/QuickSettingSidebar/index.tsx
+++ b/src/features/QuickSettingSidebar/index.tsx
@@ -1,9 +1,9 @@
import {
- type DivProps,
- DraggablePanel,
- DraggablePanelContainer,
- DraggablePanelHeader,
- LayoutSidebarInner,
+ type DivProps,
+ DraggablePanel,
+ DraggablePanelContainer,
+ DraggablePanelHeader,
+ LayoutSidebarInner,
} from '@lobehub/ui';
import { useResponsive } from 'antd-style';
import isEqual from 'fast-deep-equal';
@@ -20,56 +20,56 @@ export interface QuickSettingSidebarProps extends DivProps {
}
const QuickSettingSidebar = memo(({ headerHeight }) => {
- const { mobile } = useResponsive();
- const setting = useAppStore(selectors.currentSetting, isEqual);
- const [expand, setExpand] = useState(mobile ? false : setting.sidebarExpand);
- const [pin, setPin] = useState(setting.sidebarFixedMode === 'fixed');
- const [width, setWidth] = useState(setting.sidebarWidth);
- const { styles, theme } = useStyles({ headerHeight, width });
- const { t } = useTranslation();
+ const { mobile } = useResponsive();
+ const setting = useAppStore(selectors.currentSetting, isEqual);
+ const [expand, setExpand] = useState(mobile ? false : setting.sidebarExpand);
+ const [pin, setPin] = useState(setting.sidebarFixedMode === 'fixed');
+ const [width, setWidth] = useState(setting.sidebarWidth);
+ const { styles, theme } = useStyles({ headerHeight, width });
+ const { t } = useTranslation();
- useEffect(() => {
- if (mobile) setExpand(false);
- }, [mobile]);
+ useEffect(() => {
+ if (mobile) setExpand(false);
+ }, [mobile]);
- const mode = mobile ? 'fixed' : pin ? 'fixed' : 'float';
+ const mode = mobile ? 'fixed' : pin ? 'fixed' : 'float';
- return (
- size?.width && setWidth(Number.parseInt(String(size.width)))}
- pin={pin}
- placement="left"
- style={{
- display: 'flex',
- flexDirection: 'column',
- }}
- >
-
-
- size?.width && setWidth(Number.parseInt(String(size.width)))}
pin={pin}
- position="left"
- setExpand={setExpand}
- setPin={setPin}
- title={t('quickSetting')}
- />
-
-
-
-
- );
+ placement="left"
+ style={{
+ display: 'flex',
+ flexDirection: 'column',
+ }}
+ >
+
+
+
+
+
+
+
+ );
});
export default QuickSettingSidebar;
diff --git a/src/features/QuickSettingSidebar/style.ts b/src/features/QuickSettingSidebar/style.ts
index 3362678..c38a789 100644
--- a/src/features/QuickSettingSidebar/style.ts
+++ b/src/features/QuickSettingSidebar/style.ts
@@ -1,8 +1,8 @@
import { createStyles } from 'antd-style';
export const useStyles = createStyles(
- ({ css }, { headerHeight = 64, width }: { headerHeight?: number; width: number }) => ({
- container: css`
+ ({ css }, { headerHeight = 64, width }: { headerHeight?: number; width: number }) => ({
+ container: css`
height: calc(100vh - ${headerHeight}px);
ul.options {
@@ -68,5 +68,5 @@ export const useStyles = createStyles(
}
}
`,
- }),
+ }),
);
diff --git a/src/features/Setting/SettingForm.tsx b/src/features/Setting/SettingForm.tsx
index 553b208..3c5b3c5 100644
--- a/src/features/Setting/SettingForm.tsx
+++ b/src/features/Setting/SettingForm.tsx
@@ -8,21 +8,21 @@ import { shallow } from 'zustand/shallow';
import { CustomLogo } from '@/components';
import {
- DEFAULT_SETTING,
- type WebuiSetting,
- type WebuiSettingKeys,
- selectors,
- useAppStore,
+ DEFAULT_SETTING,
+ type WebuiSetting,
+ type WebuiSettingKeys,
+ selectors,
+ useAppStore,
} from '@/store';
import {
- type NeutralColor,
- type PrimaryColor,
- findCustomThemeName,
- neutralColors,
- neutralColorsSwatches,
- primaryColors,
- primaryColorsSwatches,
+ type NeutralColor,
+ type PrimaryColor,
+ findCustomThemeName,
+ neutralColors,
+ neutralColorsSwatches,
+ primaryColors,
+ primaryColorsSwatches,
} from './data';
import { useStyles } from './style';
@@ -33,353 +33,353 @@ type SettingItemGroup = ItemGroup & {
};
const SettingForm = memo(() => {
- const setting = useAppStore(selectors.currentSetting, isEqual);
- const { onSetSetting, localeOptions } = useAppStore(
- (st) => ({ localeOptions: st.localeOptions, onSetSetting: st.onSetSetting }),
- shallow,
- );
- const [rawSetting, setRawSetting] = useState(setting);
- const [primaryColor, setPrimaryColor] = useState(
- setting.primaryColor || undefined,
- );
- const [neutralColor, setNeutralColor] = useState(
- setting.neutralColor || undefined,
- );
- const { styles } = useStyles();
- const { t } = useTranslation();
+ const setting = useAppStore(selectors.currentSetting, isEqual);
+ const { onSetSetting, localeOptions } = useAppStore(
+ (st) => ({ localeOptions: st.localeOptions, onSetSetting: st.onSetSetting }),
+ shallow,
+ );
+ const [rawSetting, setRawSetting] = useState(setting);
+ const [primaryColor, setPrimaryColor] = useState(
+ setting.primaryColor || undefined,
+ );
+ const [neutralColor, setNeutralColor] = useState(
+ setting.neutralColor || undefined,
+ );
+ const { styles } = useStyles();
+ const { t } = useTranslation();
- const onReset = useCallback(() => {
- onSetSetting(DEFAULT_SETTING);
- location.reload();
- }, []);
+ const onReset = useCallback(() => {
+ onSetSetting(DEFAULT_SETTING);
+ location.reload();
+ }, []);
- const onFinish = useCallback(
- (value: WebuiSetting) => {
- onSetSetting({ ...value, neutralColor, primaryColor });
- location.reload();
- },
- [primaryColor, neutralColor],
- );
+ const onFinish = useCallback(
+ (value: WebuiSetting) => {
+ onSetSetting({ ...value, neutralColor, primaryColor });
+ location.reload();
+ },
+ [primaryColor, neutralColor],
+ );
- const theme: SettingItemGroup = useMemo(
- () => ({
- children: [
- {
- children: ,
- desc: t('settingLanguageDesc'),
- label: t('settingLanguage'),
- name: 'i18n',
- },
- {
- children: ,
- desc: t('settingReduceAnimationDesc'),
- label: t('settingReduceAnimation'),
- name: 'liteAnimation',
- valuePropName: 'checked',
- },
- {
- children: (
- setPrimaryColor(findCustomThemeName('primary', c))}
- />
- ),
- desc: t('settingPrimaryColorDesc'),
- label: t('settingPrimaryColor'),
- },
- {
- children: (
- setNeutralColor(findCustomThemeName('neutral', c))}
- />
- ),
- desc: t('settingNeutralColorDesc'),
- label: t('settingNeutralColor'),
- },
- {
- children: (
- ({
+ children: [
{
- label: t('lobe'),
- value: 'lobe',
+ children: ,
+ desc: t('setting.language.desc'),
+ label: t('setting.language.title'),
+ name: 'i18n',
},
{
- label: t('kitchen'),
- value: 'kitchen',
+ children: ,
+ desc: t('setting.reduceAnimation.desc'),
+ label: t('setting.reduceAnimation.title'),
+ name: 'liteAnimation',
+ valuePropName: 'checked',
},
{
- label: t('custom'),
- value: 'custom',
+ children: (
+ setPrimaryColor(findCustomThemeName('primary', c))}
+ />
+ ),
+ desc: t('setting.primaryColor.desc'),
+ label: t('setting.primaryColor.title'),
},
- ]}
- />
- ),
- desc: t('settingLogoTypeDesc'),
- label: t('settingLogoType'),
- name: 'logoType',
- },
- {
- children: ,
- desc: t('settingCustomLogoDesc'),
- divider: false,
- hidden: rawSetting.logoType !== 'custom',
- label: t('settingCustomLogo'),
- name: 'logoCustomUrl',
- },
- {
- children: ,
- desc: t('settingCustomTitleDesc'),
- divider: false,
- hidden: rawSetting.logoType !== 'custom',
- label: t('settingCustomTitle'),
- name: 'logoCustomTitle',
- },
- {
- children: (
-
- ),
- divider: false,
- hidden: rawSetting.logoType !== 'custom',
- label: t('settingLogoPreview'),
- },
- {
- children: ,
- desc: t('settingSvgIconsDesc'),
- label: t('settingSvgIcons'),
- name: 'svgIcon',
- valuePropName: 'checked',
- },
- {
- children: ,
- desc: t('settingCustomFontDesc'),
- label: t('settingCustomFont'),
- name: 'enableWebFont',
- valuePropName: 'checked',
- },
- {
- children: ,
- desc: t('settingConfirmPageUnloadDesc'),
- label: t('settingConfirmPageUnload'),
- name: 'confirmPageUnload',
- valuePropName: 'checked',
- },
- ],
- icon: Palette,
- title: t('settingGroupTheme'),
- }),
- [
- primaryColor,
- neutralColor,
- rawSetting.logoType,
- rawSetting.logoCustomTitle,
- rawSetting.logoCustomUrl,
- ],
- );
+ {
+ children: (
+ setNeutralColor(findCustomThemeName('neutral', c))}
+ />
+ ),
+ desc: t('setting.neutralColor.desc'),
+ label: t('setting.neutralColor.title'),
+ },
+ {
+ children: (
+
+ ),
+ desc: t('setting.logoType.desc'),
+ label: t('setting.logoType.title'),
+ name: 'logoType',
+ },
+ {
+ children: ,
+ desc: t('setting.customLogo.desc'),
+ divider: false,
+ hidden: rawSetting.logoType !== 'custom',
+ label: t('setting.customLogo.title'),
+ name: 'logoCustomUrl',
+ },
+ {
+ children: ,
+ desc: t('setting.customTitle.desc'),
+ divider: false,
+ hidden: rawSetting.logoType !== 'custom',
+ label: t('setting.customTitle.title'),
+ name: 'logoCustomTitle',
+ },
+ {
+ children: (
+
+ ),
+ divider: false,
+ hidden: rawSetting.logoType !== 'custom',
+ label: t('setting.logoType.preview'),
+ },
+ {
+ children: ,
+ desc: t('setting.svgIcons.desc'),
+ label: t('setting.svgIcons.title'),
+ name: 'svgIcon',
+ valuePropName: 'checked',
+ },
+ {
+ children: ,
+ desc: t('setting.customFont.desc'),
+ label: t('setting.customFont.title'),
+ name: 'enableWebFont',
+ valuePropName: 'checked',
+ },
+ {
+ children: ,
+ desc: t('setting.confirmPageUnload.desc'),
+ label: t('setting.confirmPageUnload.title'),
+ name: 'confirmPageUnload',
+ valuePropName: 'checked',
+ },
+ ],
+ icon: Palette,
+ title: t('setting.group.theme'),
+ }),
+ [
+ primaryColor,
+ neutralColor,
+ rawSetting.logoType,
+ rawSetting.logoCustomTitle,
+ rawSetting.logoCustomUrl,
+ ],
+ );
- const promptTextarea: SettingItemGroup = useMemo(
- () => ({
- children: [
- {
- children: (
- ({
+ children: [
{
- label: t('scroll'),
- value: 'scroll',
+ children: (
+
+ ),
+ desc: t('setting.promptDisplayMode.desc'),
+ label: t('setting.promptDisplayMode.title'),
+ name: 'promptTextareaType',
},
{
- label: t('resizable'),
- value: 'resizable',
+ children: ,
+ desc: t('setting.promptHighlight.desc'),
+ label: t('setting.promptHighlight.title'),
+ name: 'enableHighlight',
+ valuePropName: 'checked',
},
- ]}
- />
- ),
- desc: t('settingPromptDisplayModeDesc'),
- label: t('settingPromptDisplayMode'),
- name: 'promptTextareaType',
- },
- {
- children: ,
- desc: t('settingPromptHighlightDesc'),
- label: t('settingPromptHighlight'),
- name: 'enableHighlight',
- valuePropName: 'checked',
- },
- {
- children: ,
- desc: t('settingPromptEditorDesc'),
- label: t('settingPromptEditor'),
- name: 'promptEditor',
- valuePropName: 'checked',
- },
- ],
- icon: TextCursorInput,
- title: t('settingGroupPromptTextarea'),
- }),
- [],
- );
+ {
+ children: ,
+ desc: t('setting.promptEditor.desc'),
+ label: t('setting.promptEditor.title'),
+ name: 'promptEditor',
+ valuePropName: 'checked',
+ },
+ ],
+ icon: TextCursorInput,
+ title: t('setting.group.promptTextarea'),
+ }),
+ [],
+ );
- const layout: SettingItemGroup = useMemo(
- () => ({
- children: [
- {
- children: ,
- desc: t('settingSplitPreviewerDesc'),
- label: t('settingSplitPreviewer'),
- name: 'layoutSplitPreview',
- valuePropName: 'checked',
- },
- {
- children: ,
- desc: t('settingHideFooterDesc'),
- label: t('settingHideFooter'),
- name: 'layoutHideFooter',
- valuePropName: 'checked',
- },
- ],
- icon: Layout,
- title: t('settingGroupLayout'),
- }),
- [],
- );
+ const layout: SettingItemGroup = useMemo(
+ () => ({
+ children: [
+ {
+ children: ,
+ desc: t('setting.splitPreviewer.desc'),
+ label: t('setting.splitPreviewer.title'),
+ name: 'layoutSplitPreview',
+ valuePropName: 'checked',
+ },
+ {
+ children: ,
+ desc: t('setting.hideFooter.desc'),
+ label: t('setting.hideFooter.title'),
+ name: 'layoutHideFooter',
+ valuePropName: 'checked',
+ },
+ ],
+ icon: Layout,
+ title: t('setting.group.layout'),
+ }),
+ [],
+ );
- const quickSettingSidebar: SettingItemGroup = useMemo(
- () => ({
- children: [
- {
- children: ,
- desc: t('settingQuickSettingSidebarEnableDesc'),
- label: t('settingQuickSettingSidebarEnable'),
- name: 'enableSidebar',
- valuePropName: 'checked',
- },
- {
- children: ,
- desc: t('settingQuickSettingSidebarDefaultExpandDesc'),
- hidden: !rawSetting.enableSidebar,
- label: t('settingQuickSettingSidebarDefaultExpand'),
- name: 'sidebarExpand',
- valuePropName: 'checked',
- },
- {
- children: (
- ({
+ children: [
{
- label: t('fixed'),
- value: 'fixed',
+ children: ,
+ desc: t('setting.quickSettingSidebar.displayMode.desc'),
+ label: t('setting.quickSettingSidebar.displayMode.title'),
+ name: 'enableSidebar',
+ valuePropName: 'checked',
},
{
- label: t('float'),
- value: 'float',
+ children: ,
+ desc: t('setting.quickSettingSidebar.defaultExpand.desc'),
+ hidden: !rawSetting.enableSidebar,
+ label: t('setting.quickSettingSidebar.defaultExpand.title'),
+ name: 'sidebarExpand',
+ valuePropName: 'checked',
},
- ]}
- />
- ),
- desc: t('settingQuickSettingSidebarDisplayModeDesc'),
- hidden: !rawSetting.enableSidebar,
- label: t('settingQuickSettingSidebarDisplayMode'),
- name: 'sidebarFixedMode',
- },
- {
- children: ,
- desc: t('settingQuickSettingSidebarDefaultWidthDesc'),
- hidden: !rawSetting.enableSidebar,
- label: t('settingQuickSettingSidebarDefaultWidth'),
- name: 'sidebarWidth',
- },
- ],
- icon: PanelLeftClose,
- title: t('settingGroupQuickSettingSidebar'),
- }),
- [rawSetting.enableSidebar],
- );
+ {
+ children: (
+
+ ),
+ desc: t('setting.quickSettingSidebar.displayMode.desc'),
+ hidden: !rawSetting.enableSidebar,
+ label: t('setting.quickSettingSidebar.displayMode.title'),
+ name: 'sidebarFixedMode',
+ },
+ {
+ children: ,
+ desc: t('setting.quickSettingSidebar.defaultWidth.desc'),
+ hidden: !rawSetting.enableSidebar,
+ label: t('setting.quickSettingSidebar.defaultWidth.title'),
+ name: 'sidebarWidth',
+ },
+ ],
+ icon: PanelLeftClose,
+ title: t('setting.group.quickSettingSidebar'),
+ }),
+ [rawSetting.enableSidebar],
+ );
- const extraNetworkSidebar: SettingItemGroup = useMemo(
- () => ({
- children: [
- {
- children: ,
- desc: t('settingExtraNetworkSidebarEnableDesc'),
- label: t('settingExtraNetworkSidebarEnable'),
- name: 'enableExtraNetworkSidebar',
- valuePropName: 'checked',
- },
- {
- children: (
- ({
+ children: [
{
- label: t('fixed'),
- value: 'fixed',
+ children: ,
+ desc: t('setting.extraNetworkSidebar.enable.desc'),
+ label: t('setting.extraNetworkSidebar.enable.title'),
+ name: 'enableExtraNetworkSidebar',
+ valuePropName: 'checked',
},
{
- label: t('float'),
- value: 'float',
+ children: (
+
+ ),
+ desc: t('setting.extraNetworkSidebar.displayMode.desc'),
+ hidden: !rawSetting.enableExtraNetworkSidebar,
+ label: t('setting.extraNetworkSidebar.displayMode.title'),
+ name: 'extraNetworkFixedMode',
},
- ]}
- />
- ),
- desc: t('settingExtraNetworkSidebarDisplayModeDesc'),
- hidden: !rawSetting.enableExtraNetworkSidebar,
- label: t('settingExtraNetworkSidebarDisplayMode'),
- name: 'extraNetworkFixedMode',
- },
- {
- children: ,
- desc: t('settingExtraNetworkSidebarDefaultExpandDesc'),
- hidden: !rawSetting.enableExtraNetworkSidebar,
- label: t('settingExtraNetworkSidebarDefaultExpand'),
- name: 'extraNetworkSidebarExpand',
- valuePropName: 'checked',
- },
- {
- children: ,
- desc: t('settingExtraNetworkSidebarDefaultWidthDesc'),
- hidden: !rawSetting.enableExtraNetworkSidebar,
- label: t('settingExtraNetworkSidebarDefaultWidth'),
- name: 'extraNetworkSidebarWidth',
- },
- {
- children: ,
- desc: t('settingExtraNetworkSidebarDefaultCardSizeDesc'),
- hidden: !rawSetting.enableExtraNetworkSidebar,
- label: t('settingExtraNetworkSidebarDefaultCardSize'),
- name: 'extraNetworkCardSize',
- },
- ],
- icon: PanelRightClose,
- title: t('settingGroupExtraNetworkSidebar'),
- }),
- [rawSetting.enableExtraNetworkSidebar],
- );
+ {
+ children: ,
+ desc: t('setting.extraNetworkSidebar.defaultExpand.desc'),
+ hidden: !rawSetting.enableExtraNetworkSidebar,
+ label: t('setting.extraNetworkSidebar.defaultExpand.title'),
+ name: 'extraNetworkSidebarExpand',
+ valuePropName: 'checked',
+ },
+ {
+ children: ,
+ desc: t('setting.extraNetworkSidebar.defaultWidth.desc'),
+ hidden: !rawSetting.enableExtraNetworkSidebar,
+ label: t('setting.extraNetworkSidebar.defaultWidth.title'),
+ name: 'extraNetworkSidebarWidth',
+ },
+ {
+ children: ,
+ desc: t('setting.extraNetworkSidebar.defaultCardSize.desc'),
+ hidden: !rawSetting.enableExtraNetworkSidebar,
+ label: t('setting.extraNetworkSidebar.defaultCardSize.title'),
+ name: 'extraNetworkCardSize',
+ },
+ ],
+ icon: PanelRightClose,
+ title: t('setting.group.extraNetworkSidebar'),
+ }),
+ [rawSetting.enableExtraNetworkSidebar],
+ );
- return (
-