插件编辑页面组件抽象化 link #36

frontend/src/components/Plugin/EditForm/EditPluginInfoForm.tsx

@@ -0,0 +1,94 @@
+import ProForm, {ProFormText} from "@ant-design/pro-form";
+import axios from "axios";
+import {Button, message} from "antd";
+import ProCard from "@ant-design/pro-card";
+import React, {useState} from "react";
+import {useHistory} from "react-router";
+import {PluginInfoFormParams} from "../EditPluginForm";
+type LayoutType = Parameters<typeof ProForm>[0]['layout'];
+
+export default function(props:PluginInfoFormParams) {
+    const {id} = props.info
+    const [formLayout ] = useState<LayoutType>('horizontal');
+    const history = useHistory()
+    const formItemLayout =
+        formLayout === 'horizontal'
+            ? {
+                labelCol: { span: 4 },
+                wrapperCol: { span: 14 },
+            }
+            : null;
+    const setStatus = async () =>{
+        try{
+            await axios.patch('/v1/admin/setstate',{
+                pluginId:props.info.id,
+                state:2
+            })
+            message.success('切换状态成功');
+        }catch (err) {
+            message.error(err.response.data.message)
+        }
+    }
+    return <ProCard style={{ marginTop: 8 }} loading={props.loading}>
+        <ProForm<{
+            name: string;
+            id: string;
+            info: string;
+        }>
+            {...formItemLayout}
+            layout={formLayout}
+            request={async () => {
+                return props.info
+            }}
+            onFinish={async (values) => {
+                try{
+                    await axios.put('/v1/plugins/'+values.id,{
+                        name:values.name,
+                        info:values.info
+                    })
+                    message.success('提交成功');
+                }catch (err) {
+                    message.error(err.response.data.message)
+                }
+            }}
+            submitter={{
+                render: (props, doms) => {
+                    return [
+                        <Button key={"status"} htmlType="button" onClick={() => setStatus()}>
+                            设置状态为启用(admin)
+                        </Button>,
+                        <Button key={"preview"} htmlType="button" onClick={() => history.push('/app/info/'+id)}>
+                            查看该插件信息
+                        </Button>,
+                        ...doms,
+                    ];
+                },
+            }}
+        >
+            <div>
+                <ProFormText
+                    width="md"
+                    disabled={true}
+                    name="id"
+                    label="包名"
+                    tooltip="例如org.example.mirai.test-plugin"
+                    placeholder="请输入包名"
+                />
+                <ProFormText
+                    width="md"
+                    name="name"
+                    label="插件名称"
+                    tooltip="例如Mirai Not Core"
+                    placeholder="请输入插件名称"
+                />
+                <ProFormText
+                    width="md"
+                    name="info"
+                    label="插件信息"
+                    tooltip="填写一些描述信息"
+                    placeholder="请输入插件信息"
+                />
+            </div>
+        </ProForm>
+    </ProCard>
+}

frontend/src/components/Plugin/EditForm/PluginVersionControlForm.tsx

@@ -0,0 +1,42 @@
+import {Button, Form, Input, message, Upload} from "antd";
+import ProCard from "@ant-design/pro-card";
+import React, {useState} from "react";
+import {PluginInfoFormParams} from "../EditPluginForm";
+import {UploadOutlined} from "@ant-design/icons";
+import axios from "axios";
+import VersionList from "./VersionControl/VersionList";
+
+export default function(props:PluginInfoFormParams) {
+    const {id} = props.info
+    const [hasPluginVersion, setHasPluginVersion] = useState(false)
+    const [form] = Form.useForm();
+    const [version, setVersion] = useState("")
+    const onFinish = async (values: any) => {
+        try{
+            await axios.put("/v1/plugins/"+id+"/"+values.version)
+            setVersion(values.version)
+            setHasPluginVersion(true)
+        }catch (e) {
+            message.error(e.response.data.message)
+        }
+    };
+
+    return <ProCard style={{ marginTop: 8 }} loading={props.loading}>
+        <VersionList {...props}/>
+        <Form form={form} onFinish={onFinish}>
+            <Form.Item
+                label="版本号"
+                name="version"
+                rules={[{ required: true, message: '请输入版本号!' }]}>
+                <Input disabled={hasPluginVersion} placeholder="输入版本号" />
+            </Form.Item>
+            {hasPluginVersion?
+                <Upload
+                action={"/v1/plugins/"+id+"/"+version+"/test.zip"}
+                method={"put"}
+            >
+                <Button icon={<UploadOutlined />}>点击上传</Button>
+            </Upload>:<Button  htmlType="submit">确定</Button>}
+        </Form>
+    </ProCard>
+}

frontend/src/components/Plugin/EditForm/VersionControl/FileList.tsx

@@ -0,0 +1,19 @@
+import {useEffect, useState} from "react";
+import axios from "axios";
+
+export interface VersionFilesProps{
+    id:string,
+    version:string
+}
+export default function(props:VersionFilesProps){
+    const [fileList, setFileList] = useState(Array<string>())
+    useEffect( ()=>{
+        axios.get("/v1/plugins/"+props.id+"/"+props.version+"/").then(res=>setFileList(res.data.response))
+    },[])
+    return (
+        <>
+            <h5>共{fileList.length}个附件</h5>
+            {fileList.map((item,index)=><h5 key={index}>{item}</h5>)}
+        </>
+    )
+}

frontend/src/components/Plugin/EditForm/VersionControl/VersionList.tsx

@@ -0,0 +1,27 @@
+import {PluginInfoFormParams} from "../../EditPluginForm";
+import {useEffect, useState} from "react";
+import axios from "axios";
+import {Collapse} from "antd";
+import CollapsePanel from "antd/es/collapse/CollapsePanel";
+import FileList from "./FileList";
+
+export default function(props:PluginInfoFormParams){
+    const [versionList,setVersionList] = useState(Array<string>())
+    useEffect( ()=>{
+        axios.get("/v1/plugins/"+props.info.id+"/versionList").then(res=>setVersionList(res.data.response))
+    },[])
+
+    function callback(key:any) {
+        console.log(key);
+    }
+
+    return(
+        <Collapse defaultActiveKey={[]} onChange={callback}>
+            {versionList.map((item,index)=>{
+                return <CollapsePanel header={item} key={index}>
+                    <FileList id={props.info.id} version={item}/>
+                </CollapsePanel>
+            })}
+        </Collapse>
+    );
+}

frontend/src/components/Plugin/EditPluginForm.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import {BasicPluginInfo} from "../../models/Plugin";
+import EditPluginInfoForm from "./EditForm/EditPluginInfoForm";
+import PluginVersionControlForm from "./EditForm/PluginVersionControlForm";
+
+export interface PluginInfoFormParams {
+    loading:boolean
+    info:BasicPluginInfo
+}
+
+export default function(props:PluginInfoFormParams) {
+    return <>
+        <EditPluginInfoForm {...props}/>
+        <PluginVersionControlForm {...props}/>
+    </>
+}

frontend/src/components/Plugin/PluginNotFound.tsx

@@ -0,0 +1,26 @@
+import {Button, Result} from "antd";
+import React from "react";
+import {useHistory} from "react-router";
+
+export default function (){
+    const history = useHistory()
+    return (
+
+        <div
+            style={{
+                height: '40vh',
+            }}
+        >
+            <Result
+                style={{
+                    height: '100%',
+                    background: '#fff',
+                }}
+                status="warning"
+                title="错误"
+                subTitle="您查找的ID并不存在"
+                extra={<Button onClick={()=>history.push("")}>返回主页</Button>}
+            />
+        </div>
+    )
+}

frontend/src/models/Plugin.ts

@@ -9,4 +9,10 @@ export interface PluginInfo {
     name:string
     owner:UserInfo
     status:string
+}
+
+export interface BasicPluginInfo {
+    id: string
+    info: string
+    name: string
 }

frontend/src/scenes/app/pages/developer/EditPluginPage.tsx

@@ -1,25 +1,13 @@
 import React, {useEffect, useState} from 'react';
-import {Result, Button, message} from 'antd';
 import {PageContainer} from "@ant-design/pro-layout";
-import ProCard from "@ant-design/pro-card";
 import axios from "axios";
-import ProForm, {ProFormText} from "@ant-design/pro-form";
-import {useHistory} from "react-router";
-type LayoutType = Parameters<typeof ProForm>[0]['layout'];
+import PluginNotFound from "../../../../components/Plugin/PluginNotFound";
+import EditPluginForm from "../../../../components/Plugin/EditPluginForm";
 
 export default (props:any) => {
-    const [formLayout ] = useState<LayoutType>('horizontal');
-    const formItemLayout =
-        formLayout === 'horizontal'
-            ? {
-                labelCol: { span: 4 },
-                wrapperCol: { span: 14 },
-            }
-            : null;
     const id = props.match.params.id
     const [success, setSuccess] = useState(true)
     const [loading, setLoading] = useState(true)
-    const history = useHistory()
     const [data, setData] = useState({
         id: "net.mamoe.mirai.mirai-not-core",
         info: "SEE PLUGIN NAME!",
@@ -38,105 +26,13 @@ export default (props:any) => {
         })
     },[])
 
-    const form = (
-        <ProCard style={{ marginTop: 8 }} loading={loading} >
-            <ProForm<{
-                name: string;
-                id: string;
-                info: string;
-            }>
-                {...formItemLayout}
-                layout={formLayout}
-                request={async () => {
-                    const res = await axios.get('/v1/plugins/'+id)
-
-                    return {
-                        name : res.data.response.name,
-                        id:res.data.response.id,
-                        info:res.data.response.info
-                    }
-                }}
-                onFinish={async (values) => {
-                    try{
-                        const res = await axios.put('/v1/plugins/'+values.id,{
-                            name:values.name,
-                            info:values.info
-                        })
-                        console.log(res)
-                        message.success('提交成功');
-                        setSuccess(true)
-                    }catch (err) {
-                        console.log(err)
-                        message.error(err.response.data.message)
-                    }
-                }}
-                submitter={{
-                    render: (props, doms) => {
-                        return [
-                            <Button htmlType="button" onClick={() => history.push('/app/info/'+id)}>
-                                设置状态为启用(admin)
-                            </Button>,
-                            <Button htmlType="button" onClick={() => history.push('/app/info/'+id)}>
-                                查看该插件信息
-                            </Button>,
-                            ...doms,
-                        ];
-                    },
-                }}
-            >
-                <div>
-                    <ProFormText
-                        width="md"
-                        disabled={true}
-                        name="id"
-                        label="包名"
-                        tooltip="例如org.example.mirai.test-plugin"
-                        placeholder="请输入包名"
-                    />
-                    <ProFormText
-                        width="md"
-                        name="name"
-                        label="插件名称"
-                        tooltip="例如Mirai Not Core"
-                        placeholder="请输入插件名称"
-                    />
-                    <ProFormText
-                        width="md"
-                        name="info"
-                        label="插件信息"
-                        tooltip="填写一些描述信息"
-                        placeholder="请输入插件信息"
-                    />
-                </div>
-            </ProForm>
-        </ProCard>
-    );
-    const result = (
-        <div
-            style={{
-                height: '40vh',
-            }}
-        >
-            <Result
-                style={{
-                    height: '100%',
-                    background: '#fff',
-                }}
-                status="warning"
-                title="错误"
-                subTitle="您查找的ID并不存在"
-                extra={<Button onClick={()=>setSuccess(false)}>返回主页</Button>}
-            />
-        </div>
-    )
     return (
-
         <PageContainer
             title={"编辑插件"}
             waterMarkProps={{
                 content: '',
             }}>
-            {success?form:result}
+            {success?<EditPluginForm loading={loading} info={data}/>:<PluginNotFound/>}
         </PageContainer>
     );
 };