demo

frontend/src/views/effect/video/Index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div id="app-effect-video">
+    <div class="one-block-1">
+      <span>
+        1. 视频播放
+      </span>
+    </div>  
+    <!-- <div class="one-block-2">
+      <a-button @click="selectFile()"> 打开 / 浏览 </a-button>
+    </div> -->
+    <div class="one-block-2">
+      <div id="video-player"></div>
+    </div>    
+  </div>
+</template>
+<script>
+import Player from 'xgplayer'
+import { ipcApiRoute } from '@/api/main'
+
+export default {
+  data() {
+    return {
+      fileUrl: '',
+      p: {},
+      op: {
+        id: 'video-player',
+        volume: 0.3,
+        url:'//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
+        poster: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
+        playsinline: false,
+        danmu: {
+          comments: [
+            {
+              duration: 15000,
+              id: '1',
+              start: 3000,
+              txt: '这是一个弹幕',
+              style: {  //弹幕自定义样式
+                color: '#ff9500',
+                fontSize: '20px',
+                border: 'solid 1px #ff9500',
+                borderRadius: '50px',
+                padding: '5px 11px',
+                backgroundColor: 'rgba(255, 255, 255, 0.1)'
+              }
+            }
+          ],
+          area: {
+            start: 0,
+            end: 1
+          }
+        },
+      },
+    };
+  },
+  mounted () {
+    this.init();
+  },    
+  methods: {
+    init () {
+      //require('E:/video/nos_mp4_2021_05_30_sga9a3cj7_shd.mp4')
+      this.p = new Player(this.op);
+    },    
+    selectFile () {
+      // todo
+      const self = this;
+      const params = {}
+      this.$ipcInvoke(ipcApiRoute.effect.selectFile, params).then(res => {
+        console.log('res:', res)
+        if (res) {
+          self.fileUrl = res;
+          this.p.start(self.fileUrl);
+        } else {
+          self.$message.warning('请选择视频');
+        }
+      }) 
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+#app-effect-video {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>

frontend/src/views/hardware/printer/Index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="app-hw-bluetooth">
+    <div class="one-block-1">
+      <span>
+        1. 打印机设备
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-button @click="getPrinter()"> 获取打印机列表 </a-button>
+    </div>
+    <div class="one-block-2">
+      <a-list size="small" bordered :data-source="printerList">
+        <a-list-item slot="renderItem" slot-scope="item">
+          {{ item.displayName }} {{ defaultDevice(item) }}
+        </a-list-item>
+        <div slot="header">
+          设备列表
+        </div>
+      </a-list>
+    </div>
+    <div class="one-block-1">
+      <span>
+        2. 打印内容
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-button @click="doPrint(0)"> 打印一个页面 </a-button>
+    </div>      
+  </div>
+</template>
+<script>
+import { ipcApiRoute } from '@/api/main'
+
+export default {
+  data() {
+    return {
+      defaultDeviceName: '',
+      printerList: [],
+      views: [
+        {
+          type: 'html',
+          content: '/public/html/view_example.html'
+        },        
+      ],
+    };
+  },
+  mounted () {
+    this.init();
+  },  
+  methods: {
+    init () {
+      const self = this;
+      // 避免重复监听，或者将 on 功能写到一个统一的地方，只加载一次
+      this.$ipc.removeAllListeners(ipcApiRoute.hardware.printStatus);
+      this.$ipc.on(ipcApiRoute.hardware.printStatus, (event, result) => {
+        console.log('result', result);
+        self.$message.info('打印中...');
+      })
+    },    
+    getPrinter () {
+      this.$ipcInvoke(ipcApiRoute.hardware.getPrinterList, {}).then(res => {
+        this.printerList = res;
+      }) 
+    },
+    doPrint (index) {
+      console.log('defaultDeviceName:', this.defaultDeviceName)
+      const params = {
+        view: this.views[index],
+        deviceName: this.defaultDeviceName
+      };
+      this.$ipc.send(ipcApiRoute.hardware.print, params)
+
+    },
+    defaultDevice (item) {
+      let desc = "";
+      if (item.isDefault) {
+        desc = "- 默认";
+        this.defaultDeviceName = item.name;
+      }
+      
+      return desc;
+    } 
+  }
+};
+</script>
+<style lang="less" scoped>
+#app-hw-bluetooth {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>

frontend/src/views/os/launch/Index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="app-base-system-launch">
+    <div class="one-block-2">
+      <a-list class="set-auto" itemLayout="horizontal">
+        <a-list-item style="text-align: left;">
+          <a-list-item-meta>
+            <template v-slot:title>
+              <a>启动</a>
+            </template>
+            <template v-slot:description>
+              <span>
+                开机自动启动
+              </span>
+            </template>
+          </a-list-item-meta>
+          <template v-slot:actions>
+            <a-switch v-model="autoLaunchChecked" checkedChildren="开" unCheckedChildren="关" @change="autoLaunchChange()" />
+          </template>
+        </a-list-item>
+      </a-list>
+    </div>
+  </div>
+</template>
+<script>
+import { ipcApiRoute } from '@/api/main'
+
+export default {
+  data () {
+    return {
+      autoLaunchChecked: false
+    }
+  },
+  mounted () {
+    this.init();
+  },
+  methods: {
+    init () {
+      // todo .....
+      const self = this;
+      self.$ipcInvoke(ipcApiRoute.os.autoLaunch, 'check').then(result => {
+        console.log('[ipcRenderer] [autoLaunch] result:', result)
+        this.autoLaunchChecked = result.status;
+      })      
+    },
+    autoLaunchChange (checkStatus) {
+      console.log('[ipcRenderer] [autoLaunch] self.autoLaunchChecked:', this.autoLaunchChecked)
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+#app-base-system-launch {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+  .set-auto {
+    .ant-list-item:last-child {
+      border-bottom: 1px solid #e8e8e8;
+    }
+  }
+}  
+</style>