feat(stashModal): 新增预览效果功能

- 在暂存项操作按钮中添加预览效果按钮
- 在活动暂存项操作区域添加预览效果按钮
- 新增ViewEffectModal组件实现预览效果对话框
- 实现handlePreviewEffect方法用于打开预览弹窗
- 在functional模块中定义viewEffectModalRef引用管理弹窗实例
- 添加错误捕获和提示，确保预览失败时友好提示用户

src/views/editor/components/EditorToolbar/components/StashModal/functionals/index.ts

@@ -14,6 +14,9 @@ export function useStashModal() {
     const editingItem = ref<StashItem | null>(null)
     const editingItemName = ref('')
 
+    // 预览效果弹窗 Ref
+    const viewEffectModalRef = ref<any>(null)
+
     const selectedNode = computed(() => editorStore.selectedNode)
     const hasXmlTree = computed(() => !!editorStore.xmlTree)
 
@@ -248,6 +251,15 @@ export function useStashModal() {
         }
     }
 
+    const handlePreviewEffect = (item: StashItem) => {
+        try {
+            const xmlText = serializeTreeToXml(item.xmlNode, 0, false)
+            viewEffectModalRef.value?.open(`预览暂存效果：${item.name}`, xmlText)
+        } catch (err: any) {
+            window.$message?.error(`准备预览失败: ${err.message || err}`)
+        }
+    }
+
     return {
         visible,
         stashStore,
@@ -275,6 +287,8 @@ export function useStashModal() {
         handleDelete,
         handleClearAll,
         handleExport,
-        handleCopyXml
+        handleCopyXml,
+        handlePreviewEffect,
+        viewEffectModalRef
     }
 }

src/views/editor/components/EditorToolbar/components/StashModal/index.vue

@@ -79,6 +79,9 @@
                                         </span>
                                     </div>
                                     <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+                                        <CommonButton size="tiny" quaternary circle @click.stop="handlePreviewEffect(item)" title="预览效果">
+                                            <n-icon><EyeOutline /></n-icon>
+                                        </CommonButton>
                                         <CommonButton size="tiny" quaternary circle @click.stop="startRename(item)" title="重命名">
                                             <n-icon><CreateOutline /></n-icon>
                                         </CommonButton>
@@ -118,6 +121,12 @@
                             </div>
                         </div>
                         <div class="flex items-center gap-2">
+                            <CommonButton size="small" type="info" secondary @click="handlePreviewEffect(activeItem)">
+                                <template #icon>
+                                    <n-icon><EyeOutline /></n-icon>
+                                </template>
+                                预览效果
+                            </CommonButton>
                             <CommonButton v-if="activeItem.type === 'full'" size="small" type="warning" secondary @click="handleExport(activeItem)">
                                 <template #icon>
                                     <n-icon><DownloadOutline /></n-icon>
@@ -187,11 +196,15 @@
                 <n-input v-model:value="editingItemName" placeholder="请输入暂存别名" />
             </div>
         </CommonModal>
+
+        <!-- 预览效果对话框 -->
+        <ViewEffectModal ref="viewEffectModalRef" />
     </CommonModal>
 </template>
 
 <script setup lang="ts">
 import { useStashModal } from './functionals'
+import ViewEffectModal from '../TemplateSelectModal/components/ViewEffectModal/index.vue'
 import {
     ArchiveOutline,
     DocumentTextOutline,
@@ -233,7 +246,9 @@ const {
     handleDelete,
     handleClearAll,
     handleExport,
-    handleCopyXml
+    handleCopyXml,
+    handlePreviewEffect,
+    viewEffectModalRef
 } = useStashModal()
 
 defineExpose({