做了一个Wallpaper Engine的学习进度记录壁纸！ 链接：【可交互|本地数据不丢失】学习进度记录壁纸
基础介绍(AI生的我不会写)
一款实验性的学习进度追踪壁纸，采用灵活的自定义配置方案。
由于Wallpaper Engine自带的属性设置无法满足多样化的记录需求，本壁纸提供一个文本框属性，你需要填入JSON格式化的学习计划。壁纸内置提示词生成功能，进入后点击“复制”即可获取，随后可向AI说明需求，轻松生成属于你的计划配置。
支持同时制定多个计划，每个计划可包含若干项目（如不同科目）。每个项目的进度为线性推进（需依次完成），并允许每日按需为项目增减进度（兼顾正向积累与误操作调整）。每达成一个进度节点，可显示对应标题；进度权重可自定义，以准确反映不同任务对整体完成度的贡献，如同阅读一本书时各章节的占比。
若仍感抽象，不妨下载壁纸，亲手填写示例体验一番！
---
本壁纸使用Vite+Vue+Sass+…等等编译构建，逻辑已被最小化。其源码已附于目录中。
一些踩到的坑
如上，这个壁纸本身是Vue开发的，而且很大程度上是用来练习Typescript、Sass和TailwindCSS的
交互
因为我这里暂时只有Win11，就只测试了这个情况。
首先是无法激活滚轮滚动和右键（会开右键菜单），所以内容的滚动必须要靠别的方式实现。我用的是单击小幅滚动按钮。
目前能基本确定大部分兼容的只有左键和鼠标位置（进入/离开）
推荐不要设这几种以外的交互。甚至我自己都不确定即使这几种交互是不是能在所有环境生效。
其次是我的环境可以用navigator对象复制文本。这点上可操作性就很强了。可以在按钮里面塞上很多压缩内容
navigator.clipboard.writeText('text')
PS: ai只是一味地说不行。
用户配置
WEngine自带的壁纸属性设置似乎并非动态，写起来也很别扭，因此一个非常灵活的配置方案对于这个主打自定义计划进度的壁纸就很重要。
WEngine环境浏览器可以访问十分有限的媒体文件，这些包括：
- 用户通过属性指定的图片/视频文件路径。有后缀限制，且此外的文件没有访问资格。当然这样做也是出于安全考虑。
- 用户通过属性指定的文件目录，其中的所有图片和视频内容。（真抠啊连个配置文件都不让读）
- 任意的网络资源。包括内网和在线的媒体文件、css和js资源以及与正常浏览器相差无几的fetch和XMLHttpRequest。但无论怎样，这是官方所不推荐的，我也不希望有人不联网就没法用，所以依赖的库还是下载好.min.js备用比较好。
注意到文本框似乎是不限字数的，我就设为让用户可以自行往里面塞json数据。
那json是什么呢？
开个玩笑我不会真的慢悠悠讲json是什么，但我也不会真的让普通用户去写json。我在里面留了个可以一键复制的提示词，用户可以拿去让ai写，然后直接复制ai生成的代码块。我想绝大部分ai聊天框架都会做这个按钮的。（再不济手动复制也会吧）
持久化
这个事情我其实找了很久，官方文档对于H5页面的使用说明简陋至极以至于几乎就是给了个属性api和debug引导，认为使用h5的开发者有能力完全自行摸索。当时我也陷入误区以为这个作为背景框架的浏览器不可能开放localStorage不然不就串数据了，后来在场景教程里找到了localStorage……
没错，SceneScript(WEngine的场景模板提供的编程语言)里可以直接用localStorage。引擎的localStorage为每个壁纸都独立留有约100kb的空间，这对一般的计划json格式来说足够了。至于H5环境的真·localStorage，虽然文档里没写，但亲测可用。
以上就是大部分坑了。附一张自用截图
