fix: resolve editor styling issues in Safari browser (#7328)

#### What type of PR is this?

/kind bug
/area editor
/area ui
/milestone 2.20.x

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

Replace `drop-shadow-*` with `shadow-*` to resolve editor styling issues in Safari brower.

before:

<img width="399" alt="image" src="https://github.com/user-attachments/assets/c9305e09-9f1b-4879-b532-a09b931ca178" />
<img width="270" alt="image" src="https://github.com/user-attachments/assets/d77cf742-c374-4b2d-b5a9-86f454103039" />

after:

<img width="411" alt="image" src="https://github.com/user-attachments/assets/47ab2cce-b511-4ece-ac21-c8668ef89e75" />
<img width="250" alt="image" src="https://github.com/user-attachments/assets/70008a8f-2f36-44e7-a40a-a260476342f0" />

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

None

#### Special notes for your reviewer:

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

```release-note
修复编辑器在 Safari 浏览器中关于浮动工具栏和命令列表的样式问题。
```

<!-- Fuuuuuuuuuuuuuuuuck Safari -->
pull/7331/head
Ryan Wang 2025-04-08 09:49:52 +08:00 committed by GitHub
parent fb7a09738a
commit 629a0f893e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 8 additions and 8 deletions

View File

@ -71,7 +71,7 @@ const shouldShow = (
:default-animation="bubbleMenu.defaultAnimation" :default-animation="bubbleMenu.defaultAnimation"
> >
<div <div
class="bubble-menu bg-white flex items-center rounded-md p-1 border drop-shadow space-x-1" class="bubble-menu bg-white flex items-center rounded-md p-1 border shadow space-x-1"
> >
<template v-if="bubbleMenu.items"> <template v-if="bubbleMenu.items">
<template <template

View File

@ -59,7 +59,7 @@ function getToolboxItemsFromExtensions() {
</script> </script>
<template> <template>
<div <div
class="editor-header py-1 space-x-1 px-1 overflow-auto border-b drop-shadow-sm bg-white text-center" class="editor-header py-1 space-x-1 px-1 overflow-auto border-b shadow-sm bg-white text-center"
> >
<div class="h-full inline-flex items-center"> <div class="h-full inline-flex items-center">
<VMenu> <VMenu>
@ -68,7 +68,7 @@ function getToolboxItemsFromExtensions() {
</button> </button>
<template #popper> <template #popper>
<div <div
class="relative rounded-md bg-white overflow-hidden drop-shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5" class="relative rounded-md bg-white overflow-hidden shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5"
> >
<component <component
:is="toolboxItem.component" :is="toolboxItem.component"
@ -106,7 +106,7 @@ function getToolboxItemsFromExtensions() {
/> />
<template #popper> <template #popper>
<div <div
class="relative rounded-md bg-white overflow-hidden drop-shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5" class="relative rounded-md bg-white overflow-hidden shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5"
> >
<component <component
v-bind="child.props" v-bind="child.props"

View File

@ -62,7 +62,7 @@ const handleBubbleItemClick = (editor: Editor) => {
</button> </button>
<template #popper> <template #popper>
<div <div
class="relative rounded-md bg-white overflow-hidden drop-shadow w-96 p-1 max-h-72 overflow-y-auto" class="relative rounded-md bg-white overflow-hidden shadow w-96 p-1 max-h-72 overflow-y-auto"
> >
<KeepAlive> <KeepAlive>
<component :is="componentRef" v-bind="props"></component> <component :is="componentRef" v-bind="props"></component>

View File

@ -114,7 +114,7 @@ defineExpose({
rounded-md rounded-md
bg-white bg-white
overflow-hidden overflow-hidden
drop-shadow shadow
w-52 w-52
p-1 p-1
max-h-72 max-h-72

View File

@ -93,7 +93,7 @@ const handleLinkBubbleButton = () => {
<template #popper> <template #popper>
<div <div
class="relative rounded-md bg-white overflow-hidden drop-shadow w-96 p-1 max-h-72 overflow-y-auto" class="relative rounded-md bg-white overflow-hidden shadow w-96 p-1 max-h-72 overflow-y-auto"
> >
<input <input
v-model.lazy="href" v-model.lazy="href"

View File

@ -97,7 +97,7 @@
.v-popper--theme-editor-block-dropdown { .v-popper--theme-editor-block-dropdown {
.v-popper__inner { .v-popper__inner {
@apply bg-white drop-shadow-md rounded-md; @apply bg-white shadow-md rounded-md;
} }
.v-popper__arrow-container { .v-popper__arrow-container {