refactor: miscellaneous code improvements and style updates

doocs · Aug 9, 2024 · cb588fa · cb588fa
1 parent e547228
commit cb588fa
Show file tree

Hide file tree

Showing 11 changed files with 127 additions and 203 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -3,18 +3,16 @@ import CodemirrorEditor from '@/views/CodemirrorEditor.vue'
 </script>
 
 <template>
-  <div id="app">
-    <CodemirrorEditor />
-  </div>
+  <CodemirrorEditor />
 </template>
 
 <style lang="less">
 // 仿 uniapp 外层全屏
 html,
 body,
 #app {
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   margin: 0;
   padding: 0;
 }

diff --git a/src/assets/less/app.less b/src/assets/less/app.less
@@ -4,6 +4,13 @@
   padding: 0;
 }
 
+html,
+body {
+  height: 100%;
+  font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+}
+
 input,
 button,
 textarea {
@@ -23,23 +30,15 @@ em {
   font-style: normal !important;
 }
 
-html,
-body {
+section {
   height: 100%;
-  font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue',
-    sans-serif;
 }
 
+
 .el-message__icon {
   display: none;
 }
 
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 .web-title {
   margin: 0 15px 0 5px;
 }
@@ -51,21 +50,11 @@ body {
 }
 
 #editor {
-  height: 100%;
   display: block;
-  border: none;
+  height: 100%;
   width: 100%;
   padding: 10px;
-}
-
-section {
-  height: 100%;
-}
-
-.main-body {
-  display: flex;
-  flex-direction: column;
-  padding-top: 0;
+  border: none;
 }
 
 .ctrl {
@@ -85,11 +74,6 @@ section {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
-.main-section {
-  display: flex;
-  height: 100%;
-}
-
 .hint {
   opacity: 0.6;
   margin: 20px 0;
@@ -104,7 +88,6 @@ section {
   box-sizing: border-box;
   outline: none;
   color: var(--el-text-color-regular);
-  background: var(--el-bg-color);
   box-shadow: var(--el-box-shadow);
 }
 

diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
@@ -64,10 +64,6 @@
       color: @nightLinkTextColor;
     }
 
-    .editor__header {
-      background-color: @nightHeaderColor;
-    }
-
     // .el-button {
     //   color: @nightWhiteColor;
     //   background-color: @nightCodeMirrorColor;

diff --git a/src/components/CodemirrorEditor/AboutDialog.vue b/src/components/CodemirrorEditor/AboutDialog.vue
@@ -18,7 +18,7 @@ function onRedirect(url) {
     title="关于"
     class="about__dialog"
     :model-value="props.visible"
-    width="30%"
+    width="380"
     center
     @close="$emit('close')"
   >
@@ -48,9 +48,3 @@ function onRedirect(url) {
     </template>
   </el-dialog>
 </template>
-
-<style lang="less" scoped>
-:deep(.el-dialog) {
-  min-width: 420px;
-}
-</style>
diff --git a/src/components/CodemirrorEditor/EditorHeader/PostInfoDialog.vue b/src/components/CodemirrorEditor/EditorHeader/PostInfoDialog.vue
@@ -1,46 +1,46 @@
-<script>
-export default {
-  name: `PostInfoDialog`,
-  props: {
-    form: {
-      type: Object,
-    },
+<script setup>
+const props = defineProps({
+  form: {
+    type: Object,
   },
-  emits: [`close`, `post`],
-}
+})
+defineEmits([`close`, `post`])
 </script>
 
 <template>
-  <el-dialog title="发布" :model-value="form.dialogVisible">
+  <el-dialog
+    title="发布"
+    :model-value="props.form.dialogVisible"
+    @close="$emit('close')"
+  >
     <el-alert
-      style="margin-bottom: 1em"
+      class="mb-4"
       title="注：此功能由第三方浏览器插件支持，本平台不保证安全性。"
       type="info"
       show-icon
     />
     <el-form
       class="postInfo"
-      label-position="right"
-      label-width="50px"
+      label-width="50"
       :model="form"
     >
       <el-form-item label="封面">
         <el-input
-          :model-value="form.thumb"
+          :model-value="props.form.thumb"
           placeholder="自动提取第一张图"
         />
       </el-form-item>
       <el-form-item label="标题">
         <el-input
-          :model-value="form.title"
+          :model-value="props.form.title"
           placeholder="自动提取第一个标题"
         />
       </el-form-item>
       <el-form-item label="描述">
         <el-input
           type="textarea"
           :rows="4"
-          :model-value="form.desc"
+          :model-value="props.form.desc"
           placeholder="自动提取第一个段落"
         />
       </el-form-item>

diff --git a/src/components/CodemirrorEditor/EditorHeader/ResetDialog.vue b/src/components/CodemirrorEditor/EditorHeader/ResetDialog.vue
@@ -1,25 +1,23 @@
-<script>
-export default {
-  props: {
-    showResetConfirm: {
-      type: Boolean,
-      default: false,
-    },
+<script setup>
+const props = defineProps({
+  showResetConfirm: {
+    type: Boolean,
+    default: false,
   },
-  emits: [`close`, `confirm`],
-}
+})
+defineEmits(`close`, `confirm`)
 </script>
 
 <template>
   <el-dialog
     title="提示"
     class="reset__dialog"
-    width="30%"
-    :model-value="showResetConfirm"
+    width="380"
+    :model-value="props.showResetConfirm"
     center
     @close="$emit('close')"
   >
-    <div style="text-align: center">
+    <div class="text-center">
       此操作将丢失本地自定义样式，是否继续?
     </div>
     <template #footer>
@@ -32,9 +30,3 @@ export default {
     </template>
   </el-dialog>
 </template>
-
-<style lang="less" scoped>
-:deep(.el-dialog) {
-  min-width: 440px;
-}
-</style>
diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -223,7 +223,7 @@ export default {
         }
 
         // 如果是暗黑模式，复制之前需要先切换到白天模式
-        const isDark = this.nightMode;
+        const isDark = this.nightMode
         if (isDark) {
           this.themeChanged()
         }
@@ -332,7 +332,7 @@ export default {
 </script>
 
 <template>
-  <el-container class="is-dark header-container">
+  <div class="header-container">
     <el-space class="dropdowns flex-auto" size="large">
       <el-dropdown>
         <span class="el-dropdown-link">
@@ -481,7 +481,7 @@ export default {
                     @change="colorChanged"
                   />
                 </template>
-                <div class="flex w-full">
+                <div class="w-full flex">
                   <el-icon class="opacity-0">
                     <ElIconCheck />
                   </el-icon>
@@ -533,13 +533,15 @@ export default {
       @confirm="confirmReset"
       @close="cancelReset"
     />
-  </el-container>
+  </div>
 </template>
 
 <style lang="less" scoped>
 .header-container {
-  padding: 10px 20px;
+  display: flex;
   align-items: center;
+  height: 100%;
+  padding: 0 20px;
 }
 
 .el-dropdown-link {
@@ -548,25 +550,6 @@ export default {
   cursor: pointer;
 }
 
-.padding-left-3 {
-  padding-left: 3em;
-}
-
-// 添加边距影响了 divided 行的移入效果，此处做一个兼容处理
-.el-dropdown-menu__item--divided.padding-left-3 {
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 3em;
-    height: 6px;
-    background: white;
-  }
-}
-
 .format-list {
   width: 250px;
 }
@@ -578,12 +561,4 @@ export default {
     color: #666;
   }
 }
-
-// .md-dropdown-item&:extend(.flex) {
-.md-dropdown-item {
-  // .flex;
-  // .leading-8;
-
-  line-height: 20em;
-}
 </style>