样式修改

frontend/src/App.vue

@@ -9,27 +9,12 @@ export default {
   name: 'App',
   components: {},
   data() {
-    return {
-      current: ['mail'],
-      openKeys: ['sub1']
-    };
+    return {};
   },
-  watch: {
-    openKeys(val) {
-      console.log('openKeys', val);
-    },
-  },
-  methods: {
-    handleClick(e) {
-      console.log('click', e);
-    },
-    titleClick(e) {
-      console.log('titleClick', e);
-    },
-  }
+  watch: {},
+  methods: {}
 }
 </script>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

frontend/src/layouts/AppSider.vue

@@ -32,7 +32,7 @@ export default {
         'menu_1' : {
           icon: 'home',
           title: '功能',
-          pageName: 'DemoFileOpenDir',
+          pageName: 'DemoFileUploadFile',
           params: {},
         },
         'menu_2' : {
@@ -44,17 +44,12 @@ export default {
       }
     };
   },
-  created () {
-    console.log('AppSider created:');
-    //this.menuHandle({key: 'menu_1'})
-  },
+  created () {},
   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})
     },

frontend/src/views/demo/file/OpenDir.vue

@@ -1,16 +1,21 @@
 <template>
-  <div>
-    <h3 :style="{ marginBottom: '16px' }">
-      demo1 打开文件夹实现
-    </h3>
-    <a-list bordered :data-source="data">
-      <a-list-item @click="openDirectry(item.id)" slot="renderItem" slot-scope="item">
-        {{ item.content }}
-        <a-button type="link">
-          打开
-        </a-button>
-      </a-list-item>
-    </a-list>
+  <div id="app-demo-open-file">
+    <div class="one-block-1">
+      <span>
+        打开文件夹
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-list :grid="{ gutter: 16, column: 4 }" :data-source="data">
+        <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>
+    </div>
   </div>
 </template>
 <script>
@@ -43,7 +48,6 @@ export default {
   },
   methods: {
     openDirectry (id) {
-      console.log('id:', id)
       const params = {
         'id': id
       }
@@ -58,4 +62,17 @@ export default {
   }
 };
 </script>
-<style></style>
+<style lang="less" scoped>
+#app-demo-open-file {
+  padding: 0px 10px;
+  text-align: center;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>

frontend/src/views/demo/file/UploadFile.vue

@@ -1,46 +1,41 @@
 <template>
-  <div>
-    <h3 :style="{ marginBottom: '16px' }">
-      demo2 上传文件到sm图床实现
-    </h3>
-    <!-- dev调试时，action参数：请填写你本地完整的api地址，如：http://localhost:7068/api/v1/example/uploadFile -->
-    <a-upload-dragger
+  <div id="app-demo-file-upload">
+    <div class="one-block-1">
+      <span>
+        上传文件到sm图床
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <!-- dev调试时，action参数：请填写你本地完整的api地址，如：http://localhost:7068/api/v1/example/uploadFile -->
+      <a-upload-dragger
         name="file"
         :multiple="true"
         :action="action_url"
         @change="handleChange"
-    >
+      >
         <p class="ant-upload-drag-icon">
-        <a-icon type="inbox" />
+          <a-icon type="inbox" />
         </p>
         <p class="ant-upload-text">
-        Click or drag file to this area to upload
+          Click or drag file to this area to upload
         </p>
         <p class="ant-upload-hint">
-        Support for a single or bulk upload. Strictly prohibit from uploading company data or other
-        band files
+          Support for a single or bulk upload. Strictly prohibit from uploading company data or other
+          band files
         </p>
-    </a-upload-dragger>
-    <!-- <a-card hoverable style="width: 240px">
-      <img
-        slot="cover"
-        alt="example"
-        src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
-      />
-
-    </a-card> -->
-    <p/>
-    <a-list v-if="image_info.length !== 0" size="small" bordered :data-source="image_info">
-      <a-list-item style="text-align:left;" slot="renderItem" slot-scope="item">
-        {{ item.id }}.&nbsp;{{ item.imageUrlText }}:&nbsp;
-        <a :href="item.url" target="_blank">{{ item.url }}</a>
-      </a-list-item>
-    </a-list>
+      </a-upload-dragger>
+    </div>
+    <div class="one-block-2">
+      <a-list v-if="image_info.length !== 0" size="small" bordered :data-source="image_info">
+        <a-list-item slot="renderItem" slot-scope="item" style="text-align:left;">
+          {{ item.id }}.&nbsp;{{ item.imageUrlText }}:&nbsp;
+          <a :href="item.url" target="_blank">{{ item.url }}</a>
+        </a-list-item>
+      </a-list>
+    </div>  
   </div>
 </template>
 <script>
-//import { uploadFile } from '@/api/main'
-
 export default {
   data() {
     return {
@@ -77,4 +72,17 @@ export default {
   }
 };
 </script>
-<style></style>
+<style lang="less" scoped>
+#app-demo-file-upload {
+  padding: 0px 10px;
+  text-align: center;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>

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

@@ -1,34 +1,38 @@
 <template>
-  <div>
-    <h3 :style="{ marginBottom: '16px' }">
-      demo4 快捷键
-    </h3>
-    <a-row :gutter="[16,16]">
-      <a-col :span="24">
-        窗口最小化
-        <a-form @submit="handleSubmit" :form="form">
-          <a-form-item>
-            <hot-key-input
-              style="width: 100%;"
-              :hotkey.sync="hotKeyObj.keys"
-              :verify="handleHotkeyVerify"
-              :max="1"
-              type="lowser"
-              :reset="true"
-              :shake="false"
-              :range="null"
-              placeholder="快捷键">
-            </hot-key-input>
-          </a-form-item>
-          <a-form-item
-            :wrapperCol="{ span: 24 }"
-            style="text-align: center"
-          >
-            <a-button htmlType="submit" type="primary">保存</a-button>
-          </a-form-item>
-        </a-form>  
-      </a-col>
-    </a-row>
+  <div id="app-demo-shortcut">
+    <div class="one-block-1">
+      <span>
+        快捷键
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-row :gutter="[16,16]">
+        <a-col :span="24">
+          1. 窗口最小化
+          <a-form :form="form" @submit="handleSubmit">
+            <a-form-item>
+              <hot-key-input
+                style="width: 100%;"
+                :hotkey.sync="hotKeyObj.keys"
+                :verify="handleHotkeyVerify"
+                :max="1"
+                type="lowser"
+                :reset="true"
+                :shake="false"
+                :range="null"
+                placeholder="快捷键">
+              </hot-key-input>
+            </a-form-item>
+            <a-form-item
+              :wrapperCol="{ span: 24 }"
+              style="text-align: center"
+            >
+              <a-button htmlType="submit" type="primary">保存</a-button>
+            </a-form-item>
+          </a-form>  
+        </a-col>
+      </a-row>
+    </div>
   </div>
 </template>
 <script>
@@ -79,4 +83,17 @@ export default {
   }
 };
 </script>
-<style></style>
+<style lang="less" scoped>
+#app-demo-shortcut {
+  padding: 0px 10px;
+  text-align: center;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>

frontend/src/views/demo/socket/Ipc.vue

@@ -1,11 +1,12 @@
 <template>
-  <div>
-    <div>
-      <h3 :style="{ marginBottom: '16px' }">
-        demo3-1 渲染进程与主进程IPC通信
-      </h3>
+  <div id="app-demo-socket-ipc">
+    <div class="one-block-1">
+      <span>
+        渲染进程与主进程IPC通信
+      </span>
+    </div>  
+    <div class="one-block-2">
       <a-list bordered>
-        <!-- <a-button @click="helloHandle">打招呼</a-button> -->
         <a-input-search v-model="content" @search="helloHandle">
           <a-button slot="enterButton">
             send
@@ -13,10 +14,12 @@
         </a-input-search>
       </a-list>
     </div>
-    <div style="margin-top: 20px;">
-      <h3 :style="{ marginBottom: '16px' }">
-        demo3-2 主进程API执行网页函数
-      </h3>
+    <div class="one-block-1">
+      <span>
+        主进程API执行网页函数
+      </span>
+    </div>  
+    <div class="one-block-2">
       <a-list bordered>
         <a-input-search v-model="content2" @search="executeJSHandle">
           <a-button slot="enterButton">
@@ -56,4 +59,17 @@ export default {
   }
 }
 </script>
-<style></style>
+<style lang="less" scoped>
+#app-demo-socket-ipc {
+  padding: 0px 10px;
+  text-align: center;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>

frontend/src/views/demo/software/Open.vue

@@ -1,17 +1,22 @@
 <template>
-  <div>
-    <h3 :style="{ marginBottom: '16px' }">
-      demo5 调用其它软件（exe、bash等可执行程序）
-    </h3>
-    注：请先将【powershell.exe】复制到【electron-egg/build/extraResources】目录中
-    <a-list bordered :data-source="data">
-      <a-list-item @click="openSoft(item.id)" slot="renderItem" slot-scope="item">
-        {{ item.content }}
-        <a-button type="link">
-          执行
-        </a-button>
-      </a-list-item>
-    </a-list>
+  <div id="app-demo-software-open">
+    <div class="one-block-1">
+      <span>
+        调用其它软件（exe、bash等可执行程序）
+      </span>
+      <p/>
+      注：请先将【powershell.exe】复制到【electron-egg/build/extraResources】目录中
+    </div>  
+    <div class="one-block-2">
+      <a-list bordered :data-source="data">
+        <a-list-item slot="renderItem" slot-scope="item" @click="openSoft(item.id)">
+          {{ item.content }}
+          <a-button type="link">
+            执行
+          </a-button>
+        </a-list-item>
+      </a-list>
+    </div>
   </div>
 </template>
 <script>
@@ -32,7 +37,6 @@ export default {
   },
   methods: {
     openSoft (id) {
-      console.log('id:', id);
 			localApi('openSoftware', {}).then(res => {
 				if (res.code !== 0) {
 					this.$message.info(res.msg)
@@ -45,4 +49,17 @@ export default {
   }
 };
 </script>
-<style></style>
+<style lang="less" scoped>
+#app-demo-software-open {
+  padding: 0px 10px;
+  text-align: center;
+  width: 100%;
+  .one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+  }
+  .one-block-2 {
+    padding-top: 10px;
+  }
+}
+</style>