feat: plugin config editor form

web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
 import { PluginCardVO } from '@/app/home/plugins/plugin-installed/PluginCardVO';
 import PluginCardComponent from '@/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent';
+import PluginForm from '@/app/home/plugins/plugin-installed/plugin-form/PluginForm';
 import styles from '@/app/home/plugins/plugins.module.css';
 import { GithubIcon } from 'lucide-react';
 import { httpClient } from '@/app/infra/http/HttpClient';
@@ -23,6 +24,8 @@ export interface PluginInstalledComponentRef {
 
 const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>((props, ref) => {
   const [pluginList, setPluginList] = useState<PluginCardVO[]>([]);
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+  const [selectedPlugin, setSelectedPlugin] = useState<PluginCardVO | null>(null);
 
   useEffect(() => {
     initData();
@@ -57,13 +60,38 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>((props,
   useImperativeHandle(ref, () => ({
     refreshPluginList: getPluginList
   }));
+
+  function handlePluginClick(plugin: PluginCardVO) {
+    setSelectedPlugin(plugin);
+    setModalOpen(true);
+  }
   
   return (
     <div className={`${styles.pluginListContainer}`}>
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="w-[700px] p-6">
+          <DialogHeader>
+            <DialogTitle>插件配置</DialogTitle>
+          </DialogHeader>
+          {selectedPlugin && (
+            <PluginForm
+              pluginAuthor={selectedPlugin.author}
+              pluginName={selectedPlugin.name}
+              onFormSubmit={() => {
+                setModalOpen(false);
+                getPluginList();
+              }}
+              onFormCancel={() => {
+                setModalOpen(false);
+              }}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
       
       {pluginList.map((vo, index) => {
         return (
-          <div key={index}>
+          <div key={index} onClick={() => handlePluginClick(vo)}>
             <PluginCardComponent cardVO={vo} />
           </div>
         );

web/src/app/home/plugins/plugin-installed/plugin-form/PluginForm.tsx

@@ -0,0 +1,88 @@
+import { useState, useEffect } from 'react';
+import { ApiRespPlugin, ApiRespPluginConfig, Plugin } from '@/app/infra/entities/api';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
+import { IDynamicFormItemSchema } from '@/app/infra/entities/form/dynamic';
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+
+export default function PluginForm({
+  pluginAuthor,
+  pluginName,
+  onFormSubmit,
+  onFormCancel,
+}: {
+  pluginAuthor: string;
+  pluginName: string;
+  onFormSubmit: () => void;
+  onFormCancel: () => void;
+}) {
+  const [pluginInfo, setPluginInfo] = useState<Plugin>();
+  const [pluginConfig, setPluginConfig] = useState<ApiRespPluginConfig>();
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    // 获取插件信息
+    httpClient.getPlugin(pluginAuthor, pluginName).then((res) => {
+      setPluginInfo(res.plugin);
+    });
+    // 获取插件配置
+    httpClient.getPluginConfig(pluginAuthor, pluginName).then((res) => {
+      setPluginConfig(res);
+    });
+  }, [pluginAuthor, pluginName]);
+
+  const handleSubmit = async (values: object) => {
+    setIsLoading(true);
+    try {
+      await httpClient.updatePluginConfig(pluginAuthor, pluginName, values);
+      onFormSubmit();
+    } catch (error) {
+      console.error('更新插件配置失败:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (!pluginInfo || !pluginConfig) {
+    return <div>加载中...</div>;
+  }
+
+  return (
+    <div>
+      <div className="space-y-4">
+        <div className="text-lg font-medium">插件配置</div>
+        <div className="text-sm text-gray-500">
+          {pluginInfo.description.zh_CN}
+        </div>
+        <DynamicFormComponent
+          itemConfigList={pluginInfo.config_schema}
+          initialValues={pluginConfig.config}
+          onSubmit={handleSubmit}
+        />
+      </div>
+
+      <div className="sticky bottom-0 left-0 right-0 bg-background border-t p-4 mt-4">
+        <div className="flex justify-end gap-2">
+          <Button 
+            type="submit" 
+            onClick={() => handleSubmit(pluginConfig.config)}
+            disabled={isLoading}
+          >
+            {isLoading ? '保存中...' : '保存配置'}
+          </Button>
+          <Button type="button" variant="outline" onClick={onFormCancel}>
+            取消
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}