vue3 demo

electron/controller/hardware.js

@@ -19,11 +19,11 @@ class HardwareController extends Controller {
   /**
    * 获取打印机列表
    */
-  getPrinterList () {
+  async getPrinterList () {
 
     //主线程获取打印机列表
     const win = CoreWindow.getMainWindow();
-    const list = win.webContents.getPrinters();
+    const list = await win.webContents.getPrintersAsync();
 
     return list;
   }  

frontend/src/utils/axios.js

@@ -1,35 +0,0 @@
-const VueAxios = {
-  vm: {},
-  // eslint-disable-next-line no-unused-vars
-  install (Vue, instance) {
-    if (this.installed) {
-      return
-    }
-    this.installed = true
-
-    if (!instance) {
-      // eslint-disable-next-line no-console
-      console.error('You have to install axios')
-      return
-    }
-
-    Vue.axios = instance
-
-    Object.defineProperties(Vue.prototype, {
-      axios: {
-        get: function get () {
-          return instance
-        }
-      },
-      $http: {
-        get: function get () {
-          return instance
-        }
-      }
-    })
-  }
-}
-
-export {
-  VueAxios
-}

frontend/src/utils/request.js

@@ -1,7 +1,6 @@
 import notification from 'ant-design-vue/es/notification'
 import axios from 'axios'
 import storage from 'store2'
-import { VueAxios } from './axios'
 
 // 创建 axios 实例
 const request = axios.create({
@@ -47,17 +46,9 @@ request.interceptors.response.use((response) => {
   return response.data
 }, errorHandler)
 
-const installer = {
-  vm: {},
-  install (Vue) {
-    Vue.use(VueAxios, request)
-  }
-}
-
 export default request
 
 export {
-  installer as VueAxios,
   request as axios
 }
 

frontend/src/views/framework/java/Index.vue

@@ -17,6 +17,7 @@
 <script>
 import { ipcApiRoute } from '@/api/main';
 import { ipc } from '@/utils/ipcRenderer';
+import axios from 'axios';
 import storage from 'store2';
 
 export default {
@@ -53,15 +54,16 @@ export default {
         this.$message.error('服务未开启 或 正在启动中');
         return
       }
-      let testApi = server + '/test1/get';
-      let params = {
-        url: testApi,
+      const testApi = server + '/test1/get';
+      const cfg = {
         method: 'get',
+        url: testApi,
         params: { id: '1111111'},
         timeout: 60000,
       }
-      this.$http(params).then(res => {
-        this.$message.info(`java服务返回: ${res}`, );
+      axios(cfg).then(res => {
+        const data = res.data || null;
+        this.$message.info(`java服务返回: ${data}`, );
       })
     },
   }

frontend/src/views/framework/testapi/Index.vue

@@ -14,7 +14,7 @@
   </div>
 </template>
 <script>
-import { ipcApiRoute, requestHttp } from '@/api/main';
+import { ipcApiRoute } from '@/api/main';
 import { ipc } from '@/utils/ipcRenderer';
 
 export default {
@@ -33,12 +33,7 @@ export default {
       }) 
     },
     exec2 (id) {
-      const params = {
-        id: id
-      }
-      requestHttp(ipcApiRoute.test, params).then(res => {
-        console.log('res2:', res)
-      }) 
+      //
     },    
   }
 };

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

@@ -33,6 +33,7 @@
 <script>
 import { ipcApiRoute } from '@/api/main';
 import { ipc } from '@/utils/ipcRenderer';
+import { toRaw } from 'vue';
 
 export default {
   data() {
@@ -67,7 +68,7 @@ export default {
     doPrint (index) {
       console.log('defaultDeviceName:', this.defaultDeviceName)
       const params = {
-        view: this.views[index],
+        view: toRaw(this.views[index]),
         deviceName: this.defaultDeviceName
       };
       ipc.send(ipcApiRoute.print, params)

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

@@ -2,6 +2,7 @@
   <div id="app-base-extension">
     <div class="one-block-1">
       <span>
+        <!-- electron的扩展功能不完整，官方也不建议使用 -->
         1. 上传扩展程序（crx文件格式）
       </span>
     </div>
@@ -37,15 +38,10 @@
 export default {
   data() {
     return {
-      action_url: process.env.VUE_APP_API_BASE_URL + '/api/example/uploadExtension',
+      action_url: 'localhost:xxxx/api/example/uploadExtension',
     };
   },
-  mounted () {
-    this.init();
-  },
   methods: {
-    init () {
-    },
 		handleChange(info) {
       const status = info.file.status;
       if (status !== 'uploading') {

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

@@ -35,13 +35,22 @@
     </div>  
     <div class="one-block-2">
       <a-list :grid="{ gutter: 16, column: 4 }" :data-source="file_list">
-        <a-list-item slot="renderItem" slot-scope="item" @click="openDirectry(item.id)">
+        <template #renderItem="{ item }">
+          <a-list-item @click="openDirectry(item.id)">
+            <a-card :title="item.content">
+              <a-button type="link">
+                打开
+              </a-button>
+            </a-card>
+          </a-list-item>
+        </template>
+        <!-- <a-list-item slot="renderItem" slot-scope="item" @click="openDirectry(item.id)">
           <a-card :title="item.content">
             <a-button type="link">
               打开
             </a-button>
           </a-card>
-        </a-list-item>
+        </a-list-item> -->
       </a-list>
     </div>
     <div class="one-block-1">
@@ -57,7 +66,6 @@
         @change="handleFileChange"
       >
         <p class="ant-upload-drag-icon">
-          <!-- <icon-font type="inbox" /> -->
         </p>
         <p class="ant-upload-text">
           点击 或 拖拽文件到这里

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

@@ -1,69 +0,0 @@
-<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>  

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

@@ -18,6 +18,7 @@
 <script>
 import { ipcApiRoute } from '@/api/main';
 import { ipc } from '@/utils/ipcRenderer';
+import { toRaw } from 'vue';
 
 export default {
   data() {
@@ -68,7 +69,7 @@ export default {
       })
     },
     sendNotification (index) {
-      ipc.send(ipcApiRoute.sendNotification, this.views[index]);
+      ipc.send(ipcApiRoute.sendNotification, toRaw(this.views[index]));
     },
   }
 };

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

@@ -36,8 +36,6 @@ export default {
       data: [],
     };
   },
-  mounted () {
-  },
   methods: {
     getScreen (index) {
       ipc.invoke(ipcApiRoute.getScreen, index).then(result => {

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

@@ -23,6 +23,7 @@
 </template>
 <script>
 import { ipcApiRoute } from '@/api/main';
+import { ipc } from '@/utils/ipcRenderer';
 
 export default {
   data () {

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

@@ -33,6 +33,7 @@
 </template>
 <script>
 import { ipcApiRoute } from '@/api/main';
+import { ipc } from '@/utils/ipcRenderer';
 
 export default {
   data() {

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

@@ -34,6 +34,8 @@
 </template>
 <script>
 import { ipcApiRoute } from '@/api/main';
+import { ipc } from '@/utils/ipcRenderer';
+import { toRaw } from 'vue';
 
 export default {
   data() {
@@ -62,7 +64,7 @@ export default {
   },
   methods: {
     createWindow (index) {
-      ipc.invoke(ipcApiRoute.createWindow, this.views[index]).then(r => {
+      ipc.invoke(ipcApiRoute.createWindow, toRaw(this.views[index])).then(r => {
         console.log(r);
       })
     },

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

@@ -27,6 +27,7 @@
 <script>
 import { ipcApiRoute } from '@/api/main';
 import { ipc } from '@/utils/ipcRenderer';
+import { toRaw } from 'vue';
 
 export default {
   data() {
@@ -45,12 +46,12 @@ export default {
   },
   methods: {
     loadViewContent (index) {
-      ipc.invoke(ipcApiRoute.loadViewContent, this.views[index]).then(r => {
+      ipc.invoke(ipcApiRoute.loadViewContent, toRaw(this.views[index])).then(r => {
         console.log(r);
       })
     },
     removeViewContent (index) {
-      ipc.invoke(ipcApiRoute.removeViewContent, this.views[index]).then(r => {
+      ipc.invoke(ipcApiRoute.removeViewContent, toRaw(this.views[index])).then(r => {
         console.log(r);
       })
     },