pref: optimize the pop-up mode of toolbar submenu (#5682)

#### What type of PR is this?

/kind improvement
/area editor

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

优化默认富文本编辑器中，顶部工具栏子菜单的弹出方式，将原有的鼠标移入弹出改为点击左键弹出。并且为了显示效果，将会在具有子菜单的工具栏后方显示额外的下拉图标。

#### How to test it?

查看顶部工具栏子菜单弹出方式是否已改变。（插入组件未进行更改，仍旧保持原有鼠标移入弹出方式）

#### Which issue(s) this PR fixes:

Fixes #5668 

#### Does this PR introduce a user-facing change?
```release-note
优化默认富文本编辑器中顶部工具栏的子菜单弹出方式
```

ui/packages/editor/src/components/EditorHeader.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Menu as VMenu } from "floating-vue";
+import { Menu as VMenu, Dropdown as VDropdown } from "floating-vue";
 import { Editor, type AnyExtension } from "@/tiptap/vue-3";
 import MdiPlusCircle from "~icons/mdi/plus-circle";
 import type { ToolbarItem, ToolboxItem } from "@/types";
@@ -93,22 +93,34 @@ function getToolboxItemsFromExtensions() {
         v-bind="item.props"
         tabindex="-1"
       />
-      <VMenu v-else class="inline-flex" tabindex="-1">
+      <template v-else>
-        <component :is="item.component" v-bind="item.props" tabindex="-1" />
+        <VDropdown
-        <template #popper>
+          class="inline-flex"
-          <div
+          tabindex="-1"
-            class="relative rounded-md bg-white overflow-hidden drop-shadow w-48 p-1 max-h-72 overflow-y-auto"
+          :triggers="['click']"
-          >
+          :popper-triggers="['click']"
-            <component
+        >
-              v-bind="child.props"
+          <component
-              :is="child.component"
+            :is="item.component"
-              v-for="(child, childIndex) in item.children"
+            v-bind="item.props"
-              :key="childIndex"
+            :children="item.children"
-              tabindex="-1"
+            tabindex="-1"
-            />
+          />
-          </div>
+          <template #popper>
-        </template>
+            <div
-      </VMenu>
+              class="relative rounded-md bg-white overflow-hidden drop-shadow w-48 p-1 max-h-72 overflow-y-auto"
+            >
+              <component
+                v-bind="child.props"
+                :is="child.component"
+                v-for="(child, childIndex) in item.children"
+                :key="childIndex"
+                tabindex="-1"
+              />
+            </div>
+          </template>
+        </VDropdown>
+      </template>
     </div>
   </div>
 </template>

ui/packages/editor/src/components/toolbar/ToolbarItem.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import type { Component } from "vue";
 import { VTooltip } from "floating-vue";
+import IconArrowDown from "~icons/ri/arrow-down-s-fill";
+import type { ToolbarItem } from "@/types";
 
 withDefaults(
   defineProps<{
@@ -9,6 +11,7 @@ withDefaults(
     title?: string;
     action?: () => void;
     icon?: Component;
+    children: ToolbarItem[];
   }>(),
   {
     isActive: false,
@@ -16,6 +19,7 @@ withDefaults(
     title: undefined,
     action: undefined,
     icon: undefined,
+    children: undefined,
   }
 );
 </script>
@@ -28,11 +32,12 @@ withDefaults(
       { 'cursor-not-allowed opacity-70': disabled },
       { 'hover:bg-gray-100': !disabled },
     ]"
-    class="p-1 rounded-sm"
+    class="inline-flex items-center space-x-1 p-1 rounded-sm"
     :disabled="disabled"
     tabindex="-1"
     @click="action"
   >
     <component :is="icon" />
+    <IconArrowDown v-if="children?.length" />
   </button>
 </template>