toollist

package-lock.json

@@ -13555,8 +13555,7 @@
       "version": "4.0.8",
       "resolved": "http://registry.npm.taobao.org/rx-lite/download/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "rx-lite-aggregates": {
       "version": "4.0.8",

src/views/system/ToolList.vue

@@ -1,10 +1,73 @@
 <template>
-  <div class="page-header-index-wide">Tool List</div>
+  <div class="page-header-index-wide">
+    <div class="card-container">
+      <a-row :gutter="8">
+        <a-col :sm="24" :md="12" :lg="8">
+          <a-card title="Markdown 导入" :bordered="false">
+            <span style="font-size:22px">Markdown 文档导入</span>
+            <a-button type="primary" style="float:right" @click="importMarkDown">导入</a-button>
+            <p>支持 Hexo/Jekyll 导入并解析元数据</p>
+          </a-card>
+        </a-col>
+        <a-col :sm="24" :md="12" :lg="8">
+          <a-card title="WordPress 导入" :bordered="false">
+            <span style="font-size:22px">WordPress 数据导入</span>
+            <a-button type="primary" style="float:right" @click="importWordPress">导入</a-button>
+            <p>尽请期待</p>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+    <a-modal title="Markdown 文档导入" v-model="ishow" @ok="sure">
+      <a-upload-dragger
+        name="file"
+        :multiple="true"
+        action="//jsonplaceholder.typicode.com/posts/"
+        @change="handleChange"
+      >
+        <p class="ant-upload-drag-icon">
+          <a-icon type="inbox"/>
+        </p>
+        <p class="ant-upload-text">拖拽或点击选择MarkDown文件到此处</p>
+      </a-upload-dragger>
+    </a-modal>
+  </div>
 </template>
 
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      ishow: false
+    }
+  },
+  methods: {
+    importMarkDown() {
+      this.ishow = true
+    },
+    sure() {
+      this.ishow = false
+    },
+    handleChange(info) {
+      const status = info.file.status
+      if (status !== 'uploading') {
+        console.log(info.file, info.fileList)
+      }
+      if (status === 'done') {
+        this.$message.success(`${info.file.name} file uploaded successfully.`)
+      } else if (status === 'error') {
+        this.$message.error(`${info.file.name} file upload failed.`)
+      }
+    },
+    importWordPress(){
+      this.$message.info('程序猿正在努力开发呢！');
+    }
+  }
+}
 </script>
 
 <style scoped>
+.card-container {
+  padding: 16px;
+}
 </style>