feat: update index style

assets/scripts/editor.js

@@ -27,9 +27,9 @@ let app = new Vue({
         { label: '16px', value: '16px', desc: '稍大' },
       ],
       colorOption: [
-        { label: '橘红', value: 'rgba(255, 95, 46, 0.9)', author: '#FF5F2E' },
+        { label: '橘红', value: 'rgba(255, 95, 46, 0.9)', hex: '#FF5F2E' },
-        { label: '淡绿', value: 'rgba(66, 185, 131, 0.9)', author: '#42B983'},
+        { label: '淡绿', value: 'rgba(66, 185, 131, 0.9)', hex: '#42B983'},
-        { label: '暗青', value: 'rgba(0, 139, 139, 0.9)', author: '#008B8B'}
+        { label: '暗青', value: 'rgba(0, 139, 139, 0.9)', hex: '#008B8B'}
       ],
       aboutDialogVisible: false
     };

assets/scripts/themes/default-theme.js

@@ -8,6 +8,7 @@ let default_theme = {
         'margin': '1em 8px'
     },
     block: {
+        // 一级标题样式
         h1: {
             'font-size': '1.2em',
             'text-align': 'center',
@@ -17,6 +18,8 @@ let default_theme = {
             'padding': '0 1em',
             'border-bottom': '2px solid rgba(255, 95, 46, 0.9)'
         },
+
+        // 二级标题样式
         h2: {
             'font-size': '1.1em',
             'text-align': 'center',
@@ -27,6 +30,8 @@ let default_theme = {
             'background': 'rgba(255, 95, 46, 0.9)',
             'color': '#fff'
         },
+
+        // 三级标题样式
         h3: {
             'font-weight': 'bold',
             'font-size': '1.1em',
@@ -35,15 +40,21 @@ let default_theme = {
             'padding-left': '8px',
             'border-left': '3px solid rgba(255, 95, 46, 0.9)'
         },
+
+        // 四级标题样式
         h4: {
             'font-weight': 'bold',
             'font-size': '1em',
             'margin': '2em 8px 0.5em',
         },
+
+        // 段落样式
         p: {
             'margin': '1.5em 8px',
             'letter-spacing': '0.1em'
         },
+
+        // 引用样式
         blockquote: {
             'font-style': 'normal',
             'border-left': 'none',
@@ -118,6 +129,8 @@ let default_theme = {
             'color': '#576b95',
             'text-decoration': 'none',
         },
+
+        // 字体加粗样式
         strong: {
             'color': 'rgba(255, 95, 46, 0.9)',
             'font-weight': 'bold',
@@ -145,4 +158,3 @@ let default_theme = {
         }
     }
 };
-

index.html

@@ -33,14 +33,14 @@
       <el-header class="top">
         <el-form size="mini" class="ctrl" :inline=true>
           <el-form-item label="编辑器主题">
-            <el-select v-model="currentEditorTheme" size="mini" placeholder="选择字体" @change="editorThemeChanged">
+            <el-select v-model="currentEditorTheme" size="mini" placeholder="选择编辑器主题" clearable @change="editorThemeChanged">
               <el-option v-for="editorTheme in editorThemes" :key="editorTheme.value" :label="editorTheme.label"
                 :value="editorTheme.value">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="字体">
-            <el-select v-model="currentFont" size="mini" placeholder="选择字体" @change="fontChanged">
+            <el-select v-model="currentFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
               <el-option v-for="font in builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
                 :label="font.label" :value="font.value">
                 <span class="select-item-left">{{ font.label }}</span>
@@ -49,7 +49,7 @@
             </el-select>
           </el-form-item>
           <el-form-item label="字号">
-            <el-select v-model="currentSize" size="mini" placeholder="选择段落字体大小" @change="sizeChanged">
+            <el-select v-model="currentSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged">
               <el-option v-for="size in sizeOption" :key="size.value" :label="size.label" :value="size.value">
                 <span class="select-item-left">{{ size.label }}</span>
                 <span class="select-item-right">{{ size.desc }}</span>
@@ -57,10 +57,10 @@
             </el-select>
           </el-form-item>
           <el-form-item label="颜色">
-            <el-select v-model="currentColor" size="mini" placeholder="选择颜色" @change="colorChanged">
+            <el-select v-model="currentColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged">
               <el-option v-for="color in colorOption" :key="color.value" :label="color.label" :value="color.value">
                 <span class="select-item-left">{{ color.label }}</span>
-                <span class="select-item-right">{{ color.author }}</span>
+                <span class="select-item-right">{{ color.hex }}</span>
               </el-option>
             </el-select>
           </el-form-item>