💄 style: Fix image display in safari (fix lobehub#571)

wang991 · Dec 13, 2023 · 4beefa7 · 4beefa7
1 parent ed48d78
commit 4beefa7
Show file tree

Hide file tree

Showing 16 changed files with 119 additions and 73 deletions.
diff --git a/locales/en_US/plugin.json b/locales/en_US/plugin.json
@@ -123,6 +123,7 @@
       "installed": "Installed"
     },
     "title": "Plugin Store",
-    "uninstall": "Uninstall"
+    "uninstall": "Uninstall",
+    "placeholder": "Search for plugin name, description, or keywords..."
   }
 }
diff --git a/locales/fr_FR/plugin.json b/locales/fr_FR/plugin.json
@@ -123,6 +123,7 @@
       "installed": "Installés"
     },
     "title": "Boutique de plugins",
-    "uninstall": "Désinstaller"
+    "uninstall": "Désinstaller",
+    "placeholder": "Rechercher le nom ou les mots-clés de l'extension..."
   }
 }
diff --git a/locales/ja_JP/plugin.json b/locales/ja_JP/plugin.json
@@ -123,6 +123,7 @@
       "installed": "インストール済み"
     },
     "title": "プラグインストア",
-    "uninstall": "アンインストール"
+    "uninstall": "アンインストール",
+    "placeholder": "プラグイン名、説明、またはキーワードで検索..."
   }
 }
diff --git a/locales/ko_KR/plugin.json b/locales/ko_KR/plugin.json
@@ -123,6 +123,7 @@
       "installed": "설치됨"
     },
     "title": "플러그인 상점",
-    "uninstall": "제거"
+    "uninstall": "제거",
+    "placeholder": "플러그인 이름 또는 키워드로 검색..."
   }
 }
diff --git a/locales/ru_RU/plugin.json b/locales/ru_RU/plugin.json
@@ -123,6 +123,7 @@
       "installed": "Установленные"
     },
     "title": "Магазин плагинов",
-    "uninstall": "Удалить"
+    "uninstall": "Удалить",
+    "placeholder": "Введите название или ключевое слово плагина..."
   }
 }
diff --git a/locales/zh_CN/plugin.json b/locales/zh_CN/plugin.json
@@ -117,6 +117,7 @@
     "install": "安装",
     "installAllPlugins": "安装全部",
     "networkError": "获取插件商店失败，请检测网络连接后重试",
+    "placeholder": "搜索插件名称介绍或关键词...",
     "releasedAt": "发布于 {{createdAt}}",
     "tabs": {
       "all": "全部",

diff --git a/locales/zh_TW/plugin.json b/locales/zh_TW/plugin.json
@@ -123,6 +123,7 @@
       "installed": "已安裝"
     },
     "title": "插件商店",
-    "uninstall": "卸載"
+    "uninstall": "卸載",
+    "placeholder": "搜尋插件名稱介紹或關鍵字..."
   }
 }
diff --git a/src/app/chat/features/Migration/Modal.tsx b/src/app/chat/features/Migration/Modal.tsx
@@ -1,6 +1,6 @@
 import { Icon } from '@lobehub/ui';
 import { Button, Result } from 'antd';
-import { BadgeCheck, CpuIcon } from 'lucide-react';
+import { CheckCircle, CpuIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
@@ -48,7 +48,7 @@ const MigrationModal = memo<MigrationModalProps>(({ setOpen, open, state: dbStat
                 {t('dbV1.action.start')}
               </Button>
             }
-            icon={<Icon icon={BadgeCheck} />}
+            icon={<Icon icon={CheckCircle} />}
             status={'success'}
             style={{ paddingBlock: 24 }}
             subTitle={t('dbV1.upgrade.success.subTitle')}

diff --git a/src/components/FileList/FileItem.tsx b/src/components/FileList/FileItem.tsx
@@ -62,9 +62,11 @@ const FileItem = memo<FileItemProps>(({ editable, id, alwaysShowClose }) => {
       }
       alt={data?.name || id || ''}
       alwaysShowActions={alwaysShowClose}
+      height={'auto'}
       isLoading={isLoading}
       size={IMAGE_SIZE as any}
       src={data?.url}
+      style={{ height: 'auto' }}
       wrapperClassName={cx(styles.image, editable && styles.editableImage)}
     />
   );

diff --git a/src/features/DataImporter/index.tsx b/src/features/DataImporter/index.tsx
@@ -1,7 +1,7 @@
 import { Icon } from '@lobehub/ui';
 import { Button, Result, Table, Upload } from 'antd';
 import { createStyles } from 'antd-style';
-import { BadgeCheck, ImportIcon } from 'lucide-react';
+import { CheckCircle, ImportIcon } from 'lucide-react';
 import React, { ReactNode, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
@@ -169,7 +169,7 @@ const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
                   {t('importModal.finish.start')}
                 </Button>
               }
-              icon={<Icon icon={BadgeCheck} />}
+              icon={<Icon icon={CheckCircle} />}
               status={'success'}
               style={{ paddingBlock: 24 }}
               subTitle={

diff --git a/src/features/PluginSettingsModal/index.tsx b/src/features/PluginSettingsModal/index.tsx
@@ -25,6 +25,8 @@ const PluginSettingsModal = memo<PluginSettingsModalProps>(({ schema, onClose, i
   const theme = useTheme();
   return (
     <Modal
+      cancelText={t('cancel', { ns: 'common' })}
+      okText={t('ok', { ns: 'common' })}
       onCancel={onClose}
       onOk={() => {
         onClose();

diff --git a/src/features/PluginStore/PluginItem.tsx b/src/features/PluginStore/PluginItem.tsx
@@ -1,7 +1,8 @@
 import { LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
-import { Avatar, Tag } from '@lobehub/ui';
+import { Avatar, Icon, Tag } from '@lobehub/ui';
 import { Button } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
+import { BadgeCheck, CircleUser } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,66 +15,66 @@ import PluginSettings from './PluginSettings';
 
 const useStyles = createStyles(({ css, token }) => ({
   desc: css`
-    color: ${token.colorTextSecondary};
+    color: ${token.colorTextDescription};
   `,
   link: css`
-    color: ${token.colorTextDescription};
+    color: ${token.colorText};
   `,
   tag: css`
-    font-weight: normal;
+    color: ${token.colorTextSecondary};
   `,
   title: css`
     font-size: ${token.fontSizeLG}px;
     font-weight: bold;
     line-height: 2;
   `,
 }));
-const PluginItem = memo<LobeChatPluginMeta>(({ identifier, createdAt, homepage, author, meta }) => {
+const PluginItem = memo<LobeChatPluginMeta>(({ identifier, homepage, author, meta }) => {
   const [installed, installing, installPlugin, unInstallPlugin] = useToolStore((s) => [
     pluginSelectors.isPluginInstalled(identifier)(s),
     pluginStoreSelectors.isPluginInstallLoading(identifier)(s),
     s.installPlugin,
     s.uninstallPlugin,
   ]);
+  const { mobile } = useResponsive();
   const { styles } = useStyles();
 
   const { t } = useTranslation('plugin');
   return (
-    <Flexbox gap={8} padding={16}>
-      <Flexbox horizontal justify={'space-between'}>
-        <Avatar avatar={meta.avatar} size={56} style={{ flex: 'none' }} />
-
-        <Flexbox gap={8} horizontal>
-          <PluginSettings identifier={identifier} />
-          <Button
-            loading={installing}
-            onClick={() => {
-              if (installed) {
-                unInstallPlugin(identifier);
-              } else installPlugin(identifier);
-            }}
-            type={installed ? 'default' : 'primary'}
-          >
-            {t(installed ? 'store.uninstall' : 'store.install')}
-          </Button>
-        </Flexbox>
-      </Flexbox>
-
-      <Flexbox gap={4}>
-        <Flexbox align={'center'} gap={8} horizontal>
-          <div className={styles.title}>{meta.title}</div>
-          <Tag className={styles.tag}> {identifier}</Tag>
-        </Flexbox>
-        <div className={styles.desc}>{meta.description}</div>
-        <Flexbox className={styles.link} gap={8} horizontal>
-          {author && (
+    <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <Avatar avatar={meta.avatar} size={mobile ? 40 : 56} style={{ flex: 'none' }} />
+        <Flexbox gap={4}>
+          <Flexbox align={'center'} gap={8} horizontal>
             <Link className={styles.link} href={homepage} target={'_blank'}>
-              @{author}
+              <div className={styles.title}>{meta.title}</div>
             </Link>
-          )}
-          {t('store.releasedAt', { createdAt })}
+
+            <Tag
+              className={styles.tag}
+              icon={<Icon icon={author === 'LobeHub' ? BadgeCheck : CircleUser} />}
+            >
+              {author}
+            </Tag>
+          </Flexbox>
+          <div className={styles.desc}>{meta.description} </div>
         </Flexbox>
       </Flexbox>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <PluginSettings identifier={identifier} />
+        <Button
+          loading={installing}
+          onClick={() => {
+            if (installed) {
+              unInstallPlugin(identifier);
+            } else installPlugin(identifier);
+          }}
+          size={mobile ? 'small' : undefined}
+          type={installed ? 'default' : 'primary'}
+        >
+          {t(installed ? 'store.uninstall' : 'store.install')}
+        </Button>
+      </Flexbox>
     </Flexbox>
   );
 });

diff --git a/src/features/PluginStore/PluginSettings.tsx b/src/features/PluginStore/PluginSettings.tsx
@@ -1,5 +1,5 @@
 import { ActionIcon } from '@lobehub/ui';
-import { SettingsIcon } from 'lucide-react';
+import { Settings2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -19,7 +19,7 @@ const PluginSettings = memo<{ identifier: string }>(({ identifier }) => {
   return (
     <>
       <ActionIcon
-        icon={SettingsIcon}
+        icon={Settings2}
         onClick={() => {
           setOpen(true);
         }}

diff --git a/src/features/PluginStore/index.tsx b/src/features/PluginStore/index.tsx
@@ -1,8 +1,9 @@
-import { Icon, Modal, SpotlightCard, TabsNav } from '@lobehub/ui';
-import { Button, Empty } from 'antd';
+import { Icon, Modal, SearchBar } from '@lobehub/ui';
+import { Button, Empty, Segmented } from 'antd';
+import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { ServerCrash } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -13,13 +14,24 @@ import { pluginStoreSelectors } from '@/store/tool/selectors';
 import Loading from './Loading';
 import PluginItem from './PluginItem';
 
+const useStyles = createStyles(({ css, token }) => ({
+  header: css`
+    color: ${token.colorTextDescription};
+
+    > div {
+      flex: 1;
+    }
+  `,
+}));
+
 interface PluginStoreProps {
   open?: boolean;
   setOpen: (open: boolean) => void;
 }
 export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
+  const [keywords, setKeywords] = useState<string>();
   const { t } = useTranslation('plugin');
-
+  const { styles } = useStyles();
   const [listType, useFetchPluginList, installPlugins] = useToolStore((s) => [
     s.listType,
     s.useFetchPluginStore,
@@ -43,28 +55,19 @@ export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
       <MobilePadding>
         <Center>
           <Flexbox gap={24} width={'100%'}>
-            <Flexbox align={'center'} horizontal justify={'space-between'}>
-              <TabsNav
-                activeKey={listType}
-                items={[
-                  { key: 'all', label: t('store.tabs.all') },
-                  { key: 'installed', label: t('store.tabs.installed') },
-                ]}
+            <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
+              <Segmented
+                block
                 onChange={(v) => {
                   useToolStore.setState({ listType: v as any });
                 }}
+                options={[
+                  { label: t('store.tabs.all'), value: 'all' },
+                  { label: t('store.tabs.installed'), value: 'installed' },
+                ]}
+                style={{ flex: 1 }}
+                value={listType}
               />
-              <Flexbox gap={8} horizontal>
-                {listType === 'all' && (
-                  <Button
-                    onClick={() => {
-                      installPlugins(pluginStoreList.map((item) => item.identifier));
-                    }}
-                  >
-                    {t('store.installAllPlugins')}
-                  </Button>
-                )}
-              </Flexbox>
             </Flexbox>
             {isLoading ? (
               <Loading />
@@ -83,7 +86,37 @@ export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
                 )}
               </Center>
             ) : (
-              <SpotlightCard columns={2} gap={16} items={pluginStoreList} renderItem={PluginItem} />
+              <>
+                <Flexbox className={styles.header} gap={8} horizontal>
+                  <SearchBar
+                    allowClear
+                    onChange={(e) => setKeywords(e.target.value)}
+                    placeholder={t('store.placeholder')}
+                    type={'block'}
+                    value={keywords}
+                  />
+                  {listType === 'all' && (
+                    <Button
+                      onClick={() => {
+                        installPlugins(pluginStoreList.map((item) => item.identifier));
+                      }}
+                    >
+                      {t('store.installAllPlugins')}
+                    </Button>
+                  )}
+                </Flexbox>
+
+                {pluginStoreList
+                  .filter((item) =>
+                    [item.meta.title, item.meta.description, item.author, ...(item.meta.tags || [])]
+                      .join('')
+                      .toLowerCase()
+                      .includes((keywords || '')?.toLowerCase()),
+                  )
+                  .map((item) => (
+                    <PluginItem key={item.identifier} {...item} />
+                  ))}
+              </>
             )}
           </Flexbox>
         </Center>

diff --git a/src/layout/GlobalLayout/Locale.tsx b/src/layout/GlobalLayout/Locale.tsx
@@ -15,7 +15,7 @@ const InnerLocale = memo<LocaleLayoutProps>(({ children, lang }) => {
   const { data: locale } = useSWR(
     lang,
     async () =>
-      await import(`antd/locale/${lang?.includes('-') ? lang?.replace('-', '_') : 'en-US'}.js`),
+      await import(`antd/locale/${lang?.includes('-') ? lang?.replace('-', '_') : 'en_US'}.js`),
     { revalidateOnFocus: false },
   );
   const [i18n] = useState(createI18nNext(lang));

diff --git a/src/locales/default/plugin.ts b/src/locales/default/plugin.ts
@@ -118,6 +118,7 @@ export default {
     install: '安装',
     installAllPlugins: '安装全部',
     networkError: '获取插件商店失败，请检测网络连接后重试',
+    placeholder: '搜索插件名称介绍或关键词...',
     releasedAt: '发布于 {{createdAt}}',
     tabs: {
       all: '全部',