update

admin-frontend/src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

admin-frontend/src/App.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 

admin-frontend/src/App.tsx

@@ -0,0 +1,45 @@
+import React, { useContext, useEffect, useState } from 'react';
+import './App.css';
+import { LoginContext, loginContextDefault, GlobalConfContext } from './utils/context';
+import { LoginStatus, GlobalConf } from './utils/type';
+import { Admin } from './pages/admin';
+import { getGlobalConf } from './api/config';
+import 'antd/dist/antd.css';
+
+
+function LoginSwitch() {
+  const {login, save} = useContext(LoginContext);
+  if (login.login) {
+    return <Admin />;
+  } else {
+    return (
+      <div>
+        not login
+        <button onClick={() => save({login: true, type: 'admin', name: ''})}>1</button>
+      </div>
+    )
+  }
+}
+
+function App() {
+  const [loginStatus, setLogin] = useState(loginContextDefault.login);
+  const [globalConf, setGlobalConf] = useState<GlobalConf>({platformConf: []});
+  // const globalConfContext = useContext(GlobalConfContext);
+  const save = (login: LoginStatus) => setLogin(_ => login);
+  useEffect(() => {
+    const fetchGlobalConf = async () => {
+      const res = await getGlobalConf();
+      setGlobalConf(_ => res);
+    };
+    fetchGlobalConf();
+  }, []);
+  return (
+    <LoginContext.Provider value={{login: loginStatus, save}}>
+    <GlobalConfContext.Provider value={globalConf}>
+      <LoginSwitch /> 
+    </GlobalConfContext.Provider>
+    </LoginContext.Provider>
+  );
+}
+
+export default App;

admin-frontend/src/api/config.ts

@@ -0,0 +1,9 @@
+import axios from "axios";
+import { GlobalConf } from "../utils/type";
+
+const baseUrl = '/hk_reporter/api/'
+
+export async function getGlobalConf(): Promise<GlobalConf> {
+  const res = await axios.get<GlobalConf>(`${baseUrl}global_conf`);
+  return res.data;
+}

admin-frontend/src/pages/admin.css

@@ -0,0 +1,5 @@
+.layout-side .user {
+    height: 32px;
+    margin: 16px;
+    background: rgba(255, 255, 255, 0.3);
+}

admin-frontend/src/pages/admin.tsx

@@ -0,0 +1,47 @@
+import React, { FC, useContext, useState } from "react";
+import { LoginContext, GlobalConfContext } from "../utils/context";
+import { Layout, Menu } from 'antd';
+import { SubscribeConfig } from '../utils/type';
+import { SettingOutlined, BugOutlined } from '@ant-design/icons';
+import './admin.css';
+
+export function Admin() {
+  const { login } = useContext(LoginContext);
+  const [ tab, changeTab ] = useState("manage");
+  const globalConfContext = useContext(GlobalConfContext);
+  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' ? 
+        <div>123</div>
+        : null
+      }
+      </div>
+    </Layout.Content>
+  </Layout>
+  )
+}
+
+function ConfigPage() {
+  const [ configData, setConfigData ] = useState<Array<SubscribeConfig>>([
+    {
+      platform: 'weibo',
+      target: '123333',
+      catetories: [1, 2],
+      tags: []
+    }
+  ]);
+}

admin-frontend/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

admin-frontend/src/reportWebVitals.ts

@@ -1,4 +1,6 @@
-const reportWebVitals = onPerfEntry => {
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);

admin-frontend/src/utils/context.ts

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+import { LoginContextType, GlobalConf } from "./type";
+
+export const loginContextDefault: LoginContextType = {
+  login: {
+    login: false,
+    type: '',
+    name: ''
+  },
+  save: () => {}
+};
+
+export const LoginContext = createContext(loginContextDefault);
+export const GlobalConfContext = createContext<GlobalConf>({platformConf: []});

admin-frontend/src/utils/type.ts

@@ -0,0 +1,29 @@
+export interface LoginStatus {
+  login: boolean
+  type: String
+  name: String
+}
+
+export type LoginContextType = {
+  login: LoginStatus
+  save: (status: LoginStatus) => void
+}
+
+export interface SubscribeConfig {
+  platform: String
+  target?: String
+  catetories: Array<number>
+  tags: Array<String>
+}
+
+export interface GlobalConf {
+  platformConf: Array<PlatformConfig>
+}
+
+export interface PlatformConfig {
+  name: string
+  catetories: Map<number, string>,
+  enableTag: boolean,
+  platformName: string,
+  hasTarget: boolean
+}