# p_four

**Repository Path**: ovouu/p_four

## Basic Information

- **Project Name**: p_four
- **Description**: react的demo，主要是练习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-21
- **Last Updated**: 2025-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 技术

- 框架： React v6
- 管理工具： Webpack 5
- js/ts： Typescript
- 组件库： Ant Design
- 样式： scss、tailwind css
- 日期处理库： dayjs
- 图表： Apache Echarts
- icon： 阿里矢量字体图标
- node：v16.17.0

## 主体树状图

- store
  - context.tsx
- env
  - index.tsx
- component
  - card
  - example
  - game
  - layout
  - operationBar
  - pageSelector
  - Pooopup
  - resterizeCanvas
  - search
  - timeLine
- routes
  - index.tsx
- src
  - comp
    - index.tsx
  - example
    - index.tsx
  - home
    - index.tsx
    - index.scss
  - log
    - index.tsx
  - permissions
    - index.scss
    - index.tsx
  - statistics
    - echarts
      - echarts.min.js
    - echartBar.tsx
    - echartPie.tsx
    - index.tsx
  - steer
    - index.tsx
- utils
  - server
    - static
      - abc.html
      - bg-1.jpg
    - template
      - index0.html
      - index1.html
    - simple_server.js
    - useServer.js
  - spider
    - biaoqingbao
    - data
      - moviceContent.js
    - fs.js
    - http.js
    - image.js
    - movice.js
    - request.js
    - requestTest.js
    - test_cherrio.js
    - test_puppeteer.js
    - test.reg.js
  - decorator.ts
  - tools.ts

## 主体文件简述

- store
  - 用来配置全局共用的变量和参数
- env
  - 用来配置在不同场景下的不同样式，目前主要用于配置黑白切换的图片或背景
- component
  - 用来存放各类组件
  - card：卡片布局
  - example：存放一些案例，目前有文字雨和 3D 立体圆圈展示盒
  - game: 存放游戏的案例,目前有飞机大战
  - layout：存放主体页面的布局，包括侧边栏组件
  - Poopup：存放各类弹窗，包括基础的弹窗和应用基础弹窗的各类弹窗
  - pageSelector： 分页器
  - resterizeCanvas：文字栅格化
  - search：搜索组件
  - timeLine：时间线组件
  - operationBar：操作条
- routes
  - 用来存放页面路由
- src
  - 用来存放页面
- utils
  - 用来存放页面公用的一些封装函数
  - 目前将爬虫学习部分的文件也存放于此
  - 爬虫部分运行使用：node 文件名
- fs.js
  - 封装了读写文件和创建目录的操作
- http.js
  - 使用 http 请求数据，展示原始的 js 爬虫
- image.js
  - 预实现爬取百度图片，但由于各种原因报错，暂时停止，之后在进一步研究
- movice.js
  - 实战获取阳光电影 8 的电影信息（简介和下载链接需要进一步处理）
    - 简介：获取的数据需要处理，存在\n 空格和多余字符（需要优化）
    - 下载链接：由于位置不固定，在获取时，可能根据现有长度不一定能获取到（需要进一步处理）
- request.js
  - 使用 request 请求数据，request 请求是封装 http 请求，也算是原始的 js 爬虫
- requestTest.js
  - 也是获取百度图片，但不确定，返回的图片显示加载错误
- test_cherrio.js
  - 获取表情包网站的某一类表情包，成功
  - 存在爬取速度快，表情包的图片解析不出来，这个需要代理
- test_puppeteer.js
  - 获取整个网站的电子书
- test.reg.js
  - 爬取电影网站
- decorator.ts
  - 装饰器的案例
- tools.ts
  - 存放封装的函数
- server
  - 搭建一个简单的 node 服务器

## 待处理问题

- 皮肤弹窗： 自定义系列需要跨域，与后端有关，待处理
- 个人信息页面/切换用户？、管理、权限、日志页面待配置
- 创建数据库，部署后端，待行动

## 已处理

- 解决 card 组件响应式布局
- 解决侧边栏响应式布局
- 解决皮肤弹窗缓存问题
- 解决皮肤弹窗点击弹窗外的地方不能关闭弹窗问题，使用遮罩
- 使用 canvas 栅格化图片，并使用图片或颜色填充图片非白色或透明的区域
- 完成自定义的搜索框组件
- 完成新增一个组件
- 完成组件的下拉菜单
- 封装通用弹窗组件
- 设置面板添加滤镜设置
- 添加了文字雨的案例
- 添加了旋转立体展览案例
- 增加案例的展示页面
- 解决图片背景自适应全屏铺满
- 解决设置图片滤镜问题
- 游戏--飞机大战实现
- 游戏--消消乐
- 电商--sku 规格选择
- 添加路由守卫-- 只有登陆后才可以进入其他页面

## 切换白天/黑夜

- [√]涉及全局的顶部按钮
- [√]涉及 sideColumn 的文本和 icon 及背景和弹窗
- [√]涉及卡片布局的背景和文字
- [√]涉及滚动事件轴的背景和文字
- [√]涉及操作条的文本，边框和 icon
- [√]涉及案例和管理的文本和背景

## 题外话

- 都是练习
- 目前在练习算法