# Global-NewsPublish-System

**Repository Path**: CodeMak1r/global-news-publish-system

## Basic Information

- **Project Name**: Global-NewsPublish-System
- **Description**: 😎开 箱 即 用 的 新 闻 管 理 系 统😎
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 2
- **Created**: 2022-09-02
- **Last Updated**: 2024-12-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, hooks, Redux, Ant-Design, mobx

## README

<div align="center">
 <img width="80" src="https://img-blog.csdnimg.cn/5206b8a035a14faaba6cbbf698b867bc.png" />
</div>
<h1 align="center">Global NewsPublish System</h1>
<h4 align="center">
    😎开 箱 即 用 的 新 闻 管 理 系 统
</h4>

## 项目预览🤓
`gitee pages`:  http://codemak1r.gitee.io/global-news-publish-system

> 页面全局热键 -- `Ctrl + K || Command + K` 退出登录

> 个人练手项目，大佬们手下留情😵

> 🕹项目数据每周回滚🕹

> 😟移动端暂不适配（是的，我还不会）👨🏻‍💻


## 项目介绍
`Global NewsPublish System`是一个开箱即用的新闻发布管理系统，项目分为前台游客端`/news`以及后台管理页面`/`，项目拥有角色管理、登录登出、用户管理、发布新闻、审核新闻、预览新闻、新闻列表以及完整的权限控制功能。

项目使用`json-server`进行数据接口的模拟，可根据`db.json`文件书写json文件自定义接口，后期预计迭代后端（koa + MongoDB），迭代后会在本仓库进行实时更新，目前项目已通过`gitee pages`部署。

欢迎提交👏Issues 、   Pull Request 👏

联系我：

`email`: pseudonymgeanmu@163.com

`CSDN`:   https://codemak1r.blog.csdn.net/
<hr>

## 项目启动｜依赖安装
<br>

### 安装依赖

```
yarn install
```

### 项目web启动

```
yarn start  // with port=3003 && craco start
```

### 开启本地接口
```
json-server --watch ./db/db.json --port 5000
```


### 项目打包

```
yarn build  // with craco build
```

### 项目本地预览
```
serve -s ./build
```

### electron
```
yarn electron-dev  // with electron v21.2.0
```
> `electron`运行前提是`serve -s ./build`

> MacOS下配置了dock栏图标以及抖动、Windows暂无自定义配置

### 项目打包体积分析
```
yarn analyze  // with source-map-explorer
```

<hr>

## 项目技术栈

- `@alex_xu/react-loading`：loading组件库（^1.0.4）（特别鸣谢）
- `react/react-dom`：优秀的JavaScript库（^18.2.0）
- `react-router-dom`：react路由库（^6.3.0）
- `@craco/craco`：CRA脚手架必不可少（^6.4.5）
- `electron`：让我的项目可以“变成”了桌面App（^21.2.0）
- `ant-design`：UI组件库（^4.22.8）
- `@ant-design/icons`：icon图标库（^4.7.0）
- `axios`：异步交互（^0.27.2）
- `draft-js| draft-to-html| html-to-draft| react-draft-wysiwyg`：富文本编辑器
- `echarts`：可视化UI库（^5.4.0）
- `mobx| mobx-react-lite`：状态管理（^6.6.1| ^3.4.0）
- `mobx-persist-store`：mobx持久化管理（^1.1.2）
- `nprogress`：进度条（^0.2.0）
- `react-hotkeys-hook`：热键Hook（^3.4.7）
- `tsparticles| react-tsparticles`：很炫酷的粒子效果（^2.3.1）
- `sass`：css预编译器（^1.54.8）
- `source-map-explorer`：打包体积分析（^2.5.3）
- `baomitu| bootCDN`：CDN外部引入

<hr>

## 项目结构
```
src

├─.DS_Store
├─App.jsx
├─index.js
├─index.scss
├─setupProxy.js
├─utils
|   ├─HeartIcon.js             // 工具类-爱心
|   ├─http.js
|   ├─tsparticles.Options.js   // 粒子效果配置项
|   └-usePublish.js
├─store
|   ├─collapsed.Store.js
|   └index.js
├─routes
|   └IndexRouter.jsx          // 路由入口文件
├─pages
|   ├─NewsSandBox
|   |      ├─.DS_Store
|   |      ├─index.jsx
|   |      ├─User-manage
|   |      |      └UserList.jsx
|   |      ├─Right-manage
|   |      |      ├─RightList.jsx
|   |      |      └RoleList.jsx
|   |      ├─Publish-manage
|   |      |       ├─Published.jsx
|   |      |       ├─Sunset.jsx
|   |      |       └Unpublished.jsx
|   |      ├─News-manage
|   |      |      ├─News.module.scss
|   |      |      ├─NewsAdd.jsx
|   |      |      ├─NewsCategory.jsx
|   |      |      ├─NewsDraft.jsx
|   |      |      ├─NewsPreview.jsx
|   |      |      ├─NewsUpdate.jsx
|   |      |      └index.scss
|   |      ├─Home
|   |      |  ├─index.jsx
|   |      |  └index.scss
|   |      ├─Audit-manage
|   |      |      ├─Audit.jsx
|   |      |      └AuditList.jsx
|   ├─News
|   |  ├─Detail.jsx
|   |  ├─News.jsx
|   |  └index.scss
|   ├─Login
|   |   ├─index.jsx
|   |   └index.scss
├─components
|     ├─User-manage
|     |      └UserForm.jsx
|     ├─TopHeader
|     |     ├─index.jsx
|     |     └index.scss
|     ├─SideMenu
|     |    ├─index.jsx
|     |    └index.scss
|     ├─Publish-manage
|     |       └NewsPublish.jsx
|     ├─NoPermission
|     |      └index.jsx
|     ├─News-manage
|     |      ├─NewsEditor.jsx
|     |      └index.scss
|     ├─Loading
|     |    └index.jsx
|     ├─Charts                // echarts
|     |   ├─HomeBarChart.jsx
|     |   └-HomePieChart.jsx
|     ├─AuthRoute             // 路由鉴权
|     |     └index.jsx
├─assets
|   ├─.DS_Store
|   ├─R-C.jpeg
|   ├─login.png
|   └news_logo.png
```

<hr>

### electron - MacOS

<img width="1000" alt="electron for MacOS - login" src="https://img-blog.csdnimg.cn/ffe743852beb422e944921ebf15ffad7.png">

---

<img width="1000" alt="electron for MacOS - home" src="https://img-blog.csdnimg.cn/f8ce123eb3fe415bbac38d490c9dbb17.png">

---

### web - Chrome


#### 主页
<img width="1000" alt="Home for Chrome" src="https://img-blog.csdnimg.cn/62371f3e544b4c829600c3ac46c073ee.png">

#### 主页抽屉层
<img width="1000" alt="Drawer for Chrome" src="https://img-blog.csdnimg.cn/cd27d490774c4bbbbfaed00b7e1d536f.png">

#### 简易游客端
<img width="1000" alt="News for Chrome" src="https://img-blog.csdnimg.cn/210fe293f3aa4a06b1b624532503710d.png">

#### 新闻详情
<img width="1000" alt="Detail for Chrome" src="https://img-blog.csdnimg.cn/f7750e7b12a647ca8647d62297d8276a.png">

#### 新闻点赞
<img width="1000" alt="star for Chrome" src="https://img-blog.csdnimg.cn/01eaba90e0c84f6dbfc8be5274085dbd.png">

#### 用户管理
<img width="1000" alt="UserManage for Chrome" src="https://img-blog.csdnimg.cn/42f2b873285449b98ae33733c3a7adcb.png">

#### 权限列表
<img width="1000" alt="RightList for Chrome" src="https://img-blog.csdnimg.cn/142f27f454f749648260bf4bc6810ef2.png">

#### 超级管理员｜区域管理员｜区域编辑 - 侧边栏权限
<img alt="SideMenu for Chrome" src="https://img-blog.csdnimg.cn/65f92b6836974f01a0e883b5b088d53f.png">

#### 403 - 无权限页面
<img width="1000" alt="No-Premission for Chrome" src="https://img-blog.csdnimg.cn/2c680dec76f14001a01e8c75e63ccf79.png">

## 开发计划

- [x] gitee pages项目上线
- [x] 炫酷的登陆页
- [ ] 完善游客端 - 新闻快览
- [ ] 新闻快览 - 游客登录
- [ ] 暗黑模式切换
- [ ] 后端使用koa + MongoDB重构
- [ ] electron多端配置、打包
- [ ] 优化再优化

### 其他的想法

- [ ] 搭建个人博客系统
- [ ] 持续学习