feat(editor-toolbar): 为插入元素按钮添加预览悬浮卡片功能

- 将插入元素按钮包裹在悬浮提示(n-popover)组件内，触发时显示效果预览卡片
- 预览卡片展示各插入按钮对应元素的示意内容及说明
- 增加 XML 片段按钮的预览展示，支持快捷插入自定义 XML 代码
- 批量翻译按钮样式优化，增加加载和完成状态的动态样式和动画效果
- 优化比较模态框中滑块样式，新增对应的CSS样式以增强交互体验
- 模板选择模态框样式调整，更新提示背景和选中项样式，增强视觉效果

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

@@ -155,7 +155,7 @@
                                 ></div>
                                 <!-- 模拟滑块 -->
                                 <div
-                                    class="absolute left-[1px] right-[1px] bg-primary/[0.15] hover:bg-primary/[0.25] active:bg-primary/[0.35] rounded border border-primary/20 cursor-grab active:cursor-grabbing transition-colors"
+                                    class="absolute left-[1px] right-[1px] compare-minimap-slider cursor-grab active:cursor-grabbing"
                                     :style="{
                                         top: leftTextScrollTopPercent + '%',
                                         height: leftTextScrollHeightPercent + '%'
@@ -205,7 +205,7 @@
                                 ></div>
                                 <!-- 模拟滑块 -->
                                 <div
-                                    class="absolute left-[1px] right-[1px] bg-primary/[0.15] hover:bg-primary/[0.25] active:bg-primary/[0.35] rounded border border-primary/20 cursor-grab active:cursor-grabbing transition-colors"
+                                    class="absolute left-[1px] right-[1px] compare-minimap-slider cursor-grab active:cursor-grabbing"
                                     :style="{
                                         top: leftRenderScrollTopPercent + '%',
                                         height: leftRenderScrollHeightPercent + '%'
@@ -324,7 +324,7 @@
                                 ></div>
                                 <!-- 模拟滑块 -->
                                 <div
-                                    class="absolute left-[1px] right-[1px] bg-primary/[0.15] hover:bg-primary/[0.25] active:bg-primary/[0.35] rounded border border-primary/20 cursor-grab active:cursor-grabbing transition-colors"
+                                    class="absolute left-[1px] right-[1px] compare-minimap-slider cursor-grab active:cursor-grabbing"
                                     :style="{
                                         top: rightTextScrollTopPercent + '%',
                                         height: rightTextScrollHeightPercent + '%'
@@ -374,7 +374,7 @@
                                 ></div>
                                 <!-- 模拟滑块 -->
                                 <div
-                                    class="absolute left-[1px] right-[1px] bg-primary/[0.15] hover:bg-primary/[0.25] active:bg-primary/[0.35] rounded border border-primary/20 cursor-grab active:cursor-grabbing transition-colors"
+                                    class="absolute left-[1px] right-[1px] compare-minimap-slider cursor-grab active:cursor-grabbing"
                                     :style="{
                                         top: rightRenderScrollTopPercent + '%',
                                         height: rightRenderScrollHeightPercent + '%'
@@ -687,4 +687,17 @@ div.doc-node-wrapper[data-diff-status='modified'] {
         flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.08s,
         max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.08s !important;
 }
+
+.compare-minimap-slider {
+    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
+    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s;
+}
+.compare-minimap-slider:hover {
+    background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
+}
+.compare-minimap-slider:active {
+    background-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
+}
 </style>

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

@@ -9,7 +9,7 @@
         @confirm="handleInsert"
     >
         <div class="flex flex-col space-y-4">
-            <div class="text-xs text-color3 bg-primary/5 p-3 rounded-lg border border-primary/20">
+            <div class="text-xs text-color3 bg-primary-1 p-3 rounded-lg border border-primary-3">
                 提示：模板中包含预先设计好的复杂节点结构（如 CALS 表格、多列配置等）。请选择要插入的模板，并直接进行插入。
             </div>
 
@@ -22,7 +22,7 @@
                             :key="item.id"
                             :class="[
                                 'transition-colors cursor-pointer',
-                                selectedTemplate?.id === item.id ? 'bg-primary/5 border-l-4 border-primary' : ''
+                                selectedTemplate?.id === item.id ? 'bg-primary-1 border-l-4 border-primary' : ''
                             ]"
                             @click="selectedTemplate = item"
                             @dblclick="handleInsert"