update

admin-frontend/README.md

@@ -44,27 +44,3 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `yarn build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

admin-frontend/package.json

@@ -2,19 +2,28 @@
   "name": "admin-frontend",
   "version": "0.1.0",
   "private": true,
-  "homepage": "/hk_reporter/",
+  "homepage": "hk_reporter",
+  "proxy": "http://localhost:8080",
   "dependencies": {
+    "@ant-design/icons": "^4.6.4",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "antd": "^4.16.13",
+    "axios": "^0.21.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build && rm -r ../src/plugins/nonebot_hk_reporter/admin_page/dist && mv build ../src/plugins/nonebot_hk_reporter/admin_page/dist",
+    "build": "react-scripts build && mv build ../src/plugins/nonebot_hk_reporter/admin_page/dist",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

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
+}

admin-frontend/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}