Feature/new UI (opengoofy#1459)

* Remove console autofill hippo4j username and password logic (opengoofy#1246)

* feat:login + wrapper request

threadpool/console-new/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "ahooks": "^3.7.8",
     "antd": "^5.4.7",
+    "axios": "^1.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.1",

threadpool/console-new/src/API/user.js

@@ -0,0 +1,128 @@
+import request from "../axios/request" 
+
+export function userLogin(data) {
+  return request('post', '/hippo4j/v1/cs/auth/login', data)
+}
+
+export function getInfo() {
+  return request('get', '/hippo4j/v1/cs/user/info')
+}
+
+export function logout() {
+  return request('post', '/hippo4j/v1/cs/user/logout')
+}
+
+function islogin({commit}, userInfo) {
+  const {username, password} = userInfo 
+  return new Promise((resolve, reject) => {
+      let key = genKey() 
+      let encodePassword = encrypt(password, key)
+      key = key.split("").reverse().join("")
+      login({username: username.trim(), password: encodePassword, tag: key, rememberMe: 1})
+          .then((response) => {
+              const {data} = response 
+              const {roles} = response 
+              commit('SET_TOKEN', data) 
+              localStorage.setItem('roles', JSON.stringify(roles)) 
+              localStorage.setItem('USER_ROLE', roles[0]) 
+              setToken(data) 
+              resolve() 
+          })
+          .catch((error) => {
+              // alert('登录失败') 
+              reject(error) 
+          }) 
+  })
+}
+
+ // get user info
+function getInfo({commit, state}) {
+  return new Promise((resolve, reject) => {
+      const data = {} 
+      data.roles = JSON.parse(localStorage.getItem('roles')) 
+      commit('SET_ROLES', data.roles) 
+      resolve(data) 
+  }) 
+}
+
+// user logout
+function logout({commit, state}) {
+  // return new Promise((resolve, reject) => {
+  //   logout(state.token).then(() => {
+  //     commit('SET_TOKEN', '')
+  //     commit('SET_ROLES', [])
+  //     removeToken()
+  //     resetRouter()
+  //     resolve()
+  //   }).catch(error => {
+  //     reject(error)
+  //   })
+  // })
+  return new Promise((resolve) => {
+      commit('SET_TOKEN', '') 
+      commit('SET_ROLES', []) 
+      removeToken() 
+      resetRouter() 
+      resolve() 
+  }) 
+}
+
+// remove token
+function resetToken({commit}) {
+  return new Promise((resolve) => {
+      commit('SET_TOKEN', '') 
+      commit('SET_ROLES', []) 
+      removeToken() 
+      resolve() 
+  }) 
+}
+
+// dynamically modify permissions
+function changeRoles({commit, dispatch}, role) {
+  return new Promise(async (resolve) => {
+      const token = role + '-token' 
+
+      commit('SET_TOKEN', token) 
+      setToken(token) 
+
+      const {roles} = await dispatch('getInfo') 
+
+      resetRouter() 
+
+      // generate accessible routes map based on roles
+      const accessRoutes = await dispatch('permission/generateRoutes', roles, {root: true}) 
+
+      // dynamically add accessible routes
+      router.addRoutes(accessRoutes) 
+
+      // reset visited views and cached views
+      dispatch('tagsView/delAllViews', null, {root: true}) 
+
+      resolve() 
+  }) 
+}
+
+
+const mutations = {
+  SET_TOKEN: (state, token) => {
+      state.token = token 
+  },
+  SET_INTRODUCTION: (state, introduction) => {
+      state.introduction = introduction 
+  },
+  SET_NAME: (state, name) => {
+      state.name = name 
+  },
+  SET_AVATAR: (state, avatar) => {
+      state.avatar = avatar 
+  },
+  SET_ROLES: (state, roles) => {
+      state.roles = roles 
+  },
+} 
+
+export default {
+  userLogin,
+  getInfo,
+  logout,
+}

threadpool/console-new/src/App.tsx

@@ -1,6 +1,7 @@
 import LayoutCom from './components/layout-com';
 import { Routes, Route } from 'react-router-dom';
 import routeList from './route';
+import Login from '@/page/login';
 import { AppstoreOutlined, MailOutlined } from '@ant-design/icons';
 
 const sideMenuList = [
@@ -20,6 +21,7 @@ const App = () => {
   return (
     <LayoutCom sideMenuList={sideMenuList} isSider={false}>
       <Routes>
+            <Route path="/Login" Component={Login}></Route>
         {routeList.map(item => (
           <Route key={item.path} path={item.path} Component={item.component} />
         ))}

threadpool/console-new/src/axios/config.js

@@ -0,0 +1,4 @@
+const devBaseUrl = 'http://console.hippo4j.cn:6691/hippo4j/v1/cs'
+const proBaseUrl = 'http://console.hippo4j.cn:6691/hippo4j/v1/cs  '
+export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseUrl : proBaseUrl
+export const TIMEOUT = 5000

threadpool/console-new/src/axios/request.js

@@ -0,0 +1,192 @@
+import axios from 'axios';
+import { BASE_URL, TIMEOUT } from './config';
+const instance = axios.create({
+  baseURL: BASE_URL,
+  timeout: TIMEOUT,
+});
+
+instance.interceptors.request.use(
+  config => {
+    config.data = JSON.stringify(config.data);
+    config.headers = {
+      'Content-Type': 'application/json',
+    }
+    return config
+  }, err => {
+    return Promise.reject(err)
+  }
+);
+
+instance.interceptors.response.use(
+  res => {
+    if (res.code === 'A000004') {
+      removeToken()
+      resetRouter()
+      alert(res.message)
+      document.location.href = 'index.html'
+    } else if (res.code !== '20000' && res.code !== '0' && res.code !== '200') {
+      Message({
+        message: res.message || 'Error',
+        type: 'error',
+        duration: 5 * 1000
+      })
+      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+      if (res.code === '50008' || res.code === '50012' || res.code === '50014') {
+        // to re-login
+        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+          confirmButtonText: 'Re-Login',
+          cancelButtonText: 'Cancel',
+          type: 'warning'
+        }).then(() => {
+          store.dispatch('user/resetToken').then(() => {
+            location.reload()
+          })
+        })
+      }
+      console.log(res)
+      return Promise.reject(new Error(res.message || 'Error'))
+    } else {
+      const { data } = response
+      const { code } = data
+      // 状态码为0||200表示api成功
+      if (code === '0') {
+        const { data: res } = data
+        return res
+      } else if (code === '200') {
+        return data
+      } else {
+        // 返回数据
+        return res
+      }
+    }
+    return response
+  }, err => {
+    console.log('err' + err) // for debug
+      Message({
+        message: error.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+      return Promise.reject(err)
+  }
+);
+
+/**
+ * 封装get
+ * @param {String} url 
+ * @param {String} param 
+ * @returns 
+ */
+export function get(url, param = {}) {
+  return new Promise(
+    (resolve, reject) => {
+      axios.get(url, {
+        params: param
+      }).then((response) => {
+        console.log("get error: url, params, state",url, params, response.data)
+        resolve(response.data)
+      }).catch(err => {
+        msg(err)
+        reject(err)
+      })
+    }
+  );
+}
+
+/**
+ * 
+ * 封装post
+ * @param {String} url 
+ * @param {Object} param 
+ * @returns {Promise}
+ */
+export function post(url, param) {
+  return new Promise(
+    (resolve, reject) => {
+      axios.post(url, param).then(response => {
+        resolve(response.data)
+      }, err => {
+        reject(err)
+      })
+    }
+  );
+}
+export default function (fecth, url, param) {
+  return new Promise(
+    (resolve, reject) => {
+      switch(fecth) {
+        case "get":
+          console.log("a get request, url:", url)
+          get(url, param)
+          .then(response => {
+            resolve(response)
+          }).catch(err => {
+            console.log("GET request error, err:", err)
+            reject(err)
+          })
+          break
+        case "post":
+          post(url, param)
+          .then(response => {
+            resolve(response)
+          }).catch(err => {
+            console.log("POST request error, err:", err)
+            reject(err)
+          })
+          break
+        default:
+          break
+      }
+    }
+  );
+}
+
+function msg(err) {
+  if (err && err.response) {
+    switch (err.response.status) {
+      case 400:
+        alert(err.response.data.error.details);
+        break;
+      case 401:
+        alert("未授权，请登录");
+        break;
+
+      case 403:
+        alert("拒绝访问");
+        break;
+
+      case 404:
+        alert("请求地址出错");
+        break;
+
+      case 408:
+        alert("请求超时");
+        break;
+
+      case 500:
+        alert("服务器内部错误");
+        break;
+
+      case 501:
+        alert("服务未实现");
+        break;
+
+      case 502:
+        alert("网关错误");
+        break;
+
+      case 503:
+        alert("服务不可用");
+        break;
+
+      case 504:
+        alert("网关超时");
+        break;
+
+      case 505:
+        alert("HTTP版本不受支持");
+        break;
+      default:
+    }
+  }
+}

threadpool/console-new/src/components/layout-com/dist/index.js

@@ -0,0 +1,25 @@
+"use strict";
+exports.__esModule = true;
+var react_1 = require("react");
+var styled_components_1 = require("styled-components");
+var antd_1 = require("antd");
+var useThemeMode_1 = require("@/hooks/useThemeMode");
+var index_module_less_1 = require("./index.module.less");
+var Header = antd_1.Layout.Header, Sider = antd_1.Layout.Sider, Content = antd_1.Layout.Content;
+var LayoutCom = function (props) {
+    var sideMenuList = props.sideMenuList, children = props.children, _a = props.isSider, isSider = _a === void 0 ? true : _a;
+    var myThemes = react_1.useContext(styled_components_1.ThemeContext);
+    var _b = react_1.useState('mail'), current = _b[0], setCurrent = _b[1];
+    var onClick = function (e) {
+        setCurrent(e.key);
+    };
+    var setIsDark = useThemeMode_1["default"]()[0];
+    return (React.createElement("main", { className: index_module_less_1["default"].container, style: { backgroundColor: myThemes.backgroundColor.bg1 } },
+        React.createElement(Header, { className: index_module_less_1["default"].header, style: { backgroundColor: myThemes.backgroundColor.bg2 } },
+            React.createElement(antd_1.Button, { onClick: function () { return setIsDark(function (pre) { return !pre; }); } }, "\u5207\u6362\u4E3B\u9898")),
+        React.createElement(antd_1.Layout, { style: { backgroundColor: myThemes.backgroundColor.bg1, height: 'calc(100vh - 64px)' } },
+            isSider && (React.createElement(Sider, { className: index_module_less_1["default"].sider, style: { backgroundColor: myThemes.backgroundColor.bg1 } },
+                React.createElement(antd_1.Menu, { onClick: onClick, selectedKeys: [current], mode: "inline", items: sideMenuList }))),
+            React.createElement(Content, { className: index_module_less_1["default"].content }, children))));
+};
+exports["default"] = LayoutCom;