💄 style: 优化 manifest 预览的尺寸

src/features/PluginDevModal/ManifestForm.tsx

@@ -21,17 +21,15 @@ const ManifestForm = memo<{ form: FormInstance; mode?: 'url' | 'local' }>(
               <Input
                 placeholder={'http://localhost:3400/manifest-dev.json'}
                 suffix={
-                  manifest && (
-                    <ActionIcon
-                      icon={RotateCwIcon}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        form.validateFields(['manifest']);
-                      }}
-                      size={'small'}
-                      title={t('dev.meta.manifest.refresh')}
-                    />
-                  )
+                  <ActionIcon
+                    icon={RotateCwIcon}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      form.validateFields(['manifest']);
+                    }}
+                    size={'small'}
+                    title={t('dev.meta.manifest.refresh')}
+                  />
                 }
               />
             ),
@@ -42,7 +40,7 @@ const ManifestForm = memo<{ form: FormInstance; mode?: 'url' | 'local' }>(
                   <Popover
                     arrow={false}
                     content={
-                      <Highlighter language={'json'}>
+                      <Highlighter language={'json'} style={{ maxHeight: 600, maxWidth: 400 }}>
                         {JSON.stringify(manifest, null, 2)}
                       </Highlighter>
                     }

src/pages/chat/features/Header/PluginTag/PluginStatus.tsx

@@ -0,0 +1,47 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Badge } from 'antd';
+import { LucideRotateCw } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { pluginSelectors, usePluginStore } from '@/store/plugin';
+
+const PluginStatus = memo<{ id: string; title?: string }>(({ title, id }) => {
+  const { t } = useTranslation('common');
+  const [status, fetchPluginManifest] = usePluginStore((s) => [
+    pluginSelectors.getPluginManifestLoadingStatus(id)(s),
+    s.fetchPluginManifest,
+  ]);
+
+  const renderStatus = useMemo(() => {
+    switch (status) {
+      case 'loading': {
+        return <Badge color={'blue'} status={'processing'} />;
+      }
+      case 'error': {
+        return (
+          <ActionIcon
+            icon={LucideRotateCw}
+            onClick={() => {
+              fetchPluginManifest(id);
+            }}
+            size={'small'}
+            title={t('retry')}
+          />
+        );
+      }
+      case 'success': {
+        return <Badge status={status} />;
+      }
+    }
+  }, [status]);
+
+  return (
+    <Flexbox gap={12} horizontal justify={'space-between'}>
+      {title} {renderStatus}
+    </Flexbox>
+  );
+});
+
+export default PluginStatus;

src/pages/chat/features/Header/PluginTag/index.tsx

@@ -1,50 +1,13 @@
-import { ActionIcon, Avatar, Icon, Tag } from '@lobehub/ui';
+import { Avatar, Icon, Tag } from '@lobehub/ui';
 import type { MenuProps } from 'antd';
-import { Badge, Dropdown } from 'antd';
+import { Dropdown } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { LucideRotateCw, LucideToyBrick } from 'lucide-react';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
+import { LucideToyBrick } from 'lucide-react';
+import { memo } from 'react';
 
 import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
 
-const PluginStatus = memo<{ id: string; title?: string }>(({ title, id }) => {
-  const { t } = useTranslation('common');
-  const [status, fetchPluginManifest] = usePluginStore((s) => [
-    pluginSelectors.getPluginManifestLoadingStatus(id)(s),
-    s.fetchPluginManifest,
-  ]);
-
-  const renderStatus = useMemo(() => {
-    switch (status) {
-      case 'loading': {
-        return <Badge color={'blue'} status={'processing'} />;
-      }
-      case 'error': {
-        return (
-          <ActionIcon
-            icon={LucideRotateCw}
-            onClick={() => {
-              fetchPluginManifest(id);
-            }}
-            size={'small'}
-            title={t('retry')}
-          />
-        );
-      }
-      case 'success': {
-        return <Badge status={status} />;
-      }
-    }
-  }, [status]);
-
-  return (
-    <Flexbox gap={12} horizontal justify={'space-between'}>
-      {title} {renderStatus}
-    </Flexbox>
-  );
-});
+import PluginStatus from './PluginStatus';
 
 export interface PluginTagProps {
   plugins: string[];