diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 77e9bc6..baf2d35 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -20,4 +20,4 @@ repos:
     rev: v2.5.1
     hooks:
       - id: prettier
-        types_or: [markdown]
+        types_or: [markdown, ts, tsx]
diff --git a/admin-frontend/src/App.test.tsx b/admin-frontend/src/App.test.tsx
index 2a68616..d76787e 100644
--- a/admin-frontend/src/App.test.tsx
+++ b/admin-frontend/src/App.test.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();
diff --git a/admin-frontend/src/App.tsx b/admin-frontend/src/App.tsx
index aacb1e7..6ab4c01 100644
--- a/admin-frontend/src/App.tsx
+++ b/admin-frontend/src/App.tsx
@@ -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;
diff --git a/admin-frontend/src/api/config.ts b/admin-frontend/src/api/config.ts
index 3286f74..d66f325 100644
--- a/admin-frontend/src/api/config.ts
+++ b/admin-frontend/src/api/config.ts
@@ -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);
 }
diff --git a/admin-frontend/src/api/utils.ts b/admin-frontend/src/api/utils.ts
index ba8a7c9..13ee025 100644
--- a/admin-frontend/src/api/utils.ts
+++ b/admin-frontend/src/api/utils.ts
@@ -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);
-});
+);
diff --git a/admin-frontend/src/component/addSubsModal.tsx b/admin-frontend/src/component/addSubsModal.tsx
index b51113e..9b68a8f 100644
--- a/admin-frontend/src/component/addSubsModal.tsx
+++ b/admin-frontend/src/component/addSubsModal.tsx
@@ -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>
+  );
 }
diff --git a/admin-frontend/src/component/inputTag.tsx b/admin-frontend/src/component/inputTag.tsx
index 9408a61..e633e91 100644
--- a/admin-frontend/src/component/inputTag.tsx
+++ b/admin-frontend/src/component/inputTag.tsx
@@ -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>
       )}
     </>
   );
-
 }
diff --git a/admin-frontend/src/component/subscribeCard.tsx b/admin-frontend/src/component/subscribeCard.tsx
index 66d38dc..37c3ef0 100644
--- a/admin-frontend/src/component/subscribeCard.tsx
+++ b/admin-frontend/src/component/subscribeCard.tsx
@@ -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>
+  );
 }
diff --git a/admin-frontend/src/index.tsx b/admin-frontend/src/index.tsx
index 5621bf9..874357b 100644
--- a/admin-frontend/src/index.tsx
+++ b/admin-frontend/src/index.tsx
@@ -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
diff --git a/admin-frontend/src/pages/admin/configPage/index.tsx b/admin-frontend/src/pages/admin/configPage/index.tsx
index 06d676a..9552fe1 100644
--- a/admin-frontend/src/pages/admin/configPage/index.tsx
+++ b/admin-frontend/src/pages/admin/configPage/index.tsx
@@ -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>
+    );
   }
 }
-
-
diff --git a/admin-frontend/src/pages/admin/index.tsx b/admin-frontend/src/pages/admin/index.tsx
index 4d860be..8fe24aa 100644
--- a/admin-frontend/src/pages/admin/index.tsx
+++ b/admin-frontend/src/pages/admin/index.tsx
@@ -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>
+  );
 }
-
diff --git a/admin-frontend/src/pages/auth.tsx b/admin-frontend/src/pages/auth.tsx
index 299c58d..c27046d 100644
--- a/admin-frontend/src/pages/auth.tsx
+++ b/admin-frontend/src/pages/auth.tsx
@@ -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>
+      )}
+    </>
+  );
 }
diff --git a/admin-frontend/src/reportWebVitals.ts b/admin-frontend/src/reportWebVitals.ts
index 49a2a16..5fa3583 100644
--- a/admin-frontend/src/reportWebVitals.ts
+++ b/admin-frontend/src/reportWebVitals.ts
@@ -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);
diff --git a/admin-frontend/src/setupTests.ts b/admin-frontend/src/setupTests.ts
index 8f2609b..1dd407a 100644
--- a/admin-frontend/src/setupTests.ts
+++ b/admin-frontend/src/setupTests.ts
@@ -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";
diff --git a/admin-frontend/src/store/globalConfSlice.ts b/admin-frontend/src/store/globalConfSlice.ts
index 914066a..d11d52b 100644
--- a/admin-frontend/src/store/globalConfSlice.ts
+++ b/admin-frontend/src/store/globalConfSlice.ts
@@ -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;
diff --git a/admin-frontend/src/store/groupConfigSlice.ts b/admin-frontend/src/store/groupConfigSlice.ts
index 3f42130..98089c8 100644
--- a/admin-frontend/src/store/groupConfigSlice.ts
+++ b/admin-frontend/src/store/groupConfigSlice.ts
@@ -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;
diff --git a/admin-frontend/src/store/hooks.ts b/admin-frontend/src/store/hooks.ts
index 99221df..5e6629e 100644
--- a/admin-frontend/src/store/hooks.ts
+++ b/admin-frontend/src/store/hooks.ts
@@ -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;
diff --git a/admin-frontend/src/store/index.ts b/admin-frontend/src/store/index.ts
index 36f6821..18530e7 100644
--- a/admin-frontend/src/store/index.ts
+++ b/admin-frontend/src/store/index.ts
@@ -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;
 
diff --git a/admin-frontend/src/store/loginSlice.ts b/admin-frontend/src/store/loginSlice.ts
index 6db2da1..1b6ab40 100644
--- a/admin-frontend/src/store/loginSlice.ts
+++ b/admin-frontend/src/store/loginSlice.ts
@@ -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;
diff --git a/admin-frontend/src/utils/type.ts b/admin-frontend/src/utils/type.ts
index e514ed0..6f99657 100644
--- a/admin-frontend/src/utils/type.ts
+++ b/admin-frontend/src/utils/type.ts
@@ -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;
 }