A-SOUL-Panel

如何自己构建代码？

需要自行构建代码请参照下文教程，非专业用户亦可以下载构建好的插件或直接从商店安装

I. 初始化

1. Clone本仓库
2. 选择一种方式安装依赖项

• 根据package文件中的内容用npm安装依赖的包

npm install [packageName]

• 也可以一步到位执行完成所有包的安装

npm install

II. 编译项目

使用npm run build构建项目，build的过程可以参考vue配置文件

npm run build

III. 加载到浏览器

使用浏览器“加载解压缩的扩展”功能，选择编译出的dist目录加载插件即可

技术栈（可能）

css + html + js + vue3 + webpack5(vue/cli3默认) + vue-loader + 可能还有别的我不知道的

使用到的特殊开源项目

• element-plus

有关Manifest V3

• Manifest V3 相对于 V2 在机制上有很大改变，各种限制变得更加严格，比如取消background机制改用serviceWorker(相比background无法直接操作DOM —— 因此jquery也一起无了，空闲时浏览器将收回运行资源，禁用ajax仅能使用fetch API等)，但Manifest V2 的插件生命周期确实不长了(本地加载都得先报个错提醒你更新版本)，干脆直接从3开始设计。由于V3的相关中文资料确实是太少，我只能润去谷歌看官方文档(英语没白学)，慢慢啃总算是看明白了七七八八，要不是平时时间少我也挺想写点相关文章的😥
• 此外，由于旧版本浏览器不兼容，测试或使用插件请使用Chrome 88或更新的Chrome浏览器，最好使用当下能安装的最新版本，同内核的浏览器(如Edge)同理；
• 传言Mozilla会让Firefox支持运行Manifest V3的Chrome插件，是否已经实现以及具体需要做哪些改动我不太清楚，欢迎移植插件到Firefox
• service_worker写法尽可能遵循谷歌的标准，如不使用全局变量改用storage API等

有关插件开发

• 在"动态与直播"功能中根据MVC设计原则，获取显示的数据的工作应交给service_worker，通过消息传递将数据传递给asouldata组件，使得逻辑更清晰，这里暂时没时间修改了
• 夜间模式采用动态修改link标签的方式引入全局反色滤镜，不需要反色的元素添加两层滤镜，目前缺点是暗色遮罩层会变得更亮，其他暂无问题，有机会会采用scss重构色彩主题

有关插件使用

• 新标签页的动态瀑布流以及一旦加载就存在的service_worker都会不停从B站请求动态序列数据，其中瀑布流在剩余未显示的动态不足时一次请求72条，service_worker每分钟请求72条，因此不要频繁刷瀑布流或频繁刷新新标签页，否则容易出现B站将API封禁(暂时性412错误)的情况，不仅插件获取不到信息，还会影响网页端B站的部分功能，如果在console中看到了412错误，等待数十分钟后即可恢复
• 打开标签页时请尽可能将浏览器全屏显示在一块长宽比常规的屏幕上，否则容易导致组件排版错位，也请不要缩放页面
• 壁纸来自Bing每天更新的壁纸序列，如果无法连接到Bing，背景会显示一片空白
• popup中只有一个模型，这个模型显示存在bug，缺少半边蝴蝶结，快速拖动会造成纹理脱节；由于原作者制作时是针对面部捕捉使用的，因此没有预设的表情或其他动画序列
• Live2D支持来自https://blog.csdn.net/weixin_44919664/article/details/117070414

有关字体使用

• 时钟字体：Arial Rounded MT Bold
• 名言字体：汉仪许静行楷
• 默认字体：小米 MiSans
• 其中Arial公司的字体使用要求较严格，但该插件并非商用，仅用于学习交流，应该没事~

可改进的地方

• 参考一种设计模式重构代码，使得项目逻辑更清晰
• 夜间模式目前的呈现效果一般，可正式使用的夜间模式/深色模式应通过SCSS的主题功能实现，进而实现页面的多种主题切换
• 由于一些数据需要实时加载，目前插件只能在线运行，离线运行会出现一些影响用户使用的问题，如壁纸无法加载（可缓存到本地解决）、天气无法获取（可缓存天气信息解决）等
• 来自B站的相关数据有缓存，但获取信息的频率可以继续优化，目前保证了效率(每分钟一次)，但偶尔会被B站暂时封禁API的使用，返回412错误，可以更换为更合适的专用服务器处理爬虫工作，而非插件本地完成
• Live2d功能是插件差异化功能之一，目前的呈现效果仍然不好，由于开发者未曾接触过相关领域，使用的由粉丝设计的2D模型也并非特意为网页端插件特别设计的，导致未能正式完成该功能，希望将来可以解决

后话

原本用的是偷懒的CDN加载vue.global.js，但是通不过浏览器的网络安全策略，原因是编译器用了类似eval()的不安全的方法，内联样式、脚本和外部脚本也无法运行，这个问题的说明在vue3的文档中是没有的，但可以在vue2的文档中找到。不做迁移最后只能写出网页却无法封装成插件。最终花了一整天把项目迁移到vue-cli构建的项目上😭纯纯浪费时间