💄 style: Update tool style

OskarMast · Dec 15, 2023 · 292a3e1 · 292a3e1
1 parent 6bb547f
commit 292a3e1
Show file tree

Hide file tree

Showing 25 changed files with 248 additions and 130 deletions.
diff --git a/src/app/chat/features/ChatInput/ActionBar/Tools/ToolItem.tsx b/src/app/chat/features/ChatInput/ActionBar/Tools/ToolItem.tsx
@@ -1,15 +1,14 @@
-import { Checkbox, Tag } from 'antd';
+import { Checkbox } from 'antd';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { useToolStore } from '@/store/tool';
 import { customPluginSelectors } from '@/store/tool/selectors';
 
 const ToolItem = memo<{ identifier: string; label: string }>(({ identifier, label }) => {
-  const { t } = useTranslation('plugin');
   const [checked, togglePlugin] = useSessionStore((s) => [
     agentSelectors.currentAgentPlugins(s).includes(identifier),
     s.togglePlugin,
@@ -30,11 +29,7 @@ const ToolItem = memo<{ identifier: string; label: string }>(({ identifier, labe
     >
       <Flexbox align={'center'} gap={8} horizontal>
         {label}
-        {isCustom && (
-          <Tag bordered={false} color={'gold'}>
-            {t('list.item.local.title')}
-          </Tag>
-        )}
+        {isCustom && <PluginTag showText={false} type={'customPlugin'} />}
       </Flexbox>
       <Checkbox
         checked={checked}

diff --git a/src/app/chat/features/ChatInput/ActionBar/Tools/index.tsx b/src/app/chat/features/ChatInput/ActionBar/Tools/index.tsx
@@ -103,7 +103,7 @@ const Tools = memo(() => {
             e.domEvent.preventDefault();
           },
         }}
-        placement={'topLeft'}
+        placement={'top'}
         trigger={['click']}
       >
         <ActionIcon icon={PencilRuler} placement={'bottom'} title={t('tools.title')} />

diff --git a/src/app/market/features/AgentDetailContent/AgentInfo/index.tsx b/src/app/market/features/AgentDetailContent/AgentInfo/index.tsx
@@ -55,6 +55,7 @@ const AgentModalInner = memo(() => {
             },
           ]}
           onChange={setTab}
+          variant={'compact'}
         />
       </Flexbox>
       <Flexbox style={{ padding: 16 }}>

diff --git a/src/app/market/features/AgentDetailContent/AgentInfo/style.ts b/src/app/market/features/AgentDetailContent/AgentInfo/style.ts
@@ -29,15 +29,7 @@ export const useStyles = createStyles(({ css, token, prefixCls, stylish }) => ({
   `,
   markdown: stylish.markdownInChat,
   nav: css`
-    padding-top: 4px;
-
-    .${prefixCls}-tabs-tab {
-      margin: 4px !important;
-
-      + .${prefixCls}-tabs-tab {
-        margin: 4px !important;
-      }
-    }
+    padding-top: 8px;
   `,
   title: css`
     font-size: 20px;

diff --git a/src/components/FileList/FileItem.tsx b/src/components/FileList/FileItem.tsx
@@ -3,6 +3,7 @@ import { createStyles } from 'antd-style';
 import { Trash } from 'lucide-react';
 import { CSSProperties, memo, useCallback } from 'react';
 
+import { usePlatform } from '@/hooks/usePlatform';
 import { useFileStore } from '@/store/file';
 
 import { MIN_IMAGE_SIZE } from './style';
@@ -38,6 +39,7 @@ const FileItem = memo<FileItemProps>(({ editable, id, alwaysShowClose }) => {
   const IMAGE_SIZE = editable ? MIN_IMAGE_SIZE : '100%';
   const { data, isLoading } = useFetchFile(id);
   const { styles, cx } = useStyles();
+  const { isSafari } = usePlatform();
 
   const handleRemoveFile = useCallback(
     (e: any) => {
@@ -62,11 +64,11 @@ const FileItem = memo<FileItemProps>(({ editable, id, alwaysShowClose }) => {
       }
       alt={data?.name || id || ''}
       alwaysShowActions={alwaysShowClose}
-      height={'auto'}
+      height={isSafari ? 'auto' : '100%'}
       isLoading={isLoading}
       size={IMAGE_SIZE as any}
       src={data?.url}
-      style={{ height: 'auto' }}
+      style={{ height: isSafari ? 'auto' : '100%' }}
       wrapperClassName={cx(styles.image, editable && styles.editableImage)}
     />
   );

diff --git a/src/components/HotKeys/index.tsx b/src/components/HotKeys/index.tsx
@@ -8,7 +8,7 @@ import { memo, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { CLEAN_MESSAGE_KEY, META_KEY, PREFIX_KEY } from '@/const/hotkeys';
-import { isApplePlatform } from '@/utils/platform';
+import { usePlatform } from '@/hooks/usePlatform';
 
 const useStyles = createStyles(
   ({ css, token }) => css`
@@ -44,12 +44,13 @@ const HotKeys = memo<HotKeysProps>(({ keys, desc }) => {
   const { styles } = useStyles();
   const [keysGroup, setKeysGroup] = useState(keys.split('+'));
   const visibility = typeof window === 'undefined' ? 'hidden' : 'visible';
+  const { isApple } = usePlatform();
 
   useEffect(() => {
     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',
+      [CLEAN_MESSAGE_KEY]: isApple ? <Icon icon={Delete} /> : 'backspace',
+      [META_KEY]: isApple ? <Icon icon={Command} /> : 'ctrl',
+      [PREFIX_KEY]: isApple ? <Icon icon={Option} /> : 'alt',
     };
     const newValue = keys
       .split('+')

diff --git a/src/features/AgentSetting/AgentPlugin/AddPluginButton.tsx b/src/features/AgentSetting/AgentPlugin/AddPluginButton.tsx
@@ -1,6 +1,6 @@
 import { Icon } from '@lobehub/ui';
 import { Button } from 'antd';
-import { LucideBlocks } from 'lucide-react';
+import { PackagePlus } from 'lucide-react';
 import { forwardRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -33,7 +33,7 @@ const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
         open={showModal}
       />
       <Button
-        icon={<Icon icon={LucideBlocks} />}
+        icon={<Icon icon={PackagePlus} />}
         onClick={() => {
           setModal(true);
         }}

diff --git a/src/features/AgentSetting/AgentPlugin/index.tsx b/src/features/AgentSetting/AgentPlugin/index.tsx
@@ -8,6 +8,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import PluginStore from '@/features/PluginStore';
+import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
@@ -36,31 +37,24 @@ const AgentPlugin = memo(() => {
 
   //  =========== Plugin List =========== //
 
-  const list = installedPlugins.map(({ identifier, type, meta }) => {
+  const list = installedPlugins.map(({ identifier, type, meta, author }) => {
     const isCustomPlugin = type === 'customPlugin';
 
     return {
-      avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta)} />,
+      avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta)} style={{ flex: 'none' }} />,
       children: isCustomPlugin ? (
         <LocalPluginItem id={identifier} />
       ) : (
         <PluginAction identifier={identifier} />
       ),
-
       desc: pluginHelpers.getPluginDesc(meta),
-
-      label: isCustomPlugin ? (
+      label: (
         <Flexbox align={'center'} gap={8} horizontal>
           {pluginHelpers.getPluginTitle(meta)}
-          <Tag bordered={false} color={'gold'}>
-            {t('list.item.local.title', { ns: 'plugin' })}
-          </Tag>
+          <PluginTag author={author} type={type} />
         </Flexbox>
-      ) : (
-        pluginHelpers.getPluginTitle(meta)
       ),
       minWidth: undefined,
-      tag: identifier,
     };
   });
 

diff --git a/src/features/PluginDetailModal/APIs.tsx b/src/features/PluginDetailModal/APIs.tsx
@@ -23,6 +23,7 @@ const APIs = memo<{
           {
             dataIndex: 'name',
             ellipsis: true,
+            render: (name: string) => <code>{name}</code>,
             title: t('detailModal.info.name'),
           },
           {

diff --git a/src/features/PluginDetailModal/Meta.tsx b/src/features/PluginDetailModal/Meta.tsx
@@ -1,34 +1,58 @@
-import { Avatar } from '@lobehub/ui';
-import { Typography } from 'antd';
-import { useTheme } from 'antd-style';
+import { Avatar, Tag } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
+import { startCase } from 'lodash-es';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Center } from 'react-layout-kit';
 
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
+const useStyles = createStyles(({ css, token, stylish }) => ({
+  avatar: css`
+    flex: none;
+  `,
+  desc: css`
+    color: ${token.colorTextDescription};
+    text-align: center;
+  `,
+  markdown: stylish.markdownInChat,
+
+  title: css`
+    font-size: 20px;
+    font-weight: 600;
+    text-align: center;
+  `,
+}));
+
 const Meta = memo<{
   id: string;
 }>(({ id }) => {
   const pluginMeta = useToolStore(pluginSelectors.getPluginMetaById(id), isEqual);
-
-  const theme = useTheme();
+  const { styles, theme } = useStyles();
 
   return (
-    <>
+    <Center gap={16}>
       <Avatar
-        avatar={pluginHelpers.getPluginAvatar(pluginMeta) || '⚙️'}
-        background={theme.colorFillContent}
-        gap={12}
-        size={64}
+        animation
+        avatar={pluginHelpers.getPluginAvatar(pluginMeta)}
+        background={theme.colorFillTertiary}
+        className={styles.avatar}
+        size={100}
       />
 
-      <Flexbox style={{ fontSize: 20 }}>{pluginHelpers.getPluginTitle(pluginMeta)}</Flexbox>
-      <Typography.Text type={'secondary'}>
-        {pluginHelpers.getPluginDesc(pluginMeta)}
-      </Typography.Text>
-    </>
+      <div className={styles.title}>{pluginHelpers.getPluginTitle(pluginMeta)}</div>
+      {(pluginMeta?.tags as string[])?.length > 0 && (
+        <Center gap={6} horizontal style={{ flexWrap: 'wrap' }}>
+          {(pluginHelpers.getPluginTags(pluginMeta) as string[]).map((tag: string, index) => (
+            <Tag key={index} style={{ margin: 0 }}>
+              {startCase(tag).trim()}
+            </Tag>
+          ))}
+        </Center>
+      )}
+      <div className={styles.desc}>{pluginHelpers.getPluginDesc(pluginMeta)}</div>
+    </Center>
   );
 });
 

diff --git a/src/features/PluginDetailModal/index.tsx b/src/features/PluginDetailModal/index.tsx
@@ -44,7 +44,7 @@ const PluginDetailModal = memo<PluginDetailModalProps>(
         width={650}
       >
         <MobilePadding>
-          <Center gap={16}>
+          <Center gap={8}>
             <Meta id={id} />
             <Divider style={{ marginBottom: 0, marginTop: 8 }} />
             <TabsNav
@@ -62,6 +62,7 @@ const PluginDetailModal = memo<PluginDetailModalProps>(
                 ].filter(Boolean) as TabsProps['items']
               }
               onChange={setTabKey}
+              variant={'compact'}
             />
             {tabKey === 'settings' ? (
               hasSettings && <PluginSettingsConfig id={id} schema={schema} />

diff --git a/src/features/PluginDevModal/PluginPreview.tsx b/src/features/PluginDevModal/PluginPreview.tsx
@@ -1,36 +1,34 @@
 import { Avatar, Form } from '@lobehub/ui';
-import { Form as AForm, Card, FormInstance, Switch, Tag } from 'antd';
+import { Form as AForm, Card, FormInstance } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
 import { pluginHelpers } from '@/store/tool';
 import { LobeToolCustomPlugin } from '@/types/tool/plugin';
 
 const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
   const { t } = useTranslation('plugin');
 
   const plugin: LobeToolCustomPlugin = AForm.useWatch([], form);
+  const meta = plugin?.manifest?.meta;
 
   const items = {
-    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(plugin?.manifest?.meta)} />,
-    children: <Switch disabled />,
-    desc: pluginHelpers.getPluginDesc(plugin?.manifest?.meta),
+    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta)} style={{ flex: 'none' }} />,
+    desc: pluginHelpers.getPluginDesc(meta) || 'Plugin Description',
     label: (
       <Flexbox align={'center'} gap={8} horizontal>
-        {pluginHelpers.getPluginTitle(plugin?.manifest?.meta) ?? t('dev.preview.title')}
-        <Tag bordered={false} color={'gold'}>
-          {t('list.item.local.title', { ns: 'plugin' })}
-        </Tag>
+        {pluginHelpers.getPluginTitle(meta) || 'Plugin Title'}
+        <PluginTag type={'customPlugin'} />
       </Flexbox>
     ),
     minWidth: undefined,
-    tag: !!plugin?.identifier ? plugin?.identifier : 'id',
   };
 
   return (
     <Card size={'small'} title={t('dev.preview.card')}>
-      <Form.Item {...items} colon={false} style={{ alignItems: 'center', marginBottom: 0 }}  />
+      <Form.Item {...items} colon={false} style={{ alignItems: 'center', marginBottom: 0 }} />
     </Card>
   );
 });

diff --git a/src/features/PluginStore/AddPluginButton.tsx b/src/features/PluginStore/AddPluginButton.tsx
@@ -1,6 +1,6 @@
 import { Icon } from '@lobehub/ui';
 import { Button } from 'antd';
-import { LucideBlocks } from 'lucide-react';
+import { PackagePlus } from 'lucide-react';
 import { forwardRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -32,7 +32,7 @@ const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
         open={showModal}
       />
       <Button
-        icon={<Icon icon={LucideBlocks} />}
+        icon={<Icon icon={PackagePlus} />}
         onClick={() => {
           setModal(true);
         }}

diff --git a/src/features/PluginStore/InstalledPluginList.tsx b/src/features/PluginStore/InstalledPluginList.tsx
@@ -1,5 +1,8 @@
+import { SearchBar } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useToolStore } from '@/store/tool';
@@ -9,21 +12,40 @@ import AddPluginButton from './AddPluginButton';
 import PluginItem from './PluginItem';
 
 export const InstalledPluginList = memo(() => {
+  const { t } = useTranslation('plugin');
+  const [keywords, setKeywords] = useState<string>();
+  const { mobile } = useResponsive();
   const installedPlugins = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
 
   return (
     <Flexbox gap={16}>
       <Flexbox align={'center'} gap={16} horizontal justify={'space-between'}>
-        <Flexbox flex={1} />
+        <Flexbox flex={1}>
+          <SearchBar
+            allowClear
+            onChange={(e) => setKeywords(e.target.value)}
+            placeholder={t('store.placeholder')}
+            type={mobile ? 'block' : 'ghost'}
+            value={keywords}
+          />
+        </Flexbox>
         <Flexbox gap={8} horizontal>
           <AddPluginButton />
         </Flexbox>
       </Flexbox>
 
       <Flexbox gap={24}>
-        {installedPlugins.map((i) => (
-          <PluginItem {...i} key={i.identifier} />
-        ))}
+        {installedPlugins
+          .filter((item) =>
+            [item.meta?.title, item.meta?.description, item.author, ...(item.meta?.tags || [])]
+              .filter(Boolean)
+              .join('')
+              .toLowerCase()
+              .includes((keywords || '')?.toLowerCase()),
+          )
+          .map((i) => (
+            <PluginItem {...i} key={i.identifier} />
+          ))}
       </Flexbox>
     </Flexbox>
   );