Optimization side menu

Author: 邝华

.editorconfig

@@ -0,0 +1,14 @@
+# https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
     process: true,
     __dirname: true
   },
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
       experimentalObjectRestSpread: true,
@@ -21,16 +21,14 @@ module.exports = {
   },
   plugins: ['react'],
   rules: {
-    quotes: [2, 'single'], //单引号
+    //quotes: [2, 'single'], //单引号
     'no-console': 0, //不禁用console
     'no-debugger': 2, //禁用debugger
     'no-var': 0, //对var警告
-    semi: 0, //不强制使用分号
-
     'no-irregular-whitespace': 0, //不规则的空白不允许
     'no-trailing-spaces': 1, //一行结束后面有空格就发出警告
     'eol-last': 0, //文件以单一的换行符结束
-    'no-unused-vars': 0,
+    //'no-unused-vars': 1,
     //'no-unused-vars': [2, { vars: 'all', args: 'after-used' }], //不能有声明后未被使用的变量或参数
     'no-underscore-dangle': 0, //标识符不能以_开头或结尾
     'no-alert': 2, //禁止使用alert confirm prompt
@@ -49,17 +47,16 @@ module.exports = {
     'no-spaced-func': 2, //函数调用时 函数名与()之间不能有空格
     'no-this-before-super': 0, //在调用super()之前不能使用this或super
     'no-undef': 2, //不能有未定义的变量
-    'no-use-before-define': 2, //未定义前不能使用
-    camelcase: 0, //强制驼峰法命名
+    'no-use-before-define': 1, //未定义前不能使用
     'jsx-quotes': [2, 'prefer-double'], //强制在JSX属性（jsx-quotes）中一致使用双引号
     'react/display-name': 0, //防止在React组件定义中丢失displayName
     'react/forbid-prop-types': [2, { forbid: ['any'] }], //禁止某些propTypes
-    'react/jsx-boolean-value': 2, //在JSX中强制布尔属性符号
+    //'react/jsx-boolean-value': 2, //在JSX中强制布尔属性符号
     'react/jsx-closing-bracket-location': 1, //在JSX中验证右括号位置
     'react/jsx-curly-spacing': [2, { when: 'never', children: true }], //在JSX属性和表达式中加强或禁止大括号内的空格。
-    'react/jsx-indent-props': [2, 4], //验证JSX中的props缩进
+    //'react/jsx-indent-props': [2, 4], //验证JSX中的props缩进
     'react/jsx-key': 2, //在数组或迭代器中验证JSX具有key属性
-    'react/jsx-max-props-per-line': [1, { maximum: 1 }], // 限制JSX中单行上的props的最大数量
+    //'react/jsx-max-props-per-line': [1, { maximum: 1 }], // 限制JSX中单行上的props的最大数量
     'react/jsx-no-bind': 0, //JSX中不允许使用箭头函数和bind
     'react/jsx-no-duplicate-props': 2, //防止在JSX中重复的props
     'react/jsx-no-literals': 0, //防止使用未包装的JSX字符串

.prettierrc

@@ -1,10 +1,10 @@
-{
-    "useTabs": false,
-    "tabWidth": 4,
-    "printWidth": 120,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "bracketSpacing": true,
-    "semi": false,
-    "htmlWhitespaceSensitivity": "ignore"
-}
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "semi": false,
+  "htmlWhitespaceSensitivity": "ignore"
+}

README.md

@@ -1,54 +1,54 @@
-#### 更新日志
-```
-2021-09-26  fix menu some issue
-```
-### 前言
-#### 本架构使用的技术为：react17+hooks+vite2 的新一代的react框架，框架使用类似 vue-admin-template
-
-```
-框架有js和ts版本
-js版本分支：https://github.com/jzfai/react-admin-template.git
-ts版本分支：开发中
-新一代的微服务架构：https://github.com/jzfai/micro-service-plus
-```
-
-> 开发和使用感受：两个字 真香！！！！！
-
-### 效果
-
-### 线上体验地址：http://8.135.1.141/react-admin-template
- ![http://8.135.1.141/file/images/wx-groud.png](http://8.135.1.141/file/images/1632649052939.png)
-### 看下首次加载资源大小和速度
- ![http://8.135.1.141/file/images/wx-groud.png](http://8.135.1.141/file/images/1632649288128.png)
-### 如何运行
-
-```javascript
-
-克隆项目
-git clone https://github.com/jzfai/react-admin-template.git
-
-进入项目目录
-cd  react-admin-template
-
-运行yarn安装依赖
-yarn
-
-运行dev命令
-yarn run dev
-
-补充：这里说下package.json里的scripts命令
-"scripts": {
-  "dev": "vite --mode serve-dev", ---- 开发时运行
-   "build": "vite build --mode build",  ---- 打包发布生产环境
-   "serve": "vite preview --mode build" ---- 这个是在你本地打包完后（yarn run build）后会生产一个dist文件夹，这个命令在你本地启动一个本地服务用于查看dist文件内容，发布生产前可以用这个先看下打包的效果
-   "preview:build": "yarn run build && vite preview " --- 构建并查看（建议更新上product前运行一次,查看是否有问题）
-},
-```
-#####
-
-#### 如果需要实时交流的可以加入wx群(有vue3+ts视频教程)
-
-
- ![http://8.135.1.141/file/images/wx-groud.png](http://8.135.1.141/file/images/wx-groud1.png)
-
-大家的支持是我前进的动力    欢迎加入一起开发
+#### 更新日志
+```
+2021-10-09 Optimization side menu 
+```
+### 前言
+#### 本架构使用的技术为：react17+hooks+vite2 的新一代的react框架，框架使用类似 vue3-admin-template
+
+```
+框架有js和ts版本
+js版本分支：https://github.com/jzfai/react-admin-template.git
+ts版本分支：开发中
+新一代的微服务架构：https://github.com/jzfai/micro-service-plus
+```
+
+> 开发和使用感受：两个字 真香！！！！！
+
+### 效果
+
+### 线上体验地址：http://8.135.1.141/react-admin-template
+ ![http://8.135.1.141/file/images/wx-groud.png](http://8.135.1.141/file/images/1632649052939.png)
+### 看下首次加载资源大小和速度
+ ![http://8.135.1.141/file/images/wx-groud.png](http://8.135.1.141/file/images/1632649288128.png)
+### 如何运行
+
+```javascript
+
+克隆项目
+git clone https://github.com/jzfai/react-admin-template.git
+
+进入项目目录
+cd  react-admin-template
+
+运行yarn安装依赖
+yarn
+
+运行dev命令
+yarn run dev
+
+补充：这里说下package.json里的scripts命令
+"scripts": {
+  "dev": "vite --mode serve-dev", ---- 开发时运行
+   "build": "vite build --mode build",  ---- 打包发布生产环境
+   "serve": "vite preview --mode build" ---- 这个是在你本地打包完后（yarn run build）后会生产一个dist文件夹，这个命令在你本地启动一个本地服务用于查看dist文件内容，发布生产前可以用这个先看下打包的效果
+   "preview:build": "yarn run build && vite preview " --- 构建并查看（建议更新上product前运行一次,查看是否有问题）
+},
+```
+#####
+
+#### 如果需要实时交流的可以加入wx群(有vue3+ts视频教程)
+
+
+ ![http://8.135.1.141/file/images/wx-groud.png](http://8.135.1.141/file/images/wx-groud1.png)
+
+大家的支持是我前进的动力    欢迎加入一起开发

index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>react admin template</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -1,12 +1,12 @@
 {
     "name": "vite-react",
-    "version": "0.0.0",
+    "version": "1.0.3",
     "scripts": {
-        "dev": "vite --mode serve-dev",
+        "dev": "vite --mode serve-dev --host",
         "build": "vite build --mode build",
         "serve": "vite preview --mode build",
         "preview:build": "yarn run build && vite preview ",
-        "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+        "lint": "eslint --ext .js,.jsx,.ts,.tsx src --fix",
         "prepare": "husky install"
     },
     "dependencies": {
@@ -50,12 +50,12 @@
         "@types/react-dom": "^17.0.2",
         "@types/sortablejs": "^1.10.6",
         "@types/vuedraggable": "^2.24.0",
-        "@typescript-eslint/eslint-plugin": "^4.22.0",
-        "@typescript-eslint/parser": "^4.22.0",
+        "@typescript-eslint/eslint-plugin": "^4.33.0",
+        "@typescript-eslint/parser": "^4.33.0",
         "@vitejs/plugin-legacy": "^1.5.2",
         "@vitejs/plugin-react-refresh": "^1.3.6",
         "babel-eslint": "^10.1.0",
-        "eslint": "^6.7.2",
+        "eslint": "^7.32.0",
         "eslint-plugin-import": "^2.22.1",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-react": "^7.5.1",
@@ -66,6 +66,6 @@
         "scss": "^0.2.4",
         "svg-sprite-loader": "4.1.3",
         "typescript": "^4.3.2",
-        "vite": "^2.5.10"
+        "vite": "^2.6.5"
     }
 }

public/favicon.ico

@@ -1,4 +1,5 @@
-import React, { Component } from 'react'
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
 import { Provider } from 'react-redux'
 import { ConfigProvider } from 'antd'
 import zhCN from 'antd/es/locale/zh_CN'