From d1d470570544695a0662efaa8aaf135ea2077824 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 29 Apr 2024 15:59:34 +0800
Subject: [PATCH] refactor: improve editor ui (#5828)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.15.x

#### What this PR does / why we need it:

优化编辑器的部分 UI。

1. 优化顶部工具栏的样式。
2. 统一格式刷和清除格式的图标。

before:

<img width="1001" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/4d3f2e9a-a79d-429e-aaa4-70313f61da6c">

after:

<img width="1021" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/676ce83b-da87-4c5b-bc63-1405106827f8">

#### Does this PR introduce a user-facing change?

```release-note
优化编辑器的部分 UI。
```
---
 ui/packages/editor/src/components/EditorBubbleMenu.vue |  6 +++---
 ui/packages/editor/src/components/EditorHeader.vue     | 10 +++++-----
 .../src/components/common/ColorPickerDropdown.vue      |  2 +-
 .../editor/src/components/toolbar/ToolbarItem.vue      | 10 +++++-----
 .../editor/src/components/toolbar/ToolbarSubItem.vue   |  6 +++---
 .../editor/src/extensions/clear-format/index.ts        |  6 +++---
 .../editor/src/extensions/format-brush/index.ts        |  4 ++--
 7 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/ui/packages/editor/src/components/EditorBubbleMenu.vue b/ui/packages/editor/src/components/EditorBubbleMenu.vue
index 16af6dbba..83a8d736d 100644
--- a/ui/packages/editor/src/components/EditorBubbleMenu.vue
+++ b/ui/packages/editor/src/components/EditorBubbleMenu.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import type { Editor, AnyExtension } from "@/tiptap/vue-3";
+import type { AnyExtension, Editor } from "@/tiptap/vue-3";
 import BubbleMenu from "@/components/bubble/BubbleMenu.vue";
 import type { NodeBubbleMenu } from "@/types";
 import BubbleItem from "@/components/bubble/BubbleItem.vue";
-import type { EditorView, EditorState } from "@/tiptap/pm";
+import type { EditorState, EditorView } from "@/tiptap/pm";
 
 const props = defineProps({
   editor: {
@@ -71,7 +71,7 @@ const shouldShow = (
     :default-animation="bubbleMenu.defaultAnimation"
   >
     <div
-      class="bubble-menu bg-white flex items-center rounded-md p-1 border drop-shadow space-x-0.5"
+      class="bubble-menu bg-white flex items-center rounded-md p-1 border drop-shadow space-x-1"
     >
       <template v-if="bubbleMenu.items">
         <template
diff --git a/ui/packages/editor/src/components/EditorHeader.vue b/ui/packages/editor/src/components/EditorHeader.vue
index 45f79795d..49c14da40 100644
--- a/ui/packages/editor/src/components/EditorHeader.vue
+++ b/ui/packages/editor/src/components/EditorHeader.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Menu as VMenu, Dropdown as VDropdown } from "floating-vue";
-import { Editor, type AnyExtension } from "@/tiptap/vue-3";
+import { Dropdown as VDropdown, Menu as VMenu } from "floating-vue";
+import { type AnyExtension, Editor } from "@/tiptap/vue-3";
 import MdiPlusCircle from "~icons/mdi/plus-circle";
 import type { ToolbarItem, ToolboxItem } from "@/types";
 
@@ -59,11 +59,11 @@ function getToolboxItemsFromExtensions() {
 </script>
 <template>
   <div
-    class="editor-header flex items-center py-1 space-x-0.5 justify-start px-1 overflow-auto sm:!justify-center border-b drop-shadow-sm bg-white"
+    class="editor-header flex items-center py-1 space-x-1 justify-start px-1 overflow-auto sm:!justify-center border-b drop-shadow-sm bg-white"
   >
     <div class="inline-flex items-center justify-center">
       <VMenu>
-        <button class="p-1 rounded-sm hover:bg-gray-100" tabindex="-1">
+        <button class="p-1.5 rounded-md hover:bg-gray-100" tabindex="-1">
           <MdiPlusCircle class="text-[#4CCBA0]" />
         </button>
         <template #popper>
@@ -108,7 +108,7 @@ function getToolboxItemsFromExtensions() {
           />
           <template #popper>
             <div
-              class="relative rounded-md bg-white overflow-hidden drop-shadow w-48 p-1 max-h-72 overflow-y-auto"
+              class="relative rounded-md bg-white overflow-hidden drop-shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5"
             >
               <component
                 v-bind="child.props"
diff --git a/ui/packages/editor/src/components/common/ColorPickerDropdown.vue b/ui/packages/editor/src/components/common/ColorPickerDropdown.vue
index 48f04aed0..45e05a3b3 100644
--- a/ui/packages/editor/src/components/common/ColorPickerDropdown.vue
+++ b/ui/packages/editor/src/components/common/ColorPickerDropdown.vue
@@ -78,7 +78,7 @@ function onColorChange(color: Payload) {
 </script>
 
 <template>
-  <VDropdown class="inline-flex">
+  <VDropdown class="inline-flex items-center">
     <slot />
     <template #popper>
       <slot name="prefix" />
diff --git a/ui/packages/editor/src/components/toolbar/ToolbarItem.vue b/ui/packages/editor/src/components/toolbar/ToolbarItem.vue
index f2aa80279..d4945b054 100644
--- a/ui/packages/editor/src/components/toolbar/ToolbarItem.vue
+++ b/ui/packages/editor/src/components/toolbar/ToolbarItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Component } from "vue";
 import { VTooltip } from "floating-vue";
-import IconArrowDown from "~icons/ri/arrow-down-s-fill";
+import MdiMenuDown from "~icons/mdi/menu-down";
 import type { ToolbarItem } from "@/types";
 
 withDefaults(
@@ -11,7 +11,7 @@ withDefaults(
     title?: string;
     action?: () => void;
     icon?: Component;
-    children: ToolbarItem[];
+    children?: ToolbarItem[];
   }>(),
   {
     isActive: false,
@@ -28,16 +28,16 @@ withDefaults(
   <button
     v-tooltip="title"
     :class="[
-      { 'bg-gray-200': isActive },
+      { 'bg-gray-200/70': isActive },
       { 'cursor-not-allowed opacity-70': disabled },
       { 'hover:bg-gray-100': !disabled },
     ]"
-    class="inline-flex items-center space-x-1 p-1 rounded-sm"
+    class="inline-flex items-center space-x-1 p-1.5 rounded-md"
     :disabled="disabled"
     tabindex="-1"
     @click="action"
   >
     <component :is="icon" />
-    <IconArrowDown v-if="children?.length" />
+    <MdiMenuDown v-if="children?.length" />
   </button>
 </template>
diff --git a/ui/packages/editor/src/components/toolbar/ToolbarSubItem.vue b/ui/packages/editor/src/components/toolbar/ToolbarSubItem.vue
index 8534b6f91..29af42227 100644
--- a/ui/packages/editor/src/components/toolbar/ToolbarSubItem.vue
+++ b/ui/packages/editor/src/components/toolbar/ToolbarSubItem.vue
@@ -31,19 +31,19 @@ const action = () => {
       { 'cursor-not-allowed opacity-70 ': disabled },
       { 'hover:bg-gray-100': !disabled },
     ]"
-    class="flex flex-row items-center rounded gap-4 p-1 group cursor-pointer"
+    class="flex flex-row items-center rounded gap-3 py-1 px-1.5 group cursor-pointer"
     @click="action"
   >
     <component
       :is="icon"
-      class="bg-gray-100 p-1 rounded w-6 h-6"
+      class="bg-gray-100 p-1.5 rounded w-7 h-7"
       :class="[
         { '!bg-white': isActive },
         { 'group-hover:bg-white': !disabled },
       ]"
     />
     <span
-      class="text-xs text-gray-600"
+      class="text-sm text-gray-600"
       :class="[
         { '!text-gray-900 !font-medium': isActive },
         { 'group-hover:font-medium group-hover:text-gray-900': !disabled },
diff --git a/ui/packages/editor/src/extensions/clear-format/index.ts b/ui/packages/editor/src/extensions/clear-format/index.ts
index aed5b6187..5d2c8b9e6 100644
--- a/ui/packages/editor/src/extensions/clear-format/index.ts
+++ b/ui/packages/editor/src/extensions/clear-format/index.ts
@@ -1,8 +1,8 @@
+import type { Editor } from "@/tiptap";
 import { Extension } from "@/tiptap";
 import type { ExtensionOptions } from "@/types";
-import type { Editor } from "@/tiptap";
 import { markRaw } from "vue";
-import IconParkSolidClearFormat from "~icons/icon-park-solid/clear-format";
+import MdiEraser from "~icons/mdi/eraser";
 import ToolbarItem from "@/components/toolbar/ToolbarItem.vue";
 import { i18n } from "@/locales";
 
@@ -16,7 +16,7 @@ const clearFormat = Extension.create<ExtensionOptions>({
           props: {
             editor,
             isActive: false,
-            icon: markRaw(IconParkSolidClearFormat),
+            icon: markRaw(MdiEraser),
             title: i18n.global.t("editor.common.clear_format"),
             action: () => editor.chain().focus().unsetAllMarks().run(),
           },
diff --git a/ui/packages/editor/src/extensions/format-brush/index.ts b/ui/packages/editor/src/extensions/format-brush/index.ts
index 746adf0e8..d370156c6 100644
--- a/ui/packages/editor/src/extensions/format-brush/index.ts
+++ b/ui/packages/editor/src/extensions/format-brush/index.ts
@@ -2,7 +2,7 @@ import ToolbarItem from "@/components/toolbar/ToolbarItem.vue";
 import { i18n } from "@/locales";
 import { CoreEditor, Extension, Plugin, PluginKey } from "@/tiptap";
 import { markRaw } from "vue";
-import BxsBrushAlt from "~icons/bxs/brush-alt";
+import MdiBrushVariant from "~icons/mdi/brush-variant";
 import { getMarksByFirstTextNode, setMarks } from "./util";
 
 declare module "@/tiptap" {
@@ -32,7 +32,7 @@ const formatBrush = Extension.create<any, FormatBrushStore>({
           props: {
             editor,
             isActive: formatBrush,
-            icon: markRaw(BxsBrushAlt),
+            icon: markRaw(MdiBrushVariant),
             title: formatBrush
               ? i18n.global.t(
                   "editor.extensions.format_brush.toolbar_item.cancel"