💄 style: Fix some styles and make updates to various files

- Add new files related to chat, market, settings, and plugin development - Modify code in certain files to add functionality and improve performance - Update URLs and add links to external resources - Add styles to components for improved appearance - Update descriptions and improve user experience This commit introduces new features, updates existing code, and enhances the overall functionality and appearance of the codebase.
lobehub · Oct 28, 2023 · 44a5f0a · 44a5f0a
1 parent a73e519
commit 44a5f0a
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 41 deletions.
diff --git a/public/images/banner_market_modal.webp b/public/images/banner_market_modal.webp
diff --git a/public/images/market_modal_banner.webp b/public/images/market_modal_banner.webp
diff --git a/src/app/chat/features/SessionListContent/Inbox/index.tsx b/src/app/chat/features/SessionListContent/Inbox/index.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { memo, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useStyles } from '@/app/chat/features/SessionListContent/List/Item';
 import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { SESSION_CHAT_URL } from '@/const/url';
@@ -14,6 +15,7 @@ const { Item } = List;
 
 const Inbox = memo(() => {
   const ref = useRef(null);
+  const { styles } = useStyles();
   const isHovering = useHover(ref);
   const { t } = useTranslation('chat');
   const { mobile } = useResponsive();
@@ -48,8 +50,8 @@ const Inbox = memo(() => {
       <Item
         active={mobile ? false : activeId === INBOX_SESSION_ID}
         avatar={avatarRender}
+        className={styles.container}
         ref={ref}
-        style={{ alignItems: 'center', borderRadius: 8 }}
         title={t('inbox.title')}
       />
     </Link>

diff --git a/src/app/chat/features/SessionListContent/List/Item/index.tsx b/src/app/chat/features/SessionListContent/List/Item/index.tsx
@@ -14,15 +14,14 @@ import Actions from './Actions';
 
 const { Item } = List;
 
-const useStyles = createStyles(({ css }) => {
+export const useStyles = createStyles(({ css, token, responsive }) => {
   return {
     container: css`
       position: relative;
-      border-radius: 8px;
-    `,
-
-    modalRoot: css`
-      z-index: 2000;
+      border-radius: ${token.borderRadius}px;
+      ${responsive.mobile} {
+        border-radius: 0;
+      }
     `,
   };
 });

diff --git a/src/app/market/features/ShareAgentButton/Inner.tsx b/src/app/market/features/ShareAgentButton/Inner.tsx
@@ -5,16 +5,17 @@ import Image from 'next/image';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import MobilePadding from '@/components/MobilePadding';
 import { AGENTS_INDEX_GITHUB } from '@/const/url';
 
 const Inner = memo(() => {
   const { t } = useTranslation('market');
   return (
-    <div>
+    <MobilePadding>
       <Image
         alt={'banner'}
         height={602}
-        src={'/images/market_modal_banner.webp'}
+        src={'/images/banner_market_modal.webp'}
         style={{ height: 'auto', marginBottom: 24, width: '100%' }}
         width={1602}
       />
@@ -45,7 +46,7 @@ const Inner = memo(() => {
       >
         {t('guide.func2.button')}
       </Button>
-    </div>
+    </MobilePadding>
   );
 });
 

diff --git a/src/app/settings/features/SideBar/Item.tsx b/src/app/settings/features/SideBar/Item.tsx
@@ -5,10 +5,15 @@ import { CSSProperties, ReactNode, memo } from 'react';
 
 const { Item } = List;
 
-const useStyles = createStyles(({ css }) => ({
+const useStyles = createStyles(({ css, token, responsive }) => ({
   container: css`
+    position: relative;
     padding-top: 20px;
     padding-bottom: 20px;
+    border-radius: ${token.borderRadius}px;
+    ${responsive.mobile} {
+      border-radius: 0;
+    }
   `,
 }));
 

diff --git a/src/app/settings/features/SideBar/index.tsx b/src/app/settings/features/SideBar/index.tsx
@@ -31,7 +31,9 @@ const SideBar = memo(() => {
           </div>
         </Flexbox>
         <UpgradeAlert />
-        <List />
+        <Flexbox gap={2} style={{ paddingInline: 6 }}>
+          <List />
+        </Flexbox>
       </DraggablePanelBody>
     </FolderPanel>
   );

diff --git a/src/const/url.ts b/src/const/url.ts
@@ -10,6 +10,7 @@ import { INBOX_SESSION_ID } from './session';
 export const GITHUB = pkg.homepage;
 export const CHANGELOG = urlJoin(GITHUB, 'blob/master/CHANGELOG.md');
 export const WIKI = urlJoin(GITHUB, 'wiki');
+export const WIKI_PLUGIN_GUIDE = urlJoin(WIKI, 'Plugin-Development');
 export const ABOUT = pkg.homepage;
 export const FEEDBACK = pkg.bugs.url;
 export const DISCORD = 'https://discord.gg/AYFPHvv2jT';

diff --git a/src/features/AgentSetting/AgentPlugin/MarketList.tsx b/src/features/AgentSetting/AgentPlugin/MarketList.tsx
@@ -181,7 +181,17 @@ const MarketList = memo(() => {
           {
             children: isEmpty ? loadingList : [...deprecatedList, ...customList, ...list],
             extra: (
-              <Flexbox align={'center'} gap={8} horizontal>
+              <Space.Compact style={{ width: 'auto' }}>
+                <Button
+                  icon={<Icon icon={LucideBlocks} />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setModal(true);
+                  }}
+                  size={'small'}
+                >
+                  {t('settingPlugin.addTooltip')}
+                </Button>
                 {hasDeprecated ? (
                   <Tooltip title={t('settingPlugin.clearDeprecated')}>
                     <Button
@@ -193,34 +203,20 @@ const MarketList = memo(() => {
                         }
                       }}
                       size={'small'}
-                      type={'text'}
                     />
                   </Tooltip>
                 ) : null}
-
-                <Space.Compact style={{ width: 'auto' }}>
-                  <Tooltip title={t('settingPlugin.addTooltip')}>
-                    <Button
-                      icon={<Icon icon={LucideBlocks} />}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setModal(true);
-                      }}
-                      size={'small'}
-                    />
-                  </Tooltip>
-                  <Tooltip title={t('settingPlugin.settings')}>
-                    <Button
-                      icon={<Icon icon={LucideSettings} />}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setShowSettings(true);
-                      }}
-                      size={'small'}
-                    />
-                  </Tooltip>
-                </Space.Compact>
-              </Flexbox>
+                <Tooltip title={t('settingPlugin.settings')}>
+                  <Button
+                    icon={<Icon icon={LucideSettings} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setShowSettings(true);
+                    }}
+                    size={'small'}
+                  />
+                </Tooltip>
+              </Space.Compact>
             ),
             icon: LucideStore,
             title: t('settingPlugin.title'),

diff --git a/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx b/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import MobilePadding from '@/components/MobilePadding';
-import { PLUGINS_INDEX_URL } from '@/const/url';
+import { PLUGINS_INDEX_URL, WIKI_PLUGIN_GUIDE } from '@/const/url';
 
 interface MarketSettingModalProps {
   onOpenChange: (open: boolean) => void;
@@ -34,7 +34,14 @@ const MarketSettingModal = memo<MarketSettingModalProps>(({ open, onOpenChange }
                       style={{ width: '100%' }}
                     />
                   ),
-                  desc: t('settings.modalDesc'),
+                  desc: (
+                    <>
+                      {t('dev.modalDesc')}
+                      <a href={WIKI_PLUGIN_GUIDE} rel="noreferrer" target={'_blank'}>
+                        {WIKI_PLUGIN_GUIDE}
+                      </a>
+                    </>
+                  ),
                   label: t('settings.indexUrl.title'),
                 },
               ],

diff --git a/src/features/PluginDevModal/index.tsx b/src/features/PluginDevModal/index.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import MobilePadding from '@/components/MobilePadding';
+import { WIKI_PLUGIN_GUIDE } from '@/const/url';
 import { CustomPlugin } from '@/types/plugin';
 
 import ManifestForm from './ManifestForm';
@@ -102,7 +103,18 @@ const DevModal = memo<DevModalProps>(
         >
           <Flexbox gap={mobile ? 0 : 16}>
             <MobilePadding bottom={0} gap={16}>
-              <Alert message={t('dev.modalDesc')} showIcon type={'info'} />
+              <Alert
+                message={
+                  <>
+                    {t('dev.modalDesc')}
+                    <a href={WIKI_PLUGIN_GUIDE} rel="noreferrer" target={'_blank'}>
+                      {WIKI_PLUGIN_GUIDE}
+                    </a>
+                  </>
+                }
+                showIcon
+                type={'info'}
+              />
               {/*<Tabs*/}
               {/*  items={[*/}
               {/*    { children: <MetaForm />, key: 'meta', label: t('dev.tabs.meta') },*/}