From e693f575e368774a23f5dc500c198a7278dd889b Mon Sep 17 00:00:00 2001 From: felinae98 <731499577@qq.com> Date: Thu, 25 Nov 2021 14:21:06 +0800 Subject: [PATCH] update --- .../src/component/subscribeCard.tsx | 85 ++++++ .../src/pages/admin/configPage/index.tsx | 201 +++++++++++++ admin-frontend/src/pages/admin/index.tsx | 275 +----------------- admin-frontend/tsconfig.json | 3 +- 4 files changed, 293 insertions(+), 271 deletions(-) create mode 100644 admin-frontend/src/component/subscribeCard.tsx create mode 100644 admin-frontend/src/pages/admin/configPage/index.tsx diff --git a/admin-frontend/src/component/subscribeCard.tsx b/admin-frontend/src/component/subscribeCard.tsx new file mode 100644 index 0000000..6f73084 --- /dev/null +++ b/admin-frontend/src/component/subscribeCard.tsx @@ -0,0 +1,85 @@ +import {CopyOutlined, DeleteOutlined} from '@ant-design/icons'; +import {Card, Col, Form, message, Popconfirm, Select, Tag, Tooltip} from 'antd'; +import React, {ReactNode, 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'; + +interface TargetGroupSelectionProp { + config: SubscribeConfig, + groups: SubscribeResp + children: ReactNode +} + +function TargetGroupSelection({ config, groups, children }: TargetGroupSelectionProp) { + let [ selectedGroups, setSelectGroups ] = useState>([]); + const submitCopy = () => { + let promise = null + for (let selectGroup of selectedGroups) { + if (! promise) { + promise = addSubscribe(selectGroup, config) + } else { + promise = promise.then(() => addSubscribe(selectGroup, config)) + } + } + if (promise) { + promise.then(() => message.success("复制订阅成功")) + } + return promise; + } + return <> + ) => setSelectGroups(value)}> + { + Object.keys(groups).map((groupNumber) => + + {`${groupNumber} - ${groups[groupNumber].name}`} + ) + } + + } onConfirm={submitCopy} > + { children } + + +} +interface SubscribeCardProp { + groupNumber: string + config: SubscribeConfig + groupSubscribes: SubscribeResp + reload: () => null +} +export function SubscribeCard({groupNumber, config, reload, groupSubscribes}: SubscribeCardProp) { + const globalConf = useContext(GlobalConfContext); + const platformConf = globalConf.platformConf[config.platformName] as PlatformConfig; + const handleDelete = (groupNumber: string, platformName: string, target: string) => () => { + delSubscribe(groupNumber, platformName, target).then(() => { + reload() + }) + } + return ( + + + + , + + + + ]}> +
+ + {Object.keys(platformConf.categories).length > 0 ? + config.cats.map((catKey: number) => ({platformConf.categories[catKey]})) : + 不支持类型} + + + {platformConf.enabledTag ? config.tags.length > 0 ? config.tags.map(tag => ({tag})) : (全部标签) : + 不支持Tag} + +
+ + + ) +} diff --git a/admin-frontend/src/pages/admin/configPage/index.tsx b/admin-frontend/src/pages/admin/configPage/index.tsx new file mode 100644 index 0000000..2e84dc4 --- /dev/null +++ b/admin-frontend/src/pages/admin/configPage/index.tsx @@ -0,0 +1,201 @@ +import {CopyOutlined, DeleteOutlined} from '@ant-design/icons'; +import {Button, Card, Col, Collapse, Empty, Form, Input, message, Modal, Popconfirm, Row, Select, Tag, Tooltip} from 'antd'; +import React, {ReactElement, ReactNode, useContext, useEffect, useState} from "react"; +import {addSubscribe, delSubscribe, getSubscribe, getTargetName} from 'src/api/config'; +import {InputTag} from 'src/component/inputTag'; +import {GlobalConfContext} from "src/utils/context"; +import {CategoryConfig, PlatformConfig, SubscribeConfig, SubscribeResp} from 'src/utils/type'; + +interface ConfigPageProp { + tab: string +} +export function ConfigPage(prop: ConfigPageProp) { + const [ configData, setConfigData ] = useState({}); + const [ showModal, setShowModal ] = useState(false); + const [ currentAddingGroupNumber, setCurrentAddingGroupNumber ] = useState(''); + const globalConf = useContext(GlobalConfContext); + const loadData = () => { + getSubscribe() + .then(res => { + setConfigData(_ => res); + }); + } + useEffect(() => { + loadData() + }, [prop.tab]); + const clickNew = (groupNumber: string) => (e: React.MouseEvent) => { + setShowModal(_ => true); + setCurrentAddingGroupNumber(groupNumber); + e.stopPropagation(); + } + + if (Object.keys(configData).length === 0) { + return + } else { + let groups: Array = []; + for (let key of Object.keys(configData)) { + let value = configData[key]; + groups.push( + {`${key} - ${value.name}`} + } key={key}> + + {value.subscribes.map(genCard(key))} + + + ) + } + return ( +
+ + {groups} + + setShowModal(_ => s)} /> +
+ ) + } +} + + +interface InputTagCustomProp { + value?: Array, + onChange?: (value: Array) => void, + disabled?: boolean +} +function InputTagCustom(prop: InputTagCustomProp) { + const [value, setValue] = useState(prop.value || []); + const handleSetValue = (newVal: Array) => { + setValue(() => newVal); + if (prop.onChange) { + prop.onChange(newVal); + } + } + return ( + <> + { + prop.disabled ? 不支持标签: + <> + {value.length === 0 && + 全部标签 + } + + + } + + ) +} + +interface AddModalProp { + showModal: boolean, + groupNumber: string, + setShowModal: (s: boolean) => void, + refresh: () => void +} +function AddModal(prop: AddModalProp) { + const [ confirmLoading, setConfirmLoading ] = useState(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 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' + } + addSubscribe(prop.groupNumber, newVal) + .then(() => { + setConfirmLoading(false); + prop.setShowModal(false); + prop.refresh(); + }); + } + const handleModleFinish = () => { + form.submit(); + setConfirmLoading(() => true); + } + + return prop.setShowModal(false)} + onOk={handleModleFinish}> +
+ + + + { + 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('服务器错误，请稍后再试') + } + } + } + ]}> + + + + + + + + + + + +
+ +} diff --git a/admin-frontend/src/pages/admin/index.tsx b/admin-frontend/src/pages/admin/index.tsx index fb66804..38e998e 100644 --- a/admin-frontend/src/pages/admin/index.tsx +++ b/admin-frontend/src/pages/admin/index.tsx @@ -1,12 +1,9 @@ -import React, { FC, ReactElement, ReactNode, useContext, useEffect, useState } from "react"; -import { LoginContext, GlobalConfContext } from "../utils/context"; -import { Layout, Menu, Empty, Collapse, Card, Tag, Row, Col, Form, Tooltip, Button, Modal, Select, - Input, Popconfirm, message } from 'antd'; -import { SubscribeConfig, SubscribeResp, PlatformConfig, CategoryConfig } from '../utils/type'; -import { SettingOutlined, BugOutlined, DeleteOutlined, CopyOutlined } from '@ant-design/icons'; -import { getSubscribe, getTargetName, addSubscribe, delSubscribe } from '../api/config'; -import { InputTag } from '../component/inputTag'; +import {BugOutlined, SettingOutlined} from '@ant-design/icons'; +import {Layout, Menu} from 'antd'; +import React, {useContext, useState} from "react"; +import {LoginContext} from "src/utils/context"; import './admin.css'; +import {ConfigPage} from './configPage'; export function Admin() { const { login } = useContext(LoginContext); @@ -37,265 +34,3 @@ export function Admin() { ) } -interface ConfigPageProp { - tab: string -} -function ConfigPage(prop: ConfigPageProp) { - const [ configData, setConfigData ] = useState({}); - const [ showModal, setShowModal ] = useState(false); - const [ currentAddingGroupNumber, setCurrentAddingGroupNumber ] = useState(''); - const globalConf = useContext(GlobalConfContext); - const loadData = () => { - getSubscribe() - .then(res => { - setConfigData(_ => res); - }); - } - useEffect(() => { - loadData() - }, [prop.tab]); - const clickNew = (groupNumber: string) => (e: React.MouseEvent) => { - setShowModal(_ => true); - setCurrentAddingGroupNumber(groupNumber); - e.stopPropagation(); - } - const handleDelete = (groupNumber: string, platformName: string, target: string) => () => { - delSubscribe(groupNumber, platformName, target).then(() => { - loadData() - }) - } - const genCard = (groupNumber: string) => (config: SubscribeConfig) => { - const platformConf = globalConf.platformConf[config.platformName] as PlatformConfig; - return ( - - - - , - - - - ]}> -
- - {Object.keys(platformConf.categories).length > 0 ? - config.cats.map((catKey: number) => ({platformConf.categories[catKey]})) : - 不支持类型} - - - {platformConf.enabledTag ? config.tags.length > 0 ? config.tags.map(tag => ({tag})) : (全部标签) : - 不支持Tag} - -
- - - ) - } - if (Object.keys(configData).length === 0) { - return - } else { - let groups: Array = []; - for (let key of Object.keys(configData)) { - let value = configData[key]; - groups.push( - {`${key} - ${value.name}`} - } key={key}> - - {value.subscribes.map(genCard(key))} - - - ) - } - return ( -
- - {groups} - - setShowModal(_ => s)} /> -
- ) - } -} - -interface TargetGroupSelectionProp { - config: SubscribeConfig, - groups: SubscribeResp - children: ReactNode -} -function TargetGroupSelection({ config, groups, children }: TargetGroupSelectionProp) { - let [ selectedGroups, setSelectGroups ] = useState>([]); - const submitCopy = () => { - let promise = null - for (let selectGroup of selectedGroups) { - if (! promise) { - promise = addSubscribe(selectGroup, config) - } else { - promise = promise.then(() => addSubscribe(selectGroup, config)) - } - } - if (promise) { - promise.then(() => message.success("复制订阅成功")) - } - return promise; - } - return <> - ) => setSelectGroups(value)}> - { - Object.keys(groups).map((groupNumber) => - - {`${groupNumber} - ${groups[groupNumber].name}`} - ) - } - - } onConfirm={submitCopy} > - { children } - - -} - -interface InputTagCustomProp { - value?: Array, - onChange?: (value: Array) => void, - disabled?: boolean -} -function InputTagCustom(prop: InputTagCustomProp) { - const [value, setValue] = useState(prop.value || []); - const handleSetValue = (newVal: Array) => { - setValue(() => newVal); - if (prop.onChange) { - prop.onChange(newVal); - } - } - return ( - <> - { - prop.disabled ? 不支持标签: - <> - {value.length === 0 && - 全部标签 - } - - - } - - ) -} - -interface AddModalProp { - showModal: boolean, - groupNumber: string, - setShowModal: (s: boolean) => void, - refresh: () => void -} -function AddModal(prop: AddModalProp) { - const [ confirmLoading, setConfirmLoading ] = useState(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 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' - } - addSubscribe(prop.groupNumber, newVal) - .then(() => { - setConfirmLoading(false); - prop.setShowModal(false); - prop.refresh(); - }); - } - const handleModleFinish = () => { - form.submit(); - setConfirmLoading(() => true); - } - - return prop.setShowModal(false)} - onOk={handleModleFinish}> -
- - - - { - 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('服务器错误，请稍后再试') - } - } - } - ]}> - - - - - - - - - - - -
- -} diff --git a/admin-frontend/tsconfig.json b/admin-frontend/tsconfig.json index a273b0c..c03361d 100644 --- a/admin-frontend/tsconfig.json +++ b/admin-frontend/tsconfig.json @@ -18,7 +18,8 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx" + "jsx": "react-jsx", + "baseUrl": "./" }, "include": [ "src"