功能界面优化

frontend/.eslintrc.js

@@ -1,30 +1,28 @@
 module.exports = {
   root: true,
   parserOptions: {
+    parser: 'babel-eslint',
     sourceType: 'module'
   },
-  parser: 'vue-eslint-parser',
   env: {
     browser: true,
     node: true,
     es6: true,
   },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
   rules: {
     'no-console': 'off',
     "no-unused-vars":"off", //重要 var 变量为引入
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'generator-star-spacing': 'off',
     'no-mixed-operators': 0,
-    // 'vue/max-attributes-per-line': [
-    //   2,
-    //   {
-    //     'singleline': 10,
-    //     'multiline': {
-    //       'max': 1,
-    //       'allowFirstLine': false
-    //     }
-    //   }
-    // ],
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
     'vue/attribute-hyphenation': 0,
     'vue/html-self-closing': 0,
     'vue/component-name-in-template-casing': 0,

frontend/src/App.vue

@@ -1,19 +1,13 @@
 <template>
   <div id="app">
-    <Layout />
+    <router-view/>
   </div>
 </template>
 
 <script>
-// import HelloWorld from './components/HelloWorld.vue'
-// import { Button } from 'ant-design-vue'
-import Layout from './views/Layout'
-
 export default {
   name: 'App',
-  components: {
-    Layout
-  },
+  components: {},
   data() {
     return {
       current: ['mail'],

frontend/src/api/main.js

@@ -2,7 +2,6 @@ import request from '@/utils/request'
 // import storage from 'store'
 
 const mainApi = {
-  outApi: '/api/v1/outApi',
   openDir: '/api/v1/example/openLocalDir',
   uploadFile: '/api/v1/example/uploadFile',
   executeJS: '/api/v1/example/executeJS',
@@ -14,17 +13,6 @@ const mainApi = {
 }
 
 /**
- * outApi
- */
-export function outApi (uri, parameter) {
-  return request({
-    url: mainApi[uri],
-    method: 'post',
-    data: parameter
-  })
-}
-
-/**
  * local api
  */
 export function localApi (uri, parameter) {

frontend/src/config/router.config.js

@@ -2,40 +2,53 @@
  * 基础路由
  * @type { *[] }
  */
+ import {AppSider, DemoMenu} from '@/layouts'
+
+ const RouteView = {
+   name: 'RouteView',
+   render: (h) => h('router-view')
+ }
 export const constantRouterMap = [
   {
     path: '/',
-    component: { template: '<div><router-view /></div>' },
+    component: AppSider,
     children: [
       {
-        path: 'fileOpenDir',
-        name: 'FileOpenDir',
-        component: () => import('@/views/example/OpenDir')
+        path: '/demo',
+        name: 'Demo',
+        component: DemoMenu,
+        children: [
+          {
+            path: '/demo/file/open-dir',
+            name: 'DemoFileOpenDir',
+            component: () => import('@/views/demo/file/OpenDir')
+          },
+          {
+            path: '/demo/file/upload-file',
+            name: 'DemoFileUploadFile',
+            component: () => import('@/views/demo/file/UploadFile')
+          },
+          {
+            path: '/demo/socket/ipc',
+            name: 'DemoSocketIpc',
+            component: () => import('@/views/demo/socket/Ipc')
+          },
+          {
+            path: '/demo/shortcut/index',
+            name: 'DemoShortcutIndex',
+            component: () => import('@/views/demo/shortcut/Index')
+          },
+          {
+            path: '/demo/software/open',
+            name: 'DemoSoftwareOpen',
+            component: () => import('@/views/demo/software/Open')
+          },
+        ]  
       },
       {
-        path: 'uploadFile',
-        name: 'UploadFile',
-        component: () => import('@/views/example/UploadFile')
-      },
-      {
-        path: 'ipc',
-        name: 'Ipc',
-        component: () => import('@/views/example/Ipc')
-      },
-      {
-        path: 'shortcut',
-        name: 'Shortcut',
-        component: () => import('@/views/example/Shortcut')
-      },
-      {
-        path: 'openSoftware',
-        name: 'OpenSoftware',
-        component: () => import('@/views/example/OpenSoftware')
-      },
-      {
-        path: 'setting',
-        name: 'Setting',
-        component: () => import('@/views/Setting')
+        path: '/other/index',
+        name: 'OtherIndex',
+        component: () => import('@/views/other/Index')
       }
     ]
   }

frontend/src/layouts/AppSider.vue

@@ -0,0 +1,92 @@
+<template>
+  <a-layout id="app-layout-sider">
+    <a-layout-sider
+      v-model="collapsed"
+      theme="light"
+      class="layout-sider"
+    >
+      <div class="logo">
+        <img class="pic-logo" src="~@/assets/logo.png">
+      </div>
+      <a-menu class="menu-item" theme="light" mode="inline" :default-selected-keys="['menu_1']" @click="menuHandle">
+        <a-menu-item v-for="(menuInfo, index) in menu" :key="index">
+          <a-icon :type="menuInfo.icon" />
+          {{ menuInfo.title }}
+        </a-menu-item>
+      </a-menu>
+    </a-layout-sider>
+    <a-layout>
+      <a-layout-content class="layout-content">
+        <router-view />
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
+</template>
+<script>
+export default {
+  name: 'AppSider',
+  data() {
+    return {
+      collapsed: true,
+      menu: {
+        'menu_1' : {
+          icon: 'home',
+          title: '功能',
+          pageName: 'DemoFileOpenDir',
+          params: {},
+        },
+        'menu_2' : {
+          icon: 'profile',
+          title: '其它',
+          pageName: 'OtherIndex',
+          params: {},
+        }
+      }
+    };
+  },
+  created () {
+    console.log('AppSider created:');
+    //this.menuHandle({key: 'menu_1'})
+  },
+  mounted () {
+    console.log('AppSider mounted:');
+    this.menuHandle({key: 'menu_1'})
+  },
+  methods: {
+    menuHandle (item) {
+      console.log('AppSider methods:');
+      const linkInfo = this.menu[item.key]
+      this.$router.push({ name: linkInfo.pageName, params: linkInfo.params})
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+// 嵌套
+#app-layout-sider {
+  height: 100%;
+  .logo {
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .pic-logo {
+    height: 32px;
+    //background: rgba(139, 137, 137, 0.2);
+    margin: 10px;
+  }
+  .layout-sider {
+    border-top: 1px solid #e8e8e8;
+    border-right: 1px solid #e8e8e8;
+  }
+  .menu-item {
+    .ant-menu-item {
+      background-color: #fff;
+      margin-top: 0px;
+      margin-bottom: 0px;
+      padding: 0 0px !important;
+    }
+  }
+  .layout-content {
+    //background-color: #fff;
+  }
+}
+</style>

frontend/src/layouts/DemoMenu.vue

@@ -0,0 +1,84 @@
+<template>
+  <a-layout id="app-demo-menu">
+    <a-layout-sider
+      theme="light"
+      class="layout-sider"
+    >
+      <a-menu class="sub-menu-item" theme="light" mode="inline" :default-selected-keys="['menu_1']">
+        <a-menu-item v-for="(menuInfo, subIndex) in menu" :key="subIndex">
+          <router-link :to="{ name: menuInfo.pageName, params: menuInfo.params}">
+            <span>{{ menuInfo.title }}</span>
+          </router-link>
+        </a-menu-item>
+      </a-menu>
+    </a-layout-sider>
+    <a-layout>
+      <a-layout-content>
+        <router-view />
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      menu: {
+        'menu_1' : {
+          icon: 'profile',
+          title: '文件 - 上传文件',
+          pageName: 'DemoFileUploadFile',
+          params: {}
+        },
+        'menu_2' : {
+          icon: 'profile',
+          title: '文件 - 打开文件夹',
+          pageName: 'DemoFileOpenDir',
+          params: {}
+        },
+        'menu_3' : {
+          icon: 'profile',
+          title: '通信 - IPC',
+          pageName: 'DemoSocketIpc',
+          params: {}
+        },
+        'menu_4' : {
+          icon: 'profile',
+          title: '快捷键 - 注册',
+          pageName: 'DemoShortcutIndex',
+          params: {}
+        },
+        'menu_5' : {
+          icon: 'profile',
+          title: '软件 - 打开第三方软件',
+          pageName: 'DemoSoftwareOpen',
+          params: {}
+        },
+      }
+    };
+  },
+  created () {
+  },
+  mounted () {
+    this.menuHandle({key: 'menu_1'})
+  },
+  methods: {
+    menuHandle (item) {
+      const linkInfo = this.menu[item.key]
+      this.$router.push({ name: linkInfo.pageName, params: linkInfo.params})
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+// 嵌套
+#app-demo-menu {
+  height: 100%;
+  text-align: left;
+  .layout-sider {
+    border-top: 1px solid #e8e8e8;
+    border-right: 1px solid #e8e8e8;
+    background-color: #FAFAFA;
+  }
+}
+</style>

frontend/src/layouts/index.js

@@ -0,0 +1,7 @@
+import AppSider from '@/layouts/AppSider'
+import DemoMenu from '@/layouts/DemoMenu'
+
+export {
+    AppSider, 
+    DemoMenu
+}

frontend/src/views/Layout.vue

@@ -1,156 +0,0 @@
-<template>
-  <a-layout id="components-layout-demo-responsive">
-    <a-layout-sider
-      v-model="collapsed"
-      theme="light"
-      class="layout-sider"
-    >
-      <div class="logo"><img class="pic-logo" src="~@/assets/logo.png"></div>
-      <a-menu class="menu-item" theme="light" mode="inline" @click="menuHandle" :default-selected-keys="['menu_1']">
-        <a-menu-item :key="index" v-for="(menuInfo, index) in menu" :title="menuInfo.title">
-          <a-icon :type="menuInfo.icon" />
-        </a-menu-item>
-      </a-menu>
-    </a-layout-sider>
-    <a-layout>
-      <a-layout-sider
-        theme="light"
-        class="sub-layout-sider"
-      >
-        <a-menu class="sub-menu-item" theme="light" mode="inline" v-model="subMenuKey" :default-selected-keys="subMenuKey">
-          <a-menu-item :key="subIndex" v-for="(menuInfo, subIndex) in subMenu">
-          <router-link :to="{ name: menuInfo.pageName, params: menuInfo.params}">
-            <span>{{ menuInfo.title }}</span>
-          </router-link>
-          </a-menu-item>
-        </a-menu>
-      </a-layout-sider>
-      <a-layout-content :style="{padding: '10px', background: '#fff' }">
-        <!-- <div :style="{ padding: '10px', background: '#fff', minHeight: '560px' }">
-          <router-view />
-        </div> -->
-        <router-view />
-      </a-layout-content>
-    </a-layout>
-  </a-layout>
-</template>
-<script>
-export default {
-  name: 'Layout',
-  data() {
-    return {
-      collapsed: true,
-      menu: {
-        'menu_1' : {
-          icon: 'home',
-          title: ''
-        },
-        'menu_2' : {
-          icon: 'setting',
-          title: ''
-        },
-      },
-      menuKey: 'menu_1',
-      subMenuKey: ['subMenu_1'],
-      subMenu: {},
-      subMenuList: {
-        'menu_1' : {
-          'subMenu_1' : {
-            title: '上传文件到sm图床',
-            pageName: 'UploadFile',
-            params: {}
-          },
-          'subMenu_2' : {
-            title: '打开文件夹',
-            pageName: 'FileOpenDir',
-            params: {},
-          },
-          'subMenu_3' : {
-            title: '通信',
-            pageName: 'Ipc',
-            params: {},
-          },
-          'subMenu_4' : {
-            title: '快捷键',
-            pageName: 'Shortcut',
-            params: {},
-          },
-          'subMenu_5' : {
-            title: '调用其它软件',
-            pageName: 'OpenSoftware',
-            params: {},
-          }
-        },
-        'menu_2' : {
-          'subMenu_1' : {
-            title: '基础设置',
-            pageName: 'Setting',
-            params: {},
-          }
-        },
-      },
-      contentPage: ''
-    };
-  },
-  mounted () {
-    this.menuHandle({key: 'menu_1'})
-  },
-  methods: {
-    menuHandle (item) {
-      this.subMenu = this.subMenuList[item.key]
-      this.subMenuKey = ['subMenu_1']
-      const linkInfo = this.subMenu['subMenu_1']
-      this.$router.push({ name: linkInfo.pageName, params: linkInfo.params})
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-// 嵌套
-#components-layout-demo-responsive {
-  height: 100%;
-  .logo {
-    border-bottom: 1px solid #e8e8e8;
-  }
-  .pic-logo {
-    height: 32px;
-    //background: rgba(139, 137, 137, 0.2);
-    margin: 10px;
-  }
-  .layout-sider {
-    border-right: 1px solid #e8e8e8;
-  }
-  .menu-item {
-    .ant-menu-item {
-      background-color: #fff;
-      margin-top: 0px;
-      margin-bottom: 0px;
-    }
-  }
-  .sub-layout-sider {
-    background-color: #FAFAFA;
-  }
-  .sub-menu-item {
-    .ant-menu-item {
-      margin-top: 0px;
-      margin-bottom: 0px;
-    }
-    .ant-menu-item::after {
-      border-right: 3px solid #F2F2F2;
-    }
-    .ant-menu-item-selected {
-      background-color:#F2F2F2;
-      span {
-        color: #111;
-      }
-    }
-  }
-  .sub-menu-item.ant-menu {
-    background: #FAFAFA;
-  }
-  .sub-menu-item.ant-menu-inline {
-    border-right: 0px solid #FAFAFA;
-  }
-}
-</style>

frontend/src/views/other/Index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h3 :style="{ marginBottom: '16px' }">
+      待开发...
+    </h3>
+  </div>
+</template>
+<script>
+import { localApi } from '@/api/main'
+
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    test () {
+      const params = {}
+      localApi('openDir', params).then(res => {
+        if (res.code !== 0) {
+          return false
+        }
+      }).catch(err => {
+        console.log('err:', err)
+      })
+    },
+  }
+};
+</script>
+<style></style>