🐛 fix: Fix fontsize setting and audio download style (lobehub#433)

mushan0x0 · Dec 17, 2023 · ea7eeef · ea7eeef
1 parent ef30c70
commit ea7eeef
Show file tree

Hide file tree

Showing 17 changed files with 129 additions and 17 deletions.
diff --git a/locales/de_DE/setting.json b/locales/de_DE/setting.json
@@ -251,6 +251,11 @@
     },
     "fontSize": {
       "desc": "Schriftgröße für Chat-Inhalte",
+      "marks": {
+        "large": "Groß",
+        "normal": "Normal",
+        "small": "Klein"
+      },
       "title": "Schriftgröße"
     },
     "lang": {

diff --git a/locales/en_US/setting.json b/locales/en_US/setting.json
@@ -251,6 +251,11 @@
     },
     "fontSize": {
       "desc": "Font size for chat content",
+      "marks": {
+        "large": "Large",
+        "normal": "Normal",
+        "small": "Small"
+      },
       "title": "Font Size"
     },
     "lang": {

diff --git a/locales/es_ES/setting.json b/locales/es_ES/setting.json
@@ -251,6 +251,11 @@
     },
     "fontSize": {
       "desc": "Tamaño de fuente para el contenido del chat",
+      "marks": {
+        "large": "Grande",
+        "normal": "Normal",
+        "small": "Pequeño"
+      },
       "title": "Tamaño de fuente"
     },
     "lang": {

diff --git a/locales/fr_FR/setting.json b/locales/fr_FR/setting.json
@@ -251,6 +251,11 @@
     },
     "fontSize": {
       "desc": "Taille de la police du contenu du chat",
+      "marks": {
+        "large": "Grand",
+        "normal": "Normal",
+        "small": "Petit"
+      },
       "title": "Taille de la police"
     },
     "lang": {

diff --git a/locales/ja_JP/setting.json b/locales/ja_JP/setting.json
@@ -251,6 +251,11 @@
     },
     "fontSize": {
       "desc": "チャットのフォントサイズ",
+      "marks": {
+        "large": "大きい",
+        "normal": "標準",
+        "small": "小さい"
+      },
       "title": "フォントサイズ"
     },
     "lang": {

diff --git a/locales/ko_KR/setting.json b/locales/ko_KR/setting.json
@@ -251,6 +251,11 @@
     },
     "fontSize": {
       "desc": "채팅 내용의 글꼴 크기",
+      "marks": {
+        "large": "대",
+        "normal": "표준",
+        "small": "소"
+      },
       "title": "글꼴 크기"
     },
     "lang": {

diff --git a/locales/pt_BR/setting.json b/locales/pt_BR/setting.json
@@ -251,6 +251,11 @@
     },
     "fontSize": {
       "desc": "Tamanho da fonte do conteúdo do chat",
+      "marks": {
+        "large": "Grande",
+        "normal": "Normal",
+        "small": "Pequeno"
+      },
       "title": "Tamanho da Fonte"
     },
     "lang": {

diff --git a/locales/ru_RU/setting.json b/locales/ru_RU/setting.json
@@ -251,6 +251,11 @@
     },
     "fontSize": {
       "desc": "Размер шрифта для чата",
+      "marks": {
+        "large": "крупный",
+        "normal": "стандартный",
+        "small": "маленький"
+      },
       "title": "Размер шрифта"
     },
     "lang": {

diff --git a/locales/tr_TR/setting.json b/locales/tr_TR/setting.json
@@ -251,6 +251,11 @@
     },
     "fontSize": {
       "desc": "Sohbet içeriği için yazı boyutu",
+      "marks": {
+        "large": "Büyük",
+        "normal": "Normal",
+        "small": "Küçük"
+      },
       "title": "Yazı Boyutu"
     },
     "lang": {

diff --git a/locales/zh_CN/setting.json b/locales/zh_CN/setting.json
@@ -251,6 +251,11 @@
     },
     "fontSize": {
       "desc": "聊天内容的字体大小",
+      "marks": {
+        "large": "大",
+        "normal": "标准",
+        "small": "小"
+      },
       "title": "字体大小"
     },
     "lang": {

diff --git a/locales/zh_TW/setting.json b/locales/zh_TW/setting.json
@@ -251,6 +251,11 @@
     },
     "fontSize": {
       "desc": "聊天內容的字體大小",
+      "marks": {
+        "large": "大",
+        "normal": "標準",
+        "small": "小"
+      },
       "title": "字體大小"
     },
     "lang": {

diff --git a/src/app/chat/features/Conversation/ChatList/Extras/TTS/Player.tsx b/src/app/chat/features/Conversation/ChatList/Extras/TTS/Player.tsx
@@ -18,7 +18,7 @@ const Player = memo<PlayerProps>(({ onRetry, error, onDelete, audio, isLoading,
   const { t } = useTranslation('chat');
 
   return (
-    <Flexbox align={'center'} horizontal style={{ minWidth: 160, width: '100%' }}>
+    <Flexbox align={'center'} horizontal style={{ minWidth: 200, width: '100%' }}>
       {error ? (
         <Alert
           action={

diff --git a/src/app/chat/features/Conversation/index.tsx b/src/app/chat/features/Conversation/index.tsx
@@ -5,20 +5,38 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 
 import ChatList from './ChatList';
 import ChatScrollAnchor from './ScrollAnchor';
 import { useInitConversation } from './useInitConversation';
 
-const useStyles = createStyles(
-  ({ css, responsive, stylish }) => css`
-    overflow: hidden scroll;
-    height: 100%;
-    ${responsive.mobile} {
-      ${stylish.noScrollbar}
-      width: 100vw;
-    }
-  `,
+const useStyles = createStyles(({ css, responsive, stylish, cx }, fontSize: number = 14) =>
+  cx(
+    css`
+      overflow: hidden scroll;
+      height: 100%;
+
+      ${responsive.mobile} {
+        ${stylish.noScrollbar}
+        width: 100vw;
+      }
+    `,
+    fontSize !== 14 &&
+      css`
+        article[data-code-type='markdown'] {
+          p,
+          code,
+          pre,
+          ul,
+          ol,
+          li,
+          blockquote {
+            font-size: ${fontSize}px;
+          }
+        }
+      `,
+  ),
 );
 
 interface ConversationProps {
@@ -29,7 +47,8 @@ interface ConversationProps {
 const Conversation = memo<ConversationProps>(({ mobile, chatInput }) => {
   const ref = useRef(null);
   const { t } = useTranslation('chat');
-  const { styles } = useStyles();
+  const fontSize = useGlobalStore((s) => settingsSelectors.currentSettings(s).fontSize);
+  const { styles } = useStyles(fontSize);
 
   // init conversation
   useInitConversation();

diff --git a/src/app/settings/common/Common.tsx b/src/app/settings/common/Common.tsx
@@ -131,7 +131,33 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
         name: 'language',
       },
       {
-        children: <SliderWithInput max={18} min={12} />,
+        children: (
+          <SliderWithInput
+            marks={{
+              12: {
+                label: t('settingTheme.fontSize.marks.small'),
+                style: {
+                  marginTop: 4,
+                },
+              },
+              14: {
+                label: t('settingTheme.fontSize.marks.normal'),
+                style: {
+                  marginTop: 4,
+                },
+              },
+              18: {
+                label: t('settingTheme.fontSize.marks.large'),
+                style: {
+                  marginTop: 4,
+                },
+              },
+            }}
+            max={18}
+            min={12}
+            step={1}
+          />
+        ),
         desc: t('settingTheme.fontSize.desc'),
         label: t('settingTheme.fontSize.title'),
         name: 'fontSize',

diff --git a/src/features/AvatarWithUpload/index.tsx b/src/features/AvatarWithUpload/index.tsx
@@ -35,7 +35,7 @@ interface AvatarWithUploadProps {
 }
 
 const AvatarWithUpload = memo<AvatarWithUploadProps>(
-  ({ size = 40, compressSize = 128, style, id }) => {
+  ({ size = 40, compressSize = 256, style, id }) => {
     const [avatar, setSettings] = useGlobalStore((st) => [st.settings.avatar, st.setSettings]);
     const { styles } = useStyle();
 

diff --git a/src/features/PluginStore/PluginItem/index.tsx b/src/features/PluginStore/PluginItem/index.tsx
@@ -16,15 +16,18 @@ const useStyles = createStyles(({ css, token }) => ({
   desc: css`
     margin: 0 !important;
     font-size: 12px;
+    line-height: 1;
     color: ${token.colorTextDescription};
   `,
   link: css`
+    overflow: hidden;
     color: ${token.colorText};
   `,
   title: css`
+    margin: 0 !important;
     font-size: 14px;
     font-weight: bold;
-    line-height: 2;
+    line-height: 1;
   `,
 }));
 
@@ -47,15 +50,19 @@ const PluginItem = memo<InstallPluginMeta>(({ identifier, homepage, author, type
         style={{ overflow: 'hidden', position: 'relative' }}
       >
         <Avatar avatar={meta.avatar} style={{ flex: 'none', overflow: 'hidden' }} />
-        <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
+        <Flexbox flex={1} gap={4} style={{ overflow: 'hidden', position: 'relative' }}>
           <Flexbox align={'center'} gap={8} horizontal>
             <Tooltip title={identifier}>
               {homepage ? (
                 <Link className={styles.link} href={homepage} target={'_blank'}>
-                  <div className={styles.title}>{meta.title}</div>
+                  <Paragraph className={styles.title} ellipsis={{ rows: 1 }}>
+                    {meta.title}
+                  </Paragraph>
                 </Link>
               ) : (
-                <div className={styles.title}>{meta.title}</div>
+                <Paragraph className={styles.title} ellipsis={{ rows: 1 }}>
+                  {meta.title}
+                </Paragraph>
               )}
             </Tooltip>
             <PluginTag author={author} type={type} />

diff --git a/src/locales/default/setting.ts b/src/locales/default/setting.ts
@@ -251,6 +251,11 @@ export default {
     },
     fontSize: {
       desc: '聊天内容的字体大小',
+      marks: {
+        large: '大',
+        normal: '标准',
+        small: '小',
+      },
       title: '字体大小',
     },
     lang: {