feat(preview): Modify the style to be consistent with toolbar save. (#1709)

betterdancing · web-flow · commit 315138e4ac3b · 2025-12-08T17:01:31.000+08:00
diff --git a/packages/common/component/ToolbarBase.vue b/packages/common/component/ToolbarBase.vue
@@ -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>
@@ -47,8 +47,9 @@ export default {
       trigger: computed(() => props.trigger)
     })
 
-    const click = () => {
+    const click = (e: any) => {
       emit('click-api')
+      e.stopPropagation()
     }
 
     const getRender = () => {
diff --git a/packages/common/component/toolbar-built-in/ToolbarBaseButton.vue b/packages/common/component/toolbar-built-in/ToolbarBaseButton.vue
@@ -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>
@@ -36,12 +36,15 @@ export default {
 .toolbar-button {
   background-color: var(--te-component-toolbar-base-button-bg-color) !important;
   border: none !important;
-  min-width: 70px;
+  min-width: 60px;
   height: 26px;
   line-height: 24px;
   padding: 0 8px;
   border-radius: 4px;
   margin-right: 4px;
+  .svg-icon {
+    color: var(--te-component-common-icon-color-primary) !important;
+  }
 }
 
 .svg-wrap {
@@ -57,8 +60,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>
diff --git a/packages/design-core/registry.js b/packages/design-core/registry.js
@@ -17,7 +17,7 @@ import {
   Fullscreen,
   Lang,
   ViewSetting,
-  Logo,
+  // Logo,
   Lock,
   Media,
   Redoundo,
@@ -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,
diff --git a/packages/toolbars/preview/meta.js b/packages/toolbars/preview/meta.js
@@ -6,7 +6,8 @@ export default {
     icon: {
       default: 'preview'
     },
-    renderType: 'icon',
+    renderType: 'button',
+    showTitle: false,
     previewUrl: ''
   }
 }
diff --git a/packages/toolbars/preview/package.json b/packages/toolbars/preview/package.json
@@ -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:*",
@@ -36,6 +37,7 @@
   },
   "peerDependencies": {
     "@opentiny/vue": "^3.20.0",
+    "@opentiny/vue-icon": "^3.20.0",
     "vue": "^3.4.15"
   }
 }
diff --git a/packages/toolbars/preview/src/Main.vue b/packages/toolbars/preview/src/Main.vue
@@ -1,11 +1,31 @@
 <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
+          :visible-arrow="false"
+          width="85"
+          trigger="manual"
+          :open-delay="OPEN_DELAY.Default"
+          v-model="poperVisible"
+        >
+          <template #reference>
+            <span @click.stop="clickPopover">
+              <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>
@@ -15,11 +35,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: {
@@ -29,6 +58,14 @@ export default {
     }
   },
   setup() {
+    const poperVisible = ref(false)
+    const clickPopover = () => {
+      poperVisible.value = !poperVisible.value
+    }
+
+    const closePopover = () => {
+      poperVisible.value = false
+    }
     const preview = async (previewType: string) => {
       const { beforePreview, previewMethod, afterPreview } = getOptions(meta.id)
 
@@ -60,7 +97,7 @@ export default {
       }
 
       previewPage({ previewType })
-
+      closePopover()
       if (typeof afterPreview === 'function') {
         try {
           await afterPreview()
@@ -74,7 +111,10 @@ export default {
     }
 
     return {
-      preview
+      poperVisible,
+      clickPopover,
+      preview,
+      OPEN_DELAY
     }
   }
 }
@@ -84,10 +124,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 var(--te-common-border-divider);
+    }
   }
 }
 </style>
diff --git a/packages/toolbars/save/package.json b/packages/toolbars/save/package.json
@@ -37,6 +37,7 @@
   },
   "peerDependencies": {
     "@opentiny/vue": "^3.20.0",
+    "@opentiny/vue-icon": "^3.20.0",
     "vue": "^3.4.15"
   }
 }
diff --git a/packages/toolbars/save/src/Main.vue b/packages/toolbars/save/src/Main.vue
@@ -7,9 +7,18 @@
       @click-api="openApi"
     >
       <template #button>
-        <tiny-popover :visible-arrow="false" width="203" trigger="click" :open-delay="OPEN_DELAY.Default">
+        <tiny-popover
+          :visible-arrow="false"
+          width="203"
+          trigger="manual"
+          :open-delay="OPEN_DELAY.Default"
+          v-model="poperVisible"
+        >
           <template #reference>
-            <svg-icon :name="iconExpand"></svg-icon>
+            <span @click.stop="clickPopover">
+              <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>
@@ -60,6 +69,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'
@@ -79,13 +89,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: () => ({})
@@ -107,6 +115,7 @@ export default {
     })
 
     const editor = ref(null)
+    const poperVisible = ref(false)
 
     const { isSaved, setSaved, getSchema } = useCanvas()
 
@@ -115,6 +124,10 @@ export default {
 
     const originSchema = ref(null)
 
+    const clickPopover = () => {
+      poperVisible.value = !poperVisible.value
+    }
+
     onMounted(() => {
       // 订阅页面/区块初始化事件
       subscribe({
@@ -207,9 +220,11 @@ export default {
     return {
       state,
       editor,
+      poperVisible,
       editorOptions,
       isLoading,
       isSaved,
+      clickPopover,
       close,
       openApi,
       saveApi,

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,8 @@ export default {`
`6`	`6`	`icon: {`
`7`	`7`	`default: 'preview'`
`8`	`8`	`},`
`9`		`- renderType: 'icon',`
	`9`	`+ renderType: 'button',`
	`10`	`+ showTitle: false,`
`10`	`11`	`previewUrl: ''`
`11`	`12`	`}`
`12`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,7 @@`
`37`	`37`	`},`
`38`	`38`	`"peerDependencies": {`
`39`	`39`	`"@opentiny/vue": "^3.20.0",`
	`40`	`+ "@opentiny/vue-icon": "^3.20.0",`
`40`	`41`	`"vue": "^3.4.15"`
`41`	`42`	`}`
`42`	`43`	`}`