refactor: refactor API Testing frontend

[YuLuo]

Refactor API Testing frontend

• HTTP client component: fetch -> axios
• Add page router : vue-router
• Refactoring the front-end directory structure
• Logo design and inclusion in front-end pages
  discussion: https://github.com/LinuxSuRen/api-testing/discussions/169
• Front-end page layout container refactoring
• Improve the theme switching function

     // src -> components -> HeaderComponents.vue
     <!-- todo：主题样式显示有误。 -->
     <!-- <li>
     <el-tooltip content="点击以切换主题" placement="bottom" effect="light">
     <el-switch
     v-model="darkOpt"
     inline-prompt
     :active-action-icon="Sunny"
     :inactive-action-icon="Moon"
     @click="setTheme()"
     />
     </el-tooltip>
     </li> -->
  

The above fivepages are all under src -> views -> related folder, and the refactoring needs to be completed with related functional tests to make sure the function is normal.

• Refactor welcome pages(Index pages)
• Refactor Test pages
• Refactor Mock pages
• Refactor secrets pages
• Refactor store pages

technology stack

Axios

Element-plus

Vue3

Vue-router

The page effect is as follows:

PS Feel free to point out any guidance on color schemes and other aspects of the project.

[YuLuo]

Refactor Test pages @yuluo-yx

[Rick]

It looks better.

[Rick]

是否可以考虑把整体框架的重构完成了就提交 PR，每个页面的重构其他人也可以单独提交 PR

[Rick]

Dark theme 的问题 @suoaiyisheng 在试着解决

[YuLuo]

是否可以考虑把整体框架的重构完成了就提交 PR，每个页面的重构其他人也可以单独提交 PR

是这样协同的，不过目前仓库地址在我的 github 空间里，也就是这个地址 https://github.com/yuluo-yx/api-testing/tree/0504-yuluo/front-api-re

[bugoutianzhen123]

是否可以让红箭头处的边框可以拖动到蓝线位置，在窗口化时可以获得更好的视觉体验
原来的前端会有窗口缩小后，页面元素未正确排列，导致文字重叠的bug，希望重构的时候能注意

[github-actions]

This issue has been open 30 days with no activity. This will be closed in 7 days.

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity.If you think this should still be open, or the problem still persists, just pop a reply in the comments and one of the maintainers will (try!) to follow up. Thank you for your interest and contribution to the api-testing.