feat: remove babel

app/model/article.ts

@@ -4,32 +4,40 @@ import { JsonProperty } from '@hubcarl/json-typescript-mapper';
 
 export default class Article {
   @JsonProperty('id')
-  public id: string;
+  public id?: string;
   @JsonProperty('title')
-  public title: string | undefined;
+  public title?: string;
   @JsonProperty('summary')
-  public summary: string | undefined;
+  public summary?: string;
   @JsonProperty('categoryId')
-  public categoryId: number | undefined;
+  public categoryId?: number;
   @JsonProperty('tag')
-  public tag: string | undefined;
+  public tag?: string ;
   @JsonProperty('categoryId')
-  public authorId: number | undefined;
+  public authorId?: number;
   @JsonProperty('createTime')
-  public createTime: number | undefined;
+  public createTime?: number;
   @JsonProperty('hits')
-  public hits: number;
+  public hits?: number;
   @JsonProperty('url')
-  public url: string | undefined;
+  public url?: string;
   @JsonProperty('status')
-  public status: number | undefined;
+  public status?: number;
+  @JsonProperty('content')
+  public content?: string;
 
+  // constructor must be init everyone JsonProperty
   constructor() {
     this.id = '';
-    this.title = undefined;
-    this.summary = undefined;
-    this.tag = undefined;
+    this.title = '';
+    this.summary = '';
+    this.categoryId = -1;
+    this.tag = '';
+    this.authorId = -1;
+    this.url = '';
+    this.status = 0;
     this.hits = 0;
+    this.content = '';
     this.createTime = Date.now();
   }
 }

app/web/component/MarkdownEditor/index.ts

@@ -0,0 +1,53 @@
+import 'font-awesome/css/font-awesome.min.css';
+import 'simplemde/dist/simplemde.min.css';
+import SimpleMDE from 'simplemde';
+import Vue from 'vue';
+import { Component, Prop, Watch } from 'vue-property-decorator';
+
+@Component({
+  name: 'simplemde-md'
+})
+export default class MarkDownEditor extends Vue {
+  @Prop(String) id;
+  @Prop({ type: Boolean, default: false }) autofocus;
+  @Prop({ type: String, default: '' }) placeholder;
+  @Prop({ type: Number, default: 400 }) height;
+  @Prop({ type: Number, default: 10 }) zIndex;
+  @Prop({ type: Array }) toolbar;
+
+  simplemde: SimpleMDE = null;
+  hasChange: boolean = false;
+
+  // @Watch
+  // value(val) {
+  //   if (val === this.simplemde.value() && !this.hasChange) return
+  //   this.simplemde.value(val);
+  // }
+  mounted() {
+    this.simplemde = new SimpleMDE({
+      element: document.getElementById(this.id || 'markdown-editor-' + +new Date()),
+      autoDownloadFontAwesome: false,
+      autofocus: this.autofocus,
+      toolbar: this.toolbar,
+      spellChecker: false,
+      insertTexts: {
+        link: ['[', ']( )']
+      },
+      // hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
+      placeholder: this.placeholder
+    });
+    // if (this.value) {
+    //   this.simplemde.value(this.value)
+    // }
+    this.simplemde.codemirror.on('change', () => {
+      if (this.hasChange) {
+        this.hasChange = true;
+      }
+      this.$emit('input', this.simplemde.value());
+    });
+  }
+  destroyed() {
+    this.simplemde.toTextArea();
+    this.simplemde = null;
+  }
+}

app/web/component/MarkdownEditor/index.vue

@@ -5,79 +5,7 @@
   </div>
 </template>
 
-<script>
-import 'font-awesome/css/font-awesome.min.css'
-import 'simplemde/dist/simplemde.min.css'
-import SimpleMDE from 'simplemde'
-
-export default {
-  name: 'simplemde-md',
-  props: {
-    value: String,
-    id: {
-      type: String
-    },
-    autofocus: {
-      type: Boolean,
-      default: false
-    },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    height: {
-      type: Number,
-      default: 400
-    },
-    zIndex: {
-      type: Number,
-      default: 10
-    },
-    toolbar: {
-      type: Array
-    }
-  },
-  data() {
-    return {
-      simplemde: null,
-      hasChange: false
-    }
-  },
-  watch: {
-    value(val) {
-      if (val === this.simplemde.value() && !this.hasChange) return
-      this.simplemde.value(val)
-    }
-  },
-  mounted() {
-    this.simplemde = new SimpleMDE({
-      element: document.getElementById(this.id || 'markdown-editor-' + +new Date()),
-      autoDownloadFontAwesome: false,
-      autofocus: this.autofocus,
-      toolbar: this.toolbar,
-      spellChecker: false,
-      insertTexts: {
-        link: ['[', ']( )']
-      },
-      // hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
-      placeholder: this.placeholder
-    })
-    if (this.value) {
-      this.simplemde.value(this.value)
-    }
-    this.simplemde.codemirror.on('change', () => {
-      if (this.hasChange) {
-        this.hasChange = true
-      }
-      this.$emit('input', this.simplemde.value())
-    })
-  },
-  destroyed() {
-    this.simplemde.toTextArea()
-    this.simplemde = null
-  }
-}
-</script>
+<script lang="ts" src="./index.ts"></script>
 
 <style scoped>
 .simplemde-container>>>.CodeMirror {

app/web/page/admin/home/router/index.ts

@@ -23,6 +23,10 @@ export default function createRouter() {
         path: '/article/add',
         component: () => import('../view/write/index.vue')
       },
+      {
+        path: '/article/edit/:id',
+        component: () => import('../view/write/index.vue')
+      },
       {
         path: '/article/detail/:id',
         component: () => import('../view/detail/index.vue')

app/web/page/admin/home/view/detail/index.ts

@@ -14,4 +14,7 @@ export default class Detail extends Vue {
     const { id } = route.params;
     return store.dispatch('getArticle', { id });
   }
+  destroyed() {
+    this.$store.state.admin.article = null;
+   }
 }

app/web/page/admin/home/view/detail/index.vue

@@ -1,10 +1,17 @@
 <template>
-  <div style="font-size: 24px; text-align: center" v-if="article">
+  <div class="content" v-if="article">
     <h1>{{article.title}}</h1>
-    <iframe :src="article.url" frameborder="0" width="100%" height="600"></iframe>
+    <iframe v-if="article.url" :src="article.url" frameborder="0" width="100%" height="600"></iframe>
+    <div class="marktext" v-else v-html="article.content"></div>
   </div>
 </template>
 <style>
-
+  .content {
+    font-size: 24px; 
+    text-align: center
+  }
+  .content .marktext {
+    margin-top: 24px;
+  }
 </style>
 <script lang="ts" src="./index.ts"></script>

app/web/page/admin/home/view/list/index.ts

@@ -1,10 +1,7 @@
 import { Vue, Component, Emit } from 'vue-property-decorator';
 import {
-  State,
   Getter,
-  Action,
-  Mutation,
-  namespace
+  Action
 } from 'vuex-class';
 
 @Component
@@ -47,7 +44,11 @@ export default class List extends Vue {
   }
 
   write() {
-    this.$router.push('/article/add');
+    this.$router.push(`/article/add`);
+  }
+
+  edit(id) {
+    this.$router.push(`/article/edit/${id}`);
   }
 
   handleSelectionChange(val: number) {
@@ -67,7 +68,8 @@ export default class List extends Vue {
   }
 
   handleEdit(index: number, row: any) {
-    this.$message(`你点击了编辑操作 index:${index}, id:${row.id}`);
+    console.log(row);
+    this.edit(row.id);
   }
 
   handleDelete(index: number, row: any) {

app/web/page/admin/home/view/write/index.ts

@@ -0,0 +1,55 @@
+import Vue from 'vue';
+import { Getter, Action } from 'vuex-class';
+import { Component, Prop, Watch } from 'vue-property-decorator';
+import Article from '../../../../../../model/article';
+
+@Component({
+  components: {
+    MarkdownEditor: () => import('component/MarkdownEditor/index.vue')
+  }
+})
+export default class Write extends Vue {
+  @Getter('article') article?: Article;
+  @Action('saveArticle') saveArticle;
+  @Action('getArticle') getArticle;
+  text: string = '';
+
+  isShowEditor: boolean = false;
+
+  async submit(status) {
+    const showdown = await import('showdown');
+    const converter = new showdown.Converter();
+    const article = {
+      ...this.article,
+      status,
+      content : converter.makeHtml(this.text),
+    };
+    const result = await this.saveArticle(article);
+    if (result.status === 200 ) {
+      this.$message(`添加成功`);
+      this.article = {};
+    } else {
+      this.$message(`添加失败: ${JSON.stringify(result)}`);
+    }
+  }
+
+  @Watch('article')
+  onArticleChanged(val: string, oldVal: string) {
+    if (this.article) {
+      // need html to markdown
+      this.text = this.article.content || '';
+    }
+  }
+
+  mounted() {
+    this.isShowEditor = true;
+    const { id } = this.$route.params;
+    if (id) {
+      this.getArticle({ id });
+    }
+  }
+
+  destroyed() {
+    this.$store.state.admin.article = {};
+  }
+}