Hooks-Admin 🚀

Описание 📖

🚀🚀🚀 Hooks Admin — это открытое решение для создания административных панелей, основанное на React18, React-Router v6, React-Hooks, Redux и Redux-Toolkit, TypeScript, Vite2, Ant-Design.

🌈 Для использования версии с Redux-Toolkit переключитесь на ветку Redux-Toolkit.

Документация проекта 📚

• Обновление проекта: CHANGELOG.md

Профессиональная версия 🔥

• Подробнее и покупка: свяжитесь через указанный ниже WeChat ID

• Ссылка: https://pro.spicyboy.cn

1. Онлайн-предпросмотр 👀

• Ссылка: https://hooks.spicyboy.cn

2. Git-репозиторий (ваш отзыв приветствуется) ⭐

• Gitee: https://gitee.com/HalseySpicy/Hooks-Admin

• GitHub: https://github.com/HalseySpicy/Hooks-Admin

3. Функциональность проекта 🔨🔨🔨- 🚀 Использует последние технологии: React 18, React-Router v6, React-Hooks, TypeScript, Vite 2

• 🚀 Использует Vite 2 как инструмент разработки и сборки (настроен gzip, CORS, preview tools...)

• 🚀 Полностью интегрирована TypeScript (полностью ради обучения 🤣)

• 🚀 Использует Redux для управления состоянием, интегрированы immer, react-redux, redux-persist

• 🚀 Включает две системы управления состояниями: master использует Redux, а ветка Redux-Toolkit использует Redux-Toolkit

• 🚀 Использует TypeScript для вторичной обёртки Axios (обработка ошибок, общие запросы, глобальное состояние запроса, отмена повторных запросов...)

• 🚀 Поддерживает переключение размеров компонентов Antd, темы Dark/Light/Colorblind, i18n локализацию (локализация временно не настроена для всех файлов)

• 🚀 Использует пользовательские высшие компоненты для ограничения доступа к маршрутам (страница 403), конфигурации кнопок страниц

• 🚀 Поддерживает lazy loading маршрутов React-Router v6, аккордеон меню, многоуровневое меню, многополярные страницы, навигационные хлебные крошки

• 🚀 Использует Prettier для унифицированного форматирования кода, интегрированы Eslint, Stylelint для проверки качества кода (конфигурация проекта)

• 🚀 Используются husky, lint-staged, commitlint, commitizen, cz-git для стандартизации сообщений коммита (конфигурация проекта)### 4. Шаги установки и использования 📑

• Клонирование:

# Gitee
git clone https://gitee.com/HalseySpicy/Hooks-Admin.git
# GitHub
git clone https://github.com/HalseySpicy/Hooks-Admin.git

• Установка зависимостей:

npm install
cnpm install

# При неудачной установке `npm install`, пожалуйста, обновите `node.js` до версии 16 или выше, либо попробуйте использовать следующую команду:
npm install --registry=https://registry.npm.taobao.org

• Запуск:

npm run dev
npm run serve

• Сборка:

# Разработка
npm run build:dev

# Тестирование
npm run build:test

# Производство
npm run build:pro

• Линтер:

# Проверка кода ESLint
npm run lint:eslint

# Форматирование кода Prettier
npm run lint:prettier

# Форматирование стилей Stylelint
npm run lint:stylelint

• Коммит:

# Коммит кода (автоматически выполняется команду `lint:lint-staged`)
npm run commit

5. Примеры скриншотов проекта

1. Страница входа:

2. Главная страница:

### 6. Директория файловых ресурсов 📚text Hooks-Admin ├─ .vscode # рекомендуемая конфигурация для VSCode ├─ public # статические ресурсы (игнорируются при сборке) ├─ src │ ├─ api # управление API-интерфейсами │ ├─ assets # статические ресурсы │ ├─ components # глобальные компоненты │ ├─ config # глобальные конфигурационные параметры │ ├─ enums # проектные перечисления │ ├─ hooks # часто используемые хуки │ ├─ language # международная локализация языка │ ├─ layouts # макеты фреймворков │ ├─ routers # управление маршрутами │ ├─ redux # хранилище Redux │ ├─ styles # глобальное стилирование │ ├─ typings # глобальные объявления TypeScript │ ├─ utils # библиотека утилит │ ├─ views # все страницы проекта │ ├─ App.tsx # входная страница │ ├─ main.tsx # основной файл │ └─ env.d.ts # файл объявлений Vite ├─ .editorconfig # конфигурация редактора (форматирование) ├─ .env # общие настройки Vite ├─ .env.development # настройки для среды разработки ├─ .env.production # настройки для среды продакшена ├─ .env.test # настройки для тестовой среды ├─ .eslintignore # игнорирование ESLint ├─ .eslintrc.js # конфигурация ESLint ├─ .gitignore # игнорирование Git ├─ .prettierignore # игнорирование Prettier ├─ .prettierrc.js # конфигурация Prettier ├─ .diff stylelintignore # игнорирование Stylelint ├─ .stylelintrc.js # конфигурация форматирования стилей Stylelint ├─ CHANGELOG.md # журнал обновлений проекта ├─ commitlint.config.js # конфигурация правил коммита Git ├─ index.html # входной HTML ├─ LICENSE # файл лицензии ├─ lint-staged.config # конфигурация lint-staged ├─ package-lock.json # заморозка версий зависимостей ├─ package.json # управление пакетами ├─ postcss.config.js # конфигурация PostCSS ├─ README.md # описание проекта ├─ tsconfig.json # глобальная конфигурация TypeScript └─ vite.config.ts # конфигурация Vite

### 7. Поддержка браузеров- Для локальной разработки рекомендуется использовать последнюю версию браузера Google Chrome [Загрузить](https://www.google.com/intl/ru/chrome/).
- В продакт-среде поддерживаются современные браузеры, Internet Explorer больше не поддерживается. Дополнительную информацию можно найти в разделе [Can I Use ES Module](https://caniuse.com/?search=ESModule).

| ![IE](https://i.imgtg.com/2023/04/11/8z7ot.png) | ![Edge](https://i.imgtg.com/2023/04/11/8zr3p.png) | ![Firefox](https://i.imgtg.com/2023/04/11/8zKiU.png) | ![Chrome](https://i.imgtg.com/2023/04/11/8zNrx.png) | ![Safari](https://i.imgtg.com/2023/04/11/8zeGj.png) |
| :---------------------------------------------: | :-----------------------------------------------: | :--------------------------------------------------: | :-------------------------------------------------: | :-------------------------------------------------: |
|                   не поддерживается                |                    последние две версии                  |                     последние две версии                    |                     последние две версии                    |                     последние две версии                    |

### 8. Интерфейсы проекта backend 🧩

Интерфейсы backend проекта полностью используются с помощью данных Mock, благодаря следующим платформам Mock:

- FastMock: https://www.fastmock.site/
- EasyMock: https://mock.mengxuegu.com/

### 9. Группа общения WeChat

Группа WeChat превышает 200 человек, если вы хотите присоединиться, свяжитесь со мной через WeChat 🤪

|                           Код QR WeChat                            |
| :--------------------------------------------------------------: |
| <img src="https://i.imgtg.com/2023/01/16/QRbJL.png" width=170> |

### 10. Донат 🍵Если вы используете этот проект или вам нравится этот проект, вы можете поддержать меня следующими способами:

- Установите звездочку, форкните и добавьте в список отслеживания 🚀
- Одноразовый донат через WeChat или Alipay ❤

|                                      WeChat                                     |                                    Alipay                                     |
| :----------------------------------------------------------------------------: | :----------------------------------------------------------------------------: |
| <img src="https://i.imgtg.com/2023/01/16/QRzBX.png" alt="WeChat QRcode" width=170> | <img src="https://i.imgtg.com/2023/01/16/QRFZt.png" alt="Alipay QRcode" width=170> |