crx插件demo

frontend/src/config/router.config.js

@@ -28,11 +28,6 @@ export const constantRouterMap = [
             name: 'DemoSocketIndex',
             component: () => import('@/views/demo/socket/Index')
           },
-          {
-            path: '/demo/extend/index',
-            name: 'DemoExtendIndex',
-            component: () => import('@/views/demo/extend/Index')
-          },
           {
             path: '/demo/windowview/index',
             name: 'DemoWindowViewIndex',
@@ -43,6 +38,11 @@ export const constantRouterMap = [
             name: 'DemoWindowIndex',
             component: () => import('@/views/demo/window/Index')
           },
+          {
+            path: '/demo/extension/index',
+            name: 'DemoExtensionIndex',
+            component: () => import('@/views/demo/extension/Index')
+          },
           {
             path: '/demo/notification/index',
             name: 'DemoNotificationIndex',

frontend/src/layouts/DemoMenu.vue

@@ -36,12 +36,6 @@ export default {
           pageName: 'DemoSocketIndex',
           params: {}
         },
-        'menu_301' : {
-          icon: 'profile',
-          title: '扩展程序',
-          pageName: 'DemoExtendIndex',
-          params: {}
-        },
         'menu_400' : {
           icon: 'profile',
           title: '视图',
@@ -54,25 +48,31 @@ export default {
           pageName: 'DemoWindowIndex',
           params: {}
         },
-        'menu_402' : {
+        'menu_403' : {
+          icon: 'profile',
+          title: '扩展程序',
+          pageName: 'DemoExtensionIndex',
+          params: {}
+        },
+        'menu_405' : {
           icon: 'profile',
           title: '桌面通知',
           pageName: 'DemoNotificationIndex',
           params: {}
         },
-        'menu_403' : {
+        'menu_407' : {
           icon: 'profile',
           title: '电源监控',
           pageName: 'DemoPowerMonitorIndex',
           params: {}
         },
-        'menu_404' : {
+        'menu_409' : {
           icon: 'profile',
           title: '屏幕信息',
           pageName: 'DemoScreenIndex',
           params: {}
         },
-        'menu_405' : {
+        'menu_411' : {
           icon: 'profile',
           title: '系统主题',
           pageName: 'DemoThemeIndex',

frontend/src/views/demo/extend/Index.vue

@@ -1,77 +0,0 @@
-<template>
-  <div id="app-demo-screen">
-    <div class="one-block-1">
-      <span>
-        1. 
-      </span>
-    </div>
-    <div class="one-block-2">
-      <a-space>
-        <a-button @click="getTheme()">获取模式</a-button>
-      </a-space>
-      <span>
-        结果：{{ currentThemeMode }}
-      </span>
-    </div>
-    <div class="one-block-1">
-      2. 设置主题模式（请自行实现前端UI效果）
-    </div>  
-    <div class="one-block-2">
-
-    </div>
-  </div>
-</template>
-<script>
-
-export default {
-  data() {
-    return {
-      currentThemeMode: '',
-      themeList: [
-        'system',
-        'light',
-        'dark'
-      ]
-    };
-  },
-  mounted () {
-    this.init();
-  },
-  methods: {
-    init () {
-      const self = this;
-      this.$ipc.on('example.setTheme', (event, result) => {
-        console.log('result:', result)
-        self.currentThemeMode = result;
-      })
-
-      this.$ipc.on('example.getTheme', (event, result) => {
-        console.log('result:', result)
-        self.currentThemeMode = result;
-      })
-    },
-    setTheme (e) {
-      this.currentThemeMode = e.target.value;
-      console.log('setTheme currentThemeMode:', this.currentThemeMode)
-      this.$ipc.send('example.setTheme', this.currentThemeMode);
-    },
-    getTheme () {
-      this.$ipc.send('example.getTheme', '');
-    },
-  }
-};
-</script>
-<style lang="less" scoped>
-#app-demo-screen {
-  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/demo/extension/Index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="app-demo-extension">
+    <div class="one-block-1">
+      <span>
+        1. 上传扩展程序（crx文件格式）
+      </span>
+    </div>
+    <div class="one-block-2">
+      <a-upload-dragger
+        name="file"
+        :multiple="true"
+        :action="action_url"
+        @change="handleChange"
+      >
+        <p class="ant-upload-drag-icon">
+          <a-icon type="inbox" />
+        </p>
+        <p class="ant-upload-text">
+          Click or drag file to this area to upload
+        </p>
+        <p class="ant-upload-hint">
+        </p>
+      </a-upload-dragger>
+    </div>
+    <div class="one-block-1">
+      2. chrome扩展商店（crx下载）
+    </div>  
+    <div class="one-block-2">
+      <a-space>
+        极简插件：https://chrome.zzzmh.cn/
+      </a-space>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      action_url: process.env.VUE_APP_API_BASE_URL + '/api/v1/example/uploadExtension',
+    };
+  },
+  mounted () {
+    this.init();
+  },
+  methods: {
+    init () {
+    },
+		handleChange(info) {
+      const status = info.file.status;
+      if (status !== 'uploading') {
+        console.log(info.file);
+      }
+      if (status === 'done') {
+        const uploadRes = info.file.response;
+        console.log('uploadRes:', uploadRes)
+        // if (uploadRes.code !== 'success') {
+        //   this.$message.error(`file upload failed ${uploadRes.code} .`);
+        //   return false;
+        // }
+        // this.$message.success(`${info.file.name} file uploaded successfully.`);
+      } else if (status === 'error') {
+        this.$message.error(`${info.file.name} file upload failed.`);
+      }
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+#app-demo-extension {
+  padding: 0px 10px;
+  text-align: left;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>