Skip to content

Latest commit

 

History

History
157 lines (124 loc) · 4.19 KB

README-zh_CN.md

File metadata and controls

157 lines (124 loc) · 4.19 KB
Raw

Qnets 轻动漫

Qnets 轻动漫后台管理系统, 基于 React 实现

English · 中文

简介

  • 前后台分离式开发，本项目仅为后台管理系统。前台详见 qnets-anime，服务端详见 qnets-anime-koa2
  • 本项目几乎借助于 shadcn/ui 这个优秀的 UI 组件库，主打简约风格。
  • 登录服务由 qnets-sso、qnets-sso-koa2 提供支持，用户只需要登录一次就可以访问所有Qnets的项目。

实现功能

  • 仪表盘：直观展示整个项目的各项数据信息
  • 轮播图：管理前台首页的大屏轮播图
  • 公告：管理前台的系统公告通知
  • 视频：管理视频相关信息
    • 视频管理
      • 视频详情
    • 分类管理
    • 弹幕管理
    • 纠错管理
  • 用户：管理用户相关信息
    • 用户管理
    • 收藏管理
    • 评分管理
    • 公告记录管理
  • 评论：
    • 评论详情
  • 设置：暂定

技术栈

  • 基于 npm create vite 后的配置

    • react v18 (hooks + zustand + react-router v6)
    • shadcn/ui UI 组件库
    • zod 规则校验
    • i18next 国际化
    • tailwind 样式
    • eslint + prettier 格式化

项目结构

目录结构

│
└─src
   ├─apis               // 接口
      ├─models          // 接口类型定义
      └─...
   ├─components         // 组件
      ├─custom          // 自定义组件
      ├─layout          // 布局组件
      └─ui              // shadcn/ui组件
   ├─context
   ├─hooks              // 自定义hooks
   ├─img                // 图片
   ├─lib                // 工具包
   ├─locale             // 国际化
   ├─pages              // 页面
   ├─store              // 状态
   ├─style              // 全局样式
   ├─  layout.tsx       // 布局框架
   ├─  links.tsx        // 菜单定义
   ├─  main.tsx         // 主入口
   ├─  routes.tsx       // 路由定义
   └─...

配置

仅列举需要修改的部分

lib/config.ts 文件

// 登录地址 需修改为部署/本地qnets-sso服务的地址
const LOGIN_URL = '//localhost:5173';

vite.config.ts 文件（开发环境）

...
server: {
   ...
   // 这里配置了代理，需要配合后端的set-cookie的domain，例如localhost.qnets.cn
   host: '0.0.0.0',
   proxy： {
      '/v1': {
         // 项目接口地址 需修改为部署/本地qnets-anime-koa2服务的地址
         target: 'http://localhost:5200'
         ...
      },
      '/auth': {
         // 认证接口地址 需修改为部署/本地qnets-sso-koa2服务的地址
         target: 'http://localhost:4800'
         ...
      }
   }
   ...
}
...

lib/refresherRequest.ts 文件（开发环境）

这里需要

...
await this.request({
    url,
    method: 'post',
    headers: {
        Authorization: token,
        // headers需要添加 x-forwarded-for，ip地址需要与后端认证服务qnets-sso-koa2中获取的地址相同，否则7天免登录会失效
        'x-forwarded-for': '0.0.0.0'
    }
});
...

快速开始

$ git clone https://github.com/hzh11012/qnets-anime-admin.git

## 安装依赖以及开启开发模式
$ yarn
$ yarn dev

## 安装依赖以及开启开发模式 注意必须先配置好server端
## 可参考 https://github.com/hzh11012/qnets-anime-koa2

## 打包
$ yarn build

星历史

Star History Chart

贡献者

许可证

MIT