From 0e5e21512a773d30f071a73fcdd7803970291240 Mon Sep 17 00:00:00 2001
From: YangFong <yangfong2022@qq.com>
Date: Wed, 26 Feb 2025 08:43:55 +0800
Subject: [PATCH] style: optimize the color scheme (#539)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整暗色模式下元素配色，提升辨识度
- 增加边框，便于区分边界
- 移除最外层元素边距，使编辑区与浏览区直接贴边
---
 src/components/CodemirrorEditor/CssEditor.vue          |  2 +-
 src/components/CodemirrorEditor/EditorHeader/index.vue |  2 +-
 src/components/CodemirrorEditor/PostSlider.vue         | 10 +++++-----
 src/components/CodemirrorEditor/RightSlider.vue        |  4 ++--
 src/views/CodemirrorEditor.vue                         |  3 +--
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/CodemirrorEditor/CssEditor.vue b/src/components/CodemirrorEditor/CssEditor.vue
index 0422bbe40..f391b6fa2 100644
--- a/src/components/CodemirrorEditor/CssEditor.vue
+++ b/src/components/CodemirrorEditor/CssEditor.vue
@@ -104,7 +104,7 @@ function tabChanged(tabName: string | number) {
 
 <template>
   <transition enter-active-class="bounceInRight">
-    <div v-show="displayStore.isShowCssEditor" class="cssEditor-wrapper h-full flex flex-col border-l-1">
+    <div v-show="displayStore.isShowCssEditor" class="cssEditor-wrapper h-full flex flex-col border-l-2 border-gray/50">
       <Tabs
         v-model="store.cssContentConfig.active"
         @update:model-value="tabChanged"
diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index 793cb2825..9ced2af12 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -102,7 +102,7 @@ function copy() {
 </script>
 
 <template>
-  <header class="header-container h-15 flex items-center justify-between px-5">
+  <header class="header-container h-15 flex items-center justify-between px-5 dark:bg-[#191c20]">
     <div class="space-x-2 flex">
       <Menubar class="menubar">
         <FileDropdown />
diff --git a/src/components/CodemirrorEditor/PostSlider.vue b/src/components/CodemirrorEditor/PostSlider.vue
index 640d8c79b..dd9f6c7ed 100644
--- a/src/components/CodemirrorEditor/PostSlider.vue
+++ b/src/components/CodemirrorEditor/PostSlider.vue
@@ -57,14 +57,14 @@ function delPost() {
 
 <template>
   <div
-    class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-gray/40"
+    class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-[#191c20]"
     :class="{
       'w-0': !store.isOpenPostSlider,
       'w-50': store.isOpenPostSlider,
     }"
   >
     <nav
-      class="space-y-1 h-full overflow-auto p-2 transition-transform"
+      class="space-y-1 h-full overflow-auto border-r-2 border-gray/20 p-2 transition-transform"
       :class="{
         'translate-x-100': store.isOpenPostSlider,
         '-translate-x-full': !store.isOpenPostSlider,
@@ -93,10 +93,10 @@ function delPost() {
       </Dialog>
       <a
         v-for="(post, index) in store.posts" :key="post.title" href="#" :class="{
-          'bg-primary text-primary-foreground shadow-lg border-2 border-primary': store.currentPostIndex === index,
-          'dark:bg-primary-dark dark:text-primary-foreground-dark dark:border-primary-dark': store.currentPostIndex === index,
+          'bg-primary text-primary-foreground shadow-lg dark:border-1 border-primary': store.currentPostIndex === index,
+          'dark:bg-gray/30 dark:text-primary-foreground-dark dark:border-primary-dark': store.currentPostIndex === index,
         }"
-        class="hover:bg-primary/90 hover:text-primary-foreground dark:bg-muted dark:hover:bg-muted dark:hover:border-primary-dark h-8 w-full inline-flex items-center justify-start gap-2 whitespace-nowrap rounded px-2 text-sm transition-colors dark:text-white dark:hover:text-white"
+        class="hover:bg-primary/90 hover:text-primary-foreground dark:hover:border-primary-dark h-8 w-full inline-flex items-center justify-start gap-2 whitespace-nowrap rounded px-2 text-sm transition-colors dark:text-white dark:hover:bg-gray/20 dark:hover:text-white"
         @click="store.currentPostIndex = index"
       >
         <span class="line-clamp-1">{{ post.title }}</span>
diff --git a/src/components/CodemirrorEditor/RightSlider.vue b/src/components/CodemirrorEditor/RightSlider.vue
index a871c2752..a8d4853d8 100644
--- a/src/components/CodemirrorEditor/RightSlider.vue
+++ b/src/components/CodemirrorEditor/RightSlider.vue
@@ -40,9 +40,9 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
 
 <template>
   <div
-    class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-gray/40"
+    class="overflow-hidden border-l-2 border-gray/20 bg-gray/20 transition-width duration-300 dark:bg-[#191c20]"
     :class="{
-      'w-0': !store.isOpenRightSlider,
+      'w-0 border-l-0': !store.isOpenRightSlider,
       'w-100': store.isOpenRightSlider,
     }"
   >
diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue
index 3663f4b69..5976e0342 100644
--- a/src/views/CodemirrorEditor.vue
+++ b/src/views/CodemirrorEditor.vue
@@ -436,7 +436,7 @@ onMounted(() => {
         <CssEditor class="order-2 flex-1" />
         <RightSlider class="order-2" />
       </div>
-      <footer class="h-[30px] flex select-none items-center justify-end text-[12px]">
+      <footer class="h-[30px] flex select-none items-center justify-end px-4 text-[12px]">
         字数 {{ readingTime?.words }}， 阅读大约需 {{ Math.ceil(readingTime?.minutes ?? 0) }} 分钟
       </footer>
 
@@ -479,7 +479,6 @@ onMounted(() => {
 
 .container-main {
   overflow: hidden;
-  padding: 0 20px;
 }
 
 #output-wrapper {