fix: review comment

doocs · Sep 14, 2024 · 322ab5a · 322ab5a
1 parent d254ef1
commit 322ab5a
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 106 deletions.
diff --git a/src/assets/less/app.less b/src/assets/less/app.less
@@ -71,7 +71,6 @@ section {
   justify-content: center;
   padding: 0;
   overflow-y: scroll;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 .hint {
@@ -87,8 +86,6 @@ section {
   font-size: 14px;
   box-sizing: border-box;
   outline: none;
-  color: var(--el-text-color-regular);
-  box-shadow: var(--el-box-shadow);
 }
 
 .preview table {

diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
@@ -1,20 +1,13 @@
-@nightBgColor: #333333;
-@nightPreviewColor: #1e1e1e;
-@nightHeaderColor: #3c3c3c;
-@nightCodeMirrorColor: #1e1e1e;
+@nightPreviewColor: #191919;
+@nightCodeMirrorColor: #191919;
 @nightActiveCodeMirrorColor: gray;
 @nightFontColor: gray;
 @nightLinkColor: #8e9eb9;
 @nightLinkTextColor: #84868b;
-@nightWhiteColor: #f0f0f0;
-@nightButtonBg: #1e1e1e;
-@nightButtonHoverColor: #84868b;
 @nightLineColor: #84868b;
 
 .dark {
   .container {
-    background-color: @nightBgColor;
-
     .CodeMirror {
       caret-color: @nightFontColor;
       color: @nightFontColor;
@@ -69,7 +62,6 @@
 .CodeMirror {
   padding-bottom: 0;
   height: 100% !important;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   font-size: 14px;
   font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue',
     sans-serif !important;

diff --git a/src/components/CodemirrorEditor/CssEditor.vue b/src/components/CodemirrorEditor/CssEditor.vue
@@ -67,7 +67,7 @@ function handleTabsEdit(targetName, action) {
 
 <template>
   <transition enter-active-class="bounceInRight">
-    <el-col v-show="store.isShowCssEditor" :span="8" class="cssEditor-wrapper order-1 h-full flex flex-col">
+    <el-col v-show="store.isShowCssEditor" :span="8" class="cssEditor-wrapper order-1 h-full flex flex-col border-l-1">
       <el-tabs
         v-model="store.cssContentConfig.active"
         type="border-card"

diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -35,6 +35,7 @@ import {
   MenubarItem,
   MenubarMenu,
   MenubarSeparator,
+  MenubarShortcut,
   MenubarTrigger,
 } from '@/components/ui/menubar'
 
@@ -155,7 +156,7 @@ function copy() {
 </script>
 
 <template>
-  <div class="header-container">
+  <header class="header-container h-15 flex items-center px-5">
     <Menubar class="menubar mr-auto">
       <FileDropdown />
 
@@ -169,11 +170,11 @@ function copy() {
           >
             <el-icon class="mr-2 h-4 w-4" />
             {{ label }}
-            <MenubarSeparator>
+            <MenubarShortcut>
               <kbd v-for="item in kbd" :key="item" class="mx-1 bg-gray-2 dark:bg-stone-9">
                 {{ item }}
               </kbd>
-            </MenubarSeparator>
+            </MenubarShortcut>
           </MenubarItem>
           <MenubarSeparator />
           <MenubarItem @click="citeStatusChanged()">
@@ -428,17 +429,10 @@ function copy() {
     </Button>
 
     <PostInfo />
-  </div>
+  </header>
 </template>
 
 <style lang="less" scoped>
-.header-container {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding: 0 20px;
-}
-
 .menubar {
   user-select: none;
 }

diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue
@@ -370,88 +370,82 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="container" class="container">
-    <el-container>
-      <el-header class="editor__header">
-        <EditorHeader
-          @add-format="addFormat"
-          @format-content="formatContent"
-          @start-copy="startCopy"
-          @end-copy="endCopy"
-        />
-      </el-header>
-      <el-main class="container-main">
-        <el-row class="container-main-section">
-          <el-col
-            ref="codeMirrorWrapper"
-            :span="isShowCssEditor ? 8 : 12"
-            class="codeMirror-wrapper"
-            :class="{
-              'order-1': !store.isEditOnLeft,
-            }"
-          >
-            <ContextMenu>
-              <ContextMenuTrigger>
-                <textarea
-                  id="editor"
-                  type="textarea"
-                  placeholder="Your markdown text here."
-                />
-              </ContextMenuTrigger>
-              <ContextMenuContent class="w-64">
-                <ContextMenuItem inset @click="toggleShowUploadImgDialog()">
-                  上传图片
-                </ContextMenuItem>
-                <ContextMenuItem inset @click="toggleShowInsertFormDialog()">
-                  插入表格
-                </ContextMenuItem>
-                <ContextMenuItem inset @click="resetStyleConfirm()">
-                  恢复默认样式
-                </ContextMenuItem>
-                <ContextMenuSeparator />
-                <ContextMenuItem inset @click="importMarkdownContent()">
-                  导入 .md 文档
-                </ContextMenuItem>
-                <ContextMenuItem inset @click="exportEditorContent2MD()">
-                  导出 .md 文档
-                </ContextMenuItem>
-                <ContextMenuItem inset @click="exportEditorContent2HTML()">
-                  导出 .html
-                </ContextMenuItem>
-                <ContextMenuItem inset @click="formatContent()">
-                  格式化
-                  <ContextMenuShortcut>{{ altSign }} + {{ shiftSign }} + F</ContextMenuShortcut>
-                </ContextMenuItem>
-              </ContextMenuContent>
-            </ContextMenu>
-          </el-col>
-          <el-col
-            id="preview"
-            ref="preview"
-            :span="isShowCssEditor ? 8 : 12"
-            class="preview-wrapper"
-          >
-            <div id="output-wrapper" :class="{ output_night: !backLight }">
-              <div class="preview">
-                <section id="output" v-html="output" />
-                <div v-if="isCoping" class="loading-mask">
-                  <div class="loading-mask-box">
-                    <div class="loading__img" />
-                    <span>正在生成</span>
-                  </div>
+  <div ref="container" class="container flex flex-col">
+    <EditorHeader
+      @add-format="addFormat"
+      @format-content="formatContent"
+      @start-copy="startCopy"
+      @end-copy="endCopy"
+    />
+    <main class="container-main flex-1">
+      <el-row class="container-main-section h-full border-1">
+        <el-col
+          ref="codeMirrorWrapper"
+          :span="isShowCssEditor ? 8 : 12"
+          class="codeMirror-wrapper"
+          :class="{
+            'order-1': !store.isEditOnLeft,
+          }"
+        >
+          <ContextMenu>
+            <ContextMenuTrigger>
+              <textarea
+                id="editor"
+                type="textarea"
+                placeholder="Your markdown text here."
+              />
+            </ContextMenuTrigger>
+            <ContextMenuContent class="w-64">
+              <ContextMenuItem inset @click="toggleShowUploadImgDialog()">
+                上传图片
+              </ContextMenuItem>
+              <ContextMenuItem inset @click="toggleShowInsertFormDialog()">
+                插入表格
+              </ContextMenuItem>
+              <ContextMenuItem inset @click="resetStyleConfirm()">
+                恢复默认样式
+              </ContextMenuItem>
+              <ContextMenuSeparator />
+              <ContextMenuItem inset @click="importMarkdownContent()">
+                导入 .md 文档
+              </ContextMenuItem>
+              <ContextMenuItem inset @click="exportEditorContent2MD()">
+                导出 .md 文档
+              </ContextMenuItem>
+              <ContextMenuItem inset @click="exportEditorContent2HTML()">
+                导出 .html
+              </ContextMenuItem>
+              <ContextMenuItem inset @click="formatContent()">
+                格式化
+                <ContextMenuShortcut>{{ altSign }} + {{ shiftSign }} + F</ContextMenuShortcut>
+              </ContextMenuItem>
+            </ContextMenuContent>
+          </ContextMenu>
+        </el-col>
+        <el-col
+          id="preview"
+          ref="preview"
+          :span="isShowCssEditor ? 8 : 12"
+          class="preview-wrapper p-5"
+        >
+          <div id="output-wrapper" :class="{ output_night: !backLight }">
+            <div class="preview border shadow-xl">
+              <section id="output" v-html="output" />
+              <div v-if="isCoping" class="loading-mask">
+                <div class="loading-mask-box">
+                  <div class="loading__img" />
+                  <span>正在生成</span>
                 </div>
               </div>
             </div>
-          </el-col>
-          <CssEditor />
-        </el-row>
-      </el-main>
-    </el-container>
+          </div>
+        </el-col>
+        <CssEditor />
+      </el-row>
+    </main>
 
     <UploadImgDialog
-      @before-upload="beforeUpload"
       @upload-image="uploadImage"
-      @uploaded="uploaded"
     />
 
     <InsertFormDialog />
@@ -466,20 +460,17 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .container {
-  height: 100%;
+  height: 100vh;
   min-width: 100%;
   padding: 0;
 }
 
 .container-main {
+  overflow: hidden;
   padding: 20px;
   padding-top: 0;
 }
 
-.container-main-section {
-  height: 100%;
-}
-
 #output-wrapper {
   position: relative;
   user-select: text;