ci: 测试ci

Reviewed-on: http://git.feashow.cn/wenhua/fateverse-react/pulls/17

.drone.yml

@@ -7,36 +7,18 @@ steps:
     volumes:
       - name: cache
         path: /drone/src/node_modules
-      - name: build
-        path: /app/build
     commands:
       - export CI=false
-      - mkdir -p /app/build/$DRONE_REPO_NAME
-      - rm -rf /app/build/$DRONE_REPO_NAME/*
-      - cp deployment.yml /app/build/$DRONE_REPO_NAME/
-      - cp Dockerfile /app/build/$DRONE_REPO_NAME/
-      - cp .dockerignore /app/build/$DRONE_REPO_NAME/
-      - cp default.conf /app/build/$DRONE_REPO_NAME/
-      - cp docker.sh /app/build/$DRONE_REPO_NAME/
-      - cp nginx.conf /app/build/$DRONE_REPO_NAME/
-      - npm -v
       - mkdir -p ./node_modules
       - export NODE_MODULES_PATH=`pwd`/node_modules
       - npm config set registry https://registry.npm.taobao.org
       - set NODE_OPTIONS=--openssl-legacy-provider
       - npm install
       - npm run build
-      - ls /app/build/$DRONE_REPO_NAME/
-      - echo $NODE_MODULES_PATH
-      - cp -r dist /app/build/$DRONE_REPO_NAME
-
-
 
   - name: build-docker # 制作docker镜像
     image: docker # 使用官方docker镜像
     volumes: # 将容器内目录挂载到宿主机
-      - name: build
-        path: /app/build
       - name: docker
         path: /var/run/docker.sock # 挂载宿主机的docker
       - name: config
@@ -51,14 +33,10 @@ steps:
       REGISTRY_NAMESPACE:
         from_secret: registry_namespace
     commands: # 定义在Docker容器中执行的shell命令
-      - cd /app/build/$DRONE_REPO_NAME/
-      - cat Dockerfile
       - sed -i 's/$REGISTRY/'"$REGISTRY"'/' deployment.yml
       - sed -i 's/$REGISTRY_NAMESPACE/'"$REGISTRY_NAMESPACE"'/' deployment.yml
       - sed -i 's/$DRONE_REPO_NAME/'"$DRONE_REPO_NAME"'/' deployment.yml
       - sed -i 's/$DRONE_COMMIT/'"$DRONE_COMMIT"'/' deployment.yml
-      #      - sed -i 's/$DRONE_COMMIT/'"$DRONE_COMMIT"'/' docker.sh
-      #      - sed -i 's/$DRONE_REPO_NAME/'"$DRONE_REPO_NAME"'/' docker.sh
       # docker登录,不能在脚本中登录,并且不能使用docker login -u -p
       - echo $DOCKER_PASSWORD | docker login $REGISTRY --username $DOCKER_USERNAME --password-stdin
       - chmod +x docker.sh
@@ -67,29 +45,19 @@ steps:
       # 执行完脚本删除本次制作的docker镜像,避免多次后当前runner空间不足
       - docker rmi -f $(docker images | grep $DRONE_REPO_NAME | awk '{print $3}')
 
-
   - name: drone-rancher # rancher运行
     image: registry.cn-chengdu.aliyuncs.com/claywang/kubectl #阿里云的kubectl镜像,里面包含kubectl命令行工具
     volumes: # 将容器内目录挂载到宿主机
-      - name: build
-        path: /app/build # 将应用打包好的Jar和执行脚本挂载出来
       - name: config
         path: /app/config # 将kubectl 配置文件挂载出来
     commands: # 定义在Docker容器中执行的shell命令
-      - cd /app/build/$DRONE_REPO_NAME/
-      # 将deployment中定义的变量替换为drone中的内置变量
-      - cat deployment.yml
       # 通过kubectl指令运行deployment.yml,并指定授权文件kubectl_conf.yml
-      # - kubectl apply -f deployment.yml -n $DRONE_COMMIT_BRANCH --kubeconfig=/app/config/kubectl_conf.yml
       - kubectl apply -f deployment.yml -n dev --kubeconfig=/app/config/hcy-text-kubectl.yml
 
 volumes:
-  - name: build
-    host:
-      path: /home/build
   - name: cache
     host:
-      path: /home/npm/cache
+      path: /home/npm/fateverse-react
   - name: config # k8s对接的配置文件
     host:
       path: /home/kubect
@@ -102,6 +70,7 @@ volumes:
 
 trigger:
   branch:
-    - prod
+#    - prod
+    - dev
   event:
-    - push
+    - push

package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.3",
+    "@types/node": "^20.9.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",

src/App.tsx

@@ -5,7 +5,7 @@ import ParentView from './ParentView'
 import Loading from './Loading'
 import currentRouter from './router'
 import RouteInterception from './router/RouteInterception'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { Suspense, lazy, useEffect, useState } from 'react'
 const Views = import.meta.glob('./view/**/*.tsx')
 const transferReactNode = (comp: string) => {

src/Loading.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import NProgress from './mynprogress'
 import { Spin } from "antd";
 

src/Login.tsx

@@ -1,5 +1,5 @@
 import { Button, Form, Input, Image, message } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import './assets/styles/login.scss'
 import { getCaptchaApi, loginApi } from "./api/login";
 import { useNavigate } from "react-router-dom";

src/Notfound.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+
 
 export default function Notfound() {
   return <div>404</div>

src/ParentView.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+
 import { Outlet } from 'react-router-dom'
 
 export default function ParentView() {

src/api/auth.ts

@@ -0,0 +1,8 @@
+import request from "../utils/request";
+
+export const getAuthInfoApi = () => {
+  return request({
+    url: '/auth/info',
+    method: 'get'
+  })
+}

src/assets/styles/appmain.scss

@@ -3,4 +3,5 @@
   height: calc(100vh - 64px);
   padding: 20px;
   box-sizing: border-box;
+  overflow: auto;
 }

src/components/Authenticationbtn.tsx

@@ -19,7 +19,7 @@ export default function Authenticationbtn({ permission, children }: any) {
     })
     setVisible(hasPermission)
   }
-  if(visible) return children
-  
+
+  if(visible) return <div>{children}</div>
   return null
 }

src/components/ConfirmModel.tsx

@@ -1,5 +1,5 @@
-import React from "react";
+// import React from "react";
 
-export default function ConfirmModel() {
+// export default function ConfirmModel() {
   
-}
+// }

src/hooks/useDemo.ts

@@ -1,5 +1,5 @@
-import { useState, useEffect } from "react";
+// import { useState, useEffect } from "react";
 
-export default function useDemo() {
+// export default function useDemo() {
   
-}
+// }

src/layout/appmain/index.tsx

@@ -1,4 +1,4 @@
-import '../../assets/styles/appmain.scss'
+import '@/assets/styles/appmain.scss'
 import { Outlet } from "react-router-dom";
 
 export default function AppMain() {

src/layout/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { Layout } from 'antd'
 import { useDispatch, useSelector } from 'react-redux'
 import SideBar from "./sidebar";

src/layout/navbar/index.tsx

@@ -3,7 +3,7 @@ import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
 } from '@ant-design/icons';
-import React from 'react'
+
 import { useSelector, useDispatch } from 'react-redux'
 import { setCollapsed } from '../../stores/sidebar';
 

src/layout/sidebar/index.tsx

@@ -1,6 +1,6 @@
 import { Menu } from 'antd'
-import React, {Fragment, useEffect, useState} from 'react'
-import { useDispatch, useSelector } from 'react-redux';
+import {Fragment, useEffect, useState} from 'react'
+import { useSelector } from 'react-redux';
 import { generateMenu } from '../../permission';
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -8,7 +8,7 @@ export default function SideBar() {
   const navigate = useNavigate()
   const location = useLocation()
   const routes: [] = useSelector((store: any)=>store.permission)
-  const dispatch = useDispatch()
+  // const dispatch = useDispatch()
   const [menuItem, setMenuItem] = useState<Array<any>>([{
     key: '/',
     label: '首页',
@@ -24,7 +24,7 @@ export default function SideBar() {
   const goPage = (val: any) => {
     console.log(val);
     
-    navigate(val.key)
+    navigate(val.key, { replace: true })
   }
   useEffect(()=>{
     getMenu()
@@ -36,6 +36,7 @@ export default function SideBar() {
         theme="dark"
         mode="inline"
         defaultSelectedKeys={[location.pathname]}
+        selectedKeys={[location.pathname]}
         items={menuItem}
         onClick={goPage}
       />

src/router/RouteInterception.tsx

@@ -1,5 +1,4 @@
 import { Navigate } from "react-router-dom"
-import Notfound from "@/Notfound"
 import { getToken } from "../utils/auth"
 
 const Views = import.meta.glob('../view/**/*.tsx')
@@ -13,17 +12,17 @@ const hasMapFile = (filePath: string): boolean => {
  * @description 路由拦截组件
  * @param {children: ReactDOM, filePath: string(文件路径)}  
  */
-export default function RouteInterception ({children, filePath=""}: any) {
-  if(getToken()) {
-    if(filePath!=="") {
-      if(hasMapFile(filePath)) {
+export default function RouteInterception({ children, filePath = "" }: any) {
+  if (getToken()) {
+    if (filePath !== "") {
+      if (hasMapFile(filePath)) {
         return children
       } else {
-        return <Notfound />
+        return <Navigate to='/404' />
       }
     }
     return children
   } else {
-    return <Navigate to='/login' />
+    return <Navigate to='/login' replace={true} />
   }
 }

src/router/index.tsx

@@ -1,13 +1,12 @@
-import { getToken } from '../utils/auth'
 import LayOut from '../layout/index'
-import Home from '../view/home'
 import { Suspense, lazy } from 'react'
 import Loading from '../Loading'
 import RouteInterception from './RouteInterception'
-interface Meta {
-  title: string,
-  redirect?: boolean
-}
+import Notfound from '../Notfound'
+// interface Meta {
+//   title: string,
+//   redirect?: boolean
+// }
 
 type route = {
   path: string,
@@ -21,6 +20,10 @@ const lazyLoad = (viewName: string) => {
     const LoginView = lazy(()=>import('../Login'))
     return <LoginView />
   }
+  if(viewName === 'home') {
+    const Home = lazy(()=>import('../view/home'))
+    return <Home />
+  }
   const View = lazy(()=>import(`../view/${viewName}.tsx`))
   return <View/>
 }
@@ -29,11 +32,15 @@ const lazyLoad = (viewName: string) => {
 const currentRouter: Array<route> = [
   {
     path: '/',
-    element: <RouteInterception><Suspense fallback={<Loading />}><LayOut /></Suspense></RouteInterception>,
+    element: <RouteInterception><LayOut /></RouteInterception>,
     children: [
       {
         path: "", //登录后默认跳转路径
-        element : <Home/>
+        element : <Suspense fallback={<Loading />}>{lazyLoad('home')}</Suspense>
+      },
+      {
+        path: "*",
+        element: <Notfound />
       }
     ]
   },

src/stores/auth.ts

@@ -0,0 +1,53 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+import { getAuthInfoApi } from '../api/auth'
+
+export interface IAuthInfo {
+  permissions: Array<string>,
+  roles: Array<string>
+  user: object
+}
+
+const initAuthInfo = new Object() as IAuthInfo
+
+export const getAuthInfo = createAsyncThunk('/auth/info',
+  async () => {
+    try {
+      const {code, data} = await getAuthInfoApi()
+      if(code === 1000) {
+        return data
+      }
+    } catch (err) {
+      return Promise.reject(err)
+    }
+  }
+)
+
+export const authInfoSlice = createSlice({
+  name: 'authinfo',
+  initialState: initAuthInfo,
+  reducers: {
+    addAuthInfo(state, {payload}) {
+      state = {...payload}
+      return state
+    }
+  },
+  extraReducers(builder) {
+    builder
+      .addCase(getAuthInfo.pending, (state) => {
+        console.log(state);
+        
+        console.log('正在请求登录用户信息')
+      })
+      .addCase(getAuthInfo.fulfilled, (state, {payload}) => {
+        console.log(state);
+        return payload
+      })
+      .addCase(getAuthInfo.rejected, (state, err) => {
+        console.log(state);
+        console.log(err, 'rejected')
+      })
+  }
+})
+
+export const { addAuthInfo } = authInfoSlice.actions
+export default authInfoSlice.reducer

src/stores/cache.ts

@@ -1,10 +1,10 @@
 import { createSlice } from '@reduxjs/toolkit'
 
-type CacheKey = string
+// type CacheKey = string
 
-type CacheVal = any
+// type CacheVal = any
 
-const initCache = new Map<CacheKey, CacheVal>([])
+// const initCache = new Map<CacheKey, CacheVal>([])
 
 // 创建一个slice
 export const cacheSlice = createSlice({

src/stores/index.ts

@@ -4,6 +4,7 @@ import storage from "redux-persist/lib/storage";
 import cacheSlice from "./cache";
 import sidebarSlice from "./sidebar";
 import permissionSlice from "./permission";
+import authInfoSlice from "./auth"
 
 const persistConfig = {
   key: 'root',
@@ -14,7 +15,8 @@ const persistConfig = {
 const reducers = combineReducers({
   cache: cacheSlice,
   sidebar: sidebarSlice,
-  permission: permissionSlice
+  permission: permissionSlice,
+  auth: authInfoSlice
 })
 
 // configureStore创建一个redux数据

src/stores/permission.ts

@@ -46,13 +46,16 @@ export const permissionSlice = createSlice({
   extraReducers(builder) {
     builder
       .addCase(getAsyncRouters.pending, (state) => {
+        console.log(state);
         console.log('正在请求路由');
       })
       .addCase(getAsyncRouters.fulfilled, (state, { payload }) => {
+        console.log(state);
         // 请求成功后处理路由
         return payload
       })
       .addCase(getAsyncRouters.rejected, (state, err) => {
+        console.log(state);
         console.log(err,'rejected');
         
       })

src/type/index.ts

@@ -6,13 +6,13 @@ export interface IResponse<T=any> {
 }
 
 // 定义请求方式枚举
-enum EMethod {
-  GET = 'get',
-  POST = 'post',
-  PUT = 'put',
-  DELETE = 'delete',
-  PATCH = 'patch'
-}
+// enum EMethod {
+//   GET = 'get',
+//   POST = 'post',
+//   PUT = 'put',
+//   DELETE = 'delete',
+//   PATCH = 'patch'
+// }
 
 // 用户token类型定义
 export type IToken = string

src/utils/request.ts

@@ -1,6 +1,5 @@
 import { IResponse, IToken } from "@/type";
 import axios, { InternalAxiosRequestConfig, AxiosInstance, AxiosRequestConfig } from "axios";
-import Cookie from 'js-cookie'
 import { getToken, removeToken } from "./auth";
 import { message } from "antd";
 

src/view/home/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function Home() {
   return(
     <div>home</div>

src/view/system/dept/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function Dept() {
   return(
     <div>dept</div>

src/view/system/user/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+
 
 export default function User() {
   return(