One, foreword

Feel that the background of the personal website done before is too ugly, boring and do a new. Copy MacOs Big Sur and implement some of the basic operation and layout of the system. It took about a month to make this background management system, and more time was spent on the processing of interface details, and the texture of shadows and Gaussian blur was adjusted again and again. Before the background management function has not completely moved over, temporarily introduce the operation and interface, are some of the blog basic functions.

2. Technology stack

2.1 the front

  1. Vue3
  2. Sass

2.2 the back-end

  1. Laravel8

Three, functionality,

3.1 Window Components

  1. Support drag (limit drag area)
  2. Support window sizing (limit maximum and minimum Windows)
  3. Adaptive content inside the window (different function modules introduce corresponding template components)

3.2 the top bar

  1. Bath-filter (Advantages: Gaussian blur only works on the background, the effect is very good. Disadvantages: browser compatibility is not wide enough)

  1. Normal navigation menu bar
  2. Control Center (control desktop statistics, currently the only button)

3.3 the Dock bar

  1. Resident icon
  2. The icon of the currently open window
  3. Gaussian blur

3.4 notice

  1. notification
  2. Gaussian blur
  3. In queue form

3.5 Data Statistics

  1. All kinds of data statistics show

3.6 Article Publishing

  1. Publish long articles (Markdown)
  2. Published picture and text
  3. tag

3.7 File Management

  1. File upload
  2. Delete the file

3.8 Access Records

  1. Records client access information

3.9 Comment Management

  1. Review comments
  2. Delete the comment
  3. Reply to comments (email notifications)

Fourth, the End

I will continue to optimize the interface and animation effects in the future. We will see what changes are made in 12 and then modify them one by one to perfect the original functions.