From 4c0b0294308179727ae00928d83a793478ba2c09 Mon Sep 17 00:00:00 2001
From: YangQi <yangfong2022@qq.com>
Date: Tue, 9 Aug 2022 20:13:40 +0800
Subject: [PATCH] perf: optimizing css (#180)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除不会生效、无效的片段
- 调整部分属性的书写顺序
- 移除不再使用的图片
---
 src/App.vue                                   |  34 ++---
 src/assets/images/light.png                   | Bin 2429 -> 0 bytes
 src/assets/images/night.png                   | Bin 2433 -> 0 bytes
 .../CodemirrorEditor/EditorHeader.vue         | 139 ++++++------------
 .../CodemirrorEditor/RightClickMenu.vue       |  22 +--
 5 files changed, 69 insertions(+), 126 deletions(-)
 delete mode 100644 src/assets/images/light.png
 delete mode 100644 src/assets/images/night.png

diff --git a/src/App.vue b/src/App.vue
index 0789046..9421389 100644
--- a/src/App.vue
+++ b/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;
-  list-style: none;
-
+  overflow-y: auto;
   margin: 0;
   padding: 2px;
-
   border-radius: 4px;
-  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);
+  max-height: 20em;
   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 {
-  margin-top: 0;
-}
-.CodeMirror-hint:hover {
-  background: #f0f0f0;
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+  &:hover {
+    background: #f0f0f0;
+  }
 }
 </style>
diff --git a/src/assets/images/light.png b/src/assets/images/light.png
deleted file mode 100644
index 844c253e11c4eabe29f35c2a44148e9a49fec78f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2429
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
Z^7p;||ABcNHS7QYEb(?`^`|e!{0q1ORbK!A

diff --git a/src/assets/images/night.png b/src/assets/images/night.png
deleted file mode 100644
index 534c8c4558701c1060f3c66abd0c2ac6af3eac59..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2433
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

diff --git a/src/components/CodemirrorEditor/EditorHeader.vue b/src/components/CodemirrorEditor/EditorHeader.vue
index 3fddbfc..1ad807f 100644
--- a/src/components/CodemirrorEditor/EditorHeader.vue
+++ b/src/components/CodemirrorEditor/EditorHeader.vue
@@ -1,41 +1,6 @@
 <template>
-  <el-container class="top is-dark">
-    <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>
-    <div class="left-side">
+  <el-container class="header-container is-dark">
+    <div class="dropdowns">
       <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>
+    <el-button plain size="medium" :type="btnType" @click="copy">
+      复制
+    </el-button>
+    <el-button plain size="medium" :type="btnType" @click="prePost">
+      发布
+    </el-button>
 
-    <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 {
-  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;
+.header-container {
   padding: 10px 20px;
-  display: flex;
   align-items: center;
-  margin-right: 0;
 }
 
-.el-select {
-  margin-right: 12px;
-}
-
-.left-side {
-  display: flex;
-  align-items: center;
+.dropdowns {
   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;
diff --git a/src/components/CodemirrorEditor/RightClickMenu.vue b/src/components/CodemirrorEditor/RightClickMenu.vue
index 2aa85e9..e105fbc 100644
--- a/src/components/CodemirrorEditor/RightClickMenu.vue
+++ b/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>