🚸 feat(plugin-dev): 优化 manifest 报错原因提示，并支持 id 从 manifest 自动获取

vincentngo · Sep 2, 2023 · 7f0787d · 7f0787d
1 parent 788d94b
commit 7f0787d
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git a/src/features/PluginDevModal/ManifestForm.tsx b/src/features/PluginDevModal/ManifestForm.tsx
@@ -1,18 +1,37 @@
-import { pluginManifestSchema } from '@lobehub/chat-plugin-sdk';
-import { Form, FormItemProps, Input, Tooltip } from '@lobehub/ui';
+import { LobeChatPluginManifest, pluginManifestSchema } from '@lobehub/chat-plugin-sdk';
+import { ActionIcon, Form, FormItemProps, Input, Tooltip } from '@lobehub/ui';
 import { FormInstance, Radio } from 'antd';
-import { memo } from 'react';
+import { RotateCwIcon } from 'lucide-react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const ManifestForm = memo<{ form: FormInstance; mode: 'url' | 'local' }>(({ form, mode }) => {
   const { t } = useTranslation('plugin');
 
+  const [manifest, setManifest] = useState<LobeChatPluginManifest>();
+
   const isUrl = mode === 'url';
 
   const configItem: FormItemProps[] = isUrl
     ? [
         {
-          children: <Input placeholder={'http://localhost/manifest.json'} />,
+          children: (
+            <Input
+              placeholder={'http://localhost:3400/manifest-dev.json'}
+              suffix={
+                manifest && (
+                  <ActionIcon
+                    icon={RotateCwIcon}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      form.validateFields(['manifest']);
+                    }}
+                    size={'small'}
+                  />
+                )
+              }
+            />
+          ),
           desc: t('dev.meta.manifest.desc'),
           hasFeedback: true,
           label: t('dev.meta.manifest.label'),
@@ -25,13 +44,29 @@ const ManifestForm = memo<{ form: FormInstance; mode: 'url' | 'local' }>(({ form
               pattern: /^https?:\/\/.*/,
             },
             {
-              message: t('dev.meta.manifest.invalid'),
+              // message: t('dev.meta.manifest.invalid'),
               validator: async (_, value) => {
-                const res = await fetch(value);
-                if (!res.ok) return true;
+                if (!value) return true;
+
+                let res: Response;
+
+                try {
+                  res = await fetch(value);
+                } catch {
+                  throw t('dev.meta.manifest.requestError');
+                }
+
+                const json = await res.json().catch(() => {
+                  throw t('dev.meta.manifest.urlError');
+                });
+
+                const valid = pluginManifestSchema.safeParse(json);
+                if (!valid.success) {
+                  throw t('dev.meta.manifest.jsonInvalid', { error: valid.error });
+                }
 
-                const json = await res.json();
-                pluginManifestSchema.parse(json);
+                setManifest(valid.data);
+                form.setFieldValue('identifier', valid.data.identifier);
               },
             },
           ],

diff --git a/src/features/PluginDevModal/MetaForm.tsx b/src/features/PluginDevModal/MetaForm.tsx
@@ -18,7 +18,7 @@ const MetaForm = memo<{ form: FormInstance }>(({ form }) => {
 
   const configItem: FormItemProps[] = [
     {
-      children: <Input placeholder={'searchEngine'} />,
+      children: <Input disabled placeholder={'searchEngine'} />,
       desc: t('dev.meta.identifier.desc'),
       label: t('dev.meta.identifier.label'),
       name: 'identifier',

diff --git a/src/locales/default/plugin.ts b/src/locales/default/plugin.ts
@@ -50,9 +50,10 @@ export default {
       },
       manifest: {
         desc: 'LobeChat 将会通过该链接安装插件',
-        invalid: '输入的 manifest 链接无效，或 manifest 不符合规范',
+        jsonInvalid: ' manifest 不符合规范，校验结果: \n\n {{error}}',
         label: '插件描述文件 Url 地址',
-        urlError: '请输入一个有效的网址',
+        requestError: '请求该链接失败，请输入一个有效的链接，并检查链接是否允许跨域访问',
+        urlError: '该链接没有返回 JSON 格式的内容, 请输入一个有效的链接',
       },
       title: {
         desc: '插件标题',