样式修改

src/assets/styles/variable.scss

@@ -1,7 +1,7 @@
-$themeColor: #198CFE;
-$themeHoverColor: #47A3FE;
-$textColor: #41464b;
-$borderColor: #e5e7eb;
+$themeColor: #198cfe;
+$themeHoverColor: #47a3fe;
+$textColor: #131415;
+$borderColor: #dedede;
 $lightGray: #f9f9f9;
 
 $boxShadow:

src/views/Editor/CanvasTool/index.vue

@@ -372,7 +372,7 @@ const toggleNotesPanel = () => {
 <style lang="scss" scoped>
 .canvas-tool {
   position: relative;
-  border-bottom: 1px solid #dedede;
+  border-bottom: 1px solid $borderColor;
   background-color: #fff;
   display: flex;
   justify-content: space-between;
@@ -415,7 +415,7 @@ const toggleNotesPanel = () => {
     margin-right: 14px;
     width: 1px;
     height: calc(100% - 20px);
-    background-color: #dedede;
+    background-color: $borderColor;
   }
   .arrow-btn {
     margin-left: 6px;
@@ -423,7 +423,7 @@ const toggleNotesPanel = () => {
     align-items: center;
     justify-content: center;
     width: 88px;
-    height: 36px;
+    height: 32px;
     background: linear-gradient(312deg, #1b7af8 0%, #3cbbff 100%);
     border-radius: 6px;
     font-weight: 600;
@@ -431,6 +431,9 @@ const toggleNotesPanel = () => {
     color: #ffffff;
     line-height: 20px;
     cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+    }
     & > img {
       margin-right: 8px;
       width: 12px;

src/views/Editor/EditorHeader/index.vue

@@ -92,7 +92,7 @@ const setDialogForExport = (type: DialogForExportTypes) => {
 .editor-header {
   background-color: #fff;
   user-select: none;
-  border-bottom: 1px solid #dedede;
+  border-bottom: 1px solid $borderColor;
   display: flex;
   justify-content: space-between;
   padding: 0 24px;
@@ -124,7 +124,7 @@ const setDialogForExport = (type: DialogForExportTypes) => {
 .line {
   width: 1px;
   height: calc(100% - 26px);
-  background-color: #dedede;
+  background-color: $borderColor;
 }
 .title {
   margin-left: 16px;

src/views/Editor/Thumbnails/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div 
+  <div
     class="thumbnails"
     @mousedown="() => setThumbnailsFocus(true)"
     v-click-outside="() => setThumbnailsFocus(false)"
@@ -15,7 +15,7 @@
       </Popover>
     </div>
 
-    <Draggable 
+    <Draggable
       class="thumbnail-list"
       ref="thumbnailsRef"
       :modelValue="slides"
@@ -30,11 +30,11 @@
         <div class="thumbnail-container">
           <div class="section-title"
             :data-section-id="element?.sectionTag?.id || ''"
-            v-if="element.sectionTag || (hasSection && index === 0)" 
+            v-if="element.sectionTag || (hasSection && index === 0)"
             v-contextmenu="contextmenusSection"
           >
-            <input 
-              :id="`section-title-input-${element?.sectionTag?.id || 'default'}`" 
+            <input
+              :id="`section-title-input-${element?.sectionTag?.id || 'default'}`"
               type="text"
               :value="element?.sectionTag?.title || ''"
               placeholder="输入节名称"
@@ -58,7 +58,7 @@
           >
             <div class="label" :class="{ 'offset-left': index >= 99 }">{{ fillDigit(index + 1, 2) }}</div>
             <ThumbnailSlide class="thumbnail" :slide="element" :size="120" :visible="index < slidesLoadLimit" />
-  
+
             <div class="note-flag" v-if="element.notes && element.notes.length" @click="openNotesPanel()">{{ element.notes.length }}</div>
           </div>
         </div>
@@ -473,12 +473,13 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
   }
 }
 .page-number {
-  height: 40px;
-  font-size: 12px;
+  height: 50px;
   border-top: 1px solid $borderColor;
-  line-height: 40px;
-  text-align: center;
-  color: #666;
+  line-height: 50px;
+  padding-left: 24px;
+  font-weight: 400;
+  font-size: 12px;
+  color: #131415;
 }
 .section-title {
   height: 26px;
@@ -525,4 +526,4 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
     font-size: 12px;
   }
 }
-</style>
+</style>

src/views/Editor/index.vue

@@ -44,7 +44,7 @@ const mainStore = useMainStore()
 const { dialogForExport, showSelectPanel, showSearchPanel, showNotesPanel } = storeToRefs(mainStore)
 const closeExportDialog = () => mainStore.setDialogForExport("")
 
-const remarkHeight = ref(40)
+const remarkHeight = ref(50)
 
 useGlobalHotkey()
 usePasteEvent()
@@ -62,7 +62,7 @@ usePasteEvent()
   display: flex;
 }
 .layout-content-left {
-  width: 160px;
+  width: 260px;
   height: 100%;
   flex-shrink: 0;
 }
@@ -70,7 +70,7 @@ usePasteEvent()
   height: 65px;
 }
 .layout-content-center {
-  width: calc(100% - 160px - 260px);
+  width: calc(100% - 260px - 260px);
 }
 .layout-content-right {
   width: 260px;