# wallpaper-test-vue3

**Repository Path**: fieldtianye/wallpaper-test-vue3

## Basic Information

- **Project Name**: wallpaper-test-vue3
- **Description**: 用vue3写wallpaper engine的网页桌面
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-03-25
- **Last Updated**: 2024-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目背景
最开始只是想让系统信息显示到桌面壁纸上，但是wallpaper engine无法直接访问系统信息，且其原生壁纸格式对第三方js包的引入保持了相当的克制，多次尝试均无果 。 
然后，我决定另辟蹊径，用web格式的壁纸，访问一个服务端，从服务端后去硬件信息，进行展示。   
这算是一个示例项目，wallpaper engine + vue + aida64 的全流程解决方案。
### 效果展示
![图片](/src/assets/images/preview.gif "桌面预览效果")  
## 技术选型
### 服务端
使用现成的、通用的aida64，其开启相关配置后，可以使用SSE（支持时刷新和断点重连）推送指定的各种系统信息，配置位置如下，我这里设置的端口是8070，开发者自己根据自己的情况修改即可，和前端对应即可： 

![图片](/src/assets/images/aida64LCDRemoteSensor支持截图.png "lcd RemoteSensor支持配置截图")  

![图片](/src/assets/images/aida64LCD项目配置截图.png "lcd项目配置截图")  

### 前端
使用vue3框架，原生写起来太麻烦了，扩展起来不方便。    
没有太多需要说明的，无非就是注意跨域问题、发布地址这些问题，以下是`vue.config.js`文件的配置说明：  
```
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 关闭eslint校验
  lintOnSave: false,
  /// 指定发布构建目录，这里改成自己wallpaper engine创建的web项目位置，可以实现快速替换项目源码
  //需要注意的是，可能是wallpaper engine自身的特性，最终index.html还是需要和project.json在一个目录，否则一些配置会无法生效，用户属性也无法传递
  //调试时候可以创建一个目录专门供源码覆盖（修改project.json），在编辑器中能是正常显示，只是在调试结束后，记得把源码拿出来，还原project.json
  outputDir:'F:/SteamLibrary/steamapps/common/wallpaper_engine/projects/myprojects/index/src/',
  transpileDependencies: true,
  //让项目可以本地运行
  publicPath:"./",
  //去除 “Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. ” 警告
  chainWebpack: (config) => {
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false',
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      })
      return definitions
    })
  },
  //代理配置
  devServer:{
    port:8080,//vue网页访问的端口
    host:"127.0.0.1",//vue网页访问的地址
    https:false,
    open:false,
    //跨域配置，这里我的aida64配的端口是8070，实际配置成自己的即可
    proxy: {
        '/sse':{
          target: 'http://127.0.0.1:8070/',//Axios跨域请求的IP
            changeOrigin: true, 
            ws: true,
            secure: false
        }
      
    }
  }
})
```
## 项目开发思路
### 页面开发
web端的开发本身很简单，没有太多说的必要，vue组件式开发，在网上看到好看的内容，可以直接copy下来，很多东西改动几行就能拿来用，完美嵌入自己的项目。  
### 数据获取
有一点要说的是，aida64后端数据的获取还是花费了一番周折的。直接访问ip+端口就能拿到数据，服务端推送的数据甚至自带样式（尽管和没有差不多），拿来用就行。但是，如果以网页嵌入形式放到自己的页面，想要修改样式的话，会面临跨域问题，这个问题通过设置代理是无法解决的，处理起来特别麻烦，后面才想着看下aida64的数据是怎么推送的，都做好了使用定时器获取的的准备，然后，一抓包就发现，原来是使用的SSE协议呀，这就好搞了，直接建立SSE通道就行了。  
### wallpaper engine软件编辑器的使用
这个编辑器貌似对web页面的开发不是很友好，基本只有使用第三方软件进行，包括部分配置内容的修改，没有直接通过配置界面添加的方案，包括音频接入、资源文件路径等，如果不注意的话，可能会覆盖，这个需要注意下，建议多尝试几遍，验证下流程。

## 关于自定义配置
时隔几个月，我又想到了这个项目，想要做正式发布，但目前的样子我不是很满意，因此，利用了一些闲于时间，做了一个稍微深度一点的优化，尤其增加了自定义的内容，扩展性更强更漂亮了。  
以下为自定义的配置说明：
```
{
  //边框配置，数组，采用绝对定位的方式，匹配自己电脑上使用的aida64配置
  borders: [
    {
      //边框标题
      title: '标题1',
      //边框类型，整数
      borderType: 1,
      //整个边框的style，css尽情写
      style: {
        width: '300px',
        height: '400px',
        left: '0px',
        top: '0px',
        textAlign: 'left',
        //专门为标题定义了一个style字段，方便专门修改标题
        titleStyle: {
          fontSize: '25px'
        },
        //专门为容器本身定义了一个style字段，方便自定义边框内容，如颜色
        boxStyle:{
          border: '15px solid'
        }
      }
    },
    {
      title: '标题2',
      style: {
        width: '300px',
        height: '390px',
        left: '320px',
        top: '0px',
        titleStyle: {
          fontSize: '25px'
        }
      }
    }
  ],
  //todo
  other:{}
}
```
## 更新日志
### 20240310  
- 项目立项
- 完成基础构想  
<b> 效果演示
![图片](/src/assets/images/preview.gif "桌面预览效果")  

### 20240810  
- 添加自定义边框配置
- 添加aida64 LCD原始页面显示  
<b> 效果示意 
![图片](/src/assets/images/20240810aida64配置页面.png "20240810aida64配置页面")  
![图片](/src/assets/images/20240810更新效果.png "20240810更新效果")  

## 后续计划
 - [x] 优化作者显示
 - [x] 显示aida64原始页面
 - [x] 添加额外的边框，并支持自定义
 - [ ] 规范配置模板
 - [ ] 增加更多可选的预定义的边框类型

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```
## 觉得项目不错，打赏杯咖啡？

<center>
<figure>
<img src="./src/assets/images/微信收款码.png" height="300"/>
<img src="./src/assets/images/支付宝收款码.jpg" height="300" />
</figure>
</center>

## 作者信息
- 全栈开发，后端擅长.net，桌面端擅长wpf，web端擅长vue，嵌入式擅长qt；
- 擅长网络开发、系统开发、框架开发、桌面开发；
- 擅长编程语言C#、C++/C、Html、Javascript、Css；
- 主业物联网，可提供各类物联网解决方案（包括产品），如智慧工地/小区、物联监控大屏等；
- 联系邮箱：soloshine.cfh@foxmail.com、tianyeote@gmail.com；