Merge remote-tracking branch 'origin/feature-table' into feature-rebuild

README.md

@@ -108,6 +108,12 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
           <sub>码云Gitee</sub>
         </a>
       </td>
+      <td align="center" style="width: 60px;">
+        <a href="https://mp.weixin.qq.com/s/CVqmcu_OGG8TQO4FViAQ3w">
+          <img src="https://imgkr.cn-bj.ufileos.com/5d78fb3e-1a3a-4769-9980-192e18321834.jpg" style="width: 40px;"><br>
+          <sub>好酸一柠檬</sub>
+        </a>
+      </td>
     </tr>
 </table>
 
@@ -115,6 +121,7 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 
 ## 示例文章
 
+- [阅读计划 | 传记、社科类](https://mp.weixin.qq.com/s/CVqmcu_OGG8TQO4FViAQ3w)
 - [一文多发神器--ArtiPub&OpenWrite](https://mp.weixin.qq.com/s/FpGIX9viQR6Z9iSCEPH86g)
 - [全网首发！GPU 驱动自升级原理详解](https://mp.weixin.qq.com/s/7UG24ZugfI5ZnhUpo8vfvQ)
 - [死磕 JavaScript 系列之原来你是对象(一)](https://mp.weixin.qq.com/s/oc5Z2t9ykbu_Dezjnw5mfQ)

src/components/CodemirrorEditor/insertForm.vue

@@ -1,75 +1,126 @@
 <template>
-    <el-dialog title="插入表格" class="insert__dialog" :visible="value" @close="$emit('input', false)">
-        <el-form class="insert__form" :model="config.form">
-            <el-form-item label="行数(表头不计入行数)">
-            <el-input v-model="config.form.rows"></el-input>
-            </el-form-item>
-            <el-form-item label="列数">
-            <el-input v-model="config.form.cols"></el-input>
-            </el-form-item>
-        </el-form>
+  <el-dialog
+    title="插入表格"
+    class="insert__dialog"
+    :visible="dialogFormVisible"
+    @close="$emit('close')"
+    border
+  >
+    <el-row class="tb-options" type="flex" align="middle" :gutter="10">
+      <el-col :span="6">
+        行：
+        <el-input-number
+          v-model="rowNum"
+          controls-position="right"
+          @change="handleChange($event,'row')"
+          :min="1"
+          :max="100"
+          size="small"
+        ></el-input-number>
+      </el-col>
+      <el-col :span="6">
+        列：
+        <el-input-number
+          v-model="colNum"
+          controls-position="right"
+          @change="handleChange($event,'col')"
+          :min="1"
+          :max="100"
+          size="small"
+        ></el-input-number>
+      </el-col>
+    </el-row>
+    <!--  -->
+    <table style="border-collapse: collapse">
+      <tr :class="{ 'head-style': row===1 }" v-for="row in rowNum+1" :key="row">
+        <td v-for="col in colNum" :key="col">
+          <el-input
+            align="center"
+            v-model="tableData[`k_${row-1}_${col-1}`]"
+            :placeholder="row===1?'表头':''"
+          />
+        </td>
+      </tr>
+    </table>
+    <!--  -->
     <div slot="footer" class="dialog-footer">
-            <el-button :type="btnType" plain @click="$emit('input', false)">取 消</el-button>
+      <el-button :type="btnType" plain @click="$emit('close')">取 消</el-button>
       <el-button :type="btnType" @click="insertTable" plain>确 定</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import config from '../../assets/scripts/config'
-import {mapState, mapMutations} from 'vuex';
-export default {
+    import config from "../../assets/scripts/config";
+    import {
+        mapState,
+        mapMutations
+    } from "vuex";
+    export default {
         props: {
-        value: {
+            dialogFormVisible: {
                 type: Boolean,
                 default: false
             }
         },
         data() {
             return {
-            config: config
-        }
+                config: config,
+                rowNum: 1,
+                colNum: 1,
+                tableData: {}
+            };
         },
         computed: {
             btnType() {
-            return !this.nightMode ? 'success' : 'default';
+                return !this.nightMode ? "success" : "default";
             },
             ...mapState({
-            nightMode: state=> state.nightMode,
-            editor: state=> state.editor
+                nightMode: state => state.nightMode,
+                editor: state => state.editor
             })
         },
         methods: {
             // 插入表格
             insertTable() {
-            const cursor = this.editor.getCursor()
-            const rows = parseInt(this.config.form.rows)
-            const cols = parseInt(this.config.form.cols)
-            if (isNaN(rows) || isNaN(cols) || rows < 1 || cols < 1) {
-                this.$message({
-                    showClose: true,
-                    message: '输入的行/列数无效，请重新输入',
-                    type: 'error'
-                })
-                return
-            }
+                const cursor = this.editor.getCursor();
+                const rows = this.rowNum;
+                const cols = this.colNum;
 
-            let table = ''
+                let table = "";
+                let currRow = [];
                 for (let i = 0; i < rows + 2; ++i) {
-                for (let j = 0; j < cols + 1; ++j) {
-                    table += (j === 0 ? '|' : (i !== 1 ? '     |' : ' --- |'))
+                    table += "|\t";
+                    currRow = [];
+                    for (let j = 0; j < cols; ++j) {
+                        const rowIdx = i > 1 ? i - 1 : i;
+                        i === 1 ? 
+                        currRow.push("---\t") :
+                        currRow.push(this.tableData[`k_${rowIdx}_${j}`] || "");
                     }
-                table += '\n'
+                    table += currRow.join("\t|\t");
+                    table += "\t|\n";
                 }
-
-            this.editor.replaceSelection(`\n${table}\n`, cursor)
-            this.$emit('input', false)
-            this.editorRefresh()
+                this.tableData = {};
+                this.rowNum = 1;
+                this.colNum = 1;
+                this.editor.replaceSelection(`\n${table}\n`, "end");
+                this.$emit("close");
+                this.editorRefresh();
             },
-        ...mapMutations(['editorRefresh'])
+            ...mapMutations(["editorRefresh"]),
+            handleChange(val, type) {}
         }
-}
+    };
+
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
+.tb-options {
+    margin-bottom: 20px;
+}
+
+.head-style .el-input__inner {
+    background-color: #f2f2f2;
+}
 </style>