feat(style): refine changelog style

one/build/changelog.js

@@ -1,7 +1,6 @@
 import { readFileSync } from 'fs'
 import cheerio from 'cheerio'
 import { render } from './page'
-
 const VERSION_RE = /^(\d+\.\d+\.\d+(?:-[a-z]+(?:\.\d+)?)?)(?:\s+"([^"]+)")?$/i
 function getVersion (title = '') {
   const [, version, codeName] = title.trim().match(VERSION_RE) || []
@@ -39,6 +38,25 @@ function getTags (comment) {
     .filter(tag => !!tag)
 }
 
+const EDIT_TYPE_RE = /^\[([+-^])\]/
+const EDIT_TYPE_MAP = {
+  '-': 'remove',
+  '+': 'add',
+  '^': 'modify'
+}
+function getEditType (text) {
+  const [, sign] = text.match(EDIT_TYPE_RE) || []
+  if (sign) {
+    return EDIT_TYPE_MAP[sign]
+  }
+
+  return null
+}
+
+function trim (text) {
+  return text.trim().replace(/^\n+|\n+$/g, '')
+}
+
 function extract (html) {
   const changelog = []
 
@@ -85,18 +103,27 @@ function extract (html) {
           .reduce((all, current) => all.concat(current), [])
 
         $change.contents().filter((_, el) => el.type === 'comment').remove()
+        $change.find('*').contents().filter((_, el) => el.type === 'comment').remove()
+
+        const $container = trim($change.html()).startsWith('<p>') ? $change.children('p').first() : $change
+
+        let html = trim($container.html())
+        const editType = getEditType($container.text())
+        html = html.replace(EDIT_TYPE_RE, '')
+
+        $container.html(html)
 
         versionLog.changeset.push({
           type,
           tags,
-          content: $change.html().replace(/^\n+|\n+$/g, '')
+          editType,
+          content: trim($change.html())
         })
       })
     })
 
     changelog.push(versionLog)
   })
-
   return changelog
 }
 

one/docs/changelog.vue

@@ -85,14 +85,21 @@
         minor: isMinor(version),
       }"
     >
-      {{ version }} <small>{{ codeName }}</small>
+      {{ version }}<small v-if="codeName">{{ codeName }}</small>
     </h2>
-    <ul>
+    <ul class="changeset">
       <li
         v-for="({ type, tags, content }, index) of changeset"
         :key="index"
-        v-html="content"
-      />
+        class="change"
+        :class="type"
+      >
+        <span
+          class="emoji"
+          :title="getTypeLabel(type)"
+        >{{ getTypeEmoji(type) }}</span>
+        <div v-html="content"/>
+      </li>
     </ul>
   </section>
   <section
@@ -117,6 +124,10 @@ const allTypes = [
   { label: '问题修复', value: 'bugfix', emoji: '🐞' },
   { label: '实验性功能', value: 'experimental', emoji: '🧪' }
 ]
+const typeMap = allTypes.reduce((map, { label, value, emoji }) => {
+  map[value] = { label, emoji }
+  return map
+}, {})
 
 const allVersions = changelog.map(({ version }) => ({ label: version, value: version }))
 const allTags = [
@@ -190,7 +201,8 @@ export default {
   watch: {
     compare (val) {
       if (!val) {
-        this.from = this.to = null
+        this.from = null
+        this.to = allVersions[0].value
       }
     }
   },
@@ -202,6 +214,12 @@ export default {
   methods: {
     isMajor,
     isMinor,
+    getTypeEmoji (type) {
+      return typeMap[type].emoji
+    },
+    getTypeLabel (type) {
+      return typeMap[type].label
+    },
     updateShrugger () {
       this.shrugger = getShrugger()
     }
@@ -231,6 +249,8 @@ export default {
     margin-bottom 0
 
 h2
+  display flex
+  align-items center
   font-size 20px
   margin 1.2em 0 0.6em
 
@@ -246,7 +266,30 @@ h2
       content "§"
 
   small
-    font-size 18px
+    font-size 14px
+
+    &::before
+      content "·"
+      font-size 20px
+      margin 0 8px
+
+.changeset
+  list-style-type none
+  padding-left 0
+
+.change
+  display flex
+
+  .emoji
+    flex none
+    margin-right 8px
+    cursor help
+
+  & >>> p
+    margin-top 0
+
+    &:only-child
+      margin 0
 
 .not-found
   display inline-flex