「update」调整界面样式

bingoogolapple · Jul 13, 2017 · a839749 · a839749
1 parent 708389c
commit a839749
Show file tree

Hide file tree

Showing 22 changed files with 621 additions and 390 deletions.
diff --git a/index.html b/index.html
@@ -7,8 +7,6 @@
   <link href="./static/img/favicon.ico" rel="icon" type="image/x-icon"/>
   <link href="./static/img/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
   <link href="./static/img/favicon.ico" rel="bookmark" type="image/x-icon"/>
-
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 </head>
 <body>
 <div id="app"></div>

diff --git a/package.json b/package.json
@@ -11,9 +11,13 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "dependencies": {
-    "axios": "^0.16.1",
+    "axios": "^0.16.2",
+    "element-ui": "^1.3.7",
+    "highlight.js": "^9.12.0",
     "lodash": "^4.17.4",
-    "vue": "^2.3.3",
+    "marked": "^0.3.6",
+    "moment": "^2.18.1",
+    "vue": "^2.3.4",
     "vue-router": "^2.3.1",
     "vuex": "^2.3.1"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -1,30 +1,17 @@
 <template>
-  <div class="app">
-    <toolbar></toolbar>
-    <labels-list></labels-list>
-    <issues-list></issues-list>
-    <issue></issue>
+  <div>
+    <toolbar/>
+    <router-view/>
   </div>
 </template>
-
-<style>
-  html, body, .app {
-    height: 100%;
-  }
+<style lang="scss" scoped>
 </style>
-
 <script>
   import Toolbar from './components/Toolbar'
-  import LabelsList from './components/LabelsList.vue'
-  import IssuesList from './components/IssuesList.vue'
-  import Issue from './components/Issue.vue'
 
   export default {
     components: {
-      Toolbar,
-      LabelsList,
-      IssuesList,
-      Issue
+      Toolbar
     }
   }
 </script>
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
@@ -1,49 +1,31 @@
 <template>
-  <div class="panel panel-default">
-    <div class="panel-body" v-html="renderedMarkdown"></div>
-  </div>
+  <el-card>
+    <div slot="header">
+      {{$moment(comment.created_at).format('YYYY-MM-DD HH:mm')}}
+    </div>
+    <div v-html="renderedMarkdown"></div>
+  </el-card>
 </template>
 
 <script>
-  import { mapGetters } from 'vuex'
-
   export default {
     data: function () {
       return {
         renderedMarkdown: ''
       }
     },
     props: ['comment'],
-    watch: {
-      comment: function (comment) {
-        this.fetchMarkdown()
-      }
-    },
-    computed: {
-      ...mapGetters([
-        'gitHubUsername'
-      ])
-    },
     methods: {
-      fetchMarkdown: function () {
+      renderMarkdown: function () {
         this.renderedMarkdown = ''
         if (this.comment.body) {
-          this.$http.post('https://api.github.com/markdown', {
-            'text': this.comment.body,
-            'mode': 'gfm',
-            'context': this.gitHubUsername + '/' + this.gitHubUsername + '.github.io'
-          }).then(response => {
-            console.log('renderedMarkdown', response.data)
-            this.renderedMarkdown = response.data
-          }).catch(response => {
-            console.log(response.data)
-          })
+          this.renderedMarkdown = this.$marked(this.comment.body)
         }
       }
     },
     mounted: function () {
       this.$nextTick(function () {
-        this.fetchMarkdown()
+        this.renderMarkdown()
       })
     }
   }

diff --git a/src/components/Issue.vue b/src/components/Issue.vue
diff --git a/src/components/IssuesList.vue b/src/components/IssuesList.vue