perf: optimizing css (#180)

- 移除不会生效、无效的片段
- 调整部分属性的书写顺序
- 移除不再使用的图片

src/App.vue

@@ -24,7 +24,7 @@ body,
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
-  background-color: #fff;
+  background-color: #ffffff;
 }
 
 ::-webkit-scrollbar-track {
@@ -35,47 +35,39 @@ body,
 ::-webkit-scrollbar-thumb {
   border-radius: 6px;
   background-color: rgba(144, 146, 152, 0.5);
-  transition: background-color 0.3s;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(144, 146, 152, 0.5);
-}
 /* CSS-hints */
 .CodeMirror-hints {
   position: absolute;
   z-index: 10;
-  overflow: hidden;
+  overflow-y: auto;
-  list-style: none;
-
   margin: 0;
   padding: 2px;
-
   border-radius: 4px;
-  background-color: #ffffff;
+  max-height: 20em;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
   min-width: 200px;
   font-size: 12px;
   font-family: monospace;
 
-  max-height: 20em;
-  overflow-y: auto;
   color: #333333;
+  background-color: #ffffff;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
 }
 
 .CodeMirror-hint {
-  margin: 0;
   margin-top: 10px;
   padding: 4px 6px;
   border-radius: 2px;
   white-space: pre;
-  color: black;
+  color: #000000;
   cursor: pointer;
-}
+
-.CodeMirror-hint:first-of-type {
+  &:first-of-type {
     margin-top: 0;
   }
-.CodeMirror-hint:hover {
+  &:hover {
     background: #f0f0f0;
   }
+}
 </style>

src/components/CodemirrorEditor/EditorHeader.vue

@@ -1,41 +1,6 @@
 <template>
-  <el-container class="top is-dark">
+  <el-container class="header-container is-dark">
-    <el-dialog title="发布" :visible.sync="form.dialogVisible">
+    <div class="dropdowns">
-      <div class="postInfo">
-        <el-form ref="form" :model="form" label-width="80px">
-          <el-form-item label="封面">
-            <el-input
-              v-model="form.thumb"
-              placeholder="自动提取第一张图"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="标题">
-            <el-input
-              v-model="form.title"
-              placeholder="自动提取第一个标题"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="描述">
-            <el-input
-              type="textarea"
-              :rows="4"
-              v-model="form.desc"
-              placeholder="自动提取第一个段落"
-            ></el-input>
-          </el-form-item>
-          <el-form-item>
-            <div class="info">
-              注：此功能由第三方浏览器插件支持，本平台不保证安全性。
-            </div>
-          </el-form-item>
-        </el-form>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="form.dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="post">确 定</el-button>
-      </span>
-    </el-dialog>
-    <div class="left-side">
       <el-dropdown>
         <span class="el-dropdown-link">
           文件<i class="el-icon-arrow-down el-icon--right"></i>
@@ -267,16 +232,48 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
-
-    <div class="right-side">
     <el-button plain size="medium" :type="btnType" @click="copy">
       复制
     </el-button>
     <el-button plain size="medium" :type="btnType" @click="prePost">
       发布
     </el-button>
-    </div>
 
+    <el-dialog title="发布" :visible.sync="form.dialogVisible">
+      <div class="postInfo">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="封面">
+            <el-input
+              v-model="form.thumb"
+              placeholder="自动提取第一张图"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="标题">
+            <el-input
+              v-model="form.title"
+              placeholder="自动提取第一个标题"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="描述">
+            <el-input
+              type="textarea"
+              :rows="4"
+              v-model="form.desc"
+              placeholder="自动提取第一个段落"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <div class="info">
+              注：此功能由第三方浏览器插件支持，本平台不保证安全性。
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="form.dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="post">确 定</el-button>
+      </span>
+    </el-dialog>
     <reset-dialog
       :show-reset-confirm="showResetConfirm"
       @confirm="confirmReset"
@@ -517,61 +514,15 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.editor__header {
+.header-container {
-  width: 100%;
-}
-
-.header__switch {
-  margin-left: 8px;
-}
-
-.mode__switch {
-  margin-left: 24px;
-  margin-right: 24px;
-  width: 24px;
-  height: 24px;
-  background: url('../../assets/images/night.png') no-repeat;
-  background-size: cover;
-  transition: all 0.3s;
-}
-
-.mode__switch_black {
-  background: url('../../assets/images/light.png') no-repeat;
-  background-size: cover;
-}
-
-.top {
-  height: 60px;
   padding: 10px 20px;
-  display: flex;
   align-items: center;
-  margin-right: 0;
 }
 
-.el-select {
+.dropdowns {
-  margin-right: 12px;
-}
-
-.left-side {
-  display: flex;
-  align-items: center;
   flex: 1;
 }
 
-.right-side {
-  display: flex;
-  align-items: center;
-}
-
-/*
-.preview table tr:nth-child(even){
-  background: rgb(250, 250, 250);
-}
- */
-.select-item-left {
-  float: left;
-}
-
 .select-item-right {
   float: right;
   color: #8492a6;

src/components/CodemirrorEditor/RightClickMenu.vue

@@ -90,14 +90,24 @@ export default {
   z-index: 9999;
 }
 
+.menu__group {
+  margin: 0;
+  padding: 6px 0;
+  border-bottom: 1px solid #eeeeee;
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+}
+
 .menu_item {
   list-style: none;
   box-sizing: border-box;
   padding: 4px 0 4px 24px;
   margin-top: 10px;
   min-width: 200px;
-  font-size: 12px;
   line-height: 20px;
+  font-size: 12px;
   color: #333333;
   cursor: pointer;
 
@@ -113,14 +123,4 @@ export default {
     width: 100%;
   }
 }
-
-.menu__group {
-  margin: 0;
-  padding: 6px 0;
-  border-bottom: 1px solid #eeeeee;
-
-  &:last-of-type {
-    border-bottom: none;
-  }
-}
 </style>