花了一个多星期写了一个win11项目,是朋友写了一个,然后自己也想写一个有创意的项目,最后决定也写个这个,希望简历不要撞车,记录一下这个项目,写完还挺有成就感的 有兴趣的朋友可以看下
地址:http://101.34.250.195/
github地址:github.com/tutouyu/myW… (给个star吧 ball ball了)
顺便发下自己个人博客地址: tutouyu.com/
项目功能点
- 待机界面和windows界面 开机关机
实现: 这个比较简单就是路由跳转 - vscode 浏览器 能放大缩小拖动 下面窗口都一样
实现: 这两个放一起说,因为主要功能都不需要自己实现,浏览器的页面就只要自己写头部框 前进 后退 刷新 地址栏 关闭 放大缩小这些,主要内容是直接套个iframe 跳转就改下src属性就可以了,vscode也跟浏览器差不多iframe地址是github自带的编辑器地址 github1s.com/tutouyu/myW… - github
实现: 这个更简单了 就写一个图标然后跳转到github就行了 - 我的电脑(文件资源管理器)回收站 新建文件 删除文件 文件排序 浏览文件
实现: 这个是我感觉项目里最复杂麻烦的,主要也是因为我一开始数据结构没设计好,侧边栏需要组件递归,同时阻止冒泡和捕获,点击侧边栏文件的时候地址栏随之响应改变,这是个难点,我最后的解决方案是递归组件自己emit 自己监听,每次向父级emit的时候,在地址数据里push一个当前文件,地址栏的数据结构是个文件数组,显示地址的时候只显示最外层name,新建文件和删除文件就是在文件数组里新增文件数据和删除文件数据
文件是树形结构file:{name:'',type:'',files:[{name:'',type:'',files:[]}]}这样子 type是当文件位置或者数量改变后 index索引也会改变,所以需要一个唯一标志 - 桌面亮度调节
实现: 这个当时我没想出来怎么弄 一开始想的就是放个幕布控制透明度就行了,但是放上幕布后就无法对桌面操作了,最后是看了别人的才知道应该是用after伪元素 因为伪元素是不建立在dom树上的所以不会产生实质dom的影响,就是after写个幕布贴桌面上,然乎控制透明度 - 其他就是界面设计了 前端常规操作了 再写个拖动咋写的吧
实现: 就是获取event里的xy坐标,然后获取窗口offsetleft,减一下,然后赋给窗口的top left(position:absoulte) 下面放一些项目图片(给个star吧)