mirror of
https://github.com/suyiiyii/nonebot-bison.git
synced 2025-06-03 09:56:45 +08:00
format frontend code
This commit is contained in:
felinae98
parent
9055a039a8
commit
649c1cf8f2
@ -20,4 +20,4 @@ repos:
|
||||
rev: v2.5.1
|
||||
hooks:
|
||||
- id: prettier
|
||||
types_or: [markdown]
|
||||
types_or: [markdown, ts, tsx]
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
import React from "react";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import App from "./App";
|
||||
|
||||
test('renders learn react link', () => {
|
||||
test("renders learn react link", () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
|
||||
@ -1,49 +1,46 @@
|
||||
import 'antd/dist/antd.css';
|
||||
import React, {useEffect} from 'react';
|
||||
import {useDispatch, useSelector} from 'react-redux';
|
||||
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
|
||||
import './App.css';
|
||||
import {Admin} from './pages/admin';
|
||||
import {Auth} from './pages/auth';
|
||||
import {getGlobalConf} from './store/globalConfSlice';
|
||||
import {useAppSelector} from './store/hooks';
|
||||
import {loadLoginState, loginSelector} from './store/loginSlice';
|
||||
|
||||
import "antd/dist/antd.css";
|
||||
import React, { useEffect } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
|
||||
import "./App.css";
|
||||
import { Admin } from "./pages/admin";
|
||||
import { Auth } from "./pages/auth";
|
||||
import { getGlobalConf } from "./store/globalConfSlice";
|
||||
import { useAppSelector } from "./store/hooks";
|
||||
import { loadLoginState, loginSelector } from "./store/loginSlice";
|
||||
|
||||
function LoginSwitch() {
|
||||
const login = useSelector(loginSelector)
|
||||
const login = useSelector(loginSelector);
|
||||
if (login.login) {
|
||||
return <Admin />;
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
not login
|
||||
</div>
|
||||
)
|
||||
return <div>not login</div>;
|
||||
}
|
||||
}
|
||||
|
||||
function App() {
|
||||
const dispatch = useDispatch()
|
||||
const globalConf = useAppSelector(state => state.globalConf)
|
||||
const dispatch = useDispatch();
|
||||
const globalConf = useAppSelector((state) => state.globalConf);
|
||||
useEffect(() => {
|
||||
dispatch(getGlobalConf());
|
||||
dispatch(loadLoginState())
|
||||
dispatch(loadLoginState());
|
||||
}, [dispatch]);
|
||||
return <>
|
||||
{ globalConf.loaded &&
|
||||
return (
|
||||
<>
|
||||
{globalConf.loaded && (
|
||||
<Router basename="/bison">
|
||||
<Switch>
|
||||
<Route path="/auth/:code">
|
||||
<Auth />
|
||||
<Auth />
|
||||
</Route>
|
||||
<Route path="/admin/">
|
||||
<LoginSwitch />
|
||||
<LoginSwitch />
|
||||
</Route>
|
||||
</Switch>
|
||||
</Router>
|
||||
}
|
||||
</>;
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
import axios from "axios";
|
||||
import { GlobalConf, TokenResp, SubscribeResp, TargetNameResp, SubscribeConfig } from "../utils/type";
|
||||
import { baseUrl } from './utils';
|
||||
import {
|
||||
GlobalConf,
|
||||
TokenResp,
|
||||
SubscribeResp,
|
||||
TargetNameResp,
|
||||
SubscribeConfig,
|
||||
} from "../utils/type";
|
||||
import { baseUrl } from "./utils";
|
||||
|
||||
export async function getGlobalConf(): Promise<GlobalConf> {
|
||||
const res = await axios.get<GlobalConf>(`${baseUrl}global_conf`);
|
||||
@ -8,7 +14,9 @@ export async function getGlobalConf(): Promise<GlobalConf> {
|
||||
}
|
||||
|
||||
export async function auth(token: string): Promise<TokenResp> {
|
||||
const res = await axios.get<TokenResp>(`${baseUrl}auth`, {params: {token}});
|
||||
const res = await axios.get<TokenResp>(`${baseUrl}auth`, {
|
||||
params: { token },
|
||||
});
|
||||
return res.data;
|
||||
}
|
||||
|
||||
@ -17,22 +25,39 @@ export async function getSubscribe(): Promise<SubscribeResp> {
|
||||
return res.data;
|
||||
}
|
||||
|
||||
export async function getTargetName(platformName: string, target: string): Promise<TargetNameResp> {
|
||||
const res = await axios.get(`${baseUrl}target_name`, {params: {platformName, target}});
|
||||
export async function getTargetName(
|
||||
platformName: string,
|
||||
target: string
|
||||
): Promise<TargetNameResp> {
|
||||
const res = await axios.get(`${baseUrl}target_name`, {
|
||||
params: { platformName, target },
|
||||
});
|
||||
return res.data;
|
||||
}
|
||||
|
||||
export async function addSubscribe(groupNumber: string, req: SubscribeConfig) {
|
||||
const res = await axios.post(`${baseUrl}subs`, req, {params: {groupNumber}})
|
||||
const res = await axios.post(`${baseUrl}subs`, req, {
|
||||
params: { groupNumber },
|
||||
});
|
||||
return res.data;
|
||||
}
|
||||
|
||||
export async function delSubscribe(groupNumber: string, platformName: string, target: string) {
|
||||
const res = await axios.delete(`${baseUrl}subs`, {params: {groupNumber, platformName, target}});
|
||||
export async function delSubscribe(
|
||||
groupNumber: string,
|
||||
platformName: string,
|
||||
target: string
|
||||
) {
|
||||
const res = await axios.delete(`${baseUrl}subs`, {
|
||||
params: { groupNumber, platformName, target },
|
||||
});
|
||||
return res.data;
|
||||
}
|
||||
|
||||
export async function updateSubscribe(groupNumber: string, req: SubscribeConfig) {
|
||||
return axios.patch(`${baseUrl}subs`, req, {params: {groupNumber}})
|
||||
.then(res => res.data);
|
||||
export async function updateSubscribe(
|
||||
groupNumber: string,
|
||||
req: SubscribeConfig
|
||||
) {
|
||||
return axios
|
||||
.patch(`${baseUrl}subs`, req, { params: { groupNumber } })
|
||||
.then((res) => res.data);
|
||||
}
|
||||
|
||||
@ -1,51 +1,61 @@
|
||||
import axios, {AxiosError} from "axios";
|
||||
import {Store} from "src/store";
|
||||
import { clearLoginStatus } from 'src/store/loginSlice';
|
||||
import axios, { AxiosError } from "axios";
|
||||
import { Store } from "src/store";
|
||||
import { clearLoginStatus } from "src/store/loginSlice";
|
||||
// import { useContext } from 'react';
|
||||
// import { LoginContext } from "../utils/context";
|
||||
|
||||
export const baseUrl = '/bison/api/'
|
||||
let store: Store
|
||||
export const baseUrl = "/bison/api/";
|
||||
let store: Store;
|
||||
export const injectStore = (_store: Store) => {
|
||||
store = _store
|
||||
}
|
||||
store = _store;
|
||||
};
|
||||
|
||||
// const loginStatus = useContext(LoginContext);
|
||||
axios.interceptors.request.use(function (config) {
|
||||
if (config.url && config.url.startsWith(baseUrl) && config.url !== `${baseUrl}auth`
|
||||
&& config.url !== `${baseUrl}global_conf`) {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers['Authorization'] = `Bearer ${token}`;
|
||||
} else {
|
||||
throw new axios.Cancel('User not login');
|
||||
axios.interceptors.request.use(
|
||||
function (config) {
|
||||
if (
|
||||
config.url &&
|
||||
config.url.startsWith(baseUrl) &&
|
||||
config.url !== `${baseUrl}auth` &&
|
||||
config.url !== `${baseUrl}global_conf`
|
||||
) {
|
||||
const token = localStorage.getItem("token");
|
||||
if (token) {
|
||||
config.headers["Authorization"] = `Bearer ${token}`;
|
||||
} else {
|
||||
throw new axios.Cancel("User not login");
|
||||
}
|
||||
}
|
||||
return config;
|
||||
},
|
||||
function (error) {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
return config;
|
||||
}, function (error) {
|
||||
return Promise.reject(error);
|
||||
});
|
||||
);
|
||||
|
||||
axios.interceptors.response.use(function (response) {
|
||||
// const data = response.data;
|
||||
// const parseToMap = (item: any): any => {
|
||||
// if (item instanceof Array) {
|
||||
// return item.map(parseToMap);
|
||||
// } else if (item instanceof Object) {
|
||||
// let res = new Map();
|
||||
// for (const key of Object.keys(item)) {
|
||||
// res.set(key, parseToMap(item[key]));
|
||||
// }
|
||||
// return res;
|
||||
// } else {
|
||||
// return item;
|
||||
// }
|
||||
// }
|
||||
// response.data = parseToMap(data);
|
||||
return response;
|
||||
}, function(error: AxiosError) {
|
||||
if(error.response && error.response.status === 401) {
|
||||
store.dispatch(clearLoginStatus());
|
||||
axios.interceptors.response.use(
|
||||
function (response) {
|
||||
// const data = response.data;
|
||||
// const parseToMap = (item: any): any => {
|
||||
// if (item instanceof Array) {
|
||||
// return item.map(parseToMap);
|
||||
// } else if (item instanceof Object) {
|
||||
// let res = new Map();
|
||||
// for (const key of Object.keys(item)) {
|
||||
// res.set(key, parseToMap(item[key]));
|
||||
// }
|
||||
// return res;
|
||||
// } else {
|
||||
// return item;
|
||||
// }
|
||||
// }
|
||||
// response.data = parseToMap(data);
|
||||
return response;
|
||||
},
|
||||
function (error: AxiosError) {
|
||||
if (error.response && error.response.status === 401) {
|
||||
store.dispatch(clearLoginStatus());
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
return Promise.reject(error);
|
||||
});
|
||||
);
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import {Form, Input, Modal, Select, Tag} from 'antd';
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {useSelector} from 'react-redux';
|
||||
import {addSubscribe, getTargetName, updateSubscribe} from 'src/api/config';
|
||||
import {InputTag} from 'src/component/inputTag';
|
||||
import {platformConfSelector} from 'src/store/globalConfSlice';
|
||||
import {CategoryConfig, SubscribeConfig} from 'src/utils/type';
|
||||
import { Form, Input, Modal, Select, Tag } from "antd";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { addSubscribe, getTargetName, updateSubscribe } from "src/api/config";
|
||||
import { InputTag } from "src/component/inputTag";
|
||||
import { platformConfSelector } from "src/store/globalConfSlice";
|
||||
import { CategoryConfig, SubscribeConfig } from "src/utils/type";
|
||||
|
||||
interface InputTagCustomProp {
|
||||
value?: Array<string>,
|
||||
onChange?: (value: Array<string>) => void,
|
||||
disabled?: boolean
|
||||
value?: Array<string>;
|
||||
onChange?: (value: Array<string>) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
function InputTagCustom(prop: InputTagCustomProp) {
|
||||
const [value, setValue] = useState(prop.value || []);
|
||||
@ -18,165 +18,202 @@ function InputTagCustom(prop: InputTagCustomProp) {
|
||||
if (prop.onChange) {
|
||||
prop.onChange(newVal);
|
||||
}
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (prop.value) {
|
||||
setValue(prop.value);
|
||||
}
|
||||
}, [prop.value])
|
||||
}, [prop.value]);
|
||||
return (
|
||||
<>
|
||||
{
|
||||
prop.disabled ? <Tag color="default">不支持标签</Tag>:
|
||||
{prop.disabled ? (
|
||||
<Tag color="default">不支持标签</Tag>
|
||||
) : (
|
||||
<>
|
||||
{value.length === 0 &&
|
||||
<Tag color="green">全部标签</Tag>
|
||||
}
|
||||
<InputTag color="blue" addText="添加标签" value={value} onChange={handleSetValue} />
|
||||
</>
|
||||
}
|
||||
{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
|
||||
showModal: boolean;
|
||||
groupNumber: string;
|
||||
setShowModal: (s: boolean) => void;
|
||||
refresh: () => void;
|
||||
initVal?: SubscribeConfig;
|
||||
}
|
||||
export function AddModal({
|
||||
showModal, groupNumber, setShowModal, refresh, initVal
|
||||
showModal,
|
||||
groupNumber,
|
||||
setShowModal,
|
||||
refresh,
|
||||
initVal,
|
||||
}: AddModalProp) {
|
||||
const [ confirmLoading, setConfirmLoading ] = useState<boolean>(false);
|
||||
const platformConf = useSelector(platformConfSelector)
|
||||
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 [confirmLoading, setConfirmLoading] = useState<boolean>(false);
|
||||
const platformConf = useSelector(platformConfSelector);
|
||||
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: ''
|
||||
})
|
||||
})
|
||||
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: ''
|
||||
})
|
||||
targetName: "",
|
||||
target: "",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleSubmit = (value: any) => {
|
||||
let newVal = Object.assign({}, value)
|
||||
if (typeof newVal.tags !== 'object') {
|
||||
newVal.tags = []
|
||||
let newVal = Object.assign({}, value);
|
||||
if (typeof newVal.tags !== "object") {
|
||||
newVal.tags = [];
|
||||
}
|
||||
if (typeof newVal.cats !== 'object') {
|
||||
newVal.cats = []
|
||||
if (typeof newVal.cats !== "object") {
|
||||
newVal.cats = [];
|
||||
}
|
||||
if (newVal.target === '') {
|
||||
newVal.target = 'default'
|
||||
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(() => {
|
||||
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)
|
||||
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)]}
|
||||
}, [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="订阅Tag" name="tags">
|
||||
<InputTagCustom disabled={!enabledTag}/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,122 +1,151 @@
|
||||
import {Input, Tag, Tooltip} from "antd";
|
||||
import {PresetColorType, PresetStatusColorType} from 'antd/lib/_util/colors'
|
||||
import {LiteralUnion} from 'antd/lib/_util/type'
|
||||
import React, {useRef, useState, useEffect} from "react";
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { Input, Tag, Tooltip } from "antd";
|
||||
import { PresetColorType, PresetStatusColorType } from "antd/lib/_util/colors";
|
||||
import { LiteralUnion } from "antd/lib/_util/type";
|
||||
import React, { useRef, useState, useEffect } from "react";
|
||||
import { PlusOutlined } from "@ant-design/icons";
|
||||
|
||||
interface InputTagProp {
|
||||
value?: Array<string>,
|
||||
onChange?: (value: Array<string>) => void
|
||||
value?: Array<string>;
|
||||
onChange?: (value: Array<string>) => void;
|
||||
color?: LiteralUnion<PresetColorType | PresetStatusColorType, string>;
|
||||
addText?: string
|
||||
addText?: string;
|
||||
}
|
||||
export function InputTag(prop: InputTagProp) {
|
||||
const [ value, setValue ] = useState<Array<string>>(prop.value || []);
|
||||
const [ inputVisible, setInputVisible ] = useState(false);
|
||||
const [ inputValue, setInputValue ] = useState('');
|
||||
const [ editInputIndex, setEditInputIndex ] = useState(-1);
|
||||
const [ editInputValue, setEditInputValue ] = useState('');
|
||||
const [value, setValue] = useState<Array<string>>(prop.value || []);
|
||||
const [inputVisible, setInputVisible] = useState(false);
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
const [editInputIndex, setEditInputIndex] = useState(-1);
|
||||
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])
|
||||
}, [prop.value]);
|
||||
useEffect(() => {
|
||||
if (inputVisible) {
|
||||
inputRef.current.focus()
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, [inputVisible]);
|
||||
useEffect(() => {
|
||||
if (editInputIndex !== -1) {
|
||||
editInputRef.current.focus();
|
||||
editInputRef.current.focus();
|
||||
}
|
||||
}, [editInputIndex]);
|
||||
|
||||
const handleClose = (removedTag: string) => {
|
||||
const tags = value.filter(tag => tag !== removedTag);
|
||||
setValue(_ => tags);
|
||||
const tags = value.filter((tag) => tag !== removedTag);
|
||||
setValue((_) => tags);
|
||||
if (prop.onChange) {
|
||||
prop.onChange(tags);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const showInput = () => {
|
||||
setInputVisible(_ => true);
|
||||
}
|
||||
setInputVisible((_) => true);
|
||||
};
|
||||
|
||||
const handleInputConfirm = () => {
|
||||
if (inputValue && value.indexOf(inputValue) === -1) {
|
||||
const newVal = [...value, inputValue];
|
||||
setValue(_ => newVal);
|
||||
setValue((_) => newVal);
|
||||
if (prop.onChange) {
|
||||
prop.onChange(newVal);
|
||||
}
|
||||
}
|
||||
setInputVisible(_ => false);
|
||||
setInputValue(_ => '');
|
||||
}
|
||||
setInputVisible((_) => false);
|
||||
setInputValue((_) => "");
|
||||
};
|
||||
|
||||
const handleEditInputChange = (e: any) => {
|
||||
setEditInputValue(_ => e.target.value);
|
||||
}
|
||||
setEditInputValue((_) => e.target.value);
|
||||
};
|
||||
|
||||
const handleEditInputConfirm = () => {
|
||||
const newTags = value.slice();
|
||||
newTags[editInputIndex] = editInputValue;
|
||||
setValue(_ => newTags);
|
||||
if (prop.onChange) {
|
||||
prop.onChange(newTags);
|
||||
}
|
||||
setEditInputIndex(_ => -1);
|
||||
setEditInputValue(_ => '');
|
||||
}
|
||||
setValue((_) => newTags);
|
||||
if (prop.onChange) {
|
||||
prop.onChange(newTags);
|
||||
}
|
||||
setEditInputIndex((_) => -1);
|
||||
setEditInputValue((_) => "");
|
||||
};
|
||||
|
||||
const handleInputChange = (e: any) => {
|
||||
setInputValue(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{ value.map((tag, index) => {
|
||||
{value.map((tag, index) => {
|
||||
if (editInputIndex === index) {
|
||||
return (
|
||||
<Input ref={editInputRef} key={tag} size="small"
|
||||
value={editInputValue} onChange={handleEditInputChange}
|
||||
onBlur={handleEditInputConfirm} onPressEnter={handleInputConfirm} />
|
||||
<Input
|
||||
ref={editInputRef}
|
||||
key={tag}
|
||||
size="small"
|
||||
value={editInputValue}
|
||||
onChange={handleEditInputChange}
|
||||
onBlur={handleEditInputConfirm}
|
||||
onPressEnter={handleInputConfirm}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const isLongTag = tag.length > 20;
|
||||
const tagElem = (
|
||||
<Tag
|
||||
color={prop.color || "default"}
|
||||
style={{ userSelect: "none" }}
|
||||
key={tag}
|
||||
closable
|
||||
onClose={() => handleClose(tag)}
|
||||
>
|
||||
<span
|
||||
onDoubleClick={(e) => {
|
||||
setEditInputIndex((_) => index);
|
||||
setEditInputValue((_) => tag);
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
{isLongTag ? `${tag.slice(0, 20)}...` : tag}
|
||||
</span>
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
const isLongTag = tag.length > 20;
|
||||
const tagElem = (
|
||||
<Tag color={prop.color || "default"} style={{userSelect: 'none'}} key={tag} closable onClose={() => handleClose(tag)}>
|
||||
<span onDoubleClick={e => {
|
||||
setEditInputIndex(_ => index);
|
||||
setEditInputValue(_ => tag);
|
||||
e.preventDefault();
|
||||
}}>
|
||||
{isLongTag ? `${tag.slice(0, 20)}...` : tag}
|
||||
</span>
|
||||
</Tag>
|
||||
return isLongTag ? (
|
||||
<Tooltip title={tag} key={tag}>
|
||||
{tagElem}
|
||||
</Tooltip>
|
||||
) : (
|
||||
tagElem
|
||||
);
|
||||
return isLongTag ? (
|
||||
<Tooltip title={tag} key={tag}>
|
||||
{tagElem}
|
||||
</Tooltip>
|
||||
) : ( tagElem );
|
||||
})}
|
||||
{inputVisible && (
|
||||
<Input ref={inputRef} type="text" size="small"
|
||||
style={{width: '78px', marginRight: '8px', verticalAlign: 'top'}} value={inputValue}
|
||||
onChange={handleInputChange} onBlur={handleInputConfirm}
|
||||
onPressEnter={handleInputConfirm} />
|
||||
<Input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
size="small"
|
||||
style={{ width: "78px", marginRight: "8px", verticalAlign: "top" }}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onBlur={handleInputConfirm}
|
||||
onPressEnter={handleInputConfirm}
|
||||
/>
|
||||
)}
|
||||
{!inputVisible && (
|
||||
<Tag className="site-tag-plus" onClick={showInput} style={{background: '#fff', border: 'dashed thin', borderColor: '#bfbfbf' }}>
|
||||
<PlusOutlined/> {prop.addText || "Add Tag"}
|
||||
<Tag
|
||||
className="site-tag-plus"
|
||||
onClick={showInput}
|
||||
style={{
|
||||
background: "#fff",
|
||||
border: "dashed thin",
|
||||
borderColor: "#bfbfbf",
|
||||
}}
|
||||
>
|
||||
<PlusOutlined /> {prop.addText || "Add Tag"}
|
||||
</Tag>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
@ -1,108 +1,190 @@
|
||||
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, {useState} from "react";
|
||||
import {useDispatch, useSelector} from 'react-redux';
|
||||
import {addSubscribe, delSubscribe} from 'src/api/config';
|
||||
import {platformConfSelector} from 'src/store/globalConfSlice';
|
||||
import {groupConfigSelector, updateGroupSubs} from 'src/store/groupConfigSlice';
|
||||
import {PlatformConfig, SubscribeConfig, SubscribeResp} from 'src/utils/type';
|
||||
import {AddModal} from './addSubsModal';
|
||||
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, { useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { addSubscribe, delSubscribe } from "src/api/config";
|
||||
import { platformConfSelector } from "src/store/globalConfSlice";
|
||||
import {
|
||||
groupConfigSelector,
|
||||
updateGroupSubs,
|
||||
} from "src/store/groupConfigSlice";
|
||||
import { PlatformConfig, SubscribeConfig, SubscribeResp } from "src/utils/type";
|
||||
import { AddModal } from "./addSubsModal";
|
||||
|
||||
interface CopyModalProp {
|
||||
setShowModal: (modalShow: boolean) => void
|
||||
showModal: boolean
|
||||
config: SubscribeConfig,
|
||||
groups: SubscribeResp
|
||||
currentGroupNumber: string
|
||||
reload: () => void
|
||||
setShowModal: (modalShow: boolean) => void;
|
||||
showModal: boolean;
|
||||
config: SubscribeConfig;
|
||||
groups: SubscribeResp;
|
||||
currentGroupNumber: string;
|
||||
reload: () => void;
|
||||
}
|
||||
function CopyModal({setShowModal,config,
|
||||
currentGroupNumber,groups,showModal,reload}: CopyModalProp) {
|
||||
const [confirmLoading, setConfirmLoading] = useState(false)
|
||||
const [ selectedGroups, setSelectGroups ] = useState<Array<string>>([]);
|
||||
const postReqs = async (selectedGroups: Array<string>, config: SubscribeConfig) => {
|
||||
for(let selectedGroup of selectedGroups) {
|
||||
function CopyModal({
|
||||
setShowModal,
|
||||
config,
|
||||
currentGroupNumber,
|
||||
groups,
|
||||
showModal,
|
||||
reload,
|
||||
}: CopyModalProp) {
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [selectedGroups, setSelectGroups] = useState<Array<string>>([]);
|
||||
const postReqs = async (
|
||||
selectedGroups: Array<string>,
|
||||
config: SubscribeConfig
|
||||
) => {
|
||||
for (let selectedGroup of selectedGroups) {
|
||||
await addSubscribe(selectedGroup, config);
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleOk = () => {
|
||||
if (selectedGroups.length === 0) {
|
||||
message.error("请至少选择一个目标群");
|
||||
} else{
|
||||
setConfirmLoading(true)
|
||||
} else {
|
||||
setConfirmLoading(true);
|
||||
postReqs(selectedGroups, config).then(() => {
|
||||
setConfirmLoading(false)
|
||||
setShowModal(false)
|
||||
return reload()
|
||||
})
|
||||
setConfirmLoading(false);
|
||||
setShowModal(false);
|
||||
return reload();
|
||||
});
|
||||
}
|
||||
}
|
||||
return <Modal title="复制订阅" visible={showModal} confirmLoading={confirmLoading}
|
||||
onCancel={() => setShowModal(false)} onOk={handleOk}>
|
||||
<Select mode="multiple" onChange={(value: Array<string>) => setSelectGroups(value)}
|
||||
style={{width: '80%'}}>
|
||||
{
|
||||
Object.keys(groups).filter(groupNumber => groupNumber !== currentGroupNumber)
|
||||
.map((groupNumber) =>
|
||||
<Select.Option value={groupNumber} key={groupNumber}>
|
||||
{`${groupNumber} - ${groups[groupNumber].name}`}
|
||||
</Select.Option>)
|
||||
}
|
||||
</Select>
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
title="复制订阅"
|
||||
visible={showModal}
|
||||
confirmLoading={confirmLoading}
|
||||
onCancel={() => setShowModal(false)}
|
||||
onOk={handleOk}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
onChange={(value: Array<string>) => setSelectGroups(value)}
|
||||
style={{ width: "80%" }}
|
||||
>
|
||||
{Object.keys(groups)
|
||||
.filter((groupNumber) => groupNumber !== currentGroupNumber)
|
||||
.map((groupNumber) => (
|
||||
<Select.Option value={groupNumber} key={groupNumber}>
|
||||
{`${groupNumber} - ${groups[groupNumber].name}`}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
interface SubscribeCardProp {
|
||||
groupNumber: string
|
||||
config: SubscribeConfig
|
||||
groupNumber: string;
|
||||
config: SubscribeConfig;
|
||||
}
|
||||
export function SubscribeCard({groupNumber, config}: SubscribeCardProp) {
|
||||
const platformConfs = useSelector(platformConfSelector)
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const [showEditModal, setShowEditModal] = useState(false)
|
||||
export function SubscribeCard({ groupNumber, config }: SubscribeCardProp) {
|
||||
const platformConfs = useSelector(platformConfSelector);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const platformConf = platformConfs[config.platformName] as PlatformConfig;
|
||||
const dispatcher = useDispatch();
|
||||
const groupSubscribes = useSelector(groupConfigSelector);
|
||||
const reload = () => dispatcher(updateGroupSubs())
|
||||
const handleDelete = (groupNumber: string, platformName: string, target: string) => () => {
|
||||
delSubscribe(groupNumber, platformName, target).then(() => {
|
||||
reload()
|
||||
})
|
||||
}
|
||||
const reload = () => dispatcher(updateGroupSubs());
|
||||
const handleDelete =
|
||||
(groupNumber: string, platformName: string, target: string) => () => {
|
||||
delSubscribe(groupNumber, platformName, target).then(() => {
|
||||
reload();
|
||||
});
|
||||
};
|
||||
return (
|
||||
<Col span={8} 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>,
|
||||
]}>
|
||||
<Form labelCol={{ span: 4 }}>
|
||||
<Form.Item label="订阅帐号">
|
||||
{ platformConf.hasTarget ? config.target : <Tag color="default">无帐号</Tag> }
|
||||
</Form.Item>
|
||||
<Form.Item label="订阅类型">
|
||||
{Object.keys(platformConf.categories).length > 0 ?
|
||||
config.cats.map((catKey: number) => (<Tag color="green" key={catKey}>{platformConf.categories[catKey]}</Tag>)) :
|
||||
<Tag color="default">不支持类型</Tag>}
|
||||
</Form.Item>
|
||||
<Form.Item label="订阅Tag">
|
||||
{platformConf.enabledTag ? config.tags.length > 0 ? config.tags.map(tag => (<Tag color="green" key={tag}>{tag}</Tag>)) : (<Tag color="blue">全部标签</Tag>) :
|
||||
<Tag color="default">不支持Tag</Tag>}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</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>
|
||||
)
|
||||
<Col span={8} 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>,
|
||||
]}
|
||||
>
|
||||
<Form labelCol={{ span: 4 }}>
|
||||
<Form.Item label="订阅帐号">
|
||||
{platformConf.hasTarget ? (
|
||||
config.target
|
||||
) : (
|
||||
<Tag color="default">无帐号</Tag>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="订阅类型">
|
||||
{Object.keys(platformConf.categories).length > 0 ? (
|
||||
config.cats.map((catKey: number) => (
|
||||
<Tag color="green" key={catKey}>
|
||||
{platformConf.categories[catKey]}
|
||||
</Tag>
|
||||
))
|
||||
) : (
|
||||
<Tag color="default">不支持类型</Tag>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="订阅Tag">
|
||||
{platformConf.enabledTag ? (
|
||||
config.tags.length > 0 ? (
|
||||
config.tags.map((tag) => (
|
||||
<Tag color="green" key={tag}>
|
||||
{tag}
|
||||
</Tag>
|
||||
))
|
||||
) : (
|
||||
<Tag color="blue">全部标签</Tag>
|
||||
)
|
||||
) : (
|
||||
<Tag color="default">不支持Tag</Tag>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import {Provider} from 'react-redux';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import store from './store';
|
||||
import {injectStore} from 'src/api/utils';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { Provider } from "react-redux";
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
import reportWebVitals from "./reportWebVitals";
|
||||
import store from "./store";
|
||||
import { injectStore } from "src/api/utils";
|
||||
|
||||
injectStore(store);
|
||||
ReactDOM.render(
|
||||
@ -14,7 +14,7 @@ ReactDOM.render(
|
||||
<App />
|
||||
</Provider>
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
|
||||
@ -1,56 +1,73 @@
|
||||
import {Button, Collapse, Empty, Row} from 'antd';
|
||||
import React, {ReactElement, useEffect, useState} from "react";
|
||||
import {useDispatch, useSelector} from 'react-redux';
|
||||
import {AddModal} from 'src/component/addSubsModal';
|
||||
import {SubscribeCard} from 'src/component/subscribeCard';
|
||||
import {groupConfigSelector, updateGroupSubs} from 'src/store/groupConfigSlice';
|
||||
import { Button, Collapse, Empty, Row } from "antd";
|
||||
import React, { ReactElement, useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { AddModal } from "src/component/addSubsModal";
|
||||
import { SubscribeCard } from "src/component/subscribeCard";
|
||||
import {
|
||||
groupConfigSelector,
|
||||
updateGroupSubs,
|
||||
} from "src/store/groupConfigSlice";
|
||||
|
||||
interface ConfigPageProp {
|
||||
tab: string
|
||||
tab: string;
|
||||
}
|
||||
export function ConfigPage(prop: ConfigPageProp) {
|
||||
const [ showModal, setShowModal ] = useState<boolean>(false);
|
||||
const [ currentAddingGroupNumber, setCurrentAddingGroupNumber ] = useState('');
|
||||
const [showModal, setShowModal] = useState<boolean>(false);
|
||||
const [currentAddingGroupNumber, setCurrentAddingGroupNumber] = useState("");
|
||||
const configData = useSelector(groupConfigSelector);
|
||||
const dispatcher = useDispatch();
|
||||
useEffect(() => {
|
||||
dispatcher(updateGroupSubs())
|
||||
dispatcher(updateGroupSubs());
|
||||
}, [prop.tab, dispatcher]);
|
||||
const clickNew = (groupNumber: string) => (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setShowModal(_ => true);
|
||||
setCurrentAddingGroupNumber(groupNumber);
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
const clickNew =
|
||||
(groupNumber: string) => (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setShowModal((_) => true);
|
||||
setCurrentAddingGroupNumber(groupNumber);
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
if (Object.keys(configData).length === 0) {
|
||||
return <Empty />
|
||||
return <Empty />;
|
||||
} else {
|
||||
let groups: Array<ReactElement> = [];
|
||||
for (let key of Object.keys(configData)) {
|
||||
let value = configData[key];
|
||||
groups.push(
|
||||
<Collapse.Panel key={key} header={
|
||||
<span>{`${key} - ${value.name}`}<Button style={{float: "right"}} onClick={clickNew(key)}>添加</Button></span>
|
||||
}>
|
||||
<Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32},
|
||||
{ xs: 8, sm: 16, md: 24, lg: 32}]} align="middle">
|
||||
{value.subscribes.map((subs, idx) => <SubscribeCard key={idx}
|
||||
groupNumber={key} config={subs} />)}
|
||||
<Collapse.Panel
|
||||
key={key}
|
||||
header={
|
||||
<span>
|
||||
{`${key} - ${value.name}`}
|
||||
<Button style={{ float: "right" }} onClick={clickNew(key)}>
|
||||
添加
|
||||
</Button>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Row
|
||||
gutter={[
|
||||
{ xs: 8, sm: 16, md: 24, lg: 32 },
|
||||
{ xs: 8, sm: 16, md: 24, lg: 32 },
|
||||
]}
|
||||
align="middle"
|
||||
>
|
||||
{value.subscribes.map((subs, idx) => (
|
||||
<SubscribeCard key={idx} groupNumber={key} config={subs} />
|
||||
))}
|
||||
</Row>
|
||||
</Collapse.Panel>
|
||||
)
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Collapse>
|
||||
{groups}
|
||||
</Collapse>
|
||||
<AddModal groupNumber={currentAddingGroupNumber} showModal={showModal}
|
||||
refresh={() => dispatcher(updateGroupSubs())}
|
||||
setShowModal={(s: boolean) => setShowModal(_ => s)} />
|
||||
</div>
|
||||
)
|
||||
<div>
|
||||
<Collapse>{groups}</Collapse>
|
||||
<AddModal
|
||||
groupNumber={currentAddingGroupNumber}
|
||||
showModal={showModal}
|
||||
refresh={() => dispatcher(updateGroupSubs())}
|
||||
setShowModal={(s: boolean) => setShowModal((_) => s)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,37 +1,39 @@
|
||||
import {BugOutlined, SettingOutlined} from '@ant-design/icons';
|
||||
import {Layout, Menu} from 'antd';
|
||||
import React, {useState} from "react";
|
||||
import {useSelector} from 'react-redux';
|
||||
import {loginSelector} from 'src/store/loginSlice';
|
||||
import './admin.css';
|
||||
import {ConfigPage} from './configPage';
|
||||
import { BugOutlined, SettingOutlined } from "@ant-design/icons";
|
||||
import { Layout, Menu } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { loginSelector } from "src/store/loginSlice";
|
||||
import "./admin.css";
|
||||
import { ConfigPage } from "./configPage";
|
||||
|
||||
export function Admin() {
|
||||
const login = useSelector(loginSelector)
|
||||
const [ tab, changeTab ] = useState("manage");
|
||||
const login = useSelector(loginSelector);
|
||||
const [tab, changeTab] = useState("manage");
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Layout.Sider className="layout-side">
|
||||
<div className="user">
|
||||
</div>
|
||||
<Menu mode="inline" theme="dark" defaultSelectedKeys={[tab]}
|
||||
onClick={({key}) => changeTab(key)}>
|
||||
<Menu.Item key="manage" icon={<SettingOutlined />}>订阅管理</Menu.Item>
|
||||
{ login.type === 'admin' &&
|
||||
<Menu.Item key="log" icon={<BugOutlined />}>查看日志</Menu.Item>
|
||||
}
|
||||
</Menu>
|
||||
</Layout.Sider>
|
||||
<Layout.Content>
|
||||
<div style={{margin: '24px', background: '#fff', minHeight: '640px'}}>
|
||||
{
|
||||
tab === 'manage' ?
|
||||
<ConfigPage tab={tab}/>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
)
|
||||
<Layout style={{ minHeight: "100vh" }}>
|
||||
<Layout.Sider className="layout-side">
|
||||
<div className="user"></div>
|
||||
<Menu
|
||||
mode="inline"
|
||||
theme="dark"
|
||||
defaultSelectedKeys={[tab]}
|
||||
onClick={({ key }) => changeTab(key)}
|
||||
>
|
||||
<Menu.Item key="manage" icon={<SettingOutlined />}>
|
||||
订阅管理
|
||||
</Menu.Item>
|
||||
{login.type === "admin" && (
|
||||
<Menu.Item key="log" icon={<BugOutlined />}>
|
||||
查看日志
|
||||
</Menu.Item>
|
||||
)}
|
||||
</Menu>
|
||||
</Layout.Sider>
|
||||
<Layout.Content>
|
||||
<div style={{ margin: "24px", background: "#fff", minHeight: "640px" }}>
|
||||
{tab === "manage" ? <ConfigPage tab={tab} /> : null}
|
||||
</div>
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,28 +1,31 @@
|
||||
import React, {useEffect} from "react";
|
||||
import {useDispatch, useSelector} from "react-redux";
|
||||
import {useParams} from "react-router";
|
||||
import {Redirect} from 'react-router-dom';
|
||||
import {login, loginSelector} from 'src/store/loginSlice';
|
||||
import React, { useEffect } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useParams } from "react-router";
|
||||
import { Redirect } from "react-router-dom";
|
||||
import { login, loginSelector } from "src/store/loginSlice";
|
||||
|
||||
interface AuthParam {
|
||||
code: string
|
||||
interface AuthParam {
|
||||
code: string;
|
||||
}
|
||||
export function Auth() {
|
||||
const { code } = useParams<AuthParam>();
|
||||
const { code } = useParams<AuthParam>();
|
||||
const dispatch = useDispatch();
|
||||
const loginState = useSelector(loginSelector)
|
||||
const loginState = useSelector(loginSelector);
|
||||
useEffect(() => {
|
||||
const loginFun = async () => {
|
||||
dispatch(login(code));
|
||||
}
|
||||
};
|
||||
loginFun();
|
||||
}, [code, dispatch])
|
||||
return <>
|
||||
{ loginState.login ?
|
||||
<Redirect to={{pathname: '/admin'}} /> :
|
||||
loginState.failed ?
|
||||
<div>登录失败，请重新获取连接</div> :
|
||||
<div>Logining...</div>
|
||||
}
|
||||
</>;
|
||||
}, [code, dispatch]);
|
||||
return (
|
||||
<>
|
||||
{loginState.login ? (
|
||||
<Redirect to={{ pathname: "/admin" }} />
|
||||
) : loginState.failed ? (
|
||||
<div>登录失败，请重新获取连接</div>
|
||||
) : (
|
||||
<div>Logining...</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { ReportHandler } from 'web-vitals';
|
||||
import { ReportHandler } from "web-vitals";
|
||||
|
||||
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
|
||||
@ -2,4 +2,4 @@
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
import "@testing-library/jest-dom";
|
||||
|
||||
@ -1,23 +1,31 @@
|
||||
import {CaseReducer, createAsyncThunk, createSlice, PayloadAction} from "@reduxjs/toolkit";
|
||||
import {getGlobalConf as getGlobalConfApi} from "src/api/config";
|
||||
import {GlobalConf} from "src/utils/type";
|
||||
import {RootState} from ".";
|
||||
|
||||
import {
|
||||
CaseReducer,
|
||||
createAsyncThunk,
|
||||
createSlice,
|
||||
PayloadAction,
|
||||
} from "@reduxjs/toolkit";
|
||||
import { getGlobalConf as getGlobalConfApi } from "src/api/config";
|
||||
import { GlobalConf } from "src/utils/type";
|
||||
import { RootState } from ".";
|
||||
|
||||
const initialState: GlobalConf = {
|
||||
platformConf: {},
|
||||
loaded: false
|
||||
}
|
||||
loaded: false,
|
||||
};
|
||||
|
||||
const setGlobalConf: CaseReducer<GlobalConf, PayloadAction<GlobalConf>> = (_, action) => {
|
||||
return {...action.payload, loaded: true}
|
||||
}
|
||||
const setGlobalConf: CaseReducer<GlobalConf, PayloadAction<GlobalConf>> = (
|
||||
_,
|
||||
action
|
||||
) => {
|
||||
return { ...action.payload, loaded: true };
|
||||
};
|
||||
|
||||
export const getGlobalConf = createAsyncThunk(
|
||||
"globalConf/set",
|
||||
getGlobalConfApi,
|
||||
{
|
||||
condition: (_, { getState }) => !(getState() as RootState).globalConf.loaded
|
||||
condition: (_, { getState }) =>
|
||||
!(getState() as RootState).globalConf.loaded,
|
||||
}
|
||||
);
|
||||
|
||||
@ -26,10 +34,11 @@ export const globalConfSlice = createSlice({
|
||||
initialState,
|
||||
reducers: {},
|
||||
extraReducers: (builder) => {
|
||||
builder.addCase(getGlobalConf.fulfilled, setGlobalConf)
|
||||
}
|
||||
})
|
||||
builder.addCase(getGlobalConf.fulfilled, setGlobalConf);
|
||||
},
|
||||
});
|
||||
|
||||
export const platformConfSelector = (state: RootState) => state.globalConf.platformConf
|
||||
export const platformConfSelector = (state: RootState) =>
|
||||
state.globalConf.platformConf;
|
||||
|
||||
export default globalConfSlice.reducer
|
||||
export default globalConfSlice.reducer;
|
||||
|
||||
@ -1,27 +1,36 @@
|
||||
import {CaseReducer, createAsyncThunk, createSlice, PayloadAction} from '@reduxjs/toolkit';
|
||||
import {SubscribeResp} from 'src/utils/type';
|
||||
import {getSubscribe} from 'src/api/config';
|
||||
import {RootState} from '.';
|
||||
const initialState: SubscribeResp = {}
|
||||
import {
|
||||
CaseReducer,
|
||||
createAsyncThunk,
|
||||
createSlice,
|
||||
PayloadAction,
|
||||
} from "@reduxjs/toolkit";
|
||||
import { SubscribeResp } from "src/utils/type";
|
||||
import { getSubscribe } from "src/api/config";
|
||||
import { RootState } from ".";
|
||||
const initialState: SubscribeResp = {};
|
||||
|
||||
const setSubs: CaseReducer<SubscribeResp, PayloadAction<SubscribeResp>> = (_, action) => {
|
||||
return action.payload
|
||||
}
|
||||
const setSubs: CaseReducer<SubscribeResp, PayloadAction<SubscribeResp>> = (
|
||||
_,
|
||||
action
|
||||
) => {
|
||||
return action.payload;
|
||||
};
|
||||
|
||||
export const updateGroupSubs = createAsyncThunk(
|
||||
"groupConfig/update", getSubscribe
|
||||
)
|
||||
"groupConfig/update",
|
||||
getSubscribe
|
||||
);
|
||||
|
||||
export const groupConfigSlice = createSlice({
|
||||
name: "groupConfig",
|
||||
initialState,
|
||||
reducers: {
|
||||
setSubs
|
||||
setSubs,
|
||||
},
|
||||
extraReducers: (reducer) => {
|
||||
reducer.addCase(updateGroupSubs.fulfilled, setSubs)
|
||||
}
|
||||
})
|
||||
reducer.addCase(updateGroupSubs.fulfilled, setSubs);
|
||||
},
|
||||
});
|
||||
|
||||
export const groupConfigSelector = (state: RootState) => state.groupConfig;
|
||||
export default groupConfigSlice.reducer;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import {TypedUseSelectorHook, useDispatch, useSelector} from "react-redux";
|
||||
import {AppDispatch, RootState} from ".";
|
||||
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
|
||||
import { AppDispatch, RootState } from ".";
|
||||
|
||||
export const useAppDispacher = () => useDispatch<AppDispatch>()
|
||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
|
||||
export const useAppDispacher = () => useDispatch<AppDispatch>();
|
||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import {configureStore} from "@reduxjs/toolkit";
|
||||
import { configureStore } from "@reduxjs/toolkit";
|
||||
import loginSlice from "./loginSlice";
|
||||
import globalConfSlice from "./globalConfSlice";
|
||||
import groupConfigSlice from './groupConfigSlice';
|
||||
import groupConfigSlice from "./groupConfigSlice";
|
||||
|
||||
const store = configureStore({
|
||||
reducer: {
|
||||
login: loginSlice,
|
||||
globalConf: globalConfSlice,
|
||||
groupConfig: groupConfigSlice,
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
|
||||
export default store;
|
||||
|
||||
|
||||
@ -1,108 +1,121 @@
|
||||
import { AnyAction, CaseReducer, createAsyncThunk, createSlice, PayloadAction, ThunkAction } from "@reduxjs/toolkit";
|
||||
import jwt_decode from 'jwt-decode';
|
||||
import {
|
||||
AnyAction,
|
||||
CaseReducer,
|
||||
createAsyncThunk,
|
||||
createSlice,
|
||||
PayloadAction,
|
||||
ThunkAction,
|
||||
} from "@reduxjs/toolkit";
|
||||
import jwt_decode from "jwt-decode";
|
||||
import { LoginStatus, TokenResp } from "src/utils/type";
|
||||
import { auth } from "src/api/config";
|
||||
import {RootState} from ".";
|
||||
import { RootState } from ".";
|
||||
|
||||
const initialState: LoginStatus = {
|
||||
login: false,
|
||||
type: '',
|
||||
name: '',
|
||||
id: '123',
|
||||
type: "",
|
||||
name: "",
|
||||
id: "123",
|
||||
// groups: [],
|
||||
token: '',
|
||||
failed: false
|
||||
}
|
||||
token: "",
|
||||
failed: false,
|
||||
};
|
||||
|
||||
interface storedInfo {
|
||||
type: string
|
||||
name: string
|
||||
id: string
|
||||
type: string;
|
||||
name: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
const loginAction: CaseReducer<LoginStatus, PayloadAction<TokenResp>> = (_, action) => {
|
||||
const loginAction: CaseReducer<LoginStatus, PayloadAction<TokenResp>> = (
|
||||
_,
|
||||
action
|
||||
) => {
|
||||
return {
|
||||
login: true,
|
||||
failed: false,
|
||||
type: action.payload.type,
|
||||
name: action.payload.name,
|
||||
id: action.payload.id,
|
||||
token: action.payload.token
|
||||
}
|
||||
}
|
||||
token: action.payload.token,
|
||||
};
|
||||
};
|
||||
|
||||
export const login = createAsyncThunk(
|
||||
"auth/login",
|
||||
async (code: string) => {
|
||||
let res = await auth(code);
|
||||
if (res.status !== 200) {
|
||||
throw Error("Login Error")
|
||||
throw Error("Login Error");
|
||||
} else {
|
||||
localStorage.setItem('loginInfo', JSON.stringify({
|
||||
'type': res.type,
|
||||
'name': res.name,
|
||||
id: res.id,
|
||||
}))
|
||||
localStorage.setItem('token', res.token)
|
||||
localStorage.setItem(
|
||||
"loginInfo",
|
||||
JSON.stringify({
|
||||
type: res.type,
|
||||
name: res.name,
|
||||
id: res.id,
|
||||
})
|
||||
);
|
||||
localStorage.setItem("token", res.token);
|
||||
}
|
||||
return res
|
||||
return res;
|
||||
},
|
||||
{
|
||||
condition: (_: string, { getState }) => {
|
||||
const { login } = getState() as { login: LoginStatus }
|
||||
const { login } = getState() as { login: LoginStatus };
|
||||
return !login.login;
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
);
|
||||
|
||||
export const loginSlice = createSlice({
|
||||
name: 'auth',
|
||||
name: "auth",
|
||||
initialState,
|
||||
reducers: {
|
||||
doLogin: loginAction,
|
||||
doClearLogin: (state) => {
|
||||
state.login = false
|
||||
}
|
||||
state.login = false;
|
||||
},
|
||||
},
|
||||
extraReducers: (builder) => {
|
||||
builder.addCase(login.fulfilled, loginAction);
|
||||
builder.addCase(login.rejected, (stat) => {
|
||||
stat.failed = true
|
||||
})
|
||||
}
|
||||
})
|
||||
stat.failed = true;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const { doLogin, doClearLogin } = loginSlice.actions
|
||||
export const { doLogin, doClearLogin } = loginSlice.actions;
|
||||
|
||||
export const loadLoginState = (): ThunkAction<void, RootState, unknown, AnyAction> =>
|
||||
export const loadLoginState =
|
||||
(): ThunkAction<void, RootState, unknown, AnyAction> =>
|
||||
(dispatch, getState) => {
|
||||
if (getState().login.login) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
const infoJson = localStorage.getItem('loginInfo')
|
||||
const jwtToken = localStorage.getItem('token');
|
||||
const infoJson = localStorage.getItem("loginInfo");
|
||||
const jwtToken = localStorage.getItem("token");
|
||||
if (infoJson && jwtToken) {
|
||||
const decodedJwt = jwt_decode(jwtToken) as { exp: number };
|
||||
if (decodedJwt.exp < Date.now() / 1000) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
const info = JSON.parse(infoJson) as storedInfo
|
||||
const info = JSON.parse(infoJson) as storedInfo;
|
||||
const payload: TokenResp = {
|
||||
...info,
|
||||
status: 200,
|
||||
token: jwtToken,
|
||||
}
|
||||
dispatch(doLogin(payload))
|
||||
};
|
||||
dispatch(doLogin(payload));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const clearLoginStatus = (): ThunkAction<void, RootState, unknown, AnyAction> =>
|
||||
(dispatch) => {
|
||||
localStorage.removeItem('loginInfo')
|
||||
localStorage.removeItem('token')
|
||||
dispatch(doClearLogin())
|
||||
}
|
||||
export const loginSelector = (state: RootState) => state.login
|
||||
export const clearLoginStatus =
|
||||
(): ThunkAction<void, RootState, unknown, AnyAction> => (dispatch) => {
|
||||
localStorage.removeItem("loginInfo");
|
||||
localStorage.removeItem("token");
|
||||
dispatch(doClearLogin());
|
||||
};
|
||||
export const loginSelector = (state: RootState) => state.login;
|
||||
|
||||
export default loginSlice.reducer
|
||||
export default loginSlice.reducer;
|
||||
|
||||
@ -1,34 +1,34 @@
|
||||
interface QQGroup {
|
||||
id: string,
|
||||
name: string,
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface LoginStatus {
|
||||
login: boolean
|
||||
type: string
|
||||
name: string
|
||||
id: string
|
||||
login: boolean;
|
||||
type: string;
|
||||
name: string;
|
||||
id: string;
|
||||
// groups: Array<QQGroup>
|
||||
token: string,
|
||||
failed: boolean,
|
||||
token: string;
|
||||
failed: boolean;
|
||||
}
|
||||
|
||||
export type LoginContextType = {
|
||||
login: LoginStatus
|
||||
save: (status: LoginStatus) => void
|
||||
}
|
||||
login: LoginStatus;
|
||||
save: (status: LoginStatus) => void;
|
||||
};
|
||||
|
||||
export interface SubscribeConfig {
|
||||
platformName: string
|
||||
target: string
|
||||
targetName: string
|
||||
cats: Array<number>
|
||||
tags: Array<string>
|
||||
platformName: string;
|
||||
target: string;
|
||||
targetName: string;
|
||||
cats: Array<number>;
|
||||
tags: Array<string>;
|
||||
}
|
||||
|
||||
export interface GlobalConf {
|
||||
platformConf: AllPlatformConf,
|
||||
loaded: boolean
|
||||
platformConf: AllPlatformConf;
|
||||
loaded: boolean;
|
||||
}
|
||||
|
||||
export interface AllPlatformConf {
|
||||
@ -36,34 +36,34 @@ export interface AllPlatformConf {
|
||||
}
|
||||
|
||||
export interface CategoryConfig {
|
||||
[idx: number]: string
|
||||
[idx: number]: string;
|
||||
}
|
||||
|
||||
export interface PlatformConfig {
|
||||
name: string
|
||||
categories: CategoryConfig
|
||||
enabledTag: boolean,
|
||||
platformName: string,
|
||||
hasTarget: boolean
|
||||
name: string;
|
||||
categories: CategoryConfig;
|
||||
enabledTag: boolean;
|
||||
platformName: string;
|
||||
hasTarget: boolean;
|
||||
}
|
||||
|
||||
export interface TokenResp {
|
||||
status: number,
|
||||
token: string,
|
||||
type: string,
|
||||
id: string
|
||||
name: string
|
||||
status: number;
|
||||
token: string;
|
||||
type: string;
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface SubscribeGroupDetail {
|
||||
name: string,
|
||||
subscribes: Array<SubscribeConfig>
|
||||
name: string;
|
||||
subscribes: Array<SubscribeConfig>;
|
||||
}
|
||||
|
||||
export interface SubscribeResp {
|
||||
[idx: string]: SubscribeGroupDetail
|
||||
[idx: string]: SubscribeGroupDetail;
|
||||
}
|
||||
|
||||
export interface TargetNameResp {
|
||||
targetName: string
|
||||
targetName: string;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user