Skip to content

Feat/preview style: Modify the style to be consistent with toolbar save. #1709

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

Feat/preview style: Modify the style to be consistent with toolbar save. #1709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a725ac3
Add files via upload
betterdancing Oct 29, 2025
55e464f
Delete docs/basic-features/ppreas.png
betterdancing Oct 29, 2025
967a971
Merge branch 'opentiny:develop' into develop
betterdancing Oct 31, 2025
c69689a
Merge branch 'opentiny:develop' into develop
betterdancing Nov 6, 2025
372ee1a
Merge branch 'opentiny:develop' into develop
betterdancing Dec 1, 2025
47618e3
feat(preview-style): edit preview style
betterdancing Dec 1, 2025
666279d
fix/preview-style：fix bugs
betterdancing Dec 2, 2025
47d0553
fix(preview-set): add vue-icon dependence
betterdancing Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/common/component/ToolbarBase.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<span class="toolbar-item-wrap" @click="click">
<span class="toolbar-item-wrap" @click="click($event)">
<component :is="getRender()" v-bind="state">
<template #default>
<slot name="button"></slot>
Expand Down Expand Up @@ -47,8 +47,9 @@ export default {
trigger: computed(() => props.trigger)
})

const click = () => {
const click = (e: any) => {
emit('click-api')
e.stopPropagation()
}

const getRender = () => {
Expand Down
14 changes: 9 additions & 5 deletions packages/common/component/toolbar-built-in/ToolbarBaseButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<span v-if="options?.showDots" class="dot"></span>
<tiny-button class="toolbar-button">
<svg-icon v-if="icon" :name="icon"></svg-icon>
<span class="save-title">{{ content }}</span>
<span v-if="options?.showTitle !== false" class="save-title">{{ content }}</span>
<slot></slot>
</tiny-button>
</div>
Expand Down Expand Up @@ -36,12 +36,16 @@ export default {
.toolbar-button {
background-color: var(--te-component-toolbar-base-button-bg-color) !important;
border: none !important;
min-width: 70px;
min-width: 60px;
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

❓ Verification inconclusive

🏁 Script executed:

find . -name "ToolbarBaseButton.vue" -type f

Repository: opentiny/tiny-engine

Length of output: 184

🌐 Web query:

Vue.js scoped CSS slotted content does not apply scope attribute

💡 Result:

Cause — scoped styles are only applied to elements owned by the component (Vue adds a data-v-xxx attribute to those elements). Content passed into a is owned by the parent, so Vue does not add the component’s scope attribute to slotted nodes and scoped rules don’t match them by default. [1][2]

Fixes

  • Use the :slotted() pseudo-class inside the child component’s <style scoped> to target slotted nodes: <style scoped> :slotted(.my-item) { color: red; } </style>
  • Or move the rule to the parent (where the slotted content lives) or use a non-scoped/global style.
  • For styling elements inside child components or deep descendants, use :deep(...) (not for slotted content owned by the parent). [1][2]

References
[1] Vue SFC CSS features (scoped, :slotted, :deep).
[2] vue-loader — Scoped CSS behavior and caveats.

Scoped .tiny-popover.no-arrow rule won't apply to slotted popovers

Since popovers are provided via slots, they're owned by parent components and won't carry this component's scope attribute. The scoped .tiny-popover.no-arrow rule won't target them.

Consider using the :slotted() pseudo-class if styling direct slot children, moving this rule to the parent component where the popover is rendered, or using a global/non-scoped style file instead. Avoid :deep() for slotted content, as it's for styling child components and descendants, not slot-provided elements.

🤖 Prompt for AI Agents 
In packages/common/component/toolbar-built-in/ToolbarBaseButton.vue around line
39, the scoped CSS rule targeting .tiny-popover.no-arrow won't apply to popovers
rendered via slots because slotted content is owned by the parent and doesn't
get this component's scope attribute; update the styling by either (a) moving
the .tiny-popover.no-arrow rule into the parent component that renders the
popover, (b) place the rule in a global/non-scoped stylesheet so it applies to
slotted elements, or (c) if you only need to style direct slot children, use the
:slotted(.tiny-popover.no-arrow) selector in this component's <style scoped>
block; avoid using :deep() for slot-provided elements.

height: 26px;
line-height: 24px;
padding: 0 8px;
border-radius: 4px;
margin-right: 4px;
.svg-icon {
font-size: 20px !important;
color: var(--te-component-common-icon-color-primary) !important;
}
}

.svg-wrap {
Expand All @@ -57,8 +61,8 @@ export default {
right: 2px;
z-index: 100;
}
.svg-icon.svg-icon.svg-icon {
color: var(--te-component-common-icon-color-primary);
}
}
.tiny-popover.no-arrow {
margin-top: 12px;
}
</style>
4 changes: 2 additions & 2 deletions packages/design-core/registry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
Fullscreen,
Lang,
ViewSetting,
Logo,
// Logo,
Lock,
Media,
Redoundo,
Expand Down Expand Up @@ -138,7 +138,7 @@ export default {
layout: __TINY_ENGINE_REMOVED_REGISTRY['engine.layout'] === false ? null : Layout,
toolbars: [
__TINY_ENGINE_REMOVED_REGISTRY['engine.toolbars.themeSwitch'] === false ? null : ThemeSwitch,
__TINY_ENGINE_REMOVED_REGISTRY['engine.toolbars.logo'] === false ? null : Logo,
//__TINY_ENGINE_REMOVED_REGISTRY['engine.toolbars.logo'] === false ? null : Logo,
__TINY_ENGINE_REMOVED_REGISTRY['engine.toolbars.breadcrumb'] === false ? null : Breadcrumb,
__TINY_ENGINE_REMOVED_REGISTRY['engine.toolbars.lock'] === false ? null : Lock,
__TINY_ENGINE_REMOVED_REGISTRY['engine.toolbars.media'] === false ? null : Media,
Expand Down
3 changes: 2 additions & 1 deletion packages/toolbars/preview/meta.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ export default {
icon: {
default: 'preview'
},
renderType: 'icon',
renderType: 'button',
showTitle: false,
previewUrl: ''
}
}
4 changes: 3 additions & 1 deletion packages/toolbars/preview/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
"homepage": "https://opentiny.design/tiny-engine",
"dependencies": {
"@opentiny/tiny-engine-common": "workspace:*",
"@opentiny/tiny-engine-meta-register": "workspace:*"
"@opentiny/tiny-engine-meta-register": "workspace:*",
"@opentiny/tiny-engine-utils": "workspace:*"
},
"devDependencies": {
"@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",
Expand All @@ -36,6 +37,7 @@
},
"peerDependencies": {
"@opentiny/vue": "^3.20.0",
"@opentiny/vue-icon": "^3.20.0",
"vue": "^3.4.15"
}
}
50 changes: 42 additions & 8 deletions packages/toolbars/preview/src/Main.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,25 @@
<template>
<div class="toolbar-save toolbar-helpGuid">
<toolbar-base content="预览页面" :icon="options.icon?.default || options?.icon" :options="options" trigger="hover">
<div class="toolbar-preview">
<toolbar-base
content="预览"
:icon="options.icon?.default || options?.icon"
:options="options"
trigger="hover"
@click-api="preview('page')"
>
<template #button>
<div class="toolbar-preview-item">
<span @click="preview('page')">页面预览</span>
<span @click="preview('app')">应用预览</span>
</div>
<tiny-popover width="85" trigger="manual" :open-delay="OPEN_DELAY.Default" v-model="poperVisible">
<template #reference>
<span @click.stop="openPopover">
<tiny-icon-up-ward v-if="poperVisible"></tiny-icon-up-ward>
<tiny-icon-down-ward v-else></tiny-icon-down-ward>
</span>
</template>
<div class="toolbar-preview-item">
<span @click="preview('page')">页面预览</span>
<span @click="preview('app')">应用预览</span>
</div>
</tiny-popover>
</template>
</toolbar-base>
</div>
Expand All @@ -15,11 +29,20 @@
/* metaService: engine.toolbars.preview.Main */
import { previewPage } from '@opentiny/tiny-engine-common/js/preview'
import { useLayout, useNotify, getOptions } from '@opentiny/tiny-engine-meta-register'
import { constants } from '@opentiny/tiny-engine-utils'
import { ref } from 'vue'
import type { Component } from 'vue'
import { Popover } from '@opentiny/vue'
import { iconUpWard, iconDownWard } from '@opentiny/vue-icon'
import meta from '../meta'
import { ToolbarBase } from '@opentiny/tiny-engine-common'
const { OPEN_DELAY } = constants

export default {
components: {
TinyPopover: Popover as Component,
TinyIconUpWard: iconUpWard(),
TinyIconDownWard: iconDownWard(),
ToolbarBase
},
props: {
Expand All @@ -29,6 +52,10 @@ export default {
}
},
setup() {
const poperVisible = ref(false)
const openPopover = () => {
poperVisible.value = !poperVisible.value
}
const preview = async (previewType: string) => {
const { beforePreview, previewMethod, afterPreview } = getOptions(meta.id)

Expand Down Expand Up @@ -74,7 +101,10 @@ export default {
}

return {
preview
poperVisible,
openPopover,
preview,
OPEN_DELAY
}
}
}
Expand All @@ -84,10 +114,14 @@ export default {
display: flex;
justify-content: center;
flex-direction: column;
gap: 8px;

span {
cursor: pointer;
line-height: 28px;
padding: 0 2px;
&:first-child {
border-bottom: 1px solid #ebebeb;
}
}
}
</style>
1 change: 1 addition & 0 deletions packages/toolbars/save/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
},
"peerDependencies": {
"@opentiny/vue": "^3.20.0",
"@opentiny/vue-icon": "^3.20.0",
"vue": "^3.4.15"
}
}
21 changes: 15 additions & 6 deletions packages/toolbars/save/src/Main.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@
@click-api="openApi"
>
<template #button>
<tiny-popover :visible-arrow="false" width="203" trigger="click" :open-delay="OPEN_DELAY.Default">
<tiny-popover width="203" trigger="manual" :open-delay="OPEN_DELAY.Default" v-model="poperVisible">
<template #reference>
<svg-icon :name="iconExpand"></svg-icon>
<span @click.stop="openPopover">
<tiny-icon-up-ward v-if="poperVisible"></tiny-icon-up-ward>
<tiny-icon-down-ward v-else></tiny-icon-down-ward>
</span>
</template>
<div class="save-style">
<div class="save-setting">保存设置</div>
Expand Down Expand Up @@ -60,6 +63,7 @@ import { reactive, ref, onUnmounted, onMounted } from 'vue'
import type { Component } from 'vue'
import { VueMonaco } from '@opentiny/tiny-engine-common'
import { Button, Popover, DialogBox, Checkbox, Select } from '@opentiny/vue'
import { iconUpWard, iconDownWard } from '@opentiny/vue-icon'
import { useCanvas, useMessage } from '@opentiny/tiny-engine-meta-register'
import { ToolbarBase } from '@opentiny/tiny-engine-common'
import { openCommon, saveCommon } from './js/index'
Expand All @@ -79,13 +83,11 @@ export default {
TinyDialogBox: DialogBox,
TinyCheckbox: Checkbox as Component,
TinySelect: Select,
TinyIconUpWard: iconUpWard(),
TinyIconDownWard: iconDownWard(),
ToolbarBase
},
props: {
iconExpand: {
type: String,
default: 'down-arrow'
},
options: {
type: Object,
default: () => ({})
Expand All @@ -107,6 +109,7 @@ export default {
})

const editor = ref(null)
const poperVisible = ref(false)

const { isSaved, setSaved, getSchema } = useCanvas()

Expand All @@ -115,6 +118,10 @@ export default {

const originSchema = ref(null)

const openPopover = () => {
poperVisible.value = !poperVisible.value
}

onMounted(() => {
// 订阅页面/区块初始化事件
subscribe({
Expand Down Expand Up @@ -207,9 +214,11 @@ export default {
return {
state,
editor,
poperVisible,
editorOptions,
isLoading,
isSaved,
openPopover,
close,
openApi,
saveApi,
Expand Down