mod: editor styles

src/components/top-bar/KUNGalgameTopBar.vue

@@ -243,7 +243,7 @@ $navNumber: v-bind(navItemNum);
 /* 设置面板 */
 .settings-panel {
   /* 永远在其它页面之上 */
-  z-index: 9999;
+  z-index: 999;
 }
 
 @media (max-width: 1000px) {

src/components/wang-editor/Title.vue

@@ -51,7 +51,7 @@ const handelInput = () => {
   <div class="title">
     <input
       type="text"
-      placeholder="请输入话题的标题（40字以内）"
+      placeholder="标题"
       v-model="topicTitle"
       @input="handelInput"
       :maxlength="maxInputLength"
@@ -62,11 +62,13 @@ const handelInput = () => {
 <style lang="scss" scoped>
 /* 话题的发布标题 */
 .title {
+  padding: 10px;
   width: 100%;
 }
 
 /* 话题标题的输入框 */
 .title input {
+  background-color: var(--kungalgame-white-9);
   color: var(--kungalgame-font-color-2);
   /* 距离外轮廓的距离 */
   padding: 7px;
@@ -76,11 +78,7 @@ const handelInput = () => {
   /* 标题输入字体大小 */
   font-size: 40px;
   border: none;
-  margin-bottom: 10px;
+  /* 光标样式 */
-}
+  caret-shape: block;
-
-/* 标题输入框 focus 之后的样式 */
-.title input:focus {
-  box-shadow: 0px 0px 5px var(--kungalgame-blue-4);
 }
 </style>

src/components/wang-editor/WangEditor.vue

@@ -122,22 +122,33 @@ const handleChange = (editor: IDomEditor) => {
 <template>
   <!-- 编辑器 -->
   <div class="editor—wrapper">
+    <Title />
     <!-- 这里不能用 v-if，否则加载不出来 toolBar -->
     <Toolbar
-      class="toolbar-container"
+      class="toolbar"
       :editor="editorRef"
       :defaultConfig="toolbarConfig"
       :mode="$props.isShowAdvance ? 'default' : 'simple'"
       v-show="props.isShowToolbar"
     />
-    <Title />
+    <div class="hint hint1">
+      <span class="box1"></span>
+      <span class="filling"></span>
+      <span class="box2"></span>
+    </div>
     <Editor
+      class="wang-editor"
       :style="editorHeight"
       v-model="valueHtml"
       :defaultConfig="editorConfig"
       @onCreated="handleCreated"
       @onChange="handleChange"
     />
+    <div class="hint">
+      <span class="box3"></span>
+      <span class="filling"></span>
+      <span class="box4"></span>
+    </div>
     <span class="count">{{ textCount + ` ${$tm('edit.word')}` }}</span>
   </div>
 </template>
@@ -150,6 +161,68 @@ const handleChange = (editor: IDomEditor) => {
   width: 100%;
   margin: 0 auto;
   z-index: 9999;
+  background-color: var(--kungalgame-trans-white-5);
+  backdrop-filter: blur(5px);
+}
+
+.toolbar {
+  width: 100%;
+  z-index: 1007;
+  border-top: 1px solid var(--kungalgame-blue-1);
+  border-bottom: 1px solid var(--kungalgame-blue-1);
+  background-color: var(--kungalgame-trans-blue-0);
+  :deep(*) {
+    background-color: var(--kungalgame-trans-white-9);
+  }
+  /* 头部下方阴影 */
+  box-shadow: 0 2px 4px 0 var(--kungalgame-trans-blue-1);
+}
+
+.hint {
+  margin: 0 auto;
+  width: 100%;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  border-bottom: none;
+  border-top: none;
+  & > span {
+    width: 40px;
+    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;
+}
+
+.wang-editor {
+  width: 80%;
+  max-width: 1080px;
+  margin: 0 auto;
+  margin-bottom: 30px;
 }
 
 .count {
@@ -159,12 +232,16 @@ const handleChange = (editor: IDomEditor) => {
   align-items: center;
   justify-content: end;
   color: var(--kungalgame-font-color-0);
-  background-color: var(--kungalgame-white-9);
+  background-color: var(--kungalgame-trans-white-9);
 }
 
 @media (max-width: 700px) {
-  .toolbar-container {
+  .toolbar {
     display: none;
   }
+  .wang-editor {
+    margin: 0 auto;
+    width: 100%;
+  }
 }
 </style>

src/styles/editor/editor.scss

@@ -42,7 +42,7 @@ u {
 
   /* toolbar - css vars */
   --w-e-toolbar-color: var(--kungalgame-font-color-1);
-  --w-e-toolbar-bg-color: var(--kungalgame-trans-blue-0);
+  --w-e-toolbar-bg-color: var(--kungalgame-trans-white-2);
   --w-e-toolbar-active-color: var(--kungalgame-font-color-3);
   --w-e-toolbar-active-bg-color: var(--kungalgame-trans-blue-1);
   --w-e-toolbar-disabled-color: var(--kungalgame-red-4);

src/views/edit/Edit.vue

@@ -12,7 +12,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
       <!-- 编辑器 -->
       <WangEditor
         class="editor"
-        :height="400"
+        :height="500"
         :isShowToolbar="true"
         :isShowAdvance="true"
         :isShowTitle="true"
@@ -26,7 +26,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
       </div>
     </div>
     <!-- 版权 -->
-    <KUNGalgameFooter style="margin: 0 auto" />
+    <KUNGalgameFooter style="margin: 0 auto; padding-top: 20px" />
     <span style="margin: 0 auto; color: var(--kungalgame-font-color-3)"
       >Editor powered by wangEditor</span
     >
@@ -35,6 +35,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 
 <style lang="scss" scoped>
 .root {
+  margin-top: 20px;
   height: 100vh;
   min-height: 1200px;
   display: flex;
@@ -49,18 +50,20 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   margin: 0 auto;
   /* 容器的阴影 */
   box-shadow: var(--shadow);
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: var(--kungalgame-trans-white-5);
   color: var(--kungalgame-font-color-3);
   border: 1px solid var(--kungalgame-blue-1);
-  padding: 10px;
 }
 
 .content-footer {
+  padding: 10px;
   /* 距离内容区的距离 */
-  margin-top: 17px;
+  padding-top: 17px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  background-color: var(--kungalgame-trans-white-5);
+  backdrop-filter: blur(5px);
 }
 
 @media (max-width: 1000px) {