feat: 添加菜单图标, 及搜索表单组件

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

.drone.yml

@@ -7,18 +7,36 @@ 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
@@ -39,6 +57,8 @@ steps:
       - 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
@@ -47,19 +67,29 @@ 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/fateverse-react
+      path: /home/npm/cache
   - name: config # k8s对接的配置文件
     host:
       path: /home/kubect
@@ -73,6 +103,5 @@ volumes:
 trigger:
   branch:
     - prod
-#    - dev
   event:
-    - push
+    - push

package.json

@@ -29,7 +29,6 @@
   },
   "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 { useSelector } from 'react-redux'
+import { useDispatch, 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 { useEffect, useState } from "react";
+import React, { 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 { useEffect, useState } from "react";
+import React, { 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

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

src/assets/styles/appmain.scss

@@ -3,5 +3,4 @@
   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 <div>{children}</div>
+  if(visible) return children
+  
   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 { useEffect } from "react";
+import React, { 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 {Fragment, useEffect, useState} from 'react'
-import { useSelector } from 'react-redux';
+import React, {Fragment, useEffect, useState} from 'react'
+import { useDispatch, 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, { replace: true })
+    navigate(val.key)
   }
   useEffect(()=>{
     getMenu()
@@ -36,7 +36,6 @@ export default function SideBar() {
         theme="dark"
         mode="inline"
         defaultSelectedKeys={[location.pathname]}
-        selectedKeys={[location.pathname]}
         items={menuItem}
         onClick={goPage}
       />

src/router/RouteInterception.tsx

@@ -1,4 +1,5 @@
 import { Navigate } from "react-router-dom"
+import Notfound from "@/Notfound"
 import { getToken } from "../utils/auth"
 
 const Views = import.meta.glob('../view/**/*.tsx')
@@ -12,17 +13,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 <Navigate to='/404' />
+        return <Notfound />
       }
     }
     return children
   } else {
-    return <Navigate to='/login' replace={true} />
+    return <Navigate to='/login' />
   }
 }

src/router/index.tsx

@@ -1,12 +1,13 @@
+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'
-import Notfound from '../Notfound'
-// interface Meta {
-//   title: string,
-//   redirect?: boolean
-// }
+interface Meta {
+  title: string,
+  redirect?: boolean
+}
 
 type route = {
   path: string,
@@ -20,10 +21,6 @@ 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/>
 }
@@ -32,15 +29,11 @@ const lazyLoad = (viewName: string) => {
 const currentRouter: Array<route> = [
   {
     path: '/',
-    element: <RouteInterception><LayOut /></RouteInterception>,
+    element: <RouteInterception><Suspense fallback={<Loading />}><LayOut /></Suspense></RouteInterception>,
     children: [
       {
         path: "", //登录后默认跳转路径
-        element : <Suspense fallback={<Loading />}>{lazyLoad('home')}</Suspense>
-      },
-      {
-        path: "*",
-        element: <Notfound />
+        element : <Home/>
       }
     ]
   },

src/stores/auth.ts

@@ -1,53 +0,0 @@
-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,7 +4,6 @@ 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',
@@ -15,8 +14,7 @@ const persistConfig = {
 const reducers = combineReducers({
   cache: cacheSlice,
   sidebar: sidebarSlice,
-  permission: permissionSlice,
-  auth: authInfoSlice
+  permission: permissionSlice
 })
 
 // configureStore创建一个redux数据

src/stores/permission.ts

@@ -46,16 +46,13 @@ 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,5 +1,6 @@
 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,3 +1,5 @@
+import React from 'react'
+
 export default function Home() {
   return(
     <div>home</div>

src/view/system/dept/index.tsx

@@ -1,3 +1,5 @@
+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(