feat: refactor download functionality and improve artifact handling

package.json

@@ -100,6 +100,7 @@
   "devDependencies": {
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@electron/notarize": "^3.1.0",
+    "@lingual/i18n-check": "^0.8.6",
     "@iconify-json/lucide": "^1.2.66",
     "@iconify-json/vscode-icons": "^1.2.30",
     "@iconify/vue": "^5.0.0",

src/renderer/settings/components/prompt/CustomPromptSettingsSection.vue

@@ -173,6 +173,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger
 } from '@shadcn/components/ui/alert-dialog'
+import { downloadBlob } from '@/lib/download'
 
 interface PromptParameter {
   name: string
@@ -381,14 +382,7 @@ const exportPrompts = () => {
       2
     )
     const blob = new Blob([data], { type: 'application/json' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = 'prompts.json'
-    document.body.appendChild(a)
-    a.click()
-    document.body.removeChild(a)
-    URL.revokeObjectURL(url)
+    downloadBlob(blob, 'prompts.json')
     toast({
       title: t('promptSetting.exportSuccess'),
       variant: 'default'

src/renderer/src/components/message/MessageActionButtons.vue

@@ -53,28 +53,43 @@ defineEmits<{
 
 const handleBeforeLeave = (el: Element) => {
   const element = el as HTMLElement
-  const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = element
-  element.style.width = `${offsetWidth}px`
-  element.style.height = `${offsetHeight}px`
-  element.style.left = `${offsetLeft}px`
-  element.style.top = `${offsetTop}px`
-  element.style.position = 'absolute'
-  element.style.pointerEvents = 'none'
+  const rect = element.getBoundingClientRect()
+  // 只写入四个 CSS 变量，减少重排/回流次数
+  element.style.setProperty('--leave-w', `${rect.width}px`)
+  element.style.setProperty('--leave-h', `${rect.height}px`)
+  element.style.setProperty('--leave-l', `${rect.left}px`)
+  element.style.setProperty('--leave-t', `${rect.top}px`)
+  element.classList.add('message-action-leaving')
+  // 强制回流，确保样式变更被浏览器采纳（触发过渡）
+  void element.offsetWidth
 }
 
 const handleAfterLeave = (el: Element) => {
   const element = el as HTMLElement
-  element.style.width = ''
-  element.style.height = ''
-  element.style.left = ''
-  element.style.top = ''
-  element.style.position = ''
-  element.style.pointerEvents = ''
+  element.classList.remove('message-action-leaving')
+  element.style.removeProperty('--leave-w')
+  element.style.removeProperty('--leave-h')
+  element.style.removeProperty('--leave-l')
+  element.style.removeProperty('--leave-t')
 }
 </script>
 
 <style scoped>
 .message-actions-move {
   transition: transform 0.3s ease;
 }
+
+/* 当元素离开时切换到这个 class，由 CSS 控制定位与过渡 */
+.message-action-leaving {
+  position: absolute;
+  width: var(--leave-w);
+  height: var(--leave-h);
+  left: var(--leave-l);
+  top: var(--leave-t);
+  pointer-events: none;
+  /* 控制离场的属性过渡（和 template 中的 leave-* class 一起工作） */
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+}
 </style>

src/renderer/src/components/message/MessageBlockContent.vue

@@ -54,40 +54,43 @@ watch(
   () => {
     nextTick(() => {
       for (const part of processedContent.value) {
-        if (part.type === 'artifact' && part.artifact) {
-          if (props.block.status === 'loading') {
-            if (artifactStore.currentArtifact?.id === part.artifact.identifier) {
-              // Use updateArtifactContent to trigger reactivity
-              artifactStore.updateArtifactContent({
-                content: part.content,
-                title: part.artifact.title,
-                type: part.artifact.type,
-                status: part.loading ? 'loading' : 'loaded'
-              })
-            } else {
-              artifactStore.showArtifact(
-                {
-                  id: part.artifact.identifier,
-                  type: part.artifact.type,
-                  title: part.artifact.title,
-                  language: part.artifact.language,
-                  content: part.content,
-                  status: part.loading ? 'loading' : 'loaded'
-                },
-                props.messageId,
-                props.threadId
-              )
-            }
+        const artifact = part.type === 'artifact' && part.artifact
+        if (!artifact) continue
+        const { title, type } = artifact
+        const { content, loading } = part
+        if (props.block.status === 'loading') {
+          const status = loading ? 'loading' : 'loaded'
+          if (artifactStore.currentArtifact?.id === artifact.identifier) {
+            // Use updateArtifactContent to trigger reactivity
+            artifactStore.updateArtifactContent({
+              content,
+              title,
+              type,
+              status
+            })
           } else {
-            if (artifactStore.currentArtifact?.id === part.artifact.identifier) {
-              // Use updateArtifactContent to trigger reactivity
-              artifactStore.updateArtifactContent({
-                content: part.content,
-                title: part.artifact.title,
-                type: part.artifact.type,
-                status: 'loaded'
-              })
-            }
+            artifactStore.showArtifact(
+              {
+                id: artifact.identifier,
+                type,
+                title,
+                language: artifact.language,
+                content,
+                status
+              },
+              props.messageId,
+              props.threadId
+            )
+          }
+        } else {
+          if (artifactStore.currentArtifact?.id === artifact.identifier) {
+            // Use updateArtifactContent to trigger reactivity
+            artifactStore.updateArtifactContent({
+              content,
+              title: artifact.title,
+              type,
+              status: 'loaded'
+            })
           }
         }
       }

src/renderer/src/components/message/MessageBlockImage.vue

@@ -66,21 +66,21 @@ import { AssistantMessageBlock } from '@shared/chat'
 import { useI18n } from 'vue-i18n'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@shadcn/components/ui/dialog'
 
+const keyMap = {
+  'image.title': '生成的图片',
+  'image.generatedImage': 'AI生成的图片',
+  'image.loadError': '图片加载失败',
+  'image.viewFull': '查看原图',
+  'image.close': '关闭'
+}
 // 创建一个安全的翻译函数
 const t = (() => {
   try {
     const { t } = useI18n()
     return t
   } catch (e) {
     // 如果 i18n 未初始化，提供默认翻译
-    return (key: string) => {
-      if (key === 'image.title') return '生成的图片'
-      if (key === 'image.generatedImage') return 'AI生成的图片'
-      if (key === 'image.loadError') return '图片加载失败'
-      if (key === 'image.viewFull') return '查看原图'
-      if (key === 'image.close') return '关闭'
-      return key
-    }
+    return (key: string) => keyMap[key] || key
   }
 })()
 

src/renderer/src/components/message/MessageBlockToolCall.vue

@@ -62,25 +62,25 @@ import { AssistantMessageBlock } from '@shared/chat'
 import { computed, ref } from 'vue'
 import { JsonObject } from '@/components/json-viewer'
 
+const keyMap = {
+  'toolCall.calling': '工具调用中',
+  'toolCall.response': '工具响应',
+  'toolCall.end': '工具调用完成',
+  'toolCall.error': '工具调用错误',
+  'toolCall.title': '工具调用',
+  'toolCall.clickToView': '点击查看详情',
+  'toolCall.functionName': '函数名称',
+  'toolCall.params': '参数',
+  'toolCall.responseData': '响应数据'
+}
 // 创建一个安全的翻译函数
 const t = (() => {
   try {
     const { t } = useI18n()
     return t
   } catch (e) {
     // 如果 i18n 未初始化，提供默认翻译
-    return (key: string) => {
-      if (key === 'toolCall.calling') return '工具调用中'
-      if (key === 'toolCall.response') return '工具响应'
-      if (key === 'toolCall.end') return '工具调用完成'
-      if (key === 'toolCall.error') return '工具调用错误'
-      if (key === 'toolCall.title') return '工具调用'
-      if (key === 'toolCall.clickToView') return '点击查看详情'
-      if (key === 'toolCall.functionName') return '函数名称'
-      if (key === 'toolCall.params') return '参数'
-      if (key === 'toolCall.responseData') return '响应数据'
-      return key
-    }
+    return (key: string) => keyMap[key] || key
   }
 })()
 

src/renderer/src/components/message/MessageItemAssistant.vue

@@ -25,7 +25,7 @@
             :is-search-result="isSearchResult"
           />
           <MessageBlockThink
-            v-else-if="block.type === 'reasoning_content'"
+            v-else-if="block.type === 'reasoning_content' && block.content"
             :block="block"
             :usage="message.usage"
           />

src/renderer/src/components/message/MessageMinimap.vue

@@ -1,14 +1,14 @@
 <template>
   <div
-    class="absolute top-0 right-0 w-14 min-h-[148px] box-border rounded-[6px] py-4 px-3 flex flex-col items-stretch gap-0 pointer-events-none z-[5] overflow-hidden"
+    class="absolute top-0 right-0 w-14 min-h-[148px] box-border rounded-md py-4 px-3 flex flex-col items-stretch gap-0 pointer-events-none z-[5] overflow-hidden"
     :style="containerStyle"
   >
     <div
       class="relative flex-none flex justify-end overflow-hidden w-full pointer-events-auto"
       :style="trackStyle"
     >
       <div
-        class="flex flex-col items-end gap-1 w-full relative z-[2]"
+        class="flex flex-col items-end gap-1 w-full relative z-2"
         role="list"
         :style="barsWrapperStyle"
       >

src/renderer/src/composables/useArtifactExport.ts

@@ -1,4 +1,5 @@
 // === Types ===
+import { downloadBlob } from '@/lib/download'
 import type { ArtifactState } from '@/stores/artifact'
 
 // === External Dependencies ===
@@ -42,20 +43,6 @@ const getFileExtension = (type: string): string => {
   }
 }
 
-/**
- * Download blob as file
- */
-const downloadBlob = (blob: Blob, filename: string) => {
-  const url = URL.createObjectURL(blob)
-  const link = document.createElement('a')
-  link.href = url
-  link.download = filename
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-  URL.revokeObjectURL(url)
-}
-
 /**
  * Composable for managing artifact export and copy operations
  *

src/renderer/src/lib/download.ts

@@ -0,0 +1,17 @@
+/**
+ * Download blob as file
+ */
+export const downloadBlob = (blob: Blob, filename: string) => {
+  try {
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = filename
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    console.error('Failed to download file:', error)
+  }
+}