finish first admin frontend

admin-frontend/src/component/addSubsModal.tsx

@@ -0,0 +1,178 @@
+import {Form, Input, Modal, Select, Tag} from 'antd';
+import React, {useContext, useEffect, useState} from "react";
+import {addSubscribe, getTargetName, updateSubscribe} from 'src/api/config';
+import {InputTag} from 'src/component/inputTag';
+import {GlobalConfContext} from "src/utils/context";
+import {CategoryConfig, SubscribeConfig} from 'src/utils/type';
+
+interface InputTagCustomProp {
+  value?: Array<string>,
+  onChange?: (value: Array<string>) => void,
+  disabled?: boolean
+}
+function InputTagCustom(prop: InputTagCustomProp) {
+  const [value, setValue] = useState(prop.value || []);
+  const handleSetValue = (newVal: Array<string>) => {
+    setValue(() => newVal);
+    if (prop.onChange) {
+      prop.onChange(newVal);
+    }
+  }
+  useEffect(() => {
+    if (prop.value) {
+      setValue(prop.value);
+    }
+  }, [prop.value])
+  return (
+    <>
+      {
+        prop.disabled ? <Tag color="red">不支持标签</Tag>: 
+        <>
+        {value.length === 0 &&
+          <Tag color="green">全部标签</Tag>
+        }
+        <InputTag color="blue" addText="添加标签" value={value} onChange={handleSetValue} />
+      </>
+      } 
+    </>
+  )
+}
+
+interface AddModalProp {
+  showModal: boolean,
+  groupNumber: string,
+  setShowModal: (s: boolean) => void,
+  refresh: () => void
+  initVal?: SubscribeConfig
+}
+export function AddModal({
+  showModal, groupNumber, setShowModal, refresh, initVal
+}: AddModalProp) {
+  const [ confirmLoading, setConfirmLoading ] = useState<boolean>(false);
+  const { platformConf } = useContext(GlobalConfContext);
+  const [ hasTarget, setHasTarget ] = useState(false);
+  const [ categories, setCategories ] = useState({} as CategoryConfig);
+  const [ enabledTag, setEnableTag ] = useState(false);
+  const [ form ] = Form.useForm();
+  const [ inited, setInited ] = useState(false);
+  const changePlatformSelect = (platform: string) => {
+    setHasTarget(_ => platformConf[platform].hasTarget);
+    setCategories(_ => platformConf[platform].categories);
+    setEnableTag(platformConf[platform].enabledTag)
+    if (! platformConf[platform].hasTarget) {
+      getTargetName(platform, 'default')
+        .then(res => {
+          console.log(res)
+          form.setFieldsValue({
+            targetName: res.targetName,
+            target: ''
+          })
+        })
+    } else {
+      form.setFieldsValue({
+        targetName: '',
+        target: ''
+      })
+    }
+  }
+  const handleSubmit = (value: any) => {
+    let newVal = Object.assign({}, value)
+    if (typeof newVal.tags != 'object') {
+      newVal.tags = []
+    }
+    if (newVal.target === '') {
+      newVal.target = 'default'
+    }
+    if (initVal) { // patch
+      updateSubscribe(groupNumber, newVal)
+        .then(() => {
+          setConfirmLoading(false);
+          setShowModal(false);
+          form.resetFields();
+          refresh();
+        });
+    } else {
+      addSubscribe(groupNumber, newVal)
+      .then(() => {
+        setConfirmLoading(false);
+        setShowModal(false);
+        form.resetFields();
+        refresh();
+        });
+    }
+  }
+  const handleModleFinish = () => {
+    form.submit();
+    setConfirmLoading(() => true);
+  }
+  useEffect(() => {
+    if (initVal && !inited) {
+      const platformName = initVal.platformName;
+      setHasTarget(platformConf[platformName].hasTarget);
+      setCategories(platformConf[platformName].categories);
+      setEnableTag(platformConf[platformName].enabledTag);
+      setInited(true)
+      form.setFieldsValue(initVal)
+    }
+  }, [initVal, form, platformConf, inited])
+  return <Modal title="添加订阅" visible={showModal} 
+    confirmLoading={confirmLoading} onCancel={() => setShowModal(false)}
+    onOk={handleModleFinish}>
+    <Form form={form} labelCol={{ span: 6 }} name="b" onFinish={handleSubmit} >
+      <Form.Item label="平台" name="platformName" rules={[]}>
+        <Select style={{ width: '80%' }} onChange={changePlatformSelect}>
+          {Object.keys(platformConf).map(platformName => 
+            <Select.Option key={platformName} value={platformName}>{platformConf[platformName].name}</Select.Option>
+            )}
+        </Select>
+      </Form.Item>
+      <Form.Item label="账号" name="target" rules={[
+        {required: hasTarget, message: "请输入账号"},
+        {validator: async (_, value) => {
+          try {
+            const res = await getTargetName(form.getFieldValue('platformName'), value);
+            if (res.targetName) {
+                form.setFieldsValue({
+                  targetName: res.targetName
+                })
+                return Promise.resolve()
+            } else {
+                form.setFieldsValue({
+                  targetName: ''
+                })
+              return Promise.reject("账号不正确，请重新检查账号")
+            }
+          } catch {
+            return Promise.reject('服务器错误，请稍后再试')
+          }
+        }
+        }
+      ]}>
+        <Input placeholder={hasTarget ? "获取方式见文档" : "此平台不需要账号"} 
+          disabled={! hasTarget} style={{ width: "80%" }}/>
+      </Form.Item>
+      <Form.Item label="账号名称" name="targetName">
+        <Input style={{ width: "80%" }} disabled />
+      </Form.Item>
+      <Form.Item label="订阅分类" name="cats" rules={[
+        {required: Object.keys(categories).length > 0, message: "请至少选择一个分类进行订阅"}
+      ]}>
+        <Select style={{ width: '80%' }} mode="multiple" 
+          disabled={Object.keys(categories).length === 0}
+          placeholder={Object.keys(categories).length > 0 ?
+            "请选择要订阅的分类" : "本平台不支持分类"}>
+          {Object.keys(categories).length > 0 &&
+            Object.keys(categories).map((indexStr) => 
+              <Select.Option key={indexStr} value={parseInt(indexStr)}>
+                {categories[parseInt(indexStr)]}
+              </Select.Option>
+            )
+          }
+        </Select>
+      </Form.Item>
+      <Form.Item label="订阅Tag" name="tags">
+        <InputTagCustom disabled={!enabledTag}/>
+      </Form.Item>
+    </Form>
+    </Modal>
+}

admin-frontend/src/component/inputTag.tsx

@@ -18,6 +18,11 @@ export function InputTag(prop: InputTagProp) {
   const [ editInputValue, setEditInputValue ] = useState('');
   const inputRef = useRef(null as any);
   const editInputRef = useRef(null as any);
+  useEffect(() => {
+    if (prop.value) {
+      setValue(prop.value);
+    }
+  }, [prop.value])
   useEffect(() => {
     if (inputVisible) {
       inputRef.current.focus()

admin-frontend/src/component/subscribeCard.tsx

@@ -1,10 +1,11 @@
-import {CopyOutlined, DeleteOutlined} from '@ant-design/icons';
+import {CopyOutlined, DeleteOutlined, EditOutlined} from '@ant-design/icons';
 import {Card, Col, Form, message, Popconfirm, Select, Tag, Tooltip} from 'antd';
 import Modal from 'antd/lib/modal/Modal';
 import React, {useContext, useState} from "react";
 import {addSubscribe, delSubscribe} from 'src/api/config';
 import {GlobalConfContext} from "src/utils/context";
 import {PlatformConfig, SubscribeConfig, SubscribeResp} from 'src/utils/type';
+import {AddModal} from './addSubsModal';
 
 interface CopyModalProp {
   setShowModal: (modalShow: boolean) => void
@@ -30,6 +31,7 @@ function CopyModal({setShowModal,config,
       setConfirmLoading(true)
       postReqs(selectedGroups, config).then(() => {
         setConfirmLoading(false)
+        setShowModal(false)
         return reload() 
       })
     }
@@ -57,6 +59,7 @@ interface SubscribeCardProp {
 export function SubscribeCard({groupNumber, config, reload, groupSubscribes}: SubscribeCardProp) {
   const globalConf = useContext(GlobalConfContext);
   const [showModal, setShowModal] = useState(false)
+  const [showEditModal, setShowEditModal] = useState(false)
   const platformConf = globalConf.platformConf[config.platformName] as PlatformConfig;
   const handleDelete = (groupNumber: string, platformName: string, target: string) => () => {
     delSubscribe(groupNumber, platformName, target).then(() => {
@@ -67,13 +70,16 @@ export function SubscribeCard({groupNumber, config, reload, groupSubscribes}: Su
   <Col span={6} key={`${config.platformName}-${config.target}`}> 
     <Card title={`${platformConf.name} - ${config.targetName}`}
       actions={[
+        <Tooltip title="编辑">
+          <EditOutlined onClick={()=>{setShowEditModal(state => !state)}}/>
+        </Tooltip>,
+        <Tooltip title="添加到其他群">
+          <CopyOutlined onClick={()=>{setShowModal(state => !state)}}/>
+        </Tooltip>,
         <Popconfirm title={`确定要删除 ${platformConf.name} - ${config.targetName}`}
           onConfirm={handleDelete(groupNumber, config.platformName, config.target || 'default')}>
           <Tooltip title="删除" ><DeleteOutlined /></Tooltip>
         </Popconfirm>, 
-        <Tooltip title="添加到其他群">
-          <CopyOutlined onClick={()=>{setShowModal(state => !state)}}/>
-        </Tooltip>
         ]}>
       <Form labelCol={{ span: 6 }}>
       <Form.Item label="订阅类型">
@@ -89,6 +95,8 @@ export function SubscribeCard({groupNumber, config, reload, groupSubscribes}: Su
     </Card>
     <CopyModal setShowModal={setShowModal} reload={reload} currentGroupNumber={groupNumber}
       showModal={showModal} config={config} groups={groupSubscribes}/>
+    <AddModal showModal={showEditModal} setShowModal={setShowEditModal} 
+      groupNumber={groupNumber} refresh={reload} initVal={config}/>
   </Col>
   )
 }