🐛 fix: Fix typo in setting (#470)

.eslintrc.js

@@ -1,8 +1,18 @@
 const config = require('@lobehub/lint').eslint;
 
-config.rules['linebreak-style'] = 0;
 config.rules['no-undef'] = 0;
-config.rules['object-curly-spacing'] = 0;
 config.rules['unicorn/prefer-add-event-listener'] = 0;
+config.rules['unicorn/no-negated-condition'] = 0;
+config.rules['unicorn/prefer-type-error'] = 0;
+config.rules['unicorn/prefer-logical-operator-over-ternary'] = 0;
+config.rules['unicorn/no-null'] = 0;
+config.rules['unicorn/no-typeof-undefined'] = 0;
+config.rules['unicorn/explicit-length-check'] = 0;
+config.rules['unicorn/prefer-code-point'] = 0;
+config.rules['no-extra-boolean-cast'] = 0;
+config.rules['unicorn/no-useless-undefined'] = 0;
+config.rules['react/no-unknown-property'] = 0;
+config.rules['unicorn/prefer-ternary'] = 0;
+config.rules['unicorn/prefer-spread'] = 0;
 
 module.exports = config;

src/_react_refresh.js

@@ -1,4 +1,4 @@
-import { consola } from 'consola';
+import {consola} from 'consola';
 
 import RefreshRuntime from '/@react-refresh';
 

src/app/index.tsx

@@ -1,25 +1,25 @@
-import { LayoutHeader, LayoutMain, LayoutSidebar } from '@lobehub/ui';
+import {LayoutHeader, LayoutMain, LayoutSidebar} from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
-import { memo, useEffect } from 'react';
+import {memo, useEffect} from 'react';
 
 import '@/locales/config';
-import { PromptHighlight } from '@/modules/PromptHighlight';
+import {PromptHighlight} from '@/modules/PromptHighlight';
 import replaceIcon from '@/scripts/replaceIcon';
-import { selectors, useAppStore } from '@/store';
+import {selectors, useAppStore} from '@/store';
 import GlobalStyle from '@/styles';
 
 import Content from '../features/Content';
 import ExtraNetworkSidebar from '../features/ExtraNetworkSidebar';
 import Footer from '../features/Footer';
 import Header from '../features/Header';
 import QuickSettingSidebar from '../features/QuickSettingSidebar';
-import { useStyles } from './style';
+import {useStyles} from './style';
 
 const HEADER_HEIGHT = 64;
 
 const Index = memo(() => {
     const setting = useAppStore(selectors.currentSetting, isEqual);
-    const { cx, styles } = useStyles({
+    const {cx, styles} = useStyles({
         headerHeight: HEADER_HEIGHT,
         isPrimaryColor: Boolean(setting.primaryColor),
     });
@@ -44,7 +44,7 @@ const Index = memo(() => {
                     <LayoutSidebar
                         className={styles.sidebar}
                         headerHeight={HEADER_HEIGHT}
-                        style={{ flex: 0, zIndex: 50 }}
+                        style={{flex: 0, zIndex: 50}}
                     >
                         <QuickSettingSidebar headerHeight={HEADER_HEIGHT} />
                     </LayoutSidebar>
@@ -54,7 +54,7 @@ const Index = memo(() => {
                     <LayoutSidebar
                         className={styles.sidebar}
                         headerHeight={HEADER_HEIGHT}
-                        style={{ flex: 0, zIndex: 50 }}
+                        style={{flex: 0, zIndex: 50}}
                     >
                         <ExtraNetworkSidebar headerHeight={HEADER_HEIGHT} />
                     </LayoutSidebar>

src/app/layout.tsx

@@ -1,17 +1,17 @@
-import { consola } from 'consola';
-import { PropsWithChildren, Suspense, memo, useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
-import { shallow } from 'zustand/shallow';
+import {consola} from 'consola';
+import {PropsWithChildren, Suspense, memo, useEffect, useState} from 'react';
+import {Helmet} from 'react-helmet';
+import {shallow} from 'zustand/shallow';
 
-import { Loading } from '@/components';
+import {Loading} from '@/components';
 import Layout from '@/layouts';
-import { useAppStore } from '@/store';
+import {useAppStore} from '@/store';
 
 import manifest from './manifest';
 
-export const Layouts = memo<PropsWithChildren>(({ children }) => {
+export const Layouts = memo<PropsWithChildren>(({children}) => {
     const [loading, setLoading] = useState(true);
-    const { setCurrentTab, onInit, storeLoading } = useAppStore(
+    const {setCurrentTab, onInit, storeLoading} = useAppStore(
         (st) => ({
             onInit: st.onInit,
             setCurrentTab: st.setCurrentTab,

src/app/style.ts

@@ -1,10 +1,10 @@
-import { createStyles } from 'antd-style';
-import { adjustHue } from 'polished';
+import {createStyles} from 'antd-style';
+import {adjustHue} from 'polished';
 
 export const useStyles = createStyles(
     (
-        { cx, css, stylish, token, isDarkMode },
-        { headerHeight, isPrimaryColor }: { headerHeight: number; isPrimaryColor: boolean },
+        {cx, css, stylish, token, isDarkMode},
+        {headerHeight, isPrimaryColor}: { headerHeight: number; isPrimaryColor: boolean },
     ) => ({
         background: cx(
             stylish.gradientAnimation,

src/components/Giscus/index.tsx

@@ -7,17 +7,17 @@ import {
     Modal,
     type ModalProps,
 } from '@lobehub/ui';
-import { Button, Space } from 'antd';
-import { useTheme } from 'antd-style';
+import {Button, Space} from 'antd';
+import {useTheme} from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { Github } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import {Github} from 'lucide-react';
+import {memo} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Center, Flexbox} from 'react-layout-kit';
 
-import { homepage } from '@/../package.json';
+import {homepage} from '@/../package.json';
 import VersionTag from '@/components/VersionTag';
-import { selectors, useAppStore } from '@/store';
+import {selectors, useAppStore} from '@/store';
 
 export interface GiscusProps {
   onCancel?: ModalProps['onCancel'];
@@ -26,10 +26,10 @@ export interface GiscusProps {
 
 const repoName = homepage.replace('https://github.com/', '') as `${string}/${string}`;
 
-const Giscus = memo<GiscusProps>(({ open, onCancel }) => {
+const Giscus = memo<GiscusProps>(({open, onCancel}) => {
     const setting = useAppStore(selectors.currentSetting, isEqual);
     const theme = useTheme();
-    const { t } = useTranslation();
+    const {t} = useTranslation();
     return (
         <Modal
             footer={false}

src/components/Loading/index.tsx

@@ -1,11 +1,11 @@
-import { Icon, Logo } from '@lobehub/ui';
-import { Loader2 } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import {Icon, Logo} from '@lobehub/ui';
+import {Loader2} from 'lucide-react';
+import {memo} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Center, Flexbox} from 'react-layout-kit';
 
 const Loading = memo(() => {
-    const { t } = useTranslation();
+    const {t} = useTranslation();
 
     return (
         <Flexbox height={'100vh'} width={'100%'}>

src/components/Loading/style.ts

@@ -1,10 +1,10 @@
-import { createStyles } from 'antd-style';
-import { adjustHue, rgba } from 'polished';
+import {createStyles} from 'antd-style';
+import {adjustHue, rgba} from 'polished';
 
 export const useStyles = createStyles(
     (
-        { css, stylish, cx, token },
-        { isPrimaryColor, liteAnimation }: { isPrimaryColor?: boolean; liteAnimation?: boolean },
+        {css, stylish, cx, token},
+        {isPrimaryColor, liteAnimation}: { isPrimaryColor?: boolean; liteAnimation?: boolean },
     ) => ({
         canvas: cx(
             stylish.gradientAnimation,

src/components/Logo/CustomLogo.tsx

@@ -1,6 +1,6 @@
-import { FluentEmoji, Logo as LobeLogo, getEmoji } from '@lobehub/ui';
-import { Space } from 'antd';
-import { type CSSProperties, memo } from 'react';
+import {FluentEmoji, Logo as LobeLogo, getEmoji} from '@lobehub/ui';
+import {Space} from 'antd';
+import {type CSSProperties, memo} from 'react';
 
 export interface CustomLogoProps {
   logoCustomTitle?: string;
@@ -9,12 +9,12 @@ export interface CustomLogoProps {
   style?: CSSProperties;
 }
 
-const CustomLogo = memo<CustomLogoProps>(({ size = 32, style, logoCustomUrl, logoCustomTitle }) => {
+const CustomLogo = memo<CustomLogoProps>(({size = 32, style, logoCustomUrl, logoCustomTitle}) => {
     let customLogo = <LobeLogo size={size} style={style} />;
 
     if (logoCustomUrl) {
         if (logoCustomUrl.includes('http') || logoCustomUrl.includes('data')) {
-            customLogo = <img alt="logo" src={logoCustomUrl} style={{ height: size, ...style }} />;
+            customLogo = <img alt="logo" src={logoCustomUrl} style={{height: size, ...style}} />;
         } else {
             const pureEmoji = getEmoji(logoCustomUrl);
             if (pureEmoji) {
@@ -26,7 +26,7 @@ const CustomLogo = memo<CustomLogoProps>(({ size = 32, style, logoCustomUrl, log
     return (
         <Space align="center" size={size * 0.3}>
             {customLogo}
-            <b style={{ fontSize: size * 0.6, whiteSpace: 'nowrap' }}>{logoCustomTitle}</b>
+            <b style={{fontSize: size * 0.6, whiteSpace: 'nowrap'}}>{logoCustomTitle}</b>
         </Space>
     );
 });

src/components/Logo/KitchenLogo.tsx

@@ -1,19 +1,19 @@
-import { type CSSProperties, memo } from 'react';
+import {type CSSProperties, memo} from 'react';
 
-import { darkLogo, lightLogo } from './style';
+import {darkLogo, lightLogo} from './style';
 
 export interface KitchenLogoProps {
   size?: number;
   style?: CSSProperties;
   themeMode: 'dark' | 'light';
 }
 
-const KitchenLogo = memo<KitchenLogoProps>(({ size = 32, style, themeMode }) => {
+const KitchenLogo = memo<KitchenLogoProps>(({size = 32, style, themeMode}) => {
     return (
         <img
             alt="logo"
             src={themeMode === 'dark' ? darkLogo : lightLogo}
-            style={{ height: size, ...style }}
+            style={{height: size, ...style}}
         />
     );
 });

src/components/Logo/index.tsx

@@ -1,8 +1,8 @@
-import { Logo as LobeLogo } from '@lobehub/ui';
+import {Logo as LobeLogo} from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
-import { type CSSProperties, memo } from 'react';
+import {type CSSProperties, memo} from 'react';
 
-import { selectors, useAppStore } from '@/store';
+import {selectors, useAppStore} from '@/store';
 
 import CustomLogo from './CustomLogo';
 import KitchenLogo from './KitchenLogo';
@@ -12,7 +12,7 @@ export interface LogoProps {
   style?: CSSProperties;
 }
 
-const Logo = memo<LogoProps>(({ size = 32, style }) => {
+const Logo = memo<LogoProps>(({size = 32, style}) => {
     const setting = useAppStore(selectors.currentSetting, isEqual);
     const themeMode = useAppStore(selectors.themeMode);
 

src/components/PromptEditor/Prompt.tsx

@@ -1,19 +1,19 @@
-import { consola } from 'consola';
-import { memo, useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import {consola} from 'consola';
+import {memo, useCallback, useState} from 'react';
+import {useTranslation} from 'react-i18next';
 
-import TagList, { PromptType, TagItem } from './TagList';
-import { useStyles } from './style';
-import { formatPrompt } from './utils';
+import TagList, {PromptType, TagItem} from './TagList';
+import {useStyles} from './style';
+import {formatPrompt} from './utils';
 
 interface PromptProps {
   type: PromptType;
 }
 
-const Prompt = memo<PromptProps>(({ type }) => {
+const Prompt = memo<PromptProps>(({type}) => {
     const [tags, setTags] = useState<TagItem[]>([]);
-    const { styles } = useStyles();
-    const { t } = useTranslation();
+    const {styles} = useStyles();
+    const {t} = useTranslation();
 
     const id =
     type === 'positive' ? "[id$='2img_prompt'] textarea" : "[id$='2img_neg_prompt'] textarea";

src/components/PromptEditor/TagList/index.tsx

@@ -1,9 +1,9 @@
-import { consola } from 'consola';
-import { type FC, memo, useCallback, useEffect, useState } from 'react';
-import { WithContext, ReactTagsProps as WithContextProps } from 'react-tag-input';
+import {consola} from 'consola';
+import {type FC, memo, useCallback, useEffect, useState} from 'react';
+import {WithContext, ReactTagsProps as WithContextProps} from 'react-tag-input';
 
-import { genTagType } from '../utils';
-import { useStyles } from './style';
+import {genTagType} from '../utils';
+import {useStyles} from './style';
 
 export interface TagItem {
   className?: string;
@@ -35,10 +35,10 @@ interface TagListProps {
   type: PromptType;
 }
 
-const TagList = memo<TagListProps>(({ tags, setTags, type, setValue }) => {
+const TagList = memo<TagListProps>(({tags, setTags, type, setValue}) => {
     const id = `${type}_tag_editor`;
     const [bind, setBind] = useState(false);
-    const { styles } = useStyles(type);
+    const {styles} = useStyles(type);
     const handleDelete = useCallback(
         (index_: number) => {
             const newTags = tags.filter((tag, index) => index !== index_);

src/components/PromptEditor/TagList/style.ts

@@ -1,7 +1,7 @@
-import { createStyles } from 'antd-style';
+import {createStyles} from 'antd-style';
 
 export const useStyles = createStyles(
-    ({ css, token }, type: 'positive' | 'negative') => css`
+    ({css, token}, type: 'positive' | 'negative') => css`
     .autocompleteResults {
       left: 16px !important;
       min-width: 200px !important;

src/components/PromptEditor/index.tsx

@@ -1,18 +1,18 @@
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
+import {memo} from 'react';
+import {useTranslation} from 'react-i18next';
 
-import { useStyles } from '@/components/PromptEditor/style';
+import {useStyles} from '@/components/PromptEditor/style';
 
 import Prompt from './Prompt';
 
 const PromptEditor = memo(() => {
-    const { styles } = useStyles();
-    const { t } = useTranslation();
+    const {styles} = useStyles();
+    const {t} = useTranslation();
     return (
         <div className={styles.view}>
-            <span style={{ marginBottom: -10 }}>{t('prompt.positive')}</span>
+            <span style={{marginBottom: -10}}>{t('prompt.positive')}</span>
             <Prompt type="positive" />
-            <span style={{ marginBottom: -10 }}>{t('prompt.negative')}</span>
+            <span style={{marginBottom: -10}}>{t('prompt.negative')}</span>
             <Prompt type="negative" />
         </div>
     );

src/components/PromptEditor/style.ts

@@ -1,6 +1,6 @@
-import { createStyles } from 'antd-style';
+import {createStyles} from 'antd-style';
 
-export const useStyles = createStyles(({ css }) => ({
+export const useStyles = createStyles(({css}) => ({
     buttonGroup: css`
     display: flex;
     gap: 8px;

src/components/PromptEditor/utils.ts

@@ -1,6 +1,6 @@
-import { Converter } from '@/scripts/formatPrompt';
+import {Converter} from '@/scripts/formatPrompt';
 
-import { TagItem } from './TagList';
+import {TagItem} from './TagList';
 
 export const genTagType = (tag: TagItem): TagItem => {
     const newTag = tag;
@@ -29,5 +29,5 @@ export const formatPrompt = (value: string) => {
             .replaceAll(',', ', ');
         return Converter.convertStr2Array(newItem).join(', ');
     });
-    return textArray.map((tag) => genTagType({ id: tag, text: tag }));
+    return textArray.map((tag) => genTagType({id: tag, text: tag}));
 };