@lobehub/chat 0.111.0 → 0.111.2

package/.i18nrc.js

@@ -1,8 +1,6 @@
-const { description } = require('./package.json');
 const { defineConfig } = require('@lobehub/i18n-cli');
 
 module.exports = defineConfig({
-  reference: description,
   entry: 'locales/zh_CN',
   entryLocale: 'zh_CN',
   output: 'locales',

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 # Changelog
 
+### [Version 0.111.2](https://github.com/lobehub/lobe-chat/compare/v0.111.1...v0.111.2)
+
+<sup>Released on **2023-12-13**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Change topic-deletion hotkey.
+
+#### 💄 Styles
+
+- **misc**: Fix image display in safari (fix.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Change topic-deletion hotkey, closes [#616](https://github.com/lobehub/lobe-chat/issues/616) ([912ff45](https://github.com/lobehub/lobe-chat/commit/912ff45))
+
+#### Styles
+
+- **misc**: Fix image display in safari (fix, closes [#571](https://github.com/lobehub/lobe-chat/issues/571) ([4beefa7](https://github.com/lobehub/lobe-chat/commit/4beefa7))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.111.1](https://github.com/lobehub/lobe-chat/compare/v0.111.0...v0.111.1)
+
+<sup>Released on **2023-12-13**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix locale typo.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix locale typo ([f44b41e](https://github.com/lobehub/lobe-chat/commit/f44b41e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.111.0](https://github.com/lobehub/lobe-chat/compare/v0.110.10...v0.111.0)
 
 <sup>Released on **2023-12-13**</sup>

package/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..."
   }
 }

package/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..."
   }
 }

package/locales/ja_JP/plugin.json

@@ -123,6 +123,7 @@
       "installed": "インストール済み"
     },
     "title": "プラグインストア",
-    "uninstall": "アンインストール"
+    "uninstall": "アンインストール",
+    "placeholder": "プラグイン名、説明、またはキーワードで検索..."
   }
 }

package/locales/ko_KR/plugin.json

@@ -123,6 +123,7 @@
       "installed": "설치됨"
     },
     "title": "플러그인 상점",
-    "uninstall": "제거"
+    "uninstall": "제거",
+    "placeholder": "플러그인 이름 또는 키워드로 검색..."
   }
 }

package/locales/ru_RU/plugin.json

@@ -1,128 +1,129 @@
 {
   "debug": {
-    "arguments": "调用参数",
-    "function_call": "函数调用",
-    "off": "关闭调试",
-    "on": "查看插件调用信息",
-    "response": "返回结果"
+    "arguments": "Аргументы вызова",
+    "function_call": "Вызов функции",
+    "off": "Отключить отладку",
+    "on": "Показать информацию о вызове плагина",
+    "response": "Ответ"
   },
   "dev": {
-    "confirmDeleteDevPlugin": "即将删除该本地插件，删除后将无法找回，是否删除该插件？",
-    "deleteSuccess": "插件删除成功",
+    "confirmDeleteDevPlugin": "Вы уверены, что хотите удалить этот локальный плагин? После удаления его будет невозможно восстановить.",
+    "deleteSuccess": "Плагин успешно удален",
     "manifest": {
       "identifier": {
-        "desc": "插件的唯一标识",
-        "label": "标识符"
+        "desc": "Уникальный идентификатор плагина",
+        "label": "Идентификатор"
       },
       "mode": {
-        "local": "可视化配置",
-        "local-tooltip": "暂时不支持可视化配置",
-        "url": "在线链接"
+        "local": "Локальная настройка",
+        "local-tooltip": "Визуальная настройка временно не поддерживается",
+        "url": "Онлайн-ссылка"
       },
       "name": {
-        "desc": "插件标题",
-        "label": "标题",
-        "placeholder": "搜索引擎"
+        "desc": "Название плагина",
+        "label": "Название",
+        "placeholder": "Поиск поисковой системы"
       }
     },
     "meta": {
       "author": {
-        "desc": "插件的作者",
-        "label": "作者"
+        "desc": "Автор плагина",
+        "label": "Автор"
       },
       "avatar": {
-        "desc": "插件的图标，可以使用 Emoji，也可以使用 URL",
-        "label": "图标"
+        "desc": "Иконка плагина, можно использовать Emoji или URL",
+        "label": "Иконка"
       },
       "description": {
-        "desc": "插件描述",
-        "label": "描述",
-        "placeholder": "查询搜索引擎获取信息"
+        "desc": "Описание плагина",
+        "label": "Описание",
+        "placeholder": "Получение информации из поисковой системы"
       },
-      "formFieldRequired": "该字段为必填项",
+      "formFieldRequired": "Это обязательное поле",
       "homepage": {
-        "desc": "插件的首页",
-        "label": "首页"
+        "desc": "Домашняя страница плагина",
+        "label": "Домашняя страница"
       },
       "identifier": {
-        "desc": "插件的唯一标识，将从 manifest 中自动识别",
-        "errorDuplicate": "标识符和已有插件重复，请修改标识符",
-        "label": "标识符",
-        "pattenErrorMessage": "只能输入英文字符、数字 、- 和_ 这两个符号"
+        "desc": "Уникальный идентификатор плагина, будет автоматически определен из манифеста",
+        "errorDuplicate": "Идентификатор совпадает с существующим плагином, измените идентификатор",
+        "label": "Идентификатор",
+        "pattenErrorMessage": "Можно вводить только буквы, цифры, - и _"
       },
       "manifest": {
-        "desc": "LobeChat 将会通过该链接安装插件",
-        "label": "插件描述文件 (Manifest) URL",
-        "preview": "预览 Manifest",
-        "refresh": "刷新"
+        "desc": "LobeChat установит плагин через эту ссылку",
+        "label": "URL манифеста плагина",
+        "preview": "Предпросмотр манифеста",
+        "refresh": "Обновить"
       },
       "title": {
-        "desc": "插件标题",
-        "label": "标题",
-        "placeholder": "搜索引擎"
+        "desc": "Название плагина",
+        "label": "Название",
+        "placeholder": "Поиск поисковой системы"
       }
     },
-    "metaConfig": "插件元信息配置",
-    "modalDesc": "添加自定义插件后，可用于插件开发验证，也可直接在会话中使用。插件开发请参考<1>开发文档↗</>",
+    "metaConfig": "Настройка метаданных плагина",
+    "modalDesc": "После добавления пользовательского плагина его можно использовать для проверки разработки плагина или непосредственно в сеансе. См. <1>документацию по разработке↗</> для разработки плагинов.",
     "preview": {
-      "card": "预览插件展示效果",
-      "desc": "预览插件描述",
-      "title": "插件名称预览"
+      "card": "Предпросмотр отображения плагина",
+      "desc": "Предпросмотр описания плагина",
+      "title": "Предпросмотр названия плагина"
     },
-    "save": "安装插件",
-    "saveSuccess": "插件设置保存成功",
+    "save": "Установить плагин",
+    "saveSuccess": "Настройки плагина успешно сохранены",
     "tabs": {
-      "manifest": "功能描述清单 (Manifest)",
-      "meta": "插件元信息"
+      "manifest": "Описание функций (манифест)",
+      "meta": "Метаданные плагина"
     },
-    "title": "添加自定义插件",
-    "update": "更新",
-    "updateSuccess": "插件设置更新成功"
+    "title": "Добавить пользовательский плагин",
+    "update": "Обновить",
+    "updateSuccess": "Настройки плагина успешно обновлены"
   },
   "error": {
-    "fetchError": "请求该 manifest 链接失败，请确保链接的有效性，并检查链接是否允许跨域访问",
-    "installError": "插件 {{name}} 安装失败",
-    "manifestInvalid": " manifest 不符合规范，校验结果: \n\n {{error}}",
-    "noManifest": "描述文件不存在",
-    "reinstallError": "插件 {{name}} 刷新失败",
-    "urlError": "该链接没有返回 JSON 格式的内容, 请确保是有效的链接"
+    "fetchError": "Не удалось получить доступ к этой ссылке на манифест. Убедитесь, что ссылка действительна, и проверьте, разрешен ли кросс-доменный доступ.",
+    "installError": "Ошибка установки плагина {{name}}",
+    "manifestInvalid": "Манифест не соответствует стандартам. Результат проверки: \n\n {{error}}",
+    "noManifest": "Файл манифеста не существует",
+    "reinstallError": "Ошибка обновления плагина {{name}}",
+    "urlError": "Эта ссылка не возвращает содержимое в формате JSON. Убедитесь, что ссылка действительна."
   },
   "list": {
     "item": {
-      "deprecated.title": "已删除",
-      "local.config": "配置",
-      "local.title": "自定义"
+      "deprecated.title": "Удалено",
+      "local.config": "Настройка",
+      "local.title": "Пользовательский"
     }
   },
   "loading": {
-    "content": "调用插件中...",
-    "plugin": "插件运行中..."
+    "content": "Вызов плагина...",
+    "plugin": "Выполнение плагина..."
   },
-  "pluginList": "插件列表",
+  "pluginList": "Список плагинов",
   "plugins": {
-    "loading": "检测插件中...",
-    "unknown": "未知插件"
+    "loading": "Проверка плагинов...",
+    "unknown": "Неизвестный плагин"
   },
-  "setting": "插件设置",
+  "setting": "Настройки плагина",
   "settings": {
     "indexUrl": {
-      "title": "市场索引",
-      "tooltip": "暂不支持在线编辑，请通过部署时环境变量进行设置"
+      "title": "Индекс рынка",
+      "tooltip": "В настоящее время не поддерживается онлайн-редактирование. Установите через переменные среды при развертывании"
     },
-    "modalDesc": "配置插件市场的地址后，可以使用自定义的插件市场",
-    "title": "设置插件市场"
+    "modalDesc": "После настройки адреса рынка плагинов можно использовать настраиваемый рынок плагинов",
+    "title": "Настройки рынка плагинов"
   },
   "store": {
-    "empty": "暂无已安装插件",
-    "install": "安装",
-    "installAllPlugins": "安装全部",
-    "networkError": "获取插件商店失败，请检测网络连接后重试",
-    "releasedAt": "发布于 {{createdAt}}",
+    "empty": "Пока нет установленных плагинов",
+    "install": "Установить",
+    "installAllPlugins": "Установить все",
+    "networkError": "Не удалось получить доступ к магазину плагинов. Пожалуйста, проверьте подключение к сети и повторите попытку",
+    "releasedAt": "Опубликовано {{createdAt}}",
     "tabs": {
-      "all": "全部",
-      "installed": "已安装"
+      "all": "Все",
+      "installed": "Установленные"
     },
-    "title": "插件商店",
-    "uninstall": "卸载"
+    "title": "Магазин плагинов",
+    "uninstall": "Удалить",
+    "placeholder": "Введите название или ключевое слово плагина..."
   }
 }

package/locales/zh_CN/plugin.json

@@ -117,6 +117,7 @@
     "install": "安装",
     "installAllPlugins": "安装全部",
     "networkError": "获取插件商店失败，请检测网络连接后重试",
+    "placeholder": "搜索插件名称介绍或关键词...",
     "releasedAt": "发布于 {{createdAt}}",
     "tabs": {
       "all": "全部",

package/locales/zh_TW/plugin.json

@@ -123,6 +123,7 @@
       "installed": "已安裝"
     },
     "title": "插件商店",
-    "uninstall": "卸載"
+    "uninstall": "卸載",
+    "placeholder": "搜尋插件名稱介紹或關鍵字..."
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.111.0",
+  "version": "0.111.2",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/chat/features/ChatInput/ActionBar/Clear.tsx

@@ -6,7 +6,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
 import HotKeys from '@/components/HotKeys';
-import { CLEAN_MESSAGE_KEY, PREFIX_KEY } from '@/const/hotkeys';
+import { CLEAN_MESSAGE_KEY, META_KEY, PREFIX_KEY } from '@/const/hotkeys';
 import { useChatStore } from '@/store/chat';
 import { useFileStore } from '@/store/file';
 
@@ -14,7 +14,7 @@ const Clear = memo(() => {
   const { t } = useTranslation('setting');
   const [clearMessage] = useChatStore((s) => [s.clearMessage]);
   const [clearImageList] = useFileStore((s) => [s.clearImageList]);
-  const hotkeys = [PREFIX_KEY, CLEAN_MESSAGE_KEY].join('+');
+  const hotkeys = [META_KEY, PREFIX_KEY, CLEAN_MESSAGE_KEY].join('+');
 
   const resetConversation = useCallback(() => {
     clearMessage();

package/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')}

package/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)}
     />
   );

package/src/components/HotKeys/index.tsx

@@ -1,10 +1,13 @@
 'use client';
 
+import { Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
+import { isString } from 'lodash-es';
+import { Command, Delete, Option } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { CLEAN_MESSAGE_KEY, PREFIX_KEY } from '@/const/hotkeys';
+import { CLEAN_MESSAGE_KEY, META_KEY, PREFIX_KEY } from '@/const/hotkeys';
 import { isApplePlatform } from '@/utils/platform';
 
 const useStyles = createStyles(
@@ -13,14 +16,15 @@ const useStyles = createStyles(
 
     span {
       font-weight: 600;
-      opacity: 0.5;
     }
 
     kbd {
-      padding: 3px 5px;
+      min-width: 16px;
+      padding: 3px 6px;
 
       line-height: 1;
-      color: ${token.colorTextSecondary};
+      color: ${token.colorTextDescription};
+      text-align: center;
 
       background: ${token.colorBgContainer};
       border: 1px solid ${token.colorBorderSecondary};
@@ -42,9 +46,10 @@ const HotKeys = memo<HotKeysProps>(({ keys, desc }) => {
   const visibility = typeof window === 'undefined' ? 'hidden' : 'visible';
 
   useEffect(() => {
-    const mapping: Record<string, string> = {
-      [CLEAN_MESSAGE_KEY]: isApplePlatform() ? '⌫' : 'backspace',
-      [PREFIX_KEY]: isApplePlatform() ? '⌥' : 'alt',
+    const mapping: Record<string, any> = {
+      [CLEAN_MESSAGE_KEY]: isApplePlatform() ? <Icon icon={Delete} /> : 'backspace',
+      [META_KEY]: isApplePlatform() ? <Icon icon={Command} /> : 'ctrl',
+      [PREFIX_KEY]: isApplePlatform() ? <Icon icon={Option} /> : 'alt',
     };
     const newValue = keys
       .split('+')
@@ -57,7 +62,7 @@ const HotKeys = memo<HotKeysProps>(({ keys, desc }) => {
     <Flexbox align={'center'} className={styles} gap={2} horizontal>
       {keysGroup.map((key, index) => (
         <kbd key={index}>
-          <span style={{ visibility }}>{key.toUpperCase()}</span>
+          <span style={{ visibility }}>{isString(key) ? key.toUpperCase() : key}</span>
         </kbd>
       ))}
     </Flexbox>

package/src/const/hotkeys.ts

@@ -1,4 +1,5 @@
 export const PREFIX_KEY = 'alt';
+export const META_KEY = 'mod';
 export const SAVE_TOPIC_KEY = 'n';
 export const CLEAN_MESSAGE_KEY = 'backspace';
 export const REGENERATE_KEY = 'r';

package/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={

package/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();

package/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,13 +15,13 @@ 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;
@@ -28,52 +29,52 @@ const useStyles = createStyles(({ css, token }) => ({
     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>
   );
 });

package/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);
         }}

package/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>

package/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));

package/src/locales/default/plugin.ts

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

package/src/store/middleware/createHyperStorage/keyMapper.ts

@@ -13,8 +13,6 @@ export const createKeyMapper = (options: HyperStorageOptions) => {
 
     let storageKey: string | undefined;
 
-    if (!selectors) return key;
-
     for (const selector of selectors) {
       if (typeof selector === 'string') {
         if (selector === key) storageKey = key;