From 31604380921e6ecb3be3eddca652140fa9bb2306 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Wed, 6 Sep 2023 23:08:59 +0800
Subject: [PATCH] feat: editor theme

---
 .vscode/settings.json                         |  2 +
 .../quill-editor/EditorSettingsMenu.vue       |  7 +-
 src/components/quill-editor/QuillEditor.vue   | 94 +++++++------------
 src/styles/editor/editor.snow.scss            | 89 ++++++++++--------
 4 files changed, 89 insertions(+), 103 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e6768f66..672061e5 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -46,6 +46,8 @@
     "vueup",
     "weixin",
     "ymgal",
+    "Yuki",
+    "Yuuki",
     "yuyu"
   ],
   "i18n-ally.localesPaths": ["src/language"],
diff --git a/src/components/quill-editor/EditorSettingsMenu.vue b/src/components/quill-editor/EditorSettingsMenu.vue
index 309a7938..631d4f7d 100644
--- a/src/components/quill-editor/EditorSettingsMenu.vue
+++ b/src/components/quill-editor/EditorSettingsMenu.vue
@@ -14,7 +14,7 @@ import { storeToRefs } from 'pinia'
 
 // 使用编辑界面的 store
 const settingsStore = useKUNGalgameEditStore()
-const { isShowAdvance } = storeToRefs(settingsStore)
+const { mode } = storeToRefs(settingsStore)
 
 const { editorHeight } = storeToRefs(useKUNGalgameEditStore())
 
@@ -26,9 +26,6 @@ defineProps<{
 const isRefreshPage = ref(false)
 
 // 点击高级选项时提醒用户刷新页面
-watch(isShowAdvance, () => {
-  isRefreshPage.value = !isRefreshPage.value
-})
 
 const handleRefreshPage = () => location.reload()
 </script>
@@ -61,7 +58,7 @@ const handleRefreshPage = () => location.reload()
       <div class="editor-advance-title">
         <div class="editor-advance">
           <Transition mode="out-in" name="slide-up">
-            <span v-if="!isRefreshPage"> 高级编辑模式 </span>
+            <span v-if="!isRefreshPage"> 编辑器模式 </span>
             <span
               @click="handleRefreshPage"
               class="refresh"
diff --git a/src/components/quill-editor/QuillEditor.vue b/src/components/quill-editor/QuillEditor.vue
index 9e2ef168..dee91fc7 100644
--- a/src/components/quill-editor/QuillEditor.vue
+++ b/src/components/quill-editor/QuillEditor.vue
@@ -100,12 +100,6 @@ const handleTextChange = () => {
     <!-- 话题 title -->
     <Title v-if="isShowTitle" />
 
-    <div class="hint hint1" v-if="isShowSettings">
-      <span class="box1"></span>
-      <span class="filling"></span>
-      <span class="box2"></span>
-    </div>
-
     <!-- 编辑器主体 -->
     <QuillEditor
       ref="editorRef"
@@ -113,19 +107,13 @@ const handleTextChange = () => {
       :content="valueHtml"
       :style="editorHeightStyle"
       :theme="theme"
-      :toolbar="mode"
+      toolbar="full"
       :options="editorOptions"
       @textChange="handleTextChange"
       @ready="onEditorReady"
       @click.prevent
     />
 
-    <div class="hint" v-if="isShowSettings">
-      <span class="box3"></span>
-      <span class="filling"></span>
-      <span class="box4"></span>
-    </div>
-
     <!-- 编辑器 footer -->
     <EditorFooter
       :textCount="textCount"
@@ -143,65 +131,53 @@ const handleTextChange = () => {
 
 /* 工具栏的样式 */
 :deep(.ql-toolbar) {
-  border: none;
+  border-top: 1px solid var(--kungalgame-blue-1);
+  border-bottom: 1px solid var(--kungalgame-blue-1);
+  background-color: var(--kungalgame-trans-blue-0);
+  /* 头部下方阴影 */
+  box-shadow: 0 2px 4px 0 var(--kungalgame-trans-blue-1);
 }
 
 /* 编辑器体的样式 */
 :deep(.ql-container) {
+  transition: all 0.2s;
   width: 80%;
+  max-width: 1080px;
   border: none;
   margin: 0 auto;
-  margin-top: 40px;
   font-size: 17px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+  &::before {
+    content: '∟';
+    position: absolute;
+    font-size: 40px;
+    transform: translateX(-20px) translateY(-20px) rotate(90deg);
+    color: var(--kungalgame-blue-2);
+  }
+  &::after {
+    content: '∟';
+    position: absolute;
+    right: 0;
+    font-size: 40px;
+    transform: translateX(20px) translateY(-20px) rotate(-90deg);
+    color: var(--kungalgame-blue-2);
+  }
   .ql-editor {
     padding: 0;
     &::before {
       left: 0;
     }
+    &::after {
+      content: '♡ Yuki Yuki';
+      font-size: 22px;
+      position: absolute;
+      bottom: 0;
+      transform: translateX(-20px) translateY(27px);
+      color: var(--kungalgame-trans-white-5);
+      text-shadow: 1px 1px 1px var(--kungalgame-blue-2);
+      font-style: oblique;
+    }
   }
 }
-
-/* 提示线 */
-.hint {
-  margin: 0 auto;
-  width: 100%;
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  border-bottom: none;
-  border-top: none;
-  & > span {
-    width: 30px;
-    height: 100%;
-    border: 1.5px solid var(--kungalgame-blue-2);
-  }
-  .filling {
-    border: none;
-    max-width: 1080px;
-    width: 80%;
-  }
-  .box1 {
-    border-top: none;
-    border-left: none;
-  }
-  .box2 {
-    border-top: none;
-    border-right: none;
-  }
-  .box3 {
-    border-bottom: none;
-    border-left: none;
-  }
-  .box4 {
-    border-bottom: none;
-    border-right: none;
-  }
-}
-
-.hint1 {
-  margin-top: 10px;
-  position: absolute;
-  width: 80%;
-  top: 200px;
-}
 </style>
diff --git a/src/styles/editor/editor.snow.scss b/src/styles/editor/editor.snow.scss
index b5f37880..9e4f5398 100644
--- a/src/styles/editor/editor.snow.scss
+++ b/src/styles/editor/editor.snow.scss
@@ -1,7 +1,7 @@
 .ql-container {
   box-sizing: border-box;
   font-family: Helvetica, Arial, sans-serif;
-  font-size: 13px;
+  font-size: 17px;
   height: 100%;
   margin: 0px;
   position: relative;
@@ -75,7 +75,7 @@
 }
 .ql-editor ul[data-checked='true'] > li::before,
 .ql-editor ul[data-checked='false'] > li::before {
-  color: #777;
+  color: var(--kungalgame-font-color-0);
   cursor: pointer;
   pointer-events: all;
 }
@@ -380,8 +380,9 @@
 .ql-editor .ql-align-right {
   text-align: right;
 }
+/* placeholder 的颜色 */
 .ql-editor.ql-blank::before {
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--kungalgame-font-color-0);
   content: attr(data-placeholder);
   font-style: italic;
   left: 15px;
@@ -429,7 +430,7 @@
 .ql-snow .ql-toolbar .ql-picker-label:hover,
 .ql-snow.ql-toolbar .ql-picker-item:hover,
 .ql-snow .ql-toolbar .ql-picker-item:hover {
-  background-color: #f3f4f6;
+  background-color: var(--kungalgame-trans-blue-1);
 }
 .ql-snow.ql-toolbar button.ql-active,
 .ql-snow .ql-toolbar button.ql-active,
@@ -437,8 +438,8 @@
 .ql-snow .ql-toolbar .ql-picker-label.ql-active,
 .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-  background-color: #dbeafe;
-  color: #2563eb;
+  background-color: var(--kungalgame-blue-0);
+  color: var(--kungalgame-blue-4);
 }
 .ql-snow.ql-toolbar button.ql-active .ql-fill,
 .ql-snow .ql-toolbar button.ql-active .ql-fill,
@@ -452,7 +453,7 @@
 .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
 .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
-  fill: #2563eb;
+  fill: var(--kungalgame-blue-4);
 }
 .ql-snow.ql-toolbar button.ql-active .ql-stroke,
 .ql-snow .ql-toolbar button.ql-active .ql-stroke,
@@ -466,24 +467,25 @@
 .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
 .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-  stroke: #2563eb;
+  stroke: var(--kungalgame-blue-4);
 }
+/* 未知属性，貌似和鼠标有关 */
 @media (pointer: coarse) {
   .ql-snow.ql-toolbar button:hover:not(.ql-active),
   .ql-snow .ql-toolbar button:hover:not(.ql-active) {
-    color: #4b5563;
+    color: var(--kungalgame-blue-4);
   }
   .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
   .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
   .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
   .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
-    fill: #4b5563;
+    fill: var(--kungalgame-blue-4);
   }
   .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
   .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
   .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
   .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
-    stroke: #4b5563;
+    stroke: var(--kungalgame-blue-4);
   }
 }
 .ql-snow {
@@ -519,22 +521,23 @@
   content: '';
   display: table;
 }
+/* toolbar 图标的颜色 */
 .ql-snow .ql-stroke {
   fill: none;
-  stroke: #4b5563;
+  stroke: var(--kungalgame-font-color-1);
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 2;
 }
 .ql-snow .ql-stroke-miter {
   fill: none;
-  stroke: #4b5563;
+  stroke: var(--kungalgame-font-color-1);
   stroke-miterlimit: 10;
   stroke-width: 2;
 }
 .ql-snow .ql-fill,
 .ql-snow .ql-stroke.ql-fill {
-  fill: #4b5563;
+  fill: var(--kungalgame-blue-4);
 }
 .ql-snow .ql-empty {
   fill: none;
@@ -579,15 +582,17 @@
 .ql-snow .ql-editor a {
   text-decoration: underline;
 }
+
+/* 引用的颜色 */
 .ql-snow .ql-editor blockquote {
-  border-left: 4px solid #ccc;
+  border-left: 4px solid var(--kungalgame-blue-2);
+  background-color: var(--kungalgame-trans-blue-0);
   margin-bottom: 5px;
   margin-top: 5px;
   padding-left: 16px;
 }
 .ql-snow .ql-editor code,
 .ql-snow .ql-editor pre {
-  background-color: #f0f0f0;
   border-radius: 3px;
 }
 .ql-snow .ql-editor pre {
@@ -600,19 +605,21 @@
   font-size: 85%;
   padding: 2px 4px;
 }
+/* 代码块颜色 */
 .ql-snow .ql-editor pre.ql-syntax {
-  background-color: #23241f;
-  color: #f8f8f2;
+  background-color: var(--kungalgame-trans-blue-0);
+  border: 1px solid var(--kungalgame-blue-4);
   overflow: visible;
 }
 .ql-snow .ql-editor img {
   max-width: 100%;
 }
+/* 展开列表的颜色 */
 .ql-snow .ql-picker {
-  color: #4b5563;
+  color: var(--kungalgame-blue-4);
   display: inline-block;
   float: left;
-  font-size: 14px;
+  font-size: 17px;
   font-weight: 500;
   height: 24px;
   position: relative;
@@ -634,7 +641,7 @@
   line-height: 22px;
 }
 .ql-snow .ql-picker-options {
-  background-color: #fff;
+  background-color: var(--kungalgame-trans-white-2);
   display: none;
   min-width: 100%;
   position: absolute;
@@ -646,14 +653,14 @@
   padding: 5px 8px;
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-label {
-  color: #d1d5db;
+  color: var(--kungalgame-blue-4);
   z-index: 2;
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
-  fill: #d1d5db;
+  fill: var(--kungalgame-blue-1);
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
-  stroke: #d1d5db;
+  stroke: var(--kungalgame-blue-4);
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-options {
   display: block;
@@ -820,13 +827,13 @@
   font-size: 32px;
 }
 .ql-snow .ql-color-picker.ql-background .ql-picker-item {
-  background-color: #fff;
+  background-color: var(--kungalgame-trans-white-2);
 }
 .ql-snow .ql-color-picker.ql-color .ql-picker-item {
-  background-color: #000;
+  background-color: var(--kungalgame-trans-white-2);
 }
 .ql-toolbar.ql-snow {
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--kungalgame-blue-1);
   box-sizing: border-box;
   font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
   padding: 8px;
@@ -839,26 +846,29 @@
 }
 .ql-toolbar.ql-snow .ql-picker-options {
   border: 1px solid transparent;
-  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
+  box-shadow: var(--shadow);
 }
+/* 选中列表的样式 */
 .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
-  border-color: #d1d5db;
+  background-color: var(--kungalgame-trans-blue-1);
 }
+/* 选中列表的展开选项样式 */
 .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
-  border-color: #d1d5db;
+  border-color: var(--kungalgame-blue-1);
 }
+/* 选中颜色的边框颜色 */
 .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
 .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
-  border-color: #000;
+  border-color: var(--kungalgame-blue-4);
 }
 .ql-toolbar.ql-snow + .ql-container.ql-snow {
   border-top: 0px;
 }
 .ql-snow .ql-tooltip {
-  background-color: #fff;
-  border: 1px solid #d1d5db;
-  box-shadow: 0px 0px 5px #d1d5db;
-  color: #4b5563;
+  background-color: var(--kungalgame-trans-white-2);
+  border: 1px solid var(--kungalgame-blue-1);
+  box-shadow: var(--shadow);
+  color: var(--kungalgame-font-color-1);
   padding: 5px 12px;
   white-space: nowrap;
 }
@@ -869,7 +879,8 @@
 }
 .ql-snow .ql-tooltip input[type='text'] {
   display: none;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--kungalgame-blue-1);
+  background-color: var(--kungalgame-trans-white-9);
   font-size: 13px;
   height: 26px;
   margin: 0px;
@@ -884,7 +895,7 @@
   vertical-align: top;
 }
 .ql-snow .ql-tooltip a.ql-action::after {
-  border-right: 1px solid #d1d5db;
+  border-right: 1px solid var(--kungalgame-blue-1);
   content: 'Edit';
   margin-left: 16px;
   padding-right: 8px;
@@ -918,8 +929,8 @@
   content: 'Enter video:';
 }
 .ql-snow a {
-  color: #2563eb;
+  color: var(--kungalgame-blue-4);
 }
 .ql-container.ql-snow {
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--kungalgame-blue-1);
 }